@momo-kits/swipe 0.76.1-beta.2 → 0.77.2-beta.2

package/index.tsx

@@ -0,0 +1,62 @@
+import React, {FC, forwardRef, useContext, useRef} from 'react';
+import {Animated, TouchableOpacity, View} from 'react-native';
+import {Swipeable} from 'react-native-gesture-handler';
+import {ApplicationContext, Icon, Text, Colors} from '@momo-kits/foundation';
+import {SwipeAction, SwipeProps} from './types';
+import styles from './styles';
+
+const Swipe: FC<SwipeProps> = forwardRef(
+  ({children, leftActions, rightActions, ...props}, ref) => {
+    const {theme} = useContext(ApplicationContext);
+    const renderActionItem = (action: SwipeAction) => {
+      const {
+        label,
+        icon,
+        onPress,
+        backgroundColor = theme.colors.highlight.primary,
+      } = action;
+      return (
+        <TouchableOpacity
+          style={[styles.action, {backgroundColor}]}
+          onPress={onPress}>
+          {!!icon && <Icon source={icon} color={Colors.black_01} />}
+          <Text
+            style={styles.textCenter}
+            numberOfLines={1}
+            color={Colors.black_01}
+            typography={'label_s'}>
+            {label}
+          </Text>
+        </TouchableOpacity>
+      );
+    };
+
+    const renderActions = (actions: SwipeAction[] | undefined) => {
+      return (
+        <View style={styles.row}>
+          {actions?.map((item, index) => {
+            //maximum 3 actions
+            if (index < 3) {
+              return renderActionItem(item);
+            }
+          })}
+        </View>
+      );
+    };
+
+    return (
+      <Swipeable
+        {...props}
+        friction={2}
+        ref={ref}
+        overshootLeft={false}
+        overshootRight={false}
+        renderRightActions={() => renderActions(rightActions)}
+        renderLeftActions={() => renderActions(leftActions)}>
+        {children}
+      </Swipeable>
+    );
+  },
+);
+
+export default Swipe;

package/package.json

@@ -1,14 +1,14 @@
 {
     "name": "@momo-kits/swipe",
-    "version": "0.76.1-beta.2",
+    "version": "0.77.2-beta.02",
     "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: {
+    width: 56,
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  row: {
+    flexDirection: 'row',
+  },
+  textCenter: {
+    textAlign: 'center',
+  },
+});

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>;
+};