@momo-kits/foundation 0.111.1-optimize.1 → 0.111.1-optimize.3

package/Application/BottomSheet.tsx

@@ -1,8 +1,6 @@
 import React, {useCallback, useContext, useEffect, useRef} from 'react';
 import {
-  Animated,
   Dimensions,
-  Easing,
   KeyboardAvoidingView,
   Modal,
   PanResponder,
@@ -19,6 +17,7 @@ import {Colors, Radius, Spacing, Styles} from '../Consts';
 import {Text} from '../Text';
 import {Icon} from '../Icon';
 import {useHeaderHeight} from '@react-navigation/stack';
+import Animated, {Easing, Extrapolate} from 'react-native-reanimated';
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const {theme, navigator} = useContext(ApplicationContext);
@@ -40,37 +39,46 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     keyboardVerticalOffset,
   }: BottomSheetParams = props.route.params;
 
-  const pan = useRef(
-    new Animated.ValueXY({
-      y: heightDevice,
-      x: 0,
-    })
-  ).current;
-
   const customEasingOpen = Easing.bezier(0.05, 0.7, 0.1, 1);
   const customEasingClose = Easing.bezier(0.3, 0.0, 0.8, 0.15);
 
+  const translateY = useRef(new Animated.Value(heightDevice)).current;
+
+  const openAnimation = Animated.timing(translateY, {
+    toValue: 0,
+    duration: 350,
+    easing: customEasingOpen,
+  });
+
+  const closeAnimation = Animated.timing(translateY, {
+    toValue: heightDevice,
+    duration: 200,
+    easing: customEasingClose,
+  });
+
   const panResponder = useRef(
     PanResponder.create({
       onStartShouldSetPanResponder: () => draggable,
-      onMoveShouldSetPanResponder: (_, gestureState) => {
-        return draggable && gestureState.dy > 0;
-      },
-      onPanResponderMove: (e, gestureState) => {
-        gestureState.dy > 0 &&
-          Animated.event([null, {dy: pan.y}], {useNativeDriver: false})(
-            e,
-            gestureState
-          );
+      onMoveShouldSetPanResponder: (_, gestureState) =>
+        draggable && gestureState.dy > 0,
+      onPanResponderMove: (_, gestureState) => {
+        if (gestureState.dy > 0) {
+          translateY.setValue(gestureState.dy);
+        }
       },
       onPanResponderRelease: (_, gestureState) => {
         if (gestureState.dy > 100) {
           action.current = 'gesture';
           onDismiss();
         } else {
-          Animated.spring(pan, {
-            toValue: {x: 0, y: 0},
-            useNativeDriver: false,
+          Animated.spring(translateY, {
+            toValue: 0,
+            damping: 20,
+            mass: 1,
+            stiffness: 100,
+            overshootClamping: false,
+            restSpeedThreshold: 0.001,
+            restDisplacementThreshold: 0.001,
           }).start();
         }
       },
@@ -90,13 +98,8 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
    * emit dismiss event
    */
   useEffect(() => {
-    Animated.timing(pan, {
-      toValue: {x: 0, y: 0},
-      useNativeDriver: false,
-      easing: customEasingOpen,
-      duration: 350,
-    }).start();
-
+    translateY.setValue(heightDevice);
+    openAnimation.start();
     return () => {
       props.route.params?.onDismiss?.(action.current);
     };
@@ -109,16 +112,11 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     if (barrierDismissible && !force) {
       return;
     }
-    setTimeout(() => {
-      callback?.();
-    }, 300);
-    Animated.timing(pan, {
-      toValue: {x: 0, y: heightDevice},
-      useNativeDriver: false,
-      easing: customEasingClose,
-      duration: 200,
-    }).start(() => {
-      navigator?.pop();
+    closeAnimation.start(() => {
+      setImmediate(() => {
+        navigator?.pop();
+        callback?.();
+      });
     });
   };
 
@@ -205,10 +203,10 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
             style={[
               styles.overlay,
               {
-                opacity: pan.y.interpolate({
+                opacity: translateY.interpolate({
                   inputRange: [0, heightDevice],
                   outputRange: [1, 0],
-                  extrapolate: 'clamp',
+                  extrapolate: Extrapolate.CLAMP,
                 }),
               },
             ]}
@@ -217,7 +215,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
 
         <Animated.View
           style={{
-            transform: pan.getTranslateTransform(),
+            transform: [{translateY}],
           }}>
           {renderHeader()}
           <View style={{backgroundColor: backgroundColor}}>

package/Application/Components/HeaderRight.tsx

@@ -92,7 +92,7 @@ const HeaderToolkitAction: React.FC<any> = ({
    */
   const checkAppIsFavorite = useCallback(
     () =>
-      navigator?.maxApi?.dispatchFunction(
+      navigator?.maxApi?.dispatchFunction?.(
         'isFavoriteApp',
         {code: context?.code},
         (result: boolean) => {
@@ -143,14 +143,15 @@ const HeaderToolkitAction: React.FC<any> = ({
    */
   const onPressShortcut = () => {
     const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
+    const expected = !isFavorite;
     context?.autoTracking?.({
       ...context,
       componentName: 'IconButton',
-      componentId: 'navigation_shortcut',
+      componentId: `${expected ? 'pin' : 'unpin'}_shortcut`,
       screenName: currentRoute?.params?.screen?.name ?? currentRoute?.name,
     });
     setIsLoading(true);
-    navigator?.maxApi?.dispatchFunction(
+    navigator?.maxApi?.dispatchFunction?.(
       'onToolAction',
       {
         item: {
@@ -160,7 +161,7 @@ const HeaderToolkitAction: React.FC<any> = ({
       },
       ({success}: {success: boolean}) => {
         if (success) {
-          setIsFavorite(!isFavorite);
+          setIsFavorite(expected);
         }
       }
     );
@@ -221,7 +222,7 @@ const HeaderToolkitAction: React.FC<any> = ({
       screenName: currentRoute?.params?.screen?.name ?? currentRoute?.name,
     });
 
-    navigator?.maxApi?.dispatchFunction(
+    navigator?.maxApi?.dispatchFunction?.(
       'showTools',
       tools,
       context,

package/Application/Components/HeaderTitle.tsx

@@ -8,7 +8,7 @@ import {
 } from 'react-native';
 import {ApplicationContext, MiniAppContext} from '../index';
 import {exportFontFamily, scaleSize, Text} from '../../Text';
-import {Colors, Spacing, Radius, Styles} from '../../Consts';
+import {Colors, Radius, Spacing, Styles} from '../../Consts';
 import {TitleJourneyProps, TitleLocationProps, TitleUserProps} from '../types';
 import {Image} from '../../Image';
 import {Icon} from '../../Icon';
@@ -79,7 +79,7 @@ const TitleUser: React.FC<TitleUserProps> = ({
   isLoading,
 }) => {
   const {theme} = useContext(ApplicationContext);
-  const maxWidth = icons?.length === 2 ? '73%' : '100%';
+  const maxWidth = Dimensions.get('window').width - scaleSize(172);
   const getShortName = (name: string) => {
     const words = name.split(' ');
     const lastTwoWords = words.slice(-2);
@@ -246,20 +246,20 @@ const TitleUser: React.FC<TitleUserProps> = ({
   };
 
   const renderVerifyIcon = () => {
-    const renderIcons = () => {
-      if (icons && icons.length > 0) {
-        return icons.map(icon => (
-          <Image
-            source={{
-              uri: icon,
-            }}
-            style={styles.verifiedIcon}
-          />
-        ));
-      }
-    };
-
-    return <View style={Styles.row}>{renderIcons()}</View>;
+    if (icons && icons.length > 0) {
+      return (
+        <View style={[Styles.row]}>
+          {icons.map(icon => (
+            <Image
+              source={{
+                uri: icon,
+              }}
+              style={styles.verifiedIcon}
+            />
+          ))}
+        </View>
+      );
+    }
   };
 
   const renderShimmer = () => {
@@ -295,19 +295,21 @@ const TitleUser: React.FC<TitleUserProps> = ({
   if (isLoading) {
     return renderShimmer();
   }
+
   return (
     <TouchableOpacity
       style={styles.headerTitleContainer}
       onPress={onPress}
       disabled={onPress === undefined}>
-      <View style={[Styles.row, Styles.flex]}>
+      <View
+        style={[Styles.row, {maxWidth: maxWidth - (icons?.length ?? 0) * 16}]}>
         <View>
           {renderImage()}
           {!!dotColor && (
             <View style={[styles.dotAvatar, {backgroundColor: dotColor}]} />
           )}
         </View>
-        <View style={[Styles.flex, {marginLeft: 6, maxWidth: maxWidth}]}>
+        <View style={[Styles.flex, {marginLeft: 6}]}>
           <View style={Styles.row}>
             <Text
               typography="action_xs_bold"
@@ -493,7 +495,7 @@ const styles = StyleSheet.create({
   },
   headerTitleContainer: {
     justifyContent: 'center',
-    maxWidth: Dimensions.get('window').width - 190,
+    maxWidth: Dimensions.get('window').width - scaleSize(172),
   },
   circle: {
     width: 32,

package/Application/index.ts

@@ -11,6 +11,7 @@ import {
   HeaderTitle,
   NavigationButton,
 } from './Components';
+import {setAutomationID} from './utils';
 
 const Context = createContext({});
 const ApplicationContext = createContext(defaultContext);
@@ -32,4 +33,5 @@ export {
   Screen,
   BottomTab,
   HeaderAnimated,
+  setAutomationID,
 };

package/Application/utils.tsx

@@ -12,7 +12,7 @@ import {
 } from './Components';
 import {HeaderTitleProps, NavigationOptions} from './types';
 import {Colors} from '../Consts';
-import {Animated} from 'react-native';
+import {Animated, Platform} from 'react-native';
 
 /**
  * default options for stack screen
@@ -26,32 +26,6 @@ const getStackOptions = (): StackNavigationOptions => {
     headerRight: (props: any) => <HeaderRight {...props} />,
     headerTintColor: Colors.black_17,
     gestureEnabled: false,
-    cardStyleInterpolator: ({current: {progress}, layouts}) => ({
-      cardStyle: {
-        transform: [
-          {
-            translateX: progress.interpolate({
-              inputRange: [0, 1],
-              outputRange: [layouts.screen.width, 0],
-            }),
-          },
-        ],
-      },
-    }),
-    transitionSpec: {
-      open: {
-        animation: 'timing',
-        config: {
-          duration: 300,
-        },
-      },
-      close: {
-        animation: 'timing',
-        config: {
-          duration: 300,
-        },
-      },
-    },
   };
 };
 
@@ -180,10 +154,25 @@ const exportHeaderTitle = (
   return {};
 };
 
+const setAutomationID = (accessibilityLabel = '') => {
+  if (Platform.OS === 'ios') {
+    return {
+      accessible: true,
+      testID: accessibilityLabel,
+      accessibilityLabel: undefined,
+    };
+  } else {
+    return {
+      accessibilityLabel,
+    };
+  }
+};
+
 export {
   getStackOptions,
   getDialogOptions,
   getModalOptions,
   getOptions,
   exportHeaderTitle,
+  setAutomationID,
 };

package/Text/index.tsx

@@ -2,8 +2,8 @@ import React, {useContext} from 'react';
 import {Text as RNText, TextProps as RNTextProps} from 'react-native';
 import styles from './styles';
 import {Typography, TypographyWeight} from './types';
-import {ApplicationContext} from '../Application';
-import {getAccessibilityID, scaleSize} from './utils';
+import {ApplicationContext, setAutomationID} from '../Application';
+import {scaleSize} from './utils';
 
 const SFProText: TypographyWeight = {
   100: 'Thin',
@@ -155,7 +155,7 @@ const Text: React.FC<TextProps> = ({
   return (
     <RNText
       {...rest}
-      {...getAccessibilityID(rest.accessibilityLabel)}
+      {...setAutomationID(rest.accessibilityLabel)}
       style={[
         style,
         textStyle,

package/Text/utils.ts

@@ -1,4 +1,4 @@
-import {Dimensions, Platform} from 'react-native';
+import {Dimensions} from 'react-native';
 
 const deviceWidth = Dimensions.get('window').width;
 const DEFAULT_SCREEN_SIZE = 375;
@@ -11,17 +11,5 @@ const scaleSize = (size: number) => {
 
   return size;
 };
-const getAccessibilityID = (accessibilityLabel = '') => {
-  if (Platform.OS === 'ios') {
-    return {
-      accessible: true,
-      testID: accessibilityLabel,
-      accessibilityLabel: undefined,
-    };
-  } else {
-    return {
-      accessibilityLabel,
-    };
-  }
-};
-export {scaleSize, getAccessibilityID};
+
+export {scaleSize};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "0.111.1-optimize.1",
+  "version": "0.111.1-optimize.3",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {},
@@ -9,15 +9,16 @@
   ],
   "dependencies": {
     "@gorhom/bottom-sheet": "2.4.1",
+    "react-native-modalize": "2.1.1",
     "react-native-safe-area-context": "3.1.4",
     "react-native-linear-gradient": "2.8.3",
     "react-native-gesture-handler": "1.10.3",
-    "react-native-modalize": "2.1.1",
     "react-native-fast-image": "8.1.5",
     "@react-navigation/bottom-tabs": "https://gitlab.mservice.com.vn/momo-platform/react-native-bottom-tabs.git",
     "@react-navigation/core": "5.16.1",
     "@react-navigation/native": "5.9.8",
     "@react-navigation/routers": "5.7.4",
+    "react-native-reanimated": "git+https://gitlab.mservice.com.vn/momo-platform/react-native-reanimated.git#v1.13.4_gradle_7",
     "lottie-react-native": "git+https://gitlab.mservice.com.vn/momo-platform/momo-lottie-react-native.git",
     "@react-navigation/stack": "https://gitlab.mservice.com.vn/momo-platform/react-navigation-stack.git"
   },
@@ -42,6 +43,8 @@
     "react-scanner": "^1.1.0",
     "@types/color": "3.0.6"
   },
-  "author": "@momo-kits/foundation",
-  "license": "ISC"
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "license": "MoMo"
 }

package/publish.sh

@@ -1,19 +1,18 @@
 #!/bin/bash
 
-npm config set registry https://registry.npmjs.org/
 
 if [ "$1" == "stable" ]; then
   npm version $(npm view @momo-kits/foundation@stable version)
   npm version patch
-  npm publish --registry https://registry.npmjs.org/ --tag stable --access=public
+  npm publish --tag stable --access=public
 elif [ "$1" == "latest" ]; then
   npm version $(npm view @momo-kits/foundation@latest version)
   npm version prerelease --preid=rc
-  npm publish --registry https://registry.npmjs.org/ --tag latest --access=public
+  npm publish --tag latest --access=public
 else
   npm version $(npm view @momo-kits/foundation@beta version)
   npm version prerelease --preid=beta
-  npm publish --registry https://registry.npmjs.org/ --tag beta --access=public
+  npm publish --tag beta --access=public
 fi
 PACKAGE_NAME=$(npm pkg get name)
 NEW_PACKAGE_VERSION=$(npm pkg get version)