1 | var __rest = (this && this.__rest) || function (s, e) {
|
2 | var t = {};
|
3 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
4 | t[p] = s[p];
|
5 | if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
6 | for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
7 | if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
8 | t[p[i]] = s[p[i]];
|
9 | }
|
10 | return t;
|
11 | };
|
12 | import React from 'react';
|
13 | import { View, Animated, StyleSheet, } from 'react-native';
|
14 | import Button from '../buttons/Button';
|
15 | import { withTheme } from '../config';
|
16 | import Color from 'color';
|
17 | const TabItem = (_a) => {
|
18 | var _b, _c;
|
19 | var { active, theme, titleStyle, containerStyle, buttonStyle, variant, iconPosition = 'top', title } = _a, props = __rest(_a, ["active", "theme", "titleStyle", "containerStyle", "buttonStyle", "variant", "iconPosition", "title"]);
|
20 | return (<Button accessibilityRole="tab" accessibilityState={{ selected: active }} accessibilityValue={typeof title === 'string' ? { text: title } : undefined} buttonStyle={[styles.buttonStyle, buttonStyle]} titleStyle={[
|
21 | styles.titleStyle,
|
22 | {
|
23 | color: variant === 'primary' ? 'white' : (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.secondary,
|
24 | paddingVertical: !props.icon ? 8 : 2,
|
25 | },
|
26 | titleStyle,
|
27 | ]} containerStyle={[
|
28 | styles.containerStyle,
|
29 | {
|
30 | backgroundColor: active
|
31 | ? Color((_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.secondary).alpha(0.2).rgb().toString()
|
32 | : 'transparent',
|
33 | },
|
34 | containerStyle,
|
35 | ]} iconPosition={iconPosition} title={title} {...props}/>);
|
36 | };
|
37 | const TabContainer = (_a) => {
|
38 | var _b, _c;
|
39 | var { theme, children, value, onChange = () => { }, indicatorStyle, disableIndicator, variant } = _a, props = __rest(_a, ["theme", "children", "value", "onChange", "indicatorStyle", "disableIndicator", "variant"]);
|
40 | const [dim, setDim] = React.useState({ width: 0 });
|
41 | const { current: animation } = React.useRef(new Animated.Value(0));
|
42 | React.useEffect(() => {
|
43 | Animated.timing(animation, {
|
44 | toValue: value,
|
45 | useNativeDriver: true,
|
46 | duration: 170,
|
47 | }).start();
|
48 | }, [animation, value]);
|
49 | const WIDTH = dim.width / React.Children.count(children);
|
50 | return (<>
|
51 | <View {...props} accessibilityRole="tablist" style={[
|
52 | styles.viewStyle,
|
53 | variant === 'primary' && {
|
54 | backgroundColor: (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary,
|
55 | },
|
56 | ]} onLayout={({ nativeEvent: { layout } }) => setDim(Object(layout))}>
|
57 | {React.Children.map(children, (child, index) => {
|
58 | return React.cloneElement(child, {
|
59 | onPress: () => onChange(index),
|
60 | active: index === value,
|
61 | variant,
|
62 | });
|
63 | })}
|
64 | {!disableIndicator && (<Animated.View style={[
|
65 | styles.indicator,
|
66 | {
|
67 | backgroundColor: (_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.secondary,
|
68 | transform: [
|
69 | {
|
70 | translateX: animation.interpolate({
|
71 | inputRange: [0, 1],
|
72 | outputRange: [0, WIDTH],
|
73 | }),
|
74 | },
|
75 | ],
|
76 | },
|
77 | indicatorStyle,
|
78 | ]}>
|
79 | <View style={{ width: WIDTH }}/>
|
80 | </Animated.View>)}
|
81 | </View>
|
82 | </>);
|
83 | };
|
84 | const Tab = Object.assign(TabContainer, {
|
85 | Item: TabItem,
|
86 | });
|
87 | export { Tab };
|
88 | export default Object.assign(withTheme(TabContainer, 'Tab'), {
|
89 | Item: withTheme(TabItem, 'TabItem'),
|
90 | });
|
91 | const styles = StyleSheet.create({
|
92 | buttonStyle: {
|
93 | borderRadius: 0,
|
94 | backgroundColor: 'transparent',
|
95 | },
|
96 | titleStyle: {
|
97 | paddingHorizontal: 16,
|
98 | paddingVertical: 8,
|
99 | textTransform: 'uppercase',
|
100 | },
|
101 | containerStyle: {
|
102 | flex: 1,
|
103 | borderRadius: 0,
|
104 | },
|
105 | viewStyle: {
|
106 | flexDirection: 'row',
|
107 | position: 'relative',
|
108 | },
|
109 | indicator: {
|
110 | display: 'flex',
|
111 | position: 'absolute',
|
112 | height: 2,
|
113 | bottom: 0,
|
114 | },
|
115 | });
|