@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
|
@@ -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"]}
|
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"]}
|
|
File without changes
|
|
@@ -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
|
|
|
@@ -172,7 +176,7 @@ function withCollapsibleContext(Component) {
|
|
|
172
176
|
value: context
|
|
173
177
|
}, /*#__PURE__*/_react.default.createElement(_useInternalCollapsibleContext.InternalCollapsibleContext.Provider, {
|
|
174
178
|
value: internalContext
|
|
175
|
-
}, /*#__PURE__*/_react.default.createElement(Component, props)));
|
|
179
|
+
}, /*#__PURE__*/_react.default.createElement(_PullToRefreshProvider.default, null, /*#__PURE__*/_react.default.createElement(Component, props))));
|
|
176
180
|
};
|
|
177
181
|
}
|
|
178
182
|
//# sourceMappingURL=withCollapsibleContext.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["withCollapsibleContext.tsx"],"names":["withCollapsibleContext","Component","props","collapsibleHandlers","headerHeight","scrollY","stickyViewRefs","stickyViewTops","stickyViewPositionsRef","stickyViewPositions","fixedHeaderHeight","stickyHeaderHeight","containerHeight","firstStickyViewY","headerContainersHeight","containerRef","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":";;;;;;;AAEA;;AAEA;;AACA;;AACA;;AAOA;;;;;;AAbA;;AACA;AAce,SAASA,sBAAT,CAAmCC,SAAnC,EAAqD;AAClE,SAAQC,KAAD,IAAc;AACnB,UAAMC,mBAAmB,GAAG,oBAA5B;AACA,UAAMC,YAAY,GAAG,2CAAe,CAAf,CAArB;AACA,UAAMC,OAAO,GAAG,2CAAe,CAAf,CAAhB;AACA,UAAMC,cAAc,GAAG,mBAA8C,EAA9C,CAAvB;AACA,UAAMC,cAAc,GAAG,2CAAuC,EAAvC,CAAvB;AACA,UAAMC,sBAAsB,GAAG,mBAAqC,EAArC,CAA/B;AACA,UAAMC,mBAAmB,GAAG,2CAC1B,EAD0B,CAA5B;AAGA,UAAMC,iBAAiB,GAAG,2CAAe,CAAf,CAA1B;AACA,UAAMC,kBAAkB,GAAG,2CAAe,CAAf,CAA3B;AACA,UAAMC,eAAe,GAAG,2CAAe,CAAf,CAAxB;AACA,UAAMC,gBAAgB,GAAG,2CAAe,OAAf,CAAzB;AACA,UAAMC,sBAAsB,GAAG,mBAA+B,EAA/B,CAA/B;AACA,UAAMC,YAAY,GAAG,mBAAa,IAAb,CAArB;AAEA,UAAMC,sBAAsB,GAAG,wBAAaC,QAAD,IAAc;AACvDd,MAAAA,mBAAmB,CAACe,OAApB,GAA8BD,QAA9B;AACD,KAF8B,EAE5B,EAF4B,CAA/B;AAIA,UAAME,eAAe,GAAG,4CAAgB,MAAM;AAC5C,YAAMC,IAAI,GAAGV,iBAAiB,CAACW,KAAlB,GAA0BR,gBAAgB,CAACQ,KAAxD;AACA,aAAOhB,OAAO,CAACgB,KAAR,IAAiBD,IAAxB;AACD,KAHuB,EAGrB,EAHqB,CAAxB;AAKA,UAAME,gBAAgB,GAAG,4CAAgB,MAAM;AAC7C,aACEV,eAAe,CAACS,KAAhB,GACAX,iBAAiB,CAACW,KADlB,GAEAV,kBAAkB,CAACU,KAHrB;AAKD,KANwB,EAMtB,EANsB,CAAzB;AAQA,oDACE,MAAM;AACJ,YAAME,WAAW,GAAGC,MAAM,CAACC,IAAP,CAAYhB,mBAAmB,CAACY,KAAhC,EAAuCK,MAAvC,CAClB,CAACC,GAAD,EAAMC,IAAN,KAAe;AACb,eAAOD,GAAG,GAAGlB,mBAAmB,CAACY,KAApB,CAA0BO,IAA1B,EAAgCC,GAA7C;AACD,OAHiB,EAIlB,CAJkB,CAApB;AAMA,aAAON,WAAW,GAAGb,iBAAiB,CAACW,KAAvC;AACD,KATH,EAUE,CAACS,MAAD,EAASC,QAAT,KAAsB;AACpB,UAAID,MAAM,KAAKC,QAAf,EAAyB;AAAA;;AACvB,cAAMC,aAAa,GAAGvB,mBAAmB,CAACY,KAA1C;AACA,cAAMjB,YAAY,GAAGM,iBAAiB,CAACW,KAAvC;AACA,cAAMY,UAAU,GAAGT,MAAM,CAACC,IAAP,CAAYO,aAAZ,EAA2BE,IAA3B,CACjB,CAACC,CAAD,EAAIC,CAAJ,KAAUJ,aAAa,CAACG,CAAD,CAAb,CAAiBN,GAAjB,GAAuBG,aAAa,CAACI,CAAD,CAAb,CAAiBP,GADjC,CAAnB;AAGA,YAAIQ,QAAQ,GAAG,CAAf;AACA,cAAMC,MAAW,GAAG,EAApB;;AACA,aAAK,IAAIC,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGN,UAAU,CAACO,MAA/B,EAAuCD,CAAC,EAAxC,EAA4C;AAC1CD,UAAAA,MAAM,CAACL,UAAU,CAACM,CAAD,CAAX,CAAN,GAAwBF,QAAxB,CAD0C,CAE1C;AACA;;AACAA,UAAAA,QAAQ,IAAIL,aAAa,CAACC,UAAU,CAACM,CAAD,CAAX,CAAb,CAA6BE,MAA7B,GAAsC,CAAlD;AACD;;AACDlC,QAAAA,cAAc,CAACc,KAAf,GAAuBiB,MAAvB;AACAzB,QAAAA,gBAAgB,CAACQ,KAAjB,GAAyB,0BAAAW,aAAa,CAACC,UAAU,CAAC,CAAD,CAAX,CAAb,gFAA8BJ,GAA9B,KAAqC,CAA9D;AACA,cAAMa,YAAY,GAAGT,UAAU,CAACP,MAAX,CAAkB,CAACC,GAAD,EAAMgB,GAAN,KAAc;AACnD,gBAAMC,IAAI,GAAGZ,aAAa,CAACW,GAAD,CAA1B;AACA,gBAAME,cAAc,GAAGD,IAAI,CAACf,GAAL,GAAWzB,YAAlC;;AACA,cAAIyC,cAAJ,EAAoB;AAClB,mBAAOlB,GAAG,GAAGiB,IAAI,CAACH,MAAlB;AACD;;AACD,iBAAOd,GAAP;AACD,SAPoB,EAOlB,CAPkB,CAArB;AAQAhB,QAAAA,kBAAkB,CAACU,KAAnB,GAA2BqB,YAA3B;AACD;AACF,KArCH;AAwCA,UAAMI,sBAAsB,GAAG,wBAC7B,CAACC,OAAD,EAAkBC,OAAlB,KAAsD;AACpD,UAAIA,OAAO,IAAIA,OAAO,CAAC9B,OAAnB,IAA8BH,YAAY,CAACG,OAA/C,EAAwD;AACtDZ,QAAAA,cAAc,CAACY,OAAf,CAAuB6B,OAAvB,IAAkCC,OAAlC;AACAA,QAAAA,OAAO,CAAC9B,OAAR,CAAgB+B,aAAhB,EACE;AACAlC,QAAAA,YAAY,CAACG,OAFf,EAGE,CAACgC,IAAD,EAAOrB,GAAP,EAAYsB,KAAZ,EAAmBV,MAAnB,KAA8B;AAC5BjC,UAAAA,sBAAsB,CAACU,OAAvB,GAAiC,EAC/B,GAAGV,sBAAsB,CAACU,OADK;AAE/B,aAAC6B,OAAD,GAAW;AAAEG,cAAAA,IAAF;AAAQrB,cAAAA,GAAR;AAAasB,cAAAA,KAAb;AAAoBV,cAAAA;AAApB;AAFoB,WAAjC;AAIAhC,UAAAA,mBAAmB,CAACY,KAApB,GAA4Bb,sBAAsB,CAACU,OAAnD;AACD,SATH,EAUE,MAAM,CAAE,CAVV;AAYD,OAdD,MAcO;AACL,eAAOZ,cAAc,CAACY,OAAf,CAAuB6B,OAAvB,CAAP;AACA,eAAOvC,sBAAsB,CAACU,OAAvB,CAA+B6B,OAA/B,CAAP;AACAtC,QAAAA,mBAAmB,CAACY,KAApB,GAA4Bb,sBAAsB,CAACU,OAAnD;AACD;AACF,KArB4B,EAsB7B,EAtB6B,CAA/B;AAyBA,UAAMkC,8BAA8B,GAAG,oBAAQ,MAAM;AACnD,aAAO,wBAAS,MAAM;AACpB5B,QAAAA,MAAM,CAACC,IAAP,CAAYnB,cAAc,CAACY,OAA3B,EAAoCmC,OAApC,CAA6CV,GAAD,IAAS;AACnD,gBAAMK,OAAO,GAAG1C,cAAc,CAACY,OAAf,CAAuByB,GAAvB,CAAhB;;AACA,cAAIK,OAAJ,EAAa;AACXF,YAAAA,sBAAsB,CAACH,GAAD,EAAMK,OAAN,CAAtB;AACD;AACF,SALD;AAMD,OAPM,EAOJ,GAPI,CAAP;AAQD,KATsC,EASpC,EAToC,CAAvC;AAWA,UAAMM,2BAA2B,GAAG,wBAClC,CAACP,OAAD,EAAkBN,MAAlB,KAAsC;AACpC,UAAI,CAACA,MAAL,EAAa;AACX,eAAO3B,sBAAsB,CAACI,OAAvB,CAA+B6B,OAA/B,CAAP;AACD,OAFD,MAEO;AACLjC,QAAAA,sBAAsB,CAACI,OAAvB,CAA+B6B,OAA/B,IAA0CN,MAA1C;AACD;;AACD,YAAMlB,WAAW,GAAGC,MAAM,CAACC,IAAP,CAAYX,sBAAsB,CAACI,OAAnC,EAA4CQ,MAA5C,CAClB,CAACC,GAAD,EAAMgB,GAAN,KAAc7B,sBAAsB,CAACI,OAAvB,CAA+ByB,GAA/B,IAAsChB,GADlC,EAElB,CAFkB,CAApB;AAIAvB,MAAAA,YAAY,CAACiB,KAAb,GAAqB,uCAAWE,WAAX,EAAwB;AAC3CgC,QAAAA,QAAQ,EAAE7C,iBAAiB,CAACW,KAAlB,KAA4B,CAA5B,GAAgC,CAAhC,GAAoC;AADH,OAAxB,CAArB;AAGAX,MAAAA,iBAAiB,CAACW,KAAlB,GAA0BE,WAA1B,CAboC,CAcpC;;AACA6B,MAAAA,8BAA8B;AAC/B,KAjBiC,EAkBlC,EAlBkC,CAApC;AAqBA,UAAMI,qBAAqB,GAAG,wBAAaf,MAAD,IAAoB;AAC5D7B,MAAAA,eAAe,CAACS,KAAhB,GAAwBoB,MAAxB;AACD,KAF6B,EAE3B,EAF2B,CAA9B;AAIA,UAAMgB,OAAO,GAAG,oBAAQ,MAAM;AAC5B,aAAO;AACLC,QAAAA,QAAQ,EAAE;AAAA;;AAAA,0CAAMvD,mBAAmB,CAACe,OAA1B,0DAAM,sBAA6BwC,QAA7B,EAAN;AAAA,SADL;AAELC,QAAAA,MAAM,EAAE;AAAA;;AAAA,2CAAMxD,mBAAmB,CAACe,OAA1B,2DAAM,uBAA6ByC,MAA7B,EAAN;AAAA,SAFH;AAGLC,QAAAA,QAAQ,EAAE,CAACC,MAAD,EAAiBC,OAAjB;AAAA;;AAAA,2CACR3D,mBAAmB,CAACe,OADZ,2DACR,uBAA6B0C,QAA7B,CAAsCC,MAAtC,EAA8CC,OAA9C,CADQ;AAAA,SAHL;AAKL1D,QAAAA,YALK;AAMLC,QAAAA,OANK;AAOLc,QAAAA;AAPK,OAAP;AASD,KAVe,EAUb,CAACd,OAAD,EAAUD,YAAV,EAAwBe,eAAxB,CAVa,CAAhB;AAYA,UAAM4C,eAAe,GAAG,oBACtB,OAAO;AACLhD,MAAAA,YADK;AAEL+B,MAAAA,sBAFK;AAGLQ,MAAAA,2BAHK;AAILtC,MAAAA,sBAJK;AAKLwC,MAAAA,qBALK;AAML3C,MAAAA,gBANK;AAOLN,MAAAA,cAPK;AAQLE,MAAAA,mBARK;AASLC,MAAAA,iBATK;AAULY,MAAAA;AAVK,KAAP,CADsB,EAatB,CACEN,sBADF,EAEE8B,sBAFF,EAGEQ,2BAHF,EAIEE,qBAJF,EAKE3C,gBALF,EAMEN,cANF,EAOEE,mBAPF,EAQEC,iBARF,EASEY,gBATF,CAbsB,CAAxB;AA0BA,wBACE,6BAAC,yCAAD,CAAoB,QAApB;AAA6B,MAAA,KAAK,EAAEmC;AAApC,oBACE,6BAAC,yDAAD,CAA4B,QAA5B;AAAqC,MAAA,KAAK,EAAEM;AAA5C,oBACE,6BAAC,SAAD,EAAe7D,KAAf,CADF,CADF,CADF;AAOD,GApLD;AAqLD","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 './useCollapsibleContext';\nimport { InternalCollapsibleContext } from './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';\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\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 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 <Component {...props} />\n </InternalCollapsibleContext.Provider>\n </CollapsibleContext.Provider>\n );\n };\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["withCollapsibleContext.tsx"],"names":["withCollapsibleContext","Component","props","collapsibleHandlers","headerHeight","scrollY","stickyViewRefs","stickyViewTops","stickyViewPositionsRef","stickyViewPositions","fixedHeaderHeight","stickyHeaderHeight","containerHeight","firstStickyViewY","headerContainersHeight","containerRef","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\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 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"]}
|
|
@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
2
2
|
|
|
3
3
|
import React, { useCallback } from 'react';
|
|
4
4
|
import { StyleSheet, View } from 'react-native';
|
|
5
|
-
import
|
|
5
|
+
import useInternalCollapsibleContext from '../hooks/useInternalCollapsibleContext';
|
|
6
6
|
export default function CollapsibleContainer({
|
|
7
7
|
children,
|
|
8
8
|
...props
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["CollapsibleContainer.tsx"],"names":["React","useCallback","StyleSheet","View","useInternalCollapsibleContext","CollapsibleContainer","children","props","containerRef","handleContainerHeight","handleContainerLayout","layout","height","nativeEvent","styles","container","style","create","flex","overflow"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,WAAhB,QAAmC,OAAnC;AACA,SAA4BC,UAA5B,EAAwCC,IAAxC,QAA+D,cAA/D;AACA,
|
|
1
|
+
{"version":3,"sources":["CollapsibleContainer.tsx"],"names":["React","useCallback","StyleSheet","View","useInternalCollapsibleContext","CollapsibleContainer","children","props","containerRef","handleContainerHeight","handleContainerLayout","layout","height","nativeEvent","styles","container","style","create","flex","overflow"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,WAAhB,QAAmC,OAAnC;AACA,SAA4BC,UAA5B,EAAwCC,IAAxC,QAA+D,cAA/D;AACA,OAAOC,6BAAP,MAA0C,wCAA1C;AAMA,eAAe,SAASC,oBAAT,CAA8B;AAAEC,EAAAA,QAAF;AAAY,KAAGC;AAAf,CAA9B,EAA6D;AAC1E,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,MACJL,6BAA6B,EAD/B;AAGA,QAAMM,qBAAqB,GAAGT,WAAW,CACtCU,MAAD,IAA+B;AAC7B,UAAMC,MAAM,GAAGD,MAAM,CAACE,WAAP,CAAmBF,MAAnB,CAA0BC,MAAzC;AACAH,IAAAA,qBAAqB,CAACG,MAAD,CAArB;AACD,GAJsC,EAKvC,CAACH,qBAAD,CALuC,CAAzC;AAQA,sBACE,oBAAC,IAAD,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,GAAGZ,UAAU,CAACe,MAAX,CAAkB;AAC/BF,EAAAA,SAAS,EAAE;AACTG,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
|
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
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,
|
|
@@ -1 +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":"AAAA;AACA,
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["PullToRefreshContainer.tsx"],"names":["NativeViewGestureHandler","PanGestureHandler","React","useRef","Animated","useAnimatedGestureHandler","withTiming","usePullToRefreshContext","StyleSheet","rubberClamp","PullToRefreshContainer","children","scrollY","scrollRef","panRef","refreshValue","internalRefreshing","internalHeight","gestureHandler","onStart","_","ctx","startY","value","onActive","event","tranY","translationY","clampedValue","onEnd","absoluteFill"],"mappings":"AAAA,SACEA,wBADF,EAEEC,iBAFF,QAGO,8BAHP;AAIA,OAAOC,KAAP,IAAgBC,MAAhB,QAA8B,OAA9B;AACA,OAAOC,QAAP,IACEC,yBADF,EAEEC,UAFF,QAGO,yBAHP;AAIA,OAAOC,uBAAP,MAAoC,2BAApC;AACA,SAASC,UAAT,QAA2B,cAA3B;AACA,SAASC,WAAT,QAA4B,SAA5B;AAOA,eAAe,SAASC,sBAAT,CAAgC;AAAEC,EAAAA,QAAF;AAAYC,EAAAA;AAAZ,CAAhC,EAA8D;AAC3E,QAAMC,SAAS,GAAGV,MAAM,EAAxB;AACA,QAAMW,MAAM,GAAGX,MAAM,EAArB;AACA,QAAM;AAAEY,IAAAA,YAAF;AAAgBC,IAAAA,kBAAhB;AAAoCC,IAAAA;AAApC,MACJV,uBAAuB,EADzB;AAGA,QAAMW,cAAc,GAAGb,yBAAyB,CAAC;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,GAAGnB,WAAW,CAACiB,KAAD,EAAQ,CAAR,EAAWT,cAAc,CAACM,KAA1B,CAAhC;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,GAAqBjB,UAAU,CAACiB,KAAD,CAA/B;AACD;AACF;AArB8C,GAAD,CAAhD;AAwBA,sBACE,oBAAC,iBAAD;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,oBAAC,QAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAEV,UAAU,CAACsB;AAAjC,kBACE,oBAAC,wBAAD;AAA0B,IAAA,GAAG,EAAEjB,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,21 @@
|
|
|
1
|
+
import React, { useMemo } from 'react';
|
|
2
|
+
import { useSharedValue } from 'react-native-reanimated';
|
|
3
|
+
import { PullToRefreshContext } from './usePullToRefreshContext';
|
|
4
|
+
export default function PullToRefreshProvider({
|
|
5
|
+
children
|
|
6
|
+
}) {
|
|
7
|
+
const refreshValue = useSharedValue(0);
|
|
8
|
+
const internalRefreshing = useSharedValue(false);
|
|
9
|
+
const internalHeight = useSharedValue(0);
|
|
10
|
+
const context = useMemo(() => {
|
|
11
|
+
return {
|
|
12
|
+
refreshValue: refreshValue,
|
|
13
|
+
internalRefreshing,
|
|
14
|
+
internalHeight
|
|
15
|
+
};
|
|
16
|
+
}, [refreshValue, internalRefreshing, internalHeight]);
|
|
17
|
+
return /*#__PURE__*/React.createElement(PullToRefreshContext.Provider, {
|
|
18
|
+
value: context
|
|
19
|
+
}, children);
|
|
20
|
+
}
|
|
21
|
+
//# sourceMappingURL=PullToRefreshProvider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["PullToRefreshProvider.tsx"],"names":["React","useMemo","useSharedValue","PullToRefreshContext","PullToRefreshProvider","children","refreshValue","internalRefreshing","internalHeight","context"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,OAAhB,QAA+B,OAA/B;AACA,SAASC,cAAT,QAA+B,yBAA/B;AACA,SAASC,oBAAT,QAAqC,2BAArC;AAMA,eAAe,SAASC,qBAAT,CAA+B;AAAEC,EAAAA;AAAF,CAA/B,EAAoD;AACjE,QAAMC,YAAY,GAAGJ,cAAc,CAAC,CAAD,CAAnC;AACA,QAAMK,kBAAkB,GAAGL,cAAc,CAAC,KAAD,CAAzC;AACA,QAAMM,cAAc,GAAGN,cAAc,CAAC,CAAD,CAArC;AAEA,QAAMO,OAAO,GAAGR,OAAO,CAAC,MAAM;AAC5B,WAAO;AACLK,MAAAA,YAAY,EAAEA,YADT;AAELC,MAAAA,kBAFK;AAGLC,MAAAA;AAHK,KAAP;AAKD,GANsB,EAMpB,CAACF,YAAD,EAAeC,kBAAf,EAAmCC,cAAnC,CANoB,CAAvB;AAQA,sBACE,oBAAC,oBAAD,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,55 @@
|
|
|
1
|
+
/* eslint-disable react-hooks/exhaustive-deps */
|
|
2
|
+
import React, { useCallback, useEffect } from 'react';
|
|
3
|
+
import { StyleSheet } from 'react-native';
|
|
4
|
+
import Animated, { runOnJS, useAnimatedProps, useAnimatedReaction, useAnimatedStyle, withTiming } from 'react-native-reanimated';
|
|
5
|
+
import usePullToRefreshContext from './usePullToRefreshContext';
|
|
6
|
+
export default function RefreshControl({
|
|
7
|
+
height = 100,
|
|
8
|
+
refreshing,
|
|
9
|
+
onRefresh,
|
|
10
|
+
renderAnimation
|
|
11
|
+
}) {
|
|
12
|
+
const {
|
|
13
|
+
refreshValue,
|
|
14
|
+
internalRefreshing,
|
|
15
|
+
internalHeight
|
|
16
|
+
} = usePullToRefreshContext();
|
|
17
|
+
useEffect(() => {
|
|
18
|
+
internalHeight.value = height;
|
|
19
|
+
}, [height]);
|
|
20
|
+
useEffect(() => {
|
|
21
|
+
internalRefreshing.value = refreshing;
|
|
22
|
+
}, [refreshing]);
|
|
23
|
+
const animatedStyle = useAnimatedStyle(() => {
|
|
24
|
+
return {
|
|
25
|
+
height: refreshValue.value
|
|
26
|
+
};
|
|
27
|
+
}, []);
|
|
28
|
+
const handleRefresh = useCallback(() => {
|
|
29
|
+
console.log('refresh');
|
|
30
|
+
onRefresh();
|
|
31
|
+
}, [onRefresh]);
|
|
32
|
+
useAnimatedReaction(() => internalRefreshing.value, (result, prev) => {
|
|
33
|
+
if (result !== prev) {
|
|
34
|
+
if (result) {
|
|
35
|
+
runOnJS(handleRefresh)();
|
|
36
|
+
} else {
|
|
37
|
+
refreshValue.value = withTiming(0);
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
const animatedProps = useAnimatedProps(() => {
|
|
42
|
+
return {
|
|
43
|
+
progress: internalRefreshing.value ? undefined : Math.min(refreshValue.value / height, 1)
|
|
44
|
+
};
|
|
45
|
+
}, [height]);
|
|
46
|
+
return /*#__PURE__*/React.createElement(Animated.View, {
|
|
47
|
+
style: [styles.container, animatedStyle]
|
|
48
|
+
}, renderAnimation(animatedProps));
|
|
49
|
+
}
|
|
50
|
+
const styles = StyleSheet.create({
|
|
51
|
+
container: {
|
|
52
|
+
overflow: 'hidden'
|
|
53
|
+
}
|
|
54
|
+
});
|
|
55
|
+
//# sourceMappingURL=RefreshControl.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["RefreshControl.tsx"],"names":["React","useCallback","useEffect","StyleSheet","Animated","runOnJS","useAnimatedProps","useAnimatedReaction","useAnimatedStyle","withTiming","usePullToRefreshContext","RefreshControl","height","refreshing","onRefresh","renderAnimation","refreshValue","internalRefreshing","internalHeight","value","animatedStyle","handleRefresh","console","log","result","prev","animatedProps","progress","undefined","Math","min","styles","container","create","overflow"],"mappings":"AAAA;AACA,OAAOA,KAAP,IAAgBC,WAAhB,EAA6BC,SAA7B,QAA8C,OAA9C;AACA,SAASC,UAAT,QAA2B,cAA3B;AACA,OAAOC,QAAP,IACEC,OADF,EAEEC,gBAFF,EAGEC,mBAHF,EAIEC,gBAJF,EAKEC,UALF,QAMO,yBANP;AAOA,OAAOC,uBAAP,MAAoC,2BAApC;AASA,eAAe,SAASC,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,MACJR,uBAAuB,EADzB;AAGAR,EAAAA,SAAS,CAAC,MAAM;AACdgB,IAAAA,cAAc,CAACC,KAAf,GAAuBP,MAAvB;AACD,GAFQ,EAEN,CAACA,MAAD,CAFM,CAAT;AAIAV,EAAAA,SAAS,CAAC,MAAM;AACde,IAAAA,kBAAkB,CAACE,KAAnB,GAA2BN,UAA3B;AACD,GAFQ,EAEN,CAACA,UAAD,CAFM,CAAT;AAIA,QAAMO,aAAa,GAAGZ,gBAAgB,CAAC,MAAM;AAC3C,WAAO;AACLI,MAAAA,MAAM,EAAEI,YAAY,CAACG;AADhB,KAAP;AAGD,GAJqC,EAInC,EAJmC,CAAtC;AAMA,QAAME,aAAa,GAAGpB,WAAW,CAAC,MAAM;AACtCqB,IAAAA,OAAO,CAACC,GAAR,CAAY,SAAZ;AACAT,IAAAA,SAAS;AACV,GAHgC,EAG9B,CAACA,SAAD,CAH8B,CAAjC;AAKAP,EAAAA,mBAAmB,CACjB,MAAMU,kBAAkB,CAACE,KADR,EAEjB,CAACK,MAAD,EAASC,IAAT,KAAkB;AAChB,QAAID,MAAM,KAAKC,IAAf,EAAqB;AACnB,UAAID,MAAJ,EAAY;AACVnB,QAAAA,OAAO,CAACgB,aAAD,CAAP;AACD,OAFD,MAEO;AACLL,QAAAA,YAAY,CAACG,KAAb,GAAqBV,UAAU,CAAC,CAAD,CAA/B;AACD;AACF;AACF,GAVgB,CAAnB;AAaA,QAAMiB,aAAa,GAAGpB,gBAAgB,CAAC,MAAM;AAC3C,WAAO;AACLqB,MAAAA,QAAQ,EAAEV,kBAAkB,CAACE,KAAnB,GACNS,SADM,GAENC,IAAI,CAACC,GAAL,CAASd,YAAY,CAACG,KAAb,GAAqBP,MAA9B,EAAsC,CAAtC;AAHC,KAAP;AAKD,GANqC,EAMnC,CAACA,MAAD,CANmC,CAAtC;AAQA,sBACE,oBAAC,QAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAE,CAACmB,MAAM,CAACC,SAAR,EAAmBZ,aAAnB;AAAtB,KACGL,eAAe,CAACW,aAAD,CADlB,CADF;AAKD;AAED,MAAMK,MAAM,GAAG5B,UAAU,CAAC8B,MAAX,CAAkB;AAC/BD,EAAAA,SAAS,EAAE;AACTE,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,13 @@
|
|
|
1
|
+
import { createContext, useContext } from 'react';
|
|
2
|
+
// @ts-ignore
|
|
3
|
+
export const PullToRefreshContext = /*#__PURE__*/createContext({});
|
|
4
|
+
export default function usePullToRefreshContext() {
|
|
5
|
+
const ctx = useContext(PullToRefreshContext);
|
|
6
|
+
|
|
7
|
+
if (!ctx) {
|
|
8
|
+
throw new Error('Component should be wrapped with withCollapsibleContext');
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
return ctx;
|
|
12
|
+
}
|
|
13
|
+
//# sourceMappingURL=usePullToRefreshContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["usePullToRefreshContext.ts"],"names":["createContext","useContext","PullToRefreshContext","usePullToRefreshContext","ctx","Error"],"mappings":"AAAA,SAASA,aAAT,EAAwBC,UAAxB,QAA0C,OAA1C;AAGA;AACA,OAAO,MAAMC,oBAAoB,gBAAGF,aAAa,CAA2B,EAA3B,CAA1C;AAEP,eAAe,SAASG,uBAAT,GAAmC;AAChD,QAAMC,GAAG,GAAGH,UAAU,CAACC,oBAAD,CAAtB;;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,42 @@
|
|
|
1
|
+
export const springConfig = velocity => {
|
|
2
|
+
'worklet';
|
|
3
|
+
|
|
4
|
+
return {
|
|
5
|
+
stiffness: 1000,
|
|
6
|
+
damping: 500,
|
|
7
|
+
mass: 3,
|
|
8
|
+
overshootClamping: true,
|
|
9
|
+
restDisplacementThreshold: 0.01,
|
|
10
|
+
restSpeedThreshold: 0.01,
|
|
11
|
+
velocity
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
export function clamp(value, lowerbound, upperbound) {
|
|
15
|
+
'worklet';
|
|
16
|
+
|
|
17
|
+
return Math.min(Math.max(value, lowerbound), upperbound);
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* calculates rubber value
|
|
21
|
+
*
|
|
22
|
+
* @param x distance from the edge
|
|
23
|
+
* @param dim dimension, either width or height
|
|
24
|
+
* @param coeff constant value, UIScrollView uses 0.55
|
|
25
|
+
* @returns rubber = (1.0 – (1.0 / ((x * coeff / dim) + 1.0))) * dim
|
|
26
|
+
*/
|
|
27
|
+
|
|
28
|
+
export const rubberBandClamp = (x, dim, coeff) => {
|
|
29
|
+
'worklet';
|
|
30
|
+
|
|
31
|
+
return (1.0 - 1.0 / (x * coeff / dim + 1.0)) * dim;
|
|
32
|
+
};
|
|
33
|
+
export const rubberClamp = (y, topBound, bottomBound, coeff = 0.55) => {
|
|
34
|
+
'worklet';
|
|
35
|
+
|
|
36
|
+
const clampedY = clamp(y, topBound, bottomBound);
|
|
37
|
+
const diff = Math.abs(y - clampedY);
|
|
38
|
+
const sign = clampedY > y ? -1 : 1;
|
|
39
|
+
const dimension = bottomBound - topBound;
|
|
40
|
+
return clampedY + sign * rubberBandClamp(diff, dimension, coeff);
|
|
41
|
+
};
|
|
42
|
+
//# 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":"AAAA,OAAO,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;AAcP,OAAO,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;;AACA,OAAO,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;AAMP,OAAO,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"]}
|