@momo-kits/suggest-action 0.0.61-beta.8 → 0.0.62-alpha.13

package/index.js

@@ -5,25 +5,32 @@ import {
     IconSource,
     Image,
     ScaleSize,
+    Shadow,
     Spacing,
     Text,
     TouchableOpacity,
-} from '@momo-kits/core';
-import React from 'react';
-import { StyleSheet, View } from 'react-native';
+} from '@momo-kits/core-v2';
+import React, {
+    forwardRef,
+    useEffect,
+    useImperativeHandle,
+    useRef,
+} from 'react';
+import { Animated, StyleSheet, View } from 'react-native';
 import ExpenseI18n from './ExpenseI18n';
 
-export default SuggestAction = ({
-    icon,
-    name,
-    buttonTitle = 'Thêm ngay',
-    onPressButton,
-    onPressClose,
-    iconTintColor,
-    visible = false,
-    style,
-    contentType = 'add',
-}) => {
+export default SuggestAction = forwardRef((props, ref) => {
+    const {
+        icon,
+        name,
+        buttonTitle = 'Thêm ngay',
+        onPressButton,
+        onPressClose,
+        iconTintColor,
+        style,
+        contentType = 'add',
+    } = props;
+
     const getContent = (contentType) => {
         switch (contentType) {
             case 'add':
@@ -43,12 +50,37 @@ export default SuggestAction = ({
                 };
         }
     };
+    const fadeAnimation = useRef(new Animated.Value(0)).current;
 
     const contentStart = getContent(contentType).start;
     const contentEnd = getContent(contentType).end;
 
-    return visible ? (
-        <View style={[styles.container, style]}>
+    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 },
+            ]}>
             {icon && (
                 <Image
                     source={icon}
@@ -56,7 +88,6 @@ export default SuggestAction = ({
                     tintColor={iconTintColor}
                 />
             )}
-            <View></View>
             <Text style={styles.description} numberOfLines={2}>
                 {contentStart}{' '}
                 <Text style={[styles.description, { fontWeight: 'bold' }]}>
@@ -78,9 +109,9 @@ export default SuggestAction = ({
                     style={styles.iconClose}
                 />
             </TouchableOpacity>
-        </View>
-    ) : null;
-};
+        </Animated.View>
+    );
+});
 
 const styles = StyleSheet.create({
     container: {
@@ -90,14 +121,7 @@ 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.61-beta.8",
+    "version": "0.0.62-alpha.13",
     "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": ">=0.0.5-beta"
+        "@momo-kits/core-v2": ">=0.0.5-beta"
     },
     "devDependencies": {},
     "license": "MoMo"