@r0b0t3d/react-native-collapsible 1.1.0 → 1.2.0-alpha.1
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 +49 -4
- package/lib/commonjs/components/CollapsibleContainer.js.map +1 -1
- package/lib/commonjs/components/{AnimatedTopView.js → header/AnimatedTopView.js} +0 -0
- package/lib/commonjs/components/{AnimatedTopView.js.map → header/AnimatedTopView.js.map} +0 -0
- package/lib/commonjs/components/{CollapsibleHeaderContainer.js → header/CollapsibleHeaderContainer.js} +9 -8
- package/lib/commonjs/components/header/CollapsibleHeaderContainer.js.map +1 -0
- package/lib/commonjs/components/{StickyView.js → header/StickyView.js} +4 -4
- package/lib/commonjs/components/header/StickyView.js.map +1 -0
- package/lib/commonjs/components/pullToRefresh/PullToRefreshContainer.js +75 -0
- package/lib/commonjs/components/pullToRefresh/PullToRefreshContainer.js.map +1 -0
- package/lib/commonjs/components/pullToRefresh/PullToRefreshProvider.js +35 -0
- package/lib/commonjs/components/pullToRefresh/PullToRefreshProvider.js.map +1 -0
- package/lib/commonjs/components/pullToRefresh/RefreshControl.js +73 -0
- package/lib/commonjs/components/pullToRefresh/RefreshControl.js.map +1 -0
- package/lib/commonjs/components/pullToRefresh/usePullToRefreshContext.js +24 -0
- package/lib/commonjs/components/pullToRefresh/usePullToRefreshContext.js.map +1 -0
- package/lib/commonjs/components/pullToRefresh/utils.js +59 -0
- package/lib/commonjs/components/pullToRefresh/utils.js.map +1 -0
- package/lib/commonjs/components/{CollapsibleFlatList.js → scrollable/CollapsibleFlatList.js} +28 -27
- package/lib/commonjs/components/scrollable/CollapsibleFlatList.js.map +1 -0
- package/lib/commonjs/components/{CollapsibleScrollView.js → scrollable/CollapsibleScrollView.js} +11 -12
- package/lib/commonjs/components/scrollable/CollapsibleScrollView.js.map +1 -0
- package/lib/commonjs/{hooks → components/scrollable}/useAnimatedScroll.js +3 -3
- package/lib/commonjs/{hooks → components/scrollable}/useAnimatedScroll.js.map +1 -1
- package/lib/commonjs/hooks/useInternalCollapsibleContext.js +1 -1
- package/lib/commonjs/hooks/useInternalCollapsibleContext.js.map +1 -1
- package/lib/commonjs/hooks/useKeyboardShowEvent.js +29 -0
- package/lib/commonjs/hooks/useKeyboardShowEvent.js.map +1 -0
- package/lib/commonjs/index.js +21 -12
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/{hooks/withCollapsibleContext.js → withCollapsibleContext.js} +10 -6
- package/lib/commonjs/withCollapsibleContext.js.map +1 -0
- package/lib/module/components/CollapsibleContainer.js +46 -5
- package/lib/module/components/CollapsibleContainer.js.map +1 -1
- package/lib/module/components/{AnimatedTopView.js → header/AnimatedTopView.js} +0 -0
- package/lib/module/components/{AnimatedTopView.js.map → header/AnimatedTopView.js.map} +0 -0
- package/lib/module/components/{CollapsibleHeaderContainer.js → header/CollapsibleHeaderContainer.js} +7 -6
- package/lib/module/components/header/CollapsibleHeaderContainer.js.map +1 -0
- package/lib/module/components/{StickyView.js → header/StickyView.js} +2 -2
- package/lib/module/components/header/StickyView.js.map +1 -0
- package/lib/module/components/pullToRefresh/PullToRefreshContainer.js +56 -0
- package/lib/module/components/pullToRefresh/PullToRefreshContainer.js.map +1 -0
- package/lib/module/components/pullToRefresh/PullToRefreshProvider.js +21 -0
- package/lib/module/components/pullToRefresh/PullToRefreshProvider.js.map +1 -0
- package/lib/module/components/pullToRefresh/RefreshControl.js +55 -0
- package/lib/module/components/pullToRefresh/RefreshControl.js.map +1 -0
- package/lib/module/components/pullToRefresh/usePullToRefreshContext.js +13 -0
- package/lib/module/components/pullToRefresh/usePullToRefreshContext.js.map +1 -0
- package/lib/module/components/pullToRefresh/utils.js +42 -0
- package/lib/module/components/pullToRefresh/utils.js.map +1 -0
- package/lib/module/components/{CollapsibleFlatList.js → scrollable/CollapsibleFlatList.js} +28 -27
- package/lib/module/components/scrollable/CollapsibleFlatList.js.map +1 -0
- package/lib/module/components/{CollapsibleScrollView.js → scrollable/CollapsibleScrollView.js} +12 -12
- package/lib/module/components/scrollable/CollapsibleScrollView.js.map +1 -0
- package/lib/module/{hooks → components/scrollable}/useAnimatedScroll.js +2 -2
- package/lib/module/{hooks → components/scrollable}/useAnimatedScroll.js.map +1 -1
- package/lib/module/hooks/useInternalCollapsibleContext.js +1 -1
- package/lib/module/hooks/useInternalCollapsibleContext.js.map +1 -1
- package/lib/module/hooks/useKeyboardShowEvent.js +19 -0
- package/lib/module/hooks/useKeyboardShowEvent.js.map +1 -0
- package/lib/module/index.js +6 -5
- package/lib/module/index.js.map +1 -1
- package/lib/module/{hooks/withCollapsibleContext.js → withCollapsibleContext.js} +7 -6
- package/lib/module/withCollapsibleContext.js.map +1 -0
- package/lib/typescript/components/CollapsibleContainer.d.ts +4 -2
- package/lib/typescript/components/{AnimatedTopView.d.ts → header/AnimatedTopView.d.ts} +0 -0
- package/lib/typescript/components/{CollapsibleHeaderContainer.d.ts → header/CollapsibleHeaderContainer.d.ts} +0 -0
- package/lib/typescript/components/{StickyView.d.ts → header/StickyView.d.ts} +0 -0
- package/lib/typescript/components/pullToRefresh/PullToRefreshContainer.d.ts +8 -0
- package/lib/typescript/components/pullToRefresh/PullToRefreshProvider.d.ts +6 -0
- package/lib/typescript/components/pullToRefresh/RefreshControl.d.ts +9 -0
- package/lib/typescript/components/pullToRefresh/usePullToRefreshContext.d.ts +4 -0
- package/lib/typescript/components/pullToRefresh/utils.d.ts +20 -0
- package/lib/typescript/components/{CollapsibleFlatList.d.ts → scrollable/CollapsibleFlatList.d.ts} +1 -1
- package/lib/typescript/components/{CollapsibleScrollView.d.ts → scrollable/CollapsibleScrollView.d.ts} +1 -1
- package/lib/typescript/{hooks → components/scrollable}/useAnimatedScroll.d.ts +0 -0
- package/lib/typescript/hooks/useInternalCollapsibleContext.d.ts +1 -1
- package/lib/typescript/hooks/useKeyboardShowEvent.d.ts +1 -0
- package/lib/typescript/index.d.ts +6 -5
- package/lib/typescript/types.d.ts +6 -0
- package/lib/typescript/{hooks/withCollapsibleContext.d.ts → withCollapsibleContext.d.ts} +0 -0
- package/package.json +4 -2
- package/src/components/CollapsibleContainer.tsx +64 -11
- package/src/components/{AnimatedTopView.tsx → header/AnimatedTopView.tsx} +0 -0
- package/src/components/{CollapsibleHeaderContainer.tsx → header/CollapsibleHeaderContainer.tsx} +6 -4
- package/src/components/{StickyView.tsx → header/StickyView.tsx} +2 -2
- package/src/components/pullToRefresh/PullToRefreshContainer.tsx +65 -0
- package/src/components/pullToRefresh/PullToRefreshProvider.tsx +27 -0
- package/src/components/pullToRefresh/RefreshControl.tsx +80 -0
- package/src/components/pullToRefresh/usePullToRefreshContext.ts +13 -0
- package/src/components/pullToRefresh/utils.ts +49 -0
- package/src/components/{CollapsibleFlatList.tsx → scrollable/CollapsibleFlatList.tsx} +27 -24
- package/src/components/{CollapsibleScrollView.tsx → scrollable/CollapsibleScrollView.tsx} +11 -12
- package/src/{hooks → components/scrollable}/useAnimatedScroll.ts +2 -2
- package/src/hooks/useInternalCollapsibleContext.ts +1 -1
- package/src/hooks/useKeyboardShowEvent.ts +22 -0
- package/src/index.tsx +6 -5
- package/src/types.ts +7 -0
- package/src/{hooks/withCollapsibleContext.tsx → withCollapsibleContext.tsx} +10 -7
- package/lib/commonjs/components/CollapsibleFlatList.js.map +0 -1
- package/lib/commonjs/components/CollapsibleHeaderContainer.js.map +0 -1
- package/lib/commonjs/components/CollapsibleScrollView.js.map +0 -1
- package/lib/commonjs/components/StickyView.js.map +0 -1
- package/lib/commonjs/hooks/withCollapsibleContext.js.map +0 -1
- package/lib/module/components/CollapsibleFlatList.js.map +0 -1
- package/lib/module/components/CollapsibleHeaderContainer.js.map +0 -1
- package/lib/module/components/CollapsibleScrollView.js.map +0 -1
- package/lib/module/components/StickyView.js.map +0 -1
- package/lib/module/hooks/withCollapsibleContext.js.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["CollapsibleFlatList.tsx"],"names":["AnimatedFlatList","Animated","createAnimatedComponent","FlatList","CollapsibleFlatList","headerSnappable","props","headerHeight","scrollY","contentMinHeight","scrollViewRef","mounted","contentHeight","current","scrollTo","yValue","animated","scrollToOffset","offset","handleInternalContentHeight","value","setInternalContentMinHeight","scrollHandler","internalContentMinHeight","result","previous","contentContainerStyle","styles","contentContainer","minHeight","handleContentSizeChange","_","height","renderListHeader","ListHeaderComponent","container","style","StyleSheet","create","absoluteFillObject","flexGrow","topView","position","top","left","right"],"mappings":"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","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport React, {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { FlatListProps, View, StyleSheet, FlatList } from 'react-native';\nimport Animated, {\n runOnJS,\n useAnimatedReaction,\n} from 'react-native-reanimated';\nimport AnimatedTopView from '../header/AnimatedTopView';\nimport useAnimatedScroll from './useAnimatedScroll';\nimport useCollapsibleContext from '../../hooks/useCollapsibleContext';\nimport useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';\nimport type { CollapsibleProps } from '../../types';\nimport PullToRefreshContainer from '../pullToRefresh/PullToRefreshContainer';\n\nconst AnimatedFlatList = Animated.createAnimatedComponent(FlatList);\n\ntype Props<Data> = Omit<FlatListProps<Data>, 'scrollEnabled'> &\n CollapsibleProps;\n\nexport default function CollapsibleFlatList<Data>({\n headerSnappable = true,\n ...props\n}: Props<Data>) {\n const { headerHeight, scrollY } = useCollapsibleContext();\n const { contentMinHeight, scrollViewRef } = useInternalCollapsibleContext();\n const mounted = useRef(true);\n const contentHeight = useRef(0);\n\n useEffect(() => {\n return () => {\n mounted.current = false;\n };\n }, []);\n\n const scrollTo = useCallback((yValue: number, animated = true) => {\n scrollViewRef.current?.scrollToOffset({\n offset: yValue,\n animated,\n });\n }, []);\n\n const handleInternalContentHeight = useCallback((value: number) => {\n if (mounted.current) {\n setInternalContentMinHeight(value);\n }\n }, []);\n\n const { scrollHandler } = useAnimatedScroll({\n headerSnappable,\n scrollTo,\n });\n\n const [internalContentMinHeight, setInternalContentMinHeight] = useState(\n contentMinHeight.value\n );\n\n useAnimatedReaction(\n () => {\n return contentMinHeight.value;\n },\n (result, previous) => {\n if (result !== previous) {\n if (\n contentHeight.current < contentMinHeight.value &&\n internalContentMinHeight !== contentMinHeight.value\n ) {\n runOnJS(handleInternalContentHeight)(contentMinHeight.value);\n }\n }\n }\n );\n\n const contentContainerStyle = useMemo(\n () => [\n styles.contentContainer,\n { minHeight: internalContentMinHeight },\n props.contentContainerStyle,\n ],\n [props.contentContainerStyle, internalContentMinHeight]\n );\n\n const handleContentSizeChange = useCallback((_, height) => {\n contentHeight.current = height;\n }, []);\n\n const renderListHeader = () => (\n <View>\n <AnimatedTopView height={headerHeight} />\n {props.ListHeaderComponent}\n </View>\n );\n\n return (\n <PullToRefreshContainer scrollY={scrollY}>\n {/* @ts-ignore */}\n <AnimatedFlatList\n ref={scrollViewRef}\n bounces={false}\n keyboardDismissMode=\"on-drag\"\n keyboardShouldPersistTaps=\"handled\"\n scrollEventThrottle={1}\n {...props}\n style={[styles.container, props.style]}\n contentContainerStyle={contentContainerStyle}\n onScroll={scrollHandler}\n ListHeaderComponent={renderListHeader()}\n onContentSizeChange={handleContentSizeChange}\n />\n </PullToRefreshContainer>\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n ...StyleSheet.absoluteFillObject,\n },\n contentContainer: {\n flexGrow: 1,\n },\n topView: {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n },\n});\n"]}
|
package/lib/commonjs/components/{CollapsibleScrollView.js → scrollable/CollapsibleScrollView.js}
RENAMED
|
@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = CollapsibleScrollView;
|
|
7
7
|
|
|
8
|
-
var _AnimatedTopView = _interopRequireDefault(require("
|
|
8
|
+
var _AnimatedTopView = _interopRequireDefault(require("../header/AnimatedTopView"));
|
|
9
9
|
|
|
10
|
-
var _useAnimatedScroll = _interopRequireDefault(require("
|
|
10
|
+
var _useAnimatedScroll = _interopRequireDefault(require("./useAnimatedScroll"));
|
|
11
11
|
|
|
12
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
13
13
|
|
|
@@ -15,9 +15,9 @@ var _reactNative = require("react-native");
|
|
|
15
15
|
|
|
16
16
|
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
|
|
17
17
|
|
|
18
|
-
var _useCollapsibleContext = _interopRequireDefault(require("
|
|
18
|
+
var _useCollapsibleContext = _interopRequireDefault(require("../../hooks/useCollapsibleContext"));
|
|
19
19
|
|
|
20
|
-
var _useInternalCollapsibleContext = require("
|
|
20
|
+
var _useInternalCollapsibleContext = _interopRequireDefault(require("../../hooks/useInternalCollapsibleContext"));
|
|
21
21
|
|
|
22
22
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
23
23
|
|
|
@@ -32,18 +32,17 @@ function CollapsibleScrollView({
|
|
|
32
32
|
children,
|
|
33
33
|
...props
|
|
34
34
|
}) {
|
|
35
|
-
const scrollView = (0, _react.useRef)(null);
|
|
36
35
|
const {
|
|
37
|
-
contentMinHeight
|
|
38
|
-
|
|
36
|
+
contentMinHeight,
|
|
37
|
+
scrollViewRef
|
|
38
|
+
} = (0, _useInternalCollapsibleContext.default)();
|
|
39
39
|
const {
|
|
40
40
|
headerHeight
|
|
41
41
|
} = (0, _useCollapsibleContext.default)();
|
|
42
42
|
const scrollTo = (0, _react.useCallback)((yValue, animated = true) => {
|
|
43
|
-
var
|
|
43
|
+
var _scrollViewRef$curren;
|
|
44
44
|
|
|
45
|
-
|
|
46
|
-
(_scrollView$current = scrollView.current) === null || _scrollView$current === void 0 ? void 0 : _scrollView$current.scrollTo({
|
|
45
|
+
(_scrollViewRef$curren = scrollViewRef.current) === null || _scrollViewRef$curren === void 0 ? void 0 : _scrollViewRef$curren.scrollTo({
|
|
47
46
|
y: yValue,
|
|
48
47
|
animated
|
|
49
48
|
});
|
|
@@ -61,7 +60,7 @@ function CollapsibleScrollView({
|
|
|
61
60
|
}, []);
|
|
62
61
|
const contentContainerStyle = (0, _react.useMemo)(() => [styles.contentContainer, props.contentContainerStyle], [props.contentContainerStyle]);
|
|
63
62
|
return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.ScrollView, _extends({
|
|
64
|
-
ref:
|
|
63
|
+
ref: scrollViewRef,
|
|
65
64
|
bounces: false
|
|
66
65
|
}, props, {
|
|
67
66
|
style: [styles.container, props.style],
|
|
@@ -69,7 +68,7 @@ function CollapsibleScrollView({
|
|
|
69
68
|
onScroll: scrollHandler,
|
|
70
69
|
keyboardDismissMode: "on-drag",
|
|
71
70
|
keyboardShouldPersistTaps: "handled",
|
|
72
|
-
scrollEventThrottle:
|
|
71
|
+
scrollEventThrottle: 1
|
|
73
72
|
}), /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
|
|
74
73
|
style: animatedStyle
|
|
75
74
|
}, /*#__PURE__*/_react.default.createElement(_AnimatedTopView.default, {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["CollapsibleScrollView.tsx"],"names":["CollapsibleScrollView","headerSnappable","children","props","contentMinHeight","scrollViewRef","headerHeight","scrollTo","yValue","animated","current","y","scrollHandler","animatedStyle","minHeight","value","contentContainerStyle","styles","contentContainer","container","style","StyleSheet","create","absoluteFillObject","flexGrow","topView","position","top","left","right"],"mappings":";;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;;;AAOe,SAASA,qBAAT,CAA+B;AAC5CC,EAAAA,eAAe,GAAG,IAD0B;AAE5CC,EAAAA,QAF4C;AAG5C,KAAGC;AAHyC,CAA/B,EAIL;AACR,QAAM;AAAEC,IAAAA,gBAAF;AAAoBC,IAAAA;AAApB,MAAsC,6CAA5C;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAmB,qCAAzB;AAEA,QAAMC,QAAQ,GAAG,wBAAY,CAACC,MAAD,EAAiBC,QAAQ,GAAG,IAA5B,KAAqC;AAAA;;AAChE,6BAAAJ,aAAa,CAACK,OAAd,gFAAuBH,QAAvB,CAAgC;AAAEI,MAAAA,CAAC,EAAEH,MAAL;AAAaC,MAAAA;AAAb,KAAhC;AACD,GAFgB,EAEd,EAFc,CAAjB;AAIA,QAAM;AAAEG,IAAAA;AAAF,MAAoB,gCAAkB;AAC1CX,IAAAA,eAD0C;AAE1CM,IAAAA;AAF0C,GAAlB,CAA1B;AAKA,QAAMM,aAAa,GAAG,6CAAiB,MAAM;AAC3C,WAAO;AACLC,MAAAA,SAAS,EAAEV,gBAAgB,CAACW;AADvB,KAAP;AAGD,GAJqB,EAInB,EAJmB,CAAtB;AAMA,QAAMC,qBAAqB,GAAG,oBAC5B,MAAM,CAACC,MAAM,CAACC,gBAAR,EAA0Bf,KAAK,CAACa,qBAAhC,CADsB,EAE5B,CAACb,KAAK,CAACa,qBAAP,CAF4B,CAA9B;AAKA,sBACE,6BAAC,8BAAD,CAAU,UAAV;AACE,IAAA,GAAG,EAAEX,aADP;AAEE,IAAA,OAAO,EAAE;AAFX,KAGMF,KAHN;AAIE,IAAA,KAAK,EAAE,CAACc,MAAM,CAACE,SAAR,EAAmBhB,KAAK,CAACiB,KAAzB,CAJT;AAKE,IAAA,qBAAqB,EAAEJ,qBALzB;AAME,IAAA,QAAQ,EAAEJ,aANZ;AAOE,IAAA,mBAAmB,EAAC,SAPtB;AAQE,IAAA,yBAAyB,EAAC,SAR5B;AASE,IAAA,mBAAmB,EAAE;AATvB,mBAWE,6BAAC,8BAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAEC;AAAtB,kBACE,6BAAC,wBAAD;AAAiB,IAAA,MAAM,EAAEP;AAAzB,IADF,EAEGJ,QAFH,CAXF,CADF;AAkBD;;AAED,MAAMe,MAAM,GAAGI,wBAAWC,MAAX,CAAkB;AAC/BH,EAAAA,SAAS,EAAE,EACT,GAAGE,wBAAWE;AADL,GADoB;AAI/BL,EAAAA,gBAAgB,EAAE;AAChBM,IAAAA,QAAQ,EAAE;AADM,GAJa;AAO/BC,EAAAA,OAAO,EAAE;AACPC,IAAAA,QAAQ,EAAE,UADH;AAEPC,IAAAA,GAAG,EAAE,CAFE;AAGPC,IAAAA,IAAI,EAAE,CAHC;AAIPC,IAAAA,KAAK,EAAE;AAJA;AAPsB,CAAlB,CAAf","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport AnimatedTopView from '../header/AnimatedTopView';\nimport useAnimatedScroll from './useAnimatedScroll';\nimport React, { ReactNode, useCallback, useMemo } from 'react';\nimport { ScrollViewProps, StyleSheet } from 'react-native';\nimport Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport type { CollapsibleProps } from '../../types';\nimport useCollapsibleContext from '../../hooks/useCollapsibleContext';\nimport useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';\n\ntype Props = ScrollViewProps &\n CollapsibleProps & {\n children?: ReactNode;\n };\n\nexport default function CollapsibleScrollView({\n headerSnappable = true,\n children,\n ...props\n}: Props) {\n const { contentMinHeight, scrollViewRef } = useInternalCollapsibleContext();\n const { headerHeight } = useCollapsibleContext();\n\n const scrollTo = useCallback((yValue: number, animated = true) => {\n scrollViewRef.current?.scrollTo({ y: yValue, animated });\n }, []);\n\n const { scrollHandler } = useAnimatedScroll({\n headerSnappable,\n scrollTo,\n });\n\n const animatedStyle = useAnimatedStyle(() => {\n return {\n minHeight: contentMinHeight.value,\n };\n }, []);\n\n const contentContainerStyle = useMemo(\n () => [styles.contentContainer, props.contentContainerStyle],\n [props.contentContainerStyle]\n );\n\n return (\n <Animated.ScrollView\n ref={scrollViewRef}\n bounces={false}\n {...props}\n style={[styles.container, props.style]}\n contentContainerStyle={contentContainerStyle}\n onScroll={scrollHandler}\n keyboardDismissMode=\"on-drag\"\n keyboardShouldPersistTaps=\"handled\"\n scrollEventThrottle={1}\n >\n <Animated.View style={animatedStyle}>\n <AnimatedTopView height={headerHeight} />\n {children}\n </Animated.View>\n </Animated.ScrollView>\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n ...StyleSheet.absoluteFillObject,\n },\n contentContainer: {\n flexGrow: 1,\n },\n topView: {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n },\n});\n"]}
|
|
@@ -11,9 +11,9 @@ var _reactNative = require("react-native");
|
|
|
11
11
|
|
|
12
12
|
var _reactNativeReanimated = require("react-native-reanimated");
|
|
13
13
|
|
|
14
|
-
var _useCollapsibleContext = _interopRequireDefault(require("
|
|
14
|
+
var _useCollapsibleContext = _interopRequireDefault(require("../../hooks/useCollapsibleContext"));
|
|
15
15
|
|
|
16
|
-
var _useInternalCollapsibleContext = require("
|
|
16
|
+
var _useInternalCollapsibleContext = _interopRequireDefault(require("../../hooks/useInternalCollapsibleContext"));
|
|
17
17
|
|
|
18
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
19
|
|
|
@@ -34,7 +34,7 @@ function useAnimatedScroll({
|
|
|
34
34
|
setCollapsibleHandlers,
|
|
35
35
|
firstStickyViewY,
|
|
36
36
|
fixedHeaderHeight
|
|
37
|
-
} = (0, _useInternalCollapsibleContext.
|
|
37
|
+
} = (0, _useInternalCollapsibleContext.default)();
|
|
38
38
|
(0, _react.useEffect)(() => {
|
|
39
39
|
if (scrollY.value > 0) {
|
|
40
40
|
requestAnimationFrame(() => scrollTo(scrollY.value, false));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAnimatedScroll.ts"],"names":["height","wHeight","Dimensions","get","useAnimatedScroll","headerSnappable","scrollTo","scrollDirection","scrollY","setCollapsibleHandlers","firstStickyViewY","fixedHeaderHeight","value","requestAnimationFrame","collapse","Math","min","expand","scrollHandler","onScroll","event","offset","contentOffset","y","diff","onEndDrag","maxY","delta","abs","yValue"],"mappings":";;;;;;;AACA;;AACA;;AACA;;AAKA;;AACA;;;;AATA;AAWA,MAAM;AAAEA,EAAAA,MAAM,EAAEC;AAAV,IAAsBC,wBAAWC,GAAX,CAAe,QAAf,CAA5B;;AAOe,SAASC,iBAAT,CAA2B;AACxCC,EAAAA,eADwC;AAExCC,EAAAA;AAFwC,CAA3B,EAGL;AACR,QAAMC,eAAe,GAAG,2CAAe,SAAf,CAAxB;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAc,qCAApB;AACA,QAAM;AAAEC,IAAAA,sBAAF;AAA0BC,IAAAA,gBAA1B;AAA4CC,IAAAA;AAA5C,MACJ,
|
|
1
|
+
{"version":3,"sources":["useAnimatedScroll.ts"],"names":["height","wHeight","Dimensions","get","useAnimatedScroll","headerSnappable","scrollTo","scrollDirection","scrollY","setCollapsibleHandlers","firstStickyViewY","fixedHeaderHeight","value","requestAnimationFrame","collapse","Math","min","expand","scrollHandler","onScroll","event","offset","contentOffset","y","diff","onEndDrag","maxY","delta","abs","yValue"],"mappings":";;;;;;;AACA;;AACA;;AACA;;AAKA;;AACA;;;;AATA;AAWA,MAAM;AAAEA,EAAAA,MAAM,EAAEC;AAAV,IAAsBC,wBAAWC,GAAX,CAAe,QAAf,CAA5B;;AAOe,SAASC,iBAAT,CAA2B;AACxCC,EAAAA,eADwC;AAExCC,EAAAA;AAFwC,CAA3B,EAGL;AACR,QAAMC,eAAe,GAAG,2CAAe,SAAf,CAAxB;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAc,qCAApB;AACA,QAAM;AAAEC,IAAAA,sBAAF;AAA0BC,IAAAA,gBAA1B;AAA4CC,IAAAA;AAA5C,MACJ,6CADF;AAGA,wBAAU,MAAM;AACd,QAAIH,OAAO,CAACI,KAAR,GAAgB,CAApB,EAAuB;AACrBC,MAAAA,qBAAqB,CAAC,MAAMP,QAAQ,CAACE,OAAO,CAACI,KAAT,EAAgB,KAAhB,CAAf,CAArB;AACD;AACF,GAJD,EAIG,EAJH;AAMA,QAAME,QAAQ,GAAG,wBAAY,MAAM;AACjCR,IAAAA,QAAQ,CACNS,IAAI,CAACC,GAAL,CAASL,iBAAiB,CAACC,KAAlB,IAA2B,CAApC,EAAuCF,gBAAgB,CAACE,KAAjB,IAA0B,CAAjE,CADM,CAAR;AAGD,GAJgB,EAId,CAACN,QAAD,CAJc,CAAjB;AAMA,QAAMW,MAAM,GAAG,wBAAY,MAAMX,QAAQ,CAAC,CAAD,CAA1B,EAA+B,CAACA,QAAD,CAA/B,CAAf;AAEA,wBAAU,MAAM;AACdG,IAAAA,sBAAsB,CAAC;AACrBK,MAAAA,QADqB;AAErBG,MAAAA,MAFqB;AAGrBX,MAAAA;AAHqB,KAAD,CAAtB;AAKD,GAND,EAMG,CAACG,sBAAD,EAAyBK,QAAzB,EAAmCG,MAAnC,EAA2CX,QAA3C,CANH;AAQA,QAAMY,aAAa,GAAG,qDACpB;AACEC,IAAAA,QAAQ,EAAGC,KAAD,IAAW;AACnB,YAAMC,MAAM,GAAGD,KAAK,CAACE,aAAN,CAAoBC,CAAnC;AACA,YAAMC,IAAI,GAAGhB,OAAO,CAACI,KAAR,GAAgBS,MAA7B;AACAd,MAAAA,eAAe,CAACK,KAAhB,GAAwBY,IAAI,GAAG,CAAP,GAAW,MAAX,GAAoBA,IAAI,GAAG,CAAP,GAAW,IAAX,GAAkB,SAA9D;AACAhB,MAAAA,OAAO,CAACI,KAAR,GAAgBS,MAAhB;AACD,KANH;AAOEI,IAAAA,SAAS,EAAE,MAAM;AACf,UAAI,CAACpB,eAAL,EAAsB;AACtB,YAAMqB,IAAI,GACRhB,gBAAgB,CAACE,KAAjB,IAA0BF,gBAAgB,CAACE,KAAjB,GAAyB,CAAnD,GACIF,gBAAgB,CAACE,KADrB,GAEID,iBAAiB,CAACC,KAAlB,IAA2B,CAHjC;;AAKA,UAAIJ,OAAO,CAACI,KAAR,GAAgBc,IAApB,EAA0B;AACxB,cAAMC,KAAK,GAAGZ,IAAI,CAACa,GAAL,CAASpB,OAAO,CAACI,KAAR,GAAgBc,IAAzB,CAAd;;AACA,YAAIC,KAAK,GAAG1B,OAAO,GAAG,CAAtB,EAAyB;AACvB,cAAI4B,MAAM,GAAG,CAAb;;AACA,cAAItB,eAAe,CAACK,KAAhB,KAA0B,IAA9B,EAAoC;AAClCiB,YAAAA,MAAM,GAAGH,IAAT;AACD;;AACD,8CAAQpB,QAAR,EAAkBuB,MAAlB;AACD;AACF;AACF;AAxBH,GADoB,EA2BpB,CAACvB,QAAD,CA3BoB,CAAtB;AA8BA,SAAO;AACLY,IAAAA,aADK;AAELJ,IAAAA,QAFK;AAGLG,IAAAA;AAHK,GAAP;AAKD","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport { useCallback, useEffect } from 'react';\nimport { Dimensions } from 'react-native';\nimport {\n runOnJS,\n useAnimatedScrollHandler,\n useSharedValue,\n} from 'react-native-reanimated';\nimport useCollapsibleContext from '../../hooks/useCollapsibleContext';\nimport useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';\n\nconst { height: wHeight } = Dimensions.get('window');\n\ntype Props = {\n headerSnappable: boolean;\n scrollTo: (yValue: number, animated?: boolean) => void;\n};\n\nexport default function useAnimatedScroll({\n headerSnappable,\n scrollTo,\n}: Props) {\n const scrollDirection = useSharedValue('unknown');\n const { scrollY } = useCollapsibleContext();\n const { setCollapsibleHandlers, firstStickyViewY, fixedHeaderHeight } =\n useInternalCollapsibleContext();\n\n useEffect(() => {\n if (scrollY.value > 0) {\n requestAnimationFrame(() => scrollTo(scrollY.value, false));\n }\n }, []);\n\n const collapse = useCallback(() => {\n scrollTo(\n Math.min(fixedHeaderHeight.value || 0, firstStickyViewY.value || 0)\n );\n }, [scrollTo]);\n\n const expand = useCallback(() => scrollTo(0), [scrollTo]);\n\n useEffect(() => {\n setCollapsibleHandlers({\n collapse,\n expand,\n scrollTo,\n });\n }, [setCollapsibleHandlers, collapse, expand, scrollTo]);\n\n const scrollHandler = useAnimatedScrollHandler(\n {\n onScroll: (event) => {\n const offset = event.contentOffset.y;\n const diff = scrollY.value - offset;\n scrollDirection.value = diff > 0 ? 'down' : diff < 0 ? 'up' : 'unknown';\n scrollY.value = offset;\n },\n onEndDrag: () => {\n if (!headerSnappable) return;\n const maxY =\n firstStickyViewY.value && firstStickyViewY.value > 0\n ? firstStickyViewY.value\n : fixedHeaderHeight.value || 0;\n\n if (scrollY.value < maxY) {\n const delta = Math.abs(scrollY.value - maxY);\n if (delta < wHeight / 2) {\n let yValue = 0;\n if (scrollDirection.value === 'up') {\n yValue = maxY;\n }\n runOnJS(scrollTo)(yValue);\n }\n }\n },\n },\n [scrollTo]\n );\n\n return {\n scrollHandler,\n collapse,\n expand,\n };\n}\n"]}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.default = useInternalCollapsibleContext;
|
|
7
7
|
exports.InternalCollapsibleContext = void 0;
|
|
8
8
|
|
|
9
9
|
var _react = require("react");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useInternalCollapsibleContext.ts"],"names":["InternalCollapsibleContext","useInternalCollapsibleContext","ctx","Error"],"mappings":";;;;;;;;AAAA;;AAGO,MAAMA,0BAA0B;AAAA;AACrC;AACA,2BAFK;;;
|
|
1
|
+
{"version":3,"sources":["useInternalCollapsibleContext.ts"],"names":["InternalCollapsibleContext","useInternalCollapsibleContext","ctx","Error"],"mappings":";;;;;;;;AAAA;;AAGO,MAAMA,0BAA0B;AAAA;AACrC;AACA,2BAFK;;;AAIQ,SAASC,6BAAT,GAAyC;AACtD,QAAMC,GAAG,GAAG,uBAAWF,0BAAX,CAAZ;;AACA,MAAI,CAACE,GAAL,EAAU;AACR,UAAM,IAAIC,KAAJ,CAAU,yDAAV,CAAN;AACD;;AACD,SAAOD,GAAP;AACD","sourcesContent":["import { createContext, useContext } from 'react';\nimport type { CollapsibleContextInternalType } from '../types';\n\nexport const InternalCollapsibleContext =\n // @ts-ignore\n createContext<CollapsibleContextInternalType>();\n\nexport default function useInternalCollapsibleContext() {\n const ctx = useContext(InternalCollapsibleContext);\n if (!ctx) {\n throw new Error('Component should be wrapped with withCollapsibleContext');\n }\n return ctx;\n}\n"]}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = useKeyboardShowEvent;
|
|
7
|
+
|
|
8
|
+
var _react = require("react");
|
|
9
|
+
|
|
10
|
+
var _reactNative = require("react-native");
|
|
11
|
+
|
|
12
|
+
function useKeyboardShowEvent(callback) {
|
|
13
|
+
const savedCallback = (0, _react.useRef)(callback);
|
|
14
|
+
(0, _react.useEffect)(() => {
|
|
15
|
+
savedCallback.current = callback;
|
|
16
|
+
}, [callback]);
|
|
17
|
+
(0, _react.useEffect)(() => {
|
|
18
|
+
const subscription = _reactNative.Keyboard.addListener('keyboardDidShow', () => {
|
|
19
|
+
if (savedCallback.current) {
|
|
20
|
+
savedCallback.current();
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
|
|
24
|
+
return () => {
|
|
25
|
+
subscription.remove();
|
|
26
|
+
};
|
|
27
|
+
}, []);
|
|
28
|
+
}
|
|
29
|
+
//# sourceMappingURL=useKeyboardShowEvent.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useKeyboardShowEvent.ts"],"names":["useKeyboardShowEvent","callback","savedCallback","current","subscription","Keyboard","addListener","remove"],"mappings":";;;;;;;AAAA;;AACA;;AAEe,SAASA,oBAAT,CAA8BC,QAA9B,EAAoD;AACjE,QAAMC,aAAa,GAAG,mBAAOD,QAAP,CAAtB;AAEA,wBAAU,MAAM;AACdC,IAAAA,aAAa,CAACC,OAAd,GAAwBF,QAAxB;AACD,GAFD,EAEG,CAACA,QAAD,CAFH;AAIA,wBAAU,MAAM;AACd,UAAMG,YAAY,GAAGC,sBAASC,WAAT,CAAqB,iBAArB,EAAwC,MAAM;AACjE,UAAIJ,aAAa,CAACC,OAAlB,EAA2B;AACzBD,QAAAA,aAAa,CAACC,OAAd;AACD;AACF,KAJoB,CAArB;;AAMA,WAAO,MAAM;AACXC,MAAAA,YAAY,CAACG,MAAb;AACD,KAFD;AAGD,GAVD,EAUG,EAVH;AAWD","sourcesContent":["import { useEffect, useRef } from 'react';\nimport { Keyboard } from 'react-native';\n\nexport default function useKeyboardShowEvent(callback: () => void) {\n const savedCallback = useRef(callback);\n\n useEffect(() => {\n savedCallback.current = callback;\n }, [callback]);\n\n useEffect(() => {\n const subscription = Keyboard.addListener('keyboardDidShow', () => {\n if (savedCallback.current) {\n savedCallback.current();\n }\n });\n\n return () => {\n subscription.remove();\n };\n }, []);\n}\n"]}
|
package/lib/commonjs/index.js
CHANGED
|
@@ -10,8 +10,9 @@ var _exportNames = {
|
|
|
10
10
|
CollapsibleFlatList: true,
|
|
11
11
|
CollapsibleScrollView: true,
|
|
12
12
|
CollapsibleHeaderContainer: true,
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
StickyView: true,
|
|
14
|
+
RefreshControl: true,
|
|
15
|
+
CollapsibleView: true
|
|
15
16
|
};
|
|
16
17
|
Object.defineProperty(exports, "withCollapsibleContext", {
|
|
17
18
|
enumerable: true,
|
|
@@ -49,30 +50,40 @@ Object.defineProperty(exports, "CollapsibleHeaderContainer", {
|
|
|
49
50
|
return _CollapsibleHeaderContainer.default;
|
|
50
51
|
}
|
|
51
52
|
});
|
|
52
|
-
Object.defineProperty(exports, "
|
|
53
|
+
Object.defineProperty(exports, "StickyView", {
|
|
53
54
|
enumerable: true,
|
|
54
55
|
get: function () {
|
|
55
|
-
return
|
|
56
|
+
return _StickyView.default;
|
|
56
57
|
}
|
|
57
58
|
});
|
|
58
|
-
Object.defineProperty(exports, "
|
|
59
|
+
Object.defineProperty(exports, "RefreshControl", {
|
|
59
60
|
enumerable: true,
|
|
60
61
|
get: function () {
|
|
61
|
-
return
|
|
62
|
+
return _RefreshControl.default;
|
|
63
|
+
}
|
|
64
|
+
});
|
|
65
|
+
Object.defineProperty(exports, "CollapsibleView", {
|
|
66
|
+
enumerable: true,
|
|
67
|
+
get: function () {
|
|
68
|
+
return _CollapsibleView.default;
|
|
62
69
|
}
|
|
63
70
|
});
|
|
64
71
|
|
|
65
|
-
var _withCollapsibleContext = _interopRequireDefault(require("./
|
|
72
|
+
var _withCollapsibleContext = _interopRequireDefault(require("./withCollapsibleContext"));
|
|
66
73
|
|
|
67
74
|
var _useCollapsibleContext = _interopRequireDefault(require("./hooks/useCollapsibleContext"));
|
|
68
75
|
|
|
69
76
|
var _CollapsibleContainer = _interopRequireDefault(require("./components/CollapsibleContainer"));
|
|
70
77
|
|
|
71
|
-
var _CollapsibleFlatList = _interopRequireDefault(require("./components/CollapsibleFlatList"));
|
|
78
|
+
var _CollapsibleFlatList = _interopRequireDefault(require("./components/scrollable/CollapsibleFlatList"));
|
|
72
79
|
|
|
73
|
-
var _CollapsibleScrollView = _interopRequireDefault(require("./components/CollapsibleScrollView"));
|
|
80
|
+
var _CollapsibleScrollView = _interopRequireDefault(require("./components/scrollable/CollapsibleScrollView"));
|
|
74
81
|
|
|
75
|
-
var _CollapsibleHeaderContainer = _interopRequireDefault(require("./components/CollapsibleHeaderContainer"));
|
|
82
|
+
var _CollapsibleHeaderContainer = _interopRequireDefault(require("./components/header/CollapsibleHeaderContainer"));
|
|
83
|
+
|
|
84
|
+
var _StickyView = _interopRequireDefault(require("./components/header/StickyView"));
|
|
85
|
+
|
|
86
|
+
var _RefreshControl = _interopRequireDefault(require("./components/pullToRefresh/RefreshControl"));
|
|
76
87
|
|
|
77
88
|
var _CollapsibleView = _interopRequireWildcard(require("./components/CollapsibleView"));
|
|
78
89
|
|
|
@@ -88,8 +99,6 @@ Object.keys(_CollapsibleView).forEach(function (key) {
|
|
|
88
99
|
});
|
|
89
100
|
});
|
|
90
101
|
|
|
91
|
-
var _StickyView = _interopRequireDefault(require("./components/StickyView"));
|
|
92
|
-
|
|
93
102
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
94
103
|
|
|
95
104
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","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 RefreshControl } from './components/pullToRefresh/RefreshControl';\nexport { default as CollapsibleView } from './components/CollapsibleView';\nexport * from './components/CollapsibleView';\n"]}
|
|
@@ -7,13 +7,17 @@ exports.default = withCollapsibleContext;
|
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
|
|
10
|
-
var _useCollapsibleContext = require("./useCollapsibleContext");
|
|
10
|
+
var _useCollapsibleContext = require("./hooks/useCollapsibleContext");
|
|
11
11
|
|
|
12
|
-
var _useInternalCollapsibleContext = require("./useInternalCollapsibleContext");
|
|
12
|
+
var _useInternalCollapsibleContext = require("./hooks/useInternalCollapsibleContext");
|
|
13
13
|
|
|
14
14
|
var _reactNativeReanimated = require("react-native-reanimated");
|
|
15
15
|
|
|
16
|
-
var _debounce = require("
|
|
16
|
+
var _debounce = require("./utils/debounce");
|
|
17
|
+
|
|
18
|
+
var _PullToRefreshProvider = _interopRequireDefault(require("./components/pullToRefresh/PullToRefreshProvider"));
|
|
19
|
+
|
|
20
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
21
|
|
|
18
22
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
19
23
|
|
|
@@ -37,6 +41,7 @@ function withCollapsibleContext(Component) {
|
|
|
37
41
|
const firstStickyViewY = (0, _reactNativeReanimated.useSharedValue)(1000000);
|
|
38
42
|
const headerContainersHeight = (0, _react.useRef)({});
|
|
39
43
|
const containerRef = (0, _react.useRef)(null);
|
|
44
|
+
const scrollViewRef = (0, _react.useRef)(null);
|
|
40
45
|
const setCollapsibleHandlers = (0, _react.useCallback)(handlers => {
|
|
41
46
|
collapsibleHandlers.current = handlers;
|
|
42
47
|
}, []);
|
|
@@ -63,7 +68,6 @@ function withCollapsibleContext(Component) {
|
|
|
63
68
|
const values = {};
|
|
64
69
|
|
|
65
70
|
for (let i = 0; i < sortedKeys.length; i++) {
|
|
66
|
-
console.log(sortedKeys[i], viewPositions[sortedKeys[i]]);
|
|
67
71
|
values[sortedKeys[i]] = totalTop; // Try minus 1 make it filled when scrolling up.
|
|
68
72
|
// Otherwise, we can see a small space between the persits views
|
|
69
73
|
|
|
@@ -90,7 +94,6 @@ function withCollapsibleContext(Component) {
|
|
|
90
94
|
stickyViewRefs.current[viewKey] = viewRef;
|
|
91
95
|
viewRef.current.measureLayout( // @ts-ignore
|
|
92
96
|
containerRef.current, (left, top, width, height) => {
|
|
93
|
-
console.log('refresh', viewKey);
|
|
94
97
|
stickyViewPositionsRef.current = { ...stickyViewPositionsRef.current,
|
|
95
98
|
[viewKey]: {
|
|
96
99
|
left,
|
|
@@ -159,6 +162,7 @@ function withCollapsibleContext(Component) {
|
|
|
159
162
|
};
|
|
160
163
|
}, [scrollY, headerHeight, headerCollapsed]);
|
|
161
164
|
const internalContext = (0, _react.useMemo)(() => ({
|
|
165
|
+
scrollViewRef,
|
|
162
166
|
containerRef,
|
|
163
167
|
handleStickyViewLayout,
|
|
164
168
|
handleHeaderContainerLayout,
|
|
@@ -174,7 +178,7 @@ function withCollapsibleContext(Component) {
|
|
|
174
178
|
value: context
|
|
175
179
|
}, /*#__PURE__*/_react.default.createElement(_useInternalCollapsibleContext.InternalCollapsibleContext.Provider, {
|
|
176
180
|
value: internalContext
|
|
177
|
-
}, /*#__PURE__*/_react.default.createElement(Component, props)));
|
|
181
|
+
}, /*#__PURE__*/_react.default.createElement(_PullToRefreshProvider.default, null, /*#__PURE__*/_react.default.createElement(Component, props))));
|
|
178
182
|
};
|
|
179
183
|
}
|
|
180
184
|
//# sourceMappingURL=withCollapsibleContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["withCollapsibleContext.tsx"],"names":["withCollapsibleContext","Component","props","collapsibleHandlers","headerHeight","scrollY","stickyViewRefs","stickyViewTops","stickyViewPositionsRef","stickyViewPositions","fixedHeaderHeight","stickyHeaderHeight","containerHeight","firstStickyViewY","headerContainersHeight","containerRef","scrollViewRef","setCollapsibleHandlers","handlers","current","headerCollapsed","maxY","value","contentMinHeight","totalHeight","Object","keys","reduce","acc","item","top","result","previous","viewPositions","sortedKeys","sort","a","b","totalTop","values","i","length","height","stickyHeader","key","data","isInsideHeader","handleStickyViewLayout","viewKey","viewRef","measureLayout","left","width","debounceRefreshStickyPositions","forEach","handleHeaderContainerLayout","duration","handleContainerHeight","context","collapse","expand","scrollTo","offset","animate","internalContext"],"mappings":"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","sourcesContent":["/* eslint-disable no-shadow */\n/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { FC, useCallback, useMemo, useRef } from 'react';\nimport type { CollapsibleHandles, LayoutParams } from './types';\nimport { CollapsibleContext } from './hooks/useCollapsibleContext';\nimport { InternalCollapsibleContext } from './hooks/useInternalCollapsibleContext';\nimport {\n useAnimatedReaction,\n useDerivedValue,\n useSharedValue,\n withTiming,\n} from 'react-native-reanimated';\nimport type { View } from 'react-native';\nimport { debounce } from './utils/debounce';\nimport PullToRefreshProvider from './components/pullToRefresh/PullToRefreshProvider';\n\nexport default function withCollapsibleContext<T>(Component: FC<T>) {\n return (props: T) => {\n const collapsibleHandlers = useRef<CollapsibleHandles>();\n const headerHeight = useSharedValue(0);\n const scrollY = useSharedValue(0);\n const stickyViewRefs = useRef<Record<string, React.RefObject<View>>>({});\n const stickyViewTops = useSharedValue<Record<string, number>>({});\n const stickyViewPositionsRef = useRef<Record<string, LayoutParams>>({});\n const stickyViewPositions = useSharedValue<Record<string, LayoutParams>>(\n {}\n );\n const fixedHeaderHeight = useSharedValue(0);\n const stickyHeaderHeight = useSharedValue(0);\n const containerHeight = useSharedValue(0);\n const firstStickyViewY = useSharedValue(1000000);\n const headerContainersHeight = useRef<Record<string, number>>({});\n const containerRef = useRef<View>(null);\n const scrollViewRef = useRef<View>(null);\n\n const setCollapsibleHandlers = useCallback((handlers) => {\n collapsibleHandlers.current = handlers;\n }, []);\n\n const headerCollapsed = useDerivedValue(() => {\n const maxY = fixedHeaderHeight.value - firstStickyViewY.value;\n return scrollY.value >= maxY;\n }, []);\n\n const contentMinHeight = useDerivedValue(() => {\n return (\n containerHeight.value +\n fixedHeaderHeight.value -\n stickyHeaderHeight.value\n );\n }, []);\n\n useAnimatedReaction(\n () => {\n const totalHeight = Object.keys(stickyViewPositions.value).reduce(\n (acc, item) => {\n return acc + stickyViewPositions.value[item].top;\n },\n 0\n );\n return totalHeight - fixedHeaderHeight.value;\n },\n (result, previous) => {\n if (result !== previous) {\n const viewPositions = stickyViewPositions.value;\n const headerHeight = fixedHeaderHeight.value;\n const sortedKeys = Object.keys(viewPositions).sort(\n (a, b) => viewPositions[a].top - viewPositions[b].top\n );\n let totalTop = 0;\n const values: any = {};\n for (let i = 0; i < sortedKeys.length; i++) {\n values[sortedKeys[i]] = totalTop;\n // Try minus 1 make it filled when scrolling up.\n // Otherwise, we can see a small space between the persits views\n totalTop += viewPositions[sortedKeys[i]].height - 1;\n }\n stickyViewTops.value = values;\n firstStickyViewY.value = viewPositions[sortedKeys[0]]?.top || 0;\n const stickyHeader = sortedKeys.reduce((acc, key) => {\n const data = viewPositions[key];\n const isInsideHeader = data.top < headerHeight;\n if (isInsideHeader) {\n return acc + data.height;\n }\n return acc;\n }, 0);\n stickyHeaderHeight.value = stickyHeader;\n }\n }\n );\n\n const handleStickyViewLayout = useCallback(\n (viewKey: string, viewRef?: React.RefObject<View>) => {\n if (viewRef && viewRef.current && containerRef.current) {\n stickyViewRefs.current[viewKey] = viewRef;\n viewRef.current.measureLayout(\n // @ts-ignore\n containerRef.current,\n (left, top, width, height) => {\n stickyViewPositionsRef.current = {\n ...stickyViewPositionsRef.current,\n [viewKey]: { left, top, width, height },\n };\n stickyViewPositions.value = stickyViewPositionsRef.current;\n },\n () => {}\n );\n } else {\n delete stickyViewRefs.current[viewKey];\n delete stickyViewPositionsRef.current[viewKey];\n stickyViewPositions.value = stickyViewPositionsRef.current;\n }\n },\n []\n );\n\n const debounceRefreshStickyPositions = useMemo(() => {\n return debounce(() => {\n Object.keys(stickyViewRefs.current).forEach((key) => {\n const viewRef = stickyViewRefs.current[key];\n if (viewRef) {\n handleStickyViewLayout(key, viewRef);\n }\n });\n }, 200);\n }, []);\n\n const handleHeaderContainerLayout = useCallback(\n (viewKey: string, height?: number) => {\n if (!height) {\n delete headerContainersHeight.current[viewKey];\n } else {\n headerContainersHeight.current[viewKey] = height;\n }\n const totalHeight = Object.keys(headerContainersHeight.current).reduce(\n (acc, key) => headerContainersHeight.current[key] + acc,\n 0\n );\n headerHeight.value = withTiming(totalHeight, {\n duration: fixedHeaderHeight.value === 0 ? 0 : 200,\n });\n fixedHeaderHeight.value = totalHeight;\n // Try refresh sticky positions\n debounceRefreshStickyPositions();\n },\n []\n );\n\n const handleContainerHeight = useCallback((height: number) => {\n containerHeight.value = height;\n }, []);\n\n const context = useMemo(() => {\n return {\n collapse: () => collapsibleHandlers.current?.collapse(),\n expand: () => collapsibleHandlers.current?.expand(),\n scrollTo: (offset: number, animate?: boolean) =>\n collapsibleHandlers.current?.scrollTo(offset, animate),\n headerHeight,\n scrollY,\n headerCollapsed,\n };\n }, [scrollY, headerHeight, headerCollapsed]);\n\n const internalContext = useMemo(\n () => ({\n scrollViewRef,\n containerRef,\n handleStickyViewLayout,\n handleHeaderContainerLayout,\n setCollapsibleHandlers,\n handleContainerHeight,\n firstStickyViewY,\n stickyViewTops,\n stickyViewPositions,\n fixedHeaderHeight,\n contentMinHeight,\n }),\n [\n setCollapsibleHandlers,\n handleStickyViewLayout,\n handleHeaderContainerLayout,\n handleContainerHeight,\n firstStickyViewY,\n stickyViewTops,\n stickyViewPositions,\n fixedHeaderHeight,\n contentMinHeight,\n ]\n );\n\n return (\n <CollapsibleContext.Provider value={context}>\n <InternalCollapsibleContext.Provider value={internalContext}>\n <PullToRefreshProvider>\n <Component {...props} />\n </PullToRefreshProvider>\n </InternalCollapsibleContext.Provider>\n </CollapsibleContext.Provider>\n );\n };\n}\n"]}
|
|
@@ -1,25 +1,66 @@
|
|
|
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
|
-
import React, { useCallback } from 'react';
|
|
4
|
-
import { StyleSheet, View } from 'react-native';
|
|
5
|
-
import
|
|
3
|
+
import React, { useCallback, useRef } from 'react';
|
|
4
|
+
import { KeyboardAvoidingView, StyleSheet, View } from 'react-native';
|
|
5
|
+
import useKeyboardShowEvent from '../hooks/useKeyboardShowEvent';
|
|
6
|
+
import useInternalCollapsibleContext from '../hooks/useInternalCollapsibleContext';
|
|
7
|
+
import useCollapsibleContext from '../hooks/useCollapsibleContext';
|
|
6
8
|
export default function CollapsibleContainer({
|
|
7
9
|
children,
|
|
10
|
+
keyboardAvoidingViewProps,
|
|
11
|
+
textInputRefs = [],
|
|
8
12
|
...props
|
|
9
13
|
}) {
|
|
10
14
|
const {
|
|
11
15
|
containerRef,
|
|
12
16
|
handleContainerHeight
|
|
13
17
|
} = useInternalCollapsibleContext();
|
|
18
|
+
const {
|
|
19
|
+
scrollY,
|
|
20
|
+
scrollTo
|
|
21
|
+
} = useCollapsibleContext();
|
|
22
|
+
const containerHeight = useRef(0);
|
|
23
|
+
useKeyboardShowEvent(() => {
|
|
24
|
+
textInputRefs.some(ref => {
|
|
25
|
+
const isFocusedFunc = ref.current.isFocused;
|
|
26
|
+
const isFocused = isFocusedFunc && typeof isFocusedFunc === 'function' ? isFocusedFunc() : isFocusedFunc;
|
|
27
|
+
|
|
28
|
+
if (isFocused) {
|
|
29
|
+
ref.current.measureLayout( // @ts-ignore
|
|
30
|
+
containerRef.current, (left, top, width, height) => {
|
|
31
|
+
console.log({
|
|
32
|
+
left,
|
|
33
|
+
top,
|
|
34
|
+
width,
|
|
35
|
+
height
|
|
36
|
+
});
|
|
37
|
+
|
|
38
|
+
if (top + height - scrollY.value > containerHeight.current) {
|
|
39
|
+
var _keyboardAvoidingView;
|
|
40
|
+
|
|
41
|
+
console.log('need to scroll');
|
|
42
|
+
const extraOffset = (_keyboardAvoidingView = keyboardAvoidingViewProps === null || keyboardAvoidingViewProps === void 0 ? void 0 : keyboardAvoidingViewProps.keyboardVerticalOffset) !== null && _keyboardAvoidingView !== void 0 ? _keyboardAvoidingView : 20;
|
|
43
|
+
scrollTo(top + height + extraOffset - containerHeight.current);
|
|
44
|
+
}
|
|
45
|
+
}, () => {});
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
return isFocused;
|
|
49
|
+
});
|
|
50
|
+
});
|
|
14
51
|
const handleContainerLayout = useCallback(layout => {
|
|
15
52
|
const height = layout.nativeEvent.layout.height;
|
|
53
|
+
containerHeight.current = height;
|
|
16
54
|
handleContainerHeight(height);
|
|
17
55
|
}, [handleContainerHeight]);
|
|
18
|
-
return /*#__PURE__*/React.createElement(
|
|
56
|
+
return /*#__PURE__*/React.createElement(KeyboardAvoidingView, _extends({
|
|
57
|
+
style: styles.container,
|
|
58
|
+
behavior: "padding"
|
|
59
|
+
}, keyboardAvoidingViewProps), /*#__PURE__*/React.createElement(View, _extends({}, props, {
|
|
19
60
|
ref: containerRef,
|
|
20
61
|
style: [styles.container, props.style],
|
|
21
62
|
onLayout: handleContainerLayout
|
|
22
|
-
}), children);
|
|
63
|
+
}), children));
|
|
23
64
|
}
|
|
24
65
|
const styles = StyleSheet.create({
|
|
25
66
|
container: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["CollapsibleContainer.tsx"],"names":["React","useCallback","StyleSheet","View","useInternalCollapsibleContext","CollapsibleContainer","children","props","containerRef","handleContainerHeight","
|
|
1
|
+
{"version":3,"sources":["CollapsibleContainer.tsx"],"names":["React","useCallback","useRef","KeyboardAvoidingView","StyleSheet","View","useKeyboardShowEvent","useInternalCollapsibleContext","useCollapsibleContext","CollapsibleContainer","children","keyboardAvoidingViewProps","textInputRefs","props","containerRef","handleContainerHeight","scrollY","scrollTo","containerHeight","some","ref","isFocusedFunc","current","isFocused","measureLayout","left","top","width","height","console","log","value","extraOffset","keyboardVerticalOffset","handleContainerLayout","layout","nativeEvent","styles","container","style","create","flex","overflow"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,WAAhB,EAA6BC,MAA7B,QAA2C,OAA3C;AACA,SACEC,oBADF,EAIEC,UAJF,EAKEC,IALF,QAOO,cAPP;AAQA,OAAOC,oBAAP,MAAiC,+BAAjC;AACA,OAAOC,6BAAP,MAA0C,wCAA1C;AACA,OAAOC,qBAAP,MAAkC,gCAAlC;AAQA,eAAe,SAASC,oBAAT,CAA8B;AAC3CC,EAAAA,QAD2C;AAE3CC,EAAAA,yBAF2C;AAG3CC,EAAAA,aAAa,GAAG,EAH2B;AAI3C,KAAGC;AAJwC,CAA9B,EAKL;AACR,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,MACJR,6BAA6B,EAD/B;AAEA,QAAM;AAAES,IAAAA,OAAF;AAAWC,IAAAA;AAAX,MAAwBT,qBAAqB,EAAnD;AAEA,QAAMU,eAAe,GAAGhB,MAAM,CAAC,CAAD,CAA9B;AAEAI,EAAAA,oBAAoB,CAAC,MAAM;AACzBM,IAAAA,aAAa,CAACO,IAAd,CAAoBC,GAAD,IAAS;AAC1B,YAAMC,aAAa,GAAGD,GAAG,CAACE,OAAJ,CAAYC,SAAlC;AACA,YAAMA,SAAS,GACbF,aAAa,IAAI,OAAOA,aAAP,KAAyB,UAA1C,GACIA,aAAa,EADjB,GAEIA,aAHN;;AAIA,UAAIE,SAAJ,EAAe;AACbH,QAAAA,GAAG,CAACE,OAAJ,CAAYE,aAAZ,EACE;AACAV,QAAAA,YAAY,CAACQ,OAFf,EAGE,CAACG,IAAD,EAAeC,GAAf,EAA4BC,KAA5B,EAA2CC,MAA3C,KAA8D;AAC5DC,UAAAA,OAAO,CAACC,GAAR,CAAY;AAAEL,YAAAA,IAAF;AAAQC,YAAAA,GAAR;AAAaC,YAAAA,KAAb;AAAoBC,YAAAA;AAApB,WAAZ;;AACA,cAAIF,GAAG,GAAGE,MAAN,GAAeZ,OAAO,CAACe,KAAvB,GAA+Bb,eAAe,CAACI,OAAnD,EAA4D;AAAA;;AAC1DO,YAAAA,OAAO,CAACC,GAAR,CAAY,gBAAZ;AACA,kBAAME,WAAW,4BACfrB,yBADe,aACfA,yBADe,uBACfA,yBAAyB,CAAEsB,sBADZ,yEACsC,EADvD;AAEAhB,YAAAA,QAAQ,CAACS,GAAG,GAAGE,MAAN,GAAeI,WAAf,GAA6Bd,eAAe,CAACI,OAA9C,CAAR;AACD;AACF,SAXH,EAYE,MAAM,CAAE,CAZV;AAcD;;AACD,aAAOC,SAAP;AACD,KAvBD;AAwBD,GAzBmB,CAApB;AA2BA,QAAMW,qBAAqB,GAAGjC,WAAW,CACtCkC,MAAD,IAA+B;AAC7B,UAAMP,MAAM,GAAGO,MAAM,CAACC,WAAP,CAAmBD,MAAnB,CAA0BP,MAAzC;AACAV,IAAAA,eAAe,CAACI,OAAhB,GAA0BM,MAA1B;AACAb,IAAAA,qBAAqB,CAACa,MAAD,CAArB;AACD,GALsC,EAMvC,CAACb,qBAAD,CANuC,CAAzC;AASA,sBACE,oBAAC,oBAAD;AACE,IAAA,KAAK,EAAEsB,MAAM,CAACC,SADhB;AAEE,IAAA,QAAQ,EAAC;AAFX,KAGM3B,yBAHN,gBAKE,oBAAC,IAAD,eACME,KADN;AAEE,IAAA,GAAG,EAAEC,YAFP;AAGE,IAAA,KAAK,EAAE,CAACuB,MAAM,CAACC,SAAR,EAAmBzB,KAAK,CAAC0B,KAAzB,CAHT;AAIE,IAAA,QAAQ,EAAEL;AAJZ,MAMGxB,QANH,CALF,CADF;AAgBD;AAED,MAAM2B,MAAM,GAAGjC,UAAU,CAACoC,MAAX,CAAkB;AAC/BF,EAAAA,SAAS,EAAE;AACTG,IAAAA,IAAI,EAAE,CADG;AAETC,IAAAA,QAAQ,EAAE;AAFD;AADoB,CAAlB,CAAf","sourcesContent":["import React, { useCallback, useRef } from 'react';\nimport {\n KeyboardAvoidingView,\n KeyboardAvoidingViewProps,\n LayoutChangeEvent,\n StyleSheet,\n View,\n ViewProps,\n} from 'react-native';\nimport useKeyboardShowEvent from '../hooks/useKeyboardShowEvent';\nimport useInternalCollapsibleContext from '../hooks/useInternalCollapsibleContext';\nimport useCollapsibleContext from '../hooks/useCollapsibleContext';\n\ntype Props = Omit<ViewProps, 'ref' | 'onLayout'> & {\n children: Element;\n keyboardAvoidingViewProps?: KeyboardAvoidingViewProps;\n textInputRefs?: any[];\n};\n\nexport default function CollapsibleContainer({\n children,\n keyboardAvoidingViewProps,\n textInputRefs = [],\n ...props\n}: Props) {\n const { containerRef, handleContainerHeight } =\n useInternalCollapsibleContext();\n const { scrollY, scrollTo } = useCollapsibleContext();\n\n const containerHeight = useRef(0);\n\n useKeyboardShowEvent(() => {\n textInputRefs.some((ref) => {\n const isFocusedFunc = ref.current.isFocused;\n const isFocused =\n isFocusedFunc && typeof isFocusedFunc === 'function'\n ? isFocusedFunc()\n : isFocusedFunc;\n if (isFocused) {\n ref.current.measureLayout(\n // @ts-ignore\n containerRef.current,\n (left: number, top: number, width: number, height: number) => {\n console.log({ left, top, width, height });\n if (top + height - scrollY.value > containerHeight.current) {\n console.log('need to scroll');\n const extraOffset =\n keyboardAvoidingViewProps?.keyboardVerticalOffset ?? 20;\n scrollTo(top + height + extraOffset - containerHeight.current);\n }\n },\n () => {}\n );\n }\n return isFocused;\n });\n });\n\n const handleContainerLayout = useCallback(\n (layout: LayoutChangeEvent) => {\n const height = layout.nativeEvent.layout.height;\n containerHeight.current = height;\n handleContainerHeight(height);\n },\n [handleContainerHeight]\n );\n\n return (\n <KeyboardAvoidingView\n style={styles.container}\n behavior=\"padding\"\n {...keyboardAvoidingViewProps}\n >\n <View\n {...props}\n ref={containerRef}\n style={[styles.container, props.style]}\n onLayout={handleContainerLayout}\n >\n {children}\n </View>\n </KeyboardAvoidingView>\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n overflow: 'hidden',\n },\n});\n"]}
|
|
File without changes
|
|
File without changes
|
package/lib/module/components/{CollapsibleHeaderContainer.js → header/CollapsibleHeaderContainer.js}
RENAMED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/* eslint-disable react-hooks/exhaustive-deps */
|
|
2
|
-
import
|
|
2
|
+
import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';
|
|
3
3
|
import React, { useCallback, useEffect, useMemo } from 'react';
|
|
4
|
-
import { StyleSheet, View } from 'react-native';
|
|
4
|
+
import { Platform, StyleSheet, View } from 'react-native';
|
|
5
5
|
import Animated, { interpolate, useAnimatedStyle, useDerivedValue, useSharedValue, withTiming } from 'react-native-reanimated';
|
|
6
|
-
import useCollapsibleContext from '
|
|
6
|
+
import useCollapsibleContext from '../../hooks/useCollapsibleContext';
|
|
7
7
|
let key = 0;
|
|
8
8
|
export default function CollapsibleHeaderContainer({
|
|
9
9
|
children,
|
|
@@ -48,18 +48,19 @@ export default function CollapsibleHeaderContainer({
|
|
|
48
48
|
};
|
|
49
49
|
}, []);
|
|
50
50
|
return /*#__PURE__*/React.createElement(Animated.View, {
|
|
51
|
-
style: [
|
|
51
|
+
style: [headerStyle, internalStyle],
|
|
52
52
|
pointerEvents: "box-none"
|
|
53
53
|
}, /*#__PURE__*/React.createElement(View, {
|
|
54
54
|
key: contentKey,
|
|
55
55
|
onLayout: handleHeaderLayout,
|
|
56
56
|
pointerEvents: "box-none",
|
|
57
|
-
style: containerStyle
|
|
57
|
+
style: [styles.container, containerStyle]
|
|
58
58
|
}, children));
|
|
59
59
|
}
|
|
60
60
|
const styles = StyleSheet.create({
|
|
61
61
|
container: {
|
|
62
|
-
backgroundColor: 'white'
|
|
62
|
+
backgroundColor: 'white',
|
|
63
|
+
marginTop: Platform.OS === 'android' ? -1 : 0
|
|
63
64
|
}
|
|
64
65
|
});
|
|
65
66
|
//# sourceMappingURL=CollapsibleHeaderContainer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["CollapsibleHeaderContainer.tsx"],"names":["useInternalCollapsibleContext","React","useCallback","useEffect","useMemo","Platform","StyleSheet","View","Animated","interpolate","useAnimatedStyle","useDerivedValue","useSharedValue","withTiming","useCollapsibleContext","key","CollapsibleHeaderContainer","children","containerStyle","contentKey","scrollY","handleHeaderContainerLayout","headerHeight","undefined","handleHeaderLayout","nativeEvent","layout","height","value","duration","headerTranslate","Extrapolate","CLAMP","headerStyle","transform","translateY","minHeight","internalStyle","zIndex","styles","container","create","backgroundColor","marginTop","OS"],"mappings":"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","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';\nimport React, { ReactNode, useCallback, useEffect, useMemo } from 'react';\nimport {\n LayoutChangeEvent,\n Platform,\n StyleProp,\n StyleSheet,\n View,\n ViewStyle,\n} from 'react-native';\nimport Animated, {\n interpolate,\n useAnimatedStyle,\n useDerivedValue,\n useSharedValue,\n withTiming,\n} from 'react-native-reanimated';\nimport useCollapsibleContext from '../../hooks/useCollapsibleContext';\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 { scrollY } = useCollapsibleContext();\n const { handleHeaderContainerLayout } = useInternalCollapsibleContext();\n const headerHeight = useSharedValue(0);\n\n useEffect(() => {\n return () => handleHeaderContainerLayout(contentKey, undefined);\n }, []);\n\n const handleHeaderLayout = useCallback(\n ({\n nativeEvent: {\n layout: { height },\n },\n }: LayoutChangeEvent) => {\n headerHeight.value = withTiming(height, {\n duration: 200,\n });\n handleHeaderContainerLayout(contentKey, height);\n },\n [contentKey, handleHeaderContainerLayout]\n );\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 [-250, 0, 100000],\n [250, 0, -100000],\n Animated.Extrapolate.CLAMP\n ),\n []\n );\n\n const headerStyle = useAnimatedStyle(() => {\n return {\n transform: [{ translateY: headerTranslate.value }],\n minHeight: headerHeight.value,\n };\n }, [headerHeight, headerTranslate]);\n\n const internalStyle = useMemo(() => {\n return {\n zIndex: 100000 - key,\n };\n }, []);\n\n return (\n <Animated.View\n style={[headerStyle, internalStyle]}\n pointerEvents=\"box-none\"\n >\n <View\n key={contentKey}\n onLayout={handleHeaderLayout}\n pointerEvents=\"box-none\"\n style={[styles.container, containerStyle]}\n >\n {children}\n </View>\n </Animated.View>\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n backgroundColor: 'white',\n marginTop: Platform.OS === 'android' ? -1 : 0,\n },\n});\n"]}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/* eslint-disable react-hooks/exhaustive-deps */
|
|
2
|
-
import { useInternalCollapsibleContext } from '../hooks/useInternalCollapsibleContext';
|
|
3
2
|
import React, { useCallback, useEffect, useMemo, useRef } from 'react';
|
|
4
3
|
import { StyleSheet } from 'react-native';
|
|
5
|
-
import useCollapsibleContext from '
|
|
4
|
+
import useCollapsibleContext from '../../hooks/useCollapsibleContext';
|
|
5
|
+
import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';
|
|
6
6
|
import Animated, { Extrapolate, interpolate, useAnimatedStyle, useDerivedValue } from 'react-native-reanimated';
|
|
7
7
|
let stickyKey = 0;
|
|
8
8
|
export default function StickyView({
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["StickyView.tsx"],"names":["React","useCallback","useEffect","useMemo","useRef","StyleSheet","useCollapsibleContext","useInternalCollapsibleContext","Animated","Extrapolate","interpolate","useAnimatedStyle","useDerivedValue","stickyKey","StickyView","children","style","key","viewRef","handleStickyViewLayout","stickyViewTops","stickyViewPositions","scrollY","undefined","handleLayout","translateY","top","value","layoutValues","inputMid","CLAMP","animatedStyle","transform","styles","container","create","backgroundColor","zIndex"],"mappings":"AAAA;AACA,OAAOA,KAAP,IAAgBC,WAAhB,EAA6BC,SAA7B,EAAwCC,OAAxC,EAAiDC,MAAjD,QAA+D,OAA/D;AACA,SAAoBC,UAApB,QAAuD,cAAvD;AACA,OAAOC,qBAAP,MAAkC,mCAAlC;AACA,OAAOC,6BAAP,MAA0C,2CAA1C;AACA,OAAOC,QAAP,IACEC,WADF,EAEEC,WAFF,EAGEC,gBAHF,EAIEC,eAJF,QAKO,yBALP;AAYA,IAAIC,SAAS,GAAG,CAAhB;AAEA,eAAe,SAASC,UAAT,CAAoB;AAAEC,EAAAA,QAAF;AAAYC,EAAAA;AAAZ,CAApB,EAAgD;AAC7D,QAAMC,GAAG,GAAGd,OAAO,CAAC,MAAO,UAASU,SAAS,EAAG,EAA7B,EAAgC,EAAhC,CAAnB;AACA,QAAMK,OAAO,GAAGd,MAAM,CAAO,IAAP,CAAtB;AACA,QAAM;AAAEe,IAAAA,sBAAF;AAA0BC,IAAAA,cAA1B;AAA0CC,IAAAA;AAA1C,MACJd,6BAA6B,EAD/B;AAEA,QAAM;AAAEe,IAAAA;AAAF,MAAchB,qBAAqB,EAAzC;AAEAJ,EAAAA,SAAS,CAAC,MAAM;AACd,WAAO,MAAMiB,sBAAsB,CAACF,GAAD,EAAMM,SAAN,CAAnC;AACD,GAFQ,EAEN,EAFM,CAAT;AAIA,QAAMC,YAAY,GAAGvB,WAAW,CAAC,MAAM;AACrCkB,IAAAA,sBAAsB,CAACF,GAAD,EAAMC,OAAN,CAAtB;AACD,GAF+B,EAE7B,CAACC,sBAAD,EAAyBF,GAAzB,CAF6B,CAAhC;AAIA,QAAMQ,UAAU,GAAGb,eAAe,CAAC,MAAM;AACvC,UAAMc,GAAG,GAAGN,cAAc,CAACO,KAAf,CAAqBV,GAArB,KAA6B,CAAzC;AACA,UAAMW,YAAY,GAAGP,mBAAmB,CAACM,KAApB,CAA0BV,GAA1B,KAAkC;AAAES,MAAAA,GAAG,EAAE;AAAP,KAAvD;AACA,UAAMG,QAAQ,GAAGD,YAAY,CAACF,GAAb,GAAmBA,GAApC;AACA,WAAOhB,WAAW,CAChBY,OAAO,CAACK,KADQ,EAEhB,CAAC,CAAD,EAAIE,QAAJ,EAAcA,QAAQ,GAAG,MAAzB,CAFgB,EAGhB,CAAC,CAAD,EAAI,CAAJ,EAAO,MAAP,CAHgB,EAIhBpB,WAAW,CAACqB,KAJI,CAAlB;AAMD,GAViC,EAU/B,EAV+B,CAAlC;AAYA,QAAMC,aAAa,GAAGpB,gBAAgB,CAAC,MAAM;AAC3C,WAAO;AACLqB,MAAAA,SAAS,EAAE,CACT;AACEP,QAAAA,UAAU,EAAEA,UAAU,CAACE;AADzB,OADS;AADN,KAAP;AAOD,GARqC,EAQnC,EARmC,CAAtC;AAUA,sBACE,oBAAC,QAAD,CAAU,IAAV;AACE,IAAA,GAAG,EAAEV,GADP,CAEE;AAFF;AAGE,IAAA,GAAG,EAAEC,OAHP;AAIE,IAAA,QAAQ,EAAEM,YAJZ;AAKE,IAAA,KAAK,EAAE,CAACS,MAAM,CAACC,SAAR,EAAmBH,aAAnB,EAAkCf,KAAlC,CALT;AAME,IAAA,aAAa,EAAC;AANhB,KAQGD,QARH,CADF;AAYD;AAED,MAAMkB,MAAM,GAAG5B,UAAU,CAAC8B,MAAX,CAAkB;AAC/BD,EAAAA,SAAS,EAAE;AACTE,IAAAA,eAAe,EAAE,OADR;AAETC,IAAAA,MAAM,EAAE;AAFC;AADoB,CAAlB,CAAf","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useCallback, useEffect, useMemo, useRef } from 'react';\nimport { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\nimport useCollapsibleContext from '../../hooks/useCollapsibleContext';\nimport useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';\nimport Animated, {\n Extrapolate,\n interpolate,\n useAnimatedStyle,\n useDerivedValue,\n} from 'react-native-reanimated';\n\ntype Props = {\n style?: StyleProp<ViewStyle>;\n children: Element;\n};\n\nlet stickyKey = 0;\n\nexport default function StickyView({ children, style }: Props) {\n const key = useMemo(() => `sticky_${stickyKey++}`, []);\n const viewRef = useRef<View>(null);\n const { handleStickyViewLayout, stickyViewTops, stickyViewPositions } =\n useInternalCollapsibleContext();\n const { scrollY } = useCollapsibleContext();\n\n useEffect(() => {\n return () => handleStickyViewLayout(key, undefined);\n }, []);\n\n const handleLayout = useCallback(() => {\n handleStickyViewLayout(key, viewRef);\n }, [handleStickyViewLayout, key]);\n\n const translateY = useDerivedValue(() => {\n const top = stickyViewTops.value[key] || 0;\n const layoutValues = stickyViewPositions.value[key] || { top: 0 };\n const inputMid = layoutValues.top - top;\n return interpolate(\n scrollY.value,\n [0, inputMid, inputMid + 100000],\n [0, 0, 100000],\n Extrapolate.CLAMP\n );\n }, []);\n\n const animatedStyle = useAnimatedStyle(() => {\n return {\n transform: [\n {\n translateY: translateY.value,\n },\n ],\n };\n }, []);\n\n return (\n <Animated.View\n key={key}\n // @ts-ignore\n ref={viewRef}\n onLayout={handleLayout}\n style={[styles.container, animatedStyle, style]}\n pointerEvents=\"box-none\"\n >\n {children}\n </Animated.View>\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n backgroundColor: 'white',\n zIndex: 10,\n },\n});\n"]}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { NativeViewGestureHandler, PanGestureHandler } from 'react-native-gesture-handler';
|
|
2
|
+
import React, { useRef } from 'react';
|
|
3
|
+
import Animated, { useAnimatedGestureHandler, withTiming } from 'react-native-reanimated';
|
|
4
|
+
import usePullToRefreshContext from './usePullToRefreshContext';
|
|
5
|
+
import { StyleSheet } from 'react-native';
|
|
6
|
+
import { rubberClamp } from './utils';
|
|
7
|
+
export default function PullToRefreshContainer({
|
|
8
|
+
children,
|
|
9
|
+
scrollY
|
|
10
|
+
}) {
|
|
11
|
+
const scrollRef = useRef();
|
|
12
|
+
const panRef = useRef();
|
|
13
|
+
const {
|
|
14
|
+
refreshValue,
|
|
15
|
+
internalRefreshing,
|
|
16
|
+
internalHeight
|
|
17
|
+
} = usePullToRefreshContext();
|
|
18
|
+
const gestureHandler = useAnimatedGestureHandler({
|
|
19
|
+
onStart: (_, ctx) => {
|
|
20
|
+
ctx.startY = internalRefreshing.value ? refreshValue.value : 0;
|
|
21
|
+
},
|
|
22
|
+
onActive: (event, ctx) => {
|
|
23
|
+
if (scrollY.value <= 1) {
|
|
24
|
+
const tranY = event.translationY + ctx.startY;
|
|
25
|
+
const clampedValue = rubberClamp(tranY, 0, internalHeight.value);
|
|
26
|
+
refreshValue.value = clampedValue;
|
|
27
|
+
|
|
28
|
+
if (clampedValue > internalHeight.value) {
|
|
29
|
+
internalRefreshing.value = true;
|
|
30
|
+
}
|
|
31
|
+
} else {
|
|
32
|
+
refreshValue.value = 0;
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
onEnd: () => {
|
|
36
|
+
if (refreshValue.value > 0) {
|
|
37
|
+
const value = internalRefreshing.value ? internalHeight.value : 0;
|
|
38
|
+
refreshValue.value = withTiming(value);
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
return /*#__PURE__*/React.createElement(PanGestureHandler, {
|
|
43
|
+
ref: panRef,
|
|
44
|
+
simultaneousHandlers: scrollRef,
|
|
45
|
+
onGestureEvent: gestureHandler,
|
|
46
|
+
shouldCancelWhenOutside: false,
|
|
47
|
+
enableTrackpadTwoFingerGesture: true,
|
|
48
|
+
maxPointers: 1
|
|
49
|
+
}, /*#__PURE__*/React.createElement(Animated.View, {
|
|
50
|
+
style: StyleSheet.absoluteFill
|
|
51
|
+
}, /*#__PURE__*/React.createElement(NativeViewGestureHandler, {
|
|
52
|
+
ref: scrollRef,
|
|
53
|
+
simultaneousHandlers: panRef
|
|
54
|
+
}, children)));
|
|
55
|
+
}
|
|
56
|
+
//# sourceMappingURL=PullToRefreshContainer.js.map
|