@r0b0t3d/react-native-collapsible 1.3.4 → 1.3.5-beta.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/header/AnimatedTopView.js +1 -2
- package/lib/commonjs/components/header/AnimatedTopView.js.map +1 -1
- package/lib/commonjs/components/header/CollapsibleHeaderConsumer.js +1 -2
- package/lib/commonjs/components/header/CollapsibleHeaderConsumer.js.map +1 -1
- package/lib/commonjs/components/scrollable/CollapsibleFlatList.js +36 -25
- package/lib/commonjs/components/scrollable/CollapsibleFlatList.js.map +1 -1
- package/lib/commonjs/components/scrollable/CollapsibleScrollView.js +28 -2
- package/lib/commonjs/components/scrollable/CollapsibleScrollView.js.map +1 -1
- package/lib/commonjs/withCollapsibleContext.js +1 -3
- package/lib/commonjs/withCollapsibleContext.js.map +1 -1
- package/lib/module/components/header/AnimatedTopView.js +1 -2
- package/lib/module/components/header/AnimatedTopView.js.map +1 -1
- package/lib/module/components/header/CollapsibleHeaderConsumer.js +1 -2
- package/lib/module/components/header/CollapsibleHeaderConsumer.js.map +1 -1
- package/lib/module/components/scrollable/CollapsibleFlatList.js +35 -23
- package/lib/module/components/scrollable/CollapsibleFlatList.js.map +1 -1
- package/lib/module/components/scrollable/CollapsibleScrollView.js +31 -5
- package/lib/module/components/scrollable/CollapsibleScrollView.js.map +1 -1
- package/lib/module/withCollapsibleContext.js +1 -2
- package/lib/module/withCollapsibleContext.js.map +1 -1
- package/lib/typescript/components/scrollable/CollapsibleScrollView.d.ts +3 -1
- package/package.json +1 -1
- package/src/components/header/AnimatedTopView.tsx +0 -1
- package/src/components/header/CollapsibleHeaderConsumer.tsx +2 -3
- package/src/components/scrollable/CollapsibleFlatList.tsx +59 -42
- package/src/components/scrollable/CollapsibleScrollView.tsx +55 -5
- package/src/withCollapsibleContext.tsx +2 -5
|
@@ -19,8 +19,7 @@ function AnimatedTopView({
|
|
|
19
19
|
height
|
|
20
20
|
}) {
|
|
21
21
|
const contentStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
|
|
22
|
-
paddingTop: height.value
|
|
23
|
-
backgroundColor: 'white'
|
|
22
|
+
paddingTop: height.value
|
|
24
23
|
}), []);
|
|
25
24
|
return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
|
|
26
25
|
style: contentStyle
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["AnimatedTopView.tsx"],"names":["AnimatedTopView","height","contentStyle","paddingTop","value"
|
|
1
|
+
{"version":3,"sources":["AnimatedTopView.tsx"],"names":["AnimatedTopView","height","contentStyle","paddingTop","value"],"mappings":";;;;;;;AAAA;;AACA;;;;;;;;AAMe,SAASA,eAAT,CAAyB;AAAEC,EAAAA;AAAF,CAAzB,EAA4C;AACzD,QAAMC,YAAY,GAAG,6CACnB,OAAO;AACLC,IAAAA,UAAU,EAAEF,MAAM,CAACG;AADd,GAAP,CADmB,EAInB,EAJmB,CAArB;AAOA,sBAAO,6BAAC,8BAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAEF;AAAtB,IAAP;AACD","sourcesContent":["import React from 'react';\nimport Animated, { useAnimatedStyle } from 'react-native-reanimated';\n\ntype Props = {\n height: Animated.SharedValue<number>;\n};\n\nexport default function AnimatedTopView({ height }: Props) {\n const contentStyle = useAnimatedStyle(\n () => ({\n paddingTop: height.value,\n }),\n []\n );\n\n return <Animated.View style={contentStyle} />;\n}\n"]}
|
|
@@ -35,7 +35,7 @@ function CollapsibleHeaderConsumer() {
|
|
|
35
35
|
headerHeight
|
|
36
36
|
} = (0, _useCollapsibleContext.default)();
|
|
37
37
|
const headerTranslate = (0, _reactNativeReanimated.useDerivedValue)(() => (0, _reactNativeReanimated.interpolate)(scrollY.value, // FIXME: can improve by geting maxY value of header and sticky views
|
|
38
|
-
[-
|
|
38
|
+
[-1000, 0, 100000], [0, 0, -100000], _reactNativeReanimated.default.Extrapolate.CLAMP), []);
|
|
39
39
|
const headerStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
|
|
40
40
|
return {
|
|
41
41
|
transform: [{
|
|
@@ -61,7 +61,6 @@ function CollapsibleHeaderConsumer() {
|
|
|
61
61
|
|
|
62
62
|
const styles = _reactNative.StyleSheet.create({
|
|
63
63
|
container: {
|
|
64
|
-
backgroundColor: 'white',
|
|
65
64
|
zIndex: 10
|
|
66
65
|
}
|
|
67
66
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["CollapsibleHeaderConsumer.tsx"],"names":["CollapsibleHeaderConsumer","headers","handleHeaderContainerLayout","scrollY","headerHeight","headerTranslate","value","Animated","Extrapolate","CLAMP","headerStyle","transform","translateY","handleHeaderLayout","nativeEvent","layout","height","styles","container","map","item","children","StyleSheet","create","
|
|
1
|
+
{"version":3,"sources":["CollapsibleHeaderConsumer.tsx"],"names":["CollapsibleHeaderConsumer","headers","handleHeaderContainerLayout","scrollY","headerHeight","headerTranslate","value","Animated","Extrapolate","CLAMP","headerStyle","transform","translateY","handleHeaderLayout","nativeEvent","layout","height","styles","container","map","item","children","StyleSheet","create","zIndex"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AAKA;;AACA;;;;;;;;AAEe,SAASA,yBAAT,GAAqC;AAClD,QAAM;AAAEC,IAAAA;AAAF,MAAc,2CAApB;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAkC,6CAAxC;AACA,QAAM;AAAEC,IAAAA,OAAF;AAAWC,IAAAA;AAAX,MAA4B,qCAAlC;AAEA,QAAMC,eAAe,GAAG,4CACtB,MACE,wCACEF,OAAO,CAACG,KADV,EAEE;AACA,GAAC,CAAC,IAAF,EAAQ,CAAR,EAAW,MAAX,CAHF,EAIE,CAAC,CAAD,EAAI,CAAJ,EAAO,CAAC,MAAR,CAJF,EAKEC,+BAASC,WAAT,CAAqBC,KALvB,CAFoB,EAStB,EATsB,CAAxB;AAYA,QAAMC,WAAW,GAAG,6CAAiB,MAAM;AACzC,WAAO;AACLC,MAAAA,SAAS,EAAE,CAAC;AAAEC,QAAAA,UAAU,EAAEP,eAAe,CAACC;AAA9B,OAAD;AADN,KAAP;AAGD,GAJmB,EAIjB,CAACF,YAAD,EAAeC,eAAf,CAJiB,CAApB;AAMA,QAAMQ,kBAAkB,GAAG,wBACzB,CAAC;AACCC,IAAAA,WAAW,EAAE;AACXC,MAAAA,MAAM,EAAE;AAAEC,QAAAA;AAAF;AADG;AADd,GAAD,KAIyB;AACvBd,IAAAA,2BAA2B,CAACc,MAAD,CAA3B;AACD,GAPwB,EAQzB,CAACd,2BAAD,CARyB,CAA3B;AAWA,sBACE,6BAAC,8BAAD,CAAU,IAAV;AACE,IAAA,QAAQ,EAAEW,kBADZ;AAEE,IAAA,KAAK,EAAE,CAACI,MAAM,CAACC,SAAR,EAAmBR,WAAnB,CAFT;AAGE,IAAA,aAAa,EAAC;AAHhB,KAKGT,OAAO,CAACkB,GAAR,CAAaC,IAAD,IAAUA,IAAI,CAACC,QAA3B,CALH,CADF;AASD;;AAED,MAAMJ,MAAM,GAAGK,wBAAWC,MAAX,CAAkB;AAC/BL,EAAAA,SAAS,EAAE;AACTM,IAAAA,MAAM,EAAE;AADC;AADoB,CAAlB,CAAf","sourcesContent":["import React, { useCallback } from 'react';\nimport useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';\nimport useCollapsibleHeaderContext from '../../hooks/useCollapsibleHeaderContext';\nimport Animated, {\n interpolate,\n useAnimatedStyle,\n useDerivedValue,\n} from 'react-native-reanimated';\nimport useCollapsibleContext from '../../hooks/useCollapsibleContext';\nimport { LayoutChangeEvent, StyleSheet } from 'react-native';\n\nexport default function CollapsibleHeaderConsumer() {\n const { headers } = useCollapsibleHeaderContext();\n const { handleHeaderContainerLayout } = useInternalCollapsibleContext();\n const { scrollY, headerHeight } = useCollapsibleContext();\n\n const headerTranslate = useDerivedValue(\n () =>\n interpolate(\n scrollY.value,\n // FIXME: can improve by geting maxY value of header and sticky views\n [-1000, 0, 100000],\n [0, 0, -100000],\n Animated.Extrapolate.CLAMP\n ),\n []\n );\n\n const headerStyle = useAnimatedStyle(() => {\n return {\n transform: [{ translateY: headerTranslate.value }],\n };\n }, [headerHeight, headerTranslate]);\n\n const handleHeaderLayout = useCallback(\n ({\n nativeEvent: {\n layout: { height },\n },\n }: LayoutChangeEvent) => {\n handleHeaderContainerLayout(height);\n },\n [handleHeaderContainerLayout]\n );\n\n return (\n <Animated.View\n onLayout={handleHeaderLayout}\n style={[styles.container, headerStyle]}\n pointerEvents=\"box-none\"\n >\n {headers.map((item) => item.children)}\n </Animated.View>\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n zIndex: 10,\n },\n});\n"]}
|
|
@@ -11,15 +11,13 @@ var _reactNative = require("react-native");
|
|
|
11
11
|
|
|
12
12
|
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
|
|
13
13
|
|
|
14
|
-
var _AnimatedTopView = _interopRequireDefault(require("../header/AnimatedTopView"));
|
|
15
|
-
|
|
16
14
|
var _useAnimatedScroll = _interopRequireDefault(require("./useAnimatedScroll"));
|
|
17
15
|
|
|
18
|
-
var _useCollapsibleContext = _interopRequireDefault(require("../../hooks/useCollapsibleContext"));
|
|
19
|
-
|
|
20
16
|
var _useInternalCollapsibleContext = _interopRequireDefault(require("../../hooks/useInternalCollapsibleContext"));
|
|
21
17
|
|
|
22
|
-
var
|
|
18
|
+
var _AnimatedTopView = _interopRequireDefault(require("../header/AnimatedTopView"));
|
|
19
|
+
|
|
20
|
+
var _useCollapsibleContext = _interopRequireDefault(require("../../hooks/useCollapsibleContext"));
|
|
23
21
|
|
|
24
22
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
25
23
|
|
|
@@ -36,15 +34,17 @@ function CollapsibleFlatList({
|
|
|
36
34
|
...props
|
|
37
35
|
}) {
|
|
38
36
|
const {
|
|
39
|
-
headerHeight
|
|
40
|
-
scrollY
|
|
37
|
+
headerHeight
|
|
41
38
|
} = (0, _useCollapsibleContext.default)();
|
|
42
39
|
const {
|
|
43
40
|
contentMinHeight,
|
|
44
|
-
scrollViewRef
|
|
41
|
+
scrollViewRef,
|
|
42
|
+
fixedHeaderHeight
|
|
45
43
|
} = (0, _useInternalCollapsibleContext.default)();
|
|
46
44
|
const mounted = (0, _react.useRef)(true);
|
|
47
45
|
const contentHeight = (0, _react.useRef)(0);
|
|
46
|
+
const [internalContentMinHeight, setInternalContentMinHeight] = (0, _react.useState)(contentMinHeight.value);
|
|
47
|
+
const [internalProgressViewOffset, setInternalProgressViewOffset] = (0, _react.useState)(0);
|
|
48
48
|
(0, _react.useEffect)(() => {
|
|
49
49
|
return () => {
|
|
50
50
|
mounted.current = false;
|
|
@@ -63,11 +63,6 @@ function CollapsibleFlatList({
|
|
|
63
63
|
|
|
64
64
|
(_scrollViewRef$curren2 = scrollViewRef.current) === null || _scrollViewRef$curren2 === void 0 ? void 0 : _scrollViewRef$curren2.scrollToIndex(params);
|
|
65
65
|
}, []);
|
|
66
|
-
const handleInternalContentHeight = (0, _react.useCallback)(value => {
|
|
67
|
-
if (mounted.current) {
|
|
68
|
-
setInternalContentMinHeight(value);
|
|
69
|
-
}
|
|
70
|
-
}, []);
|
|
71
66
|
const {
|
|
72
67
|
scrollHandler
|
|
73
68
|
} = (0, _useAnimatedScroll.default)({
|
|
@@ -75,16 +70,32 @@ function CollapsibleFlatList({
|
|
|
75
70
|
scrollTo,
|
|
76
71
|
scrollToIndex
|
|
77
72
|
});
|
|
78
|
-
const
|
|
73
|
+
const handleInternalContentHeight = (0, _react.useCallback)(value => {
|
|
74
|
+
if (mounted.current) {
|
|
75
|
+
setInternalContentMinHeight(value);
|
|
76
|
+
}
|
|
77
|
+
}, []);
|
|
78
|
+
const handleInternalProgressViewOffset = (0, _react.useCallback)(value => {
|
|
79
|
+
if (mounted.current) {
|
|
80
|
+
setInternalProgressViewOffset(value);
|
|
81
|
+
}
|
|
82
|
+
}, []);
|
|
79
83
|
(0, _reactNativeReanimated.useAnimatedReaction)(() => {
|
|
80
84
|
return contentMinHeight.value;
|
|
81
85
|
}, (result, previous) => {
|
|
82
86
|
if (result !== previous) {
|
|
83
|
-
if (contentHeight.current <
|
|
84
|
-
(0, _reactNativeReanimated.runOnJS)(handleInternalContentHeight)(
|
|
87
|
+
if (contentHeight.current < result && internalContentMinHeight !== result) {
|
|
88
|
+
(0, _reactNativeReanimated.runOnJS)(handleInternalContentHeight)(result);
|
|
85
89
|
}
|
|
86
90
|
}
|
|
87
91
|
});
|
|
92
|
+
(0, _reactNativeReanimated.useAnimatedReaction)(() => {
|
|
93
|
+
return fixedHeaderHeight.value;
|
|
94
|
+
}, (result, previous) => {
|
|
95
|
+
if (result !== previous) {
|
|
96
|
+
(0, _reactNativeReanimated.runOnJS)(handleInternalProgressViewOffset)(result);
|
|
97
|
+
}
|
|
98
|
+
});
|
|
88
99
|
const contentContainerStyle = (0, _react.useMemo)(() => [styles.contentContainer, {
|
|
89
100
|
minHeight: internalContentMinHeight
|
|
90
101
|
}, props.contentContainerStyle], [props.contentContainerStyle, internalContentMinHeight]);
|
|
@@ -93,15 +104,14 @@ function CollapsibleFlatList({
|
|
|
93
104
|
}, []);
|
|
94
105
|
const handleScrollToIndexFailed = (0, _react.useCallback)(() => {}, []);
|
|
95
106
|
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
107
|
+
function renderListHeader() {
|
|
108
|
+
return /*#__PURE__*/_react.default.createElement(_reactNative.View, null, /*#__PURE__*/_react.default.createElement(_AnimatedTopView.default, {
|
|
109
|
+
height: headerHeight
|
|
110
|
+
}), props.ListHeaderComponent);
|
|
111
|
+
}
|
|
99
112
|
|
|
100
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
101
|
-
scrollY: scrollY
|
|
102
|
-
}, /*#__PURE__*/_react.default.createElement(AnimatedFlatList, _extends({
|
|
113
|
+
return /*#__PURE__*/_react.default.createElement(AnimatedFlatList, _extends({
|
|
103
114
|
ref: scrollViewRef,
|
|
104
|
-
bounces: false,
|
|
105
115
|
keyboardDismissMode: "on-drag",
|
|
106
116
|
keyboardShouldPersistTaps: "handled",
|
|
107
117
|
scrollEventThrottle: 1,
|
|
@@ -113,8 +123,9 @@ function CollapsibleFlatList({
|
|
|
113
123
|
ListHeaderComponent: renderListHeader(),
|
|
114
124
|
onContentSizeChange: handleContentSizeChange //@ts-ignore
|
|
115
125
|
,
|
|
116
|
-
simultaneousHandlers: []
|
|
117
|
-
|
|
126
|
+
simultaneousHandlers: [],
|
|
127
|
+
progressViewOffset: internalProgressViewOffset
|
|
128
|
+
}));
|
|
118
129
|
}
|
|
119
130
|
|
|
120
131
|
const styles = _reactNative.StyleSheet.create({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["CollapsibleFlatList.tsx"],"names":["AnimatedFlatList","Animated","createAnimatedComponent","FlatList","CollapsibleFlatList","headerSnappable","props","headerHeight","
|
|
1
|
+
{"version":3,"sources":["CollapsibleFlatList.tsx"],"names":["AnimatedFlatList","Animated","createAnimatedComponent","FlatList","CollapsibleFlatList","headerSnappable","props","headerHeight","contentMinHeight","scrollViewRef","fixedHeaderHeight","mounted","contentHeight","internalContentMinHeight","setInternalContentMinHeight","value","internalProgressViewOffset","setInternalProgressViewOffset","current","scrollTo","yValue","animated","scrollToOffset","offset","scrollToIndex","params","scrollHandler","handleInternalContentHeight","handleInternalProgressViewOffset","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 useAnimatedScroll from './useAnimatedScroll';\nimport useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';\nimport type { CollapsibleProps } from '../../types';\nimport AnimatedTopView from '../header/AnimatedTopView';\nimport useCollapsibleContext from '../../hooks/useCollapsibleContext';\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 } = useCollapsibleContext();\n const { contentMinHeight, scrollViewRef, fixedHeaderHeight } =\n useInternalCollapsibleContext();\n const mounted = useRef(true);\n const contentHeight = useRef(0);\n const [internalContentMinHeight, setInternalContentMinHeight] = useState(\n contentMinHeight.value\n );\n const [internalProgressViewOffset, setInternalProgressViewOffset] =\n useState(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 { scrollHandler } = useAnimatedScroll({\n headerSnappable,\n scrollTo,\n scrollToIndex,\n });\n\n const handleInternalContentHeight = useCallback((value: number) => {\n if (mounted.current) {\n setInternalContentMinHeight(value);\n }\n }, []);\n\n const handleInternalProgressViewOffset = useCallback((value: number) => {\n if (mounted.current) {\n setInternalProgressViewOffset(value);\n }\n }, []);\n\n useAnimatedReaction(\n () => {\n return contentMinHeight.value;\n },\n (result, previous) => {\n if (result !== previous) {\n if (\n contentHeight.current < result &&\n internalContentMinHeight !== result\n ) {\n runOnJS(handleInternalContentHeight)(result);\n }\n }\n }\n );\n\n useAnimatedReaction(\n () => {\n return fixedHeaderHeight.value;\n },\n (result, previous) => {\n if (result !== previous) {\n runOnJS(handleInternalProgressViewOffset)(result);\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 function renderListHeader() {\n return (\n <View>\n <AnimatedTopView height={headerHeight} />\n {props.ListHeaderComponent}\n </View>\n );\n }\n\n return (\n <AnimatedFlatList\n ref={scrollViewRef}\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 //@ts-ignore\n simultaneousHandlers={[]}\n progressViewOffset={internalProgressViewOffset}\n />\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"]}
|
|
@@ -30,15 +30,25 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
30
30
|
function CollapsibleScrollView({
|
|
31
31
|
headerSnappable = true,
|
|
32
32
|
children,
|
|
33
|
+
refreshing = false,
|
|
34
|
+
onRefresh,
|
|
33
35
|
...props
|
|
34
36
|
}) {
|
|
35
37
|
const {
|
|
36
38
|
contentMinHeight,
|
|
37
|
-
scrollViewRef
|
|
39
|
+
scrollViewRef,
|
|
40
|
+
fixedHeaderHeight
|
|
38
41
|
} = (0, _useInternalCollapsibleContext.default)();
|
|
39
42
|
const {
|
|
40
43
|
headerHeight
|
|
41
44
|
} = (0, _useCollapsibleContext.default)();
|
|
45
|
+
const [internalProgressViewOffset, setInternalProgressViewOffset] = (0, _react.useState)(0);
|
|
46
|
+
const mounted = (0, _react.useRef)(true);
|
|
47
|
+
(0, _react.useEffect)(() => {
|
|
48
|
+
return () => {
|
|
49
|
+
mounted.current = false;
|
|
50
|
+
};
|
|
51
|
+
}, []);
|
|
42
52
|
const scrollTo = (0, _react.useCallback)((yValue, animated = true) => {
|
|
43
53
|
var _scrollViewRef$curren;
|
|
44
54
|
|
|
@@ -62,10 +72,26 @@ function CollapsibleScrollView({
|
|
|
62
72
|
minHeight: contentMinHeight.value
|
|
63
73
|
};
|
|
64
74
|
}, []);
|
|
75
|
+
const handleInternalProgressViewOffset = (0, _react.useCallback)(value => {
|
|
76
|
+
if (mounted.current) {
|
|
77
|
+
setInternalProgressViewOffset(value);
|
|
78
|
+
}
|
|
79
|
+
}, []);
|
|
80
|
+
(0, _reactNativeReanimated.useAnimatedReaction)(() => {
|
|
81
|
+
return fixedHeaderHeight.value;
|
|
82
|
+
}, (result, previous) => {
|
|
83
|
+
if (result !== previous) {
|
|
84
|
+
(0, _reactNativeReanimated.runOnJS)(handleInternalProgressViewOffset)(result);
|
|
85
|
+
}
|
|
86
|
+
});
|
|
65
87
|
const contentContainerStyle = (0, _react.useMemo)(() => [styles.contentContainer, props.contentContainerStyle], [props.contentContainerStyle]);
|
|
66
88
|
return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.ScrollView, _extends({
|
|
67
89
|
ref: scrollViewRef,
|
|
68
|
-
|
|
90
|
+
refreshControl: onRefresh ? /*#__PURE__*/_react.default.createElement(_reactNative.RefreshControl, {
|
|
91
|
+
progressViewOffset: internalProgressViewOffset,
|
|
92
|
+
refreshing: refreshing,
|
|
93
|
+
onRefresh: onRefresh
|
|
94
|
+
}) : undefined
|
|
69
95
|
}, props, {
|
|
70
96
|
style: [styles.container, props.style],
|
|
71
97
|
contentContainerStyle: contentContainerStyle,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["CollapsibleScrollView.tsx"],"names":["CollapsibleScrollView","headerSnappable","children","props","contentMinHeight","scrollViewRef","headerHeight","
|
|
1
|
+
{"version":3,"sources":["CollapsibleScrollView.tsx"],"names":["CollapsibleScrollView","headerSnappable","children","refreshing","onRefresh","props","contentMinHeight","scrollViewRef","fixedHeaderHeight","headerHeight","internalProgressViewOffset","setInternalProgressViewOffset","mounted","current","scrollTo","yValue","animated","y","scrollToIndex","console","warn","scrollHandler","animatedStyle","minHeight","value","handleInternalProgressViewOffset","result","previous","contentContainerStyle","styles","contentContainer","undefined","container","style","StyleSheet","create","absoluteFillObject","flexGrow"],"mappings":"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","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport AnimatedTopView from '../header/AnimatedTopView';\nimport useAnimatedScroll from './useAnimatedScroll';\nimport React, {\n ReactNode,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { RefreshControl, ScrollViewProps, StyleSheet } from 'react-native';\nimport Animated, {\n runOnJS,\n useAnimatedReaction,\n useAnimatedStyle,\n} 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 refreshing?: boolean;\n onRefresh?: () => void;\n };\n\nexport default function CollapsibleScrollView({\n headerSnappable = true,\n children,\n refreshing = false,\n onRefresh,\n ...props\n}: Props) {\n const { contentMinHeight, scrollViewRef, fixedHeaderHeight } =\n useInternalCollapsibleContext();\n const { headerHeight } = useCollapsibleContext();\n const [internalProgressViewOffset, setInternalProgressViewOffset] =\n useState(0);\n const mounted = useRef(true);\n\n useEffect(() => {\n return () => {\n mounted.current = false;\n };\n }, []);\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 handleInternalProgressViewOffset = useCallback((value: number) => {\n if (mounted.current) {\n setInternalProgressViewOffset(value);\n }\n }, []);\n\n useAnimatedReaction(\n () => {\n return fixedHeaderHeight.value;\n },\n (result, previous) => {\n if (result !== previous) {\n runOnJS(handleInternalProgressViewOffset)(result);\n }\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 refreshControl={\n onRefresh ? (\n <RefreshControl\n progressViewOffset={internalProgressViewOffset}\n refreshing={refreshing}\n onRefresh={onRefresh}\n />\n ) : undefined\n }\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});\n"]}
|
|
@@ -15,8 +15,6 @@ var _reactNativeReanimated = require("react-native-reanimated");
|
|
|
15
15
|
|
|
16
16
|
var _debounce = require("./utils/debounce");
|
|
17
17
|
|
|
18
|
-
var _PullToRefreshProvider = _interopRequireDefault(require("./components/pullToRefresh/PullToRefreshProvider"));
|
|
19
|
-
|
|
20
18
|
var _CollapsibleHeaderProvider = _interopRequireDefault(require("./components/header/CollapsibleHeaderProvider"));
|
|
21
19
|
|
|
22
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -177,7 +175,7 @@ function withCollapsibleContext(Component) {
|
|
|
177
175
|
value: context
|
|
178
176
|
}, /*#__PURE__*/_react.default.createElement(_useInternalCollapsibleContext.InternalCollapsibleContext.Provider, {
|
|
179
177
|
value: internalContext
|
|
180
|
-
}, /*#__PURE__*/_react.default.createElement(_CollapsibleHeaderProvider.default, null, /*#__PURE__*/_react.default.createElement(
|
|
178
|
+
}, /*#__PURE__*/_react.default.createElement(_CollapsibleHeaderProvider.default, null, /*#__PURE__*/_react.default.createElement(Component, props))));
|
|
181
179
|
};
|
|
182
180
|
}
|
|
183
181
|
//# sourceMappingURL=withCollapsibleContext.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["withCollapsibleContext.tsx"],"names":["withCollapsibleContext","Component","props","collapsibleHandlers","headerHeight","scrollY","stickyViewRefs","stickyViewTops","stickyViewPositionsRef","stickyViewPositions","fixedHeaderHeight","stickyHeaderHeight","containerHeight","firstStickyViewY","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","animated","expand","scrollTo","offset","animate","scrollToIndex","params","internalContext"],"mappings":";;;;;;;AAEA;;AAEA;;AACA;;AACA;;AAOA;;AACA;;AACA;;;;;;;;AAfA;;AACA;AAgBe,SAASA,sBAAT,CAAmCC,SAAnC,EAAqD;AAClE,SAAQC,KAAD,IAAc;AACnB,UAAMC,mBAAmB,GAAG,oBAA5B;AACA,UAAMC,YAAY,GAAG,2CAAe,CAAf,CAArB;AACA,UAAMC,OAAO,GAAG,2CAAe,CAAf,CAAhB;AACA,UAAMC,cAAc,GAAG,mBAA8C,EAA9C,CAAvB;AACA,UAAMC,cAAc,GAAG,2CAAuC,EAAvC,CAAvB;AACA,UAAMC,sBAAsB,GAAG,mBAAqC,EAArC,CAA/B;AACA,UAAMC,mBAAmB,GAAG,2CAC1B,EAD0B,CAA5B;AAGA,UAAMC,iBAAiB,GAAG,2CAAe,CAAf,CAA1B;AACA,UAAMC,kBAAkB,GAAG,2CAAe,CAAf,CAA3B;AACA,UAAMC,eAAe,GAAG,2CAAe,CAAf,CAAxB;AACA,UAAMC,gBAAgB,GAAG,2CAAe,OAAf,CAAzB;AACA,UAAMC,YAAY,GAAG,mBAAa,IAAb,CAArB;AACA,UAAMC,aAAa,GAAG,mBAAa,IAAb,CAAtB;AAEA,UAAMC,sBAAsB,GAAG,wBAAaC,QAAD,IAAc;AACvDd,MAAAA,mBAAmB,CAACe,OAApB,GAA8BD,QAA9B;AACD,KAF8B,EAE5B,EAF4B,CAA/B;AAIA,UAAME,eAAe,GAAG,4CAAgB,MAAM;AAC5C,YAAMC,IAAI,GAAGV,iBAAiB,CAACW,KAAlB,GAA0BR,gBAAgB,CAACQ,KAAxD;AACA,aAAOhB,OAAO,CAACgB,KAAR,IAAiBD,IAAxB;AACD,KAHuB,EAGrB,EAHqB,CAAxB;AAKA,UAAME,gBAAgB,GAAG,4CAAgB,MAAM;AAC7C,aACEV,eAAe,CAACS,KAAhB,GACAX,iBAAiB,CAACW,KADlB,GAEAV,kBAAkB,CAACU,KAHrB;AAKD,KANwB,EAMtB,EANsB,CAAzB;AAQA,oDACE,MAAM;AACJ,YAAME,WAAW,GAAGC,MAAM,CAACC,IAAP,CAAYhB,mBAAmB,CAACY,KAAhC,EAAuCK,MAAvC,CAClB,CAACC,GAAD,EAAMC,IAAN,KAAe;AACb,eAAOD,GAAG,GAAGlB,mBAAmB,CAACY,KAApB,CAA0BO,IAA1B,EAAgCC,GAA7C;AACD,OAHiB,EAIlB,CAJkB,CAApB;AAMA,aAAON,WAAW,GAAGb,iBAAiB,CAACW,KAAvC;AACD,KATH,EAUE,CAACS,MAAD,EAASC,QAAT,KAAsB;AACpB,UAAID,MAAM,KAAKC,QAAf,EAAyB;AAAA;;AACvB,cAAMC,aAAa,GAAGvB,mBAAmB,CAACY,KAA1C;AACA,cAAMjB,YAAY,GAAGM,iBAAiB,CAACW,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;;AACDlC,QAAAA,cAAc,CAACc,KAAf,GAAuBiB,MAAvB;AACAzB,QAAAA,gBAAgB,CAACQ,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,GAAWzB,YAAlC;;AACA,cAAIyC,cAAJ,EAAoB;AAClB,mBAAOlB,GAAG,GAAGiB,IAAI,CAACH,MAAlB;AACD;;AACD,iBAAOd,GAAP;AACD,SAPoB,EAOlB,CAPkB,CAArB;AAQAhB,QAAAA,kBAAkB,CAACU,KAAnB,GAA2BqB,YAA3B;AACD;AACF,KArCH;AAwCA,UAAMI,sBAAsB,GAAG,wBAC7B,CAACC,OAAD,EAAkBC,OAAlB,KAAsD;AACpD,UAAIA,OAAO,IAAIA,OAAO,CAAC9B,OAAnB,IAA8BJ,YAAY,CAACI,OAA/C,EAAwD;AACtDZ,QAAAA,cAAc,CAACY,OAAf,CAAuB6B,OAAvB,IAAkCC,OAAlC;AACAA,QAAAA,OAAO,CAAC9B,OAAR,CAAgB+B,aAAhB,EACE;AACAnC,QAAAA,YAAY,CAACI,OAFf,EAGE,CAACgC,IAAD,EAAOrB,GAAP,EAAYsB,KAAZ,EAAmBV,MAAnB,KAA8B;AAC5BjC,UAAAA,sBAAsB,CAACU,OAAvB,GAAiC,EAC/B,GAAGV,sBAAsB,CAACU,OADK;AAE/B,aAAC6B,OAAD,GAAW;AAAEG,cAAAA,IAAF;AAAQrB,cAAAA,GAAR;AAAasB,cAAAA,KAAb;AAAoBV,cAAAA;AAApB;AAFoB,WAAjC;AAIAhC,UAAAA,mBAAmB,CAACY,KAApB,GAA4Bb,sBAAsB,CAACU,OAAnD;AACD,SATH,EAUE,MAAM,CAAE,CAVV;AAYD,OAdD,MAcO;AACL,eAAOZ,cAAc,CAACY,OAAf,CAAuB6B,OAAvB,CAAP;AACA,eAAOvC,sBAAsB,CAACU,OAAvB,CAA+B6B,OAA/B,CAAP;AACAtC,QAAAA,mBAAmB,CAACY,KAApB,GAA4Bb,sBAAsB,CAACU,OAAnD;AACD;AACF,KArB4B,EAsB7B,EAtB6B,CAA/B;AAyBA,UAAMkC,8BAA8B,GAAG,oBAAQ,MAAM;AACnD,aAAO,wBAAS,MAAM;AACpB5B,QAAAA,MAAM,CAACC,IAAP,CAAYnB,cAAc,CAACY,OAA3B,EAAoCmC,OAApC,CAA6CV,GAAD,IAAS;AACnD,gBAAMK,OAAO,GAAG1C,cAAc,CAACY,OAAf,CAAuByB,GAAvB,CAAhB;;AACA,cAAIK,OAAJ,EAAa;AACXF,YAAAA,sBAAsB,CAACH,GAAD,EAAMK,OAAN,CAAtB;AACD;AACF,SALD;AAMD,OAPM,EAOJ,GAPI,CAAP;AAQD,KATsC,EASpC,EAToC,CAAvC;AAWA,UAAMM,2BAA2B,GAAG,wBAAab,MAAD,IAAoB;AAClErC,MAAAA,YAAY,CAACiB,KAAb,GAAqB,uCAAWoB,MAAX,EAAmB;AACtCc,QAAAA,QAAQ,EAAE7C,iBAAiB,CAACW,KAAlB,KAA4B,CAA5B,GAAgC,CAAhC,GAAoC;AADR,OAAnB,CAArB;AAGAX,MAAAA,iBAAiB,CAACW,KAAlB,GAA0BoB,MAA1B,CAJkE,CAKlE;;AACAW,MAAAA,8BAA8B;AAC/B,KAPmC,EAOjC,EAPiC,CAApC;AASA,UAAMI,qBAAqB,GAAG,wBAAaf,MAAD,IAAoB;AAC5D7B,MAAAA,eAAe,CAACS,KAAhB,GAAwBoB,MAAxB;AACD,KAF6B,EAE3B,EAF2B,CAA9B;AAIA,UAAMgB,OAAO,GAAG,oBAAQ,MAAM;AAC5B,aAAO;AACLC,QAAAA,QAAQ,EAAGC,QAAD;AAAA;;AAAA,0CACRxD,mBAAmB,CAACe,OADZ,0DACR,sBAA6BwC,QAA7B,CAAsCC,QAAtC,CADQ;AAAA,SADL;AAGLC,QAAAA,MAAM,EAAE;AAAA;;AAAA,2CAAMzD,mBAAmB,CAACe,OAA1B,2DAAM,uBAA6B0C,MAA7B,EAAN;AAAA,SAHH;AAILC,QAAAA,QAAQ,EAAE,CAACC,MAAD,EAAiBC,OAAjB;AAAA;;AAAA,2CACR5D,mBAAmB,CAACe,OADZ,2DACR,uBAA6B2C,QAA7B,CAAsCC,MAAtC,EAA8CC,OAA9C,CADQ;AAAA,SAJL;AAMLC,QAAAA,aAAa,EAAGC,MAAD;AAAA;;AAAA,2CACb9D,mBAAmB,CAACe,OADP,2DACb,uBAA6B8C,aAA7B,CAA2CC,MAA3C,CADa;AAAA,SANV;AAQL7D,QAAAA,YARK;AASLC,QAAAA,OATK;AAULc,QAAAA;AAVK,OAAP;AAYD,KAbe,EAab,CAACd,OAAD,EAAUD,YAAV,EAAwBe,eAAxB,CAba,CAAhB;AAeA,UAAM+C,eAAe,GAAG,oBACtB,OAAO;AACLnD,MAAAA,aADK;AAELD,MAAAA,YAFK;AAGLgC,MAAAA,sBAHK;AAILQ,MAAAA,2BAJK;AAKLtC,MAAAA,sBALK;AAMLwC,MAAAA,qBANK;AAOL3C,MAAAA,gBAPK;AAQLN,MAAAA,cARK;AASLE,MAAAA,mBATK;AAULC,MAAAA,iBAVK;AAWLY,MAAAA;AAXK,KAAP,CADsB,EActB,CACEN,sBADF,EAEE8B,sBAFF,EAGEQ,2BAHF,EAIEE,qBAJF,EAKE3C,gBALF,EAMEN,cANF,EAOEE,mBAPF,EAQEC,iBARF,EASEY,gBATF,CAdsB,CAAxB;AA2BA,wBACE,6BAAC,yCAAD,CAAoB,QAApB;AAA6B,MAAA,KAAK,EAAEmC;AAApC,oBACE,6BAAC,yDAAD,CAA4B,QAA5B;AAAqC,MAAA,KAAK,EAAES;AAA5C,oBACE,6BAAC,kCAAD,qBACE,6BAAC,8BAAD,qBAEE,6BAAC,SAAD,EAAehE,KAAf,CAFF,CADF,CADF,CADF,CADF;AAYD,GAjLD;AAkLD","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';\nimport CollapsibleHeaderProvider from './components/header/CollapsibleHeaderProvider';\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 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((height: number) => {\n headerHeight.value = withTiming(height, {\n duration: fixedHeaderHeight.value === 0 ? 0 : 10,\n });\n fixedHeaderHeight.value = height;\n // Try refresh sticky positions\n debounceRefreshStickyPositions();\n }, []);\n\n const handleContainerHeight = useCallback((height: number) => {\n containerHeight.value = height;\n }, []);\n\n const context = useMemo(() => {\n return {\n collapse: (animated?: boolean) =>\n collapsibleHandlers.current?.collapse(animated),\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 <CollapsibleHeaderProvider>\n <PullToRefreshProvider>\n {/** @ts-ignore */}\n <Component {...props} />\n </PullToRefreshProvider>\n </CollapsibleHeaderProvider>\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","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","animated","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 CollapsibleHeaderProvider from './components/header/CollapsibleHeaderProvider';\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 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((height: number) => {\n headerHeight.value = withTiming(height, {\n duration: fixedHeaderHeight.value === 0 ? 0 : 10,\n });\n fixedHeaderHeight.value = height;\n // Try refresh sticky positions\n debounceRefreshStickyPositions();\n }, []);\n\n const handleContainerHeight = useCallback((height: number) => {\n containerHeight.value = height;\n }, []);\n\n const context = useMemo(() => {\n return {\n collapse: (animated?: boolean) =>\n collapsibleHandlers.current?.collapse(animated),\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 <CollapsibleHeaderProvider>\n {/** @ts-ignore */}\n <Component {...props} />\n </CollapsibleHeaderProvider>\n </InternalCollapsibleContext.Provider>\n </CollapsibleContext.Provider>\n );\n };\n}\n"]}
|
|
@@ -4,8 +4,7 @@ export default function AnimatedTopView({
|
|
|
4
4
|
height
|
|
5
5
|
}) {
|
|
6
6
|
const contentStyle = useAnimatedStyle(() => ({
|
|
7
|
-
paddingTop: height.value
|
|
8
|
-
backgroundColor: 'white'
|
|
7
|
+
paddingTop: height.value
|
|
9
8
|
}), []);
|
|
10
9
|
return /*#__PURE__*/React.createElement(Animated.View, {
|
|
11
10
|
style: contentStyle
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["AnimatedTopView.tsx"],"names":["React","Animated","useAnimatedStyle","AnimatedTopView","height","contentStyle","paddingTop","value"
|
|
1
|
+
{"version":3,"sources":["AnimatedTopView.tsx"],"names":["React","Animated","useAnimatedStyle","AnimatedTopView","height","contentStyle","paddingTop","value"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,QAAP,IAAmBC,gBAAnB,QAA2C,yBAA3C;AAMA,eAAe,SAASC,eAAT,CAAyB;AAAEC,EAAAA;AAAF,CAAzB,EAA4C;AACzD,QAAMC,YAAY,GAAGH,gBAAgB,CACnC,OAAO;AACLI,IAAAA,UAAU,EAAEF,MAAM,CAACG;AADd,GAAP,CADmC,EAInC,EAJmC,CAArC;AAOA,sBAAO,oBAAC,QAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAEF;AAAtB,IAAP;AACD","sourcesContent":["import React from 'react';\nimport Animated, { useAnimatedStyle } from 'react-native-reanimated';\n\ntype Props = {\n height: Animated.SharedValue<number>;\n};\n\nexport default function AnimatedTopView({ height }: Props) {\n const contentStyle = useAnimatedStyle(\n () => ({\n paddingTop: height.value,\n }),\n []\n );\n\n return <Animated.View style={contentStyle} />;\n}\n"]}
|
|
@@ -16,7 +16,7 @@ export default function CollapsibleHeaderConsumer() {
|
|
|
16
16
|
headerHeight
|
|
17
17
|
} = useCollapsibleContext();
|
|
18
18
|
const headerTranslate = useDerivedValue(() => interpolate(scrollY.value, // FIXME: can improve by geting maxY value of header and sticky views
|
|
19
|
-
[-
|
|
19
|
+
[-1000, 0, 100000], [0, 0, -100000], Animated.Extrapolate.CLAMP), []);
|
|
20
20
|
const headerStyle = useAnimatedStyle(() => {
|
|
21
21
|
return {
|
|
22
22
|
transform: [{
|
|
@@ -41,7 +41,6 @@ export default function CollapsibleHeaderConsumer() {
|
|
|
41
41
|
}
|
|
42
42
|
const styles = StyleSheet.create({
|
|
43
43
|
container: {
|
|
44
|
-
backgroundColor: 'white',
|
|
45
44
|
zIndex: 10
|
|
46
45
|
}
|
|
47
46
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["CollapsibleHeaderConsumer.tsx"],"names":["React","useCallback","useInternalCollapsibleContext","useCollapsibleHeaderContext","Animated","interpolate","useAnimatedStyle","useDerivedValue","useCollapsibleContext","StyleSheet","CollapsibleHeaderConsumer","headers","handleHeaderContainerLayout","scrollY","headerHeight","headerTranslate","value","Extrapolate","CLAMP","headerStyle","transform","translateY","handleHeaderLayout","nativeEvent","layout","height","styles","container","map","item","children","create","
|
|
1
|
+
{"version":3,"sources":["CollapsibleHeaderConsumer.tsx"],"names":["React","useCallback","useInternalCollapsibleContext","useCollapsibleHeaderContext","Animated","interpolate","useAnimatedStyle","useDerivedValue","useCollapsibleContext","StyleSheet","CollapsibleHeaderConsumer","headers","handleHeaderContainerLayout","scrollY","headerHeight","headerTranslate","value","Extrapolate","CLAMP","headerStyle","transform","translateY","handleHeaderLayout","nativeEvent","layout","height","styles","container","map","item","children","create","zIndex"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,WAAhB,QAAmC,OAAnC;AACA,OAAOC,6BAAP,MAA0C,2CAA1C;AACA,OAAOC,2BAAP,MAAwC,yCAAxC;AACA,OAAOC,QAAP,IACEC,WADF,EAEEC,gBAFF,EAGEC,eAHF,QAIO,yBAJP;AAKA,OAAOC,qBAAP,MAAkC,mCAAlC;AACA,SAA4BC,UAA5B,QAA8C,cAA9C;AAEA,eAAe,SAASC,yBAAT,GAAqC;AAClD,QAAM;AAAEC,IAAAA;AAAF,MAAcR,2BAA2B,EAA/C;AACA,QAAM;AAAES,IAAAA;AAAF,MAAkCV,6BAA6B,EAArE;AACA,QAAM;AAAEW,IAAAA,OAAF;AAAWC,IAAAA;AAAX,MAA4BN,qBAAqB,EAAvD;AAEA,QAAMO,eAAe,GAAGR,eAAe,CACrC,MACEF,WAAW,CACTQ,OAAO,CAACG,KADC,EAET;AACA,GAAC,CAAC,IAAF,EAAQ,CAAR,EAAW,MAAX,CAHS,EAIT,CAAC,CAAD,EAAI,CAAJ,EAAO,CAAC,MAAR,CAJS,EAKTZ,QAAQ,CAACa,WAAT,CAAqBC,KALZ,CAFwB,EASrC,EATqC,CAAvC;AAYA,QAAMC,WAAW,GAAGb,gBAAgB,CAAC,MAAM;AACzC,WAAO;AACLc,MAAAA,SAAS,EAAE,CAAC;AAAEC,QAAAA,UAAU,EAAEN,eAAe,CAACC;AAA9B,OAAD;AADN,KAAP;AAGD,GAJmC,EAIjC,CAACF,YAAD,EAAeC,eAAf,CAJiC,CAApC;AAMA,QAAMO,kBAAkB,GAAGrB,WAAW,CACpC,CAAC;AACCsB,IAAAA,WAAW,EAAE;AACXC,MAAAA,MAAM,EAAE;AAAEC,QAAAA;AAAF;AADG;AADd,GAAD,KAIyB;AACvBb,IAAAA,2BAA2B,CAACa,MAAD,CAA3B;AACD,GAPmC,EAQpC,CAACb,2BAAD,CARoC,CAAtC;AAWA,sBACE,oBAAC,QAAD,CAAU,IAAV;AACE,IAAA,QAAQ,EAAEU,kBADZ;AAEE,IAAA,KAAK,EAAE,CAACI,MAAM,CAACC,SAAR,EAAmBR,WAAnB,CAFT;AAGE,IAAA,aAAa,EAAC;AAHhB,KAKGR,OAAO,CAACiB,GAAR,CAAaC,IAAD,IAAUA,IAAI,CAACC,QAA3B,CALH,CADF;AASD;AAED,MAAMJ,MAAM,GAAGjB,UAAU,CAACsB,MAAX,CAAkB;AAC/BJ,EAAAA,SAAS,EAAE;AACTK,IAAAA,MAAM,EAAE;AADC;AADoB,CAAlB,CAAf","sourcesContent":["import React, { useCallback } from 'react';\nimport useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';\nimport useCollapsibleHeaderContext from '../../hooks/useCollapsibleHeaderContext';\nimport Animated, {\n interpolate,\n useAnimatedStyle,\n useDerivedValue,\n} from 'react-native-reanimated';\nimport useCollapsibleContext from '../../hooks/useCollapsibleContext';\nimport { LayoutChangeEvent, StyleSheet } from 'react-native';\n\nexport default function CollapsibleHeaderConsumer() {\n const { headers } = useCollapsibleHeaderContext();\n const { handleHeaderContainerLayout } = useInternalCollapsibleContext();\n const { scrollY, headerHeight } = useCollapsibleContext();\n\n const headerTranslate = useDerivedValue(\n () =>\n interpolate(\n scrollY.value,\n // FIXME: can improve by geting maxY value of header and sticky views\n [-1000, 0, 100000],\n [0, 0, -100000],\n Animated.Extrapolate.CLAMP\n ),\n []\n );\n\n const headerStyle = useAnimatedStyle(() => {\n return {\n transform: [{ translateY: headerTranslate.value }],\n };\n }, [headerHeight, headerTranslate]);\n\n const handleHeaderLayout = useCallback(\n ({\n nativeEvent: {\n layout: { height },\n },\n }: LayoutChangeEvent) => {\n handleHeaderContainerLayout(height);\n },\n [handleHeaderContainerLayout]\n );\n\n return (\n <Animated.View\n onLayout={handleHeaderLayout}\n style={[styles.container, headerStyle]}\n pointerEvents=\"box-none\"\n >\n {headers.map((item) => item.children)}\n </Animated.View>\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n zIndex: 10,\n },\n});\n"]}
|
|
@@ -4,26 +4,27 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
4
4
|
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
5
5
|
import { View, StyleSheet, FlatList } from 'react-native';
|
|
6
6
|
import Animated, { runOnJS, useAnimatedReaction } from 'react-native-reanimated';
|
|
7
|
-
import AnimatedTopView from '../header/AnimatedTopView';
|
|
8
7
|
import useAnimatedScroll from './useAnimatedScroll';
|
|
9
|
-
import useCollapsibleContext from '../../hooks/useCollapsibleContext';
|
|
10
8
|
import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';
|
|
11
|
-
import
|
|
9
|
+
import AnimatedTopView from '../header/AnimatedTopView';
|
|
10
|
+
import useCollapsibleContext from '../../hooks/useCollapsibleContext';
|
|
12
11
|
const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
|
|
13
12
|
export default function CollapsibleFlatList({
|
|
14
13
|
headerSnappable = true,
|
|
15
14
|
...props
|
|
16
15
|
}) {
|
|
17
16
|
const {
|
|
18
|
-
headerHeight
|
|
19
|
-
scrollY
|
|
17
|
+
headerHeight
|
|
20
18
|
} = useCollapsibleContext();
|
|
21
19
|
const {
|
|
22
20
|
contentMinHeight,
|
|
23
|
-
scrollViewRef
|
|
21
|
+
scrollViewRef,
|
|
22
|
+
fixedHeaderHeight
|
|
24
23
|
} = useInternalCollapsibleContext();
|
|
25
24
|
const mounted = useRef(true);
|
|
26
25
|
const contentHeight = useRef(0);
|
|
26
|
+
const [internalContentMinHeight, setInternalContentMinHeight] = useState(contentMinHeight.value);
|
|
27
|
+
const [internalProgressViewOffset, setInternalProgressViewOffset] = useState(0);
|
|
27
28
|
useEffect(() => {
|
|
28
29
|
return () => {
|
|
29
30
|
mounted.current = false;
|
|
@@ -42,11 +43,6 @@ export default function CollapsibleFlatList({
|
|
|
42
43
|
|
|
43
44
|
(_scrollViewRef$curren2 = scrollViewRef.current) === null || _scrollViewRef$curren2 === void 0 ? void 0 : _scrollViewRef$curren2.scrollToIndex(params);
|
|
44
45
|
}, []);
|
|
45
|
-
const handleInternalContentHeight = useCallback(value => {
|
|
46
|
-
if (mounted.current) {
|
|
47
|
-
setInternalContentMinHeight(value);
|
|
48
|
-
}
|
|
49
|
-
}, []);
|
|
50
46
|
const {
|
|
51
47
|
scrollHandler
|
|
52
48
|
} = useAnimatedScroll({
|
|
@@ -54,16 +50,32 @@ export default function CollapsibleFlatList({
|
|
|
54
50
|
scrollTo,
|
|
55
51
|
scrollToIndex
|
|
56
52
|
});
|
|
57
|
-
const
|
|
53
|
+
const handleInternalContentHeight = useCallback(value => {
|
|
54
|
+
if (mounted.current) {
|
|
55
|
+
setInternalContentMinHeight(value);
|
|
56
|
+
}
|
|
57
|
+
}, []);
|
|
58
|
+
const handleInternalProgressViewOffset = useCallback(value => {
|
|
59
|
+
if (mounted.current) {
|
|
60
|
+
setInternalProgressViewOffset(value);
|
|
61
|
+
}
|
|
62
|
+
}, []);
|
|
58
63
|
useAnimatedReaction(() => {
|
|
59
64
|
return contentMinHeight.value;
|
|
60
65
|
}, (result, previous) => {
|
|
61
66
|
if (result !== previous) {
|
|
62
|
-
if (contentHeight.current <
|
|
63
|
-
runOnJS(handleInternalContentHeight)(
|
|
67
|
+
if (contentHeight.current < result && internalContentMinHeight !== result) {
|
|
68
|
+
runOnJS(handleInternalContentHeight)(result);
|
|
64
69
|
}
|
|
65
70
|
}
|
|
66
71
|
});
|
|
72
|
+
useAnimatedReaction(() => {
|
|
73
|
+
return fixedHeaderHeight.value;
|
|
74
|
+
}, (result, previous) => {
|
|
75
|
+
if (result !== previous) {
|
|
76
|
+
runOnJS(handleInternalProgressViewOffset)(result);
|
|
77
|
+
}
|
|
78
|
+
});
|
|
67
79
|
const contentContainerStyle = useMemo(() => [styles.contentContainer, {
|
|
68
80
|
minHeight: internalContentMinHeight
|
|
69
81
|
}, props.contentContainerStyle], [props.contentContainerStyle, internalContentMinHeight]);
|
|
@@ -72,15 +84,14 @@ export default function CollapsibleFlatList({
|
|
|
72
84
|
}, []);
|
|
73
85
|
const handleScrollToIndexFailed = useCallback(() => {}, []);
|
|
74
86
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
87
|
+
function renderListHeader() {
|
|
88
|
+
return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(AnimatedTopView, {
|
|
89
|
+
height: headerHeight
|
|
90
|
+
}), props.ListHeaderComponent);
|
|
91
|
+
}
|
|
78
92
|
|
|
79
|
-
return /*#__PURE__*/React.createElement(
|
|
80
|
-
scrollY: scrollY
|
|
81
|
-
}, /*#__PURE__*/React.createElement(AnimatedFlatList, _extends({
|
|
93
|
+
return /*#__PURE__*/React.createElement(AnimatedFlatList, _extends({
|
|
82
94
|
ref: scrollViewRef,
|
|
83
|
-
bounces: false,
|
|
84
95
|
keyboardDismissMode: "on-drag",
|
|
85
96
|
keyboardShouldPersistTaps: "handled",
|
|
86
97
|
scrollEventThrottle: 1,
|
|
@@ -92,8 +103,9 @@ export default function CollapsibleFlatList({
|
|
|
92
103
|
ListHeaderComponent: renderListHeader(),
|
|
93
104
|
onContentSizeChange: handleContentSizeChange //@ts-ignore
|
|
94
105
|
,
|
|
95
|
-
simultaneousHandlers: []
|
|
96
|
-
|
|
106
|
+
simultaneousHandlers: [],
|
|
107
|
+
progressViewOffset: internalProgressViewOffset
|
|
108
|
+
}));
|
|
97
109
|
}
|
|
98
110
|
const styles = StyleSheet.create({
|
|
99
111
|
container: { ...StyleSheet.absoluteFillObject
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["CollapsibleFlatList.tsx"],"names":["React","useCallback","useEffect","useMemo","useRef","useState","View","StyleSheet","FlatList","Animated","runOnJS","useAnimatedReaction","
|
|
1
|
+
{"version":3,"sources":["CollapsibleFlatList.tsx"],"names":["React","useCallback","useEffect","useMemo","useRef","useState","View","StyleSheet","FlatList","Animated","runOnJS","useAnimatedReaction","useAnimatedScroll","useInternalCollapsibleContext","AnimatedTopView","useCollapsibleContext","AnimatedFlatList","createAnimatedComponent","CollapsibleFlatList","headerSnappable","props","headerHeight","contentMinHeight","scrollViewRef","fixedHeaderHeight","mounted","contentHeight","internalContentMinHeight","setInternalContentMinHeight","value","internalProgressViewOffset","setInternalProgressViewOffset","current","scrollTo","yValue","animated","scrollToOffset","offset","scrollToIndex","params","scrollHandler","handleInternalContentHeight","handleInternalProgressViewOffset","result","previous","contentContainerStyle","styles","contentContainer","minHeight","handleContentSizeChange","_","height","handleScrollToIndexFailed","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,iBAAP,MAA8B,qBAA9B;AACA,OAAOC,6BAAP,MAA0C,2CAA1C;AAEA,OAAOC,eAAP,MAA4B,2BAA5B;AACA,OAAOC,qBAAP,MAAkC,mCAAlC;AAEA,MAAMC,gBAAgB,GAAGP,QAAQ,CAACQ,uBAAT,CAAiCT,QAAjC,CAAzB;AAKA,eAAe,SAASU,mBAAT,CAAmC;AAChDC,EAAAA,eAAe,GAAG,IAD8B;AAEhD,KAAGC;AAF6C,CAAnC,EAGC;AACd,QAAM;AAAEC,IAAAA;AAAF,MAAmBN,qBAAqB,EAA9C;AACA,QAAM;AAAEO,IAAAA,gBAAF;AAAoBC,IAAAA,aAApB;AAAmCC,IAAAA;AAAnC,MACJX,6BAA6B,EAD/B;AAEA,QAAMY,OAAO,GAAGrB,MAAM,CAAC,IAAD,CAAtB;AACA,QAAMsB,aAAa,GAAGtB,MAAM,CAAC,CAAD,CAA5B;AACA,QAAM,CAACuB,wBAAD,EAA2BC,2BAA3B,IAA0DvB,QAAQ,CACtEiB,gBAAgB,CAACO,KADqD,CAAxE;AAGA,QAAM,CAACC,0BAAD,EAA6BC,6BAA7B,IACJ1B,QAAQ,CAAC,CAAD,CADV;AAGAH,EAAAA,SAAS,CAAC,MAAM;AACd,WAAO,MAAM;AACXuB,MAAAA,OAAO,CAACO,OAAR,GAAkB,KAAlB;AACD,KAFD;AAGD,GAJQ,EAIN,EAJM,CAAT;AAMA,QAAMC,QAAQ,GAAGhC,WAAW,CAAC,CAACiC,MAAD,EAAiBC,QAAQ,GAAG,IAA5B,KAAqC;AAAA;;AAChE,6BAAAZ,aAAa,CAACS,OAAd,gFAAuBI,cAAvB,CAAsC;AACpCC,MAAAA,MAAM,EAAEH,MAD4B;AAEpCC,MAAAA;AAFoC,KAAtC;AAID,GAL2B,EAKzB,EALyB,CAA5B;AAOA,QAAMG,aAAa,GAAGrC,WAAW,CAAEsC,MAAD,IAAY;AAAA;;AAC5C,8BAAAhB,aAAa,CAACS,OAAd,kFAAuBM,aAAvB,CAAqCC,MAArC;AACD,GAFgC,EAE9B,EAF8B,CAAjC;AAIA,QAAM;AAAEC,IAAAA;AAAF,MAAoB5B,iBAAiB,CAAC;AAC1CO,IAAAA,eAD0C;AAE1Cc,IAAAA,QAF0C;AAG1CK,IAAAA;AAH0C,GAAD,CAA3C;AAMA,QAAMG,2BAA2B,GAAGxC,WAAW,CAAE4B,KAAD,IAAmB;AACjE,QAAIJ,OAAO,CAACO,OAAZ,EAAqB;AACnBJ,MAAAA,2BAA2B,CAACC,KAAD,CAA3B;AACD;AACF,GAJ8C,EAI5C,EAJ4C,CAA/C;AAMA,QAAMa,gCAAgC,GAAGzC,WAAW,CAAE4B,KAAD,IAAmB;AACtE,QAAIJ,OAAO,CAACO,OAAZ,EAAqB;AACnBD,MAAAA,6BAA6B,CAACF,KAAD,CAA7B;AACD;AACF,GAJmD,EAIjD,EAJiD,CAApD;AAMAlB,EAAAA,mBAAmB,CACjB,MAAM;AACJ,WAAOW,gBAAgB,CAACO,KAAxB;AACD,GAHgB,EAIjB,CAACc,MAAD,EAASC,QAAT,KAAsB;AACpB,QAAID,MAAM,KAAKC,QAAf,EAAyB;AACvB,UACElB,aAAa,CAACM,OAAd,GAAwBW,MAAxB,IACAhB,wBAAwB,KAAKgB,MAF/B,EAGE;AACAjC,QAAAA,OAAO,CAAC+B,2BAAD,CAAP,CAAqCE,MAArC;AACD;AACF;AACF,GAbgB,CAAnB;AAgBAhC,EAAAA,mBAAmB,CACjB,MAAM;AACJ,WAAOa,iBAAiB,CAACK,KAAzB;AACD,GAHgB,EAIjB,CAACc,MAAD,EAASC,QAAT,KAAsB;AACpB,QAAID,MAAM,KAAKC,QAAf,EAAyB;AACvBlC,MAAAA,OAAO,CAACgC,gCAAD,CAAP,CAA0CC,MAA1C;AACD;AACF,GARgB,CAAnB;AAWA,QAAME,qBAAqB,GAAG1C,OAAO,CACnC,MAAM,CACJ2C,MAAM,CAACC,gBADH,EAEJ;AAAEC,IAAAA,SAAS,EAAErB;AAAb,GAFI,EAGJP,KAAK,CAACyB,qBAHF,CAD6B,EAMnC,CAACzB,KAAK,CAACyB,qBAAP,EAA8BlB,wBAA9B,CANmC,CAArC;AASA,QAAMsB,uBAAuB,GAAGhD,WAAW,CAAC,CAACiD,CAAD,EAAIC,MAAJ,KAAe;AACzDzB,IAAAA,aAAa,CAACM,OAAd,GAAwBmB,MAAxB;AACD,GAF0C,EAExC,EAFwC,CAA3C;AAIA,QAAMC,yBAAyB,GAAGnD,WAAW,CAAC,MAAM,CAAE,CAAT,EAAW,EAAX,CAA7C;;AAEA,WAASoD,gBAAT,GAA4B;AAC1B,wBACE,oBAAC,IAAD,qBACE,oBAAC,eAAD;AAAiB,MAAA,MAAM,EAAEhC;AAAzB,MADF,EAEGD,KAAK,CAACkC,mBAFT,CADF;AAMD;;AAED,sBACE,oBAAC,gBAAD;AACE,IAAA,GAAG,EAAE/B,aADP;AAEE,IAAA,mBAAmB,EAAC,SAFtB;AAGE,IAAA,yBAAyB,EAAC,SAH5B;AAIE,IAAA,mBAAmB,EAAE,CAJvB;AAKE,IAAA,qBAAqB,EAAE6B;AALzB,KAMMhC,KANN;AAOE,IAAA,KAAK,EAAE,CAAC0B,MAAM,CAACS,SAAR,EAAmBnC,KAAK,CAACoC,KAAzB,CAPT;AAQE,IAAA,qBAAqB,EAAEX,qBARzB;AASE,IAAA,QAAQ,EAAEL,aATZ;AAUE,IAAA,mBAAmB,EAAEa,gBAAgB,EAVvC;AAWE,IAAA,mBAAmB,EAAEJ,uBAXvB,CAYE;AAZF;AAaE,IAAA,oBAAoB,EAAE,EAbxB;AAcE,IAAA,kBAAkB,EAAEnB;AAdtB,KADF;AAkBD;AAED,MAAMgB,MAAM,GAAGvC,UAAU,CAACkD,MAAX,CAAkB;AAC/BF,EAAAA,SAAS,EAAE,EACT,GAAGhD,UAAU,CAACmD;AADL,GADoB;AAI/BX,EAAAA,gBAAgB,EAAE;AAChBY,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 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 useAnimatedScroll from './useAnimatedScroll';\nimport useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';\nimport type { CollapsibleProps } from '../../types';\nimport AnimatedTopView from '../header/AnimatedTopView';\nimport useCollapsibleContext from '../../hooks/useCollapsibleContext';\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 } = useCollapsibleContext();\n const { contentMinHeight, scrollViewRef, fixedHeaderHeight } =\n useInternalCollapsibleContext();\n const mounted = useRef(true);\n const contentHeight = useRef(0);\n const [internalContentMinHeight, setInternalContentMinHeight] = useState(\n contentMinHeight.value\n );\n const [internalProgressViewOffset, setInternalProgressViewOffset] =\n useState(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 { scrollHandler } = useAnimatedScroll({\n headerSnappable,\n scrollTo,\n scrollToIndex,\n });\n\n const handleInternalContentHeight = useCallback((value: number) => {\n if (mounted.current) {\n setInternalContentMinHeight(value);\n }\n }, []);\n\n const handleInternalProgressViewOffset = useCallback((value: number) => {\n if (mounted.current) {\n setInternalProgressViewOffset(value);\n }\n }, []);\n\n useAnimatedReaction(\n () => {\n return contentMinHeight.value;\n },\n (result, previous) => {\n if (result !== previous) {\n if (\n contentHeight.current < result &&\n internalContentMinHeight !== result\n ) {\n runOnJS(handleInternalContentHeight)(result);\n }\n }\n }\n );\n\n useAnimatedReaction(\n () => {\n return fixedHeaderHeight.value;\n },\n (result, previous) => {\n if (result !== previous) {\n runOnJS(handleInternalProgressViewOffset)(result);\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 function renderListHeader() {\n return (\n <View>\n <AnimatedTopView height={headerHeight} />\n {props.ListHeaderComponent}\n </View>\n );\n }\n\n return (\n <AnimatedFlatList\n ref={scrollViewRef}\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 //@ts-ignore\n simultaneousHandlers={[]}\n progressViewOffset={internalProgressViewOffset}\n />\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"]}
|
|
@@ -3,23 +3,33 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
3
3
|
/* eslint-disable react-hooks/exhaustive-deps */
|
|
4
4
|
import AnimatedTopView from '../header/AnimatedTopView';
|
|
5
5
|
import useAnimatedScroll from './useAnimatedScroll';
|
|
6
|
-
import React, { useCallback, useMemo } from 'react';
|
|
7
|
-
import { StyleSheet } from 'react-native';
|
|
8
|
-
import Animated, { useAnimatedStyle } from 'react-native-reanimated';
|
|
6
|
+
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
7
|
+
import { RefreshControl, StyleSheet } from 'react-native';
|
|
8
|
+
import Animated, { runOnJS, useAnimatedReaction, useAnimatedStyle } from 'react-native-reanimated';
|
|
9
9
|
import useCollapsibleContext from '../../hooks/useCollapsibleContext';
|
|
10
10
|
import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';
|
|
11
11
|
export default function CollapsibleScrollView({
|
|
12
12
|
headerSnappable = true,
|
|
13
13
|
children,
|
|
14
|
+
refreshing = false,
|
|
15
|
+
onRefresh,
|
|
14
16
|
...props
|
|
15
17
|
}) {
|
|
16
18
|
const {
|
|
17
19
|
contentMinHeight,
|
|
18
|
-
scrollViewRef
|
|
20
|
+
scrollViewRef,
|
|
21
|
+
fixedHeaderHeight
|
|
19
22
|
} = useInternalCollapsibleContext();
|
|
20
23
|
const {
|
|
21
24
|
headerHeight
|
|
22
25
|
} = useCollapsibleContext();
|
|
26
|
+
const [internalProgressViewOffset, setInternalProgressViewOffset] = useState(0);
|
|
27
|
+
const mounted = useRef(true);
|
|
28
|
+
useEffect(() => {
|
|
29
|
+
return () => {
|
|
30
|
+
mounted.current = false;
|
|
31
|
+
};
|
|
32
|
+
}, []);
|
|
23
33
|
const scrollTo = useCallback((yValue, animated = true) => {
|
|
24
34
|
var _scrollViewRef$curren;
|
|
25
35
|
|
|
@@ -43,10 +53,26 @@ export default function CollapsibleScrollView({
|
|
|
43
53
|
minHeight: contentMinHeight.value
|
|
44
54
|
};
|
|
45
55
|
}, []);
|
|
56
|
+
const handleInternalProgressViewOffset = useCallback(value => {
|
|
57
|
+
if (mounted.current) {
|
|
58
|
+
setInternalProgressViewOffset(value);
|
|
59
|
+
}
|
|
60
|
+
}, []);
|
|
61
|
+
useAnimatedReaction(() => {
|
|
62
|
+
return fixedHeaderHeight.value;
|
|
63
|
+
}, (result, previous) => {
|
|
64
|
+
if (result !== previous) {
|
|
65
|
+
runOnJS(handleInternalProgressViewOffset)(result);
|
|
66
|
+
}
|
|
67
|
+
});
|
|
46
68
|
const contentContainerStyle = useMemo(() => [styles.contentContainer, props.contentContainerStyle], [props.contentContainerStyle]);
|
|
47
69
|
return /*#__PURE__*/React.createElement(Animated.ScrollView, _extends({
|
|
48
70
|
ref: scrollViewRef,
|
|
49
|
-
|
|
71
|
+
refreshControl: onRefresh ? /*#__PURE__*/React.createElement(RefreshControl, {
|
|
72
|
+
progressViewOffset: internalProgressViewOffset,
|
|
73
|
+
refreshing: refreshing,
|
|
74
|
+
onRefresh: onRefresh
|
|
75
|
+
}) : undefined
|
|
50
76
|
}, props, {
|
|
51
77
|
style: [styles.container, props.style],
|
|
52
78
|
contentContainerStyle: contentContainerStyle,
|
|
@@ -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","
|
|
1
|
+
{"version":3,"sources":["CollapsibleScrollView.tsx"],"names":["AnimatedTopView","useAnimatedScroll","React","useCallback","useEffect","useMemo","useRef","useState","RefreshControl","StyleSheet","Animated","runOnJS","useAnimatedReaction","useAnimatedStyle","useCollapsibleContext","useInternalCollapsibleContext","CollapsibleScrollView","headerSnappable","children","refreshing","onRefresh","props","contentMinHeight","scrollViewRef","fixedHeaderHeight","headerHeight","internalProgressViewOffset","setInternalProgressViewOffset","mounted","current","scrollTo","yValue","animated","y","scrollToIndex","console","warn","scrollHandler","animatedStyle","minHeight","value","handleInternalProgressViewOffset","result","previous","contentContainerStyle","styles","contentContainer","undefined","container","style","create","absoluteFillObject","flexGrow"],"mappings":"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","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport AnimatedTopView from '../header/AnimatedTopView';\nimport useAnimatedScroll from './useAnimatedScroll';\nimport React, {\n ReactNode,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { RefreshControl, ScrollViewProps, StyleSheet } from 'react-native';\nimport Animated, {\n runOnJS,\n useAnimatedReaction,\n useAnimatedStyle,\n} 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 refreshing?: boolean;\n onRefresh?: () => void;\n };\n\nexport default function CollapsibleScrollView({\n headerSnappable = true,\n children,\n refreshing = false,\n onRefresh,\n ...props\n}: Props) {\n const { contentMinHeight, scrollViewRef, fixedHeaderHeight } =\n useInternalCollapsibleContext();\n const { headerHeight } = useCollapsibleContext();\n const [internalProgressViewOffset, setInternalProgressViewOffset] =\n useState(0);\n const mounted = useRef(true);\n\n useEffect(() => {\n return () => {\n mounted.current = false;\n };\n }, []);\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 handleInternalProgressViewOffset = useCallback((value: number) => {\n if (mounted.current) {\n setInternalProgressViewOffset(value);\n }\n }, []);\n\n useAnimatedReaction(\n () => {\n return fixedHeaderHeight.value;\n },\n (result, previous) => {\n if (result !== previous) {\n runOnJS(handleInternalProgressViewOffset)(result);\n }\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 refreshControl={\n onRefresh ? (\n <RefreshControl\n progressViewOffset={internalProgressViewOffset}\n refreshing={refreshing}\n onRefresh={onRefresh}\n />\n ) : undefined\n }\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});\n"]}
|
|
@@ -6,7 +6,6 @@ import { CollapsibleContext } from './hooks/useCollapsibleContext';
|
|
|
6
6
|
import { InternalCollapsibleContext } from './hooks/useInternalCollapsibleContext';
|
|
7
7
|
import { useAnimatedReaction, useDerivedValue, useSharedValue, withTiming } from 'react-native-reanimated';
|
|
8
8
|
import { debounce } from './utils/debounce';
|
|
9
|
-
import PullToRefreshProvider from './components/pullToRefresh/PullToRefreshProvider';
|
|
10
9
|
import CollapsibleHeaderProvider from './components/header/CollapsibleHeaderProvider';
|
|
11
10
|
export default function withCollapsibleContext(Component) {
|
|
12
11
|
return props => {
|
|
@@ -157,7 +156,7 @@ export default function withCollapsibleContext(Component) {
|
|
|
157
156
|
value: context
|
|
158
157
|
}, /*#__PURE__*/React.createElement(InternalCollapsibleContext.Provider, {
|
|
159
158
|
value: internalContext
|
|
160
|
-
}, /*#__PURE__*/React.createElement(CollapsibleHeaderProvider, null, /*#__PURE__*/React.createElement(
|
|
159
|
+
}, /*#__PURE__*/React.createElement(CollapsibleHeaderProvider, null, /*#__PURE__*/React.createElement(Component, props))));
|
|
161
160
|
};
|
|
162
161
|
}
|
|
163
162
|
//# sourceMappingURL=withCollapsibleContext.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["withCollapsibleContext.tsx"],"names":["React","useCallback","useMemo","useRef","CollapsibleContext","InternalCollapsibleContext","useAnimatedReaction","useDerivedValue","useSharedValue","withTiming","debounce","PullToRefreshProvider","CollapsibleHeaderProvider","withCollapsibleContext","Component","props","collapsibleHandlers","headerHeight","scrollY","stickyViewRefs","stickyViewTops","stickyViewPositionsRef","stickyViewPositions","fixedHeaderHeight","stickyHeaderHeight","containerHeight","firstStickyViewY","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","animated","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';\nimport CollapsibleHeaderProvider from './components/header/CollapsibleHeaderProvider';\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 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((height: number) => {\n headerHeight.value = withTiming(height, {\n duration: fixedHeaderHeight.value === 0 ? 0 : 10,\n });\n fixedHeaderHeight.value = height;\n // Try refresh sticky positions\n debounceRefreshStickyPositions();\n }, []);\n\n const handleContainerHeight = useCallback((height: number) => {\n containerHeight.value = height;\n }, []);\n\n const context = useMemo(() => {\n return {\n collapse: (animated?: boolean) =>\n collapsibleHandlers.current?.collapse(animated),\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 <CollapsibleHeaderProvider>\n <PullToRefreshProvider>\n {/** @ts-ignore */}\n <Component {...props} />\n </PullToRefreshProvider>\n </CollapsibleHeaderProvider>\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","CollapsibleHeaderProvider","withCollapsibleContext","Component","props","collapsibleHandlers","headerHeight","scrollY","stickyViewRefs","stickyViewTops","stickyViewPositionsRef","stickyViewPositions","fixedHeaderHeight","stickyHeaderHeight","containerHeight","firstStickyViewY","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","animated","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 CollapsibleHeaderProvider from './components/header/CollapsibleHeaderProvider';\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 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((height: number) => {\n headerHeight.value = withTiming(height, {\n duration: fixedHeaderHeight.value === 0 ? 0 : 10,\n });\n fixedHeaderHeight.value = height;\n // Try refresh sticky positions\n debounceRefreshStickyPositions();\n }, []);\n\n const handleContainerHeight = useCallback((height: number) => {\n containerHeight.value = height;\n }, []);\n\n const context = useMemo(() => {\n return {\n collapse: (animated?: boolean) =>\n collapsibleHandlers.current?.collapse(animated),\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 <CollapsibleHeaderProvider>\n {/** @ts-ignore */}\n <Component {...props} />\n </CollapsibleHeaderProvider>\n </InternalCollapsibleContext.Provider>\n </CollapsibleContext.Provider>\n );\n };\n}\n"]}
|
|
@@ -3,6 +3,8 @@ import { ScrollViewProps } from 'react-native';
|
|
|
3
3
|
import type { CollapsibleProps } from '../../types';
|
|
4
4
|
declare type Props = ScrollViewProps & CollapsibleProps & {
|
|
5
5
|
children?: ReactNode;
|
|
6
|
+
refreshing?: boolean;
|
|
7
|
+
onRefresh?: () => void;
|
|
6
8
|
};
|
|
7
|
-
export default function CollapsibleScrollView({ headerSnappable, children, ...props }: Props): JSX.Element;
|
|
9
|
+
export default function CollapsibleScrollView({ headerSnappable, children, refreshing, onRefresh, ...props }: Props): JSX.Element;
|
|
8
10
|
export {};
|
package/package.json
CHANGED
|
@@ -19,8 +19,8 @@ export default function CollapsibleHeaderConsumer() {
|
|
|
19
19
|
interpolate(
|
|
20
20
|
scrollY.value,
|
|
21
21
|
// FIXME: can improve by geting maxY value of header and sticky views
|
|
22
|
-
[-
|
|
23
|
-
[
|
|
22
|
+
[-1000, 0, 100000],
|
|
23
|
+
[0, 0, -100000],
|
|
24
24
|
Animated.Extrapolate.CLAMP
|
|
25
25
|
),
|
|
26
26
|
[]
|
|
@@ -56,7 +56,6 @@ export default function CollapsibleHeaderConsumer() {
|
|
|
56
56
|
|
|
57
57
|
const styles = StyleSheet.create({
|
|
58
58
|
container: {
|
|
59
|
-
backgroundColor: 'white',
|
|
60
59
|
zIndex: 10,
|
|
61
60
|
},
|
|
62
61
|
});
|
|
@@ -11,12 +11,11 @@ import Animated, {
|
|
|
11
11
|
runOnJS,
|
|
12
12
|
useAnimatedReaction,
|
|
13
13
|
} from 'react-native-reanimated';
|
|
14
|
-
import AnimatedTopView from '../header/AnimatedTopView';
|
|
15
14
|
import useAnimatedScroll from './useAnimatedScroll';
|
|
16
|
-
import useCollapsibleContext from '../../hooks/useCollapsibleContext';
|
|
17
15
|
import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';
|
|
18
16
|
import type { CollapsibleProps } from '../../types';
|
|
19
|
-
import
|
|
17
|
+
import AnimatedTopView from '../header/AnimatedTopView';
|
|
18
|
+
import useCollapsibleContext from '../../hooks/useCollapsibleContext';
|
|
20
19
|
|
|
21
20
|
const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
|
|
22
21
|
|
|
@@ -27,10 +26,16 @@ export default function CollapsibleFlatList<Data>({
|
|
|
27
26
|
headerSnappable = true,
|
|
28
27
|
...props
|
|
29
28
|
}: Props<Data>) {
|
|
30
|
-
const { headerHeight
|
|
31
|
-
const { contentMinHeight, scrollViewRef } =
|
|
29
|
+
const { headerHeight } = useCollapsibleContext();
|
|
30
|
+
const { contentMinHeight, scrollViewRef, fixedHeaderHeight } =
|
|
31
|
+
useInternalCollapsibleContext();
|
|
32
32
|
const mounted = useRef(true);
|
|
33
33
|
const contentHeight = useRef(0);
|
|
34
|
+
const [internalContentMinHeight, setInternalContentMinHeight] = useState(
|
|
35
|
+
contentMinHeight.value
|
|
36
|
+
);
|
|
37
|
+
const [internalProgressViewOffset, setInternalProgressViewOffset] =
|
|
38
|
+
useState(0);
|
|
34
39
|
|
|
35
40
|
useEffect(() => {
|
|
36
41
|
return () => {
|
|
@@ -49,21 +54,23 @@ export default function CollapsibleFlatList<Data>({
|
|
|
49
54
|
scrollViewRef.current?.scrollToIndex(params);
|
|
50
55
|
}, []);
|
|
51
56
|
|
|
52
|
-
const handleInternalContentHeight = useCallback((value: number) => {
|
|
53
|
-
if (mounted.current) {
|
|
54
|
-
setInternalContentMinHeight(value);
|
|
55
|
-
}
|
|
56
|
-
}, []);
|
|
57
|
-
|
|
58
57
|
const { scrollHandler } = useAnimatedScroll({
|
|
59
58
|
headerSnappable,
|
|
60
59
|
scrollTo,
|
|
61
60
|
scrollToIndex,
|
|
62
61
|
});
|
|
63
62
|
|
|
64
|
-
const
|
|
65
|
-
|
|
66
|
-
|
|
63
|
+
const handleInternalContentHeight = useCallback((value: number) => {
|
|
64
|
+
if (mounted.current) {
|
|
65
|
+
setInternalContentMinHeight(value);
|
|
66
|
+
}
|
|
67
|
+
}, []);
|
|
68
|
+
|
|
69
|
+
const handleInternalProgressViewOffset = useCallback((value: number) => {
|
|
70
|
+
if (mounted.current) {
|
|
71
|
+
setInternalProgressViewOffset(value);
|
|
72
|
+
}
|
|
73
|
+
}, []);
|
|
67
74
|
|
|
68
75
|
useAnimatedReaction(
|
|
69
76
|
() => {
|
|
@@ -72,15 +79,26 @@ export default function CollapsibleFlatList<Data>({
|
|
|
72
79
|
(result, previous) => {
|
|
73
80
|
if (result !== previous) {
|
|
74
81
|
if (
|
|
75
|
-
contentHeight.current <
|
|
76
|
-
internalContentMinHeight !==
|
|
82
|
+
contentHeight.current < result &&
|
|
83
|
+
internalContentMinHeight !== result
|
|
77
84
|
) {
|
|
78
|
-
runOnJS(handleInternalContentHeight)(
|
|
85
|
+
runOnJS(handleInternalContentHeight)(result);
|
|
79
86
|
}
|
|
80
87
|
}
|
|
81
88
|
}
|
|
82
89
|
);
|
|
83
90
|
|
|
91
|
+
useAnimatedReaction(
|
|
92
|
+
() => {
|
|
93
|
+
return fixedHeaderHeight.value;
|
|
94
|
+
},
|
|
95
|
+
(result, previous) => {
|
|
96
|
+
if (result !== previous) {
|
|
97
|
+
runOnJS(handleInternalProgressViewOffset)(result);
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
);
|
|
101
|
+
|
|
84
102
|
const contentContainerStyle = useMemo(
|
|
85
103
|
() => [
|
|
86
104
|
styles.contentContainer,
|
|
@@ -96,33 +114,32 @@ export default function CollapsibleFlatList<Data>({
|
|
|
96
114
|
|
|
97
115
|
const handleScrollToIndexFailed = useCallback(() => {}, []);
|
|
98
116
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
<
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
117
|
+
function renderListHeader() {
|
|
118
|
+
return (
|
|
119
|
+
<View>
|
|
120
|
+
<AnimatedTopView height={headerHeight} />
|
|
121
|
+
{props.ListHeaderComponent}
|
|
122
|
+
</View>
|
|
123
|
+
);
|
|
124
|
+
}
|
|
105
125
|
|
|
106
126
|
return (
|
|
107
|
-
<
|
|
108
|
-
{
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
simultaneousHandlers={[]}
|
|
124
|
-
/>
|
|
125
|
-
</PullToRefreshContainer>
|
|
127
|
+
<AnimatedFlatList
|
|
128
|
+
ref={scrollViewRef}
|
|
129
|
+
keyboardDismissMode="on-drag"
|
|
130
|
+
keyboardShouldPersistTaps="handled"
|
|
131
|
+
scrollEventThrottle={1}
|
|
132
|
+
onScrollToIndexFailed={handleScrollToIndexFailed}
|
|
133
|
+
{...props}
|
|
134
|
+
style={[styles.container, props.style]}
|
|
135
|
+
contentContainerStyle={contentContainerStyle}
|
|
136
|
+
onScroll={scrollHandler}
|
|
137
|
+
ListHeaderComponent={renderListHeader()}
|
|
138
|
+
onContentSizeChange={handleContentSizeChange}
|
|
139
|
+
//@ts-ignore
|
|
140
|
+
simultaneousHandlers={[]}
|
|
141
|
+
progressViewOffset={internalProgressViewOffset}
|
|
142
|
+
/>
|
|
126
143
|
);
|
|
127
144
|
}
|
|
128
145
|
|
|
@@ -1,9 +1,20 @@
|
|
|
1
1
|
/* eslint-disable react-hooks/exhaustive-deps */
|
|
2
2
|
import AnimatedTopView from '../header/AnimatedTopView';
|
|
3
3
|
import useAnimatedScroll from './useAnimatedScroll';
|
|
4
|
-
import React, {
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
import React, {
|
|
5
|
+
ReactNode,
|
|
6
|
+
useCallback,
|
|
7
|
+
useEffect,
|
|
8
|
+
useMemo,
|
|
9
|
+
useRef,
|
|
10
|
+
useState,
|
|
11
|
+
} from 'react';
|
|
12
|
+
import { RefreshControl, ScrollViewProps, StyleSheet } from 'react-native';
|
|
13
|
+
import Animated, {
|
|
14
|
+
runOnJS,
|
|
15
|
+
useAnimatedReaction,
|
|
16
|
+
useAnimatedStyle,
|
|
17
|
+
} from 'react-native-reanimated';
|
|
7
18
|
import type { CollapsibleProps } from '../../types';
|
|
8
19
|
import useCollapsibleContext from '../../hooks/useCollapsibleContext';
|
|
9
20
|
import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';
|
|
@@ -11,15 +22,29 @@ import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleCon
|
|
|
11
22
|
type Props = ScrollViewProps &
|
|
12
23
|
CollapsibleProps & {
|
|
13
24
|
children?: ReactNode;
|
|
25
|
+
refreshing?: boolean;
|
|
26
|
+
onRefresh?: () => void;
|
|
14
27
|
};
|
|
15
28
|
|
|
16
29
|
export default function CollapsibleScrollView({
|
|
17
30
|
headerSnappable = true,
|
|
18
31
|
children,
|
|
32
|
+
refreshing = false,
|
|
33
|
+
onRefresh,
|
|
19
34
|
...props
|
|
20
35
|
}: Props) {
|
|
21
|
-
const { contentMinHeight, scrollViewRef } =
|
|
36
|
+
const { contentMinHeight, scrollViewRef, fixedHeaderHeight } =
|
|
37
|
+
useInternalCollapsibleContext();
|
|
22
38
|
const { headerHeight } = useCollapsibleContext();
|
|
39
|
+
const [internalProgressViewOffset, setInternalProgressViewOffset] =
|
|
40
|
+
useState(0);
|
|
41
|
+
const mounted = useRef(true);
|
|
42
|
+
|
|
43
|
+
useEffect(() => {
|
|
44
|
+
return () => {
|
|
45
|
+
mounted.current = false;
|
|
46
|
+
};
|
|
47
|
+
}, []);
|
|
23
48
|
|
|
24
49
|
const scrollTo = useCallback((yValue: number, animated = true) => {
|
|
25
50
|
scrollViewRef.current?.scrollTo({ y: yValue, animated });
|
|
@@ -41,6 +66,23 @@ export default function CollapsibleScrollView({
|
|
|
41
66
|
};
|
|
42
67
|
}, []);
|
|
43
68
|
|
|
69
|
+
const handleInternalProgressViewOffset = useCallback((value: number) => {
|
|
70
|
+
if (mounted.current) {
|
|
71
|
+
setInternalProgressViewOffset(value);
|
|
72
|
+
}
|
|
73
|
+
}, []);
|
|
74
|
+
|
|
75
|
+
useAnimatedReaction(
|
|
76
|
+
() => {
|
|
77
|
+
return fixedHeaderHeight.value;
|
|
78
|
+
},
|
|
79
|
+
(result, previous) => {
|
|
80
|
+
if (result !== previous) {
|
|
81
|
+
runOnJS(handleInternalProgressViewOffset)(result);
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
);
|
|
85
|
+
|
|
44
86
|
const contentContainerStyle = useMemo(
|
|
45
87
|
() => [styles.contentContainer, props.contentContainerStyle],
|
|
46
88
|
[props.contentContainerStyle]
|
|
@@ -49,7 +91,15 @@ export default function CollapsibleScrollView({
|
|
|
49
91
|
return (
|
|
50
92
|
<Animated.ScrollView
|
|
51
93
|
ref={scrollViewRef}
|
|
52
|
-
|
|
94
|
+
refreshControl={
|
|
95
|
+
onRefresh ? (
|
|
96
|
+
<RefreshControl
|
|
97
|
+
progressViewOffset={internalProgressViewOffset}
|
|
98
|
+
refreshing={refreshing}
|
|
99
|
+
onRefresh={onRefresh}
|
|
100
|
+
/>
|
|
101
|
+
) : undefined
|
|
102
|
+
}
|
|
53
103
|
{...props}
|
|
54
104
|
style={[styles.container, props.style]}
|
|
55
105
|
contentContainerStyle={contentContainerStyle}
|
|
@@ -12,7 +12,6 @@ import {
|
|
|
12
12
|
} from 'react-native-reanimated';
|
|
13
13
|
import type { View } from 'react-native';
|
|
14
14
|
import { debounce } from './utils/debounce';
|
|
15
|
-
import PullToRefreshProvider from './components/pullToRefresh/PullToRefreshProvider';
|
|
16
15
|
import CollapsibleHeaderProvider from './components/header/CollapsibleHeaderProvider';
|
|
17
16
|
|
|
18
17
|
export default function withCollapsibleContext<T>(Component: FC<T>) {
|
|
@@ -185,10 +184,8 @@ export default function withCollapsibleContext<T>(Component: FC<T>) {
|
|
|
185
184
|
<CollapsibleContext.Provider value={context}>
|
|
186
185
|
<InternalCollapsibleContext.Provider value={internalContext}>
|
|
187
186
|
<CollapsibleHeaderProvider>
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
<Component {...props} />
|
|
191
|
-
</PullToRefreshProvider>
|
|
187
|
+
{/** @ts-ignore */}
|
|
188
|
+
<Component {...props} />
|
|
192
189
|
</CollapsibleHeaderProvider>
|
|
193
190
|
</InternalCollapsibleContext.Provider>
|
|
194
191
|
</CollapsibleContext.Provider>
|