react-native-snap-sheet 1.0.5 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-snap-sheet",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "",
   "homepage": "https://github.com/deflexable/react-native-snap-sheet#readme",
   "bugs": {
@@ -19,7 +19,7 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "react-native-dodge-keyboard": "^1.0.5",
+    "react-native-dodge-keyboard": "^1.0.7",
     "react-native-push-back": "^1.0.0"
   }
 }

package/src/snapsheet.js

@@ -55,7 +55,7 @@ const SnapSheet = forwardRef(function SnapSheet({
     if (isLift) {
         const realChecker = __checkIfElementIsFocused;
         __checkIfElementIsFocused = (r, refs) => {
-            return !!r?.[CheckFocusedNode] && refs.some(v => realChecker ? realChecker?.(v) : v?.isFocused?.());
+            return !!r?.[CheckFocusedNode] && refs.some(v => realChecker ? realChecker?.(v, refs) : v?.isFocused?.());
         };
         if (keyboardDodgingOffset === undefined) {
             keyboardDodgingOffset = 0;
@@ -69,8 +69,6 @@ const SnapSheet = forwardRef(function SnapSheet({
 
     const [scrollEnabled, setScrollEnabled] = useState(false);
     const [dodgeOffset, setDodgeOffset] = useState(0);
-    const [currentIndex, setCurrentIndex] = useState(initialSnapIndex);
-    const [finishedIndex, setFinishedIndex] = useState(initialSnapIndex);
     const [prefferedAnchor, setPrefferedAnchor] = useState();
 
     snapPoints = snapPoints.map(v => v + dodgeOffset);
@@ -100,6 +98,7 @@ const SnapSheet = forwardRef(function SnapSheet({
      * @type {import("react").RefObject<{[key: string]: { ref: import('react-native').ScrollView, scrollY: 0, location: number[], anchorId: boolean }}>}
      */
     const scrollRefObj = useRef({});
+    const dodgeRef = useRef();
     const lastOffset = useRef(translateY._value);
     const lastSnapIndex = useRef(initialSnapIndex);
     const instantPrefferAnchor = useRef();
@@ -120,6 +119,9 @@ const SnapSheet = forwardRef(function SnapSheet({
     }
 
     const snapToIndex = useRef();
+    const stillSnapping = useRef();
+    const lastSnappingInstance = useRef(0);
+    const shouldRefreshDodge = useRef();
 
     snapToIndex.current = (index, force, velocity, onFinish) => {
         if (disabled && !force) return;
@@ -133,7 +135,6 @@ const SnapSheet = forwardRef(function SnapSheet({
 
         const prevY = translateY._value;
         setScrollEnabled(index === snapPoints.length - 1);
-        setCurrentIndex(index);
 
         // console.log('snapping:', index);
         let wasFinished;
@@ -147,6 +148,8 @@ const SnapSheet = forwardRef(function SnapSheet({
         const timeout = pixel * PixelRate;
 
         const timer = setTimeout(guessFinish, Math.max(300, timeout));
+        const thisRef = ++lastSnappingInstance.current;
+        stillSnapping.current = true;
 
         // console.log('snapTimer:', { timeout, pixel }, ' newY:', newY, ' snapPoint:', initSnapPoints, ' snapTrans:', snapTranslateValues);
 
@@ -156,8 +159,16 @@ const SnapSheet = forwardRef(function SnapSheet({
             useNativeDriver: true
         }).start(() => {
             clearTimeout(timer);
-            setFinishedIndex(index);
             guessFinish();
+            if (thisRef === lastSnappingInstance.current) {
+                requestIdleCallback(() => {
+                    stillSnapping.current = false;
+                    if (shouldRefreshDodge.current) {
+                        isLifting.current = false;
+                        dodgeRef.current.trigger();
+                    }
+                }, { timeout: 700 });
+            }
         });
 
         lastOffset.current = newY;
@@ -305,44 +316,52 @@ const SnapSheet = forwardRef(function SnapSheet({
     }), [handleColor]);
 
     const disableDodging = keyboardDodgingBehaviour === 'off';
-    const sameIndex = currentIndex === finishedIndex;
 
     const instanceIdIterator = useRef(0);
     const prevKE = useRef();
-    const prevLiftOffset = useRef(0);
     const isLifting = useRef();
+    const lastLiftInstance = useRef(0);
 
-    const quicklyDodgeKeyboard = (offset, keyboardEvent) => {
-        // console.log('quicklyDodgeKeyboard offset:', offset, ' keyboardEvent:', keyboardEvent);
+    const quicklyDodgeKeyboard = async (event) => {
+        let { liftUp, keyboardEvent } = event;
+        // console.log('quicklyDodgeKeyboard event:', event);
 
         if (!keyboardEvent) {
-            if (!(keyboardEvent = prevKE.current)) {
-                prevLiftOffset.current = offset;
-                return;
-            }
+            if (!(keyboardEvent = prevKE.current)) return;
         }
         if (keyboardEvent.endCoordinates.height) {
             prevKE.current = keyboardEvent;
         } else {
             if (prevKE.current) keyboardEvent = prevKE.current;
         }
+        isLifting.current = true;
+        if (stillSnapping.current) {
+            if (!liftUp) {
+                isLifting.current = false;
+                setDodgeOffset(0);
+                return;
+            }
+            shouldRefreshDodge.current = true;
+            return;
+        }
+        const thisRef = ++lastLiftInstance.current;
 
-        if (prevLiftOffset.current === offset) return;
-        prevLiftOffset.current = offset;
+        const kh = keyboardEvent?.endCoordinates?.height || 0;
+        const realSnapPoint = initSnapPoints[lastSnapIndex.current];
 
-        const newPosY = MODAL_HEIGHT - (initSnapPoints[lastSnapIndex.current] + offset);
-        const newDuration = (Math.abs(newPosY - translateY._value) * keyboardEvent.duration) / keyboardEvent?.endCoordinates.height;
+        const newY = liftUp ? translateY._value - liftUp : (MODAL_HEIGHT - realSnapPoint);
+        const newDodgeOffset = (MODAL_HEIGHT - newY) - realSnapPoint;
+        const newDuration = kh > 0 ? (Math.min(Math.abs(liftUp), kh) / kh) * keyboardEvent.duration : 0;
 
-        // console.log('newPosY:', newPosY, ' timing newDuration:', newDuration);
-        isLifting.current = true;
+        // console.log('newPosY:', newY, ' timing newDuration:', newDuration, ' newDodgeOffset:', newDodgeOffset);
         Animated.timing(translateY, {
             duration: Math.max((newDuration || 0) - 70, 0),
-            toValue: newPosY,
-            useNativeDriver: false
+            toValue: newY,
+            useNativeDriver: true
         }).start(() => {
-            if (offset === prevLiftOffset.current) {
+            if (thisRef === lastLiftInstance.current) {
                 isLifting.current = false;
-                setDodgeOffset(offset);
+                setDodgeOffset(newDodgeOffset);
             }
         });
     }
@@ -361,12 +380,11 @@ const SnapSheet = forwardRef(function SnapSheet({
                     )}
                     <View style={styling.flexer}>
                         <DodgeKeyboard
+                            ref={dodgeRef}
                             offset={keyboardDodgingOffset}
-                            disabled={!sameIndex || disableDodging}
+                            disabled={disableDodging}
                             checkIfElementIsFocused={__checkIfElementIsFocused}
-                            onHandleDodging={({ liftUp, keyboardEvent }) => {
-                                quicklyDodgeKeyboard(liftUp, keyboardEvent);
-                            }}>
+                            onHandleDodging={quicklyDodgeKeyboard}>
                             {ReactHijacker({
                                 children,
                                 enableLocator: true,
@@ -435,6 +453,7 @@ const SnapSheet = forwardRef(function SnapSheet({
                                         }
                                     }}
                                     dodge_keyboard_input
+                                    dodge_keyboard_clipping
                                     style={styling.fakePlaceholder}
                                 /> : null}
                         </DodgeKeyboard>

package/src/snapsheet_modal.js

@@ -78,6 +78,7 @@ export const SnapSheetModalBase = forwardRef(function SnapSheetModalBase({
     useMemo(makeSizingPromise, []);
 
     const sizingReady = !centered || (contentHeight !== undefined && viewHeight !== undefined);
+    const hasClosed = futureState === 'closed' && currentState === 'closed';
 
     useEffect(() => {
         if (sizingReady) {
@@ -103,7 +104,6 @@ export const SnapSheetModalBase = forwardRef(function SnapSheetModalBase({
 
     const willClose = futureState === 'closed';
     const isOpened = futureState !== 'closed';
-    const hasClosed = futureState === 'closed' && currentState === 'closed';
 
     const sheetRef = useRef();
     const inputRefs = useRef({});
@@ -179,7 +179,7 @@ export const SnapSheetModalBase = forwardRef(function SnapSheetModalBase({
                 onClosed?.();
             } else onOpened?.();
         hasMountOpened.current = true;
-    }, [hasClosed]);
+    }, [futureState, currentState]);
 
     useBackButton(() => {
         snapModal.current(0);
@@ -256,7 +256,9 @@ export const SnapSheetModalBase = forwardRef(function SnapSheetModalBase({
                         ...isLift ? {
                             __checkIfElementIsFocused: (r, refs) => {
                                 const realChecker = restProps?.__checkIfElementIsFocused;
-                                return !!r?.[CheckFocusedNode] && refs.some(v => realChecker ? realChecker?.(v) : v?.isFocused?.());
+                                return !!r?.[CheckFocusedNode] &&
+                                    !willClose &&
+                                    refs.some(v => realChecker ? realChecker?.(v, refs) : v?.isFocused?.());
                             },
                             keyboardDodgingBehaviour: 'optimum'
                         } : {}
@@ -298,6 +300,7 @@ export const SnapSheetModalBase = forwardRef(function SnapSheetModalBase({
                                         }
                                     }}
                                     dodge_keyboard_input
+                                    dodge_keyboard_clipping
                                     style={styling.fakePlaceholder}
                                 /> : null}
                         </View>}