@r0b0t3d/react-native-collapsible 1.0.1 → 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/CollapsibleView.js +4 -3
- package/lib/commonjs/components/CollapsibleView.js.map +1 -1
- package/lib/commonjs/components/{AnimatedTopView.js → header/AnimatedTopView.js} +0 -0
- package/lib/commonjs/components/{AnimatedTopView.js.map → header/AnimatedTopView.js.map} +0 -0
- package/lib/commonjs/components/{CollapsibleHeaderContainer.js → header/CollapsibleHeaderContainer.js} +9 -8
- package/lib/commonjs/components/header/CollapsibleHeaderContainer.js.map +1 -0
- package/lib/commonjs/components/{StickyView.js → header/StickyView.js} +18 -31
- 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} +36 -31
- 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 +7 -7
- package/lib/commonjs/components/scrollable/useAnimatedScroll.js.map +1 -0
- 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/utils/debounce.js +20 -0
- package/lib/commonjs/utils/debounce.js.map +1 -0
- package/lib/commonjs/{hooks/withCollapsibleContext.js → withCollapsibleContext.js} +95 -64
- package/lib/commonjs/withCollapsibleContext.js.map +1 -0
- package/lib/module/components/CollapsibleContainer.js +1 -1
- package/lib/module/components/CollapsibleContainer.js.map +1 -1
- package/lib/module/components/CollapsibleView.js +4 -3
- package/lib/module/components/CollapsibleView.js.map +1 -1
- package/lib/module/components/{AnimatedTopView.js → header/AnimatedTopView.js} +0 -0
- package/lib/module/components/{AnimatedTopView.js.map → header/AnimatedTopView.js.map} +0 -0
- package/lib/module/components/{CollapsibleHeaderContainer.js → header/CollapsibleHeaderContainer.js} +7 -6
- package/lib/module/components/header/CollapsibleHeaderContainer.js.map +1 -0
- package/lib/module/components/{StickyView.js → header/StickyView.js} +17 -30
- 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} +36 -32
- 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 +6 -6
- package/lib/module/components/scrollable/useAnimatedScroll.js.map +1 -0
- 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/utils/debounce.js +13 -0
- package/lib/module/utils/debounce.js.map +1 -0
- package/lib/module/withCollapsibleContext.js +163 -0
- package/lib/module/withCollapsibleContext.js.map +1 -0
- package/lib/typescript/components/CollapsibleView.d.ts +1 -1
- 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/utils/debounce.d.ts +1 -0
- 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/CollapsibleView.tsx +4 -3
- package/src/components/{AnimatedTopView.tsx → header/AnimatedTopView.tsx} +0 -0
- package/src/components/{CollapsibleHeaderContainer.tsx → header/CollapsibleHeaderContainer.tsx} +6 -4
- package/src/components/{StickyView.tsx → header/StickyView.tsx} +15 -22
- 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/scrollable/CollapsibleFlatList.tsx +135 -0
- package/src/components/{CollapsibleScrollView.tsx → scrollable/CollapsibleScrollView.tsx} +6 -6
- package/src/{hooks → components/scrollable}/useAnimatedScroll.ts +8 -8
- package/src/hooks/useInternalCollapsibleContext.ts +1 -1
- package/src/index.tsx +6 -5
- package/src/{types.ts → types.d.ts} +14 -3
- package/src/utils/debounce.ts +10 -0
- package/src/withCollapsibleContext.tsx +201 -0
- package/lib/commonjs/components/CollapsibleFlatList.js.map +0 -1
- package/lib/commonjs/components/CollapsibleHeaderContainer.js.map +0 -1
- package/lib/commonjs/components/CollapsibleScrollView.js.map +0 -1
- package/lib/commonjs/components/StickyView.js.map +0 -1
- package/lib/commonjs/hooks/useAnimatedScroll.js.map +0 -1
- package/lib/commonjs/hooks/withCollapsibleContext.js.map +0 -1
- package/lib/module/components/CollapsibleFlatList.js.map +0 -1
- package/lib/module/components/CollapsibleHeaderContainer.js.map +0 -1
- package/lib/module/components/CollapsibleScrollView.js.map +0 -1
- package/lib/module/components/StickyView.js.map +0 -1
- package/lib/module/hooks/useAnimatedScroll.js.map +0 -1
- package/lib/module/hooks/withCollapsibleContext.js +0 -136
- package/lib/module/hooks/withCollapsibleContext.js.map +0 -1
- package/lib/module/types.js +0 -2
- package/lib/typescript/types.d.ts +0 -33
- package/src/components/CollapsibleFlatList.tsx +0 -119
- package/src/hooks/withCollapsibleContext.tsx +0 -164
|
@@ -1,24 +1,26 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
2
|
|
|
3
3
|
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
4
|
-
import {
|
|
5
|
-
import Animated, { runOnJS,
|
|
6
|
-
import AnimatedTopView from '
|
|
7
|
-
import useAnimatedScroll from '
|
|
8
|
-
import useCollapsibleContext from '
|
|
9
|
-
import
|
|
4
|
+
import { View, StyleSheet, FlatList } from 'react-native';
|
|
5
|
+
import Animated, { runOnJS, useAnimatedReaction } from 'react-native-reanimated';
|
|
6
|
+
import AnimatedTopView from '../header/AnimatedTopView';
|
|
7
|
+
import useAnimatedScroll from './useAnimatedScroll';
|
|
8
|
+
import useCollapsibleContext from '../../hooks/useCollapsibleContext';
|
|
9
|
+
import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';
|
|
10
|
+
import PullToRefreshContainer from '../pullToRefresh/PullToRefreshContainer';
|
|
10
11
|
const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
|
|
11
12
|
export default function CollapsibleFlatList({
|
|
12
13
|
headerSnappable = true,
|
|
13
14
|
...props
|
|
14
15
|
}) {
|
|
15
|
-
const scrollView = useRef(null);
|
|
16
16
|
const {
|
|
17
|
-
headerHeight
|
|
17
|
+
headerHeight,
|
|
18
|
+
scrollY
|
|
18
19
|
} = useCollapsibleContext();
|
|
19
20
|
const {
|
|
20
21
|
contentMinHeight
|
|
21
22
|
} = useInternalCollapsibleContext();
|
|
23
|
+
const scrollRef = useRef(null);
|
|
22
24
|
const mounted = useRef(true);
|
|
23
25
|
const contentHeight = useRef(0);
|
|
24
26
|
useEffect(() => {
|
|
@@ -27,13 +29,13 @@ export default function CollapsibleFlatList({
|
|
|
27
29
|
};
|
|
28
30
|
}, []);
|
|
29
31
|
const scrollTo = useCallback((yValue, animated = true) => {
|
|
30
|
-
var
|
|
32
|
+
var _scrollRef$current;
|
|
31
33
|
|
|
32
|
-
(
|
|
34
|
+
(_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollToOffset({
|
|
33
35
|
offset: yValue,
|
|
34
36
|
animated
|
|
35
37
|
});
|
|
36
|
-
}, []);
|
|
38
|
+
}, [scrollRef]);
|
|
37
39
|
const handleInternalContentHeight = useCallback(value => {
|
|
38
40
|
if (mounted.current) {
|
|
39
41
|
setInternalContentMinHeight(value);
|
|
@@ -46,11 +48,15 @@ export default function CollapsibleFlatList({
|
|
|
46
48
|
scrollTo
|
|
47
49
|
});
|
|
48
50
|
const [internalContentMinHeight, setInternalContentMinHeight] = useState(contentMinHeight.value);
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
51
|
+
useAnimatedReaction(() => {
|
|
52
|
+
return contentMinHeight.value;
|
|
53
|
+
}, (result, previous) => {
|
|
54
|
+
if (result !== previous) {
|
|
55
|
+
if (contentHeight.current < contentMinHeight.value && internalContentMinHeight !== contentMinHeight.value) {
|
|
56
|
+
runOnJS(handleInternalContentHeight)(contentMinHeight.value);
|
|
57
|
+
}
|
|
52
58
|
}
|
|
53
|
-
}
|
|
59
|
+
});
|
|
54
60
|
const contentContainerStyle = useMemo(() => [styles.contentContainer, {
|
|
55
61
|
minHeight: internalContentMinHeight
|
|
56
62
|
}, props.contentContainerStyle], [props.contentContainerStyle, internalContentMinHeight]);
|
|
@@ -62,23 +68,21 @@ export default function CollapsibleFlatList({
|
|
|
62
68
|
height: headerHeight
|
|
63
69
|
}), props.ListHeaderComponent);
|
|
64
70
|
|
|
65
|
-
return (
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
}))
|
|
81
|
-
);
|
|
71
|
+
return /*#__PURE__*/React.createElement(PullToRefreshContainer, {
|
|
72
|
+
scrollY: scrollY
|
|
73
|
+
}, /*#__PURE__*/React.createElement(AnimatedFlatList, _extends({
|
|
74
|
+
ref: scrollRef,
|
|
75
|
+
bounces: false,
|
|
76
|
+
keyboardDismissMode: "on-drag",
|
|
77
|
+
keyboardShouldPersistTaps: "handled",
|
|
78
|
+
scrollEventThrottle: 1
|
|
79
|
+
}, props, {
|
|
80
|
+
style: [styles.container, props.style],
|
|
81
|
+
contentContainerStyle: contentContainerStyle,
|
|
82
|
+
onScroll: scrollHandler,
|
|
83
|
+
ListHeaderComponent: renderListHeader(),
|
|
84
|
+
onContentSizeChange: handleContentSizeChange
|
|
85
|
+
})));
|
|
82
86
|
}
|
|
83
87
|
const styles = StyleSheet.create({
|
|
84
88
|
container: { ...StyleSheet.absoluteFillObject
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["CollapsibleFlatList.tsx"],"names":["React","useCallback","useEffect","useMemo","useRef","useState","View","StyleSheet","FlatList","Animated","runOnJS","useAnimatedReaction","AnimatedTopView","useAnimatedScroll","useCollapsibleContext","useInternalCollapsibleContext","PullToRefreshContainer","AnimatedFlatList","createAnimatedComponent","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","create","absoluteFillObject","flexGrow","topView","position","top","left","right"],"mappings":";;AAAA,OAAOA,KAAP,IACEC,WADF,EAEEC,SAFF,EAGEC,OAHF,EAIEC,MAJF,EAKEC,QALF,QAMO,OANP;AAOA,SAAwBC,IAAxB,EAA8BC,UAA9B,EAA0CC,QAA1C,QAA0D,cAA1D;AACA,OAAOC,QAAP,IACEC,OADF,EAEEC,mBAFF,QAGO,yBAHP;AAIA,OAAOC,eAAP,MAA4B,2BAA5B;AACA,OAAOC,iBAAP,MAA8B,qBAA9B;AACA,OAAOC,qBAAP,MAAkC,mCAAlC;AACA,OAAOC,6BAAP,MAA0C,2CAA1C;AAEA,OAAOC,sBAAP,MAAmC,yCAAnC;AAEA,MAAMC,gBAAgB,GAAGR,QAAQ,CAACS,uBAAT,CAAiCV,QAAjC,CAAzB;AAKA,eAAe,SAASW,mBAAT,CAAmC;AAChDC,EAAAA,eAAe,GAAG,IAD8B;AAEhD,KAAGC;AAF6C,CAAnC,EAGC;AACd,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,MAA4BT,qBAAqB,EAAvD;AACA,QAAM;AAAEU,IAAAA;AAAF,MAAuBT,6BAA6B,EAA1D;AACA,QAAMU,SAAS,GAAGrB,MAAM,CAAM,IAAN,CAAxB;AACA,QAAMsB,OAAO,GAAGtB,MAAM,CAAC,IAAD,CAAtB;AACA,QAAMuB,aAAa,GAAGvB,MAAM,CAAC,CAAD,CAA5B;AAEAF,EAAAA,SAAS,CAAC,MAAM;AACd,WAAO,MAAM;AACXwB,MAAAA,OAAO,CAACE,OAAR,GAAkB,KAAlB;AACD,KAFD;AAGD,GAJQ,EAIN,EAJM,CAAT;AAMA,QAAMC,QAAQ,GAAG5B,WAAW,CAC1B,CAAC6B,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,GANyB,EAO1B,CAACN,SAAD,CAP0B,CAA5B;AAUA,QAAMS,2BAA2B,GAAGjC,WAAW,CAAEkC,KAAD,IAAmB;AACjE,QAAIT,OAAO,CAACE,OAAZ,EAAqB;AACnBQ,MAAAA,2BAA2B,CAACD,KAAD,CAA3B;AACD;AACF,GAJ8C,EAI5C,EAJ4C,CAA/C;AAMA,QAAM;AAAEE,IAAAA;AAAF,MAAoBxB,iBAAiB,CAAC;AAC1CO,IAAAA,eAD0C;AAE1CS,IAAAA;AAF0C,GAAD,CAA3C;AAKA,QAAM,CAACS,wBAAD,EAA2BF,2BAA3B,IAA0D/B,QAAQ,CACtEmB,gBAAgB,CAACW,KADqD,CAAxE;AAIAxB,EAAAA,mBAAmB,CACjB,MAAM;AACJ,WAAOa,gBAAgB,CAACW,KAAxB;AACD,GAHgB,EAIjB,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;AACAzB,QAAAA,OAAO,CAACwB,2BAAD,CAAP,CAAqCV,gBAAgB,CAACW,KAAtD;AACD;AACF;AACF,GAbgB,CAAnB;AAgBA,QAAMM,qBAAqB,GAAGtC,OAAO,CACnC,MAAM,CACJuC,MAAM,CAACC,gBADH,EAEJ;AAAEC,IAAAA,SAAS,EAAEN;AAAb,GAFI,EAGJjB,KAAK,CAACoB,qBAHF,CAD6B,EAMnC,CAACpB,KAAK,CAACoB,qBAAP,EAA8BH,wBAA9B,CANmC,CAArC;AASA,QAAMO,uBAAuB,GAAG5C,WAAW,CAAC,CAAC6C,CAAD,EAAIC,MAAJ,KAAe;AACzDpB,IAAAA,aAAa,CAACC,OAAd,GAAwBmB,MAAxB;AACD,GAF0C,EAExC,EAFwC,CAA3C;;AAIA,QAAMC,gBAAgB,GAAG,mBACvB,oBAAC,IAAD,qBACE,oBAAC,eAAD;AAAiB,IAAA,MAAM,EAAE1B;AAAzB,IADF,EAEGD,KAAK,CAAC4B,mBAFT,CADF;;AAOA,sBACE,oBAAC,sBAAD;AAAwB,IAAA,OAAO,EAAE1B;AAAjC,kBAEE,oBAAC,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,GAAGnC,UAAU,CAAC6C,MAAX,CAAkB;AAC/BF,EAAAA,SAAS,EAAE,EACT,GAAG3C,UAAU,CAAC8C;AADL,GADoB;AAI/BV,EAAAA,gBAAgB,EAAE;AAChBW,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/module/components/{CollapsibleScrollView.js → scrollable/CollapsibleScrollView.js}
RENAMED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
2
|
|
|
3
|
-
import AnimatedTopView from '
|
|
4
|
-
import useAnimatedScroll from '
|
|
3
|
+
import AnimatedTopView from '../header/AnimatedTopView';
|
|
4
|
+
import useAnimatedScroll from './useAnimatedScroll';
|
|
5
5
|
import React, { useCallback, useMemo, useRef } from 'react';
|
|
6
6
|
import { StyleSheet } from 'react-native';
|
|
7
7
|
import Animated, { useAnimatedStyle } from 'react-native-reanimated';
|
|
8
|
-
import useCollapsibleContext from '
|
|
9
|
-
import
|
|
8
|
+
import useCollapsibleContext from '../../hooks/useCollapsibleContext';
|
|
9
|
+
import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';
|
|
10
10
|
export default function CollapsibleScrollView({
|
|
11
11
|
headerSnappable = true,
|
|
12
12
|
children,
|
|
@@ -49,7 +49,7 @@ export default function CollapsibleScrollView({
|
|
|
49
49
|
onScroll: scrollHandler,
|
|
50
50
|
keyboardDismissMode: "on-drag",
|
|
51
51
|
keyboardShouldPersistTaps: "handled",
|
|
52
|
-
scrollEventThrottle:
|
|
52
|
+
scrollEventThrottle: 1
|
|
53
53
|
}), /*#__PURE__*/React.createElement(Animated.View, {
|
|
54
54
|
style: animatedStyle
|
|
55
55
|
}, /*#__PURE__*/React.createElement(AnimatedTopView, {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["CollapsibleScrollView.tsx"],"names":["AnimatedTopView","useAnimatedScroll","React","useCallback","useMemo","useRef","StyleSheet","Animated","useAnimatedStyle","useCollapsibleContext","useInternalCollapsibleContext","CollapsibleScrollView","headerSnappable","children","props","scrollView","contentMinHeight","headerHeight","scrollTo","yValue","animated","current","y","scrollHandler","animatedStyle","minHeight","value","contentContainerStyle","styles","contentContainer","container","style","create","absoluteFillObject","flexGrow","topView","position","top","left","right"],"mappings":";;AAAA,OAAOA,eAAP,MAA4B,2BAA5B;AACA,OAAOC,iBAAP,MAA8B,qBAA9B;AACA,OAAOC,KAAP,IAA2BC,WAA3B,EAAwCC,OAAxC,EAAiDC,MAAjD,QAA+D,OAA/D;AACA,SAA0BC,UAA1B,QAA4C,cAA5C;AACA,OAAOC,QAAP,IAAmBC,gBAAnB,QAA2C,yBAA3C;AAEA,OAAOC,qBAAP,MAAkC,mCAAlC;AACA,OAAOC,6BAAP,MAA0C,2CAA1C;AAOA,eAAe,SAASC,qBAAT,CAA+B;AAC5CC,EAAAA,eAAe,GAAG,IAD0B;AAE5CC,EAAAA,QAF4C;AAG5C,KAAGC;AAHyC,CAA/B,EAIL;AACR,QAAMC,UAAU,GAAGV,MAAM,CAAsB,IAAtB,CAAzB;AACA,QAAM;AAAEW,IAAAA;AAAF,MAAuBN,6BAA6B,EAA1D;AACA,QAAM;AAAEO,IAAAA;AAAF,MAAmBR,qBAAqB,EAA9C;AAEA,QAAMS,QAAQ,GAAGf,WAAW,CAAC,CAACgB,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,GAH2B,EAGzB,EAHyB,CAA5B;AAKA,QAAM;AAAEG,IAAAA;AAAF,MAAoBtB,iBAAiB,CAAC;AAC1CW,IAAAA,eAD0C;AAE1CM,IAAAA;AAF0C,GAAD,CAA3C;AAKA,QAAMM,aAAa,GAAGhB,gBAAgB,CAAC,MAAM;AAC3C,WAAO;AACLiB,MAAAA,SAAS,EAAET,gBAAgB,CAACU;AADvB,KAAP;AAGD,GAJqC,EAInC,EAJmC,CAAtC;AAMA,QAAMC,qBAAqB,GAAGvB,OAAO,CACnC,MAAM,CAACwB,MAAM,CAACC,gBAAR,EAA0Bf,KAAK,CAACa,qBAAhC,CAD6B,EAEnC,CAACb,KAAK,CAACa,qBAAP,CAFmC,CAArC;AAKA,sBACE,oBAAC,QAAD,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,oBAAC,QAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAEC;AAAtB,kBACE,oBAAC,eAAD;AAAiB,IAAA,MAAM,EAAEP;AAAzB,IADF,EAEGJ,QAFH,CAXF,CADF;AAkBD;AAED,MAAMe,MAAM,GAAGtB,UAAU,CAAC0B,MAAX,CAAkB;AAC/BF,EAAAA,SAAS,EAAE,EACT,GAAGxB,UAAU,CAAC2B;AADL,GADoB;AAI/BJ,EAAAA,gBAAgB,EAAE;AAChBK,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"]}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
import { useCallback, useEffect } from 'react';
|
|
3
3
|
import { Dimensions } from 'react-native';
|
|
4
4
|
import { runOnJS, useAnimatedScrollHandler, useSharedValue } from 'react-native-reanimated';
|
|
5
|
-
import useCollapsibleContext from '
|
|
6
|
-
import
|
|
5
|
+
import useCollapsibleContext from '../../hooks/useCollapsibleContext';
|
|
6
|
+
import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';
|
|
7
7
|
const {
|
|
8
8
|
height: wHeight
|
|
9
9
|
} = Dimensions.get('window');
|
|
@@ -26,8 +26,8 @@ export default function useAnimatedScroll({
|
|
|
26
26
|
}
|
|
27
27
|
}, []);
|
|
28
28
|
const collapse = useCallback(() => {
|
|
29
|
-
scrollTo(Math.min(fixedHeaderHeight.
|
|
30
|
-
}, [scrollTo
|
|
29
|
+
scrollTo(Math.min(fixedHeaderHeight.value || 0, firstStickyViewY.value || 0));
|
|
30
|
+
}, [scrollTo]);
|
|
31
31
|
const expand = useCallback(() => scrollTo(0), [scrollTo]);
|
|
32
32
|
useEffect(() => {
|
|
33
33
|
setCollapsibleHandlers({
|
|
@@ -45,7 +45,7 @@ export default function useAnimatedScroll({
|
|
|
45
45
|
},
|
|
46
46
|
onEndDrag: () => {
|
|
47
47
|
if (!headerSnappable) return;
|
|
48
|
-
const maxY = firstStickyViewY.
|
|
48
|
+
const maxY = firstStickyViewY.value && firstStickyViewY.value > 0 ? firstStickyViewY.value : fixedHeaderHeight.value || 0;
|
|
49
49
|
|
|
50
50
|
if (scrollY.value < maxY) {
|
|
51
51
|
const delta = Math.abs(scrollY.value - maxY);
|
|
@@ -61,7 +61,7 @@ export default function useAnimatedScroll({
|
|
|
61
61
|
}
|
|
62
62
|
}
|
|
63
63
|
}
|
|
64
|
-
}, [
|
|
64
|
+
}, [scrollTo]);
|
|
65
65
|
return {
|
|
66
66
|
scrollHandler,
|
|
67
67
|
collapse,
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useAnimatedScroll.ts"],"names":["useCallback","useEffect","Dimensions","runOnJS","useAnimatedScrollHandler","useSharedValue","useCollapsibleContext","useInternalCollapsibleContext","height","wHeight","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":"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","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 @@ export const InternalCollapsibleContext =
|
|
|
3
3
|
/*#__PURE__*/
|
|
4
4
|
// @ts-ignore
|
|
5
5
|
createContext();
|
|
6
|
-
export function useInternalCollapsibleContext() {
|
|
6
|
+
export default function useInternalCollapsibleContext() {
|
|
7
7
|
const ctx = useContext(InternalCollapsibleContext);
|
|
8
8
|
|
|
9
9
|
if (!ctx) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useInternalCollapsibleContext.ts"],"names":["createContext","useContext","InternalCollapsibleContext","useInternalCollapsibleContext","ctx","Error"],"mappings":"AAAA,SAASA,aAAT,EAAwBC,UAAxB,QAA0C,OAA1C;AAGA,OAAO,MAAMC,0BAA0B;AAAA;AACrC;AACAF,aAAa,EAFR;AAIP,
|
|
1
|
+
{"version":3,"sources":["useInternalCollapsibleContext.ts"],"names":["createContext","useContext","InternalCollapsibleContext","useInternalCollapsibleContext","ctx","Error"],"mappings":"AAAA,SAASA,aAAT,EAAwBC,UAAxB,QAA0C,OAA1C;AAGA,OAAO,MAAMC,0BAA0B;AAAA;AACrC;AACAF,aAAa,EAFR;AAIP,eAAe,SAASG,6BAAT,GAAyC;AACtD,QAAMC,GAAG,GAAGH,UAAU,CAACC,0BAAD,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 { 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/module/index.js
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
export { default as withCollapsibleContext } from './
|
|
1
|
+
export { default as withCollapsibleContext } from './withCollapsibleContext';
|
|
2
2
|
export { default as useCollapsibleContext } from './hooks/useCollapsibleContext';
|
|
3
3
|
export { default as CollapsibleContainer } from './components/CollapsibleContainer';
|
|
4
|
-
export { default as CollapsibleFlatList } from './components/CollapsibleFlatList';
|
|
5
|
-
export { default as CollapsibleScrollView } from './components/CollapsibleScrollView';
|
|
6
|
-
export { default as CollapsibleHeaderContainer } from './components/CollapsibleHeaderContainer';
|
|
4
|
+
export { default as CollapsibleFlatList } from './components/scrollable/CollapsibleFlatList';
|
|
5
|
+
export { default as CollapsibleScrollView } from './components/scrollable/CollapsibleScrollView';
|
|
6
|
+
export { default as CollapsibleHeaderContainer } from './components/header/CollapsibleHeaderContainer';
|
|
7
|
+
export { default as StickyView } from './components/header/StickyView';
|
|
8
|
+
export { default as RefreshControl } from './components/pullToRefresh/RefreshControl';
|
|
7
9
|
export { default as CollapsibleView } from './components/CollapsibleView';
|
|
8
|
-
export { default as StickyView } from './components/StickyView';
|
|
9
10
|
export * from './components/CollapsibleView';
|
|
10
11
|
//# sourceMappingURL=index.js.map
|
package/lib/module/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.tsx"],"names":["default","withCollapsibleContext","useCollapsibleContext","CollapsibleContainer","CollapsibleFlatList","CollapsibleScrollView","CollapsibleHeaderContainer","
|
|
1
|
+
{"version":3,"sources":["index.tsx"],"names":["default","withCollapsibleContext","useCollapsibleContext","CollapsibleContainer","CollapsibleFlatList","CollapsibleScrollView","CollapsibleHeaderContainer","StickyView","RefreshControl","CollapsibleView"],"mappings":"AAAA,SAASA,OAAO,IAAIC,sBAApB,QAAkD,0BAAlD;AACA,SAASD,OAAO,IAAIE,qBAApB,QAAiD,+BAAjD;AAEA,SAASF,OAAO,IAAIG,oBAApB,QAAgD,mCAAhD;AACA,SAASH,OAAO,IAAII,mBAApB,QAA+C,6CAA/C;AACA,SAASJ,OAAO,IAAIK,qBAApB,QAAiD,+CAAjD;AACA,SAASL,OAAO,IAAIM,0BAApB,QAAsD,gDAAtD;AACA,SAASN,OAAO,IAAIO,UAApB,QAAsC,gCAAtC;AACA,SAASP,OAAO,IAAIQ,cAApB,QAA0C,2CAA1C;AACA,SAASR,OAAO,IAAIS,eAApB,QAA2C,8BAA3C;AACA,cAAc,8BAAd","sourcesContent":["export { default as withCollapsibleContext } from './withCollapsibleContext';\nexport { default as useCollapsibleContext } from './hooks/useCollapsibleContext';\n\nexport { default as CollapsibleContainer } from './components/CollapsibleContainer';\nexport { default as CollapsibleFlatList } from './components/scrollable/CollapsibleFlatList';\nexport { default as CollapsibleScrollView } from './components/scrollable/CollapsibleScrollView';\nexport { default as CollapsibleHeaderContainer } from './components/header/CollapsibleHeaderContainer';\nexport { default as StickyView } from './components/header/StickyView';\nexport { default as RefreshControl } from './components/pullToRefresh/RefreshControl';\nexport { default as CollapsibleView } from './components/CollapsibleView';\nexport * from './components/CollapsibleView';\n"]}
|
|
File without changes
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
// https://gist.github.com/ca0v/73a31f57b397606c9813472f7493a940
|
|
2
|
+
export function debounce(cb, wait = 20) {
|
|
3
|
+
let h = 0;
|
|
4
|
+
|
|
5
|
+
let callable = (...args) => {
|
|
6
|
+
clearTimeout(h); // @ts-ignore
|
|
7
|
+
|
|
8
|
+
h = setTimeout(() => cb(...args), wait);
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
return callable;
|
|
12
|
+
}
|
|
13
|
+
//# sourceMappingURL=debounce.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["debounce.ts"],"names":["debounce","cb","wait","h","callable","args","clearTimeout","setTimeout"],"mappings":"AAAA;AACA,OAAO,SAASA,QAAT,CAAsCC,EAAtC,EAA6CC,IAAI,GAAG,EAApD,EAAwD;AAC7D,MAAIC,CAAC,GAAG,CAAR;;AACA,MAAIC,QAAQ,GAAG,CAAC,GAAGC,IAAJ,KAAkB;AAC/BC,IAAAA,YAAY,CAACH,CAAD,CAAZ,CAD+B,CAE/B;;AACAA,IAAAA,CAAC,GAAGI,UAAU,CAAC,MAAMN,EAAE,CAAC,GAAGI,IAAJ,CAAT,EAAoBH,IAApB,CAAd;AACD,GAJD;;AAKA,SAAgBE,QAAhB;AACD","sourcesContent":["// https://gist.github.com/ca0v/73a31f57b397606c9813472f7493a940\nexport function debounce<T extends Function>(cb: T, wait = 20) {\n let h = 0;\n let callable = (...args: any) => {\n clearTimeout(h);\n // @ts-ignore\n h = setTimeout(() => cb(...args), wait);\n };\n return <T>(<any>callable);\n}\n"]}
|
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
/* eslint-disable no-shadow */
|
|
2
|
+
|
|
3
|
+
/* eslint-disable react-hooks/exhaustive-deps */
|
|
4
|
+
import React, { useCallback, useMemo, useRef } from 'react';
|
|
5
|
+
import { CollapsibleContext } from './hooks/useCollapsibleContext';
|
|
6
|
+
import { InternalCollapsibleContext } from './hooks/useInternalCollapsibleContext';
|
|
7
|
+
import { useAnimatedReaction, useDerivedValue, useSharedValue, withTiming } from 'react-native-reanimated';
|
|
8
|
+
import { debounce } from './utils/debounce';
|
|
9
|
+
import PullToRefreshProvider from './components/pullToRefresh/PullToRefreshProvider';
|
|
10
|
+
export default function withCollapsibleContext(Component) {
|
|
11
|
+
return props => {
|
|
12
|
+
const collapsibleHandlers = useRef();
|
|
13
|
+
const headerHeight = useSharedValue(0);
|
|
14
|
+
const scrollY = useSharedValue(0);
|
|
15
|
+
const stickyViewRefs = useRef({});
|
|
16
|
+
const stickyViewTops = useSharedValue({});
|
|
17
|
+
const stickyViewPositionsRef = useRef({});
|
|
18
|
+
const stickyViewPositions = useSharedValue({});
|
|
19
|
+
const fixedHeaderHeight = useSharedValue(0);
|
|
20
|
+
const stickyHeaderHeight = useSharedValue(0);
|
|
21
|
+
const containerHeight = useSharedValue(0);
|
|
22
|
+
const firstStickyViewY = useSharedValue(1000000);
|
|
23
|
+
const headerContainersHeight = useRef({});
|
|
24
|
+
const containerRef = useRef(null);
|
|
25
|
+
const setCollapsibleHandlers = useCallback(handlers => {
|
|
26
|
+
collapsibleHandlers.current = handlers;
|
|
27
|
+
}, []);
|
|
28
|
+
const headerCollapsed = useDerivedValue(() => {
|
|
29
|
+
const maxY = fixedHeaderHeight.value - firstStickyViewY.value;
|
|
30
|
+
return scrollY.value >= maxY;
|
|
31
|
+
}, []);
|
|
32
|
+
const contentMinHeight = useDerivedValue(() => {
|
|
33
|
+
return containerHeight.value + fixedHeaderHeight.value - stickyHeaderHeight.value;
|
|
34
|
+
}, []);
|
|
35
|
+
useAnimatedReaction(() => {
|
|
36
|
+
const totalHeight = Object.keys(stickyViewPositions.value).reduce((acc, item) => {
|
|
37
|
+
return acc + stickyViewPositions.value[item].top;
|
|
38
|
+
}, 0);
|
|
39
|
+
return totalHeight - fixedHeaderHeight.value;
|
|
40
|
+
}, (result, previous) => {
|
|
41
|
+
if (result !== previous) {
|
|
42
|
+
var _viewPositions$sorted;
|
|
43
|
+
|
|
44
|
+
const viewPositions = stickyViewPositions.value;
|
|
45
|
+
const headerHeight = fixedHeaderHeight.value;
|
|
46
|
+
const sortedKeys = Object.keys(viewPositions).sort((a, b) => viewPositions[a].top - viewPositions[b].top);
|
|
47
|
+
let totalTop = 0;
|
|
48
|
+
const values = {};
|
|
49
|
+
|
|
50
|
+
for (let i = 0; i < sortedKeys.length; i++) {
|
|
51
|
+
values[sortedKeys[i]] = totalTop; // Try minus 1 make it filled when scrolling up.
|
|
52
|
+
// Otherwise, we can see a small space between the persits views
|
|
53
|
+
|
|
54
|
+
totalTop += viewPositions[sortedKeys[i]].height - 1;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
stickyViewTops.value = values;
|
|
58
|
+
firstStickyViewY.value = ((_viewPositions$sorted = viewPositions[sortedKeys[0]]) === null || _viewPositions$sorted === void 0 ? void 0 : _viewPositions$sorted.top) || 0;
|
|
59
|
+
const stickyHeader = sortedKeys.reduce((acc, key) => {
|
|
60
|
+
const data = viewPositions[key];
|
|
61
|
+
const isInsideHeader = data.top < headerHeight;
|
|
62
|
+
|
|
63
|
+
if (isInsideHeader) {
|
|
64
|
+
return acc + data.height;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
return acc;
|
|
68
|
+
}, 0);
|
|
69
|
+
stickyHeaderHeight.value = stickyHeader;
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
const handleStickyViewLayout = useCallback((viewKey, viewRef) => {
|
|
73
|
+
if (viewRef && viewRef.current && containerRef.current) {
|
|
74
|
+
stickyViewRefs.current[viewKey] = viewRef;
|
|
75
|
+
viewRef.current.measureLayout( // @ts-ignore
|
|
76
|
+
containerRef.current, (left, top, width, height) => {
|
|
77
|
+
stickyViewPositionsRef.current = { ...stickyViewPositionsRef.current,
|
|
78
|
+
[viewKey]: {
|
|
79
|
+
left,
|
|
80
|
+
top,
|
|
81
|
+
width,
|
|
82
|
+
height
|
|
83
|
+
}
|
|
84
|
+
};
|
|
85
|
+
stickyViewPositions.value = stickyViewPositionsRef.current;
|
|
86
|
+
}, () => {});
|
|
87
|
+
} else {
|
|
88
|
+
delete stickyViewRefs.current[viewKey];
|
|
89
|
+
delete stickyViewPositionsRef.current[viewKey];
|
|
90
|
+
stickyViewPositions.value = stickyViewPositionsRef.current;
|
|
91
|
+
}
|
|
92
|
+
}, []);
|
|
93
|
+
const debounceRefreshStickyPositions = useMemo(() => {
|
|
94
|
+
return debounce(() => {
|
|
95
|
+
Object.keys(stickyViewRefs.current).forEach(key => {
|
|
96
|
+
const viewRef = stickyViewRefs.current[key];
|
|
97
|
+
|
|
98
|
+
if (viewRef) {
|
|
99
|
+
handleStickyViewLayout(key, viewRef);
|
|
100
|
+
}
|
|
101
|
+
});
|
|
102
|
+
}, 200);
|
|
103
|
+
}, []);
|
|
104
|
+
const handleHeaderContainerLayout = useCallback((viewKey, height) => {
|
|
105
|
+
if (!height) {
|
|
106
|
+
delete headerContainersHeight.current[viewKey];
|
|
107
|
+
} else {
|
|
108
|
+
headerContainersHeight.current[viewKey] = height;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
const totalHeight = Object.keys(headerContainersHeight.current).reduce((acc, key) => headerContainersHeight.current[key] + acc, 0);
|
|
112
|
+
headerHeight.value = withTiming(totalHeight, {
|
|
113
|
+
duration: fixedHeaderHeight.value === 0 ? 0 : 200
|
|
114
|
+
});
|
|
115
|
+
fixedHeaderHeight.value = totalHeight; // Try refresh sticky positions
|
|
116
|
+
|
|
117
|
+
debounceRefreshStickyPositions();
|
|
118
|
+
}, []);
|
|
119
|
+
const handleContainerHeight = useCallback(height => {
|
|
120
|
+
containerHeight.value = height;
|
|
121
|
+
}, []);
|
|
122
|
+
const context = useMemo(() => {
|
|
123
|
+
return {
|
|
124
|
+
collapse: () => {
|
|
125
|
+
var _collapsibleHandlers$;
|
|
126
|
+
|
|
127
|
+
return (_collapsibleHandlers$ = collapsibleHandlers.current) === null || _collapsibleHandlers$ === void 0 ? void 0 : _collapsibleHandlers$.collapse();
|
|
128
|
+
},
|
|
129
|
+
expand: () => {
|
|
130
|
+
var _collapsibleHandlers$2;
|
|
131
|
+
|
|
132
|
+
return (_collapsibleHandlers$2 = collapsibleHandlers.current) === null || _collapsibleHandlers$2 === void 0 ? void 0 : _collapsibleHandlers$2.expand();
|
|
133
|
+
},
|
|
134
|
+
scrollTo: (offset, animate) => {
|
|
135
|
+
var _collapsibleHandlers$3;
|
|
136
|
+
|
|
137
|
+
return (_collapsibleHandlers$3 = collapsibleHandlers.current) === null || _collapsibleHandlers$3 === void 0 ? void 0 : _collapsibleHandlers$3.scrollTo(offset, animate);
|
|
138
|
+
},
|
|
139
|
+
headerHeight,
|
|
140
|
+
scrollY,
|
|
141
|
+
headerCollapsed
|
|
142
|
+
};
|
|
143
|
+
}, [scrollY, headerHeight, headerCollapsed]);
|
|
144
|
+
const internalContext = useMemo(() => ({
|
|
145
|
+
containerRef,
|
|
146
|
+
handleStickyViewLayout,
|
|
147
|
+
handleHeaderContainerLayout,
|
|
148
|
+
setCollapsibleHandlers,
|
|
149
|
+
handleContainerHeight,
|
|
150
|
+
firstStickyViewY,
|
|
151
|
+
stickyViewTops,
|
|
152
|
+
stickyViewPositions,
|
|
153
|
+
fixedHeaderHeight,
|
|
154
|
+
contentMinHeight
|
|
155
|
+
}), [setCollapsibleHandlers, handleStickyViewLayout, handleHeaderContainerLayout, handleContainerHeight, firstStickyViewY, stickyViewTops, stickyViewPositions, fixedHeaderHeight, contentMinHeight]);
|
|
156
|
+
return /*#__PURE__*/React.createElement(CollapsibleContext.Provider, {
|
|
157
|
+
value: context
|
|
158
|
+
}, /*#__PURE__*/React.createElement(InternalCollapsibleContext.Provider, {
|
|
159
|
+
value: internalContext
|
|
160
|
+
}, /*#__PURE__*/React.createElement(PullToRefreshProvider, null, /*#__PURE__*/React.createElement(Component, props))));
|
|
161
|
+
};
|
|
162
|
+
}
|
|
163
|
+
//# sourceMappingURL=withCollapsibleContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["withCollapsibleContext.tsx"],"names":["React","useCallback","useMemo","useRef","CollapsibleContext","InternalCollapsibleContext","useAnimatedReaction","useDerivedValue","useSharedValue","withTiming","debounce","PullToRefreshProvider","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"]}
|
|
@@ -17,7 +17,7 @@ declare type Props = {
|
|
|
17
17
|
};
|
|
18
18
|
export default function CollapsibleView({ initialState, collapseState, renderHeader, children, containerStyle, collapsedBackgroundColor, expandedBackgroundColor, }: Props): JSX.Element;
|
|
19
19
|
export declare function CollapsibleHeaderText({ title, collapsed, onToggle, style, titleStyle, icon, iconInitialAngle, children, }: {
|
|
20
|
-
title: string;
|
|
20
|
+
title: string | Element;
|
|
21
21
|
style?: StyleProp<ViewStyle>;
|
|
22
22
|
titleStyle?: StyleProp<TextStyle>;
|
|
23
23
|
icon?: ReactNode;
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import Animated from 'react-native-reanimated';
|
|
3
|
+
declare type Props = {
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
scrollY: Animated.SharedValue<number>;
|
|
6
|
+
};
|
|
7
|
+
export default function PullToRefreshContainer({ children, scrollY }: Props): JSX.Element;
|
|
8
|
+
export {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
declare type Props = {
|
|
3
|
+
height?: number;
|
|
4
|
+
refreshing: boolean;
|
|
5
|
+
onRefresh: () => void;
|
|
6
|
+
renderAnimation: (animatedProps: any) => React.ReactNode;
|
|
7
|
+
};
|
|
8
|
+
export default function RefreshControl({ height, refreshing, onRefresh, renderAnimation, }: Props): JSX.Element;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
export declare const springConfig: (velocity: number) => {
|
|
2
|
+
stiffness: number;
|
|
3
|
+
damping: number;
|
|
4
|
+
mass: number;
|
|
5
|
+
overshootClamping: boolean;
|
|
6
|
+
restDisplacementThreshold: number;
|
|
7
|
+
restSpeedThreshold: number;
|
|
8
|
+
velocity: number;
|
|
9
|
+
};
|
|
10
|
+
export declare function clamp(value: number, lowerbound: number, upperbound: number): number;
|
|
11
|
+
/**
|
|
12
|
+
* calculates rubber value
|
|
13
|
+
*
|
|
14
|
+
* @param x distance from the edge
|
|
15
|
+
* @param dim dimension, either width or height
|
|
16
|
+
* @param coeff constant value, UIScrollView uses 0.55
|
|
17
|
+
* @returns rubber = (1.0 – (1.0 / ((x * coeff / dim) + 1.0))) * dim
|
|
18
|
+
*/
|
|
19
|
+
export declare const rubberBandClamp: (x: number, dim: number, coeff: number) => number;
|
|
20
|
+
export declare const rubberClamp: (y: number, topBound: number, bottomBound: number, coeff?: number) => number;
|
package/lib/typescript/components/{CollapsibleFlatList.d.ts → scrollable/CollapsibleFlatList.d.ts}
RENAMED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { FlatListProps } from 'react-native';
|
|
2
|
-
import type { CollapsibleProps } from '
|
|
2
|
+
import type { CollapsibleProps } from '../../types';
|
|
3
3
|
declare type Props<Data> = Omit<FlatListProps<Data>, 'scrollEnabled'> & CollapsibleProps;
|
|
4
4
|
export default function CollapsibleFlatList<Data>({ headerSnappable, ...props }: Props<Data>): JSX.Element;
|
|
5
5
|
export {};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
import { ScrollViewProps } from 'react-native';
|
|
3
|
-
import type { CollapsibleProps } from '
|
|
3
|
+
import type { CollapsibleProps } from '../../types';
|
|
4
4
|
declare type Props = ScrollViewProps & CollapsibleProps & {
|
|
5
5
|
children?: ReactNode;
|
|
6
6
|
};
|
|
File without changes
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { CollapsibleContextInternalType } from '../types';
|
|
3
3
|
export declare const InternalCollapsibleContext: import("react").Context<CollapsibleContextInternalType>;
|
|
4
|
-
export
|
|
4
|
+
export default function useInternalCollapsibleContext(): CollapsibleContextInternalType;
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
export { default as withCollapsibleContext } from './
|
|
1
|
+
export { default as withCollapsibleContext } from './withCollapsibleContext';
|
|
2
2
|
export { default as useCollapsibleContext } from './hooks/useCollapsibleContext';
|
|
3
3
|
export { default as CollapsibleContainer } from './components/CollapsibleContainer';
|
|
4
|
-
export { default as CollapsibleFlatList } from './components/CollapsibleFlatList';
|
|
5
|
-
export { default as CollapsibleScrollView } from './components/CollapsibleScrollView';
|
|
6
|
-
export { default as CollapsibleHeaderContainer } from './components/CollapsibleHeaderContainer';
|
|
4
|
+
export { default as CollapsibleFlatList } from './components/scrollable/CollapsibleFlatList';
|
|
5
|
+
export { default as CollapsibleScrollView } from './components/scrollable/CollapsibleScrollView';
|
|
6
|
+
export { default as CollapsibleHeaderContainer } from './components/header/CollapsibleHeaderContainer';
|
|
7
|
+
export { default as StickyView } from './components/header/StickyView';
|
|
8
|
+
export { default as RefreshControl } from './components/pullToRefresh/RefreshControl';
|
|
7
9
|
export { default as CollapsibleView } from './components/CollapsibleView';
|
|
8
|
-
export { default as StickyView } from './components/StickyView';
|
|
9
10
|
export * from './components/CollapsibleView';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function debounce<T extends Function>(cb: T, wait?: number): T;
|
|
File without changes
|