@momo-kits/swipe 0.168.1-beta.2 → 0.168.1-rn.88.0

package/SwipeView.tsx

@@ -5,28 +5,78 @@ import React, {
   useImperativeHandle,
   useRef,
 } from 'react';
-import {Animated, Dimensions, TouchableHighlight, View} from 'react-native';
-import {Swipeable} from 'react-native-gesture-handler';
+import {Dimensions, TouchableHighlight, View} from 'react-native';
+// RN 0.88 / gesture-handler v3: legacy `Swipeable` đã bị xoá → dùng ReanimatedSwipeable
+import ReanimatedSwipeable, {
+  SwipeDirection,
+  type SwipeableMethods,
+} from 'react-native-gesture-handler/ReanimatedSwipeable';
+import Animated, {
+  Extrapolation,
+  interpolate,
+  type SharedValue,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
 import {ApplicationContext, Colors, Icon, Text} from '@momo-kits/foundation';
 import {SwipeableRef, SwipeAction, SwipeProps} from './types';
 import styles from './styles';
 
 const ACTION_WIDTH = 56;
 
+/**
+ * Action item tách thành component riêng để dùng hook `useAnimatedStyle`
+ * (thay cho Animated.Value.interpolate của legacy Swipeable).
+ */
+const SwipeActionItem: React.FC<{
+  translation: SharedValue<number>;
+  inputRange: number[];
+  outputRange: number[];
+  style: any;
+  children?: React.ReactNode;
+}> = ({translation, inputRange, outputRange, style, children}) => {
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      {
+        translateX: interpolate(
+          translation.value,
+          inputRange,
+          outputRange,
+          Extrapolation.CLAMP
+        ),
+      },
+    ],
+  }));
+  return <Animated.View style={[style, animatedStyle]}>{children}</Animated.View>;
+};
+
 export const Swipe: ForwardRefRenderFunction<SwipeableRef, SwipeProps> = (
-  {children, leftActions, rightActions, height = 56, itemRadius, ...props},
+  {
+    children,
+    leftActions,
+    rightActions,
+    height = 56,
+    itemRadius,
+    onSwipeableLeftOpen,
+    onSwipeableRightOpen,
+    onSwipeableOpen,
+    onSwipeableClose,
+    onSwipeableLeftWillOpen,
+    onSwipeableRightWillOpen,
+    onSwipeableWillOpen,
+    onSwipeableWillClose,
+  },
   ref
 ) => {
   const {theme} = useContext(ApplicationContext);
   const screenWidth = Dimensions.get('window').width;
-  const swipeableRef = useRef<Swipeable>(null);
+  const swipeableRef = useRef<SwipeableMethods>(null);
 
   const renderActionItem = (
     action: SwipeAction,
     index: number,
     length: number,
     direction: 'left' | 'right',
-    dragX: Animated.AnimatedInterpolation<number | string>
+    dragX: SharedValue<number>
   ) => {
     const {
       label,
@@ -46,12 +96,6 @@ export const Swipe: ForwardRefRenderFunction<SwipeableRef, SwipeProps> = (
       zIndex = index;
     }
 
-    const translateX = dragX.interpolate({
-      inputRange,
-      outputRange,
-      extrapolate: 'clamp',
-    });
-
     return (
       <TouchableHighlight
         key={`swipe-action-${direction}-${index}`}
@@ -59,12 +103,14 @@ export const Swipe: ForwardRefRenderFunction<SwipeableRef, SwipeProps> = (
         activeOpacity={0.8}
         style={{zIndex: zIndex}}
         onPress={onPress}>
-        <Animated.View
+        <SwipeActionItem
+          translation={dragX}
+          inputRange={inputRange}
+          outputRange={outputRange}
           style={[
             styles.action,
             {
               backgroundColor,
-              transform: [{translateX}],
               width: ACTION_WIDTH,
               borderRadius: itemRadius,
             },
@@ -77,7 +123,7 @@ export const Swipe: ForwardRefRenderFunction<SwipeableRef, SwipeProps> = (
             typography={'label_s_medium'}>
             {label}
           </Text>
-        </Animated.View>
+        </SwipeActionItem>
       </TouchableHighlight>
     );
   };
@@ -85,7 +131,7 @@ export const Swipe: ForwardRefRenderFunction<SwipeableRef, SwipeProps> = (
   const renderActions = (
     actions: SwipeAction[] = [],
     direction: 'left' | 'right',
-    dragX: Animated.AnimatedInterpolation<number | string>
+    dragX: SharedValue<number>
   ) => {
     let overlayPosition: {[key: string]: number} = {left: 0};
     if (direction === 'right') {
@@ -127,9 +173,34 @@ export const Swipe: ForwardRefRenderFunction<SwipeableRef, SwipeProps> = (
     close: () => swipeableRef?.current?.close(),
   }));
 
+  /**
+   * ReanimatedSwipeable trả về hướng vuốt: mở left actions (translation > 0) => SwipeDirection.RIGHT,
+   * mở right actions (translation < 0) => SwipeDirection.LEFT. Map lại về API cũ của @momo-kits/swipe.
+   */
+  const handleOpen = (direction: SwipeDirection) => {
+    if (direction === SwipeDirection.RIGHT) {
+      onSwipeableLeftOpen?.();
+    } else {
+      onSwipeableRightOpen?.();
+    }
+    onSwipeableOpen?.();
+  };
+
+  const handleWillOpen = (direction: SwipeDirection) => {
+    if (direction === SwipeDirection.RIGHT) {
+      onSwipeableLeftWillOpen?.();
+    } else {
+      onSwipeableRightWillOpen?.();
+    }
+    onSwipeableWillOpen?.();
+  };
+
   return (
-    <Swipeable
-      {...props}
+    <ReanimatedSwipeable
+      onSwipeableOpen={handleOpen}
+      onSwipeableWillOpen={handleWillOpen}
+      onSwipeableClose={() => onSwipeableClose?.()}
+      onSwipeableWillClose={() => onSwipeableWillClose?.()}
       containerStyle={[
         styles.container,
         {
@@ -137,14 +208,14 @@ export const Swipe: ForwardRefRenderFunction<SwipeableRef, SwipeProps> = (
         },
       ]}
       ref={swipeableRef}
-      renderRightActions={(progressAnimatedValue, dragAnimatedValue) =>
-        renderActions(rightActions, 'right', dragAnimatedValue)
+      renderRightActions={(_progress, translation) =>
+        renderActions(rightActions, 'right', translation)
       }
-      renderLeftActions={(progressAnimatedValue, dragAnimatedValue) =>
-        renderActions(leftActions, 'left', dragAnimatedValue)
+      renderLeftActions={(_progress, translation) =>
+        renderActions(leftActions, 'left', translation)
       }>
       {children}
-    </Swipeable>
+    </ReanimatedSwipeable>
   );
 };
 

package/package.json

@@ -1,16 +1,16 @@
 {
     "name": "@momo-kits/swipe",
-    "version": "0.168.1-beta.2",
+    "version": "0.168.1-rn.88.0",
     "private": false,
+    "license": "MoMo",
     "main": "index.tsx",
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/"
+    },
+    "dependencies": {},
     "peerDependencies": {
         "@momo-kits/foundation": "latest",
         "react": "*",
         "react-native": "*"
-    },
-    "license": "MoMo",
-    "publishConfig": {
-        "registry": "https://registry.npmjs.org/"
-    },
-    "dependencies": {}
+    }
 }