@r0b0t3d/react-native-collapsible 1.2.0-alpha.1 → 1.2.0-alpha.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/components/CollapsibleContainer.js +1 -9
- package/lib/commonjs/components/CollapsibleContainer.js.map +1 -1
- package/lib/commonjs/components/pullToRefresh/PullToRefreshContainer.js +2 -2
- package/lib/commonjs/components/pullToRefresh/PullToRefreshContainer.js.map +1 -1
- package/lib/commonjs/components/pullToRefresh/RefreshControl.js +9 -1
- package/lib/commonjs/components/pullToRefresh/RefreshControl.js.map +1 -1
- package/lib/module/components/CollapsibleContainer.js +1 -9
- package/lib/module/components/CollapsibleContainer.js.map +1 -1
- package/lib/module/components/pullToRefresh/PullToRefreshContainer.js +2 -2
- package/lib/module/components/pullToRefresh/PullToRefreshContainer.js.map +1 -1
- package/lib/module/components/pullToRefresh/RefreshControl.js +9 -1
- package/lib/module/components/pullToRefresh/RefreshControl.js.map +1 -1
- package/package.json +1 -1
- package/src/components/CollapsibleContainer.tsx +1 -3
- package/src/components/pullToRefresh/PullToRefreshContainer.tsx +3 -2
- package/src/components/pullToRefresh/RefreshControl.tsx +13 -1
|
@@ -45,18 +45,10 @@ function CollapsibleContainer({
|
|
|
45
45
|
|
|
46
46
|
if (isFocused) {
|
|
47
47
|
ref.current.measureLayout( // @ts-ignore
|
|
48
|
-
containerRef.current, (
|
|
49
|
-
console.log({
|
|
50
|
-
left,
|
|
51
|
-
top,
|
|
52
|
-
width,
|
|
53
|
-
height
|
|
54
|
-
});
|
|
55
|
-
|
|
48
|
+
containerRef.current, (_left, top, _width, height) => {
|
|
56
49
|
if (top + height - scrollY.value > containerHeight.current) {
|
|
57
50
|
var _keyboardAvoidingView;
|
|
58
51
|
|
|
59
|
-
console.log('need to scroll');
|
|
60
52
|
const extraOffset = (_keyboardAvoidingView = keyboardAvoidingViewProps === null || keyboardAvoidingViewProps === void 0 ? void 0 : keyboardAvoidingViewProps.keyboardVerticalOffset) !== null && _keyboardAvoidingView !== void 0 ? _keyboardAvoidingView : 20;
|
|
61
53
|
scrollTo(top + height + extraOffset - containerHeight.current);
|
|
62
54
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["CollapsibleContainer.tsx"],"names":["CollapsibleContainer","children","keyboardAvoidingViewProps","textInputRefs","props","containerRef","handleContainerHeight","scrollY","scrollTo","containerHeight","some","ref","isFocusedFunc","current","isFocused","measureLayout","
|
|
1
|
+
{"version":3,"sources":["CollapsibleContainer.tsx"],"names":["CollapsibleContainer","children","keyboardAvoidingViewProps","textInputRefs","props","containerRef","handleContainerHeight","scrollY","scrollTo","containerHeight","some","ref","isFocusedFunc","current","isFocused","measureLayout","_left","top","_width","height","value","extraOffset","keyboardVerticalOffset","handleContainerLayout","layout","nativeEvent","styles","container","style","StyleSheet","create","flex","overflow"],"mappings":";;;;;;;AAAA;;AACA;;AAQA;;AACA;;AACA;;;;;;;;;;AAQe,SAASA,oBAAT,CAA8B;AAC3CC,EAAAA,QAD2C;AAE3CC,EAAAA,yBAF2C;AAG3CC,EAAAA,aAAa,GAAG,EAH2B;AAI3C,KAAGC;AAJwC,CAA9B,EAKL;AACR,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,MACJ,6CADF;AAEA,QAAM;AAAEC,IAAAA,OAAF;AAAWC,IAAAA;AAAX,MAAwB,qCAA9B;AAEA,QAAMC,eAAe,GAAG,mBAAO,CAAP,CAAxB;AAEA,qCAAqB,MAAM;AACzBN,IAAAA,aAAa,CAACO,IAAd,CAAoBC,GAAD,IAAS;AAC1B,YAAMC,aAAa,GAAGD,GAAG,CAACE,OAAJ,CAAYC,SAAlC;AACA,YAAMA,SAAS,GACbF,aAAa,IAAI,OAAOA,aAAP,KAAyB,UAA1C,GACIA,aAAa,EADjB,GAEIA,aAHN;;AAIA,UAAIE,SAAJ,EAAe;AACbH,QAAAA,GAAG,CAACE,OAAJ,CAAYE,aAAZ,EACE;AACAV,QAAAA,YAAY,CAACQ,OAFf,EAGE,CAACG,KAAD,EAAgBC,GAAhB,EAA6BC,MAA7B,EAA6CC,MAA7C,KAAgE;AAC9D,cAAIF,GAAG,GAAGE,MAAN,GAAeZ,OAAO,CAACa,KAAvB,GAA+BX,eAAe,CAACI,OAAnD,EAA4D;AAAA;;AAC1D,kBAAMQ,WAAW,4BACfnB,yBADe,aACfA,yBADe,uBACfA,yBAAyB,CAAEoB,sBADZ,yEACsC,EADvD;AAEAd,YAAAA,QAAQ,CAACS,GAAG,GAAGE,MAAN,GAAeE,WAAf,GAA6BZ,eAAe,CAACI,OAA9C,CAAR;AACD;AACF,SATH,EAUE,MAAM,CAAE,CAVV;AAYD;;AACD,aAAOC,SAAP;AACD,KArBD;AAsBD,GAvBD;AAyBA,QAAMS,qBAAqB,GAAG,wBAC3BC,MAAD,IAA+B;AAC7B,UAAML,MAAM,GAAGK,MAAM,CAACC,WAAP,CAAmBD,MAAnB,CAA0BL,MAAzC;AACAV,IAAAA,eAAe,CAACI,OAAhB,GAA0BM,MAA1B;AACAb,IAAAA,qBAAqB,CAACa,MAAD,CAArB;AACD,GAL2B,EAM5B,CAACb,qBAAD,CAN4B,CAA9B;AASA,sBACE,6BAAC,iCAAD;AACE,IAAA,KAAK,EAAEoB,MAAM,CAACC,SADhB;AAEE,IAAA,QAAQ,EAAC;AAFX,KAGMzB,yBAHN,gBAKE,6BAAC,iBAAD,eACME,KADN;AAEE,IAAA,GAAG,EAAEC,YAFP;AAGE,IAAA,KAAK,EAAE,CAACqB,MAAM,CAACC,SAAR,EAAmBvB,KAAK,CAACwB,KAAzB,CAHT;AAIE,IAAA,QAAQ,EAAEL;AAJZ,MAMGtB,QANH,CALF,CADF;AAgBD;;AAED,MAAMyB,MAAM,GAAGG,wBAAWC,MAAX,CAAkB;AAC/BH,EAAAA,SAAS,EAAE;AACTI,IAAAA,IAAI,EAAE,CADG;AAETC,IAAAA,QAAQ,EAAE;AAFD;AADoB,CAAlB,CAAf","sourcesContent":["import React, { useCallback, useRef } from 'react';\nimport {\n KeyboardAvoidingView,\n KeyboardAvoidingViewProps,\n LayoutChangeEvent,\n StyleSheet,\n View,\n ViewProps,\n} from 'react-native';\nimport useKeyboardShowEvent from '../hooks/useKeyboardShowEvent';\nimport useInternalCollapsibleContext from '../hooks/useInternalCollapsibleContext';\nimport useCollapsibleContext from '../hooks/useCollapsibleContext';\n\ntype Props = Omit<ViewProps, 'ref' | 'onLayout'> & {\n children: Element;\n keyboardAvoidingViewProps?: KeyboardAvoidingViewProps;\n textInputRefs?: any[];\n};\n\nexport default function CollapsibleContainer({\n children,\n keyboardAvoidingViewProps,\n textInputRefs = [],\n ...props\n}: Props) {\n const { containerRef, handleContainerHeight } =\n useInternalCollapsibleContext();\n const { scrollY, scrollTo } = useCollapsibleContext();\n\n const containerHeight = useRef(0);\n\n useKeyboardShowEvent(() => {\n textInputRefs.some((ref) => {\n const isFocusedFunc = ref.current.isFocused;\n const isFocused =\n isFocusedFunc && typeof isFocusedFunc === 'function'\n ? isFocusedFunc()\n : isFocusedFunc;\n if (isFocused) {\n ref.current.measureLayout(\n // @ts-ignore\n containerRef.current,\n (_left: number, top: number, _width: number, height: number) => {\n if (top + height - scrollY.value > containerHeight.current) {\n const extraOffset =\n keyboardAvoidingViewProps?.keyboardVerticalOffset ?? 20;\n scrollTo(top + height + extraOffset - containerHeight.current);\n }\n },\n () => {}\n );\n }\n return isFocused;\n });\n });\n\n const handleContainerLayout = useCallback(\n (layout: LayoutChangeEvent) => {\n const height = layout.nativeEvent.layout.height;\n containerHeight.current = height;\n handleContainerHeight(height);\n },\n [handleContainerHeight]\n );\n\n return (\n <KeyboardAvoidingView\n style={styles.container}\n behavior=\"padding\"\n {...keyboardAvoidingViewProps}\n >\n <View\n {...props}\n ref={containerRef}\n style={[styles.container, props.style]}\n onLayout={handleContainerLayout}\n >\n {children}\n </View>\n </KeyboardAvoidingView>\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n overflow: 'hidden',\n },\n});\n"]}
|
|
@@ -36,7 +36,7 @@ function PullToRefreshContainer({
|
|
|
36
36
|
} = (0, _usePullToRefreshContext.default)();
|
|
37
37
|
const gestureHandler = (0, _reactNativeReanimated.useAnimatedGestureHandler)({
|
|
38
38
|
onStart: (_, ctx) => {
|
|
39
|
-
ctx.startY = internalRefreshing.value ? refreshValue.value : 0;
|
|
39
|
+
ctx.startY = (internalRefreshing.value ? refreshValue.value : 0) - scrollY.value;
|
|
40
40
|
},
|
|
41
41
|
onActive: (event, ctx) => {
|
|
42
42
|
if (scrollY.value <= 1) {
|
|
@@ -47,7 +47,7 @@ function PullToRefreshContainer({
|
|
|
47
47
|
if (clampedValue > internalHeight.value) {
|
|
48
48
|
internalRefreshing.value = true;
|
|
49
49
|
}
|
|
50
|
-
} else {
|
|
50
|
+
} else if (!internalRefreshing.value) {
|
|
51
51
|
refreshValue.value = 0;
|
|
52
52
|
}
|
|
53
53
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["PullToRefreshContainer.tsx"],"names":["PullToRefreshContainer","children","scrollY","scrollRef","panRef","refreshValue","internalRefreshing","internalHeight","gestureHandler","onStart","_","ctx","startY","value","onActive","event","tranY","translationY","clampedValue","onEnd","StyleSheet","absoluteFill"],"mappings":";;;;;;;AAAA;;AAIA;;AACA;;AAIA;;AACA;;AACA;;;;;;;;AAOe,SAASA,sBAAT,CAAgC;AAAEC,EAAAA,QAAF;AAAYC,EAAAA;AAAZ,CAAhC,EAA8D;AAC3E,QAAMC,SAAS,GAAG,oBAAlB;AACA,QAAMC,MAAM,GAAG,oBAAf;AACA,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA,kBAAhB;AAAoCC,IAAAA;AAApC,MACJ,uCADF;AAGA,QAAMC,cAAc,GAAG,sDAA0B;AAC/CC,IAAAA,OAAO,EAAE,CAACC,CAAD,EAAIC,GAAJ,KAAiB;AACxBA,MAAAA,GAAG,CAACC,MAAJ,
|
|
1
|
+
{"version":3,"sources":["PullToRefreshContainer.tsx"],"names":["PullToRefreshContainer","children","scrollY","scrollRef","panRef","refreshValue","internalRefreshing","internalHeight","gestureHandler","onStart","_","ctx","startY","value","onActive","event","tranY","translationY","clampedValue","onEnd","StyleSheet","absoluteFill"],"mappings":";;;;;;;AAAA;;AAIA;;AACA;;AAIA;;AACA;;AACA;;;;;;;;AAOe,SAASA,sBAAT,CAAgC;AAAEC,EAAAA,QAAF;AAAYC,EAAAA;AAAZ,CAAhC,EAA8D;AAC3E,QAAMC,SAAS,GAAG,oBAAlB;AACA,QAAMC,MAAM,GAAG,oBAAf;AACA,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA,kBAAhB;AAAoCC,IAAAA;AAApC,MACJ,uCADF;AAGA,QAAMC,cAAc,GAAG,sDAA0B;AAC/CC,IAAAA,OAAO,EAAE,CAACC,CAAD,EAAIC,GAAJ,KAAiB;AACxBA,MAAAA,GAAG,CAACC,MAAJ,GACE,CAACN,kBAAkB,CAACO,KAAnB,GAA2BR,YAAY,CAACQ,KAAxC,GAAgD,CAAjD,IAAsDX,OAAO,CAACW,KADhE;AAED,KAJ8C;AAK/CC,IAAAA,QAAQ,EAAE,CAACC,KAAD,EAAQJ,GAAR,KAAqB;AAC7B,UAAIT,OAAO,CAACW,KAAR,IAAiB,CAArB,EAAwB;AACtB,cAAMG,KAAK,GAAGD,KAAK,CAACE,YAAN,GAAqBN,GAAG,CAACC,MAAvC;AACA,cAAMM,YAAY,GAAG,wBAAYF,KAAZ,EAAmB,CAAnB,EAAsBT,cAAc,CAACM,KAArC,CAArB;AACAR,QAAAA,YAAY,CAACQ,KAAb,GAAqBK,YAArB;;AACA,YAAIA,YAAY,GAAGX,cAAc,CAACM,KAAlC,EAAyC;AACvCP,UAAAA,kBAAkB,CAACO,KAAnB,GAA2B,IAA3B;AACD;AACF,OAPD,MAOO,IAAI,CAACP,kBAAkB,CAACO,KAAxB,EAA+B;AACpCR,QAAAA,YAAY,CAACQ,KAAb,GAAqB,CAArB;AACD;AACF,KAhB8C;AAiB/CM,IAAAA,KAAK,EAAE,MAAM;AACX,UAAId,YAAY,CAACQ,KAAb,GAAqB,CAAzB,EAA4B;AAC1B,cAAMA,KAAK,GAAGP,kBAAkB,CAACO,KAAnB,GAA2BN,cAAc,CAACM,KAA1C,GAAkD,CAAhE;AACAR,QAAAA,YAAY,CAACQ,KAAb,GAAqB,uCAAWA,KAAX,CAArB;AACD;AACF;AAtB8C,GAA1B,CAAvB;AAyBA,sBACE,6BAAC,4CAAD;AACE,IAAA,GAAG,EAAET,MADP;AAEE,IAAA,oBAAoB,EAAED,SAFxB;AAGE,IAAA,cAAc,EAAEK,cAHlB;AAIE,IAAA,uBAAuB,EAAE,KAJ3B;AAKE,IAAA,8BAA8B,MALhC;AAME,IAAA,WAAW,EAAE;AANf,kBAQE,6BAAC,8BAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAEY,wBAAWC;AAAjC,kBACE,6BAAC,mDAAD;AAA0B,IAAA,GAAG,EAAElB,SAA/B;AAA0C,IAAA,oBAAoB,EAAEC;AAAhE,KACGH,QADH,CADF,CARF,CADF;AAgBD","sourcesContent":["import {\n NativeViewGestureHandler,\n PanGestureHandler,\n} from 'react-native-gesture-handler';\nimport React, { useRef } from 'react';\nimport Animated, {\n useAnimatedGestureHandler,\n withTiming,\n} from 'react-native-reanimated';\nimport usePullToRefreshContext from './usePullToRefreshContext';\nimport { StyleSheet } from 'react-native';\nimport { rubberClamp } from './utils';\n\ntype Props = {\n children: React.ReactNode;\n scrollY: Animated.SharedValue<number>;\n};\n\nexport default function PullToRefreshContainer({ children, scrollY }: Props) {\n const scrollRef = useRef();\n const panRef = useRef();\n const { refreshValue, internalRefreshing, internalHeight } =\n usePullToRefreshContext();\n\n const gestureHandler = useAnimatedGestureHandler({\n onStart: (_, ctx: any) => {\n ctx.startY =\n (internalRefreshing.value ? refreshValue.value : 0) - scrollY.value;\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 if (!internalRefreshing.value) {\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"]}
|
|
@@ -37,13 +37,21 @@ function RefreshControl({
|
|
|
37
37
|
(0, _react.useEffect)(() => {
|
|
38
38
|
internalRefreshing.value = refreshing;
|
|
39
39
|
}, [refreshing]);
|
|
40
|
+
(0, _reactNativeReanimated.useAnimatedReaction)(() => {
|
|
41
|
+
return internalRefreshing.value;
|
|
42
|
+
}, (result, prev) => {
|
|
43
|
+
if (result !== prev) {
|
|
44
|
+
if (result && refreshValue.value === 0) {
|
|
45
|
+
refreshValue.value = height;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
});
|
|
40
49
|
const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
|
|
41
50
|
return {
|
|
42
51
|
height: refreshValue.value
|
|
43
52
|
};
|
|
44
53
|
}, []);
|
|
45
54
|
const handleRefresh = (0, _react.useCallback)(() => {
|
|
46
|
-
console.log('refresh');
|
|
47
55
|
onRefresh();
|
|
48
56
|
}, [onRefresh]);
|
|
49
57
|
(0, _reactNativeReanimated.useAnimatedReaction)(() => internalRefreshing.value, (result, prev) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["RefreshControl.tsx"],"names":["RefreshControl","height","refreshing","onRefresh","renderAnimation","refreshValue","internalRefreshing","internalHeight","value","
|
|
1
|
+
{"version":3,"sources":["RefreshControl.tsx"],"names":["RefreshControl","height","refreshing","onRefresh","renderAnimation","refreshValue","internalRefreshing","internalHeight","value","result","prev","animatedStyle","handleRefresh","animatedProps","progress","undefined","Math","min","styles","container","StyleSheet","create","overflow"],"mappings":";;;;;;;AACA;;AACA;;AACA;;AAOA;;;;;;;;AAVA;AAmBe,SAASA,cAAT,CAAwB;AACrCC,EAAAA,MAAM,GAAG,GAD4B;AAErCC,EAAAA,UAFqC;AAGrCC,EAAAA,SAHqC;AAIrCC,EAAAA;AAJqC,CAAxB,EAKL;AACR,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA,kBAAhB;AAAoCC,IAAAA;AAApC,MACJ,uCADF;AAGA,wBAAU,MAAM;AACdA,IAAAA,cAAc,CAACC,KAAf,GAAuBP,MAAvB;AACD,GAFD,EAEG,CAACA,MAAD,CAFH;AAIA,wBAAU,MAAM;AACdK,IAAAA,kBAAkB,CAACE,KAAnB,GAA2BN,UAA3B;AACD,GAFD,EAEG,CAACA,UAAD,CAFH;AAIA,kDACE,MAAM;AACJ,WAAOI,kBAAkB,CAACE,KAA1B;AACD,GAHH,EAIE,CAACC,MAAD,EAASC,IAAT,KAAkB;AAChB,QAAID,MAAM,KAAKC,IAAf,EAAqB;AACnB,UAAID,MAAM,IAAIJ,YAAY,CAACG,KAAb,KAAuB,CAArC,EAAwC;AACtCH,QAAAA,YAAY,CAACG,KAAb,GAAqBP,MAArB;AACD;AACF;AACF,GAVH;AAaA,QAAMU,aAAa,GAAG,6CAAiB,MAAM;AAC3C,WAAO;AACLV,MAAAA,MAAM,EAAEI,YAAY,CAACG;AADhB,KAAP;AAGD,GAJqB,EAInB,EAJmB,CAAtB;AAMA,QAAMI,aAAa,GAAG,wBAAY,MAAM;AACtCT,IAAAA,SAAS;AACV,GAFqB,EAEnB,CAACA,SAAD,CAFmB,CAAtB;AAIA,kDACE,MAAMG,kBAAkB,CAACE,KAD3B,EAEE,CAACC,MAAD,EAASC,IAAT,KAAkB;AAChB,QAAID,MAAM,KAAKC,IAAf,EAAqB;AACnB,UAAID,MAAJ,EAAY;AACV,4CAAQG,aAAR;AACD,OAFD,MAEO;AACLP,QAAAA,YAAY,CAACG,KAAb,GAAqB,uCAAW,CAAX,CAArB;AACD;AACF;AACF,GAVH;AAaA,QAAMK,aAAa,GAAG,6CAAiB,MAAM;AAC3C,WAAO;AACLC,MAAAA,QAAQ,EAAER,kBAAkB,CAACE,KAAnB,GACNO,SADM,GAENC,IAAI,CAACC,GAAL,CAASZ,YAAY,CAACG,KAAb,GAAqBP,MAA9B,EAAsC,CAAtC;AAHC,KAAP;AAKD,GANqB,EAMnB,CAACA,MAAD,CANmB,CAAtB;AAQA,sBACE,6BAAC,8BAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAE,CAACiB,MAAM,CAACC,SAAR,EAAmBR,aAAnB;AAAtB,KACGP,eAAe,CAACS,aAAD,CADlB,CADF;AAKD;;AAED,MAAMK,MAAM,GAAGE,wBAAWC,MAAX,CAAkB;AAC/BF,EAAAA,SAAS,EAAE;AACTG,IAAAA,QAAQ,EAAE;AADD;AADoB,CAAlB,CAAf","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useCallback, useEffect } from 'react';\nimport { StyleSheet } from 'react-native';\nimport Animated, {\n runOnJS,\n useAnimatedProps,\n useAnimatedReaction,\n useAnimatedStyle,\n withTiming,\n} from 'react-native-reanimated';\nimport usePullToRefreshContext from './usePullToRefreshContext';\n\ntype Props = {\n height?: number;\n refreshing: boolean;\n onRefresh: () => void;\n renderAnimation: (animatedProps: any) => React.ReactNode;\n};\n\nexport default function RefreshControl({\n height = 100,\n refreshing,\n onRefresh,\n renderAnimation,\n}: Props) {\n const { refreshValue, internalRefreshing, internalHeight } =\n usePullToRefreshContext();\n\n useEffect(() => {\n internalHeight.value = height;\n }, [height]);\n\n useEffect(() => {\n internalRefreshing.value = refreshing;\n }, [refreshing]);\n\n useAnimatedReaction(\n () => {\n return internalRefreshing.value;\n },\n (result, prev) => {\n if (result !== prev) {\n if (result && refreshValue.value === 0) {\n refreshValue.value = height;\n }\n }\n }\n );\n\n const animatedStyle = useAnimatedStyle(() => {\n return {\n height: refreshValue.value,\n };\n }, []);\n\n const handleRefresh = useCallback(() => {\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"]}
|
|
@@ -27,18 +27,10 @@ export default function CollapsibleContainer({
|
|
|
27
27
|
|
|
28
28
|
if (isFocused) {
|
|
29
29
|
ref.current.measureLayout( // @ts-ignore
|
|
30
|
-
containerRef.current, (
|
|
31
|
-
console.log({
|
|
32
|
-
left,
|
|
33
|
-
top,
|
|
34
|
-
width,
|
|
35
|
-
height
|
|
36
|
-
});
|
|
37
|
-
|
|
30
|
+
containerRef.current, (_left, top, _width, height) => {
|
|
38
31
|
if (top + height - scrollY.value > containerHeight.current) {
|
|
39
32
|
var _keyboardAvoidingView;
|
|
40
33
|
|
|
41
|
-
console.log('need to scroll');
|
|
42
34
|
const extraOffset = (_keyboardAvoidingView = keyboardAvoidingViewProps === null || keyboardAvoidingViewProps === void 0 ? void 0 : keyboardAvoidingViewProps.keyboardVerticalOffset) !== null && _keyboardAvoidingView !== void 0 ? _keyboardAvoidingView : 20;
|
|
43
35
|
scrollTo(top + height + extraOffset - containerHeight.current);
|
|
44
36
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["CollapsibleContainer.tsx"],"names":["React","useCallback","useRef","KeyboardAvoidingView","StyleSheet","View","useKeyboardShowEvent","useInternalCollapsibleContext","useCollapsibleContext","CollapsibleContainer","children","keyboardAvoidingViewProps","textInputRefs","props","containerRef","handleContainerHeight","scrollY","scrollTo","containerHeight","some","ref","isFocusedFunc","current","isFocused","measureLayout","
|
|
1
|
+
{"version":3,"sources":["CollapsibleContainer.tsx"],"names":["React","useCallback","useRef","KeyboardAvoidingView","StyleSheet","View","useKeyboardShowEvent","useInternalCollapsibleContext","useCollapsibleContext","CollapsibleContainer","children","keyboardAvoidingViewProps","textInputRefs","props","containerRef","handleContainerHeight","scrollY","scrollTo","containerHeight","some","ref","isFocusedFunc","current","isFocused","measureLayout","_left","top","_width","height","value","extraOffset","keyboardVerticalOffset","handleContainerLayout","layout","nativeEvent","styles","container","style","create","flex","overflow"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,WAAhB,EAA6BC,MAA7B,QAA2C,OAA3C;AACA,SACEC,oBADF,EAIEC,UAJF,EAKEC,IALF,QAOO,cAPP;AAQA,OAAOC,oBAAP,MAAiC,+BAAjC;AACA,OAAOC,6BAAP,MAA0C,wCAA1C;AACA,OAAOC,qBAAP,MAAkC,gCAAlC;AAQA,eAAe,SAASC,oBAAT,CAA8B;AAC3CC,EAAAA,QAD2C;AAE3CC,EAAAA,yBAF2C;AAG3CC,EAAAA,aAAa,GAAG,EAH2B;AAI3C,KAAGC;AAJwC,CAA9B,EAKL;AACR,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,MACJR,6BAA6B,EAD/B;AAEA,QAAM;AAAES,IAAAA,OAAF;AAAWC,IAAAA;AAAX,MAAwBT,qBAAqB,EAAnD;AAEA,QAAMU,eAAe,GAAGhB,MAAM,CAAC,CAAD,CAA9B;AAEAI,EAAAA,oBAAoB,CAAC,MAAM;AACzBM,IAAAA,aAAa,CAACO,IAAd,CAAoBC,GAAD,IAAS;AAC1B,YAAMC,aAAa,GAAGD,GAAG,CAACE,OAAJ,CAAYC,SAAlC;AACA,YAAMA,SAAS,GACbF,aAAa,IAAI,OAAOA,aAAP,KAAyB,UAA1C,GACIA,aAAa,EADjB,GAEIA,aAHN;;AAIA,UAAIE,SAAJ,EAAe;AACbH,QAAAA,GAAG,CAACE,OAAJ,CAAYE,aAAZ,EACE;AACAV,QAAAA,YAAY,CAACQ,OAFf,EAGE,CAACG,KAAD,EAAgBC,GAAhB,EAA6BC,MAA7B,EAA6CC,MAA7C,KAAgE;AAC9D,cAAIF,GAAG,GAAGE,MAAN,GAAeZ,OAAO,CAACa,KAAvB,GAA+BX,eAAe,CAACI,OAAnD,EAA4D;AAAA;;AAC1D,kBAAMQ,WAAW,4BACfnB,yBADe,aACfA,yBADe,uBACfA,yBAAyB,CAAEoB,sBADZ,yEACsC,EADvD;AAEAd,YAAAA,QAAQ,CAACS,GAAG,GAAGE,MAAN,GAAeE,WAAf,GAA6BZ,eAAe,CAACI,OAA9C,CAAR;AACD;AACF,SATH,EAUE,MAAM,CAAE,CAVV;AAYD;;AACD,aAAOC,SAAP;AACD,KArBD;AAsBD,GAvBmB,CAApB;AAyBA,QAAMS,qBAAqB,GAAG/B,WAAW,CACtCgC,MAAD,IAA+B;AAC7B,UAAML,MAAM,GAAGK,MAAM,CAACC,WAAP,CAAmBD,MAAnB,CAA0BL,MAAzC;AACAV,IAAAA,eAAe,CAACI,OAAhB,GAA0BM,MAA1B;AACAb,IAAAA,qBAAqB,CAACa,MAAD,CAArB;AACD,GALsC,EAMvC,CAACb,qBAAD,CANuC,CAAzC;AASA,sBACE,oBAAC,oBAAD;AACE,IAAA,KAAK,EAAEoB,MAAM,CAACC,SADhB;AAEE,IAAA,QAAQ,EAAC;AAFX,KAGMzB,yBAHN,gBAKE,oBAAC,IAAD,eACME,KADN;AAEE,IAAA,GAAG,EAAEC,YAFP;AAGE,IAAA,KAAK,EAAE,CAACqB,MAAM,CAACC,SAAR,EAAmBvB,KAAK,CAACwB,KAAzB,CAHT;AAIE,IAAA,QAAQ,EAAEL;AAJZ,MAMGtB,QANH,CALF,CADF;AAgBD;AAED,MAAMyB,MAAM,GAAG/B,UAAU,CAACkC,MAAX,CAAkB;AAC/BF,EAAAA,SAAS,EAAE;AACTG,IAAAA,IAAI,EAAE,CADG;AAETC,IAAAA,QAAQ,EAAE;AAFD;AADoB,CAAlB,CAAf","sourcesContent":["import React, { useCallback, useRef } from 'react';\nimport {\n KeyboardAvoidingView,\n KeyboardAvoidingViewProps,\n LayoutChangeEvent,\n StyleSheet,\n View,\n ViewProps,\n} from 'react-native';\nimport useKeyboardShowEvent from '../hooks/useKeyboardShowEvent';\nimport useInternalCollapsibleContext from '../hooks/useInternalCollapsibleContext';\nimport useCollapsibleContext from '../hooks/useCollapsibleContext';\n\ntype Props = Omit<ViewProps, 'ref' | 'onLayout'> & {\n children: Element;\n keyboardAvoidingViewProps?: KeyboardAvoidingViewProps;\n textInputRefs?: any[];\n};\n\nexport default function CollapsibleContainer({\n children,\n keyboardAvoidingViewProps,\n textInputRefs = [],\n ...props\n}: Props) {\n const { containerRef, handleContainerHeight } =\n useInternalCollapsibleContext();\n const { scrollY, scrollTo } = useCollapsibleContext();\n\n const containerHeight = useRef(0);\n\n useKeyboardShowEvent(() => {\n textInputRefs.some((ref) => {\n const isFocusedFunc = ref.current.isFocused;\n const isFocused =\n isFocusedFunc && typeof isFocusedFunc === 'function'\n ? isFocusedFunc()\n : isFocusedFunc;\n if (isFocused) {\n ref.current.measureLayout(\n // @ts-ignore\n containerRef.current,\n (_left: number, top: number, _width: number, height: number) => {\n if (top + height - scrollY.value > containerHeight.current) {\n const extraOffset =\n keyboardAvoidingViewProps?.keyboardVerticalOffset ?? 20;\n scrollTo(top + height + extraOffset - containerHeight.current);\n }\n },\n () => {}\n );\n }\n return isFocused;\n });\n });\n\n const handleContainerLayout = useCallback(\n (layout: LayoutChangeEvent) => {\n const height = layout.nativeEvent.layout.height;\n containerHeight.current = height;\n handleContainerHeight(height);\n },\n [handleContainerHeight]\n );\n\n return (\n <KeyboardAvoidingView\n style={styles.container}\n behavior=\"padding\"\n {...keyboardAvoidingViewProps}\n >\n <View\n {...props}\n ref={containerRef}\n style={[styles.container, props.style]}\n onLayout={handleContainerLayout}\n >\n {children}\n </View>\n </KeyboardAvoidingView>\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n overflow: 'hidden',\n },\n});\n"]}
|
|
@@ -17,7 +17,7 @@ export default function PullToRefreshContainer({
|
|
|
17
17
|
} = usePullToRefreshContext();
|
|
18
18
|
const gestureHandler = useAnimatedGestureHandler({
|
|
19
19
|
onStart: (_, ctx) => {
|
|
20
|
-
ctx.startY = internalRefreshing.value ? refreshValue.value : 0;
|
|
20
|
+
ctx.startY = (internalRefreshing.value ? refreshValue.value : 0) - scrollY.value;
|
|
21
21
|
},
|
|
22
22
|
onActive: (event, ctx) => {
|
|
23
23
|
if (scrollY.value <= 1) {
|
|
@@ -28,7 +28,7 @@ export default function PullToRefreshContainer({
|
|
|
28
28
|
if (clampedValue > internalHeight.value) {
|
|
29
29
|
internalRefreshing.value = true;
|
|
30
30
|
}
|
|
31
|
-
} else {
|
|
31
|
+
} else if (!internalRefreshing.value) {
|
|
32
32
|
refreshValue.value = 0;
|
|
33
33
|
}
|
|
34
34
|
},
|
|
@@ -1 +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,
|
|
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,GACE,CAACN,kBAAkB,CAACO,KAAnB,GAA2BR,YAAY,CAACQ,KAAxC,GAAgD,CAAjD,IAAsDX,OAAO,CAACW,KADhE;AAED,KAJ8C;AAK/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,IAAI,CAACP,kBAAkB,CAACO,KAAxB,EAA+B;AACpCR,QAAAA,YAAY,CAACQ,KAAb,GAAqB,CAArB;AACD;AACF,KAhB8C;AAiB/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;AAtB8C,GAAD,CAAhD;AAyBA,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 =\n (internalRefreshing.value ? refreshValue.value : 0) - scrollY.value;\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 if (!internalRefreshing.value) {\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"]}
|
|
@@ -20,13 +20,21 @@ export default function RefreshControl({
|
|
|
20
20
|
useEffect(() => {
|
|
21
21
|
internalRefreshing.value = refreshing;
|
|
22
22
|
}, [refreshing]);
|
|
23
|
+
useAnimatedReaction(() => {
|
|
24
|
+
return internalRefreshing.value;
|
|
25
|
+
}, (result, prev) => {
|
|
26
|
+
if (result !== prev) {
|
|
27
|
+
if (result && refreshValue.value === 0) {
|
|
28
|
+
refreshValue.value = height;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
});
|
|
23
32
|
const animatedStyle = useAnimatedStyle(() => {
|
|
24
33
|
return {
|
|
25
34
|
height: refreshValue.value
|
|
26
35
|
};
|
|
27
36
|
}, []);
|
|
28
37
|
const handleRefresh = useCallback(() => {
|
|
29
|
-
console.log('refresh');
|
|
30
38
|
onRefresh();
|
|
31
39
|
}, [onRefresh]);
|
|
32
40
|
useAnimatedReaction(() => internalRefreshing.value, (result, prev) => {
|
|
@@ -1 +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","
|
|
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","result","prev","animatedStyle","handleRefresh","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;AAIAN,EAAAA,mBAAmB,CACjB,MAAM;AACJ,WAAOU,kBAAkB,CAACE,KAA1B;AACD,GAHgB,EAIjB,CAACC,MAAD,EAASC,IAAT,KAAkB;AAChB,QAAID,MAAM,KAAKC,IAAf,EAAqB;AACnB,UAAID,MAAM,IAAIJ,YAAY,CAACG,KAAb,KAAuB,CAArC,EAAwC;AACtCH,QAAAA,YAAY,CAACG,KAAb,GAAqBP,MAArB;AACD;AACF;AACF,GAVgB,CAAnB;AAaA,QAAMU,aAAa,GAAGd,gBAAgB,CAAC,MAAM;AAC3C,WAAO;AACLI,MAAAA,MAAM,EAAEI,YAAY,CAACG;AADhB,KAAP;AAGD,GAJqC,EAInC,EAJmC,CAAtC;AAMA,QAAMI,aAAa,GAAGtB,WAAW,CAAC,MAAM;AACtCa,IAAAA,SAAS;AACV,GAFgC,EAE9B,CAACA,SAAD,CAF8B,CAAjC;AAIAP,EAAAA,mBAAmB,CACjB,MAAMU,kBAAkB,CAACE,KADR,EAEjB,CAACC,MAAD,EAASC,IAAT,KAAkB;AAChB,QAAID,MAAM,KAAKC,IAAf,EAAqB;AACnB,UAAID,MAAJ,EAAY;AACVf,QAAAA,OAAO,CAACkB,aAAD,CAAP;AACD,OAFD,MAEO;AACLP,QAAAA,YAAY,CAACG,KAAb,GAAqBV,UAAU,CAAC,CAAD,CAA/B;AACD;AACF;AACF,GAVgB,CAAnB;AAaA,QAAMe,aAAa,GAAGlB,gBAAgB,CAAC,MAAM;AAC3C,WAAO;AACLmB,MAAAA,QAAQ,EAAER,kBAAkB,CAACE,KAAnB,GACNO,SADM,GAENC,IAAI,CAACC,GAAL,CAASZ,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,CAACiB,MAAM,CAACC,SAAR,EAAmBR,aAAnB;AAAtB,KACGP,eAAe,CAACS,aAAD,CADlB,CADF;AAKD;AAED,MAAMK,MAAM,GAAG1B,UAAU,CAAC4B,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 useAnimatedReaction(\n () => {\n return internalRefreshing.value;\n },\n (result, prev) => {\n if (result !== prev) {\n if (result && refreshValue.value === 0) {\n refreshValue.value = height;\n }\n }\n }\n );\n\n const animatedStyle = useAnimatedStyle(() => {\n return {\n height: refreshValue.value,\n };\n }, []);\n\n const handleRefresh = useCallback(() => {\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"]}
|
package/package.json
CHANGED
|
@@ -40,10 +40,8 @@ export default function CollapsibleContainer({
|
|
|
40
40
|
ref.current.measureLayout(
|
|
41
41
|
// @ts-ignore
|
|
42
42
|
containerRef.current,
|
|
43
|
-
(
|
|
44
|
-
console.log({ left, top, width, height });
|
|
43
|
+
(_left: number, top: number, _width: number, height: number) => {
|
|
45
44
|
if (top + height - scrollY.value > containerHeight.current) {
|
|
46
|
-
console.log('need to scroll');
|
|
47
45
|
const extraOffset =
|
|
48
46
|
keyboardAvoidingViewProps?.keyboardVerticalOffset ?? 20;
|
|
49
47
|
scrollTo(top + height + extraOffset - containerHeight.current);
|
|
@@ -24,7 +24,8 @@ export default function PullToRefreshContainer({ children, scrollY }: Props) {
|
|
|
24
24
|
|
|
25
25
|
const gestureHandler = useAnimatedGestureHandler({
|
|
26
26
|
onStart: (_, ctx: any) => {
|
|
27
|
-
ctx.startY =
|
|
27
|
+
ctx.startY =
|
|
28
|
+
(internalRefreshing.value ? refreshValue.value : 0) - scrollY.value;
|
|
28
29
|
},
|
|
29
30
|
onActive: (event, ctx: any) => {
|
|
30
31
|
if (scrollY.value <= 1) {
|
|
@@ -34,7 +35,7 @@ export default function PullToRefreshContainer({ children, scrollY }: Props) {
|
|
|
34
35
|
if (clampedValue > internalHeight.value) {
|
|
35
36
|
internalRefreshing.value = true;
|
|
36
37
|
}
|
|
37
|
-
} else {
|
|
38
|
+
} else if (!internalRefreshing.value) {
|
|
38
39
|
refreshValue.value = 0;
|
|
39
40
|
}
|
|
40
41
|
},
|
|
@@ -34,6 +34,19 @@ export default function RefreshControl({
|
|
|
34
34
|
internalRefreshing.value = refreshing;
|
|
35
35
|
}, [refreshing]);
|
|
36
36
|
|
|
37
|
+
useAnimatedReaction(
|
|
38
|
+
() => {
|
|
39
|
+
return internalRefreshing.value;
|
|
40
|
+
},
|
|
41
|
+
(result, prev) => {
|
|
42
|
+
if (result !== prev) {
|
|
43
|
+
if (result && refreshValue.value === 0) {
|
|
44
|
+
refreshValue.value = height;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
);
|
|
49
|
+
|
|
37
50
|
const animatedStyle = useAnimatedStyle(() => {
|
|
38
51
|
return {
|
|
39
52
|
height: refreshValue.value,
|
|
@@ -41,7 +54,6 @@ export default function RefreshControl({
|
|
|
41
54
|
}, []);
|
|
42
55
|
|
|
43
56
|
const handleRefresh = useCallback(() => {
|
|
44
|
-
console.log('refresh');
|
|
45
57
|
onRefresh();
|
|
46
58
|
}, [onRefresh]);
|
|
47
59
|
|