@r0b0t3d/react-native-collapsible 1.1.2 → 1.2.0-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 +4 -2
- 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} +5 -5
- 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} +6 -6
- 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/index.js +21 -12
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/{types.js → types.d.js} +1 -1
- package/lib/commonjs/{types.js.map → types.d.js.map} +0 -0
- package/lib/commonjs/{hooks/withCollapsibleContext.js → withCollapsibleContext.js} +8 -4
- package/lib/commonjs/{hooks/withCollapsibleContext.js.map → withCollapsibleContext.js.map} +1 -1
- package/lib/module/components/CollapsibleContainer.js +1 -1
- 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} +2 -2
- package/lib/module/components/{CollapsibleHeaderContainer.js.map → header/CollapsibleHeaderContainer.js.map} +1 -1
- 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} +27 -27
- package/lib/module/components/scrollable/CollapsibleFlatList.js.map +1 -0
- package/lib/module/components/{CollapsibleScrollView.js → scrollable/CollapsibleScrollView.js} +5 -5
- 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/index.js +6 -5
- package/lib/module/index.js.map +1 -1
- package/lib/module/types.d.js +2 -0
- package/lib/module/{types.js.map → types.d.js.map} +0 -0
- package/lib/module/{hooks/withCollapsibleContext.js → withCollapsibleContext.js} +5 -4
- package/lib/module/withCollapsibleContext.js.map +1 -0
- 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/index.d.ts +6 -5
- package/lib/typescript/{hooks/withCollapsibleContext.d.ts → withCollapsibleContext.d.ts} +0 -0
- package/package.json +4 -2
- package/src/components/CollapsibleContainer.tsx +1 -1
- package/src/components/{AnimatedTopView.tsx → header/AnimatedTopView.tsx} +0 -0
- package/src/components/{CollapsibleHeaderContainer.tsx → header/CollapsibleHeaderContainer.tsx} +3 -3
- 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} +34 -28
- package/src/components/{CollapsibleScrollView.tsx → scrollable/CollapsibleScrollView.tsx} +6 -6
- package/src/{hooks → components/scrollable}/useAnimatedScroll.ts +2 -2
- package/src/hooks/useInternalCollapsibleContext.ts +1 -1
- package/src/index.tsx +6 -5
- package/src/{types.ts → types.d.ts} +7 -0
- package/src/{hooks/withCollapsibleContext.tsx → withCollapsibleContext.tsx} +8 -5
- 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/module/components/CollapsibleFlatList.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
- package/lib/module/types.js +0 -2
- package/lib/typescript/types.d.ts +0 -34
|
@@ -9,7 +9,9 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
9
9
|
|
|
10
10
|
var _reactNative = require("react-native");
|
|
11
11
|
|
|
12
|
-
var _useInternalCollapsibleContext = require("../hooks/useInternalCollapsibleContext");
|
|
12
|
+
var _useInternalCollapsibleContext = _interopRequireDefault(require("../hooks/useInternalCollapsibleContext"));
|
|
13
|
+
|
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
15
|
|
|
14
16
|
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); }
|
|
15
17
|
|
|
@@ -24,7 +26,7 @@ function CollapsibleContainer({
|
|
|
24
26
|
const {
|
|
25
27
|
containerRef,
|
|
26
28
|
handleContainerHeight
|
|
27
|
-
} = (0, _useInternalCollapsibleContext.
|
|
29
|
+
} = (0, _useInternalCollapsibleContext.default)();
|
|
28
30
|
const handleContainerLayout = (0, _react.useCallback)(layout => {
|
|
29
31
|
const height = layout.nativeEvent.layout.height;
|
|
30
32
|
handleContainerHeight(height);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["CollapsibleContainer.tsx"],"names":["CollapsibleContainer","children","props","containerRef","handleContainerHeight","handleContainerLayout","layout","height","nativeEvent","styles","container","style","StyleSheet","create","flex","overflow"],"mappings":";;;;;;;AAAA;;AACA;;AACA
|
|
1
|
+
{"version":3,"sources":["CollapsibleContainer.tsx"],"names":["CollapsibleContainer","children","props","containerRef","handleContainerHeight","handleContainerLayout","layout","height","nativeEvent","styles","container","style","StyleSheet","create","flex","overflow"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;AAMe,SAASA,oBAAT,CAA8B;AAAEC,EAAAA,QAAF;AAAY,KAAGC;AAAf,CAA9B,EAA6D;AAC1E,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,MACJ,6CADF;AAGA,QAAMC,qBAAqB,GAAG,wBAC3BC,MAAD,IAA+B;AAC7B,UAAMC,MAAM,GAAGD,MAAM,CAACE,WAAP,CAAmBF,MAAnB,CAA0BC,MAAzC;AACAH,IAAAA,qBAAqB,CAACG,MAAD,CAArB;AACD,GAJ2B,EAK5B,CAACH,qBAAD,CAL4B,CAA9B;AAQA,sBACE,6BAAC,iBAAD,eACMF,KADN;AAEE,IAAA,GAAG,EAAEC,YAFP;AAGE,IAAA,KAAK,EAAE,CAACM,MAAM,CAACC,SAAR,EAAmBR,KAAK,CAACS,KAAzB,CAHT;AAIE,IAAA,QAAQ,EAAEN;AAJZ,MAMGJ,QANH,CADF;AAUD;;AAED,MAAMQ,MAAM,GAAGG,wBAAWC,MAAX,CAAkB;AAC/BH,EAAAA,SAAS,EAAE;AACTI,IAAAA,IAAI,EAAE,CADG;AAETC,IAAAA,QAAQ,EAAE;AAFD;AADoB,CAAlB,CAAf","sourcesContent":["import React, { useCallback } from 'react';\nimport { LayoutChangeEvent, StyleSheet, View, ViewProps } from 'react-native';\nimport useInternalCollapsibleContext from '../hooks/useInternalCollapsibleContext';\n\ntype Props = Omit<ViewProps, 'ref' | 'onLayout'> & {\n children: Element;\n};\n\nexport default function CollapsibleContainer({ children, ...props }: Props) {\n const { containerRef, handleContainerHeight } =\n useInternalCollapsibleContext();\n\n const handleContainerLayout = useCallback(\n (layout: LayoutChangeEvent) => {\n const height = layout.nativeEvent.layout.height;\n handleContainerHeight(height);\n },\n [handleContainerHeight]\n );\n\n return (\n <View\n {...props}\n ref={containerRef}\n style={[styles.container, props.style]}\n onLayout={handleContainerLayout}\n >\n {children}\n </View>\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n overflow: 'hidden',\n },\n});\n"]}
|
|
File without changes
|
|
File without changes
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = CollapsibleHeaderContainer;
|
|
7
7
|
|
|
8
|
-
var _useInternalCollapsibleContext = require("
|
|
8
|
+
var _useInternalCollapsibleContext = _interopRequireDefault(require("../../hooks/useInternalCollapsibleContext"));
|
|
9
9
|
|
|
10
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
11
|
|
|
@@ -13,14 +13,14 @@ var _reactNative = require("react-native");
|
|
|
13
13
|
|
|
14
14
|
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
|
|
15
15
|
|
|
16
|
-
var _useCollapsibleContext = _interopRequireDefault(require("
|
|
17
|
-
|
|
18
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
16
|
+
var _useCollapsibleContext = _interopRequireDefault(require("../../hooks/useCollapsibleContext"));
|
|
19
17
|
|
|
20
18
|
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); }
|
|
21
19
|
|
|
22
20
|
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; }
|
|
23
21
|
|
|
22
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
23
|
+
|
|
24
24
|
/* eslint-disable react-hooks/exhaustive-deps */
|
|
25
25
|
let key = 0;
|
|
26
26
|
|
|
@@ -34,7 +34,7 @@ function CollapsibleHeaderContainer({
|
|
|
34
34
|
} = (0, _useCollapsibleContext.default)();
|
|
35
35
|
const {
|
|
36
36
|
handleHeaderContainerLayout
|
|
37
|
-
} = (0, _useInternalCollapsibleContext.
|
|
37
|
+
} = (0, _useInternalCollapsibleContext.default)();
|
|
38
38
|
const headerHeight = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
39
39
|
(0, _react.useEffect)(() => {
|
|
40
40
|
return () => handleHeaderContainerLayout(contentKey, undefined);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["CollapsibleHeaderContainer.tsx"],"names":["key","CollapsibleHeaderContainer","children","containerStyle","contentKey","scrollY","handleHeaderContainerLayout","headerHeight","undefined","handleHeaderLayout","nativeEvent","layout","height","value","duration","headerTranslate","Animated","Extrapolate","CLAMP","headerStyle","transform","translateY","minHeight","internalStyle","zIndex","styles","container","StyleSheet","create","backgroundColor","marginTop","Platform","OS"],"mappings":";;;;;;;AACA;;AACA;;AACA;;AAQA;;AAOA;;;;;;;;AAlBA;AAyBA,IAAIA,GAAG,GAAG,CAAV;;AAEe,SAASC,0BAAT,CAAoC;AACjDC,EAAAA,QADiD;AAEjDC,EAAAA;AAFiD,CAApC,EAGL;AACR,QAAMC,UAAU,GAAG,oBAAQ,MAAO,sBAAqBJ,GAAG,EAAG,EAA1C,EAA6C,EAA7C,CAAnB;AACA,QAAM;AAAEK,IAAAA;AAAF,MAAc,qCAApB;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAkC,6CAAxC;AACA,QAAMC,YAAY,GAAG,2CAAe,CAAf,CAArB;AAEA,wBAAU,MAAM;AACd,WAAO,MAAMD,2BAA2B,CAACF,UAAD,EAAaI,SAAb,CAAxC;AACD,GAFD,EAEG,EAFH;AAIA,QAAMC,kBAAkB,GAAG,wBACzB,CAAC;AACCC,IAAAA,WAAW,EAAE;AACXC,MAAAA,MAAM,EAAE;AAAEC,QAAAA;AAAF;AADG;AADd,GAAD,KAIyB;AACvBL,IAAAA,YAAY,CAACM,KAAb,GAAqB,uCAAWD,MAAX,EAAmB;AACtCE,MAAAA,QAAQ,EAAE;AAD4B,KAAnB,CAArB;AAGAR,IAAAA,2BAA2B,CAACF,UAAD,EAAaQ,MAAb,CAA3B;AACD,GAVwB,EAWzB,CAACR,UAAD,EAAaE,2BAAb,CAXyB,CAA3B;AAcA,QAAMS,eAAe,GAAG,4CACtB,MACE,wCACEV,OAAO,CAACQ,KADV,EAEE;AACA,GAAC,CAAC,GAAF,EAAO,CAAP,EAAU,MAAV,CAHF,EAIE,CAAC,GAAD,EAAM,CAAN,EAAS,CAAC,MAAV,CAJF,EAKEG,+BAASC,WAAT,CAAqBC,KALvB,CAFoB,EAStB,EATsB,CAAxB;AAYA,QAAMC,WAAW,GAAG,6CAAiB,MAAM;AACzC,WAAO;AACLC,MAAAA,SAAS,EAAE,CAAC;AAAEC,QAAAA,UAAU,EAAEN,eAAe,CAACF;AAA9B,OAAD,CADN;AAELS,MAAAA,SAAS,EAAEf,YAAY,CAACM;AAFnB,KAAP;AAID,GALmB,EAKjB,CAACN,YAAD,EAAeQ,eAAf,CALiB,CAApB;AAOA,QAAMQ,aAAa,GAAG,oBAAQ,MAAM;AAClC,WAAO;AACLC,MAAAA,MAAM,EAAE,SAASxB;AADZ,KAAP;AAGD,GAJqB,EAInB,EAJmB,CAAtB;AAMA,sBACE,6BAAC,8BAAD,CAAU,IAAV;AACE,IAAA,KAAK,EAAE,CAACmB,WAAD,EAAcI,aAAd,CADT;AAEE,IAAA,aAAa,EAAC;AAFhB,kBAIE,6BAAC,iBAAD;AACE,IAAA,GAAG,EAAEnB,UADP;AAEE,IAAA,QAAQ,EAAEK,kBAFZ;AAGE,IAAA,aAAa,EAAC,UAHhB;AAIE,IAAA,KAAK,EAAE,CAACgB,MAAM,CAACC,SAAR,EAAmBvB,cAAnB;AAJT,KAMGD,QANH,CAJF,CADF;AAeD;;AAED,MAAMuB,MAAM,GAAGE,wBAAWC,MAAX,CAAkB;AAC/BF,EAAAA,SAAS,EAAE;AACTG,IAAAA,eAAe,EAAE,OADR;AAETC,IAAAA,SAAS,EAAEC,sBAASC,EAAT,KAAgB,SAAhB,GAA4B,CAAC,CAA7B,GAAiC;AAFnC;AADoB,CAAlB,CAAf","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"]}
|
|
@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = StickyView;
|
|
7
7
|
|
|
8
|
-
var _useInternalCollapsibleContext = require("../hooks/useInternalCollapsibleContext");
|
|
9
|
-
|
|
10
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
9
|
|
|
12
10
|
var _reactNative = require("react-native");
|
|
13
11
|
|
|
14
|
-
var _useCollapsibleContext = _interopRequireDefault(require("
|
|
12
|
+
var _useCollapsibleContext = _interopRequireDefault(require("../../hooks/useCollapsibleContext"));
|
|
13
|
+
|
|
14
|
+
var _useInternalCollapsibleContext = _interopRequireDefault(require("../../hooks/useInternalCollapsibleContext"));
|
|
15
15
|
|
|
16
16
|
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
|
|
17
17
|
|
|
@@ -34,7 +34,7 @@ function StickyView({
|
|
|
34
34
|
handleStickyViewLayout,
|
|
35
35
|
stickyViewTops,
|
|
36
36
|
stickyViewPositions
|
|
37
|
-
} = (0, _useInternalCollapsibleContext.
|
|
37
|
+
} = (0, _useInternalCollapsibleContext.default)();
|
|
38
38
|
const {
|
|
39
39
|
scrollY
|
|
40
40
|
} = (0, _useCollapsibleContext.default)();
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["StickyView.tsx"],"names":["stickyKey","StickyView","children","style","key","viewRef","handleStickyViewLayout","stickyViewTops","stickyViewPositions","scrollY","undefined","handleLayout","translateY","top","value","layoutValues","inputMid","Extrapolate","CLAMP","animatedStyle","transform","styles","container","StyleSheet","create","backgroundColor","zIndex"],"mappings":";;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AALA;AAiBA,IAAIA,SAAS,GAAG,CAAhB;;AAEe,SAASC,UAAT,CAAoB;AAAEC,EAAAA,QAAF;AAAYC,EAAAA;AAAZ,CAApB,EAAgD;AAC7D,QAAMC,GAAG,GAAG,oBAAQ,MAAO,UAASJ,SAAS,EAAG,EAApC,EAAuC,EAAvC,CAAZ;AACA,QAAMK,OAAO,GAAG,mBAAa,IAAb,CAAhB;AACA,QAAM;AAAEC,IAAAA,sBAAF;AAA0BC,IAAAA,cAA1B;AAA0CC,IAAAA;AAA1C,MACJ,6CADF;AAEA,QAAM;AAAEC,IAAAA;AAAF,MAAc,qCAApB;AAEA,wBAAU,MAAM;AACd,WAAO,MAAMH,sBAAsB,CAACF,GAAD,EAAMM,SAAN,CAAnC;AACD,GAFD,EAEG,EAFH;AAIA,QAAMC,YAAY,GAAG,wBAAY,MAAM;AACrCL,IAAAA,sBAAsB,CAACF,GAAD,EAAMC,OAAN,CAAtB;AACD,GAFoB,EAElB,CAACC,sBAAD,EAAyBF,GAAzB,CAFkB,CAArB;AAIA,QAAMQ,UAAU,GAAG,4CAAgB,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,WAAO,wCACLJ,OAAO,CAACK,KADH,EAEL,CAAC,CAAD,EAAIE,QAAJ,EAAcA,QAAQ,GAAG,MAAzB,CAFK,EAGL,CAAC,CAAD,EAAI,CAAJ,EAAO,MAAP,CAHK,EAILC,mCAAYC,KAJP,CAAP;AAMD,GAVkB,EAUhB,EAVgB,CAAnB;AAYA,QAAMC,aAAa,GAAG,6CAAiB,MAAM;AAC3C,WAAO;AACLC,MAAAA,SAAS,EAAE,CACT;AACER,QAAAA,UAAU,EAAEA,UAAU,CAACE;AADzB,OADS;AADN,KAAP;AAOD,GARqB,EAQnB,EARmB,CAAtB;AAUA,sBACE,6BAAC,8BAAD,CAAU,IAAV;AACE,IAAA,GAAG,EAAEV,GADP,CAEE;AAFF;AAGE,IAAA,GAAG,EAAEC,OAHP;AAIE,IAAA,QAAQ,EAAEM,YAJZ;AAKE,IAAA,KAAK,EAAE,CAACU,MAAM,CAACC,SAAR,EAAmBH,aAAnB,EAAkChB,KAAlC,CALT;AAME,IAAA,aAAa,EAAC;AANhB,KAQGD,QARH,CADF;AAYD;;AAED,MAAMmB,MAAM,GAAGE,wBAAWC,MAAX,CAAkB;AAC/BF,EAAAA,SAAS,EAAE;AACTG,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,75 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = PullToRefreshContainer;
|
|
7
|
+
|
|
8
|
+
var _reactNativeGestureHandler = require("react-native-gesture-handler");
|
|
9
|
+
|
|
10
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
+
|
|
12
|
+
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
|
|
13
|
+
|
|
14
|
+
var _usePullToRefreshContext = _interopRequireDefault(require("./usePullToRefreshContext"));
|
|
15
|
+
|
|
16
|
+
var _reactNative = require("react-native");
|
|
17
|
+
|
|
18
|
+
var _utils = require("./utils");
|
|
19
|
+
|
|
20
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
|
+
|
|
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
|
+
|
|
24
|
+
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; }
|
|
25
|
+
|
|
26
|
+
function PullToRefreshContainer({
|
|
27
|
+
children,
|
|
28
|
+
scrollY
|
|
29
|
+
}) {
|
|
30
|
+
const scrollRef = (0, _react.useRef)();
|
|
31
|
+
const panRef = (0, _react.useRef)();
|
|
32
|
+
const {
|
|
33
|
+
refreshValue,
|
|
34
|
+
internalRefreshing,
|
|
35
|
+
internalHeight
|
|
36
|
+
} = (0, _usePullToRefreshContext.default)();
|
|
37
|
+
const gestureHandler = (0, _reactNativeReanimated.useAnimatedGestureHandler)({
|
|
38
|
+
onStart: (_, ctx) => {
|
|
39
|
+
ctx.startY = internalRefreshing.value ? refreshValue.value : 0;
|
|
40
|
+
},
|
|
41
|
+
onActive: (event, ctx) => {
|
|
42
|
+
if (scrollY.value <= 1) {
|
|
43
|
+
const tranY = event.translationY + ctx.startY;
|
|
44
|
+
const clampedValue = (0, _utils.rubberClamp)(tranY, 0, internalHeight.value);
|
|
45
|
+
refreshValue.value = clampedValue;
|
|
46
|
+
|
|
47
|
+
if (clampedValue > internalHeight.value) {
|
|
48
|
+
internalRefreshing.value = true;
|
|
49
|
+
}
|
|
50
|
+
} else {
|
|
51
|
+
refreshValue.value = 0;
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
onEnd: () => {
|
|
55
|
+
if (refreshValue.value > 0) {
|
|
56
|
+
const value = internalRefreshing.value ? internalHeight.value : 0;
|
|
57
|
+
refreshValue.value = (0, _reactNativeReanimated.withTiming)(value);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
});
|
|
61
|
+
return /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.PanGestureHandler, {
|
|
62
|
+
ref: panRef,
|
|
63
|
+
simultaneousHandlers: scrollRef,
|
|
64
|
+
onGestureEvent: gestureHandler,
|
|
65
|
+
shouldCancelWhenOutside: false,
|
|
66
|
+
enableTrackpadTwoFingerGesture: true,
|
|
67
|
+
maxPointers: 1
|
|
68
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
|
|
69
|
+
style: _reactNative.StyleSheet.absoluteFill
|
|
70
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.NativeViewGestureHandler, {
|
|
71
|
+
ref: scrollRef,
|
|
72
|
+
simultaneousHandlers: panRef
|
|
73
|
+
}, children)));
|
|
74
|
+
}
|
|
75
|
+
//# sourceMappingURL=PullToRefreshContainer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["PullToRefreshContainer.tsx"],"names":["PullToRefreshContainer","children","scrollY","scrollRef","panRef","refreshValue","internalRefreshing","internalHeight","gestureHandler","onStart","_","ctx","startY","value","onActive","event","tranY","translationY","clampedValue","onEnd","StyleSheet","absoluteFill"],"mappings":";;;;;;;AAAA;;AAIA;;AACA;;AAIA;;AACA;;AACA;;;;;;;;AAOe,SAASA,sBAAT,CAAgC;AAAEC,EAAAA,QAAF;AAAYC,EAAAA;AAAZ,CAAhC,EAA8D;AAC3E,QAAMC,SAAS,GAAG,oBAAlB;AACA,QAAMC,MAAM,GAAG,oBAAf;AACA,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA,kBAAhB;AAAoCC,IAAAA;AAApC,MACJ,uCADF;AAGA,QAAMC,cAAc,GAAG,sDAA0B;AAC/CC,IAAAA,OAAO,EAAE,CAACC,CAAD,EAAIC,GAAJ,KAAiB;AACxBA,MAAAA,GAAG,CAACC,MAAJ,GAAaN,kBAAkB,CAACO,KAAnB,GAA2BR,YAAY,CAACQ,KAAxC,GAAgD,CAA7D;AACD,KAH8C;AAI/CC,IAAAA,QAAQ,EAAE,CAACC,KAAD,EAAQJ,GAAR,KAAqB;AAC7B,UAAIT,OAAO,CAACW,KAAR,IAAiB,CAArB,EAAwB;AACtB,cAAMG,KAAK,GAAGD,KAAK,CAACE,YAAN,GAAqBN,GAAG,CAACC,MAAvC;AACA,cAAMM,YAAY,GAAG,wBAAYF,KAAZ,EAAmB,CAAnB,EAAsBT,cAAc,CAACM,KAArC,CAArB;AACAR,QAAAA,YAAY,CAACQ,KAAb,GAAqBK,YAArB;;AACA,YAAIA,YAAY,GAAGX,cAAc,CAACM,KAAlC,EAAyC;AACvCP,UAAAA,kBAAkB,CAACO,KAAnB,GAA2B,IAA3B;AACD;AACF,OAPD,MAOO;AACLR,QAAAA,YAAY,CAACQ,KAAb,GAAqB,CAArB;AACD;AACF,KAf8C;AAgB/CM,IAAAA,KAAK,EAAE,MAAM;AACX,UAAId,YAAY,CAACQ,KAAb,GAAqB,CAAzB,EAA4B;AAC1B,cAAMA,KAAK,GAAGP,kBAAkB,CAACO,KAAnB,GAA2BN,cAAc,CAACM,KAA1C,GAAkD,CAAhE;AACAR,QAAAA,YAAY,CAACQ,KAAb,GAAqB,uCAAWA,KAAX,CAArB;AACD;AACF;AArB8C,GAA1B,CAAvB;AAwBA,sBACE,6BAAC,4CAAD;AACE,IAAA,GAAG,EAAET,MADP;AAEE,IAAA,oBAAoB,EAAED,SAFxB;AAGE,IAAA,cAAc,EAAEK,cAHlB;AAIE,IAAA,uBAAuB,EAAE,KAJ3B;AAKE,IAAA,8BAA8B,MALhC;AAME,IAAA,WAAW,EAAE;AANf,kBAQE,6BAAC,8BAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAEY,wBAAWC;AAAjC,kBACE,6BAAC,mDAAD;AAA0B,IAAA,GAAG,EAAElB,SAA/B;AAA0C,IAAA,oBAAoB,EAAEC;AAAhE,KACGH,QADH,CADF,CARF,CADF;AAgBD","sourcesContent":["import {\n NativeViewGestureHandler,\n PanGestureHandler,\n} from 'react-native-gesture-handler';\nimport React, { useRef } from 'react';\nimport Animated, {\n useAnimatedGestureHandler,\n withTiming,\n} from 'react-native-reanimated';\nimport usePullToRefreshContext from './usePullToRefreshContext';\nimport { StyleSheet } from 'react-native';\nimport { rubberClamp } from './utils';\n\ntype Props = {\n children: React.ReactNode;\n scrollY: Animated.SharedValue<number>;\n};\n\nexport default function PullToRefreshContainer({ children, scrollY }: Props) {\n const scrollRef = useRef();\n const panRef = useRef();\n const { refreshValue, internalRefreshing, internalHeight } =\n usePullToRefreshContext();\n\n const gestureHandler = useAnimatedGestureHandler({\n onStart: (_, ctx: any) => {\n ctx.startY = internalRefreshing.value ? refreshValue.value : 0;\n },\n onActive: (event, ctx: any) => {\n if (scrollY.value <= 1) {\n const tranY = event.translationY + ctx.startY;\n const clampedValue = rubberClamp(tranY, 0, internalHeight.value);\n refreshValue.value = clampedValue;\n if (clampedValue > internalHeight.value) {\n internalRefreshing.value = true;\n }\n } else {\n refreshValue.value = 0;\n }\n },\n onEnd: () => {\n if (refreshValue.value > 0) {\n const value = internalRefreshing.value ? internalHeight.value : 0;\n refreshValue.value = withTiming(value);\n }\n },\n });\n\n return (\n <PanGestureHandler\n ref={panRef}\n simultaneousHandlers={scrollRef}\n onGestureEvent={gestureHandler}\n shouldCancelWhenOutside={false}\n enableTrackpadTwoFingerGesture\n maxPointers={1}\n >\n <Animated.View style={StyleSheet.absoluteFill}>\n <NativeViewGestureHandler ref={scrollRef} simultaneousHandlers={panRef}>\n {children}\n </NativeViewGestureHandler>\n </Animated.View>\n </PanGestureHandler>\n );\n}\n"]}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = PullToRefreshProvider;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
|
|
10
|
+
var _reactNativeReanimated = require("react-native-reanimated");
|
|
11
|
+
|
|
12
|
+
var _usePullToRefreshContext = require("./usePullToRefreshContext");
|
|
13
|
+
|
|
14
|
+
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); }
|
|
15
|
+
|
|
16
|
+
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; }
|
|
17
|
+
|
|
18
|
+
function PullToRefreshProvider({
|
|
19
|
+
children
|
|
20
|
+
}) {
|
|
21
|
+
const refreshValue = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
22
|
+
const internalRefreshing = (0, _reactNativeReanimated.useSharedValue)(false);
|
|
23
|
+
const internalHeight = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
24
|
+
const context = (0, _react.useMemo)(() => {
|
|
25
|
+
return {
|
|
26
|
+
refreshValue: refreshValue,
|
|
27
|
+
internalRefreshing,
|
|
28
|
+
internalHeight
|
|
29
|
+
};
|
|
30
|
+
}, [refreshValue, internalRefreshing, internalHeight]);
|
|
31
|
+
return /*#__PURE__*/_react.default.createElement(_usePullToRefreshContext.PullToRefreshContext.Provider, {
|
|
32
|
+
value: context
|
|
33
|
+
}, children);
|
|
34
|
+
}
|
|
35
|
+
//# sourceMappingURL=PullToRefreshProvider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["PullToRefreshProvider.tsx"],"names":["PullToRefreshProvider","children","refreshValue","internalRefreshing","internalHeight","context"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;AAMe,SAASA,qBAAT,CAA+B;AAAEC,EAAAA;AAAF,CAA/B,EAAoD;AACjE,QAAMC,YAAY,GAAG,2CAAe,CAAf,CAArB;AACA,QAAMC,kBAAkB,GAAG,2CAAe,KAAf,CAA3B;AACA,QAAMC,cAAc,GAAG,2CAAe,CAAf,CAAvB;AAEA,QAAMC,OAAO,GAAG,oBAAQ,MAAM;AAC5B,WAAO;AACLH,MAAAA,YAAY,EAAEA,YADT;AAELC,MAAAA,kBAFK;AAGLC,MAAAA;AAHK,KAAP;AAKD,GANe,EAMb,CAACF,YAAD,EAAeC,kBAAf,EAAmCC,cAAnC,CANa,CAAhB;AAQA,sBACE,6BAAC,6CAAD,CAAsB,QAAtB;AAA+B,IAAA,KAAK,EAAEC;AAAtC,KACGJ,QADH,CADF;AAKD","sourcesContent":["import React, { useMemo } from 'react';\nimport { useSharedValue } from 'react-native-reanimated';\nimport { PullToRefreshContext } from './usePullToRefreshContext';\n\ntype Props = {\n children: React.ReactNode;\n};\n\nexport default function PullToRefreshProvider({ children }: Props) {\n const refreshValue = useSharedValue(0);\n const internalRefreshing = useSharedValue(false);\n const internalHeight = useSharedValue(0);\n\n const context = useMemo(() => {\n return {\n refreshValue: refreshValue,\n internalRefreshing,\n internalHeight,\n };\n }, [refreshValue, internalRefreshing, internalHeight]);\n\n return (\n <PullToRefreshContext.Provider value={context}>\n {children}\n </PullToRefreshContext.Provider>\n );\n}\n"]}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = RefreshControl;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
|
|
10
|
+
var _reactNative = require("react-native");
|
|
11
|
+
|
|
12
|
+
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
|
|
13
|
+
|
|
14
|
+
var _usePullToRefreshContext = _interopRequireDefault(require("./usePullToRefreshContext"));
|
|
15
|
+
|
|
16
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
|
+
|
|
18
|
+
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
|
+
|
|
20
|
+
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; }
|
|
21
|
+
|
|
22
|
+
/* eslint-disable react-hooks/exhaustive-deps */
|
|
23
|
+
function RefreshControl({
|
|
24
|
+
height = 100,
|
|
25
|
+
refreshing,
|
|
26
|
+
onRefresh,
|
|
27
|
+
renderAnimation
|
|
28
|
+
}) {
|
|
29
|
+
const {
|
|
30
|
+
refreshValue,
|
|
31
|
+
internalRefreshing,
|
|
32
|
+
internalHeight
|
|
33
|
+
} = (0, _usePullToRefreshContext.default)();
|
|
34
|
+
(0, _react.useEffect)(() => {
|
|
35
|
+
internalHeight.value = height;
|
|
36
|
+
}, [height]);
|
|
37
|
+
(0, _react.useEffect)(() => {
|
|
38
|
+
internalRefreshing.value = refreshing;
|
|
39
|
+
}, [refreshing]);
|
|
40
|
+
const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
|
|
41
|
+
return {
|
|
42
|
+
height: refreshValue.value
|
|
43
|
+
};
|
|
44
|
+
}, []);
|
|
45
|
+
const handleRefresh = (0, _react.useCallback)(() => {
|
|
46
|
+
console.log('refresh');
|
|
47
|
+
onRefresh();
|
|
48
|
+
}, [onRefresh]);
|
|
49
|
+
(0, _reactNativeReanimated.useAnimatedReaction)(() => internalRefreshing.value, (result, prev) => {
|
|
50
|
+
if (result !== prev) {
|
|
51
|
+
if (result) {
|
|
52
|
+
(0, _reactNativeReanimated.runOnJS)(handleRefresh)();
|
|
53
|
+
} else {
|
|
54
|
+
refreshValue.value = (0, _reactNativeReanimated.withTiming)(0);
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
});
|
|
58
|
+
const animatedProps = (0, _reactNativeReanimated.useAnimatedProps)(() => {
|
|
59
|
+
return {
|
|
60
|
+
progress: internalRefreshing.value ? undefined : Math.min(refreshValue.value / height, 1)
|
|
61
|
+
};
|
|
62
|
+
}, [height]);
|
|
63
|
+
return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
|
|
64
|
+
style: [styles.container, animatedStyle]
|
|
65
|
+
}, renderAnimation(animatedProps));
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
const styles = _reactNative.StyleSheet.create({
|
|
69
|
+
container: {
|
|
70
|
+
overflow: 'hidden'
|
|
71
|
+
}
|
|
72
|
+
});
|
|
73
|
+
//# sourceMappingURL=RefreshControl.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["RefreshControl.tsx"],"names":["RefreshControl","height","refreshing","onRefresh","renderAnimation","refreshValue","internalRefreshing","internalHeight","value","animatedStyle","handleRefresh","console","log","result","prev","animatedProps","progress","undefined","Math","min","styles","container","StyleSheet","create","overflow"],"mappings":";;;;;;;AACA;;AACA;;AACA;;AAOA;;;;;;;;AAVA;AAmBe,SAASA,cAAT,CAAwB;AACrCC,EAAAA,MAAM,GAAG,GAD4B;AAErCC,EAAAA,UAFqC;AAGrCC,EAAAA,SAHqC;AAIrCC,EAAAA;AAJqC,CAAxB,EAKL;AACR,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA,kBAAhB;AAAoCC,IAAAA;AAApC,MACJ,uCADF;AAGA,wBAAU,MAAM;AACdA,IAAAA,cAAc,CAACC,KAAf,GAAuBP,MAAvB;AACD,GAFD,EAEG,CAACA,MAAD,CAFH;AAIA,wBAAU,MAAM;AACdK,IAAAA,kBAAkB,CAACE,KAAnB,GAA2BN,UAA3B;AACD,GAFD,EAEG,CAACA,UAAD,CAFH;AAIA,QAAMO,aAAa,GAAG,6CAAiB,MAAM;AAC3C,WAAO;AACLR,MAAAA,MAAM,EAAEI,YAAY,CAACG;AADhB,KAAP;AAGD,GAJqB,EAInB,EAJmB,CAAtB;AAMA,QAAME,aAAa,GAAG,wBAAY,MAAM;AACtCC,IAAAA,OAAO,CAACC,GAAR,CAAY,SAAZ;AACAT,IAAAA,SAAS;AACV,GAHqB,EAGnB,CAACA,SAAD,CAHmB,CAAtB;AAKA,kDACE,MAAMG,kBAAkB,CAACE,KAD3B,EAEE,CAACK,MAAD,EAASC,IAAT,KAAkB;AAChB,QAAID,MAAM,KAAKC,IAAf,EAAqB;AACnB,UAAID,MAAJ,EAAY;AACV,4CAAQH,aAAR;AACD,OAFD,MAEO;AACLL,QAAAA,YAAY,CAACG,KAAb,GAAqB,uCAAW,CAAX,CAArB;AACD;AACF;AACF,GAVH;AAaA,QAAMO,aAAa,GAAG,6CAAiB,MAAM;AAC3C,WAAO;AACLC,MAAAA,QAAQ,EAAEV,kBAAkB,CAACE,KAAnB,GACNS,SADM,GAENC,IAAI,CAACC,GAAL,CAASd,YAAY,CAACG,KAAb,GAAqBP,MAA9B,EAAsC,CAAtC;AAHC,KAAP;AAKD,GANqB,EAMnB,CAACA,MAAD,CANmB,CAAtB;AAQA,sBACE,6BAAC,8BAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAE,CAACmB,MAAM,CAACC,SAAR,EAAmBZ,aAAnB;AAAtB,KACGL,eAAe,CAACW,aAAD,CADlB,CADF;AAKD;;AAED,MAAMK,MAAM,GAAGE,wBAAWC,MAAX,CAAkB;AAC/BF,EAAAA,SAAS,EAAE;AACTG,IAAAA,QAAQ,EAAE;AADD;AADoB,CAAlB,CAAf","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useCallback, useEffect } from 'react';\nimport { StyleSheet } from 'react-native';\nimport Animated, {\n runOnJS,\n useAnimatedProps,\n useAnimatedReaction,\n useAnimatedStyle,\n withTiming,\n} from 'react-native-reanimated';\nimport usePullToRefreshContext from './usePullToRefreshContext';\n\ntype Props = {\n height?: number;\n refreshing: boolean;\n onRefresh: () => void;\n renderAnimation: (animatedProps: any) => React.ReactNode;\n};\n\nexport default function RefreshControl({\n height = 100,\n refreshing,\n onRefresh,\n renderAnimation,\n}: Props) {\n const { refreshValue, internalRefreshing, internalHeight } =\n usePullToRefreshContext();\n\n useEffect(() => {\n internalHeight.value = height;\n }, [height]);\n\n useEffect(() => {\n internalRefreshing.value = refreshing;\n }, [refreshing]);\n\n const animatedStyle = useAnimatedStyle(() => {\n return {\n height: refreshValue.value,\n };\n }, []);\n\n const handleRefresh = useCallback(() => {\n console.log('refresh');\n onRefresh();\n }, [onRefresh]);\n\n useAnimatedReaction(\n () => internalRefreshing.value,\n (result, prev) => {\n if (result !== prev) {\n if (result) {\n runOnJS(handleRefresh)();\n } else {\n refreshValue.value = withTiming(0);\n }\n }\n }\n );\n\n const animatedProps = useAnimatedProps(() => {\n return {\n progress: internalRefreshing.value\n ? undefined\n : Math.min(refreshValue.value / height, 1),\n };\n }, [height]);\n\n return (\n <Animated.View style={[styles.container, animatedStyle]}>\n {renderAnimation(animatedProps)}\n </Animated.View>\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n overflow: 'hidden',\n },\n});\n"]}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = usePullToRefreshContext;
|
|
7
|
+
exports.PullToRefreshContext = void 0;
|
|
8
|
+
|
|
9
|
+
var _react = require("react");
|
|
10
|
+
|
|
11
|
+
// @ts-ignore
|
|
12
|
+
const PullToRefreshContext = /*#__PURE__*/(0, _react.createContext)({});
|
|
13
|
+
exports.PullToRefreshContext = PullToRefreshContext;
|
|
14
|
+
|
|
15
|
+
function usePullToRefreshContext() {
|
|
16
|
+
const ctx = (0, _react.useContext)(PullToRefreshContext);
|
|
17
|
+
|
|
18
|
+
if (!ctx) {
|
|
19
|
+
throw new Error('Component should be wrapped with withCollapsibleContext');
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
return ctx;
|
|
23
|
+
}
|
|
24
|
+
//# sourceMappingURL=usePullToRefreshContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["usePullToRefreshContext.ts"],"names":["PullToRefreshContext","usePullToRefreshContext","ctx","Error"],"mappings":";;;;;;;;AAAA;;AAGA;AACO,MAAMA,oBAAoB,gBAAG,0BAAwC,EAAxC,CAA7B;;;AAEQ,SAASC,uBAAT,GAAmC;AAChD,QAAMC,GAAG,GAAG,uBAAWF,oBAAX,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 { PullToRefreshContextType } from '../../types';\n\n// @ts-ignore\nexport const PullToRefreshContext = createContext<PullToRefreshContextType>({});\n\nexport default function usePullToRefreshContext() {\n const ctx = useContext(PullToRefreshContext);\n if (!ctx) {\n throw new Error('Component should be wrapped with withCollapsibleContext');\n }\n return ctx;\n}\n"]}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.clamp = clamp;
|
|
7
|
+
exports.rubberClamp = exports.rubberBandClamp = exports.springConfig = void 0;
|
|
8
|
+
|
|
9
|
+
const springConfig = velocity => {
|
|
10
|
+
'worklet';
|
|
11
|
+
|
|
12
|
+
return {
|
|
13
|
+
stiffness: 1000,
|
|
14
|
+
damping: 500,
|
|
15
|
+
mass: 3,
|
|
16
|
+
overshootClamping: true,
|
|
17
|
+
restDisplacementThreshold: 0.01,
|
|
18
|
+
restSpeedThreshold: 0.01,
|
|
19
|
+
velocity
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
exports.springConfig = springConfig;
|
|
24
|
+
|
|
25
|
+
function clamp(value, lowerbound, upperbound) {
|
|
26
|
+
'worklet';
|
|
27
|
+
|
|
28
|
+
return Math.min(Math.max(value, lowerbound), upperbound);
|
|
29
|
+
}
|
|
30
|
+
/**
|
|
31
|
+
* calculates rubber value
|
|
32
|
+
*
|
|
33
|
+
* @param x distance from the edge
|
|
34
|
+
* @param dim dimension, either width or height
|
|
35
|
+
* @param coeff constant value, UIScrollView uses 0.55
|
|
36
|
+
* @returns rubber = (1.0 – (1.0 / ((x * coeff / dim) + 1.0))) * dim
|
|
37
|
+
*/
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
const rubberBandClamp = (x, dim, coeff) => {
|
|
41
|
+
'worklet';
|
|
42
|
+
|
|
43
|
+
return (1.0 - 1.0 / (x * coeff / dim + 1.0)) * dim;
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
exports.rubberBandClamp = rubberBandClamp;
|
|
47
|
+
|
|
48
|
+
const rubberClamp = (y, topBound, bottomBound, coeff = 0.55) => {
|
|
49
|
+
'worklet';
|
|
50
|
+
|
|
51
|
+
const clampedY = clamp(y, topBound, bottomBound);
|
|
52
|
+
const diff = Math.abs(y - clampedY);
|
|
53
|
+
const sign = clampedY > y ? -1 : 1;
|
|
54
|
+
const dimension = bottomBound - topBound;
|
|
55
|
+
return clampedY + sign * rubberBandClamp(diff, dimension, coeff);
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
exports.rubberClamp = rubberClamp;
|
|
59
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["utils.ts"],"names":["springConfig","velocity","stiffness","damping","mass","overshootClamping","restDisplacementThreshold","restSpeedThreshold","clamp","value","lowerbound","upperbound","Math","min","max","rubberBandClamp","x","dim","coeff","rubberClamp","y","topBound","bottomBound","clampedY","diff","abs","sign","dimension"],"mappings":";;;;;;;;AAAO,MAAMA,YAAY,GAAIC,QAAD,IAAsB;AAChD;;AAEA,SAAO;AACLC,IAAAA,SAAS,EAAE,IADN;AAELC,IAAAA,OAAO,EAAE,GAFJ;AAGLC,IAAAA,IAAI,EAAE,CAHD;AAILC,IAAAA,iBAAiB,EAAE,IAJd;AAKLC,IAAAA,yBAAyB,EAAE,IALtB;AAMLC,IAAAA,kBAAkB,EAAE,IANf;AAOLN,IAAAA;AAPK,GAAP;AASD,CAZM;;;;AAcA,SAASO,KAAT,CAAeC,KAAf,EAA8BC,UAA9B,EAAkDC,UAAlD,EAAsE;AAC3E;;AAEA,SAAOC,IAAI,CAACC,GAAL,CAASD,IAAI,CAACE,GAAL,CAASL,KAAT,EAAgBC,UAAhB,CAAT,EAAsCC,UAAtC,CAAP;AACD;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAMI,eAAe,GAAG,CAACC,CAAD,EAAYC,GAAZ,EAAyBC,KAAzB,KAA2C;AACxE;;AAEA,SAAO,CAAC,MAAM,OAAQF,CAAC,GAAGE,KAAL,GAAcD,GAAd,GAAoB,GAA3B,CAAP,IAA0CA,GAAjD;AACD,CAJM;;;;AAMA,MAAME,WAAW,GAAG,CACzBC,CADyB,EAEzBC,QAFyB,EAGzBC,WAHyB,EAIzBJ,KAAK,GAAG,IAJiB,KAKtB;AACH;;AAEA,QAAMK,QAAQ,GAAGf,KAAK,CAACY,CAAD,EAAIC,QAAJ,EAAcC,WAAd,CAAtB;AACA,QAAME,IAAI,GAAGZ,IAAI,CAACa,GAAL,CAASL,CAAC,GAAGG,QAAb,CAAb;AACA,QAAMG,IAAI,GAAGH,QAAQ,GAAGH,CAAX,GAAe,CAAC,CAAhB,GAAoB,CAAjC;AACA,QAAMO,SAAS,GAAGL,WAAW,GAAGD,QAAhC;AAEA,SAAOE,QAAQ,GAAGG,IAAI,GAAGX,eAAe,CAACS,IAAD,EAAOG,SAAP,EAAkBT,KAAlB,CAAxC;AACD,CAdM","sourcesContent":["export const springConfig = (velocity: number) => {\n 'worklet';\n\n return {\n stiffness: 1000,\n damping: 500,\n mass: 3,\n overshootClamping: true,\n restDisplacementThreshold: 0.01,\n restSpeedThreshold: 0.01,\n velocity,\n };\n};\n\nexport function clamp(value: number, lowerbound: number, upperbound: number) {\n 'worklet';\n\n return Math.min(Math.max(value, lowerbound), upperbound);\n}\n\n/**\n * calculates rubber value\n *\n * @param x distance from the edge\n * @param dim dimension, either width or height\n * @param coeff constant value, UIScrollView uses 0.55\n * @returns rubber = (1.0 – (1.0 / ((x * coeff / dim) + 1.0))) * dim\n */\nexport const rubberBandClamp = (x: number, dim: number, coeff: number) => {\n 'worklet';\n\n return (1.0 - 1.0 / ((x * coeff) / dim + 1.0)) * dim;\n};\n\nexport const rubberClamp = (\n y: number,\n topBound: number,\n bottomBound: number,\n coeff = 0.55\n) => {\n 'worklet';\n\n const clampedY = clamp(y, topBound, bottomBound);\n const diff = Math.abs(y - clampedY);\n const sign = clampedY > y ? -1 : 1;\n const dimension = bottomBound - topBound;\n\n return clampedY + sign * rubberBandClamp(diff, dimension, coeff);\n};\n"]}
|
package/lib/commonjs/components/{CollapsibleFlatList.js → scrollable/CollapsibleFlatList.js}
RENAMED
|
@@ -11,13 +11,15 @@ var _reactNative = require("react-native");
|
|
|
11
11
|
|
|
12
12
|
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
|
|
13
13
|
|
|
14
|
-
var _AnimatedTopView = _interopRequireDefault(require("
|
|
14
|
+
var _AnimatedTopView = _interopRequireDefault(require("../header/AnimatedTopView"));
|
|
15
15
|
|
|
16
|
-
var _useAnimatedScroll = _interopRequireDefault(require("
|
|
16
|
+
var _useAnimatedScroll = _interopRequireDefault(require("./useAnimatedScroll"));
|
|
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
|
+
|
|
22
|
+
var _PullToRefreshContainer = _interopRequireDefault(require("../pullToRefresh/PullToRefreshContainer"));
|
|
21
23
|
|
|
22
24
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
23
25
|
|
|
@@ -33,13 +35,14 @@ function CollapsibleFlatList({
|
|
|
33
35
|
headerSnappable = true,
|
|
34
36
|
...props
|
|
35
37
|
}) {
|
|
36
|
-
const scrollView = (0, _react.useRef)(null);
|
|
37
38
|
const {
|
|
38
|
-
headerHeight
|
|
39
|
+
headerHeight,
|
|
40
|
+
scrollY
|
|
39
41
|
} = (0, _useCollapsibleContext.default)();
|
|
40
42
|
const {
|
|
41
43
|
contentMinHeight
|
|
42
|
-
} = (0, _useInternalCollapsibleContext.
|
|
44
|
+
} = (0, _useInternalCollapsibleContext.default)();
|
|
45
|
+
const scrollRef = (0, _react.useRef)(null);
|
|
43
46
|
const mounted = (0, _react.useRef)(true);
|
|
44
47
|
const contentHeight = (0, _react.useRef)(0);
|
|
45
48
|
(0, _react.useEffect)(() => {
|
|
@@ -48,13 +51,13 @@ function CollapsibleFlatList({
|
|
|
48
51
|
};
|
|
49
52
|
}, []);
|
|
50
53
|
const scrollTo = (0, _react.useCallback)((yValue, animated = true) => {
|
|
51
|
-
var
|
|
54
|
+
var _scrollRef$current;
|
|
52
55
|
|
|
53
|
-
(
|
|
56
|
+
(_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollToOffset({
|
|
54
57
|
offset: yValue,
|
|
55
58
|
animated
|
|
56
59
|
});
|
|
57
|
-
}, []);
|
|
60
|
+
}, [scrollRef]);
|
|
58
61
|
const handleInternalContentHeight = (0, _react.useCallback)(value => {
|
|
59
62
|
if (mounted.current) {
|
|
60
63
|
setInternalContentMinHeight(value);
|
|
@@ -87,23 +90,21 @@ function CollapsibleFlatList({
|
|
|
87
90
|
height: headerHeight
|
|
88
91
|
}), props.ListHeaderComponent);
|
|
89
92
|
|
|
90
|
-
return (
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
}))
|
|
106
|
-
);
|
|
93
|
+
return /*#__PURE__*/_react.default.createElement(_PullToRefreshContainer.default, {
|
|
94
|
+
scrollY: scrollY
|
|
95
|
+
}, /*#__PURE__*/_react.default.createElement(AnimatedFlatList, _extends({
|
|
96
|
+
ref: scrollRef,
|
|
97
|
+
bounces: false,
|
|
98
|
+
keyboardDismissMode: "on-drag",
|
|
99
|
+
keyboardShouldPersistTaps: "handled",
|
|
100
|
+
scrollEventThrottle: 1
|
|
101
|
+
}, props, {
|
|
102
|
+
style: [styles.container, props.style],
|
|
103
|
+
contentContainerStyle: contentContainerStyle,
|
|
104
|
+
onScroll: scrollHandler,
|
|
105
|
+
ListHeaderComponent: renderListHeader(),
|
|
106
|
+
onContentSizeChange: handleContentSizeChange
|
|
107
|
+
})));
|
|
107
108
|
}
|
|
108
109
|
|
|
109
110
|
const styles = _reactNative.StyleSheet.create({
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["CollapsibleFlatList.tsx"],"names":["AnimatedFlatList","Animated","createAnimatedComponent","FlatList","CollapsibleFlatList","headerSnappable","props","headerHeight","scrollY","contentMinHeight","scrollRef","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":";;;;;;;AAAA;;AAOA;;AACA;;AAIA;;AACA;;AACA;;AACA;;AAEA;;;;;;;;;;AAEA,MAAMA,gBAAgB,GAAGC,+BAASC,uBAAT,CAAiCC,qBAAjC,CAAzB;;AAKe,SAASC,mBAAT,CAAmC;AAChDC,EAAAA,eAAe,GAAG,IAD8B;AAEhD,KAAGC;AAF6C,CAAnC,EAGC;AACd,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,MAA4B,qCAAlC;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAuB,6CAA7B;AACA,QAAMC,SAAS,GAAG,mBAAY,IAAZ,CAAlB;AACA,QAAMC,OAAO,GAAG,mBAAO,IAAP,CAAhB;AACA,QAAMC,aAAa,GAAG,mBAAO,CAAP,CAAtB;AAEA,wBAAU,MAAM;AACd,WAAO,MAAM;AACXD,MAAAA,OAAO,CAACE,OAAR,GAAkB,KAAlB;AACD,KAFD;AAGD,GAJD,EAIG,EAJH;AAMA,QAAMC,QAAQ,GAAG,wBACf,CAACC,MAAD,EAAiBC,QAAQ,GAAG,IAA5B,KAAqC;AAAA;;AACnC,0BAAAN,SAAS,CAACG,OAAV,0EAAmBI,cAAnB,CAAkC;AAChCC,MAAAA,MAAM,EAAEH,MADwB;AAEhCC,MAAAA;AAFgC,KAAlC;AAID,GANc,EAOf,CAACN,SAAD,CAPe,CAAjB;AAUA,QAAMS,2BAA2B,GAAG,wBAAaC,KAAD,IAAmB;AACjE,QAAIT,OAAO,CAACE,OAAZ,EAAqB;AACnBQ,MAAAA,2BAA2B,CAACD,KAAD,CAA3B;AACD;AACF,GAJmC,EAIjC,EAJiC,CAApC;AAMA,QAAM;AAAEE,IAAAA;AAAF,MAAoB,gCAAkB;AAC1CjB,IAAAA,eAD0C;AAE1CS,IAAAA;AAF0C,GAAlB,CAA1B;AAKA,QAAM,CAACS,wBAAD,EAA2BF,2BAA3B,IAA0D,qBAC9DZ,gBAAgB,CAACW,KAD6C,CAAhE;AAIA,kDACE,MAAM;AACJ,WAAOX,gBAAgB,CAACW,KAAxB;AACD,GAHH,EAIE,CAACI,MAAD,EAASC,QAAT,KAAsB;AACpB,QAAID,MAAM,KAAKC,QAAf,EAAyB;AACvB,UACEb,aAAa,CAACC,OAAd,GAAwBJ,gBAAgB,CAACW,KAAzC,IACAG,wBAAwB,KAAKd,gBAAgB,CAACW,KAFhD,EAGE;AACA,4CAAQD,2BAAR,EAAqCV,gBAAgB,CAACW,KAAtD;AACD;AACF;AACF,GAbH;AAgBA,QAAMM,qBAAqB,GAAG,oBAC5B,MAAM,CACJC,MAAM,CAACC,gBADH,EAEJ;AAAEC,IAAAA,SAAS,EAAEN;AAAb,GAFI,EAGJjB,KAAK,CAACoB,qBAHF,CADsB,EAM5B,CAACpB,KAAK,CAACoB,qBAAP,EAA8BH,wBAA9B,CAN4B,CAA9B;AASA,QAAMO,uBAAuB,GAAG,wBAAY,CAACC,CAAD,EAAIC,MAAJ,KAAe;AACzDpB,IAAAA,aAAa,CAACC,OAAd,GAAwBmB,MAAxB;AACD,GAF+B,EAE7B,EAF6B,CAAhC;;AAIA,QAAMC,gBAAgB,GAAG,mBACvB,6BAAC,iBAAD,qBACE,6BAAC,wBAAD;AAAiB,IAAA,MAAM,EAAE1B;AAAzB,IADF,EAEGD,KAAK,CAAC4B,mBAFT,CADF;;AAOA,sBACE,6BAAC,+BAAD;AAAwB,IAAA,OAAO,EAAE1B;AAAjC,kBAEE,6BAAC,gBAAD;AACE,IAAA,GAAG,EAAEE,SADP;AAEE,IAAA,OAAO,EAAE,KAFX;AAGE,IAAA,mBAAmB,EAAC,SAHtB;AAIE,IAAA,yBAAyB,EAAC,SAJ5B;AAKE,IAAA,mBAAmB,EAAE;AALvB,KAMMJ,KANN;AAOE,IAAA,KAAK,EAAE,CAACqB,MAAM,CAACQ,SAAR,EAAmB7B,KAAK,CAAC8B,KAAzB,CAPT;AAQE,IAAA,qBAAqB,EAAEV,qBARzB;AASE,IAAA,QAAQ,EAAEJ,aATZ;AAUE,IAAA,mBAAmB,EAAEW,gBAAgB,EAVvC;AAWE,IAAA,mBAAmB,EAAEH;AAXvB,KAFF,CADF;AAkBD;;AAED,MAAMH,MAAM,GAAGU,wBAAWC,MAAX,CAAkB;AAC/BH,EAAAA,SAAS,EAAE,EACT,GAAGE,wBAAWE;AADL,GADoB;AAI/BX,EAAAA,gBAAgB,EAAE;AAChBY,IAAAA,QAAQ,EAAE;AADM,GAJa;AAO/BC,EAAAA,OAAO,EAAE;AACPC,IAAAA,QAAQ,EAAE,UADH;AAEPC,IAAAA,GAAG,EAAE,CAFE;AAGPC,IAAAA,IAAI,EAAE,CAHC;AAIPC,IAAAA,KAAK,EAAE;AAJA;AAPsB,CAAlB,CAAf","sourcesContent":["import 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 } = useInternalCollapsibleContext();\n const scrollRef = useRef<any>(null);\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(\n (yValue: number, animated = true) => {\n scrollRef.current?.scrollToOffset({\n offset: yValue,\n animated,\n });\n },\n [scrollRef]\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={scrollRef}\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
|
|
|
@@ -35,7 +35,7 @@ function CollapsibleScrollView({
|
|
|
35
35
|
const scrollView = (0, _react.useRef)(null);
|
|
36
36
|
const {
|
|
37
37
|
contentMinHeight
|
|
38
|
-
} = (0, _useInternalCollapsibleContext.
|
|
38
|
+
} = (0, _useInternalCollapsibleContext.default)();
|
|
39
39
|
const {
|
|
40
40
|
headerHeight
|
|
41
41
|
} = (0, _useCollapsibleContext.default)();
|
|
@@ -69,7 +69,7 @@ function CollapsibleScrollView({
|
|
|
69
69
|
onScroll: scrollHandler,
|
|
70
70
|
keyboardDismissMode: "on-drag",
|
|
71
71
|
keyboardShouldPersistTaps: "handled",
|
|
72
|
-
scrollEventThrottle:
|
|
72
|
+
scrollEventThrottle: 1
|
|
73
73
|
}), /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
|
|
74
74
|
style: animatedStyle
|
|
75
75
|
}, /*#__PURE__*/_react.default.createElement(_AnimatedTopView.default, {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["CollapsibleScrollView.tsx"],"names":["CollapsibleScrollView","headerSnappable","children","props","scrollView","contentMinHeight","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":";;;;;;;AAAA;;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,QAAMC,UAAU,GAAG,mBAA4B,IAA5B,CAAnB;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAuB,6CAA7B;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAmB,qCAAzB;AAEA,QAAMC,QAAQ,GAAG,wBAAY,CAACC,MAAD,EAAiBC,QAAQ,GAAG,IAA5B,KAAqC;AAAA;;AAChE;AACA,2BAAAL,UAAU,CAACM,OAAX,4EAAoBH,QAApB,CAA6B;AAAEI,MAAAA,CAAC,EAAEH,MAAL;AAAaC,MAAAA;AAAb,KAA7B;AACD,GAHgB,EAGd,EAHc,CAAjB;AAKA,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,EAAET,gBAAgB,CAACU;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,EAAEZ,UADP;AAEE,IAAA,OAAO,EAAE;AAFX,KAGMD,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":["import AnimatedTopView from '../header/AnimatedTopView';\nimport useAnimatedScroll from './useAnimatedScroll';\nimport React, { ReactNode, useCallback, useMemo, useRef } 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 scrollView = useRef<Animated.ScrollView>(null);\n const { contentMinHeight } = useInternalCollapsibleContext();\n const { headerHeight } = useCollapsibleContext();\n\n const scrollTo = useCallback((yValue: number, animated = true) => {\n // @ts-ignore\n scrollView.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={scrollView}\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));
|