react-native-tab-view 3.2.1 → 3.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/PagerViewAdapter.js +2 -1
- package/lib/commonjs/PagerViewAdapter.js.map +1 -1
- package/lib/commonjs/PanResponderAdapter.js +2 -1
- package/lib/commonjs/PanResponderAdapter.js.map +1 -1
- package/lib/commonjs/SceneMap.js +9 -12
- package/lib/commonjs/SceneMap.js.map +1 -1
- package/lib/commonjs/SceneView.js +54 -101
- package/lib/commonjs/SceneView.js.map +1 -1
- package/lib/commonjs/TabBar.js +327 -327
- package/lib/commonjs/TabBar.js.map +1 -1
- package/lib/commonjs/TabBarIndicator.js +81 -99
- package/lib/commonjs/TabBarIndicator.js.map +1 -1
- package/lib/commonjs/TabBarItem.js +184 -161
- package/lib/commonjs/TabBarItem.js.map +1 -1
- package/lib/module/PagerViewAdapter.js +2 -1
- package/lib/module/PagerViewAdapter.js.map +1 -1
- package/lib/module/PanResponderAdapter.js +2 -1
- package/lib/module/PanResponderAdapter.js.map +1 -1
- package/lib/module/SceneMap.js +9 -14
- package/lib/module/SceneMap.js.map +1 -1
- package/lib/module/SceneView.js +53 -98
- package/lib/module/SceneView.js.map +1 -1
- package/lib/module/TabBar.js +323 -323
- package/lib/module/TabBar.js.map +1 -1
- package/lib/module/TabBarIndicator.js +74 -92
- package/lib/module/TabBarIndicator.js.map +1 -1
- package/lib/module/TabBarItem.js +178 -154
- package/lib/module/TabBarItem.js.map +1 -1
- package/lib/typescript/SceneMap.d.ts +5 -3
- package/lib/typescript/SceneView.d.ts +1 -18
- package/lib/typescript/TabBar.d.ts +7 -38
- package/lib/typescript/TabBarIndicator.d.ts +2 -10
- package/lib/typescript/TabBarItem.d.ts +3 -5
- package/package.json +4 -1
- package/src/PagerViewAdapter.tsx +6 -1
- package/src/PanResponderAdapter.tsx +6 -3
- package/src/SceneMap.tsx +11 -7
- package/src/SceneView.tsx +70 -106
- package/src/TabBar.tsx +451 -391
- package/src/TabBarIndicator.tsx +108 -114
- package/src/TabBarItem.tsx +214 -185
package/lib/module/SceneMap.js
CHANGED
|
@@ -1,23 +1,18 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
return /*#__PURE__*/React.createElement(component, rest);
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
}
|
|
13
|
-
|
|
2
|
+
const SceneComponent = /*#__PURE__*/React.memo(_ref => {
|
|
3
|
+
let {
|
|
4
|
+
component,
|
|
5
|
+
...rest
|
|
6
|
+
} = _ref;
|
|
7
|
+
return /*#__PURE__*/React.createElement(component, rest);
|
|
8
|
+
});
|
|
14
9
|
export default function SceneMap(scenes) {
|
|
15
|
-
return
|
|
10
|
+
return _ref2 => {
|
|
16
11
|
let {
|
|
17
12
|
route,
|
|
18
13
|
jumpTo,
|
|
19
14
|
position
|
|
20
|
-
} =
|
|
15
|
+
} = _ref2;
|
|
21
16
|
return /*#__PURE__*/React.createElement(SceneComponent, {
|
|
22
17
|
key: route.key,
|
|
23
18
|
component: scenes[route.key],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","SceneComponent","
|
|
1
|
+
{"version":3,"names":["React","SceneComponent","memo","component","rest","createElement","SceneMap","scenes","route","jumpTo","position","key"],"sources":["SceneMap.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { SceneRendererProps } from './types';\n\ntype SceneProps = {\n route: any;\n} & Omit<SceneRendererProps, 'layout'>;\n\nconst SceneComponent = React.memo(\n <T extends { component: React.ComponentType<any> } & SceneProps>({\n component,\n ...rest\n }: T) => {\n return React.createElement(component, rest);\n }\n);\n\nexport default function SceneMap<T extends any>(scenes: {\n [key: string]: React.ComponentType<T>;\n}) {\n return ({ route, jumpTo, position }: SceneProps) => (\n <SceneComponent\n key={route.key}\n component={scenes[route.key]}\n route={route}\n jumpTo={jumpTo}\n position={position}\n />\n );\n}\n"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAOA,MAAMC,cAAc,gBAAGD,KAAK,CAACE,IAAN,CACrB,QAGS;EAAA,IAHwD;IAC/DC,SAD+D;IAE/D,GAAGC;EAF4D,CAGxD;EACP,oBAAOJ,KAAK,CAACK,aAAN,CAAoBF,SAApB,EAA+BC,IAA/B,CAAP;AACD,CANoB,CAAvB;AASA,eAAe,SAASE,QAAT,CAAiCC,MAAjC,EAEZ;EACD,OAAO;IAAA,IAAC;MAAEC,KAAF;MAASC,MAAT;MAAiBC;IAAjB,CAAD;IAAA,oBACL,oBAAC,cAAD;MACE,GAAG,EAAEF,KAAK,CAACG,GADb;MAEE,SAAS,EAAEJ,MAAM,CAACC,KAAK,CAACG,GAAP,CAFnB;MAGE,KAAK,EAAEH,KAHT;MAIE,MAAM,EAAEC,MAJV;MAKE,QAAQ,EAAEC;IALZ,EADK;EAAA,CAAP;AASD"}
|
package/lib/module/SceneView.js
CHANGED
|
@@ -1,116 +1,71 @@
|
|
|
1
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
2
|
-
|
|
3
1
|
import * as React from 'react';
|
|
4
2
|
import { View, StyleSheet } from 'react-native';
|
|
5
|
-
export default
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
3
|
+
export default function SceneView(_ref) {
|
|
4
|
+
let {
|
|
5
|
+
children,
|
|
6
|
+
navigationState,
|
|
7
|
+
lazy,
|
|
8
|
+
layout,
|
|
9
|
+
index,
|
|
10
|
+
lazyPreloadDistance,
|
|
11
|
+
addEnterListener,
|
|
12
|
+
style
|
|
13
|
+
} = _ref;
|
|
14
|
+
const [isLoading, setIsLoading] = React.useState(Math.abs(navigationState.index - index) > lazyPreloadDistance);
|
|
15
|
+
|
|
16
|
+
if (isLoading && Math.abs(navigationState.index - index) <= lazyPreloadDistance) {
|
|
17
|
+
// Always render the route when it becomes focused
|
|
18
|
+
setIsLoading(false);
|
|
19
|
+
}
|
|
21
20
|
|
|
21
|
+
React.useEffect(() => {
|
|
22
|
+
const handleEnter = value => {
|
|
23
|
+
// If we're entering the current route, we need to load it
|
|
22
24
|
if (value === index) {
|
|
23
|
-
|
|
24
|
-
if (prevState
|
|
25
|
-
return
|
|
26
|
-
loading: false
|
|
27
|
-
};
|
|
25
|
+
setIsLoading(prevState => {
|
|
26
|
+
if (prevState) {
|
|
27
|
+
return false;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
return
|
|
30
|
+
return prevState;
|
|
31
31
|
});
|
|
32
32
|
}
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
static getDerivedStateFromProps(props, state) {
|
|
37
|
-
if (state.loading && Math.abs(props.navigationState.index - props.index) <= props.lazyPreloadDistance) {
|
|
38
|
-
// Always render the route when it becomes focused
|
|
39
|
-
return {
|
|
40
|
-
loading: false
|
|
41
|
-
};
|
|
42
|
-
}
|
|
33
|
+
};
|
|
43
34
|
|
|
44
|
-
|
|
45
|
-
|
|
35
|
+
let unsubscribe;
|
|
36
|
+
let timer;
|
|
46
37
|
|
|
47
|
-
|
|
48
|
-
if (this.props.lazy) {
|
|
38
|
+
if (lazy && isLoading) {
|
|
49
39
|
// If lazy mode is enabled, listen to when we enter screens
|
|
50
|
-
|
|
51
|
-
} else if (
|
|
40
|
+
unsubscribe = addEnterListener(handleEnter);
|
|
41
|
+
} else if (isLoading) {
|
|
52
42
|
// If lazy mode is not enabled, render the scene with a delay if not loaded already
|
|
53
43
|
// This improves the initial startup time as the scene is no longer blocking
|
|
54
|
-
|
|
55
|
-
loading: false
|
|
56
|
-
}), 0);
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
componentDidUpdate(prevProps, prevState) {
|
|
61
|
-
if (this.props.lazy !== prevProps.lazy || this.state.loading !== prevState.loading) {
|
|
62
|
-
// We only need the listener if the tab hasn't loaded yet and lazy is enabled
|
|
63
|
-
if (this.props.lazy && this.state.loading) {
|
|
64
|
-
var _this$unsubscribe;
|
|
65
|
-
|
|
66
|
-
(_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 ? void 0 : _this$unsubscribe.call(this);
|
|
67
|
-
this.unsubscribe = this.props.addEnterListener(this.handleEnter);
|
|
68
|
-
} else {
|
|
69
|
-
var _this$unsubscribe2;
|
|
70
|
-
|
|
71
|
-
(_this$unsubscribe2 = this.unsubscribe) === null || _this$unsubscribe2 === void 0 ? void 0 : _this$unsubscribe2.call(this);
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
componentWillUnmount() {
|
|
77
|
-
var _this$unsubscribe3;
|
|
78
|
-
|
|
79
|
-
(_this$unsubscribe3 = this.unsubscribe) === null || _this$unsubscribe3 === void 0 ? void 0 : _this$unsubscribe3.call(this);
|
|
80
|
-
|
|
81
|
-
if (this.timerHandler) {
|
|
82
|
-
clearTimeout(this.timerHandler);
|
|
83
|
-
this.timerHandler = undefined;
|
|
44
|
+
timer = setTimeout(() => setIsLoading(false), 0);
|
|
84
45
|
}
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
render() {
|
|
88
|
-
const {
|
|
89
|
-
navigationState,
|
|
90
|
-
index,
|
|
91
|
-
layout,
|
|
92
|
-
style
|
|
93
|
-
} = this.props;
|
|
94
|
-
const {
|
|
95
|
-
loading
|
|
96
|
-
} = this.state;
|
|
97
|
-
const focused = navigationState.index === index;
|
|
98
|
-
return /*#__PURE__*/React.createElement(View, {
|
|
99
|
-
accessibilityElementsHidden: !focused,
|
|
100
|
-
importantForAccessibility: focused ? 'auto' : 'no-hide-descendants',
|
|
101
|
-
style: [styles.route, // If we don't have the layout yet, make the focused screen fill the container
|
|
102
|
-
// This avoids delay before we are able to render pages side by side
|
|
103
|
-
layout.width ? {
|
|
104
|
-
width: layout.width
|
|
105
|
-
} : focused ? StyleSheet.absoluteFill : null, style]
|
|
106
|
-
}, // Only render the route only if it's either focused or layout is available
|
|
107
|
-
// When layout is not available, we must not render unfocused routes
|
|
108
|
-
// so that the focused route can fill the screen
|
|
109
|
-
focused || layout.width ? this.props.children({
|
|
110
|
-
loading
|
|
111
|
-
}) : null);
|
|
112
|
-
}
|
|
113
46
|
|
|
47
|
+
return () => {
|
|
48
|
+
var _unsubscribe;
|
|
49
|
+
|
|
50
|
+
(_unsubscribe = unsubscribe) === null || _unsubscribe === void 0 ? void 0 : _unsubscribe();
|
|
51
|
+
clearTimeout(timer);
|
|
52
|
+
};
|
|
53
|
+
}, [addEnterListener, index, isLoading, lazy]);
|
|
54
|
+
const focused = navigationState.index === index;
|
|
55
|
+
return /*#__PURE__*/React.createElement(View, {
|
|
56
|
+
accessibilityElementsHidden: !focused,
|
|
57
|
+
importantForAccessibility: focused ? 'auto' : 'no-hide-descendants',
|
|
58
|
+
style: [styles.route, // If we don't have the layout yet, make the focused screen fill the container
|
|
59
|
+
// This avoids delay before we are able to render pages side by side
|
|
60
|
+
layout.width ? {
|
|
61
|
+
width: layout.width
|
|
62
|
+
} : focused ? StyleSheet.absoluteFill : null, style]
|
|
63
|
+
}, // Only render the route only if it's either focused or layout is available
|
|
64
|
+
// When layout is not available, we must not render unfocused routes
|
|
65
|
+
// so that the focused route can fill the screen
|
|
66
|
+
focused || layout.width ? children({
|
|
67
|
+
loading: isLoading
|
|
68
|
+
}) : null);
|
|
114
69
|
}
|
|
115
70
|
const styles = StyleSheet.create({
|
|
116
71
|
route: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","View","StyleSheet","SceneView","
|
|
1
|
+
{"version":3,"names":["React","View","StyleSheet","SceneView","children","navigationState","lazy","layout","index","lazyPreloadDistance","addEnterListener","style","isLoading","setIsLoading","useState","Math","abs","useEffect","handleEnter","value","prevState","unsubscribe","timer","setTimeout","clearTimeout","focused","styles","route","width","absoluteFill","loading","create","flex","overflow"],"sources":["SceneView.tsx"],"sourcesContent":["import * as React from 'react';\nimport { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';\nimport type {\n SceneRendererProps,\n EventEmitterProps,\n NavigationState,\n Route,\n} from './types';\n\ntype Props<T extends Route> = SceneRendererProps &\n EventEmitterProps & {\n navigationState: NavigationState<T>;\n lazy: boolean;\n lazyPreloadDistance: number;\n index: number;\n children: (props: { loading: boolean }) => React.ReactNode;\n style?: StyleProp<ViewStyle>;\n };\n\nexport default function SceneView<T extends Route>({\n children,\n navigationState,\n lazy,\n layout,\n index,\n lazyPreloadDistance,\n addEnterListener,\n style,\n}: Props<T>) {\n const [isLoading, setIsLoading] = React.useState(\n Math.abs(navigationState.index - index) > lazyPreloadDistance\n );\n\n if (\n isLoading &&\n Math.abs(navigationState.index - index) <= lazyPreloadDistance\n ) {\n // Always render the route when it becomes focused\n setIsLoading(false);\n }\n\n React.useEffect(() => {\n const handleEnter = (value: number) => {\n // If we're entering the current route, we need to load it\n if (value === index) {\n setIsLoading((prevState) => {\n if (prevState) {\n return false;\n }\n return prevState;\n });\n }\n };\n\n let unsubscribe: (() => void) | undefined;\n let timer: NodeJS.Timeout;\n\n if (lazy && isLoading) {\n // If lazy mode is enabled, listen to when we enter screens\n unsubscribe = addEnterListener(handleEnter);\n } else if (isLoading) {\n // If lazy mode is not enabled, render the scene with a delay if not loaded already\n // This improves the initial startup time as the scene is no longer blocking\n timer = setTimeout(() => setIsLoading(false), 0);\n }\n\n return () => {\n unsubscribe?.();\n clearTimeout(timer);\n };\n }, [addEnterListener, index, isLoading, lazy]);\n\n const focused = navigationState.index === index;\n\n return (\n <View\n accessibilityElementsHidden={!focused}\n importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}\n style={[\n styles.route,\n // If we don't have the layout yet, make the focused screen fill the container\n // This avoids delay before we are able to render pages side by side\n layout.width\n ? { width: layout.width }\n : focused\n ? StyleSheet.absoluteFill\n : null,\n style,\n ]}\n >\n {\n // Only render the route only if it's either focused or layout is available\n // When layout is not available, we must not render unfocused routes\n // so that the focused route can fill the screen\n focused || layout.width ? children({ loading: isLoading }) : null\n }\n </View>\n );\n}\n\nconst styles = StyleSheet.create({\n route: {\n flex: 1,\n overflow: 'hidden',\n },\n});\n"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,IAAT,EAAeC,UAAf,QAAuD,cAAvD;AAkBA,eAAe,SAASC,SAAT,OASF;EAAA,IATsC;IACjDC,QADiD;IAEjDC,eAFiD;IAGjDC,IAHiD;IAIjDC,MAJiD;IAKjDC,KALiD;IAMjDC,mBANiD;IAOjDC,gBAPiD;IAQjDC;EARiD,CAStC;EACX,MAAM,CAACC,SAAD,EAAYC,YAAZ,IAA4Bb,KAAK,CAACc,QAAN,CAChCC,IAAI,CAACC,GAAL,CAASX,eAAe,CAACG,KAAhB,GAAwBA,KAAjC,IAA0CC,mBADV,CAAlC;;EAIA,IACEG,SAAS,IACTG,IAAI,CAACC,GAAL,CAASX,eAAe,CAACG,KAAhB,GAAwBA,KAAjC,KAA2CC,mBAF7C,EAGE;IACA;IACAI,YAAY,CAAC,KAAD,CAAZ;EACD;;EAEDb,KAAK,CAACiB,SAAN,CAAgB,MAAM;IACpB,MAAMC,WAAW,GAAIC,KAAD,IAAmB;MACrC;MACA,IAAIA,KAAK,KAAKX,KAAd,EAAqB;QACnBK,YAAY,CAAEO,SAAD,IAAe;UAC1B,IAAIA,SAAJ,EAAe;YACb,OAAO,KAAP;UACD;;UACD,OAAOA,SAAP;QACD,CALW,CAAZ;MAMD;IACF,CAVD;;IAYA,IAAIC,WAAJ;IACA,IAAIC,KAAJ;;IAEA,IAAIhB,IAAI,IAAIM,SAAZ,EAAuB;MACrB;MACAS,WAAW,GAAGX,gBAAgB,CAACQ,WAAD,CAA9B;IACD,CAHD,MAGO,IAAIN,SAAJ,EAAe;MACpB;MACA;MACAU,KAAK,GAAGC,UAAU,CAAC,MAAMV,YAAY,CAAC,KAAD,CAAnB,EAA4B,CAA5B,CAAlB;IACD;;IAED,OAAO,MAAM;MAAA;;MACX,gBAAAQ,WAAW,UAAX;MACAG,YAAY,CAACF,KAAD,CAAZ;IACD,CAHD;EAID,CA7BD,EA6BG,CAACZ,gBAAD,EAAmBF,KAAnB,EAA0BI,SAA1B,EAAqCN,IAArC,CA7BH;EA+BA,MAAMmB,OAAO,GAAGpB,eAAe,CAACG,KAAhB,KAA0BA,KAA1C;EAEA,oBACE,oBAAC,IAAD;IACE,2BAA2B,EAAE,CAACiB,OADhC;IAEE,yBAAyB,EAAEA,OAAO,GAAG,MAAH,GAAY,qBAFhD;IAGE,KAAK,EAAE,CACLC,MAAM,CAACC,KADF,EAEL;IACA;IACApB,MAAM,CAACqB,KAAP,GACI;MAAEA,KAAK,EAAErB,MAAM,CAACqB;IAAhB,CADJ,GAEIH,OAAO,GACPvB,UAAU,CAAC2B,YADJ,GAEP,IARC,EASLlB,KATK;EAHT,GAgBI;EACA;EACA;EACAc,OAAO,IAAIlB,MAAM,CAACqB,KAAlB,GAA0BxB,QAAQ,CAAC;IAAE0B,OAAO,EAAElB;EAAX,CAAD,CAAlC,GAA6D,IAnBjE,CADF;AAwBD;AAED,MAAMc,MAAM,GAAGxB,UAAU,CAAC6B,MAAX,CAAkB;EAC/BJ,KAAK,EAAE;IACLK,IAAI,EAAE,CADD;IAELC,QAAQ,EAAE;EAFL;AADwB,CAAlB,CAAf"}
|