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

package/SuggestActionView.tsx

@@ -0,0 +1,124 @@
+import React, {
+  forwardRef,
+  ForwardRefRenderFunction,
+  useContext,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+import {Animated, Easing, TouchableOpacity} from 'react-native';
+import {SuggestActionProps, SuggestActionRef} from './types';
+import {
+  ApplicationContext,
+  Button,
+  Icon,
+  Image,
+  Shadow,
+  Text,
+} from '@momo-kits/foundation';
+import styles from './styles';
+
+const DURATION = 200;
+
+const SuggestAction: ForwardRefRenderFunction<
+  SuggestActionRef,
+  SuggestActionProps
+> = (
+  {
+    image,
+    onPressButton = () => {},
+    onClose,
+    bottom = 72,
+    message = 'Message',
+    buttonTitle = 'Button',
+    boldMessage,
+  },
+  ref,
+) => {
+  const {theme} = useContext(ApplicationContext);
+  const opacity = useRef(new Animated.Value(0)).current;
+
+  useImperativeHandle(ref, () => ({show}));
+  const show = () => {
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration: DURATION,
+      useNativeDriver: false,
+      easing: Easing.linear,
+    }).start();
+  };
+  const hide = () => {
+    Animated.timing(opacity, {
+      toValue: 0,
+      duration: DURATION,
+      easing: Easing.linear,
+      useNativeDriver: false,
+    }).start();
+  };
+
+  const handleClose = () => {
+    onClose?.();
+    hide();
+  };
+
+  const handleButtonPress = () => {
+    onPressButton?.();
+    hide();
+  };
+
+  const renderMessage = () => {
+    if (!!boldMessage) {
+      let splitMessage = [];
+      let index = message.toLowerCase().indexOf(boldMessage.toLowerCase());
+      if (index !== -1) {
+        splitMessage = [
+          message.substring(0, index),
+          boldMessage,
+          message.substring(index + boldMessage.length),
+        ];
+
+        return (
+          <Text style={styles.content} typography={'body_default_regular'}>
+            {splitMessage[0]}
+            <Text typography={'action_s_bold'}>{splitMessage[1]}</Text>
+            {splitMessage[2]}
+          </Text>
+        );
+      }
+    }
+
+    return (
+      <Text style={styles.content} typography={'description_default_regular'}>
+        {message}
+      </Text>
+    );
+  };
+
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        {
+          backgroundColor: theme.colors.background.surface,
+          opacity,
+          bottom,
+        },
+        Shadow.Light,
+      ]}>
+      {!!image && <Image source={{uri: image}} style={styles.image} />}
+      {renderMessage()}
+      <Button
+        type="tonal"
+        title={buttonTitle}
+        onPress={handleButtonPress}
+        size={'small'}
+        full={false}
+      />
+      <TouchableOpacity style={styles.closeIcon} onPress={handleClose}>
+        <Icon source={'navigation_close'} />
+      </TouchableOpacity>
+    </Animated.View>
+  );
+};
+
+export default forwardRef(SuggestAction);
+export type {SuggestActionRef, SuggestActionProps};

package/index.tsx

@@ -0,0 +1,5 @@
+import SuggestAction from "./SuggestActionView";
+
+export {
+    SuggestAction,
+}

package/package.json

@@ -1,16 +1,17 @@
 {
     "name": "@momo-kits/suggest-action",
-    "version": "0.73.3-beta.4",
+    "version": "0.74.2-react-native.1",
     "private": false,
-    "main": "index.js",
-    "dependencies": {},
+    "main": "index.tsx",
     "peerDependencies": {
-        "lodash": "^4.17.15",
-        "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/suggest new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/suggest-action"}'
+##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/suggest-action new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/suggest-action"}'

package/styles.ts

@@ -0,0 +1,30 @@
+import {Dimensions, StyleSheet} from 'react-native';
+import {Radius, Spacing} from '@momo-kits/foundation';
+
+const screenWidth = Dimensions.get('window').width;
+
+export default StyleSheet.create({
+  image: {
+    width: 32,
+    height: 32,
+    borderRadius: Radius.XS,
+    marginRight: Spacing.S,
+  },
+  container: {
+    flexDirection: 'row',
+    width: screenWidth - Spacing.M * 2,
+    marginHorizontal: Spacing.M,
+    padding: Spacing.M,
+    borderRadius: Radius.S,
+    alignItems: 'center',
+    position: 'absolute',
+    zIndex: 10,
+  },
+  content: {
+    flex: 1,
+    marginRight: Spacing.M,
+  },
+  closeIcon: {
+    marginLeft: Spacing.S,
+  },
+});

package/types.ts

@@ -0,0 +1,36 @@
+export type SuggestActionProps = {
+  /**
+   * Optional. A callback function that is triggered when the action suggestion is closed.
+   */
+  onClose?: () => void;
+
+  /**
+   * Optional. A callback function that is triggered when the action button is pressed.
+   */
+  onPressButton?: () => void;
+
+  /**
+   * The image associated with the action, typically displayed as part of the suggestion.
+   */
+  image?: string;
+
+  /**
+   * Optional. Specifies the bottom margin for the component. Useful for positioning or spacing within a layout.
+   */
+  bottom?: number;
+
+  message: string;
+  buttonTitle: string;
+  boldMessage?: string;
+};
+
+/**
+ * A reference type for the SuggestAction component.
+ * Allows external control over the visibility of the SuggestAction component.
+ */
+export type SuggestActionRef = {
+  /**
+   * A method to show the SuggestAction component. Can be called to display the component when needed.
+   */
+  show: () => void;
+};

package/ExpenseI18n.js

@@ -1,35 +0,0 @@
-import { LocalizedStrings } from '@momo-kits/core';
-
-let ExpenseI18n = new LocalizedStrings({
-    vi: {
-        add: 'Thêm',
-        move: 'Đưa',
-        share: 'Chia sẻ',
-        favorite: 'vào Dịch vụ yêu thích',
-        homescreen: 'ra ngoài màn hình thiết bị',
-        friend: 'với người khác ngay',
-    },
-    en: {
-        add: 'Add',
-        move: 'Add',
-        share: 'Share',
-        favorite: 'to your Favorite Service',
-        homescreen: 'to your home screen',
-        friend: 'with your friends',
-    },
-});
-
-ExpenseI18n.get = (key, defaultValue = '') => {
-    let value;
-    value = LocalizedStrings.getLocalize(key);
-    console.log(value);
-    if (!value || value.length <= 0) {
-        value = defaultValue;
-    }
-    if (!value || typeof value !== 'string') {
-        value = '';
-    }
-    return value;
-};
-
-export default ExpenseI18n;

package/index.js

@@ -1,144 +0,0 @@
-import {
-  Button,
-  Colors,
-  Icon,
-  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';
-import ExpenseI18n from './ExpenseI18n';
-
-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':
-        return {
-          start: ExpenseI18n.get('add'),
-          end: ExpenseI18n.get('favorite'),
-        };
-      case 'move':
-        return {
-          start: ExpenseI18n.get('move'),
-          end: ExpenseI18n.get('homescreen'),
-        };
-      case 'share':
-        return {
-          start: ExpenseI18n.get('share'),
-          end: ExpenseI18n.get('friend'),
-        };
-    }
-  };
-  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}]}>
-      {icon && (
-        <Image source={icon} style={styles.icon} tintColor={iconTintColor} />
-      )}
-      <Text style={styles.description} numberOfLines={2}>
-        {contentStart}{' '}
-        <Text style={[styles.description, {fontWeight: 'bold'}]}>{name}</Text>{' '}
-        {contentEnd}
-      </Text>
-      <Button
-        title={buttonTitle}
-        type="tonal"
-        style={styles.button}
-        size="small"
-        onPress={onPressButton}
-      />
-      <TouchableOpacity onPress={onPressClose}>
-        <Image
-          source={IconSource.ic_close_x_24}
-          tintColor={Colors.black_10}
-          style={styles.iconClose}
-        />
-      </TouchableOpacity>
-    </Animated.View>
-  );
-});
-
-const styles = StyleSheet.create({
-  container: {
-    minHeight: 60,
-    margin: Spacing.M,
-    paddingHorizontal: Spacing.M,
-    paddingVertical: ScaleSize(14),
-    borderRadius: Spacing.S,
-    backgroundColor: Colors.white,
-
-    flexDirection: 'row',
-    alignItems: 'center',
-    position: 'absolute',
-    zIndex: 99,
-  },
-  button: {
-    height: ScaleSize(28),
-    // paddingVertical: ScaleSize(6),
-    // paddingHorizontal: Spacing.S,
-  },
-  icon: {
-    width: 36,
-    height: 36,
-    marginRight: Spacing.S,
-    marginLeft: Spacing.XS,
-  },
-  iconClose: {
-    width: ScaleSize(24),
-    height: ScaleSize(24),
-    marginLeft: Spacing.S,
-  },
-  description: {
-    fontSize: 12,
-    lineHeight: 16,
-    paddingHorizontal: Spacing.S,
-    color: '#475160',
-    fontWeight: '500',
-  },
-});