@r0b0t3d/react-native-collapsible 1.3.4 → 1.3.5-alpha.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/CollapsibleContainer.js +1 -3
- package/lib/commonjs/components/CollapsibleContainer.js.map +1 -1
- package/lib/commonjs/components/header/CollapsibleHeaderConsumer.js +1 -1
- package/lib/commonjs/components/header/CollapsibleHeaderConsumer.js.map +1 -1
- package/lib/commonjs/components/header/CollapsibleHeaderContainer.js +2 -11
- package/lib/commonjs/components/header/CollapsibleHeaderContainer.js.map +1 -1
- package/lib/commonjs/components/scrollable/CollapsibleFlatList.js +34 -28
- package/lib/commonjs/components/scrollable/CollapsibleFlatList.js.map +1 -1
- package/lib/commonjs/components/scrollable/CollapsibleScrollView.js +7 -14
- package/lib/commonjs/components/scrollable/CollapsibleScrollView.js.map +1 -1
- package/lib/commonjs/index.js +0 -9
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/withCollapsibleContext.js +1 -3
- package/lib/commonjs/withCollapsibleContext.js.map +1 -1
- package/lib/module/components/CollapsibleContainer.js +1 -2
- package/lib/module/components/CollapsibleContainer.js.map +1 -1
- package/lib/module/components/header/CollapsibleHeaderConsumer.js +1 -1
- package/lib/module/components/header/CollapsibleHeaderConsumer.js.map +1 -1
- package/lib/module/components/header/CollapsibleHeaderContainer.js +3 -11
- package/lib/module/components/header/CollapsibleHeaderContainer.js.map +1 -1
- package/lib/module/components/scrollable/CollapsibleFlatList.js +34 -26
- package/lib/module/components/scrollable/CollapsibleFlatList.js.map +1 -1
- package/lib/module/components/scrollable/CollapsibleScrollView.js +6 -12
- package/lib/module/components/scrollable/CollapsibleScrollView.js.map +1 -1
- package/lib/module/index.js +0 -1
- package/lib/module/index.js.map +1 -1
- package/lib/module/withCollapsibleContext.js +1 -2
- package/lib/module/withCollapsibleContext.js.map +1 -1
- package/lib/typescript/components/header/CollapsibleHeaderContainer.d.ts +1 -1
- package/lib/typescript/index.d.ts +0 -1
- package/package.json +1 -1
- package/src/components/CollapsibleContainer.tsx +0 -2
- package/src/components/header/CollapsibleHeaderConsumer.tsx +2 -2
- package/src/components/header/CollapsibleHeaderContainer.tsx +3 -17
- package/src/components/scrollable/CollapsibleFlatList.tsx +59 -42
- package/src/components/scrollable/CollapsibleScrollView.tsx +4 -8
- package/src/index.tsx +0 -1
- package/src/withCollapsibleContext.tsx +2 -5
- package/lib/commonjs/components/header/AnimatedTopView.js +0 -29
- package/lib/commonjs/components/header/AnimatedTopView.js.map +0 -1
- package/lib/commonjs/components/pullToRefresh/PullToRefreshContainer.js +0 -75
- package/lib/commonjs/components/pullToRefresh/PullToRefreshContainer.js.map +0 -1
- package/lib/commonjs/components/pullToRefresh/PullToRefreshProvider.js +0 -35
- package/lib/commonjs/components/pullToRefresh/PullToRefreshProvider.js.map +0 -1
- package/lib/commonjs/components/pullToRefresh/RefreshControl.js +0 -91
- package/lib/commonjs/components/pullToRefresh/RefreshControl.js.map +0 -1
- package/lib/commonjs/components/pullToRefresh/usePullToRefreshContext.js +0 -24
- package/lib/commonjs/components/pullToRefresh/usePullToRefreshContext.js.map +0 -1
- package/lib/commonjs/components/pullToRefresh/utils.js +0 -59
- package/lib/commonjs/components/pullToRefresh/utils.js.map +0 -1
- package/lib/module/components/header/AnimatedTopView.js +0 -14
- package/lib/module/components/header/AnimatedTopView.js.map +0 -1
- package/lib/module/components/pullToRefresh/PullToRefreshContainer.js +0 -56
- package/lib/module/components/pullToRefresh/PullToRefreshContainer.js.map +0 -1
- package/lib/module/components/pullToRefresh/PullToRefreshProvider.js +0 -21
- package/lib/module/components/pullToRefresh/PullToRefreshProvider.js.map +0 -1
- package/lib/module/components/pullToRefresh/RefreshControl.js +0 -73
- package/lib/module/components/pullToRefresh/RefreshControl.js.map +0 -1
- package/lib/module/components/pullToRefresh/usePullToRefreshContext.js +0 -13
- package/lib/module/components/pullToRefresh/usePullToRefreshContext.js.map +0 -1
- package/lib/module/components/pullToRefresh/utils.js +0 -42
- package/lib/module/components/pullToRefresh/utils.js.map +0 -1
- package/lib/typescript/components/header/AnimatedTopView.d.ts +0 -6
- package/lib/typescript/components/pullToRefresh/PullToRefreshContainer.d.ts +0 -8
- package/lib/typescript/components/pullToRefresh/PullToRefreshProvider.d.ts +0 -6
- package/lib/typescript/components/pullToRefresh/RefreshControl.d.ts +0 -9
- package/lib/typescript/components/pullToRefresh/usePullToRefreshContext.d.ts +0 -4
- package/lib/typescript/components/pullToRefresh/utils.d.ts +0 -20
- package/src/components/header/AnimatedTopView.tsx +0 -18
- package/src/components/pullToRefresh/PullToRefreshContainer.tsx +0 -66
- package/src/components/pullToRefresh/PullToRefreshProvider.tsx +0 -27
- package/src/components/pullToRefresh/RefreshControl.tsx +0 -100
- package/src/components/pullToRefresh/usePullToRefreshContext.ts +0 -13
- package/src/components/pullToRefresh/utils.ts +0 -49
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["CollapsibleHeaderContainer.tsx"],"names":["React","
|
|
1
|
+
{"version":3,"sources":["CollapsibleHeaderContainer.tsx"],"names":["React","Fragment","useEffect","useMemo","useCollapsibleHeaderContext","key","CollapsibleHeaderContainer","children","containerStyle","contentKey","mount","unmount","update","content"],"mappings":"AAAA;AAEA,OAAOA,KAAP,IAAgBC,QAAhB,EAAqCC,SAArC,EAAgDC,OAAhD,QAA+D,OAA/D;AACA,OAAOC,2BAAP,MAAwC,yCAAxC;AAOA,IAAIC,GAAG,GAAG,CAAV;AAEA,eAAe,SAASC,0BAAT,CAAoC;AACjDC,EAAAA,QADiD;AAEjDC,EAAAA;AAFiD,CAApC,EAGL;AACR,QAAMC,UAAU,GAAGN,OAAO,CAAC,MAAO,sBAAqBE,GAAG,EAAG,EAAnC,EAAsC,EAAtC,CAA1B;AACA,QAAM;AAAEK,IAAAA,KAAF;AAASC,IAAAA,OAAT;AAAkBC,IAAAA;AAAlB,MAA6BR,2BAA2B,EAA9D;AAEA,QAAMS,OAAO,GAAGV,OAAO,CAAC,MAAM;AAC5B,wBAAO,oBAAC,QAAD;AAAU,MAAA,GAAG,EAAEM;AAAf,OAA4BF,QAA5B,CAAP;AACD,GAFsB,EAEpB,CAACA,QAAD,EAAWC,cAAX,CAFoB,CAAvB;AAIAN,EAAAA,SAAS,CAAC,MAAM;AACdQ,IAAAA,KAAK,CAACD,UAAD,EAAaI,OAAb,CAAL;AAEA,WAAO,MAAM;AACXF,MAAAA,OAAO,CAACF,UAAD,CAAP;AACD,KAFD;AAGD,GANQ,EAMN,CAACA,UAAD,CANM,CAAT;AAQAP,EAAAA,SAAS,CAAC,MAAM;AACdU,IAAAA,MAAM,CAACH,UAAD,EAAaI,OAAb,CAAN;AACD,GAFQ,EAEN,CAACA,OAAD,CAFM,CAAT;AAIA,SAAO,IAAP;AACD","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport React, { Fragment, ReactNode, useEffect, useMemo } from 'react';\nimport useCollapsibleHeaderContext from '../../hooks/useCollapsibleHeaderContext';\n\ntype Props = {\n children: ReactNode;\n containerStyle?: StyleProp<ViewStyle>;\n};\n\nlet key = 0;\n\nexport default function CollapsibleHeaderContainer({\n children,\n containerStyle,\n}: Props) {\n const contentKey = useMemo(() => `collapsible-header-${key++}`, []);\n const { mount, unmount, update } = useCollapsibleHeaderContext();\n\n const content = useMemo(() => {\n return <Fragment key={contentKey}>{children}</Fragment>;\n }, [children, containerStyle]);\n\n useEffect(() => {\n mount(contentKey, content);\n\n return () => {\n unmount(contentKey);\n };\n }, [contentKey]);\n\n useEffect(() => {\n update(contentKey, content);\n }, [content]);\n\n return null;\n}\n"]}
|
|
@@ -4,26 +4,23 @@ 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 CollapsibleHeaderConsumer from '../header/CollapsibleHeaderConsumer';
|
|
12
10
|
const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
|
|
13
11
|
export default function CollapsibleFlatList({
|
|
14
12
|
headerSnappable = true,
|
|
15
13
|
...props
|
|
16
14
|
}) {
|
|
17
|
-
const {
|
|
18
|
-
headerHeight,
|
|
19
|
-
scrollY
|
|
20
|
-
} = useCollapsibleContext();
|
|
21
15
|
const {
|
|
22
16
|
contentMinHeight,
|
|
23
|
-
scrollViewRef
|
|
17
|
+
scrollViewRef,
|
|
18
|
+
fixedHeaderHeight
|
|
24
19
|
} = useInternalCollapsibleContext();
|
|
25
20
|
const mounted = useRef(true);
|
|
26
21
|
const contentHeight = useRef(0);
|
|
22
|
+
const [internalContentMinHeight, setInternalContentMinHeight] = useState(contentMinHeight.value);
|
|
23
|
+
const [internalProgressViewOffset, setInternalProgressViewOffset] = useState(0);
|
|
27
24
|
useEffect(() => {
|
|
28
25
|
return () => {
|
|
29
26
|
mounted.current = false;
|
|
@@ -42,11 +39,6 @@ export default function CollapsibleFlatList({
|
|
|
42
39
|
|
|
43
40
|
(_scrollViewRef$curren2 = scrollViewRef.current) === null || _scrollViewRef$curren2 === void 0 ? void 0 : _scrollViewRef$curren2.scrollToIndex(params);
|
|
44
41
|
}, []);
|
|
45
|
-
const handleInternalContentHeight = useCallback(value => {
|
|
46
|
-
if (mounted.current) {
|
|
47
|
-
setInternalContentMinHeight(value);
|
|
48
|
-
}
|
|
49
|
-
}, []);
|
|
50
42
|
const {
|
|
51
43
|
scrollHandler
|
|
52
44
|
} = useAnimatedScroll({
|
|
@@ -54,16 +46,32 @@ export default function CollapsibleFlatList({
|
|
|
54
46
|
scrollTo,
|
|
55
47
|
scrollToIndex
|
|
56
48
|
});
|
|
57
|
-
const
|
|
49
|
+
const handleInternalContentHeight = useCallback(value => {
|
|
50
|
+
if (mounted.current) {
|
|
51
|
+
setInternalContentMinHeight(value);
|
|
52
|
+
}
|
|
53
|
+
}, []);
|
|
54
|
+
const handleInternalProgressViewOffset = useCallback(value => {
|
|
55
|
+
if (mounted.current) {
|
|
56
|
+
setInternalProgressViewOffset(value);
|
|
57
|
+
}
|
|
58
|
+
}, []);
|
|
58
59
|
useAnimatedReaction(() => {
|
|
59
60
|
return contentMinHeight.value;
|
|
60
61
|
}, (result, previous) => {
|
|
61
62
|
if (result !== previous) {
|
|
62
|
-
if (contentHeight.current <
|
|
63
|
-
runOnJS(handleInternalContentHeight)(
|
|
63
|
+
if (contentHeight.current < result && internalContentMinHeight !== result) {
|
|
64
|
+
runOnJS(handleInternalContentHeight)(result);
|
|
64
65
|
}
|
|
65
66
|
}
|
|
66
67
|
});
|
|
68
|
+
useAnimatedReaction(() => {
|
|
69
|
+
return fixedHeaderHeight.value;
|
|
70
|
+
}, (result, previous) => {
|
|
71
|
+
if (result !== previous) {
|
|
72
|
+
runOnJS(handleInternalProgressViewOffset)(result);
|
|
73
|
+
}
|
|
74
|
+
});
|
|
67
75
|
const contentContainerStyle = useMemo(() => [styles.contentContainer, {
|
|
68
76
|
minHeight: internalContentMinHeight
|
|
69
77
|
}, props.contentContainerStyle], [props.contentContainerStyle, internalContentMinHeight]);
|
|
@@ -72,15 +80,13 @@ export default function CollapsibleFlatList({
|
|
|
72
80
|
}, []);
|
|
73
81
|
const handleScrollToIndexFailed = useCallback(() => {}, []);
|
|
74
82
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
}
|
|
83
|
+
function renderListHeader() {
|
|
84
|
+
return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(CollapsibleHeaderConsumer, null), props.ListHeaderComponent);
|
|
85
|
+
}
|
|
78
86
|
|
|
79
|
-
return /*#__PURE__*/React.createElement(
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
ref: scrollViewRef,
|
|
83
|
-
bounces: false,
|
|
87
|
+
return /*#__PURE__*/React.createElement(AnimatedFlatList, _extends({
|
|
88
|
+
ref: scrollViewRef // bounces={false}
|
|
89
|
+
,
|
|
84
90
|
keyboardDismissMode: "on-drag",
|
|
85
91
|
keyboardShouldPersistTaps: "handled",
|
|
86
92
|
scrollEventThrottle: 1,
|
|
@@ -92,8 +98,10 @@ export default function CollapsibleFlatList({
|
|
|
92
98
|
ListHeaderComponent: renderListHeader(),
|
|
93
99
|
onContentSizeChange: handleContentSizeChange //@ts-ignore
|
|
94
100
|
,
|
|
95
|
-
simultaneousHandlers: []
|
|
96
|
-
|
|
101
|
+
simultaneousHandlers: [],
|
|
102
|
+
stickyHeaderIndices: [0],
|
|
103
|
+
progressViewOffset: internalProgressViewOffset
|
|
104
|
+
}));
|
|
97
105
|
}
|
|
98
106
|
const styles = StyleSheet.create({
|
|
99
107
|
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","CollapsibleHeaderConsumer","AnimatedFlatList","createAnimatedComponent","CollapsibleFlatList","headerSnappable","props","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":"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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 CollapsibleHeaderConsumer from '../header/CollapsibleHeaderConsumer';\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 { 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 <CollapsibleHeaderConsumer />\n {props.ListHeaderComponent}\n </View>\n );\n }\n\n return (\n <AnimatedFlatList\n ref={scrollViewRef}\n // bounces={false}\n keyboardDismissMode=\"on-drag\"\n keyboardShouldPersistTaps=\"handled\"\n scrollEventThrottle={1}\n onScrollToIndexFailed={handleScrollToIndexFailed}\n {...props}\n style={[styles.container, props.style]}\n contentContainerStyle={contentContainerStyle}\n onScroll={scrollHandler}\n ListHeaderComponent={renderListHeader()}\n onContentSizeChange={handleContentSizeChange}\n //@ts-ignore\n simultaneousHandlers={[]}\n stickyHeaderIndices={[0]}\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"]}
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
2
|
|
|
3
3
|
/* eslint-disable react-hooks/exhaustive-deps */
|
|
4
|
-
import AnimatedTopView from '../header/AnimatedTopView';
|
|
5
4
|
import useAnimatedScroll from './useAnimatedScroll';
|
|
6
5
|
import React, { useCallback, useMemo } from 'react';
|
|
7
6
|
import { StyleSheet } from 'react-native';
|
|
8
7
|
import Animated, { useAnimatedStyle } from 'react-native-reanimated';
|
|
9
|
-
import useCollapsibleContext from '../../hooks/useCollapsibleContext';
|
|
10
8
|
import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';
|
|
9
|
+
import CollapsibleHeaderConsumer from '../header/CollapsibleHeaderConsumer';
|
|
11
10
|
export default function CollapsibleScrollView({
|
|
12
11
|
headerSnappable = true,
|
|
13
12
|
children,
|
|
@@ -17,9 +16,6 @@ export default function CollapsibleScrollView({
|
|
|
17
16
|
contentMinHeight,
|
|
18
17
|
scrollViewRef
|
|
19
18
|
} = useInternalCollapsibleContext();
|
|
20
|
-
const {
|
|
21
|
-
headerHeight
|
|
22
|
-
} = useCollapsibleContext();
|
|
23
19
|
const scrollTo = useCallback((yValue, animated = true) => {
|
|
24
20
|
var _scrollViewRef$curren;
|
|
25
21
|
|
|
@@ -45,20 +41,18 @@ export default function CollapsibleScrollView({
|
|
|
45
41
|
}, []);
|
|
46
42
|
const contentContainerStyle = useMemo(() => [styles.contentContainer, props.contentContainerStyle], [props.contentContainerStyle]);
|
|
47
43
|
return /*#__PURE__*/React.createElement(Animated.ScrollView, _extends({
|
|
48
|
-
ref: scrollViewRef
|
|
49
|
-
bounces: false
|
|
44
|
+
ref: scrollViewRef
|
|
50
45
|
}, props, {
|
|
51
46
|
style: [styles.container, props.style],
|
|
52
47
|
contentContainerStyle: contentContainerStyle,
|
|
53
48
|
onScroll: scrollHandler,
|
|
54
49
|
keyboardDismissMode: "on-drag",
|
|
55
50
|
keyboardShouldPersistTaps: "handled",
|
|
56
|
-
scrollEventThrottle: 1
|
|
57
|
-
|
|
51
|
+
scrollEventThrottle: 1,
|
|
52
|
+
stickyHeaderIndices: [0]
|
|
53
|
+
}), /*#__PURE__*/React.createElement(CollapsibleHeaderConsumer, null), /*#__PURE__*/React.createElement(Animated.View, {
|
|
58
54
|
style: animatedStyle
|
|
59
|
-
},
|
|
60
|
-
height: headerHeight
|
|
61
|
-
}), children));
|
|
55
|
+
}, children));
|
|
62
56
|
}
|
|
63
57
|
const styles = StyleSheet.create({
|
|
64
58
|
container: { ...StyleSheet.absoluteFillObject
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["CollapsibleScrollView.tsx"],"names":["
|
|
1
|
+
{"version":3,"sources":["CollapsibleScrollView.tsx"],"names":["useAnimatedScroll","React","useCallback","useMemo","StyleSheet","Animated","useAnimatedStyle","useInternalCollapsibleContext","CollapsibleHeaderConsumer","CollapsibleScrollView","headerSnappable","children","props","contentMinHeight","scrollViewRef","scrollTo","yValue","animated","current","y","scrollToIndex","console","warn","scrollHandler","animatedStyle","minHeight","value","contentContainerStyle","styles","contentContainer","container","style","create","absoluteFillObject","flexGrow"],"mappings":";;AAAA;AACA,OAAOA,iBAAP,MAA8B,qBAA9B;AACA,OAAOC,KAAP,IAA2BC,WAA3B,EAAwCC,OAAxC,QAAuD,OAAvD;AACA,SAA0BC,UAA1B,QAA4C,cAA5C;AACA,OAAOC,QAAP,IAAmBC,gBAAnB,QAA2C,yBAA3C;AAEA,OAAOC,6BAAP,MAA0C,2CAA1C;AACA,OAAOC,yBAAP,MAAsC,qCAAtC;AAOA,eAAe,SAASC,qBAAT,CAA+B;AAC5CC,EAAAA,eAAe,GAAG,IAD0B;AAE5CC,EAAAA,QAF4C;AAG5C,KAAGC;AAHyC,CAA/B,EAIL;AACR,QAAM;AAAEC,IAAAA,gBAAF;AAAoBC,IAAAA;AAApB,MAAsCP,6BAA6B,EAAzE;AAEA,QAAMQ,QAAQ,GAAGb,WAAW,CAAC,CAACc,MAAD,EAAiBC,QAAQ,GAAG,IAA5B,KAAqC;AAAA;;AAChE,6BAAAH,aAAa,CAACI,OAAd,gFAAuBH,QAAvB,CAAgC;AAAEI,MAAAA,CAAC,EAAEH,MAAL;AAAaC,MAAAA;AAAb,KAAhC;AACD,GAF2B,EAEzB,EAFyB,CAA5B;AAIA,QAAMG,aAAa,GAAGlB,WAAW,CAAC,MAAM;AACtCmB,IAAAA,OAAO,CAACC,IAAR,CAAa,qDAAb;AACD,GAFgC,EAE9B,EAF8B,CAAjC;AAIA,QAAM;AAAEC,IAAAA;AAAF,MAAoBvB,iBAAiB,CAAC;AAC1CU,IAAAA,eAD0C;AAE1CK,IAAAA,QAF0C;AAG1CK,IAAAA;AAH0C,GAAD,CAA3C;AAMA,QAAMI,aAAa,GAAGlB,gBAAgB,CAAC,MAAM;AAC3C,WAAO;AACLmB,MAAAA,SAAS,EAAEZ,gBAAgB,CAACa;AADvB,KAAP;AAGD,GAJqC,EAInC,EAJmC,CAAtC;AAMA,QAAMC,qBAAqB,GAAGxB,OAAO,CACnC,MAAM,CAACyB,MAAM,CAACC,gBAAR,EAA0BjB,KAAK,CAACe,qBAAhC,CAD6B,EAEnC,CAACf,KAAK,CAACe,qBAAP,CAFmC,CAArC;AAKA,sBACE,oBAAC,QAAD,CAAU,UAAV;AACE,IAAA,GAAG,EAAEb;AADP,KAEMF,KAFN;AAGE,IAAA,KAAK,EAAE,CAACgB,MAAM,CAACE,SAAR,EAAmBlB,KAAK,CAACmB,KAAzB,CAHT;AAIE,IAAA,qBAAqB,EAAEJ,qBAJzB;AAKE,IAAA,QAAQ,EAAEJ,aALZ;AAME,IAAA,mBAAmB,EAAC,SANtB;AAOE,IAAA,yBAAyB,EAAC,SAP5B;AAQE,IAAA,mBAAmB,EAAE,CARvB;AASE,IAAA,mBAAmB,EAAE,CAAC,CAAD;AATvB,mBAWE,oBAAC,yBAAD,OAXF,eAYE,oBAAC,QAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAEC;AAAtB,KAAsCb,QAAtC,CAZF,CADF;AAgBD;AAED,MAAMiB,MAAM,GAAGxB,UAAU,CAAC4B,MAAX,CAAkB;AAC/BF,EAAAA,SAAS,EAAE,EACT,GAAG1B,UAAU,CAAC6B;AADL,GADoB;AAI/BJ,EAAAA,gBAAgB,EAAE;AAChBK,IAAAA,QAAQ,EAAE;AADM;AAJa,CAAlB,CAAf","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport useAnimatedScroll from './useAnimatedScroll';\nimport React, { ReactNode, useCallback, useMemo } from 'react';\nimport { ScrollViewProps, StyleSheet } from 'react-native';\nimport Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport type { CollapsibleProps } from '../../types';\nimport useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';\nimport CollapsibleHeaderConsumer from '../header/CollapsibleHeaderConsumer';\n\ntype Props = ScrollViewProps &\n CollapsibleProps & {\n children?: ReactNode;\n };\n\nexport default function CollapsibleScrollView({\n headerSnappable = true,\n children,\n ...props\n}: Props) {\n const { contentMinHeight, scrollViewRef } = useInternalCollapsibleContext();\n\n const scrollTo = useCallback((yValue: number, animated = true) => {\n scrollViewRef.current?.scrollTo({ y: yValue, animated });\n }, []);\n\n const scrollToIndex = useCallback(() => {\n console.warn(\"CollapsibleScrollView doesn't support scrollToIndex\");\n }, []);\n\n const { scrollHandler } = useAnimatedScroll({\n headerSnappable,\n scrollTo,\n scrollToIndex,\n });\n\n const animatedStyle = useAnimatedStyle(() => {\n return {\n minHeight: contentMinHeight.value,\n };\n }, []);\n\n const contentContainerStyle = useMemo(\n () => [styles.contentContainer, props.contentContainerStyle],\n [props.contentContainerStyle]\n );\n\n return (\n <Animated.ScrollView\n ref={scrollViewRef}\n {...props}\n style={[styles.container, props.style]}\n contentContainerStyle={contentContainerStyle}\n onScroll={scrollHandler}\n keyboardDismissMode=\"on-drag\"\n keyboardShouldPersistTaps=\"handled\"\n scrollEventThrottle={1}\n stickyHeaderIndices={[0]}\n >\n <CollapsibleHeaderConsumer />\n <Animated.View style={animatedStyle}>{children}</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"]}
|
package/lib/module/index.js
CHANGED
|
@@ -5,7 +5,6 @@ export { default as CollapsibleFlatList } from './components/scrollable/Collapsi
|
|
|
5
5
|
export { default as CollapsibleScrollView } from './components/scrollable/CollapsibleScrollView';
|
|
6
6
|
export { default as CollapsibleHeaderContainer } from './components/header/CollapsibleHeaderContainer';
|
|
7
7
|
export { default as StickyView } from './components/header/StickyView';
|
|
8
|
-
export { default as RefreshControl } from './components/pullToRefresh/RefreshControl';
|
|
9
8
|
export { default as CollapsibleView } from './components/CollapsibleView';
|
|
10
9
|
export * from './components/CollapsibleView';
|
|
11
10
|
//# sourceMappingURL=index.js.map
|
package/lib/module/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.tsx"],"names":["default","withCollapsibleContext","useCollapsibleContext","CollapsibleContainer","CollapsibleFlatList","CollapsibleScrollView","CollapsibleHeaderContainer","StickyView","
|
|
1
|
+
{"version":3,"sources":["index.tsx"],"names":["default","withCollapsibleContext","useCollapsibleContext","CollapsibleContainer","CollapsibleFlatList","CollapsibleScrollView","CollapsibleHeaderContainer","StickyView","CollapsibleView"],"mappings":"AAAA,SAASA,OAAO,IAAIC,sBAApB,QAAkD,0BAAlD;AACA,SAASD,OAAO,IAAIE,qBAApB,QAAiD,+BAAjD;AAEA,SAASF,OAAO,IAAIG,oBAApB,QAAgD,mCAAhD;AACA,SAASH,OAAO,IAAII,mBAApB,QAA+C,6CAA/C;AACA,SAASJ,OAAO,IAAIK,qBAApB,QAAiD,+CAAjD;AACA,SAASL,OAAO,IAAIM,0BAApB,QAAsD,gDAAtD;AACA,SAASN,OAAO,IAAIO,UAApB,QAAsC,gCAAtC;AACA,SAASP,OAAO,IAAIQ,eAApB,QAA2C,8BAA3C;AACA,cAAc,8BAAd","sourcesContent":["export { default as withCollapsibleContext } from './withCollapsibleContext';\nexport { default as useCollapsibleContext } from './hooks/useCollapsibleContext';\n\nexport { default as CollapsibleContainer } from './components/CollapsibleContainer';\nexport { default as CollapsibleFlatList } from './components/scrollable/CollapsibleFlatList';\nexport { default as CollapsibleScrollView } from './components/scrollable/CollapsibleScrollView';\nexport { default as CollapsibleHeaderContainer } from './components/header/CollapsibleHeaderContainer';\nexport { default as StickyView } from './components/header/StickyView';\nexport { default as CollapsibleView } from './components/CollapsibleView';\nexport * from './components/CollapsibleView';\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"]}
|
|
@@ -5,6 +5,5 @@ export { default as CollapsibleFlatList } from './components/scrollable/Collapsi
|
|
|
5
5
|
export { default as CollapsibleScrollView } from './components/scrollable/CollapsibleScrollView';
|
|
6
6
|
export { default as CollapsibleHeaderContainer } from './components/header/CollapsibleHeaderContainer';
|
|
7
7
|
export { default as StickyView } from './components/header/StickyView';
|
|
8
|
-
export { default as RefreshControl } from './components/pullToRefresh/RefreshControl';
|
|
9
8
|
export { default as CollapsibleView } from './components/CollapsibleView';
|
|
10
9
|
export * from './components/CollapsibleView';
|
package/package.json
CHANGED
|
@@ -11,7 +11,6 @@ import {
|
|
|
11
11
|
import useKeyboardShowEvent from '../hooks/useKeyboardShowEvent';
|
|
12
12
|
import useInternalCollapsibleContext from '../hooks/useInternalCollapsibleContext';
|
|
13
13
|
import useCollapsibleContext from '../hooks/useCollapsibleContext';
|
|
14
|
-
import CollapsibleHeaderConsumer from './header/CollapsibleHeaderConsumer';
|
|
15
14
|
|
|
16
15
|
type Props = Omit<ViewProps, 'ref' | 'onLayout'> & {
|
|
17
16
|
children: Element;
|
|
@@ -76,7 +75,6 @@ export default function CollapsibleContainer({
|
|
|
76
75
|
collapsable={false}
|
|
77
76
|
>
|
|
78
77
|
{children}
|
|
79
|
-
<CollapsibleHeaderConsumer />
|
|
80
78
|
</View>
|
|
81
79
|
</KeyboardAvoidingView>
|
|
82
80
|
);
|
|
@@ -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
|
+
[-1000, 0, -100000],
|
|
24
24
|
Animated.Extrapolate.CLAMP
|
|
25
25
|
),
|
|
26
26
|
[]
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* eslint-disable react-hooks/exhaustive-deps */
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
2
|
+
import type { StyleProp, ViewStyle } from 'react-native';
|
|
3
|
+
import React, { Fragment, ReactNode, useEffect, useMemo } from 'react';
|
|
4
4
|
import useCollapsibleHeaderContext from '../../hooks/useCollapsibleHeaderContext';
|
|
5
5
|
|
|
6
6
|
type Props = {
|
|
@@ -17,22 +17,8 @@ export default function CollapsibleHeaderContainer({
|
|
|
17
17
|
const contentKey = useMemo(() => `collapsible-header-${key++}`, []);
|
|
18
18
|
const { mount, unmount, update } = useCollapsibleHeaderContext();
|
|
19
19
|
|
|
20
|
-
const internalStyle = useMemo(() => {
|
|
21
|
-
return {
|
|
22
|
-
zIndex: 100000 - key,
|
|
23
|
-
};
|
|
24
|
-
}, []);
|
|
25
|
-
|
|
26
20
|
const content = useMemo(() => {
|
|
27
|
-
return
|
|
28
|
-
<View
|
|
29
|
-
key={contentKey}
|
|
30
|
-
style={[containerStyle, internalStyle]}
|
|
31
|
-
pointerEvents="box-none"
|
|
32
|
-
>
|
|
33
|
-
{children}
|
|
34
|
-
</View>
|
|
35
|
-
);
|
|
21
|
+
return <Fragment key={contentKey}>{children}</Fragment>;
|
|
36
22
|
}, [children, containerStyle]);
|
|
37
23
|
|
|
38
24
|
useEffect(() => {
|
|
@@ -11,12 +11,10 @@ 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 CollapsibleHeaderConsumer from '../header/CollapsibleHeaderConsumer';
|
|
20
18
|
|
|
21
19
|
const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
|
|
22
20
|
|
|
@@ -27,10 +25,15 @@ export default function CollapsibleFlatList<Data>({
|
|
|
27
25
|
headerSnappable = true,
|
|
28
26
|
...props
|
|
29
27
|
}: Props<Data>) {
|
|
30
|
-
const {
|
|
31
|
-
|
|
28
|
+
const { contentMinHeight, scrollViewRef, fixedHeaderHeight } =
|
|
29
|
+
useInternalCollapsibleContext();
|
|
32
30
|
const mounted = useRef(true);
|
|
33
31
|
const contentHeight = useRef(0);
|
|
32
|
+
const [internalContentMinHeight, setInternalContentMinHeight] = useState(
|
|
33
|
+
contentMinHeight.value
|
|
34
|
+
);
|
|
35
|
+
const [internalProgressViewOffset, setInternalProgressViewOffset] =
|
|
36
|
+
useState(0);
|
|
34
37
|
|
|
35
38
|
useEffect(() => {
|
|
36
39
|
return () => {
|
|
@@ -49,21 +52,23 @@ export default function CollapsibleFlatList<Data>({
|
|
|
49
52
|
scrollViewRef.current?.scrollToIndex(params);
|
|
50
53
|
}, []);
|
|
51
54
|
|
|
52
|
-
const handleInternalContentHeight = useCallback((value: number) => {
|
|
53
|
-
if (mounted.current) {
|
|
54
|
-
setInternalContentMinHeight(value);
|
|
55
|
-
}
|
|
56
|
-
}, []);
|
|
57
|
-
|
|
58
55
|
const { scrollHandler } = useAnimatedScroll({
|
|
59
56
|
headerSnappable,
|
|
60
57
|
scrollTo,
|
|
61
58
|
scrollToIndex,
|
|
62
59
|
});
|
|
63
60
|
|
|
64
|
-
const
|
|
65
|
-
|
|
66
|
-
|
|
61
|
+
const handleInternalContentHeight = useCallback((value: number) => {
|
|
62
|
+
if (mounted.current) {
|
|
63
|
+
setInternalContentMinHeight(value);
|
|
64
|
+
}
|
|
65
|
+
}, []);
|
|
66
|
+
|
|
67
|
+
const handleInternalProgressViewOffset = useCallback((value: number) => {
|
|
68
|
+
if (mounted.current) {
|
|
69
|
+
setInternalProgressViewOffset(value);
|
|
70
|
+
}
|
|
71
|
+
}, []);
|
|
67
72
|
|
|
68
73
|
useAnimatedReaction(
|
|
69
74
|
() => {
|
|
@@ -72,15 +77,26 @@ export default function CollapsibleFlatList<Data>({
|
|
|
72
77
|
(result, previous) => {
|
|
73
78
|
if (result !== previous) {
|
|
74
79
|
if (
|
|
75
|
-
contentHeight.current <
|
|
76
|
-
internalContentMinHeight !==
|
|
80
|
+
contentHeight.current < result &&
|
|
81
|
+
internalContentMinHeight !== result
|
|
77
82
|
) {
|
|
78
|
-
runOnJS(handleInternalContentHeight)(
|
|
83
|
+
runOnJS(handleInternalContentHeight)(result);
|
|
79
84
|
}
|
|
80
85
|
}
|
|
81
86
|
}
|
|
82
87
|
);
|
|
83
88
|
|
|
89
|
+
useAnimatedReaction(
|
|
90
|
+
() => {
|
|
91
|
+
return fixedHeaderHeight.value;
|
|
92
|
+
},
|
|
93
|
+
(result, previous) => {
|
|
94
|
+
if (result !== previous) {
|
|
95
|
+
runOnJS(handleInternalProgressViewOffset)(result);
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
);
|
|
99
|
+
|
|
84
100
|
const contentContainerStyle = useMemo(
|
|
85
101
|
() => [
|
|
86
102
|
styles.contentContainer,
|
|
@@ -96,33 +112,34 @@ export default function CollapsibleFlatList<Data>({
|
|
|
96
112
|
|
|
97
113
|
const handleScrollToIndexFailed = useCallback(() => {}, []);
|
|
98
114
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
<
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
115
|
+
function renderListHeader() {
|
|
116
|
+
return (
|
|
117
|
+
<View>
|
|
118
|
+
<CollapsibleHeaderConsumer />
|
|
119
|
+
{props.ListHeaderComponent}
|
|
120
|
+
</View>
|
|
121
|
+
);
|
|
122
|
+
}
|
|
105
123
|
|
|
106
124
|
return (
|
|
107
|
-
<
|
|
108
|
-
{
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
</PullToRefreshContainer>
|
|
125
|
+
<AnimatedFlatList
|
|
126
|
+
ref={scrollViewRef}
|
|
127
|
+
// bounces={false}
|
|
128
|
+
keyboardDismissMode="on-drag"
|
|
129
|
+
keyboardShouldPersistTaps="handled"
|
|
130
|
+
scrollEventThrottle={1}
|
|
131
|
+
onScrollToIndexFailed={handleScrollToIndexFailed}
|
|
132
|
+
{...props}
|
|
133
|
+
style={[styles.container, props.style]}
|
|
134
|
+
contentContainerStyle={contentContainerStyle}
|
|
135
|
+
onScroll={scrollHandler}
|
|
136
|
+
ListHeaderComponent={renderListHeader()}
|
|
137
|
+
onContentSizeChange={handleContentSizeChange}
|
|
138
|
+
//@ts-ignore
|
|
139
|
+
simultaneousHandlers={[]}
|
|
140
|
+
stickyHeaderIndices={[0]}
|
|
141
|
+
progressViewOffset={internalProgressViewOffset}
|
|
142
|
+
/>
|
|
126
143
|
);
|
|
127
144
|
}
|
|
128
145
|
|