@momo-kits/swipe 0.77.5 → 0.77.8-beta.1

package/index.tsx

@@ -1,109 +1,144 @@
-import React, {FC, forwardRef, useContext} from 'react';
-import {Dimensions, Animated, TouchableOpacity, View} from 'react-native';
+import React, {
+  forwardRef,
+  ForwardRefRenderFunction,
+  useContext,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+import {Animated, Dimensions, TouchableHighlight, View} from 'react-native';
 import {Swipeable} from 'react-native-gesture-handler';
 import {ApplicationContext, Colors, Icon, Text} from '@momo-kits/foundation';
-import {SwipeAction, SwipeProps} from './types';
+import {SwipeableRef, SwipeAction, SwipeProps} from './types';
 import styles from './styles';
 
 const ACTION_WIDTH = 56;
 
-const Swipe: FC<SwipeProps> = forwardRef(
-  ({children, leftActions, rightActions, ...props}, ref) => {
-    const {theme} = useContext(ApplicationContext);
+const Swipe: ForwardRefRenderFunction<SwipeableRef, SwipeProps> = (
+  {children, leftActions, rightActions, ...props},
+  ref,
+) => {
+  const {theme} = useContext(ApplicationContext);
+  const screenWidth = Dimensions.get('window').width;
+  const swipeableRef = useRef<Swipeable>(null);
 
-    const renderActionItem = (
-      action: SwipeAction,
-      index: number,
-      length: number,
-      direction: 'left' | 'right',
-      dragX: Animated.AnimatedInterpolation,
-    ) => {
-      const {
-        label,
-        icon,
-        onPress,
-        backgroundColor = theme.colors.highlight.primary,
-      } = action;
+  const renderActionItem = (
+    action: SwipeAction,
+    index: number,
+    length: number,
+    direction: 'left' | 'right',
+    dragX: Animated.AnimatedInterpolation,
+  ) => {
+    const {
+      label,
+      icon,
+      onPress,
+      backgroundColor = theme.colors.highlight.primary,
+    } = action;
 
-      let inputRange = [0, ACTION_WIDTH * length];
-      let outputRange = [-ACTION_WIDTH * (index + 1), 0];
+    let inputRange = [0, ACTION_WIDTH * length];
+    let outputRange = [-ACTION_WIDTH * (index + 1), 0];
 
-      let zIndex = -index;
+    let zIndex = -index;
 
-      if (direction === 'right') {
-        inputRange = [-ACTION_WIDTH * length, 0];
-        outputRange = [0, ACTION_WIDTH * (length - index)];
-        zIndex = index;
-      }
-
-      const translateX = dragX.interpolate({
-        inputRange,
-        outputRange,
-        extrapolate: 'clamp',
-      });
+    if (direction === 'right') {
+      inputRange = [-ACTION_WIDTH * length, 0];
+      outputRange = [0, ACTION_WIDTH * (length - index)];
+      zIndex = index;
+    }
 
-      return (
-        <TouchableOpacity style={{zIndex: zIndex}} onPress={onPress}>
-          <Animated.View
-            style={[
-              styles.action,
-              {
-                backgroundColor,
-                transform: [{translateX}],
-                width: ACTION_WIDTH,
-              },
-            ]}>
-            {!!icon && <Icon source={icon} color={Colors.black_01} />}
-            <Text
-              style={styles.textCenter}
-              numberOfLines={1}
-              color={Colors.black_01}
-              typography={'label_s'}>
-              {label}
-            </Text>
-          </Animated.View>
-        </TouchableOpacity>
-      );
-    };
+    const translateX = dragX.interpolate({
+      inputRange,
+      outputRange,
+      extrapolate: 'clamp',
+    });
 
-    const renderActions = (
-      actions: SwipeAction[] | undefined,
-      direction: 'left' | 'right',
-      dragX: Animated.AnimatedInterpolation,
-    ) => {
-      return (
-        <View style={styles.row}>
-          {actions?.map((item, index) => {
-            //maximum 3 actions
-            if (index < 3) {
-              return renderActionItem(
-                item,
-                index,
-                actions?.length,
-                direction,
-                dragX,
-              );
-            }
-          })}
-        </View>
-      );
-    };
+    return (
+      <TouchableHighlight
+        underlayColor={Colors.black_01}
+        activeOpacity={0.8}
+        style={{zIndex: zIndex}}
+        onPress={onPress}>
+        <Animated.View
+          style={[
+            styles.action,
+            {
+              backgroundColor,
+              transform: [{translateX}],
+              width: ACTION_WIDTH,
+            },
+          ]}>
+          {!!icon && <Icon source={icon} color={Colors.black_01} />}
+          <Text
+            style={styles.textCenter}
+            numberOfLines={1}
+            color={Colors.black_01}
+            typography={'label_s'}>
+            {label}
+          </Text>
+        </Animated.View>
+      </TouchableHighlight>
+    );
+  };
 
+  const renderActions = (
+    actions: SwipeAction[] = [],
+    direction: 'left' | 'right',
+    dragX: Animated.AnimatedInterpolation,
+  ) => {
+    let overlayPosition: {[key: string]: number} = {left: 0};
+    if (direction === 'right') {
+      overlayPosition = {right: 0};
+    }
     return (
-      <Swipeable
-        {...props}
-        containerStyle={styles.container}
-        ref={ref}
-        renderRightActions={(progressAnimatedValue, dragAnimatedValue) =>
-          renderActions(rightActions, 'right', dragAnimatedValue)
-        }
-        renderLeftActions={(progressAnimatedValue, dragAnimatedValue) =>
-          renderActions(leftActions, 'left', dragAnimatedValue)
-        }>
-        {children}
-      </Swipeable>
+      <View style={styles.row}>
+        <View
+          style={[
+            {
+              width: screenWidth,
+              backgroundColor: theme.colors.background.surface,
+              height: '100%',
+              zIndex: -10,
+              position: 'absolute',
+            },
+            overlayPosition,
+          ]}
+        />
+        {actions?.map((item, index) => {
+          //maximum 3 actions
+          if (index < 3) {
+            return renderActionItem(
+              item,
+              index,
+              actions?.length,
+              direction,
+              dragX,
+            );
+          }
+        })}
+      </View>
     );
-  },
-);
+  };
+
+  useImperativeHandle(ref, () => ({
+    openLeft: () => swipeableRef?.current?.openLeft(),
+    openRight: () => swipeableRef?.current?.openRight(),
+    close: () => swipeableRef?.current?.close(),
+  }));
+
+  return (
+    <Swipeable
+      {...props}
+      containerStyle={styles.container}
+      ref={swipeableRef}
+      renderRightActions={(progressAnimatedValue, dragAnimatedValue) =>
+        renderActions(rightActions, 'right', dragAnimatedValue)
+      }
+      renderLeftActions={(progressAnimatedValue, dragAnimatedValue) =>
+        renderActions(leftActions, 'left', dragAnimatedValue)
+      }>
+      {children}
+    </Swipeable>
+  );
+};
 
-export default Swipe;
+export default forwardRef(Swipe);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/swipe",
-    "version": "0.77.5",
+    "version": "0.77.8-beta.01",
     "private": false,
     "main": "index.tsx",
     "dependencies": {},

package/types.ts

@@ -1,23 +1,99 @@
-import {Ref, RefObject} from 'react';
+import {Ref} from 'react';
 import {Swipeable} from 'react-native-gesture-handler';
 
+/**
+ * Represents an action item in the Swipe component.
+ */
 export type SwipeAction = {
+  /**
+   * The text label for the action button. This label is typically displayed on the button itself.
+   */
   label: string;
+
+  /**
+   * The icon for the action button, providing a visual representation of the action.
+   */
   icon: string;
+
+  /**
+   * The function to be called when the action button is pressed.
+   */
   onPress: () => void;
+
+  /**
+   * Optional. The background color of the action button.
+   * If not provided, a default color is used.
+   */
   backgroundColor?: string;
 };
 
+/**
+ * Properties for the Swipe component, which allows swipeable actions on an item.
+ */
 export type SwipeProps = {
+  /**
+   * Optional. An array of `SwipeAction` items representing the actions available
+   * on swiping to the left. Each action is rendered as a button on the swipeable surface.
+   */
   leftActions?: SwipeAction[];
+
+  /**
+   * Optional. An array of `SwipeAction` items representing the actions available
+   * on swiping to the right. Each action is rendered as a button on the swipeable surface.
+   */
   rightActions?: SwipeAction[];
+
+  /**
+   * Optional. A callback function triggered when the swipeable surface is
+   * fully opened on the left side.
+   */
   onSwipeableLeftOpen?: () => void;
+
+  /**
+   * Optional. A callback function triggered when the swipeable surface is
+   * fully opened on the right side.
+   */
   onSwipeableRightOpen?: () => void;
+
+  /**
+   * Optional. A callback function triggered when the swipeable surface is
+   * fully opened, either from the left or the right.
+   */
   onSwipeableOpen?: () => void;
+
+  /**
+   * Optional. A callback function triggered when the swipeable surface has
+   * returned to its original position and is closed.
+   */
   onSwipeableClose?: () => void;
+
+  /**
+   * Optional. A callback function triggered when the swipeable surface is
+   * about to open on the left side.
+   */
   onSwipeableLeftWillOpen?: () => void;
+
+  /**
+   * Optional. A callback function triggered when the swipeable surface is
+   * about to open on the right side.
+   */
   onSwipeableRightWillOpen?: () => void;
+
+  /**
+   * Optional. A callback function triggered when the swipeable surface is
+   * about to open, either from the left or the right.
+   */
   onSwipeableWillOpen?: () => void;
+
+  /**
+   * Optional. A callback function triggered when the swipeable surface is
+   * about to close and return to its original position.
+   */
   onSwipeableWillClose?: () => void;
-  ref?: Ref<Swipeable>;
+};
+
+export type SwipeableRef = {
+  openLeft: () => void;
+  openRight: () => void;
+  close: () => void;
 };