@momo-kits/suggest-action 0.0.62-alpha.6 → 0.0.62-beta.4

package/index.js

@@ -5,32 +5,25 @@ import {
     IconSource,
     Image,
     ScaleSize,
-    Shadow,
     Spacing,
     Text,
     TouchableOpacity,
-} from '@momo-kits/core-v2';
-import React, {
-    forwardRef,
-    useEffect,
-    useImperativeHandle,
-    useRef,
-} from 'react';
-import { Animated, StyleSheet, View } from 'react-native';
+} from '@momo-kits/core';
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
 import ExpenseI18n from './ExpenseI18n';
 
-export default SuggestAction = forwardRef((props, ref) => {
-    const {
-        icon,
-        name,
-        buttonTitle = 'Thêm ngay',
-        onPressButton,
-        onPressClose,
-        iconTintColor,
-        style,
-        contentType = 'add',
-    } = props;
-
+export default SuggestAction = ({
+    icon,
+    name,
+    buttonTitle = 'Thêm ngay',
+    onPressButton,
+    onPressClose,
+    iconTintColor,
+    visible = false,
+    style,
+    contentType = 'add',
+}) => {
     const getContent = (contentType) => {
         switch (contentType) {
             case 'add':
@@ -50,37 +43,12 @@ export default SuggestAction = forwardRef((props, ref) => {
                 };
         }
     };
-    const fadeAnimation = useRef(new Animated.Value(0)).current;
 
     const contentStart = getContent(contentType).start;
     const contentEnd = getContent(contentType).end;
 
-    const show = () => {
-        Animated.timing(fadeAnimation, {
-            toValue: 1,
-            duration: 100,
-            useNativeDriver: true,
-        }).start();
-    };
-
-    const hide = () => {
-        Animated.timing(fadeAnimation, {
-            toValue: 0,
-            useNativeDriver: true,
-            duration: 100,
-        }).start();
-    };
-
-    useImperativeHandle(ref, () => ({ show, hide }), []);
-
-    return (
-        <Animated.View
-            style={[
-                styles.container,
-                style,
-                Shadow.Light,
-                { opacity: fadeAnimation },
-            ]}>
+    return visible ? (
+        <View style={[styles.container, style]}>
             {icon && (
                 <Image
                     source={icon}
@@ -88,6 +56,7 @@ export default SuggestAction = forwardRef((props, ref) => {
                     tintColor={iconTintColor}
                 />
             )}
+            <View></View>
             <Text style={styles.description} numberOfLines={2}>
                 {contentStart}{' '}
                 <Text style={[styles.description, { fontWeight: 'bold' }]}>
@@ -109,9 +78,9 @@ export default SuggestAction = forwardRef((props, ref) => {
                     style={styles.iconClose}
                 />
             </TouchableOpacity>
-        </Animated.View>
-    );
-});
+        </View>
+    ) : null;
+};
 
 const styles = StyleSheet.create({
     container: {
@@ -121,7 +90,14 @@ const styles = StyleSheet.create({
         paddingVertical: ScaleSize(14),
         borderRadius: Spacing.S,
         backgroundColor: Colors.white,
-
+        shadowColor: Colors.black,
+        shadowOffset: {
+            width: 0,
+            height: 4,
+        },
+        shadowOpacity: 0.3,
+        shadowRadius: 4.65,
+        elevation: 8,
         flexDirection: 'row',
         alignItems: 'center',
         position: 'absolute',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/suggest-action",
-    "version": "0.0.62-alpha.6",
+    "version": "0.0.62-beta.4",
     "private": false,
     "main": "index.js",
     "dependencies": {},
@@ -9,7 +9,7 @@
         "prop-types": "^15.7.2",
         "react": "16.9.0",
         "react-native": ">=0.55",
-        "@momo-kits/core-v2": ">=0.0.5-beta"
+        "@momo-kits/core": ">=0.0.5-beta"
     },
     "devDependencies": {},
     "license": "MoMo"