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.
Files changed (41) hide show
  1. package/lib/commonjs/PagerViewAdapter.js +2 -1
  2. package/lib/commonjs/PagerViewAdapter.js.map +1 -1
  3. package/lib/commonjs/PanResponderAdapter.js +2 -1
  4. package/lib/commonjs/PanResponderAdapter.js.map +1 -1
  5. package/lib/commonjs/SceneMap.js +9 -12
  6. package/lib/commonjs/SceneMap.js.map +1 -1
  7. package/lib/commonjs/SceneView.js +54 -101
  8. package/lib/commonjs/SceneView.js.map +1 -1
  9. package/lib/commonjs/TabBar.js +327 -327
  10. package/lib/commonjs/TabBar.js.map +1 -1
  11. package/lib/commonjs/TabBarIndicator.js +81 -99
  12. package/lib/commonjs/TabBarIndicator.js.map +1 -1
  13. package/lib/commonjs/TabBarItem.js +184 -161
  14. package/lib/commonjs/TabBarItem.js.map +1 -1
  15. package/lib/module/PagerViewAdapter.js +2 -1
  16. package/lib/module/PagerViewAdapter.js.map +1 -1
  17. package/lib/module/PanResponderAdapter.js +2 -1
  18. package/lib/module/PanResponderAdapter.js.map +1 -1
  19. package/lib/module/SceneMap.js +9 -14
  20. package/lib/module/SceneMap.js.map +1 -1
  21. package/lib/module/SceneView.js +53 -98
  22. package/lib/module/SceneView.js.map +1 -1
  23. package/lib/module/TabBar.js +323 -323
  24. package/lib/module/TabBar.js.map +1 -1
  25. package/lib/module/TabBarIndicator.js +74 -92
  26. package/lib/module/TabBarIndicator.js.map +1 -1
  27. package/lib/module/TabBarItem.js +178 -154
  28. package/lib/module/TabBarItem.js.map +1 -1
  29. package/lib/typescript/SceneMap.d.ts +5 -3
  30. package/lib/typescript/SceneView.d.ts +1 -18
  31. package/lib/typescript/TabBar.d.ts +7 -38
  32. package/lib/typescript/TabBarIndicator.d.ts +2 -10
  33. package/lib/typescript/TabBarItem.d.ts +3 -5
  34. package/package.json +4 -1
  35. package/src/PagerViewAdapter.tsx +6 -1
  36. package/src/PanResponderAdapter.tsx +6 -3
  37. package/src/SceneMap.tsx +11 -7
  38. package/src/SceneView.tsx +70 -106
  39. package/src/TabBar.tsx +451 -391
  40. package/src/TabBarIndicator.tsx +108 -114
  41. package/src/TabBarItem.tsx +214 -185
@@ -1,23 +1,18 @@
1
1
  import * as React from 'react';
2
-
3
- class SceneComponent extends React.PureComponent {
4
- render() {
5
- const {
6
- component,
7
- ...rest
8
- } = this.props;
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 _ref => {
10
+ return _ref2 => {
16
11
  let {
17
12
  route,
18
13
  jumpTo,
19
14
  position
20
- } = _ref;
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","PureComponent","render","component","rest","props","createElement","SceneMap","scenes","route","jumpTo","position","key"],"sources":["SceneMap.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { SceneRendererProps } from './types';\n\nclass SceneComponent<\n T extends { component: React.ComponentType<any> }\n> extends React.PureComponent<T> {\n render() {\n const { component, ...rest } = this.props;\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 }: SceneRendererProps & { route: any }) => (\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;;AAGA,MAAMC,cAAN,SAEUD,KAAK,CAACE,aAFhB,CAEiC;EAC/BC,MAAM,GAAG;IACP,MAAM;MAAEC,SAAF;MAAa,GAAGC;IAAhB,IAAyB,KAAKC,KAApC;IACA,oBAAON,KAAK,CAACO,aAAN,CAAoBH,SAApB,EAA+BC,IAA/B,CAAP;EACD;;AAJ8B;;AAOjC,eAAe,SAASG,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"}
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"}
@@ -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 class SceneView extends React.Component {
6
- constructor() {
7
- super(...arguments);
8
-
9
- _defineProperty(this, "state", {
10
- loading: Math.abs(this.props.navigationState.index - this.props.index) > this.props.lazyPreloadDistance
11
- });
12
-
13
- _defineProperty(this, "timerHandler", void 0);
14
-
15
- _defineProperty(this, "unsubscribe", null);
16
-
17
- _defineProperty(this, "handleEnter", value => {
18
- const {
19
- index
20
- } = this.props; // If we're entering the current route, we need to load it
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
- this.setState(prevState => {
24
- if (prevState.loading) {
25
- return {
26
- loading: false
27
- };
25
+ setIsLoading(prevState => {
26
+ if (prevState) {
27
+ return false;
28
28
  }
29
29
 
30
- return null;
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
- return null;
45
- }
35
+ let unsubscribe;
36
+ let timer;
46
37
 
47
- componentDidMount() {
48
- if (this.props.lazy) {
38
+ if (lazy && isLoading) {
49
39
  // If lazy mode is enabled, listen to when we enter screens
50
- this.unsubscribe = this.props.addEnterListener(this.handleEnter);
51
- } else if (this.state.loading) {
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
- this.timerHandler = setTimeout(() => this.setState({
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","Component","loading","Math","abs","props","navigationState","index","lazyPreloadDistance","value","setState","prevState","getDerivedStateFromProps","state","componentDidMount","lazy","unsubscribe","addEnterListener","handleEnter","timerHandler","setTimeout","componentDidUpdate","prevProps","componentWillUnmount","clearTimeout","undefined","render","layout","style","focused","styles","route","width","absoluteFill","children","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\ntype State = {\n loading: boolean;\n};\n\nexport default class SceneView<T extends Route> extends React.Component<\n Props<T>,\n State\n> {\n static getDerivedStateFromProps(props: Props<Route>, state: State) {\n if (\n state.loading &&\n Math.abs(props.navigationState.index - props.index) <=\n props.lazyPreloadDistance\n ) {\n // Always render the route when it becomes focused\n return { loading: false };\n }\n\n return null;\n }\n\n state = {\n loading:\n Math.abs(this.props.navigationState.index - this.props.index) >\n this.props.lazyPreloadDistance,\n };\n\n componentDidMount() {\n if (this.props.lazy) {\n // If lazy mode is enabled, listen to when we enter screens\n this.unsubscribe = this.props.addEnterListener(this.handleEnter);\n } else if (this.state.loading) {\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 this.timerHandler = setTimeout(\n () => this.setState({ loading: false }),\n 0\n );\n }\n }\n\n componentDidUpdate(prevProps: Props<T>, prevState: State) {\n if (\n this.props.lazy !== prevProps.lazy ||\n this.state.loading !== prevState.loading\n ) {\n // We only need the listener if the tab hasn't loaded yet and lazy is enabled\n if (this.props.lazy && this.state.loading) {\n this.unsubscribe?.();\n this.unsubscribe = this.props.addEnterListener(this.handleEnter);\n } else {\n this.unsubscribe?.();\n }\n }\n }\n\n componentWillUnmount() {\n this.unsubscribe?.();\n\n if (this.timerHandler) {\n clearTimeout(this.timerHandler);\n this.timerHandler = undefined;\n }\n }\n\n private timerHandler: NodeJS.Timeout | undefined;\n\n private unsubscribe: (() => void) | null = null;\n\n private handleEnter = (value: number) => {\n const { index } = this.props;\n\n // If we're entering the current route, we need to load it\n if (value === index) {\n this.setState((prevState) => {\n if (prevState.loading) {\n return { loading: false };\n }\n\n return null;\n });\n }\n };\n\n render() {\n const { navigationState, index, layout, style } = this.props;\n const { loading } = this.state;\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 ? this.props.children({ loading }) : null\n }\n </View>\n );\n }\n}\n\nconst styles = StyleSheet.create({\n route: {\n flex: 1,\n overflow: 'hidden',\n },\n});\n"],"mappings":"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"}
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"}