-
Notifications
You must be signed in to change notification settings - Fork 0
/
TabUtilsBar.js
122 lines (104 loc) · 3.76 KB
/
TabUtilsBar.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
/**
* Created by ananya.chandra on 02/04/18.
*/
import React from 'react';
import {View, StyleSheet, Animated} from 'react-native';
import PropTypes from 'prop-types';
import TabIndicators from './TabIndicators';
export default class TabUtilsBar extends React.Component {
static propTypes = {
/**
* Pass an array of views.
* eg. [<View1>, <View2>, <View3>] - Each view for each tab.
* Can also pass array of views as an array element.
* eg. [<View1>, [<View2.1>, <View2.2>], <View3>] - View2.1 and View2.2 will both appear for tab 2.
*/
buttonViews: PropTypes.array.isRequired,
/**
* Default is 0.5 - The buttons completely fade away at midway point while scrolling
* between two tabs.
*/
buttonsFadeOffset: PropTypes.number,
selectedTabIndex: PropTypes.number.isRequired,
showTabIndicators: PropTypes.bool,
tabIndicatorProps: PropTypes.object,
tabUtilsBarContainer: PropTypes.object,
tabUtilsButtonsContainer: PropTypes.object
};
constructor(props) {
super(props);
this._toggleSwipeStopped = this._toggleSwipeStopped.bind(this);
this._openingTabIndex = props.selectedTabIndex;
this.state = {
offset: new Animated.Value(this._openingTabIndex),
swipeStopped: true
}
}
componentDidMount() {
this.state.offset.addListener(this._toggleSwipeStopped);
}
_toggleSwipeStopped(offset) {
if (offset.value % 1 === 0) {
this.setState({
swipeStopped: true
});
} else if (this.state.swipeStopped) {
this.setState({
swipeStopped: false
})
}
}
updateOffset(value) {
if (this.tabIndicator) {
this.state.offset.setValue(value);
this.tabIndicator.updateOffset(value);
}
}
render() {
return (
<View style={[styles.tabUtilsBarContainer, this.props.tabUtilsBarContainer]}>
{this.props.buttonViews.map((item, index) => {
const opacity = this.state.offset.interpolate({
inputRange: [
index - 100,
index - this.props.buttonsFadeOffset,
index,
index + this.props.buttonsFadeOffset,
index + 100
],
outputRange: [0, 0, 1, 0, 0]
});
return (
<Animated.View display={!this.state.swipeStopped ? "flex" : (index === this.state.offset._value ? "flex" : "none" )}
style={[styles.tabUtilsButtonsContainer, this.props.tabUtilsButtonsContainer, {opacity: opacity}]}>
{item}
</Animated.View>
);
})}
{this.props.showTabIndicators ?
<TabIndicators ref={(ref) => {this.tabIndicator = ref}}
{...this.props.tabIndicatorProps}
tabs={this.props.buttonViews}
openingTabIndex={this._openingTabIndex}/>
: null}
</View>
);
}
}
TabUtilsBar.defaultProps = {
showTabIndicators: true,
buttonsFadeOffset: 0.5
};
const styles = StyleSheet.create({
tabUtilsBarContainer: {
height: 42,
width: "100%",
backgroundColor: 'transparent'
},
tabUtilsButtonsContainer: {
width: "100%",
position: 'absolute',
flexDirection: 'row',
justifyContent: 'space-between'
}
});