Skip to content

TabBar refactor #1040

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 22 commits into from
Dec 14, 2020
Merged

TabBar refactor #1040

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
edca788
TabBar - use ScrollBar component, deprecate 'badge' prop (use 'badgeP…
Inbal-Tish Nov 8, 2020
800512c
Adjustments for Tablet
Inbal-Tish Nov 16, 2020
06b4d6b
removing borderwidth
Inbal-Tish Nov 16, 2020
da1668a
tabletmargins example
Inbal-Tish Nov 16, 2020
012b00d
remove `useTabletWide` prop
Inbal-Tish Nov 17, 2020
6e56f08
edit comment
Inbal-Tish Nov 17, 2020
9eef8a8
removing tabletMargins prop
Inbal-Tish Nov 18, 2020
d7e9c7c
moving 'darkTheme' prop from TabBarItem to TabBar
Inbal-Tish Nov 18, 2020
92a8b49
passing 'gradientMargins' to ScrollBar
Inbal-Tish Nov 18, 2020
9ed8684
Adding 'containerView' as component container
Inbal-Tish Nov 19, 2020
be451c8
TabBar - adding 'testID' prop; TabBarItem - removing UNSAFE method, u…
Inbal-Tish Nov 19, 2020
099efee
TabBar - removing UNSAFE method
Inbal-Tish Nov 19, 2020
7f2b53e
remove redundant prop
Inbal-Tish Nov 19, 2020
e296738
applying 'containerWidth' to container
Inbal-Tish Nov 19, 2020
0be4725
Adding 'fullWidth' to container
Inbal-Tish Nov 19, 2020
a5264e8
replace BaseComponent with asBaseComponent HOC
Inbal-Tish Dec 9, 2020
29abb8d
TabBarItem to asBaseComponent HOC; updating types
Inbal-Tish Dec 9, 2020
9e6ddc2
fix TabBarItem in TabBar
Inbal-Tish Dec 9, 2020
afdd58a
moving inline styles to stylesheet
Inbal-Tish Dec 9, 2020
d99bdd6
bug fix
Inbal-Tish Dec 9, 2020
0f84faa
Merge branch 'master' of github.com:wix/react-native-ui-lib into chan…
Inbal-Tish Dec 13, 2020
7c1bf03
bug fix
Inbal-Tish Dec 14, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 29 additions & 17 deletions demo/src/screens/componentScreens/TabBarScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export default class TabBarScreen extends Component {
do {
index = Math.floor(Math.random() * this.tabbar.props.children.length);
} while (index === this.state.selectedIndex);

this.setState({selectedIndex: index});
}
};
Expand Down Expand Up @@ -82,7 +82,7 @@ export default class TabBarScreen extends Component {
removeTab = () => {
const index = this.state.selectedIndex;
const newTabs = this.state.currentTabs;

if (newTabs.length >= 0) {
newTabs.splice(index, 1);
}
Expand All @@ -92,7 +92,7 @@ export default class TabBarScreen extends Component {
/** Actions */
getTabs(showAddTab: boolean) {
const tabs = _.map(this.state.currentTabs, tab => this.renderTabs(tab));

if (showAddTab) {
tabs.push(this.renderAddTabsTab());
} else {
Expand Down Expand Up @@ -126,15 +126,20 @@ export default class TabBarScreen extends Component {
<ScrollView style={{overflow: 'visible'}} showsVerticalScrollIndicator={false}>
<View bg-dark80>
<TabBar style={styles.tabbar} selectedIndex={0} enableShadow>
<TabBar.Item
label="single tab"
<TabBar.Item
label="single tab"
labelStyle={{color: Colors.green30, fontWeight: 'bold', textTransform: 'capitalize'}}
/>
</TabBar>

<TabBar style={styles.tabbar} selectedIndex={0} enableShadow>
<TabBar.Item label="Fixed" uppercase style={{backgroundColor: Colors.blue80}}/>
<TabBar.Item label="Tab" badge={{label: '100'}} uppercase style={{backgroundColor: Colors.blue80}}/>
<TabBar
style={styles.tabbar}
selectedIndex={0}
enableShadow
// tabletMargins={{portrait: 0, landscape: 0}}
>
<TabBar.Item label="Fixed" uppercase backgroundColor={Colors.blue80}/>
<TabBar.Item label="Tab" badgeProps={{label: '100'}} uppercase style={{backgroundColor: Colors.blue80}}/>
<TabBar.Item label="Bar" uppercase style={{backgroundColor: Colors.blue80}}/>
</TabBar>

Expand All @@ -146,7 +151,7 @@ export default class TabBarScreen extends Component {

<TabBar style={styles.tabbar} selectedIndex={0} ref={r => (this.tabbar = r)} enableShadow>
<TabBar.Item label="Scroll"/>
<TabBar.Item label="View" badge={{size: 'pimpleSmall'}}/>
<TabBar.Item label="View" badgeProps={{size: 'pimpleSmall'}}/>
<TabBar.Item label="tab"/>
<TabBar.Item label="bar"/>
<TabBar.Item label="Container"/>
Expand All @@ -169,13 +174,20 @@ export default class TabBarScreen extends Component {
{this.getTabs(true)}
</TabBar>

<Button
size={Button.sizes.small}
margin-20
label={`Change index: ${this.state.selectedIndex}`}
onPress={this.changeIndex}
/>
<TabBar style={styles.tabbar} selectedIndex={this.state.selectedIndex} enableShadow backgroundColor={Colors.green70}>
<View center>
<Button
size={Button.sizes.small}
margin-20
label={`Change index: ${this.state.selectedIndex}`}
onPress={this.changeIndex}
/>
</View>
<TabBar
style={styles.tabbar}
selectedIndex={this.state.selectedIndex}
enableShadow
backgroundColor={Colors.green70}
>
<TabBar.Item label="LONG LABEL"/>
<TabBar.Item label="ACTIVE"/>
<TabBar.Item label="INACTIVE"/>
Expand All @@ -187,7 +199,7 @@ export default class TabBarScreen extends Component {
<TabBar.Item label="MODE"/>
</TabBar>

<View row>
<View center row>
<Button size={Button.sizes.small} margin-20 label={`Change Labels`} onPress={this.changeLabels}/>
<Button size={Button.sizes.small} margin-20 label={`Change Color`} onPress={this.changeColors}/>
</View>
Expand Down
Loading