@momo-kits/swipe 0.77.2 → 0.77.4

package/index.tsx

@@ -0,0 +1,109 @@
+import React, {FC, forwardRef, useContext} from 'react';
+import {Dimensions, Animated, TouchableOpacity, 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 styles from './styles';
+
+const ACTION_WIDTH = 56;
+
+const Swipe: FC<SwipeProps> = forwardRef(
+  ({children, leftActions, rightActions, ...props}, ref) => {
+    const {theme} = useContext(ApplicationContext);
+
+    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 (
+        <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 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 (
+      <Swipeable
+        {...props}
+        containerStyle={styles.container}
+        ref={ref}
+        renderRightActions={(progressAnimatedValue, dragAnimatedValue) =>
+          renderActions(rightActions, 'right', dragAnimatedValue)
+        }
+        renderLeftActions={(progressAnimatedValue, dragAnimatedValue) =>
+          renderActions(leftActions, 'left', dragAnimatedValue)
+        }>
+        {children}
+      </Swipeable>
+    );
+  },
+);
+
+export default Swipe;

package/package.json

@@ -1,14 +1,14 @@
 {
     "name": "@momo-kits/swipe",
-    "version": "0.77.2",
+    "version": "0.77.4",
     "private": false,
-    "main": "index.js",
+    "main": "index.tsx",
     "dependencies": {},
     "peerDependencies": {
+        "@momo-kits/foundation": "latest",
         "prop-types": "^15.7.2",
-        "react": "^16.9.0",
-        "react-native": ">=0.55",
-        "@momo-kits/core-v2": ">=0.0.5-beta"
+        "react": "16.9.0",
+        "react-native": ">=0.55"
     },
     "devDependencies": {},
     "license": "MoMo"

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,23 @@
+import {Ref, RefObject} from 'react';
+import {Swipeable} from 'react-native-gesture-handler';
+
+export type SwipeAction = {
+  label: string;
+  icon: string;
+  onPress: () => void;
+  backgroundColor?: string;
+};
+
+export type SwipeProps = {
+  leftActions?: SwipeAction[];
+  rightActions?: SwipeAction[];
+  onSwipeableLeftOpen?: () => void;
+  onSwipeableRightOpen?: () => void;
+  onSwipeableOpen?: () => void;
+  onSwipeableClose?: () => void;
+  onSwipeableLeftWillOpen?: () => void;
+  onSwipeableRightWillOpen?: () => void;
+  onSwipeableWillOpen?: () => void;
+  onSwipeableWillClose?: () => void;
+  ref?: Ref<Swipeable>;
+};