@momo-kits/swipe 0.73.3-beta.4 → 0.74.2-react-native.1

package/SwipeView.tsx

@@ -0,0 +1,144 @@
+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 {SwipeableRef, SwipeAction, SwipeProps} from './types';
+import styles from './styles';
+
+const ACTION_WIDTH = 56;
+
+export 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;
+
+    let inputRange = [0, ACTION_WIDTH * length];
+    let outputRange = [-ACTION_WIDTH * (index + 1), 0];
+
+    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',
+    });
+
+    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_medium'}>
+            {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 (
+      <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 forwardRef(Swipe);

package/index.tsx

@@ -0,0 +1,3 @@
+import Swipe from "./SwipeView";
+
+export {Swipe}

package/package.json

@@ -1,15 +1,17 @@
 {
     "name": "@momo-kits/swipe",
-    "version": "0.73.3-beta.4",
+    "version": "0.74.2-react-native.1",
     "private": false,
-    "main": "index.js",
-    "dependencies": {},
+    "main": "index.tsx",
     "peerDependencies": {
-        "prop-types": "^15.7.2",
-        "react": "^16.9.0",
-        "react-native": ">=0.55",
-        "@momo-kits/core-v2": ">=0.0.5-beta"
+        "@momo-kits/foundation": "latest",
+        "react": "*",
+        "react-native": "*",
+        "prop-types": "15.7.2"
     },
-    "devDependencies": {},
-    "license": "MoMo"
+    "devDependencies": {
+        "@momo-platform/versions": "4.1.11"
+    },
+    "license": "MoMo",
+    "dependencies": {}
 }

package/publish.sh

@@ -26,4 +26,4 @@ cd ..
 rm -rf dist
 
 
-#curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/swipe new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/swipe"}'
+##curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/swipe new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/swipe"}'

package/styles.ts

@@ -0,0 +1,16 @@
+import {StyleSheet} from 'react-native';
+
+export default StyleSheet.create({
+  action: {
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  row: {
+    flexDirection: 'row',
+  },
+  textCenter: {
+    textAlign: 'center',
+  },
+  container: {width: '100%'},
+});

package/types.ts

@@ -0,0 +1,99 @@
+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;
+};
+
+export type SwipeableRef = {
+  openLeft: () => void;
+  openRight: () => void;
+  close: () => void;
+};