Skip to content

Commit 2ffcc23

Browse files
author
Artur Yorsh
committed
refactor(tab-set): merge tabSet types
1 parent f9989bd commit 2ffcc23

11 files changed

+209
-166
lines changed

‎src/components/tabset/rkTab.component.js

Lines changed: 51 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,8 @@ import {
44
View,
55
Text,
66
Image,
7-
ViewPropTypes,
87
} from 'react-native';
98
import { RkBadge } from '../badge/rkBadge.component';
10-
import { RkComponent } from '../rkComponent';
119

1210
/**
1311
* @extends React.Component
@@ -22,9 +20,8 @@ import { RkComponent } from '../rkComponent';
2220
* @property {boolean} isLazyLoad - Defines if tab should use content lazy loading.
2321
* Default is `true`.
2422
*/
25-
export class RkTab extends RkComponent {
23+
export class RkTab extends React.Component {
2624
static propTypes = {
27-
rkType: RkComponent.propTypes.rkType,
2825
title: PropTypes.string,
2926
icon: PropTypes.node,
3027
badgeTitle: PropTypes.string,
@@ -34,23 +31,45 @@ export class RkTab extends RkComponent {
3431
// used in RkTabView
3532
// eslint-disable-next-line react/no-unused-prop-types,
3633
isLazyLoad: PropTypes.bool,
37-
...ViewPropTypes,
34+
35+
style: PropTypes.shape({
36+
container: PropTypes.shape({
37+
base: View.propTypes.style,
38+
selected: View.propTypes.style,
39+
}),
40+
title: PropTypes.shape({
41+
base: Text.propTypes.style,
42+
selected: Text.propTypes.style,
43+
}),
44+
icon: PropTypes.shape({
45+
base: Image.propTypes.style,
46+
selected: Image.propTypes.style,
47+
}),
48+
}),
3849
};
3950
static defaultProps = {
40-
rkType: RkComponent.defaultProps.rkType,
4151
title: '',
4252
icon: undefined,
4353
badgeTitle: '',
4454
badgePosition: RkBadge.defaultProps.position,
4555
badgeStatus: RkBadge.defaultProps.rkType,
4656
isSelected: false,
4757
isLazyLoad: true,
48-
};
49-
componentName = 'RkTab';
50-
typeMapping = {
51-
container: {},
52-
title: {},
53-
icon: {},
58+
59+
style: {
60+
container: {
61+
base: {},
62+
selected: {},
63+
},
64+
title: {
65+
base: {},
66+
selected: {},
67+
},
68+
icon: {
69+
base: {},
70+
selected: {},
71+
},
72+
},
5473
};
5574

5675
state = {
@@ -67,32 +86,29 @@ export class RkTab extends RkComponent {
6786
return this.props.isSelected !== nextProps.isSelected;
6887
}
6988

70-
defineStyles(additionalTypes) {
71-
const { container, title, icon } = super.defineStyles(additionalTypes);
72-
return {
73-
container: {
74-
base: this.extractNonStyleValue(container, 'base'),
75-
selected: this.state.isSelected ? this.extractNonStyleValue(container, 'selected') : null,
76-
},
77-
title: {
78-
base: this.extractNonStyleValue(title, 'base'),
79-
selected: this.state.isSelected ? this.extractNonStyleValue(title, 'selected') : null,
80-
},
81-
icon: {
82-
base: this.extractNonStyleValue(icon, 'base'),
83-
selected: this.state.isSelected ? this.extractNonStyleValue(icon, 'selected') : null,
84-
},
85-
badge: {
86-
base: { opacity: this.props.badgeTitle.length > 0 ? 1 : 0 },
87-
selected: {},
88-
},
89-
};
90-
}
89+
getContentStyle = (state, style) => ({
90+
container: {
91+
base: style.container.base,
92+
selected: state.isSelected ? style.container.selected : null,
93+
},
94+
title: {
95+
base: style.title.base,
96+
selected: state.isSelected ? style.title.selected : null,
97+
},
98+
icon: {
99+
base: style.icon.base,
100+
selected: this.state.isSelected ? style.icon.selected : null,
101+
},
102+
badge: {
103+
base: { opacity: this.props.badgeTitle.length > 0 ? 1 : 0 },
104+
selected: {},
105+
},
106+
});
91107

92108
render() {
93-
const styles = this.defineStyles(this.props.rkType);
109+
const styles = this.getContentStyle(this.state, this.props.style);
94110
return (
95-
<View style={[styles.container.base, styles.container.selected, this.props.style]}>
111+
<View style={[styles.container.base, styles.container.selected]}>
96112
<RkBadge
97113
rkType={this.props.badgeStatus}
98114
style={[styles.badge.base, styles.badge.selected]}

‎src/components/tabset/rkTabBar.component.js

Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,8 @@ import {
44
View,
55
ScrollView,
66
TouchableOpacity,
7-
ViewPropTypes,
87
} from 'react-native';
9-
import { RkComponent } from '../rkComponent';
8+
import { RkTab } from './rkTab.component';
109

1110
/**
1211
* `RkTabBar` is a component that manages `RkTab`s.
@@ -21,25 +20,34 @@ import { RkComponent } from '../rkComponent';
2120
* @property {number} componentWidth - width of `RkTabBar`.
2221
* Needed for `RkTab` equal distribution.
2322
*/
24-
export class RkTabBar extends RkComponent {
23+
export class RkTabBar extends React.Component {
2524
static propTypes = {
2625
children: PropTypes.arrayOf(PropTypes.element).isRequired,
2726
selectedIndex: PropTypes.number,
2827
isScrollable: PropTypes.bool,
2928
onSelect: PropTypes.func,
30-
3129
componentWidth: PropTypes.number.isRequired,
3230

33-
...ViewPropTypes,
31+
style: PropTypes.shape({
32+
container: PropTypes.shape({
33+
base: ScrollView.propTypes.contentContainerStyle,
34+
scrollable: ScrollView.propTypes.contentContainerStyle,
35+
}),
36+
tab: RkTab.propTypes.style,
37+
}),
3438
};
3539
static defaultProps = {
3640
selectedIndex: 0,
3741
isScrollable: false,
3842
onSelect: (() => null),
39-
};
40-
componentName = 'RkTabBar';
41-
typeMapping = {
42-
container: {},
43+
44+
style: {
45+
container: {
46+
base: {},
47+
scrollable: {},
48+
},
49+
tab: RkTab.defaultProps.style,
50+
},
4351
};
4452

4553
containerRef = undefined;
@@ -86,36 +94,27 @@ export class RkTabBar extends RkComponent {
8694
this.containerRef = ref;
8795
};
8896

89-
defineStyles(additionalTypes) {
90-
const derivedStyles = super.defineStyles(additionalTypes);
91-
const containerStyleKey = this.props.isScrollable ? 'scrollable' : 'base';
92-
return {
93-
container: this.extractNonStyleValue(derivedStyles.container, containerStyleKey),
94-
};
95-
}
96-
9797
renderItem = (item, index) => (
9898
<TouchableOpacity
99+
style={{ width: this.props.componentWidth / this.props.children.length }}
99100
key={index.toString()}
100101
activeOpacity={0.5}
101102
onPress={() => this.onItemPress(index)}>
102103
{React.cloneElement(item, {
103-
style: {
104-
width: this.props.componentWidth / this.props.children.length,
105-
},
106104
isSelected: this.props.selectedIndex === index,
105+
style: this.props.style.tab,
107106
})}
108107
</TouchableOpacity>
109108
);
110109

111110
renderChildComponents = () => this.props.children.map(this.renderItem);
112111

113112
render() {
114-
const styles = this.defineStyles(this.props.rkType);
113+
const { container } = this.props.style;
115114
return (
116115
<View>
117116
<ScrollView
118-
contentContainerStyle={styles.container}
117+
contentContainerStyle={this.props.isScrollable ? container.base : container.scrollable}
119118
ref={this.setContainerRef}
120119
horizontal={true}
121120
bounces={false}

‎src/components/tabset/rkTabBarIndicator.component.js

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,9 @@ import {
44
View,
55
Animated,
66
} from 'react-native';
7-
import { RkComponent } from '../rkComponent';
87

98
const defaultAnimationDuration = 200;
109

11-
1210
/**
1311
* `RkTabBarIndicator` is a component that indicates `RkTabBar` current selection.
1412
*
@@ -18,20 +16,21 @@ const defaultAnimationDuration = 200;
1816
* Should be one of: `` or `rounded`.
1917
* @property {number} componentWidth - width of `RkTabBar`.
2018
*/
21-
export class RkTabBarIndicator extends RkComponent {
19+
export class RkTabBarIndicator extends React.Component {
2220
static propTypes = {
23-
rkType: PropTypes.oneOf(['', 'rounded']),
2421
itemCount: PropTypes.number.isRequired,
25-
2622
componentWidth: PropTypes.number.isRequired,
23+
24+
style: PropTypes.shape({
25+
container: View.propTypes.style,
26+
content: View.propTypes.style,
27+
}),
2728
};
2829
static defaultProps = {
29-
rkType: RkComponent.defaultProps.rkType,
30-
};
31-
componentName = 'RkTabBarIndicator';
32-
typeMapping = {
33-
container: {},
34-
content: {},
30+
style: {
31+
container: {},
32+
content: {},
33+
},
3534
};
3635

3736
contentOffset = new Animated.Value(0);
@@ -88,14 +87,13 @@ export class RkTabBarIndicator extends RkComponent {
8887
};
8988

9089
render() {
91-
const styles = super.defineStyles(this.props.rkType);
9290
const transform = {
9391
transform: [{ translateX: this.contentOffset }],
9492
};
9593
return (
96-
<View style={styles.container}>
94+
<View style={this.props.style.container}>
9795
<Animated.View style={[
98-
styles.content,
96+
this.props.style.content,
9997
{ width: this.props.componentWidth / this.props.itemCount },
10098
transform,
10199
]}

‎src/components/tabset/rkTabPager.component.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,19 @@ export class RkTabPager extends React.Component {
2525
shouldUseLazyLoad: PropTypes.func,
2626

2727
componentWidth: PropTypes.number.isRequired,
28+
29+
style: PropTypes.shape({
30+
container: View.propTypes.style,
31+
}),
2832
};
2933
static defaultProps = {
3034
selectedIndex: 0,
3135
onSelect: (() => null),
3236
shouldUseLazyLoad: (() => true),
37+
38+
style: {
39+
container: {},
40+
},
3341
};
3442

3543
state = {
@@ -125,6 +133,7 @@ export class RkTabPager extends React.Component {
125133
render() {
126134
return (
127135
<FlatList
136+
style={this.props.style.container}
128137
ref={this.setContainerRef}
129138
horizontal={true}
130139
pagingEnabled={true}

0 commit comments

Comments
 (0)