@r0b0t3d/react-native-collapsible 1.2.0-alpha.3 → 1.2.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/components/scrollable/CollapsibleFlatList.js +10 -2
- package/lib/commonjs/components/scrollable/CollapsibleFlatList.js.map +1 -1
- package/lib/commonjs/components/scrollable/CollapsibleScrollView.js +5 -1
- package/lib/commonjs/components/scrollable/CollapsibleScrollView.js.map +1 -1
- package/lib/commonjs/components/scrollable/useAnimatedScroll.js +5 -3
- package/lib/commonjs/components/scrollable/useAnimatedScroll.js.map +1 -1
- package/lib/commonjs/withCollapsibleContext.js +8 -0
- package/lib/commonjs/withCollapsibleContext.js.map +1 -1
- package/lib/module/components/scrollable/CollapsibleFlatList.js +10 -2
- package/lib/module/components/scrollable/CollapsibleFlatList.js.map +1 -1
- package/lib/module/components/scrollable/CollapsibleScrollView.js +5 -1
- package/lib/module/components/scrollable/CollapsibleScrollView.js.map +1 -1
- package/lib/module/components/scrollable/useAnimatedScroll.js +5 -3
- package/lib/module/components/scrollable/useAnimatedScroll.js.map +1 -1
- package/lib/module/withCollapsibleContext.js +8 -0
- package/lib/module/withCollapsibleContext.js.map +1 -1
- package/lib/typescript/components/scrollable/useAnimatedScroll.d.ts +3 -1
- package/lib/typescript/types.d.ts +7 -0
- package/package.json +1 -1
- package/src/components/scrollable/CollapsibleFlatList.tsx +8 -0
- package/src/components/scrollable/CollapsibleScrollView.tsx +5 -0
- package/src/components/scrollable/useAnimatedScroll.ts +5 -1
- package/src/types.ts +8 -0
- package/src/withCollapsibleContext.tsx +4 -0
|
@@ -58,6 +58,11 @@ function CollapsibleFlatList({
|
|
|
58
58
|
animated
|
|
59
59
|
});
|
|
60
60
|
}, []);
|
|
61
|
+
const scrollToIndex = (0, _react.useCallback)(params => {
|
|
62
|
+
var _scrollViewRef$curren2;
|
|
63
|
+
|
|
64
|
+
(_scrollViewRef$curren2 = scrollViewRef.current) === null || _scrollViewRef$curren2 === void 0 ? void 0 : _scrollViewRef$curren2.scrollToIndex(params);
|
|
65
|
+
}, []);
|
|
61
66
|
const handleInternalContentHeight = (0, _react.useCallback)(value => {
|
|
62
67
|
if (mounted.current) {
|
|
63
68
|
setInternalContentMinHeight(value);
|
|
@@ -67,7 +72,8 @@ function CollapsibleFlatList({
|
|
|
67
72
|
scrollHandler
|
|
68
73
|
} = (0, _useAnimatedScroll.default)({
|
|
69
74
|
headerSnappable,
|
|
70
|
-
scrollTo
|
|
75
|
+
scrollTo,
|
|
76
|
+
scrollToIndex
|
|
71
77
|
});
|
|
72
78
|
const [internalContentMinHeight, setInternalContentMinHeight] = (0, _react.useState)(contentMinHeight.value);
|
|
73
79
|
(0, _reactNativeReanimated.useAnimatedReaction)(() => {
|
|
@@ -85,6 +91,7 @@ function CollapsibleFlatList({
|
|
|
85
91
|
const handleContentSizeChange = (0, _react.useCallback)((_, height) => {
|
|
86
92
|
contentHeight.current = height;
|
|
87
93
|
}, []);
|
|
94
|
+
const handleScrollToIndexFailed = (0, _react.useCallback)(() => {}, []);
|
|
88
95
|
|
|
89
96
|
const renderListHeader = () => /*#__PURE__*/_react.default.createElement(_reactNative.View, null, /*#__PURE__*/_react.default.createElement(_AnimatedTopView.default, {
|
|
90
97
|
height: headerHeight
|
|
@@ -97,7 +104,8 @@ function CollapsibleFlatList({
|
|
|
97
104
|
bounces: false,
|
|
98
105
|
keyboardDismissMode: "on-drag",
|
|
99
106
|
keyboardShouldPersistTaps: "handled",
|
|
100
|
-
scrollEventThrottle: 1
|
|
107
|
+
scrollEventThrottle: 1,
|
|
108
|
+
onScrollToIndexFailed: handleScrollToIndexFailed
|
|
101
109
|
}, props, {
|
|
102
110
|
style: [styles.container, props.style],
|
|
103
111
|
contentContainerStyle: contentContainerStyle,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["CollapsibleFlatList.tsx"],"names":["AnimatedFlatList","Animated","createAnimatedComponent","FlatList","CollapsibleFlatList","headerSnappable","props","headerHeight","scrollY","contentMinHeight","scrollViewRef","mounted","contentHeight","current","scrollTo","yValue","animated","scrollToOffset","offset","handleInternalContentHeight","value","setInternalContentMinHeight","scrollHandler","internalContentMinHeight","result","previous","contentContainerStyle","styles","contentContainer","minHeight","handleContentSizeChange","_","height","renderListHeader","ListHeaderComponent","container","style","StyleSheet","create","absoluteFillObject","flexGrow","topView","position","top","left","right"],"mappings":";;;;;;;AACA;;AAOA;;AACA;;AAIA;;AACA;;AACA;;AACA;;AAEA;;;;;;;;;;AAEA,MAAMA,gBAAgB,GAAGC,+BAASC,uBAAT,CAAiCC,qBAAjC,CAAzB;;AAKe,SAASC,mBAAT,CAAmC;AAChDC,EAAAA,eAAe,GAAG,IAD8B;AAEhD,KAAGC;AAF6C,CAAnC,EAGC;AACd,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,MAA4B,qCAAlC;AACA,QAAM;AAAEC,IAAAA,gBAAF;AAAoBC,IAAAA;AAApB,MAAsC,6CAA5C;AACA,QAAMC,OAAO,GAAG,mBAAO,IAAP,CAAhB;AACA,QAAMC,aAAa,GAAG,mBAAO,CAAP,CAAtB;AAEA,wBAAU,MAAM;AACd,WAAO,MAAM;AACXD,MAAAA,OAAO,CAACE,OAAR,GAAkB,KAAlB;AACD,KAFD;AAGD,GAJD,EAIG,EAJH;AAMA,QAAMC,QAAQ,GAAG,wBAAY,CAACC,MAAD,EAAiBC,QAAQ,GAAG,IAA5B,KAAqC;AAAA;;AAChE,6BAAAN,aAAa,CAACG,OAAd,gFAAuBI,cAAvB,CAAsC;AACpCC,MAAAA,MAAM,EAAEH,MAD4B;AAEpCC,MAAAA;AAFoC,KAAtC;AAID,GALgB,EAKd,EALc,CAAjB;AAOA,QAAMG,2BAA2B,GAAG,wBAAaC,KAAD,IAAmB;AACjE,
|
|
1
|
+
{"version":3,"sources":["CollapsibleFlatList.tsx"],"names":["AnimatedFlatList","Animated","createAnimatedComponent","FlatList","CollapsibleFlatList","headerSnappable","props","headerHeight","scrollY","contentMinHeight","scrollViewRef","mounted","contentHeight","current","scrollTo","yValue","animated","scrollToOffset","offset","scrollToIndex","params","handleInternalContentHeight","value","setInternalContentMinHeight","scrollHandler","internalContentMinHeight","result","previous","contentContainerStyle","styles","contentContainer","minHeight","handleContentSizeChange","_","height","handleScrollToIndexFailed","renderListHeader","ListHeaderComponent","container","style","StyleSheet","create","absoluteFillObject","flexGrow","topView","position","top","left","right"],"mappings":"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","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport React, {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { FlatListProps, View, StyleSheet, FlatList } from 'react-native';\nimport Animated, {\n runOnJS,\n useAnimatedReaction,\n} from 'react-native-reanimated';\nimport AnimatedTopView from '../header/AnimatedTopView';\nimport useAnimatedScroll from './useAnimatedScroll';\nimport useCollapsibleContext from '../../hooks/useCollapsibleContext';\nimport useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';\nimport type { CollapsibleProps } from '../../types';\nimport PullToRefreshContainer from '../pullToRefresh/PullToRefreshContainer';\n\nconst AnimatedFlatList = Animated.createAnimatedComponent(FlatList);\n\ntype Props<Data> = Omit<FlatListProps<Data>, 'scrollEnabled'> &\n CollapsibleProps;\n\nexport default function CollapsibleFlatList<Data>({\n headerSnappable = true,\n ...props\n}: Props<Data>) {\n const { headerHeight, scrollY } = useCollapsibleContext();\n const { contentMinHeight, scrollViewRef } = useInternalCollapsibleContext();\n const mounted = useRef(true);\n const contentHeight = useRef(0);\n\n useEffect(() => {\n return () => {\n mounted.current = false;\n };\n }, []);\n\n const scrollTo = useCallback((yValue: number, animated = true) => {\n scrollViewRef.current?.scrollToOffset({\n offset: yValue,\n animated,\n });\n }, []);\n\n const scrollToIndex = useCallback((params) => {\n scrollViewRef.current?.scrollToIndex(params);\n }, []);\n\n const handleInternalContentHeight = useCallback((value: number) => {\n if (mounted.current) {\n setInternalContentMinHeight(value);\n }\n }, []);\n\n const { scrollHandler } = useAnimatedScroll({\n headerSnappable,\n scrollTo,\n scrollToIndex,\n });\n\n const [internalContentMinHeight, setInternalContentMinHeight] = useState(\n contentMinHeight.value\n );\n\n useAnimatedReaction(\n () => {\n return contentMinHeight.value;\n },\n (result, previous) => {\n if (result !== previous) {\n if (\n contentHeight.current < contentMinHeight.value &&\n internalContentMinHeight !== contentMinHeight.value\n ) {\n runOnJS(handleInternalContentHeight)(contentMinHeight.value);\n }\n }\n }\n );\n\n const contentContainerStyle = useMemo(\n () => [\n styles.contentContainer,\n { minHeight: internalContentMinHeight },\n props.contentContainerStyle,\n ],\n [props.contentContainerStyle, internalContentMinHeight]\n );\n\n const handleContentSizeChange = useCallback((_, height) => {\n contentHeight.current = height;\n }, []);\n\n const handleScrollToIndexFailed = useCallback(() => {}, []);\n\n const renderListHeader = () => (\n <View>\n <AnimatedTopView height={headerHeight} />\n {props.ListHeaderComponent}\n </View>\n );\n\n return (\n <PullToRefreshContainer scrollY={scrollY}>\n {/* @ts-ignore */}\n <AnimatedFlatList\n ref={scrollViewRef}\n bounces={false}\n keyboardDismissMode=\"on-drag\"\n keyboardShouldPersistTaps=\"handled\"\n scrollEventThrottle={1}\n onScrollToIndexFailed={handleScrollToIndexFailed}\n {...props}\n style={[styles.container, props.style]}\n contentContainerStyle={contentContainerStyle}\n onScroll={scrollHandler}\n ListHeaderComponent={renderListHeader()}\n onContentSizeChange={handleContentSizeChange}\n />\n </PullToRefreshContainer>\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n ...StyleSheet.absoluteFillObject,\n },\n contentContainer: {\n flexGrow: 1,\n },\n topView: {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n },\n});\n"]}
|
|
@@ -47,11 +47,15 @@ function CollapsibleScrollView({
|
|
|
47
47
|
animated
|
|
48
48
|
});
|
|
49
49
|
}, []);
|
|
50
|
+
const scrollToIndex = (0, _react.useCallback)(() => {
|
|
51
|
+
console.warn("CollapsibleScrollView doesn't support scrollToIndex");
|
|
52
|
+
}, []);
|
|
50
53
|
const {
|
|
51
54
|
scrollHandler
|
|
52
55
|
} = (0, _useAnimatedScroll.default)({
|
|
53
56
|
headerSnappable,
|
|
54
|
-
scrollTo
|
|
57
|
+
scrollTo,
|
|
58
|
+
scrollToIndex
|
|
55
59
|
});
|
|
56
60
|
const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
|
|
57
61
|
return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["CollapsibleScrollView.tsx"],"names":["CollapsibleScrollView","headerSnappable","children","props","contentMinHeight","scrollViewRef","headerHeight","scrollTo","yValue","animated","current","y","scrollHandler","animatedStyle","minHeight","value","contentContainerStyle","styles","contentContainer","container","style","StyleSheet","create","absoluteFillObject","flexGrow","topView","position","top","left","right"],"mappings":";;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;;;AAOe,SAASA,qBAAT,CAA+B;AAC5CC,EAAAA,eAAe,GAAG,IAD0B;AAE5CC,EAAAA,QAF4C;AAG5C,KAAGC;AAHyC,CAA/B,EAIL;AACR,QAAM;AAAEC,IAAAA,gBAAF;AAAoBC,IAAAA;AAApB,MAAsC,6CAA5C;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAmB,qCAAzB;AAEA,QAAMC,QAAQ,GAAG,wBAAY,CAACC,MAAD,EAAiBC,QAAQ,GAAG,IAA5B,KAAqC;AAAA;;AAChE,6BAAAJ,aAAa,CAACK,OAAd,gFAAuBH,QAAvB,CAAgC;AAAEI,MAAAA,CAAC,EAAEH,MAAL;AAAaC,MAAAA;AAAb,KAAhC;AACD,GAFgB,EAEd,EAFc,CAAjB;AAIA,QAAM;
|
|
1
|
+
{"version":3,"sources":["CollapsibleScrollView.tsx"],"names":["CollapsibleScrollView","headerSnappable","children","props","contentMinHeight","scrollViewRef","headerHeight","scrollTo","yValue","animated","current","y","scrollToIndex","console","warn","scrollHandler","animatedStyle","minHeight","value","contentContainerStyle","styles","contentContainer","container","style","StyleSheet","create","absoluteFillObject","flexGrow","topView","position","top","left","right"],"mappings":";;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;;;AAOe,SAASA,qBAAT,CAA+B;AAC5CC,EAAAA,eAAe,GAAG,IAD0B;AAE5CC,EAAAA,QAF4C;AAG5C,KAAGC;AAHyC,CAA/B,EAIL;AACR,QAAM;AAAEC,IAAAA,gBAAF;AAAoBC,IAAAA;AAApB,MAAsC,6CAA5C;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAmB,qCAAzB;AAEA,QAAMC,QAAQ,GAAG,wBAAY,CAACC,MAAD,EAAiBC,QAAQ,GAAG,IAA5B,KAAqC;AAAA;;AAChE,6BAAAJ,aAAa,CAACK,OAAd,gFAAuBH,QAAvB,CAAgC;AAAEI,MAAAA,CAAC,EAAEH,MAAL;AAAaC,MAAAA;AAAb,KAAhC;AACD,GAFgB,EAEd,EAFc,CAAjB;AAIA,QAAMG,aAAa,GAAG,wBAAY,MAAM;AACtCC,IAAAA,OAAO,CAACC,IAAR,CAAa,qDAAb;AACD,GAFqB,EAEnB,EAFmB,CAAtB;AAIA,QAAM;AAAEC,IAAAA;AAAF,MAAoB,gCAAkB;AAC1Cd,IAAAA,eAD0C;AAE1CM,IAAAA,QAF0C;AAG1CK,IAAAA;AAH0C,GAAlB,CAA1B;AAMA,QAAMI,aAAa,GAAG,6CAAiB,MAAM;AAC3C,WAAO;AACLC,MAAAA,SAAS,EAAEb,gBAAgB,CAACc;AADvB,KAAP;AAGD,GAJqB,EAInB,EAJmB,CAAtB;AAMA,QAAMC,qBAAqB,GAAG,oBAC5B,MAAM,CAACC,MAAM,CAACC,gBAAR,EAA0BlB,KAAK,CAACgB,qBAAhC,CADsB,EAE5B,CAAChB,KAAK,CAACgB,qBAAP,CAF4B,CAA9B;AAKA,sBACE,6BAAC,8BAAD,CAAU,UAAV;AACE,IAAA,GAAG,EAAEd,aADP;AAEE,IAAA,OAAO,EAAE;AAFX,KAGMF,KAHN;AAIE,IAAA,KAAK,EAAE,CAACiB,MAAM,CAACE,SAAR,EAAmBnB,KAAK,CAACoB,KAAzB,CAJT;AAKE,IAAA,qBAAqB,EAAEJ,qBALzB;AAME,IAAA,QAAQ,EAAEJ,aANZ;AAOE,IAAA,mBAAmB,EAAC,SAPtB;AAQE,IAAA,yBAAyB,EAAC,SAR5B;AASE,IAAA,mBAAmB,EAAE;AATvB,mBAWE,6BAAC,8BAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAEC;AAAtB,kBACE,6BAAC,wBAAD;AAAiB,IAAA,MAAM,EAAEV;AAAzB,IADF,EAEGJ,QAFH,CAXF,CADF;AAkBD;;AAED,MAAMkB,MAAM,GAAGI,wBAAWC,MAAX,CAAkB;AAC/BH,EAAAA,SAAS,EAAE,EACT,GAAGE,wBAAWE;AADL,GADoB;AAI/BL,EAAAA,gBAAgB,EAAE;AAChBM,IAAAA,QAAQ,EAAE;AADM,GAJa;AAO/BC,EAAAA,OAAO,EAAE;AACPC,IAAAA,QAAQ,EAAE,UADH;AAEPC,IAAAA,GAAG,EAAE,CAFE;AAGPC,IAAAA,IAAI,EAAE,CAHC;AAIPC,IAAAA,KAAK,EAAE;AAJA;AAPsB,CAAlB,CAAf","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport AnimatedTopView from '../header/AnimatedTopView';\nimport useAnimatedScroll from './useAnimatedScroll';\nimport React, { ReactNode, useCallback, useMemo } from 'react';\nimport { ScrollViewProps, StyleSheet } from 'react-native';\nimport Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport type { CollapsibleProps } from '../../types';\nimport useCollapsibleContext from '../../hooks/useCollapsibleContext';\nimport useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';\n\ntype Props = ScrollViewProps &\n CollapsibleProps & {\n children?: ReactNode;\n };\n\nexport default function CollapsibleScrollView({\n headerSnappable = true,\n children,\n ...props\n}: Props) {\n const { contentMinHeight, scrollViewRef } = useInternalCollapsibleContext();\n const { headerHeight } = useCollapsibleContext();\n\n const scrollTo = useCallback((yValue: number, animated = true) => {\n scrollViewRef.current?.scrollTo({ y: yValue, animated });\n }, []);\n\n const scrollToIndex = useCallback(() => {\n console.warn(\"CollapsibleScrollView doesn't support scrollToIndex\");\n }, []);\n\n const { scrollHandler } = useAnimatedScroll({\n headerSnappable,\n scrollTo,\n scrollToIndex,\n });\n\n const animatedStyle = useAnimatedStyle(() => {\n return {\n minHeight: contentMinHeight.value,\n };\n }, []);\n\n const contentContainerStyle = useMemo(\n () => [styles.contentContainer, props.contentContainerStyle],\n [props.contentContainerStyle]\n );\n\n return (\n <Animated.ScrollView\n ref={scrollViewRef}\n bounces={false}\n {...props}\n style={[styles.container, props.style]}\n contentContainerStyle={contentContainerStyle}\n onScroll={scrollHandler}\n keyboardDismissMode=\"on-drag\"\n keyboardShouldPersistTaps=\"handled\"\n scrollEventThrottle={1}\n >\n <Animated.View style={animatedStyle}>\n <AnimatedTopView height={headerHeight} />\n {children}\n </Animated.View>\n </Animated.ScrollView>\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n ...StyleSheet.absoluteFillObject,\n },\n contentContainer: {\n flexGrow: 1,\n },\n topView: {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n },\n});\n"]}
|
|
@@ -24,7 +24,8 @@ const {
|
|
|
24
24
|
|
|
25
25
|
function useAnimatedScroll({
|
|
26
26
|
headerSnappable,
|
|
27
|
-
scrollTo
|
|
27
|
+
scrollTo,
|
|
28
|
+
scrollToIndex
|
|
28
29
|
}) {
|
|
29
30
|
const scrollDirection = (0, _reactNativeReanimated.useSharedValue)('unknown');
|
|
30
31
|
const {
|
|
@@ -48,9 +49,10 @@ function useAnimatedScroll({
|
|
|
48
49
|
setCollapsibleHandlers({
|
|
49
50
|
collapse,
|
|
50
51
|
expand,
|
|
51
|
-
scrollTo
|
|
52
|
+
scrollTo,
|
|
53
|
+
scrollToIndex
|
|
52
54
|
});
|
|
53
|
-
}, [setCollapsibleHandlers, collapse, expand, scrollTo]);
|
|
55
|
+
}, [setCollapsibleHandlers, collapse, expand, scrollTo, scrollToIndex]);
|
|
54
56
|
const scrollHandler = (0, _reactNativeReanimated.useAnimatedScrollHandler)({
|
|
55
57
|
onScroll: event => {
|
|
56
58
|
const offset = event.contentOffset.y;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAnimatedScroll.ts"],"names":["height","wHeight","Dimensions","get","useAnimatedScroll","headerSnappable","scrollTo","scrollDirection","scrollY","setCollapsibleHandlers","firstStickyViewY","fixedHeaderHeight","value","requestAnimationFrame","collapse","Math","min","expand","scrollHandler","onScroll","event","offset","contentOffset","y","diff","onEndDrag","maxY","delta","abs","yValue"],"mappings":";;;;;;;AACA;;AACA;;AACA;;
|
|
1
|
+
{"version":3,"sources":["useAnimatedScroll.ts"],"names":["height","wHeight","Dimensions","get","useAnimatedScroll","headerSnappable","scrollTo","scrollToIndex","scrollDirection","scrollY","setCollapsibleHandlers","firstStickyViewY","fixedHeaderHeight","value","requestAnimationFrame","collapse","Math","min","expand","scrollHandler","onScroll","event","offset","contentOffset","y","diff","onEndDrag","maxY","delta","abs","yValue"],"mappings":";;;;;;;AACA;;AACA;;AACA;;AAMA;;AACA;;;;AAVA;AAYA,MAAM;AAAEA,EAAAA,MAAM,EAAEC;AAAV,IAAsBC,wBAAWC,GAAX,CAAe,QAAf,CAA5B;;AAQe,SAASC,iBAAT,CAA2B;AACxCC,EAAAA,eADwC;AAExCC,EAAAA,QAFwC;AAGxCC,EAAAA;AAHwC,CAA3B,EAIL;AACR,QAAMC,eAAe,GAAG,2CAAe,SAAf,CAAxB;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAc,qCAApB;AACA,QAAM;AAAEC,IAAAA,sBAAF;AAA0BC,IAAAA,gBAA1B;AAA4CC,IAAAA;AAA5C,MACJ,6CADF;AAGA,wBAAU,MAAM;AACd,QAAIH,OAAO,CAACI,KAAR,GAAgB,CAApB,EAAuB;AACrBC,MAAAA,qBAAqB,CAAC,MAAMR,QAAQ,CAACG,OAAO,CAACI,KAAT,EAAgB,KAAhB,CAAf,CAArB;AACD;AACF,GAJD,EAIG,EAJH;AAMA,QAAME,QAAQ,GAAG,wBAAY,MAAM;AACjCT,IAAAA,QAAQ,CACNU,IAAI,CAACC,GAAL,CAASL,iBAAiB,CAACC,KAAlB,IAA2B,CAApC,EAAuCF,gBAAgB,CAACE,KAAjB,IAA0B,CAAjE,CADM,CAAR;AAGD,GAJgB,EAId,CAACP,QAAD,CAJc,CAAjB;AAMA,QAAMY,MAAM,GAAG,wBAAY,MAAMZ,QAAQ,CAAC,CAAD,CAA1B,EAA+B,CAACA,QAAD,CAA/B,CAAf;AAEA,wBAAU,MAAM;AACdI,IAAAA,sBAAsB,CAAC;AACrBK,MAAAA,QADqB;AAErBG,MAAAA,MAFqB;AAGrBZ,MAAAA,QAHqB;AAIrBC,MAAAA;AAJqB,KAAD,CAAtB;AAMD,GAPD,EAOG,CAACG,sBAAD,EAAyBK,QAAzB,EAAmCG,MAAnC,EAA2CZ,QAA3C,EAAqDC,aAArD,CAPH;AASA,QAAMY,aAAa,GAAG,qDACpB;AACEC,IAAAA,QAAQ,EAAGC,KAAD,IAAW;AACnB,YAAMC,MAAM,GAAGD,KAAK,CAACE,aAAN,CAAoBC,CAAnC;AACA,YAAMC,IAAI,GAAGhB,OAAO,CAACI,KAAR,GAAgBS,MAA7B;AACAd,MAAAA,eAAe,CAACK,KAAhB,GAAwBY,IAAI,GAAG,CAAP,GAAW,MAAX,GAAoBA,IAAI,GAAG,CAAP,GAAW,IAAX,GAAkB,SAA9D;AACAhB,MAAAA,OAAO,CAACI,KAAR,GAAgBS,MAAhB;AACD,KANH;AAOEI,IAAAA,SAAS,EAAE,MAAM;AACf,UAAI,CAACrB,eAAL,EAAsB;AACtB,YAAMsB,IAAI,GACRhB,gBAAgB,CAACE,KAAjB,IAA0BF,gBAAgB,CAACE,KAAjB,GAAyB,CAAnD,GACIF,gBAAgB,CAACE,KADrB,GAEID,iBAAiB,CAACC,KAAlB,IAA2B,CAHjC;;AAKA,UAAIJ,OAAO,CAACI,KAAR,GAAgBc,IAApB,EAA0B;AACxB,cAAMC,KAAK,GAAGZ,IAAI,CAACa,GAAL,CAASpB,OAAO,CAACI,KAAR,GAAgBc,IAAzB,CAAd;;AACA,YAAIC,KAAK,GAAG3B,OAAO,GAAG,CAAtB,EAAyB;AACvB,cAAI6B,MAAM,GAAG,CAAb;;AACA,cAAItB,eAAe,CAACK,KAAhB,KAA0B,IAA9B,EAAoC;AAClCiB,YAAAA,MAAM,GAAGH,IAAT;AACD;;AACD,8CAAQrB,QAAR,EAAkBwB,MAAlB;AACD;AACF;AACF;AAxBH,GADoB,EA2BpB,CAACxB,QAAD,CA3BoB,CAAtB;AA8BA,SAAO;AACLa,IAAAA,aADK;AAELJ,IAAAA,QAFK;AAGLG,IAAAA;AAHK,GAAP;AAKD","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport { useCallback, useEffect } from 'react';\nimport { Dimensions } from 'react-native';\nimport {\n runOnJS,\n useAnimatedScrollHandler,\n useSharedValue,\n} from 'react-native-reanimated';\nimport type { ScrollToIndexParams } from 'src/types';\nimport useCollapsibleContext from '../../hooks/useCollapsibleContext';\nimport useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';\n\nconst { height: wHeight } = Dimensions.get('window');\n\ntype Props = {\n headerSnappable: boolean;\n scrollTo: (yValue: number, animated?: boolean) => void;\n scrollToIndex: (params: ScrollToIndexParams) => void;\n};\n\nexport default function useAnimatedScroll({\n headerSnappable,\n scrollTo,\n scrollToIndex,\n}: Props) {\n const scrollDirection = useSharedValue('unknown');\n const { scrollY } = useCollapsibleContext();\n const { setCollapsibleHandlers, firstStickyViewY, fixedHeaderHeight } =\n useInternalCollapsibleContext();\n\n useEffect(() => {\n if (scrollY.value > 0) {\n requestAnimationFrame(() => scrollTo(scrollY.value, false));\n }\n }, []);\n\n const collapse = useCallback(() => {\n scrollTo(\n Math.min(fixedHeaderHeight.value || 0, firstStickyViewY.value || 0)\n );\n }, [scrollTo]);\n\n const expand = useCallback(() => scrollTo(0), [scrollTo]);\n\n useEffect(() => {\n setCollapsibleHandlers({\n collapse,\n expand,\n scrollTo,\n scrollToIndex,\n });\n }, [setCollapsibleHandlers, collapse, expand, scrollTo, scrollToIndex]);\n\n const scrollHandler = useAnimatedScrollHandler(\n {\n onScroll: (event) => {\n const offset = event.contentOffset.y;\n const diff = scrollY.value - offset;\n scrollDirection.value = diff > 0 ? 'down' : diff < 0 ? 'up' : 'unknown';\n scrollY.value = offset;\n },\n onEndDrag: () => {\n if (!headerSnappable) return;\n const maxY =\n firstStickyViewY.value && firstStickyViewY.value > 0\n ? firstStickyViewY.value\n : fixedHeaderHeight.value || 0;\n\n if (scrollY.value < maxY) {\n const delta = Math.abs(scrollY.value - maxY);\n if (delta < wHeight / 2) {\n let yValue = 0;\n if (scrollDirection.value === 'up') {\n yValue = maxY;\n }\n runOnJS(scrollTo)(yValue);\n }\n }\n },\n },\n [scrollTo]\n );\n\n return {\n scrollHandler,\n collapse,\n expand,\n };\n}\n"]}
|
|
@@ -43,6 +43,9 @@ function withCollapsibleContext(Component) {
|
|
|
43
43
|
const containerRef = (0, _react.useRef)(null);
|
|
44
44
|
const scrollViewRef = (0, _react.useRef)(null);
|
|
45
45
|
const setCollapsibleHandlers = (0, _react.useCallback)(handlers => {
|
|
46
|
+
console.log({
|
|
47
|
+
handlers
|
|
48
|
+
});
|
|
46
49
|
collapsibleHandlers.current = handlers;
|
|
47
50
|
}, []);
|
|
48
51
|
const headerCollapsed = (0, _reactNativeReanimated.useDerivedValue)(() => {
|
|
@@ -156,6 +159,11 @@ function withCollapsibleContext(Component) {
|
|
|
156
159
|
|
|
157
160
|
return (_collapsibleHandlers$3 = collapsibleHandlers.current) === null || _collapsibleHandlers$3 === void 0 ? void 0 : _collapsibleHandlers$3.scrollTo(offset, animate);
|
|
158
161
|
},
|
|
162
|
+
scrollToIndex: params => {
|
|
163
|
+
var _collapsibleHandlers$4;
|
|
164
|
+
|
|
165
|
+
return (_collapsibleHandlers$4 = collapsibleHandlers.current) === null || _collapsibleHandlers$4 === void 0 ? void 0 : _collapsibleHandlers$4.scrollToIndex(params);
|
|
166
|
+
},
|
|
159
167
|
headerHeight,
|
|
160
168
|
scrollY,
|
|
161
169
|
headerCollapsed
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["withCollapsibleContext.tsx"],"names":["withCollapsibleContext","Component","props","collapsibleHandlers","headerHeight","scrollY","stickyViewRefs","stickyViewTops","stickyViewPositionsRef","stickyViewPositions","fixedHeaderHeight","stickyHeaderHeight","containerHeight","firstStickyViewY","headerContainersHeight","containerRef","scrollViewRef","setCollapsibleHandlers","handlers","current","headerCollapsed","maxY","value","contentMinHeight","totalHeight","Object","keys","reduce","acc","item","top","result","previous","viewPositions","sortedKeys","sort","a","b","totalTop","values","i","length","height","stickyHeader","key","data","isInsideHeader","handleStickyViewLayout","viewKey","viewRef","measureLayout","left","width","debounceRefreshStickyPositions","forEach","handleHeaderContainerLayout","duration","handleContainerHeight","context","collapse","expand","scrollTo","offset","animate","internalContext"],"mappings":"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","sourcesContent":["/* eslint-disable no-shadow */\n/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { FC, useCallback, useMemo, useRef } from 'react';\nimport type { CollapsibleHandles, LayoutParams } from './types';\nimport { CollapsibleContext } from './hooks/useCollapsibleContext';\nimport { InternalCollapsibleContext } from './hooks/useInternalCollapsibleContext';\nimport {\n useAnimatedReaction,\n useDerivedValue,\n useSharedValue,\n withTiming,\n} from 'react-native-reanimated';\nimport type { View } from 'react-native';\nimport { debounce } from './utils/debounce';\nimport PullToRefreshProvider from './components/pullToRefresh/PullToRefreshProvider';\n\nexport default function withCollapsibleContext<T>(Component: FC<T>) {\n return (props: T) => {\n const collapsibleHandlers = useRef<CollapsibleHandles>();\n const headerHeight = useSharedValue(0);\n const scrollY = useSharedValue(0);\n const stickyViewRefs = useRef<Record<string, React.RefObject<View>>>({});\n const stickyViewTops = useSharedValue<Record<string, number>>({});\n const stickyViewPositionsRef = useRef<Record<string, LayoutParams>>({});\n const stickyViewPositions = useSharedValue<Record<string, LayoutParams>>(\n {}\n );\n const fixedHeaderHeight = useSharedValue(0);\n const stickyHeaderHeight = useSharedValue(0);\n const containerHeight = useSharedValue(0);\n const firstStickyViewY = useSharedValue(1000000);\n const headerContainersHeight = useRef<Record<string, number>>({});\n const containerRef = useRef<View>(null);\n const scrollViewRef = useRef<View>(null);\n\n const setCollapsibleHandlers = useCallback((handlers) => {\n collapsibleHandlers.current = handlers;\n }, []);\n\n const headerCollapsed = useDerivedValue(() => {\n const maxY = fixedHeaderHeight.value - firstStickyViewY.value;\n return scrollY.value >= maxY;\n }, []);\n\n const contentMinHeight = useDerivedValue(() => {\n return (\n containerHeight.value +\n fixedHeaderHeight.value -\n stickyHeaderHeight.value\n );\n }, []);\n\n useAnimatedReaction(\n () => {\n const totalHeight = Object.keys(stickyViewPositions.value).reduce(\n (acc, item) => {\n return acc + stickyViewPositions.value[item].top;\n },\n 0\n );\n return totalHeight - fixedHeaderHeight.value;\n },\n (result, previous) => {\n if (result !== previous) {\n const viewPositions = stickyViewPositions.value;\n const headerHeight = fixedHeaderHeight.value;\n const sortedKeys = Object.keys(viewPositions).sort(\n (a, b) => viewPositions[a].top - viewPositions[b].top\n );\n let totalTop = 0;\n const values: any = {};\n for (let i = 0; i < sortedKeys.length; i++) {\n values[sortedKeys[i]] = totalTop;\n // Try minus 1 make it filled when scrolling up.\n // Otherwise, we can see a small space between the persits views\n totalTop += viewPositions[sortedKeys[i]].height - 1;\n }\n stickyViewTops.value = values;\n firstStickyViewY.value = viewPositions[sortedKeys[0]]?.top || 0;\n const stickyHeader = sortedKeys.reduce((acc, key) => {\n const data = viewPositions[key];\n const isInsideHeader = data.top < headerHeight;\n if (isInsideHeader) {\n return acc + data.height;\n }\n return acc;\n }, 0);\n stickyHeaderHeight.value = stickyHeader;\n }\n }\n );\n\n const handleStickyViewLayout = useCallback(\n (viewKey: string, viewRef?: React.RefObject<View>) => {\n if (viewRef && viewRef.current && containerRef.current) {\n stickyViewRefs.current[viewKey] = viewRef;\n viewRef.current.measureLayout(\n // @ts-ignore\n containerRef.current,\n (left, top, width, height) => {\n stickyViewPositionsRef.current = {\n ...stickyViewPositionsRef.current,\n [viewKey]: { left, top, width, height },\n };\n stickyViewPositions.value = stickyViewPositionsRef.current;\n },\n () => {}\n );\n } else {\n delete stickyViewRefs.current[viewKey];\n delete stickyViewPositionsRef.current[viewKey];\n stickyViewPositions.value = stickyViewPositionsRef.current;\n }\n },\n []\n );\n\n const debounceRefreshStickyPositions = useMemo(() => {\n return debounce(() => {\n Object.keys(stickyViewRefs.current).forEach((key) => {\n const viewRef = stickyViewRefs.current[key];\n if (viewRef) {\n handleStickyViewLayout(key, viewRef);\n }\n });\n }, 200);\n }, []);\n\n const handleHeaderContainerLayout = useCallback(\n (viewKey: string, height?: number) => {\n if (!height) {\n delete headerContainersHeight.current[viewKey];\n } else {\n headerContainersHeight.current[viewKey] = height;\n }\n const totalHeight = Object.keys(headerContainersHeight.current).reduce(\n (acc, key) => headerContainersHeight.current[key] + acc,\n 0\n );\n headerHeight.value = withTiming(totalHeight, {\n duration: fixedHeaderHeight.value === 0 ? 0 : 10,\n });\n fixedHeaderHeight.value = totalHeight;\n // Try refresh sticky positions\n debounceRefreshStickyPositions();\n },\n []\n );\n\n const handleContainerHeight = useCallback((height: number) => {\n containerHeight.value = height;\n }, []);\n\n const context = useMemo(() => {\n return {\n collapse: () => collapsibleHandlers.current?.collapse(),\n expand: () => collapsibleHandlers.current?.expand(),\n scrollTo: (offset: number, animate?: boolean) =>\n collapsibleHandlers.current?.scrollTo(offset, animate),\n headerHeight,\n scrollY,\n headerCollapsed,\n };\n }, [scrollY, headerHeight, headerCollapsed]);\n\n const internalContext = useMemo(\n () => ({\n scrollViewRef,\n containerRef,\n handleStickyViewLayout,\n handleHeaderContainerLayout,\n setCollapsibleHandlers,\n handleContainerHeight,\n firstStickyViewY,\n stickyViewTops,\n stickyViewPositions,\n fixedHeaderHeight,\n contentMinHeight,\n }),\n [\n setCollapsibleHandlers,\n handleStickyViewLayout,\n handleHeaderContainerLayout,\n handleContainerHeight,\n firstStickyViewY,\n stickyViewTops,\n stickyViewPositions,\n fixedHeaderHeight,\n contentMinHeight,\n ]\n );\n\n return (\n <CollapsibleContext.Provider value={context}>\n <InternalCollapsibleContext.Provider value={internalContext}>\n <PullToRefreshProvider>\n <Component {...props} />\n </PullToRefreshProvider>\n </InternalCollapsibleContext.Provider>\n </CollapsibleContext.Provider>\n );\n };\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["withCollapsibleContext.tsx"],"names":["withCollapsibleContext","Component","props","collapsibleHandlers","headerHeight","scrollY","stickyViewRefs","stickyViewTops","stickyViewPositionsRef","stickyViewPositions","fixedHeaderHeight","stickyHeaderHeight","containerHeight","firstStickyViewY","headerContainersHeight","containerRef","scrollViewRef","setCollapsibleHandlers","handlers","console","log","current","headerCollapsed","maxY","value","contentMinHeight","totalHeight","Object","keys","reduce","acc","item","top","result","previous","viewPositions","sortedKeys","sort","a","b","totalTop","values","i","length","height","stickyHeader","key","data","isInsideHeader","handleStickyViewLayout","viewKey","viewRef","measureLayout","left","width","debounceRefreshStickyPositions","forEach","handleHeaderContainerLayout","duration","handleContainerHeight","context","collapse","expand","scrollTo","offset","animate","scrollToIndex","params","internalContext"],"mappings":"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","sourcesContent":["/* eslint-disable no-shadow */\n/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { FC, useCallback, useMemo, useRef } from 'react';\nimport type { CollapsibleHandles, LayoutParams } from './types';\nimport { CollapsibleContext } from './hooks/useCollapsibleContext';\nimport { InternalCollapsibleContext } from './hooks/useInternalCollapsibleContext';\nimport {\n useAnimatedReaction,\n useDerivedValue,\n useSharedValue,\n withTiming,\n} from 'react-native-reanimated';\nimport type { View } from 'react-native';\nimport { debounce } from './utils/debounce';\nimport PullToRefreshProvider from './components/pullToRefresh/PullToRefreshProvider';\n\nexport default function withCollapsibleContext<T>(Component: FC<T>) {\n return (props: T) => {\n const collapsibleHandlers = useRef<CollapsibleHandles>();\n const headerHeight = useSharedValue(0);\n const scrollY = useSharedValue(0);\n const stickyViewRefs = useRef<Record<string, React.RefObject<View>>>({});\n const stickyViewTops = useSharedValue<Record<string, number>>({});\n const stickyViewPositionsRef = useRef<Record<string, LayoutParams>>({});\n const stickyViewPositions = useSharedValue<Record<string, LayoutParams>>(\n {}\n );\n const fixedHeaderHeight = useSharedValue(0);\n const stickyHeaderHeight = useSharedValue(0);\n const containerHeight = useSharedValue(0);\n const firstStickyViewY = useSharedValue(1000000);\n const headerContainersHeight = useRef<Record<string, number>>({});\n const containerRef = useRef<View>(null);\n const scrollViewRef = useRef<View>(null);\n\n const setCollapsibleHandlers = useCallback((handlers) => {\n console.log({ handlers });\n\n collapsibleHandlers.current = handlers;\n }, []);\n\n const headerCollapsed = useDerivedValue(() => {\n const maxY = fixedHeaderHeight.value - firstStickyViewY.value;\n return scrollY.value >= maxY;\n }, []);\n\n const contentMinHeight = useDerivedValue(() => {\n return (\n containerHeight.value +\n fixedHeaderHeight.value -\n stickyHeaderHeight.value\n );\n }, []);\n\n useAnimatedReaction(\n () => {\n const totalHeight = Object.keys(stickyViewPositions.value).reduce(\n (acc, item) => {\n return acc + stickyViewPositions.value[item].top;\n },\n 0\n );\n return totalHeight - fixedHeaderHeight.value;\n },\n (result, previous) => {\n if (result !== previous) {\n const viewPositions = stickyViewPositions.value;\n const headerHeight = fixedHeaderHeight.value;\n const sortedKeys = Object.keys(viewPositions).sort(\n (a, b) => viewPositions[a].top - viewPositions[b].top\n );\n let totalTop = 0;\n const values: any = {};\n for (let i = 0; i < sortedKeys.length; i++) {\n values[sortedKeys[i]] = totalTop;\n // Try minus 1 make it filled when scrolling up.\n // Otherwise, we can see a small space between the persits views\n totalTop += viewPositions[sortedKeys[i]].height - 1;\n }\n stickyViewTops.value = values;\n firstStickyViewY.value = viewPositions[sortedKeys[0]]?.top || 0;\n const stickyHeader = sortedKeys.reduce((acc, key) => {\n const data = viewPositions[key];\n const isInsideHeader = data.top < headerHeight;\n if (isInsideHeader) {\n return acc + data.height;\n }\n return acc;\n }, 0);\n stickyHeaderHeight.value = stickyHeader;\n }\n }\n );\n\n const handleStickyViewLayout = useCallback(\n (viewKey: string, viewRef?: React.RefObject<View>) => {\n if (viewRef && viewRef.current && containerRef.current) {\n stickyViewRefs.current[viewKey] = viewRef;\n viewRef.current.measureLayout(\n // @ts-ignore\n containerRef.current,\n (left, top, width, height) => {\n stickyViewPositionsRef.current = {\n ...stickyViewPositionsRef.current,\n [viewKey]: { left, top, width, height },\n };\n stickyViewPositions.value = stickyViewPositionsRef.current;\n },\n () => {}\n );\n } else {\n delete stickyViewRefs.current[viewKey];\n delete stickyViewPositionsRef.current[viewKey];\n stickyViewPositions.value = stickyViewPositionsRef.current;\n }\n },\n []\n );\n\n const debounceRefreshStickyPositions = useMemo(() => {\n return debounce(() => {\n Object.keys(stickyViewRefs.current).forEach((key) => {\n const viewRef = stickyViewRefs.current[key];\n if (viewRef) {\n handleStickyViewLayout(key, viewRef);\n }\n });\n }, 200);\n }, []);\n\n const handleHeaderContainerLayout = useCallback(\n (viewKey: string, height?: number) => {\n if (!height) {\n delete headerContainersHeight.current[viewKey];\n } else {\n headerContainersHeight.current[viewKey] = height;\n }\n const totalHeight = Object.keys(headerContainersHeight.current).reduce(\n (acc, key) => headerContainersHeight.current[key] + acc,\n 0\n );\n headerHeight.value = withTiming(totalHeight, {\n duration: fixedHeaderHeight.value === 0 ? 0 : 10,\n });\n fixedHeaderHeight.value = totalHeight;\n // Try refresh sticky positions\n debounceRefreshStickyPositions();\n },\n []\n );\n\n const handleContainerHeight = useCallback((height: number) => {\n containerHeight.value = height;\n }, []);\n\n const context = useMemo(() => {\n return {\n collapse: () => collapsibleHandlers.current?.collapse(),\n expand: () => collapsibleHandlers.current?.expand(),\n scrollTo: (offset: number, animate?: boolean) =>\n collapsibleHandlers.current?.scrollTo(offset, animate),\n scrollToIndex: (params: any) =>\n collapsibleHandlers.current?.scrollToIndex(params),\n headerHeight,\n scrollY,\n headerCollapsed,\n };\n }, [scrollY, headerHeight, headerCollapsed]);\n\n const internalContext = useMemo(\n () => ({\n scrollViewRef,\n containerRef,\n handleStickyViewLayout,\n handleHeaderContainerLayout,\n setCollapsibleHandlers,\n handleContainerHeight,\n firstStickyViewY,\n stickyViewTops,\n stickyViewPositions,\n fixedHeaderHeight,\n contentMinHeight,\n }),\n [\n setCollapsibleHandlers,\n handleStickyViewLayout,\n handleHeaderContainerLayout,\n handleContainerHeight,\n firstStickyViewY,\n stickyViewTops,\n stickyViewPositions,\n fixedHeaderHeight,\n contentMinHeight,\n ]\n );\n\n return (\n <CollapsibleContext.Provider value={context}>\n <InternalCollapsibleContext.Provider value={internalContext}>\n <PullToRefreshProvider>\n <Component {...props} />\n </PullToRefreshProvider>\n </InternalCollapsibleContext.Provider>\n </CollapsibleContext.Provider>\n );\n };\n}\n"]}
|
|
@@ -37,6 +37,11 @@ export default function CollapsibleFlatList({
|
|
|
37
37
|
animated
|
|
38
38
|
});
|
|
39
39
|
}, []);
|
|
40
|
+
const scrollToIndex = useCallback(params => {
|
|
41
|
+
var _scrollViewRef$curren2;
|
|
42
|
+
|
|
43
|
+
(_scrollViewRef$curren2 = scrollViewRef.current) === null || _scrollViewRef$curren2 === void 0 ? void 0 : _scrollViewRef$curren2.scrollToIndex(params);
|
|
44
|
+
}, []);
|
|
40
45
|
const handleInternalContentHeight = useCallback(value => {
|
|
41
46
|
if (mounted.current) {
|
|
42
47
|
setInternalContentMinHeight(value);
|
|
@@ -46,7 +51,8 @@ export default function CollapsibleFlatList({
|
|
|
46
51
|
scrollHandler
|
|
47
52
|
} = useAnimatedScroll({
|
|
48
53
|
headerSnappable,
|
|
49
|
-
scrollTo
|
|
54
|
+
scrollTo,
|
|
55
|
+
scrollToIndex
|
|
50
56
|
});
|
|
51
57
|
const [internalContentMinHeight, setInternalContentMinHeight] = useState(contentMinHeight.value);
|
|
52
58
|
useAnimatedReaction(() => {
|
|
@@ -64,6 +70,7 @@ export default function CollapsibleFlatList({
|
|
|
64
70
|
const handleContentSizeChange = useCallback((_, height) => {
|
|
65
71
|
contentHeight.current = height;
|
|
66
72
|
}, []);
|
|
73
|
+
const handleScrollToIndexFailed = useCallback(() => {}, []);
|
|
67
74
|
|
|
68
75
|
const renderListHeader = () => /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(AnimatedTopView, {
|
|
69
76
|
height: headerHeight
|
|
@@ -76,7 +83,8 @@ export default function CollapsibleFlatList({
|
|
|
76
83
|
bounces: false,
|
|
77
84
|
keyboardDismissMode: "on-drag",
|
|
78
85
|
keyboardShouldPersistTaps: "handled",
|
|
79
|
-
scrollEventThrottle: 1
|
|
86
|
+
scrollEventThrottle: 1,
|
|
87
|
+
onScrollToIndexFailed: handleScrollToIndexFailed
|
|
80
88
|
}, props, {
|
|
81
89
|
style: [styles.container, props.style],
|
|
82
90
|
contentContainerStyle: contentContainerStyle,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["CollapsibleFlatList.tsx"],"names":["React","useCallback","useEffect","useMemo","useRef","useState","View","StyleSheet","FlatList","Animated","runOnJS","useAnimatedReaction","AnimatedTopView","useAnimatedScroll","useCollapsibleContext","useInternalCollapsibleContext","PullToRefreshContainer","AnimatedFlatList","createAnimatedComponent","CollapsibleFlatList","headerSnappable","props","headerHeight","scrollY","contentMinHeight","scrollViewRef","mounted","contentHeight","current","scrollTo","yValue","animated","scrollToOffset","offset","handleInternalContentHeight","value","setInternalContentMinHeight","scrollHandler","internalContentMinHeight","result","previous","contentContainerStyle","styles","contentContainer","minHeight","handleContentSizeChange","_","height","renderListHeader","ListHeaderComponent","container","style","create","absoluteFillObject","flexGrow","topView","position","top","left","right"],"mappings":";;AAAA;AACA,OAAOA,KAAP,IACEC,WADF,EAEEC,SAFF,EAGEC,OAHF,EAIEC,MAJF,EAKEC,QALF,QAMO,OANP;AAOA,SAAwBC,IAAxB,EAA8BC,UAA9B,EAA0CC,QAA1C,QAA0D,cAA1D;AACA,OAAOC,QAAP,IACEC,OADF,EAEEC,mBAFF,QAGO,yBAHP;AAIA,OAAOC,eAAP,MAA4B,2BAA5B;AACA,OAAOC,iBAAP,MAA8B,qBAA9B;AACA,OAAOC,qBAAP,MAAkC,mCAAlC;AACA,OAAOC,6BAAP,MAA0C,2CAA1C;AAEA,OAAOC,sBAAP,MAAmC,yCAAnC;AAEA,MAAMC,gBAAgB,GAAGR,QAAQ,CAACS,uBAAT,CAAiCV,QAAjC,CAAzB;AAKA,eAAe,SAASW,mBAAT,CAAmC;AAChDC,EAAAA,eAAe,GAAG,IAD8B;AAEhD,KAAGC;AAF6C,CAAnC,EAGC;AACd,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,MAA4BT,qBAAqB,EAAvD;AACA,QAAM;AAAEU,IAAAA,gBAAF;AAAoBC,IAAAA;AAApB,MAAsCV,6BAA6B,EAAzE;AACA,QAAMW,OAAO,GAAGtB,MAAM,CAAC,IAAD,CAAtB;AACA,QAAMuB,aAAa,GAAGvB,MAAM,CAAC,CAAD,CAA5B;AAEAF,EAAAA,SAAS,CAAC,MAAM;AACd,WAAO,MAAM;AACXwB,MAAAA,OAAO,CAACE,OAAR,GAAkB,KAAlB;AACD,KAFD;AAGD,GAJQ,EAIN,EAJM,CAAT;AAMA,QAAMC,QAAQ,GAAG5B,WAAW,CAAC,CAAC6B,MAAD,EAAiBC,QAAQ,GAAG,IAA5B,KAAqC;AAAA;;AAChE,6BAAAN,aAAa,CAACG,OAAd,gFAAuBI,cAAvB,CAAsC;AACpCC,MAAAA,MAAM,EAAEH,MAD4B;AAEpCC,MAAAA;AAFoC,KAAtC;AAID,GAL2B,EAKzB,EALyB,CAA5B;AAOA,QAAMG,
|
|
1
|
+
{"version":3,"sources":["CollapsibleFlatList.tsx"],"names":["React","useCallback","useEffect","useMemo","useRef","useState","View","StyleSheet","FlatList","Animated","runOnJS","useAnimatedReaction","AnimatedTopView","useAnimatedScroll","useCollapsibleContext","useInternalCollapsibleContext","PullToRefreshContainer","AnimatedFlatList","createAnimatedComponent","CollapsibleFlatList","headerSnappable","props","headerHeight","scrollY","contentMinHeight","scrollViewRef","mounted","contentHeight","current","scrollTo","yValue","animated","scrollToOffset","offset","scrollToIndex","params","handleInternalContentHeight","value","setInternalContentMinHeight","scrollHandler","internalContentMinHeight","result","previous","contentContainerStyle","styles","contentContainer","minHeight","handleContentSizeChange","_","height","handleScrollToIndexFailed","renderListHeader","ListHeaderComponent","container","style","create","absoluteFillObject","flexGrow","topView","position","top","left","right"],"mappings":"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","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport React, {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { FlatListProps, View, StyleSheet, FlatList } from 'react-native';\nimport Animated, {\n runOnJS,\n useAnimatedReaction,\n} from 'react-native-reanimated';\nimport AnimatedTopView from '../header/AnimatedTopView';\nimport useAnimatedScroll from './useAnimatedScroll';\nimport useCollapsibleContext from '../../hooks/useCollapsibleContext';\nimport useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';\nimport type { CollapsibleProps } from '../../types';\nimport PullToRefreshContainer from '../pullToRefresh/PullToRefreshContainer';\n\nconst AnimatedFlatList = Animated.createAnimatedComponent(FlatList);\n\ntype Props<Data> = Omit<FlatListProps<Data>, 'scrollEnabled'> &\n CollapsibleProps;\n\nexport default function CollapsibleFlatList<Data>({\n headerSnappable = true,\n ...props\n}: Props<Data>) {\n const { headerHeight, scrollY } = useCollapsibleContext();\n const { contentMinHeight, scrollViewRef } = useInternalCollapsibleContext();\n const mounted = useRef(true);\n const contentHeight = useRef(0);\n\n useEffect(() => {\n return () => {\n mounted.current = false;\n };\n }, []);\n\n const scrollTo = useCallback((yValue: number, animated = true) => {\n scrollViewRef.current?.scrollToOffset({\n offset: yValue,\n animated,\n });\n }, []);\n\n const scrollToIndex = useCallback((params) => {\n scrollViewRef.current?.scrollToIndex(params);\n }, []);\n\n const handleInternalContentHeight = useCallback((value: number) => {\n if (mounted.current) {\n setInternalContentMinHeight(value);\n }\n }, []);\n\n const { scrollHandler } = useAnimatedScroll({\n headerSnappable,\n scrollTo,\n scrollToIndex,\n });\n\n const [internalContentMinHeight, setInternalContentMinHeight] = useState(\n contentMinHeight.value\n );\n\n useAnimatedReaction(\n () => {\n return contentMinHeight.value;\n },\n (result, previous) => {\n if (result !== previous) {\n if (\n contentHeight.current < contentMinHeight.value &&\n internalContentMinHeight !== contentMinHeight.value\n ) {\n runOnJS(handleInternalContentHeight)(contentMinHeight.value);\n }\n }\n }\n );\n\n const contentContainerStyle = useMemo(\n () => [\n styles.contentContainer,\n { minHeight: internalContentMinHeight },\n props.contentContainerStyle,\n ],\n [props.contentContainerStyle, internalContentMinHeight]\n );\n\n const handleContentSizeChange = useCallback((_, height) => {\n contentHeight.current = height;\n }, []);\n\n const handleScrollToIndexFailed = useCallback(() => {}, []);\n\n const renderListHeader = () => (\n <View>\n <AnimatedTopView height={headerHeight} />\n {props.ListHeaderComponent}\n </View>\n );\n\n return (\n <PullToRefreshContainer scrollY={scrollY}>\n {/* @ts-ignore */}\n <AnimatedFlatList\n ref={scrollViewRef}\n bounces={false}\n keyboardDismissMode=\"on-drag\"\n keyboardShouldPersistTaps=\"handled\"\n scrollEventThrottle={1}\n onScrollToIndexFailed={handleScrollToIndexFailed}\n {...props}\n style={[styles.container, props.style]}\n contentContainerStyle={contentContainerStyle}\n onScroll={scrollHandler}\n ListHeaderComponent={renderListHeader()}\n onContentSizeChange={handleContentSizeChange}\n />\n </PullToRefreshContainer>\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n ...StyleSheet.absoluteFillObject,\n },\n contentContainer: {\n flexGrow: 1,\n },\n topView: {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n },\n});\n"]}
|
|
@@ -28,11 +28,15 @@ export default function CollapsibleScrollView({
|
|
|
28
28
|
animated
|
|
29
29
|
});
|
|
30
30
|
}, []);
|
|
31
|
+
const scrollToIndex = useCallback(() => {
|
|
32
|
+
console.warn("CollapsibleScrollView doesn't support scrollToIndex");
|
|
33
|
+
}, []);
|
|
31
34
|
const {
|
|
32
35
|
scrollHandler
|
|
33
36
|
} = useAnimatedScroll({
|
|
34
37
|
headerSnappable,
|
|
35
|
-
scrollTo
|
|
38
|
+
scrollTo,
|
|
39
|
+
scrollToIndex
|
|
36
40
|
});
|
|
37
41
|
const animatedStyle = useAnimatedStyle(() => {
|
|
38
42
|
return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["CollapsibleScrollView.tsx"],"names":["AnimatedTopView","useAnimatedScroll","React","useCallback","useMemo","StyleSheet","Animated","useAnimatedStyle","useCollapsibleContext","useInternalCollapsibleContext","CollapsibleScrollView","headerSnappable","children","props","contentMinHeight","scrollViewRef","headerHeight","scrollTo","yValue","animated","current","y","scrollHandler","animatedStyle","minHeight","value","contentContainerStyle","styles","contentContainer","container","style","create","absoluteFillObject","flexGrow","topView","position","top","left","right"],"mappings":";;AAAA;AACA,OAAOA,eAAP,MAA4B,2BAA5B;AACA,OAAOC,iBAAP,MAA8B,qBAA9B;AACA,OAAOC,KAAP,IAA2BC,WAA3B,EAAwCC,OAAxC,QAAuD,OAAvD;AACA,SAA0BC,UAA1B,QAA4C,cAA5C;AACA,OAAOC,QAAP,IAAmBC,gBAAnB,QAA2C,yBAA3C;AAEA,OAAOC,qBAAP,MAAkC,mCAAlC;AACA,OAAOC,6BAAP,MAA0C,2CAA1C;AAOA,eAAe,SAASC,qBAAT,CAA+B;AAC5CC,EAAAA,eAAe,GAAG,IAD0B;AAE5CC,EAAAA,QAF4C;AAG5C,KAAGC;AAHyC,CAA/B,EAIL;AACR,QAAM;AAAEC,IAAAA,gBAAF;AAAoBC,IAAAA;AAApB,MAAsCN,6BAA6B,EAAzE;AACA,QAAM;AAAEO,IAAAA;AAAF,MAAmBR,qBAAqB,EAA9C;AAEA,QAAMS,QAAQ,GAAGd,WAAW,CAAC,CAACe,MAAD,EAAiBC,QAAQ,GAAG,IAA5B,KAAqC;AAAA;;AAChE,6BAAAJ,aAAa,CAACK,OAAd,gFAAuBH,QAAvB,CAAgC;AAAEI,MAAAA,CAAC,EAAEH,MAAL;AAAaC,MAAAA;AAAb,KAAhC;AACD,GAF2B,EAEzB,EAFyB,CAA5B;AAIA,QAAM;
|
|
1
|
+
{"version":3,"sources":["CollapsibleScrollView.tsx"],"names":["AnimatedTopView","useAnimatedScroll","React","useCallback","useMemo","StyleSheet","Animated","useAnimatedStyle","useCollapsibleContext","useInternalCollapsibleContext","CollapsibleScrollView","headerSnappable","children","props","contentMinHeight","scrollViewRef","headerHeight","scrollTo","yValue","animated","current","y","scrollToIndex","console","warn","scrollHandler","animatedStyle","minHeight","value","contentContainerStyle","styles","contentContainer","container","style","create","absoluteFillObject","flexGrow","topView","position","top","left","right"],"mappings":";;AAAA;AACA,OAAOA,eAAP,MAA4B,2BAA5B;AACA,OAAOC,iBAAP,MAA8B,qBAA9B;AACA,OAAOC,KAAP,IAA2BC,WAA3B,EAAwCC,OAAxC,QAAuD,OAAvD;AACA,SAA0BC,UAA1B,QAA4C,cAA5C;AACA,OAAOC,QAAP,IAAmBC,gBAAnB,QAA2C,yBAA3C;AAEA,OAAOC,qBAAP,MAAkC,mCAAlC;AACA,OAAOC,6BAAP,MAA0C,2CAA1C;AAOA,eAAe,SAASC,qBAAT,CAA+B;AAC5CC,EAAAA,eAAe,GAAG,IAD0B;AAE5CC,EAAAA,QAF4C;AAG5C,KAAGC;AAHyC,CAA/B,EAIL;AACR,QAAM;AAAEC,IAAAA,gBAAF;AAAoBC,IAAAA;AAApB,MAAsCN,6BAA6B,EAAzE;AACA,QAAM;AAAEO,IAAAA;AAAF,MAAmBR,qBAAqB,EAA9C;AAEA,QAAMS,QAAQ,GAAGd,WAAW,CAAC,CAACe,MAAD,EAAiBC,QAAQ,GAAG,IAA5B,KAAqC;AAAA;;AAChE,6BAAAJ,aAAa,CAACK,OAAd,gFAAuBH,QAAvB,CAAgC;AAAEI,MAAAA,CAAC,EAAEH,MAAL;AAAaC,MAAAA;AAAb,KAAhC;AACD,GAF2B,EAEzB,EAFyB,CAA5B;AAIA,QAAMG,aAAa,GAAGnB,WAAW,CAAC,MAAM;AACtCoB,IAAAA,OAAO,CAACC,IAAR,CAAa,qDAAb;AACD,GAFgC,EAE9B,EAF8B,CAAjC;AAIA,QAAM;AAAEC,IAAAA;AAAF,MAAoBxB,iBAAiB,CAAC;AAC1CU,IAAAA,eAD0C;AAE1CM,IAAAA,QAF0C;AAG1CK,IAAAA;AAH0C,GAAD,CAA3C;AAMA,QAAMI,aAAa,GAAGnB,gBAAgB,CAAC,MAAM;AAC3C,WAAO;AACLoB,MAAAA,SAAS,EAAEb,gBAAgB,CAACc;AADvB,KAAP;AAGD,GAJqC,EAInC,EAJmC,CAAtC;AAMA,QAAMC,qBAAqB,GAAGzB,OAAO,CACnC,MAAM,CAAC0B,MAAM,CAACC,gBAAR,EAA0BlB,KAAK,CAACgB,qBAAhC,CAD6B,EAEnC,CAAChB,KAAK,CAACgB,qBAAP,CAFmC,CAArC;AAKA,sBACE,oBAAC,QAAD,CAAU,UAAV;AACE,IAAA,GAAG,EAAEd,aADP;AAEE,IAAA,OAAO,EAAE;AAFX,KAGMF,KAHN;AAIE,IAAA,KAAK,EAAE,CAACiB,MAAM,CAACE,SAAR,EAAmBnB,KAAK,CAACoB,KAAzB,CAJT;AAKE,IAAA,qBAAqB,EAAEJ,qBALzB;AAME,IAAA,QAAQ,EAAEJ,aANZ;AAOE,IAAA,mBAAmB,EAAC,SAPtB;AAQE,IAAA,yBAAyB,EAAC,SAR5B;AASE,IAAA,mBAAmB,EAAE;AATvB,mBAWE,oBAAC,QAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAEC;AAAtB,kBACE,oBAAC,eAAD;AAAiB,IAAA,MAAM,EAAEV;AAAzB,IADF,EAEGJ,QAFH,CAXF,CADF;AAkBD;AAED,MAAMkB,MAAM,GAAGzB,UAAU,CAAC6B,MAAX,CAAkB;AAC/BF,EAAAA,SAAS,EAAE,EACT,GAAG3B,UAAU,CAAC8B;AADL,GADoB;AAI/BJ,EAAAA,gBAAgB,EAAE;AAChBK,IAAAA,QAAQ,EAAE;AADM,GAJa;AAO/BC,EAAAA,OAAO,EAAE;AACPC,IAAAA,QAAQ,EAAE,UADH;AAEPC,IAAAA,GAAG,EAAE,CAFE;AAGPC,IAAAA,IAAI,EAAE,CAHC;AAIPC,IAAAA,KAAK,EAAE;AAJA;AAPsB,CAAlB,CAAf","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport AnimatedTopView from '../header/AnimatedTopView';\nimport useAnimatedScroll from './useAnimatedScroll';\nimport React, { ReactNode, useCallback, useMemo } from 'react';\nimport { ScrollViewProps, StyleSheet } from 'react-native';\nimport Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport type { CollapsibleProps } from '../../types';\nimport useCollapsibleContext from '../../hooks/useCollapsibleContext';\nimport useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';\n\ntype Props = ScrollViewProps &\n CollapsibleProps & {\n children?: ReactNode;\n };\n\nexport default function CollapsibleScrollView({\n headerSnappable = true,\n children,\n ...props\n}: Props) {\n const { contentMinHeight, scrollViewRef } = useInternalCollapsibleContext();\n const { headerHeight } = useCollapsibleContext();\n\n const scrollTo = useCallback((yValue: number, animated = true) => {\n scrollViewRef.current?.scrollTo({ y: yValue, animated });\n }, []);\n\n const scrollToIndex = useCallback(() => {\n console.warn(\"CollapsibleScrollView doesn't support scrollToIndex\");\n }, []);\n\n const { scrollHandler } = useAnimatedScroll({\n headerSnappable,\n scrollTo,\n scrollToIndex,\n });\n\n const animatedStyle = useAnimatedStyle(() => {\n return {\n minHeight: contentMinHeight.value,\n };\n }, []);\n\n const contentContainerStyle = useMemo(\n () => [styles.contentContainer, props.contentContainerStyle],\n [props.contentContainerStyle]\n );\n\n return (\n <Animated.ScrollView\n ref={scrollViewRef}\n bounces={false}\n {...props}\n style={[styles.container, props.style]}\n contentContainerStyle={contentContainerStyle}\n onScroll={scrollHandler}\n keyboardDismissMode=\"on-drag\"\n keyboardShouldPersistTaps=\"handled\"\n scrollEventThrottle={1}\n >\n <Animated.View style={animatedStyle}>\n <AnimatedTopView height={headerHeight} />\n {children}\n </Animated.View>\n </Animated.ScrollView>\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n ...StyleSheet.absoluteFillObject,\n },\n contentContainer: {\n flexGrow: 1,\n },\n topView: {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n },\n});\n"]}
|
|
@@ -9,7 +9,8 @@ const {
|
|
|
9
9
|
} = Dimensions.get('window');
|
|
10
10
|
export default function useAnimatedScroll({
|
|
11
11
|
headerSnappable,
|
|
12
|
-
scrollTo
|
|
12
|
+
scrollTo,
|
|
13
|
+
scrollToIndex
|
|
13
14
|
}) {
|
|
14
15
|
const scrollDirection = useSharedValue('unknown');
|
|
15
16
|
const {
|
|
@@ -33,9 +34,10 @@ export default function useAnimatedScroll({
|
|
|
33
34
|
setCollapsibleHandlers({
|
|
34
35
|
collapse,
|
|
35
36
|
expand,
|
|
36
|
-
scrollTo
|
|
37
|
+
scrollTo,
|
|
38
|
+
scrollToIndex
|
|
37
39
|
});
|
|
38
|
-
}, [setCollapsibleHandlers, collapse, expand, scrollTo]);
|
|
40
|
+
}, [setCollapsibleHandlers, collapse, expand, scrollTo, scrollToIndex]);
|
|
39
41
|
const scrollHandler = useAnimatedScrollHandler({
|
|
40
42
|
onScroll: event => {
|
|
41
43
|
const offset = event.contentOffset.y;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAnimatedScroll.ts"],"names":["useCallback","useEffect","Dimensions","runOnJS","useAnimatedScrollHandler","useSharedValue","useCollapsibleContext","useInternalCollapsibleContext","height","wHeight","get","useAnimatedScroll","headerSnappable","scrollTo","scrollDirection","scrollY","setCollapsibleHandlers","firstStickyViewY","fixedHeaderHeight","value","requestAnimationFrame","collapse","Math","min","expand","scrollHandler","onScroll","event","offset","contentOffset","y","diff","onEndDrag","maxY","delta","abs","yValue"],"mappings":"AAAA;AACA,SAASA,WAAT,EAAsBC,SAAtB,QAAuC,OAAvC;AACA,SAASC,UAAT,QAA2B,cAA3B;AACA,SACEC,OADF,EAEEC,wBAFF,EAGEC,cAHF,QAIO,yBAJP;
|
|
1
|
+
{"version":3,"sources":["useAnimatedScroll.ts"],"names":["useCallback","useEffect","Dimensions","runOnJS","useAnimatedScrollHandler","useSharedValue","useCollapsibleContext","useInternalCollapsibleContext","height","wHeight","get","useAnimatedScroll","headerSnappable","scrollTo","scrollToIndex","scrollDirection","scrollY","setCollapsibleHandlers","firstStickyViewY","fixedHeaderHeight","value","requestAnimationFrame","collapse","Math","min","expand","scrollHandler","onScroll","event","offset","contentOffset","y","diff","onEndDrag","maxY","delta","abs","yValue"],"mappings":"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","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport { useCallback, useEffect } from 'react';\nimport { Dimensions } from 'react-native';\nimport {\n runOnJS,\n useAnimatedScrollHandler,\n useSharedValue,\n} from 'react-native-reanimated';\nimport type { ScrollToIndexParams } from 'src/types';\nimport useCollapsibleContext from '../../hooks/useCollapsibleContext';\nimport useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';\n\nconst { height: wHeight } = Dimensions.get('window');\n\ntype Props = {\n headerSnappable: boolean;\n scrollTo: (yValue: number, animated?: boolean) => void;\n scrollToIndex: (params: ScrollToIndexParams) => void;\n};\n\nexport default function useAnimatedScroll({\n headerSnappable,\n scrollTo,\n scrollToIndex,\n}: Props) {\n const scrollDirection = useSharedValue('unknown');\n const { scrollY } = useCollapsibleContext();\n const { setCollapsibleHandlers, firstStickyViewY, fixedHeaderHeight } =\n useInternalCollapsibleContext();\n\n useEffect(() => {\n if (scrollY.value > 0) {\n requestAnimationFrame(() => scrollTo(scrollY.value, false));\n }\n }, []);\n\n const collapse = useCallback(() => {\n scrollTo(\n Math.min(fixedHeaderHeight.value || 0, firstStickyViewY.value || 0)\n );\n }, [scrollTo]);\n\n const expand = useCallback(() => scrollTo(0), [scrollTo]);\n\n useEffect(() => {\n setCollapsibleHandlers({\n collapse,\n expand,\n scrollTo,\n scrollToIndex,\n });\n }, [setCollapsibleHandlers, collapse, expand, scrollTo, scrollToIndex]);\n\n const scrollHandler = useAnimatedScrollHandler(\n {\n onScroll: (event) => {\n const offset = event.contentOffset.y;\n const diff = scrollY.value - offset;\n scrollDirection.value = diff > 0 ? 'down' : diff < 0 ? 'up' : 'unknown';\n scrollY.value = offset;\n },\n onEndDrag: () => {\n if (!headerSnappable) return;\n const maxY =\n firstStickyViewY.value && firstStickyViewY.value > 0\n ? firstStickyViewY.value\n : fixedHeaderHeight.value || 0;\n\n if (scrollY.value < maxY) {\n const delta = Math.abs(scrollY.value - maxY);\n if (delta < wHeight / 2) {\n let yValue = 0;\n if (scrollDirection.value === 'up') {\n yValue = maxY;\n }\n runOnJS(scrollTo)(yValue);\n }\n }\n },\n },\n [scrollTo]\n );\n\n return {\n scrollHandler,\n collapse,\n expand,\n };\n}\n"]}
|
|
@@ -24,6 +24,9 @@ export default function withCollapsibleContext(Component) {
|
|
|
24
24
|
const containerRef = useRef(null);
|
|
25
25
|
const scrollViewRef = useRef(null);
|
|
26
26
|
const setCollapsibleHandlers = useCallback(handlers => {
|
|
27
|
+
console.log({
|
|
28
|
+
handlers
|
|
29
|
+
});
|
|
27
30
|
collapsibleHandlers.current = handlers;
|
|
28
31
|
}, []);
|
|
29
32
|
const headerCollapsed = useDerivedValue(() => {
|
|
@@ -137,6 +140,11 @@ export default function withCollapsibleContext(Component) {
|
|
|
137
140
|
|
|
138
141
|
return (_collapsibleHandlers$3 = collapsibleHandlers.current) === null || _collapsibleHandlers$3 === void 0 ? void 0 : _collapsibleHandlers$3.scrollTo(offset, animate);
|
|
139
142
|
},
|
|
143
|
+
scrollToIndex: params => {
|
|
144
|
+
var _collapsibleHandlers$4;
|
|
145
|
+
|
|
146
|
+
return (_collapsibleHandlers$4 = collapsibleHandlers.current) === null || _collapsibleHandlers$4 === void 0 ? void 0 : _collapsibleHandlers$4.scrollToIndex(params);
|
|
147
|
+
},
|
|
140
148
|
headerHeight,
|
|
141
149
|
scrollY,
|
|
142
150
|
headerCollapsed
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["withCollapsibleContext.tsx"],"names":["React","useCallback","useMemo","useRef","CollapsibleContext","InternalCollapsibleContext","useAnimatedReaction","useDerivedValue","useSharedValue","withTiming","debounce","PullToRefreshProvider","withCollapsibleContext","Component","props","collapsibleHandlers","headerHeight","scrollY","stickyViewRefs","stickyViewTops","stickyViewPositionsRef","stickyViewPositions","fixedHeaderHeight","stickyHeaderHeight","containerHeight","firstStickyViewY","headerContainersHeight","containerRef","scrollViewRef","setCollapsibleHandlers","handlers","current","headerCollapsed","maxY","value","contentMinHeight","totalHeight","Object","keys","reduce","acc","item","top","result","previous","viewPositions","sortedKeys","sort","a","b","totalTop","values","i","length","height","stickyHeader","key","data","isInsideHeader","handleStickyViewLayout","viewKey","viewRef","measureLayout","left","width","debounceRefreshStickyPositions","forEach","handleHeaderContainerLayout","duration","handleContainerHeight","context","collapse","expand","scrollTo","offset","animate","internalContext"],"mappings":"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","sourcesContent":["/* eslint-disable no-shadow */\n/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { FC, useCallback, useMemo, useRef } from 'react';\nimport type { CollapsibleHandles, LayoutParams } from './types';\nimport { CollapsibleContext } from './hooks/useCollapsibleContext';\nimport { InternalCollapsibleContext } from './hooks/useInternalCollapsibleContext';\nimport {\n useAnimatedReaction,\n useDerivedValue,\n useSharedValue,\n withTiming,\n} from 'react-native-reanimated';\nimport type { View } from 'react-native';\nimport { debounce } from './utils/debounce';\nimport PullToRefreshProvider from './components/pullToRefresh/PullToRefreshProvider';\n\nexport default function withCollapsibleContext<T>(Component: FC<T>) {\n return (props: T) => {\n const collapsibleHandlers = useRef<CollapsibleHandles>();\n const headerHeight = useSharedValue(0);\n const scrollY = useSharedValue(0);\n const stickyViewRefs = useRef<Record<string, React.RefObject<View>>>({});\n const stickyViewTops = useSharedValue<Record<string, number>>({});\n const stickyViewPositionsRef = useRef<Record<string, LayoutParams>>({});\n const stickyViewPositions = useSharedValue<Record<string, LayoutParams>>(\n {}\n );\n const fixedHeaderHeight = useSharedValue(0);\n const stickyHeaderHeight = useSharedValue(0);\n const containerHeight = useSharedValue(0);\n const firstStickyViewY = useSharedValue(1000000);\n const headerContainersHeight = useRef<Record<string, number>>({});\n const containerRef = useRef<View>(null);\n const scrollViewRef = useRef<View>(null);\n\n const setCollapsibleHandlers = useCallback((handlers) => {\n collapsibleHandlers.current = handlers;\n }, []);\n\n const headerCollapsed = useDerivedValue(() => {\n const maxY = fixedHeaderHeight.value - firstStickyViewY.value;\n return scrollY.value >= maxY;\n }, []);\n\n const contentMinHeight = useDerivedValue(() => {\n return (\n containerHeight.value +\n fixedHeaderHeight.value -\n stickyHeaderHeight.value\n );\n }, []);\n\n useAnimatedReaction(\n () => {\n const totalHeight = Object.keys(stickyViewPositions.value).reduce(\n (acc, item) => {\n return acc + stickyViewPositions.value[item].top;\n },\n 0\n );\n return totalHeight - fixedHeaderHeight.value;\n },\n (result, previous) => {\n if (result !== previous) {\n const viewPositions = stickyViewPositions.value;\n const headerHeight = fixedHeaderHeight.value;\n const sortedKeys = Object.keys(viewPositions).sort(\n (a, b) => viewPositions[a].top - viewPositions[b].top\n );\n let totalTop = 0;\n const values: any = {};\n for (let i = 0; i < sortedKeys.length; i++) {\n values[sortedKeys[i]] = totalTop;\n // Try minus 1 make it filled when scrolling up.\n // Otherwise, we can see a small space between the persits views\n totalTop += viewPositions[sortedKeys[i]].height - 1;\n }\n stickyViewTops.value = values;\n firstStickyViewY.value = viewPositions[sortedKeys[0]]?.top || 0;\n const stickyHeader = sortedKeys.reduce((acc, key) => {\n const data = viewPositions[key];\n const isInsideHeader = data.top < headerHeight;\n if (isInsideHeader) {\n return acc + data.height;\n }\n return acc;\n }, 0);\n stickyHeaderHeight.value = stickyHeader;\n }\n }\n );\n\n const handleStickyViewLayout = useCallback(\n (viewKey: string, viewRef?: React.RefObject<View>) => {\n if (viewRef && viewRef.current && containerRef.current) {\n stickyViewRefs.current[viewKey] = viewRef;\n viewRef.current.measureLayout(\n // @ts-ignore\n containerRef.current,\n (left, top, width, height) => {\n stickyViewPositionsRef.current = {\n ...stickyViewPositionsRef.current,\n [viewKey]: { left, top, width, height },\n };\n stickyViewPositions.value = stickyViewPositionsRef.current;\n },\n () => {}\n );\n } else {\n delete stickyViewRefs.current[viewKey];\n delete stickyViewPositionsRef.current[viewKey];\n stickyViewPositions.value = stickyViewPositionsRef.current;\n }\n },\n []\n );\n\n const debounceRefreshStickyPositions = useMemo(() => {\n return debounce(() => {\n Object.keys(stickyViewRefs.current).forEach((key) => {\n const viewRef = stickyViewRefs.current[key];\n if (viewRef) {\n handleStickyViewLayout(key, viewRef);\n }\n });\n }, 200);\n }, []);\n\n const handleHeaderContainerLayout = useCallback(\n (viewKey: string, height?: number) => {\n if (!height) {\n delete headerContainersHeight.current[viewKey];\n } else {\n headerContainersHeight.current[viewKey] = height;\n }\n const totalHeight = Object.keys(headerContainersHeight.current).reduce(\n (acc, key) => headerContainersHeight.current[key] + acc,\n 0\n );\n headerHeight.value = withTiming(totalHeight, {\n duration: fixedHeaderHeight.value === 0 ? 0 : 10,\n });\n fixedHeaderHeight.value = totalHeight;\n // Try refresh sticky positions\n debounceRefreshStickyPositions();\n },\n []\n );\n\n const handleContainerHeight = useCallback((height: number) => {\n containerHeight.value = height;\n }, []);\n\n const context = useMemo(() => {\n return {\n collapse: () => collapsibleHandlers.current?.collapse(),\n expand: () => collapsibleHandlers.current?.expand(),\n scrollTo: (offset: number, animate?: boolean) =>\n collapsibleHandlers.current?.scrollTo(offset, animate),\n headerHeight,\n scrollY,\n headerCollapsed,\n };\n }, [scrollY, headerHeight, headerCollapsed]);\n\n const internalContext = useMemo(\n () => ({\n scrollViewRef,\n containerRef,\n handleStickyViewLayout,\n handleHeaderContainerLayout,\n setCollapsibleHandlers,\n handleContainerHeight,\n firstStickyViewY,\n stickyViewTops,\n stickyViewPositions,\n fixedHeaderHeight,\n contentMinHeight,\n }),\n [\n setCollapsibleHandlers,\n handleStickyViewLayout,\n handleHeaderContainerLayout,\n handleContainerHeight,\n firstStickyViewY,\n stickyViewTops,\n stickyViewPositions,\n fixedHeaderHeight,\n contentMinHeight,\n ]\n );\n\n return (\n <CollapsibleContext.Provider value={context}>\n <InternalCollapsibleContext.Provider value={internalContext}>\n <PullToRefreshProvider>\n <Component {...props} />\n </PullToRefreshProvider>\n </InternalCollapsibleContext.Provider>\n </CollapsibleContext.Provider>\n );\n };\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["withCollapsibleContext.tsx"],"names":["React","useCallback","useMemo","useRef","CollapsibleContext","InternalCollapsibleContext","useAnimatedReaction","useDerivedValue","useSharedValue","withTiming","debounce","PullToRefreshProvider","withCollapsibleContext","Component","props","collapsibleHandlers","headerHeight","scrollY","stickyViewRefs","stickyViewTops","stickyViewPositionsRef","stickyViewPositions","fixedHeaderHeight","stickyHeaderHeight","containerHeight","firstStickyViewY","headerContainersHeight","containerRef","scrollViewRef","setCollapsibleHandlers","handlers","console","log","current","headerCollapsed","maxY","value","contentMinHeight","totalHeight","Object","keys","reduce","acc","item","top","result","previous","viewPositions","sortedKeys","sort","a","b","totalTop","values","i","length","height","stickyHeader","key","data","isInsideHeader","handleStickyViewLayout","viewKey","viewRef","measureLayout","left","width","debounceRefreshStickyPositions","forEach","handleHeaderContainerLayout","duration","handleContainerHeight","context","collapse","expand","scrollTo","offset","animate","scrollToIndex","params","internalContext"],"mappings":"AAAA;;AACA;AACA,OAAOA,KAAP,IAAoBC,WAApB,EAAiCC,OAAjC,EAA0CC,MAA1C,QAAwD,OAAxD;AAEA,SAASC,kBAAT,QAAmC,+BAAnC;AACA,SAASC,0BAAT,QAA2C,uCAA3C;AACA,SACEC,mBADF,EAEEC,eAFF,EAGEC,cAHF,EAIEC,UAJF,QAKO,yBALP;AAOA,SAASC,QAAT,QAAyB,kBAAzB;AACA,OAAOC,qBAAP,MAAkC,kDAAlC;AAEA,eAAe,SAASC,sBAAT,CAAmCC,SAAnC,EAAqD;AAClE,SAAQC,KAAD,IAAc;AACnB,UAAMC,mBAAmB,GAAGZ,MAAM,EAAlC;AACA,UAAMa,YAAY,GAAGR,cAAc,CAAC,CAAD,CAAnC;AACA,UAAMS,OAAO,GAAGT,cAAc,CAAC,CAAD,CAA9B;AACA,UAAMU,cAAc,GAAGf,MAAM,CAAwC,EAAxC,CAA7B;AACA,UAAMgB,cAAc,GAAGX,cAAc,CAAyB,EAAzB,CAArC;AACA,UAAMY,sBAAsB,GAAGjB,MAAM,CAA+B,EAA/B,CAArC;AACA,UAAMkB,mBAAmB,GAAGb,cAAc,CACxC,EADwC,CAA1C;AAGA,UAAMc,iBAAiB,GAAGd,cAAc,CAAC,CAAD,CAAxC;AACA,UAAMe,kBAAkB,GAAGf,cAAc,CAAC,CAAD,CAAzC;AACA,UAAMgB,eAAe,GAAGhB,cAAc,CAAC,CAAD,CAAtC;AACA,UAAMiB,gBAAgB,GAAGjB,cAAc,CAAC,OAAD,CAAvC;AACA,UAAMkB,sBAAsB,GAAGvB,MAAM,CAAyB,EAAzB,CAArC;AACA,UAAMwB,YAAY,GAAGxB,MAAM,CAAO,IAAP,CAA3B;AACA,UAAMyB,aAAa,GAAGzB,MAAM,CAAO,IAAP,CAA5B;AAEA,UAAM0B,sBAAsB,GAAG5B,WAAW,CAAE6B,QAAD,IAAc;AACvDC,MAAAA,OAAO,CAACC,GAAR,CAAY;AAAEF,QAAAA;AAAF,OAAZ;AAEAf,MAAAA,mBAAmB,CAACkB,OAApB,GAA8BH,QAA9B;AACD,KAJyC,EAIvC,EAJuC,CAA1C;AAMA,UAAMI,eAAe,GAAG3B,eAAe,CAAC,MAAM;AAC5C,YAAM4B,IAAI,GAAGb,iBAAiB,CAACc,KAAlB,GAA0BX,gBAAgB,CAACW,KAAxD;AACA,aAAOnB,OAAO,CAACmB,KAAR,IAAiBD,IAAxB;AACD,KAHsC,EAGpC,EAHoC,CAAvC;AAKA,UAAME,gBAAgB,GAAG9B,eAAe,CAAC,MAAM;AAC7C,aACEiB,eAAe,CAACY,KAAhB,GACAd,iBAAiB,CAACc,KADlB,GAEAb,kBAAkB,CAACa,KAHrB;AAKD,KANuC,EAMrC,EANqC,CAAxC;AAQA9B,IAAAA,mBAAmB,CACjB,MAAM;AACJ,YAAMgC,WAAW,GAAGC,MAAM,CAACC,IAAP,CAAYnB,mBAAmB,CAACe,KAAhC,EAAuCK,MAAvC,CAClB,CAACC,GAAD,EAAMC,IAAN,KAAe;AACb,eAAOD,GAAG,GAAGrB,mBAAmB,CAACe,KAApB,CAA0BO,IAA1B,EAAgCC,GAA7C;AACD,OAHiB,EAIlB,CAJkB,CAApB;AAMA,aAAON,WAAW,GAAGhB,iBAAiB,CAACc,KAAvC;AACD,KATgB,EAUjB,CAACS,MAAD,EAASC,QAAT,KAAsB;AACpB,UAAID,MAAM,KAAKC,QAAf,EAAyB;AAAA;;AACvB,cAAMC,aAAa,GAAG1B,mBAAmB,CAACe,KAA1C;AACA,cAAMpB,YAAY,GAAGM,iBAAiB,CAACc,KAAvC;AACA,cAAMY,UAAU,GAAGT,MAAM,CAACC,IAAP,CAAYO,aAAZ,EAA2BE,IAA3B,CACjB,CAACC,CAAD,EAAIC,CAAJ,KAAUJ,aAAa,CAACG,CAAD,CAAb,CAAiBN,GAAjB,GAAuBG,aAAa,CAACI,CAAD,CAAb,CAAiBP,GADjC,CAAnB;AAGA,YAAIQ,QAAQ,GAAG,CAAf;AACA,cAAMC,MAAW,GAAG,EAApB;;AACA,aAAK,IAAIC,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGN,UAAU,CAACO,MAA/B,EAAuCD,CAAC,EAAxC,EAA4C;AAC1CD,UAAAA,MAAM,CAACL,UAAU,CAACM,CAAD,CAAX,CAAN,GAAwBF,QAAxB,CAD0C,CAE1C;AACA;;AACAA,UAAAA,QAAQ,IAAIL,aAAa,CAACC,UAAU,CAACM,CAAD,CAAX,CAAb,CAA6BE,MAA7B,GAAsC,CAAlD;AACD;;AACDrC,QAAAA,cAAc,CAACiB,KAAf,GAAuBiB,MAAvB;AACA5B,QAAAA,gBAAgB,CAACW,KAAjB,GAAyB,0BAAAW,aAAa,CAACC,UAAU,CAAC,CAAD,CAAX,CAAb,gFAA8BJ,GAA9B,KAAqC,CAA9D;AACA,cAAMa,YAAY,GAAGT,UAAU,CAACP,MAAX,CAAkB,CAACC,GAAD,EAAMgB,GAAN,KAAc;AACnD,gBAAMC,IAAI,GAAGZ,aAAa,CAACW,GAAD,CAA1B;AACA,gBAAME,cAAc,GAAGD,IAAI,CAACf,GAAL,GAAW5B,YAAlC;;AACA,cAAI4C,cAAJ,EAAoB;AAClB,mBAAOlB,GAAG,GAAGiB,IAAI,CAACH,MAAlB;AACD;;AACD,iBAAOd,GAAP;AACD,SAPoB,EAOlB,CAPkB,CAArB;AAQAnB,QAAAA,kBAAkB,CAACa,KAAnB,GAA2BqB,YAA3B;AACD;AACF,KArCgB,CAAnB;AAwCA,UAAMI,sBAAsB,GAAG5D,WAAW,CACxC,CAAC6D,OAAD,EAAkBC,OAAlB,KAAsD;AACpD,UAAIA,OAAO,IAAIA,OAAO,CAAC9B,OAAnB,IAA8BN,YAAY,CAACM,OAA/C,EAAwD;AACtDf,QAAAA,cAAc,CAACe,OAAf,CAAuB6B,OAAvB,IAAkCC,OAAlC;AACAA,QAAAA,OAAO,CAAC9B,OAAR,CAAgB+B,aAAhB,EACE;AACArC,QAAAA,YAAY,CAACM,OAFf,EAGE,CAACgC,IAAD,EAAOrB,GAAP,EAAYsB,KAAZ,EAAmBV,MAAnB,KAA8B;AAC5BpC,UAAAA,sBAAsB,CAACa,OAAvB,GAAiC,EAC/B,GAAGb,sBAAsB,CAACa,OADK;AAE/B,aAAC6B,OAAD,GAAW;AAAEG,cAAAA,IAAF;AAAQrB,cAAAA,GAAR;AAAasB,cAAAA,KAAb;AAAoBV,cAAAA;AAApB;AAFoB,WAAjC;AAIAnC,UAAAA,mBAAmB,CAACe,KAApB,GAA4BhB,sBAAsB,CAACa,OAAnD;AACD,SATH,EAUE,MAAM,CAAE,CAVV;AAYD,OAdD,MAcO;AACL,eAAOf,cAAc,CAACe,OAAf,CAAuB6B,OAAvB,CAAP;AACA,eAAO1C,sBAAsB,CAACa,OAAvB,CAA+B6B,OAA/B,CAAP;AACAzC,QAAAA,mBAAmB,CAACe,KAApB,GAA4BhB,sBAAsB,CAACa,OAAnD;AACD;AACF,KArBuC,EAsBxC,EAtBwC,CAA1C;AAyBA,UAAMkC,8BAA8B,GAAGjE,OAAO,CAAC,MAAM;AACnD,aAAOQ,QAAQ,CAAC,MAAM;AACpB6B,QAAAA,MAAM,CAACC,IAAP,CAAYtB,cAAc,CAACe,OAA3B,EAAoCmC,OAApC,CAA6CV,GAAD,IAAS;AACnD,gBAAMK,OAAO,GAAG7C,cAAc,CAACe,OAAf,CAAuByB,GAAvB,CAAhB;;AACA,cAAIK,OAAJ,EAAa;AACXF,YAAAA,sBAAsB,CAACH,GAAD,EAAMK,OAAN,CAAtB;AACD;AACF,SALD;AAMD,OAPc,EAOZ,GAPY,CAAf;AAQD,KAT6C,EAS3C,EAT2C,CAA9C;AAWA,UAAMM,2BAA2B,GAAGpE,WAAW,CAC7C,CAAC6D,OAAD,EAAkBN,MAAlB,KAAsC;AACpC,UAAI,CAACA,MAAL,EAAa;AACX,eAAO9B,sBAAsB,CAACO,OAAvB,CAA+B6B,OAA/B,CAAP;AACD,OAFD,MAEO;AACLpC,QAAAA,sBAAsB,CAACO,OAAvB,CAA+B6B,OAA/B,IAA0CN,MAA1C;AACD;;AACD,YAAMlB,WAAW,GAAGC,MAAM,CAACC,IAAP,CAAYd,sBAAsB,CAACO,OAAnC,EAA4CQ,MAA5C,CAClB,CAACC,GAAD,EAAMgB,GAAN,KAAchC,sBAAsB,CAACO,OAAvB,CAA+ByB,GAA/B,IAAsChB,GADlC,EAElB,CAFkB,CAApB;AAIA1B,MAAAA,YAAY,CAACoB,KAAb,GAAqB3B,UAAU,CAAC6B,WAAD,EAAc;AAC3CgC,QAAAA,QAAQ,EAAEhD,iBAAiB,CAACc,KAAlB,KAA4B,CAA5B,GAAgC,CAAhC,GAAoC;AADH,OAAd,CAA/B;AAGAd,MAAAA,iBAAiB,CAACc,KAAlB,GAA0BE,WAA1B,CAboC,CAcpC;;AACA6B,MAAAA,8BAA8B;AAC/B,KAjB4C,EAkB7C,EAlB6C,CAA/C;AAqBA,UAAMI,qBAAqB,GAAGtE,WAAW,CAAEuD,MAAD,IAAoB;AAC5DhC,MAAAA,eAAe,CAACY,KAAhB,GAAwBoB,MAAxB;AACD,KAFwC,EAEtC,EAFsC,CAAzC;AAIA,UAAMgB,OAAO,GAAGtE,OAAO,CAAC,MAAM;AAC5B,aAAO;AACLuE,QAAAA,QAAQ,EAAE;AAAA;;AAAA,0CAAM1D,mBAAmB,CAACkB,OAA1B,0DAAM,sBAA6BwC,QAA7B,EAAN;AAAA,SADL;AAELC,QAAAA,MAAM,EAAE;AAAA;;AAAA,2CAAM3D,mBAAmB,CAACkB,OAA1B,2DAAM,uBAA6ByC,MAA7B,EAAN;AAAA,SAFH;AAGLC,QAAAA,QAAQ,EAAE,CAACC,MAAD,EAAiBC,OAAjB;AAAA;;AAAA,2CACR9D,mBAAmB,CAACkB,OADZ,2DACR,uBAA6B0C,QAA7B,CAAsCC,MAAtC,EAA8CC,OAA9C,CADQ;AAAA,SAHL;AAKLC,QAAAA,aAAa,EAAGC,MAAD;AAAA;;AAAA,2CACbhE,mBAAmB,CAACkB,OADP,2DACb,uBAA6B6C,aAA7B,CAA2CC,MAA3C,CADa;AAAA,SALV;AAOL/D,QAAAA,YAPK;AAQLC,QAAAA,OARK;AASLiB,QAAAA;AATK,OAAP;AAWD,KAZsB,EAYpB,CAACjB,OAAD,EAAUD,YAAV,EAAwBkB,eAAxB,CAZoB,CAAvB;AAcA,UAAM8C,eAAe,GAAG9E,OAAO,CAC7B,OAAO;AACL0B,MAAAA,aADK;AAELD,MAAAA,YAFK;AAGLkC,MAAAA,sBAHK;AAILQ,MAAAA,2BAJK;AAKLxC,MAAAA,sBALK;AAML0C,MAAAA,qBANK;AAOL9C,MAAAA,gBAPK;AAQLN,MAAAA,cARK;AASLE,MAAAA,mBATK;AAULC,MAAAA,iBAVK;AAWLe,MAAAA;AAXK,KAAP,CAD6B,EAc7B,CACER,sBADF,EAEEgC,sBAFF,EAGEQ,2BAHF,EAIEE,qBAJF,EAKE9C,gBALF,EAMEN,cANF,EAOEE,mBAPF,EAQEC,iBARF,EASEe,gBATF,CAd6B,CAA/B;AA2BA,wBACE,oBAAC,kBAAD,CAAoB,QAApB;AAA6B,MAAA,KAAK,EAAEmC;AAApC,oBACE,oBAAC,0BAAD,CAA4B,QAA5B;AAAqC,MAAA,KAAK,EAAEQ;AAA5C,oBACE,oBAAC,qBAAD,qBACE,oBAAC,SAAD,EAAelE,KAAf,CADF,CADF,CADF,CADF;AASD,GA5LD;AA6LD","sourcesContent":["/* eslint-disable no-shadow */\n/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { FC, useCallback, useMemo, useRef } from 'react';\nimport type { CollapsibleHandles, LayoutParams } from './types';\nimport { CollapsibleContext } from './hooks/useCollapsibleContext';\nimport { InternalCollapsibleContext } from './hooks/useInternalCollapsibleContext';\nimport {\n useAnimatedReaction,\n useDerivedValue,\n useSharedValue,\n withTiming,\n} from 'react-native-reanimated';\nimport type { View } from 'react-native';\nimport { debounce } from './utils/debounce';\nimport PullToRefreshProvider from './components/pullToRefresh/PullToRefreshProvider';\n\nexport default function withCollapsibleContext<T>(Component: FC<T>) {\n return (props: T) => {\n const collapsibleHandlers = useRef<CollapsibleHandles>();\n const headerHeight = useSharedValue(0);\n const scrollY = useSharedValue(0);\n const stickyViewRefs = useRef<Record<string, React.RefObject<View>>>({});\n const stickyViewTops = useSharedValue<Record<string, number>>({});\n const stickyViewPositionsRef = useRef<Record<string, LayoutParams>>({});\n const stickyViewPositions = useSharedValue<Record<string, LayoutParams>>(\n {}\n );\n const fixedHeaderHeight = useSharedValue(0);\n const stickyHeaderHeight = useSharedValue(0);\n const containerHeight = useSharedValue(0);\n const firstStickyViewY = useSharedValue(1000000);\n const headerContainersHeight = useRef<Record<string, number>>({});\n const containerRef = useRef<View>(null);\n const scrollViewRef = useRef<View>(null);\n\n const setCollapsibleHandlers = useCallback((handlers) => {\n console.log({ handlers });\n\n collapsibleHandlers.current = handlers;\n }, []);\n\n const headerCollapsed = useDerivedValue(() => {\n const maxY = fixedHeaderHeight.value - firstStickyViewY.value;\n return scrollY.value >= maxY;\n }, []);\n\n const contentMinHeight = useDerivedValue(() => {\n return (\n containerHeight.value +\n fixedHeaderHeight.value -\n stickyHeaderHeight.value\n );\n }, []);\n\n useAnimatedReaction(\n () => {\n const totalHeight = Object.keys(stickyViewPositions.value).reduce(\n (acc, item) => {\n return acc + stickyViewPositions.value[item].top;\n },\n 0\n );\n return totalHeight - fixedHeaderHeight.value;\n },\n (result, previous) => {\n if (result !== previous) {\n const viewPositions = stickyViewPositions.value;\n const headerHeight = fixedHeaderHeight.value;\n const sortedKeys = Object.keys(viewPositions).sort(\n (a, b) => viewPositions[a].top - viewPositions[b].top\n );\n let totalTop = 0;\n const values: any = {};\n for (let i = 0; i < sortedKeys.length; i++) {\n values[sortedKeys[i]] = totalTop;\n // Try minus 1 make it filled when scrolling up.\n // Otherwise, we can see a small space between the persits views\n totalTop += viewPositions[sortedKeys[i]].height - 1;\n }\n stickyViewTops.value = values;\n firstStickyViewY.value = viewPositions[sortedKeys[0]]?.top || 0;\n const stickyHeader = sortedKeys.reduce((acc, key) => {\n const data = viewPositions[key];\n const isInsideHeader = data.top < headerHeight;\n if (isInsideHeader) {\n return acc + data.height;\n }\n return acc;\n }, 0);\n stickyHeaderHeight.value = stickyHeader;\n }\n }\n );\n\n const handleStickyViewLayout = useCallback(\n (viewKey: string, viewRef?: React.RefObject<View>) => {\n if (viewRef && viewRef.current && containerRef.current) {\n stickyViewRefs.current[viewKey] = viewRef;\n viewRef.current.measureLayout(\n // @ts-ignore\n containerRef.current,\n (left, top, width, height) => {\n stickyViewPositionsRef.current = {\n ...stickyViewPositionsRef.current,\n [viewKey]: { left, top, width, height },\n };\n stickyViewPositions.value = stickyViewPositionsRef.current;\n },\n () => {}\n );\n } else {\n delete stickyViewRefs.current[viewKey];\n delete stickyViewPositionsRef.current[viewKey];\n stickyViewPositions.value = stickyViewPositionsRef.current;\n }\n },\n []\n );\n\n const debounceRefreshStickyPositions = useMemo(() => {\n return debounce(() => {\n Object.keys(stickyViewRefs.current).forEach((key) => {\n const viewRef = stickyViewRefs.current[key];\n if (viewRef) {\n handleStickyViewLayout(key, viewRef);\n }\n });\n }, 200);\n }, []);\n\n const handleHeaderContainerLayout = useCallback(\n (viewKey: string, height?: number) => {\n if (!height) {\n delete headerContainersHeight.current[viewKey];\n } else {\n headerContainersHeight.current[viewKey] = height;\n }\n const totalHeight = Object.keys(headerContainersHeight.current).reduce(\n (acc, key) => headerContainersHeight.current[key] + acc,\n 0\n );\n headerHeight.value = withTiming(totalHeight, {\n duration: fixedHeaderHeight.value === 0 ? 0 : 10,\n });\n fixedHeaderHeight.value = totalHeight;\n // Try refresh sticky positions\n debounceRefreshStickyPositions();\n },\n []\n );\n\n const handleContainerHeight = useCallback((height: number) => {\n containerHeight.value = height;\n }, []);\n\n const context = useMemo(() => {\n return {\n collapse: () => collapsibleHandlers.current?.collapse(),\n expand: () => collapsibleHandlers.current?.expand(),\n scrollTo: (offset: number, animate?: boolean) =>\n collapsibleHandlers.current?.scrollTo(offset, animate),\n scrollToIndex: (params: any) =>\n collapsibleHandlers.current?.scrollToIndex(params),\n headerHeight,\n scrollY,\n headerCollapsed,\n };\n }, [scrollY, headerHeight, headerCollapsed]);\n\n const internalContext = useMemo(\n () => ({\n scrollViewRef,\n containerRef,\n handleStickyViewLayout,\n handleHeaderContainerLayout,\n setCollapsibleHandlers,\n handleContainerHeight,\n firstStickyViewY,\n stickyViewTops,\n stickyViewPositions,\n fixedHeaderHeight,\n contentMinHeight,\n }),\n [\n setCollapsibleHandlers,\n handleStickyViewLayout,\n handleHeaderContainerLayout,\n handleContainerHeight,\n firstStickyViewY,\n stickyViewTops,\n stickyViewPositions,\n fixedHeaderHeight,\n contentMinHeight,\n ]\n );\n\n return (\n <CollapsibleContext.Provider value={context}>\n <InternalCollapsibleContext.Provider value={internalContext}>\n <PullToRefreshProvider>\n <Component {...props} />\n </PullToRefreshProvider>\n </InternalCollapsibleContext.Provider>\n </CollapsibleContext.Provider>\n );\n };\n}\n"]}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
|
+
import type { ScrollToIndexParams } from 'src/types';
|
|
1
2
|
declare type Props = {
|
|
2
3
|
headerSnappable: boolean;
|
|
3
4
|
scrollTo: (yValue: number, animated?: boolean) => void;
|
|
5
|
+
scrollToIndex: (params: ScrollToIndexParams) => void;
|
|
4
6
|
};
|
|
5
|
-
export default function useAnimatedScroll({ headerSnappable, scrollTo, }: Props): {
|
|
7
|
+
export default function useAnimatedScroll({ headerSnappable, scrollTo, scrollToIndex, }: Props): {
|
|
6
8
|
scrollHandler: (event: import("react-native").NativeSyntheticEvent<import("react-native").NativeScrollEvent>) => void;
|
|
7
9
|
collapse: () => void;
|
|
8
10
|
expand: () => void;
|
|
@@ -1,10 +1,17 @@
|
|
|
1
1
|
import type React from 'react';
|
|
2
2
|
import type { View } from 'react-native';
|
|
3
3
|
import type Animated from 'react-native-reanimated';
|
|
4
|
+
export declare type ScrollToIndexParams = {
|
|
5
|
+
animated?: boolean | null;
|
|
6
|
+
index: number;
|
|
7
|
+
viewOffset?: number;
|
|
8
|
+
viewPosition?: number;
|
|
9
|
+
};
|
|
4
10
|
export declare type CollapsibleHandles = {
|
|
5
11
|
collapse: () => void;
|
|
6
12
|
expand: () => void;
|
|
7
13
|
scrollTo: (offset: number, animate?: boolean) => void;
|
|
14
|
+
scrollToIndex: (params: ScrollToIndexParams) => void;
|
|
8
15
|
};
|
|
9
16
|
export declare type CollapsibleContextType = CollapsibleHandles & {
|
|
10
17
|
scrollY: Animated.SharedValue<number>;
|
package/package.json
CHANGED
|
@@ -45,6 +45,10 @@ export default function CollapsibleFlatList<Data>({
|
|
|
45
45
|
});
|
|
46
46
|
}, []);
|
|
47
47
|
|
|
48
|
+
const scrollToIndex = useCallback((params) => {
|
|
49
|
+
scrollViewRef.current?.scrollToIndex(params);
|
|
50
|
+
}, []);
|
|
51
|
+
|
|
48
52
|
const handleInternalContentHeight = useCallback((value: number) => {
|
|
49
53
|
if (mounted.current) {
|
|
50
54
|
setInternalContentMinHeight(value);
|
|
@@ -54,6 +58,7 @@ export default function CollapsibleFlatList<Data>({
|
|
|
54
58
|
const { scrollHandler } = useAnimatedScroll({
|
|
55
59
|
headerSnappable,
|
|
56
60
|
scrollTo,
|
|
61
|
+
scrollToIndex,
|
|
57
62
|
});
|
|
58
63
|
|
|
59
64
|
const [internalContentMinHeight, setInternalContentMinHeight] = useState(
|
|
@@ -89,6 +94,8 @@ export default function CollapsibleFlatList<Data>({
|
|
|
89
94
|
contentHeight.current = height;
|
|
90
95
|
}, []);
|
|
91
96
|
|
|
97
|
+
const handleScrollToIndexFailed = useCallback(() => {}, []);
|
|
98
|
+
|
|
92
99
|
const renderListHeader = () => (
|
|
93
100
|
<View>
|
|
94
101
|
<AnimatedTopView height={headerHeight} />
|
|
@@ -105,6 +112,7 @@ export default function CollapsibleFlatList<Data>({
|
|
|
105
112
|
keyboardDismissMode="on-drag"
|
|
106
113
|
keyboardShouldPersistTaps="handled"
|
|
107
114
|
scrollEventThrottle={1}
|
|
115
|
+
onScrollToIndexFailed={handleScrollToIndexFailed}
|
|
108
116
|
{...props}
|
|
109
117
|
style={[styles.container, props.style]}
|
|
110
118
|
contentContainerStyle={contentContainerStyle}
|
|
@@ -25,9 +25,14 @@ export default function CollapsibleScrollView({
|
|
|
25
25
|
scrollViewRef.current?.scrollTo({ y: yValue, animated });
|
|
26
26
|
}, []);
|
|
27
27
|
|
|
28
|
+
const scrollToIndex = useCallback(() => {
|
|
29
|
+
console.warn("CollapsibleScrollView doesn't support scrollToIndex");
|
|
30
|
+
}, []);
|
|
31
|
+
|
|
28
32
|
const { scrollHandler } = useAnimatedScroll({
|
|
29
33
|
headerSnappable,
|
|
30
34
|
scrollTo,
|
|
35
|
+
scrollToIndex,
|
|
31
36
|
});
|
|
32
37
|
|
|
33
38
|
const animatedStyle = useAnimatedStyle(() => {
|
|
@@ -6,6 +6,7 @@ import {
|
|
|
6
6
|
useAnimatedScrollHandler,
|
|
7
7
|
useSharedValue,
|
|
8
8
|
} from 'react-native-reanimated';
|
|
9
|
+
import type { ScrollToIndexParams } from 'src/types';
|
|
9
10
|
import useCollapsibleContext from '../../hooks/useCollapsibleContext';
|
|
10
11
|
import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';
|
|
11
12
|
|
|
@@ -14,11 +15,13 @@ const { height: wHeight } = Dimensions.get('window');
|
|
|
14
15
|
type Props = {
|
|
15
16
|
headerSnappable: boolean;
|
|
16
17
|
scrollTo: (yValue: number, animated?: boolean) => void;
|
|
18
|
+
scrollToIndex: (params: ScrollToIndexParams) => void;
|
|
17
19
|
};
|
|
18
20
|
|
|
19
21
|
export default function useAnimatedScroll({
|
|
20
22
|
headerSnappable,
|
|
21
23
|
scrollTo,
|
|
24
|
+
scrollToIndex,
|
|
22
25
|
}: Props) {
|
|
23
26
|
const scrollDirection = useSharedValue('unknown');
|
|
24
27
|
const { scrollY } = useCollapsibleContext();
|
|
@@ -44,8 +47,9 @@ export default function useAnimatedScroll({
|
|
|
44
47
|
collapse,
|
|
45
48
|
expand,
|
|
46
49
|
scrollTo,
|
|
50
|
+
scrollToIndex,
|
|
47
51
|
});
|
|
48
|
-
}, [setCollapsibleHandlers, collapse, expand, scrollTo]);
|
|
52
|
+
}, [setCollapsibleHandlers, collapse, expand, scrollTo, scrollToIndex]);
|
|
49
53
|
|
|
50
54
|
const scrollHandler = useAnimatedScrollHandler(
|
|
51
55
|
{
|
package/src/types.ts
CHANGED
|
@@ -2,10 +2,18 @@ import type React from 'react';
|
|
|
2
2
|
import type { View } from 'react-native';
|
|
3
3
|
import type Animated from 'react-native-reanimated';
|
|
4
4
|
|
|
5
|
+
export type ScrollToIndexParams = {
|
|
6
|
+
animated?: boolean | null;
|
|
7
|
+
index: number;
|
|
8
|
+
viewOffset?: number;
|
|
9
|
+
viewPosition?: number;
|
|
10
|
+
};
|
|
11
|
+
|
|
5
12
|
export type CollapsibleHandles = {
|
|
6
13
|
collapse: () => void;
|
|
7
14
|
expand: () => void;
|
|
8
15
|
scrollTo: (offset: number, animate?: boolean) => void;
|
|
16
|
+
scrollToIndex: (params: ScrollToIndexParams) => void;
|
|
9
17
|
};
|
|
10
18
|
|
|
11
19
|
export type CollapsibleContextType = CollapsibleHandles & {
|
|
@@ -34,6 +34,8 @@ export default function withCollapsibleContext<T>(Component: FC<T>) {
|
|
|
34
34
|
const scrollViewRef = useRef<View>(null);
|
|
35
35
|
|
|
36
36
|
const setCollapsibleHandlers = useCallback((handlers) => {
|
|
37
|
+
console.log({ handlers });
|
|
38
|
+
|
|
37
39
|
collapsibleHandlers.current = handlers;
|
|
38
40
|
}, []);
|
|
39
41
|
|
|
@@ -157,6 +159,8 @@ export default function withCollapsibleContext<T>(Component: FC<T>) {
|
|
|
157
159
|
expand: () => collapsibleHandlers.current?.expand(),
|
|
158
160
|
scrollTo: (offset: number, animate?: boolean) =>
|
|
159
161
|
collapsibleHandlers.current?.scrollTo(offset, animate),
|
|
162
|
+
scrollToIndex: (params: any) =>
|
|
163
|
+
collapsibleHandlers.current?.scrollToIndex(params),
|
|
160
164
|
headerHeight,
|
|
161
165
|
scrollY,
|
|
162
166
|
headerCollapsed,
|