@momo-kits/swipe 0.77.5 → 0.77.7

package/index.tsx

@@ -1,5 +1,5 @@
 import React, {FC, forwardRef, useContext} from 'react';
-import {Dimensions, Animated, TouchableOpacity, View} from 'react-native';
+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';
@@ -10,6 +10,7 @@ const ACTION_WIDTH = 56;
 const Swipe: FC<SwipeProps> = forwardRef(
   ({children, leftActions, rightActions, ...props}, ref) => {
     const {theme} = useContext(ApplicationContext);
+    const screenWidth = Dimensions.get('window').width;
 
     const renderActionItem = (
       action: SwipeAction,
@@ -43,7 +44,11 @@ const Swipe: FC<SwipeProps> = forwardRef(
       });
 
       return (
-        <TouchableOpacity style={{zIndex: zIndex}} onPress={onPress}>
+        <TouchableHighlight
+          underlayColor={Colors.black_01}
+          activeOpacity={0.8}
+          style={{zIndex: zIndex}}
+          onPress={onPress}>
           <Animated.View
             style={[
               styles.action,
@@ -62,17 +67,33 @@ const Swipe: FC<SwipeProps> = forwardRef(
               {label}
             </Text>
           </Animated.View>
-        </TouchableOpacity>
+        </TouchableHighlight>
       );
     };
 
     const renderActions = (
-      actions: SwipeAction[] | undefined,
+      actions: SwipeAction[] = [],
       direction: 'left' | 'right',
       dragX: Animated.AnimatedInterpolation,
     ) => {
+      let overlayPosition: {[key: string]: number} = {left: 0};
+      if (direction === 'right') {
+        overlayPosition = {right: 0};
+      }
       return (
         <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) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/swipe",
-    "version": "0.77.5",
+    "version": "0.77.7",
     "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>;
+
+  /**
+   * Optional. A ref for the underlying `Swipeable` component from `react-native-gesture-handler`.
+   * Can be used for manually triggering actions, like closing the swipeable surface.
+   */
+  ref?: React.ForwardedRef<Swipeable>;
 };