@momo-kits/foundation 0.92.8 → 0.92.9-beta.1

package/Application/BottomSheet.tsx

@@ -1,4 +1,4 @@
-import React, {useContext, useEffect, useRef, useState} from 'react';
+import React, {useCallback, useContext, useEffect, useRef} from 'react';
 import {
   Animated,
   Dimensions,
@@ -26,18 +26,21 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     options,
     surface,
     barrierDismissible = false,
-    snapPoint = 'content',
     draggable = true,
-    dragOnContent = false,
+    useBottomInset = true,
+    keyboardVerticalOffset,
   }: BottomSheetParams = props.route.params;
-  const [modalVisible, setModalVisible] = useState(false);
-  const animatedHeight = useRef(new Animated.Value(0)).current;
-  const pan = useRef(new Animated.ValueXY()).current;
+  const pan = useRef(
+    new Animated.ValueXY({
+      y: heightDevice,
+      x: 0,
+    }),
+  ).current;
   const panResponder = useRef(
     PanResponder.create({
       onStartShouldSetPanResponder: () => draggable,
       onMoveShouldSetPanResponder: (_, gestureState) => {
-        return draggable && dragOnContent && gestureState.dy > 0;
+        return draggable && gestureState.dy > 0;
       },
       onPanResponderMove: (e, gestureState) => {
         gestureState.dy > 0 &&
@@ -58,7 +61,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       },
     }),
   ).current;
-  const estimate = useRef(0.9);
 
   let backgroundColor = theme.colors.background.default;
   if (surface) {
@@ -66,25 +68,14 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   }
 
   /**
-   * handle open & emit dismiss event
+   * emit dismiss event
    */
   useEffect(() => {
-    setTimeout(() => {
-      const mapSnapPoint: any = {
-        '30%': 0.3,
-        '50%': 0.5,
-        '70%': 0.7,
-        '90%': 0.9,
-      };
-      const point = mapSnapPoint[snapPoint] ?? estimate.current;
-      setModalVisible(true);
-      Animated.timing(animatedHeight, {
-        useNativeDriver: false,
-        toValue: heightDevice * point,
-        duration: 300,
-      }).start();
-    }, 100);
-
+    Animated.timing(pan, {
+      toValue: {x: 0, y: 0},
+      useNativeDriver: false,
+      duration: 150,
+    }).start();
     return () => {
       props.route.params?.onDismiss?.();
     };
@@ -93,94 +84,96 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   /**
    * handler dismiss
    */
-  const onDismiss = (force = false) => {
+  const onDismiss = (force = false, callback?: () => void) => {
     if (barrierDismissible && !force) {
       return;
     }
-    Animated.timing(animatedHeight, {
+    Animated.timing(pan, {
+      toValue: {x: 0, y: heightDevice},
       useNativeDriver: false,
-      toValue: 0,
-      duration: 200,
+      duration: 100,
     }).start(() => {
-      pan.setValue({x: 0, y: 0});
       navigator?.pop();
+      callback?.();
     });
   };
 
-  return (
-    <>
-      <Modal
-        transparent
-        visible={modalVisible}
-        onRequestClose={() => onDismiss()}>
-        <KeyboardAvoidingView
-          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-          keyboardVerticalOffset={-20}
-          style={Styles.flex}>
-          <TouchableOpacity
-            style={Styles.flex}
-            activeOpacity={1}
-            onPress={() => onDismiss()}
-          />
-          <Animated.View
-            {...(dragOnContent && panResponder.panHandlers)}
-            style={[
-              styles.container,
-              {transform: pan.getTranslateTransform()},
-              {
-                height: animatedHeight,
-                backgroundColor,
-              },
-            ]}>
-            {draggable && (
-              <View
-                {...(!dragOnContent && panResponder.panHandlers)}
-                style={styles.draggableContainer}>
-                <View style={{height: 16}}>
-                  <View style={styles.indicator} />
-                </View>
-                <View
-                  style={[
-                    styles.header,
-                    surface && {
-                      borderBottomColor: theme.colors.border.default,
-                      borderBottomWidth: 1,
-                    },
-                  ]}>
-                  <View style={styles.iconButton} />
-                  <Text
-                    style={[Styles.flex, {textAlign: 'center'}]}
-                    numberOfLines={1}
-                    typography="header_default_bold">
-                    {options.title ?? ''}
-                  </Text>
-                  <TouchableOpacity
-                    style={styles.iconButton}
-                    onPress={() => onDismiss(true)}>
-                    <Icon source="navigation_close" />
-                  </TouchableOpacity>
-                </View>
-              </View>
-            )}
-            <Screen {...props} {...props.route.params} />
-            <View style={{height: Math.min(insets.bottom, 21)}} />
-          </Animated.View>
-        </KeyboardAvoidingView>
-      </Modal>
-      {snapPoint == 'content' && (
+  /**
+   * manual close
+   */
+  const requestClose = useCallback((callback?: () => void) => {
+    onDismiss(true, callback);
+  }, []);
+
+  /**
+   * render header
+   */
+  const renderHeader = useCallback(() => {
+    return (
+      <View
+        style={{
+          backgroundColor,
+          borderTopLeftRadius: Radius.M,
+          borderTopRightRadius: Radius.M,
+        }}
+        {...panResponder.panHandlers}>
+        <View style={{height: 16}}>
+          <View style={styles.indicator} />
+        </View>
         <View
-          style={styles.estimate}
-          onLayout={e => {
-            estimate.current =
-              (e.nativeEvent.layout.height + 68) / heightDevice;
-          }}>
-          <Screen {...props} {...props.route.params} />
-          <View style={{height: Math.min(insets.bottom, 21)}} />
+          style={[
+            styles.header,
+            surface && {
+              borderBottomColor: theme.colors.border.default,
+              borderBottomWidth: 1,
+            },
+          ]}>
+          <View style={styles.iconButton} />
+          <Text
+            style={[Styles.flex, {textAlign: 'center'}]}
+            numberOfLines={1}
+            typography="header_default_bold">
+            {options.title ?? ''}
+          </Text>
+          <TouchableOpacity
+            style={styles.iconButton}
+            onPress={() => onDismiss(true)}>
+            <Icon source="navigation_close" />
+          </TouchableOpacity>
         </View>
-      )}
-    </>
+      </View>
+    );
+  }, []);
+
+  return (
+    <Modal transparent visible={true} onRequestClose={() => onDismiss()}>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        keyboardVerticalOffset={keyboardVerticalOffset ?? -20}
+        style={[Styles.flex, {justifyContent: 'flex-end'}]}>
+        <TouchableOpacity
+          style={Styles.flex}
+          activeOpacity={1}
+          onPress={() => onDismiss()}
+        />
+        <Animated.View style={{transform: pan.getTranslateTransform()}}>
+          {renderHeader()}
+          <View style={{backgroundColor: backgroundColor}}>
+            <Screen
+              {...props}
+              {...props.route.params}
+              requestClose={requestClose}
+            />
+            {useBottomInset && (
+              <View style={{height: Math.min(insets.bottom, 21)}} />
+            )}
+          </View>
+        </Animated.View>
+      </KeyboardAvoidingView>
+    </Modal>
   );
 };
+
 export default BottomSheet;
 
 const styles = StyleSheet.create({

package/Application/BottomTab/BottomTabBar.tsx

@@ -26,7 +26,6 @@ type Props = BottomTabBarProps & {
   activeTintColor?: string;
   inactiveTintColor?: string;
   floatingButton?: FloatingButtonProps;
-  accessibilityLabel?: string;
 };
 
 const getPaddingBottom = (insets: EdgeInsets) => {
@@ -65,7 +64,7 @@ export default function BottomTabBar({
    */
   const renderTabItem = useCallback(
     (data: any[]) => {
-      return data?.map((route, index) => {
+      return data?.map((route, _) => {
         const focused = route.params.name === focusedTab;
         const {options} = descriptors[route?.key] as any;
         const onPress = () => {
@@ -90,19 +89,7 @@ export default function BottomTabBar({
           });
         };
 
-        const label =
-          options.tabBarLabel !== undefined
-            ? options.tabBarLabel
-            : options.title !== undefined
-            ? options.title
-            : route.name;
-
-        const accessibilityLabel =
-          options.tabBarAccessibilityLabel !== undefined
-            ? options.tabBarAccessibilityLabel
-            : typeof label === 'string'
-            ? `${label}, tab, ${index + 1} of ${routes.length}`
-            : undefined;
+        const label = options.tabBarLabel || options.title || route.name;
 
         return (
           <NavigationContext.Provider
@@ -115,7 +102,7 @@ export default function BottomTabBar({
                 horizontal={false}
                 onPress={onPress}
                 onLongPress={onLongPress}
-                accessibilityLabel={accessibilityLabel}
+                accessibilityLabel={`tab_item_${route.name}`}
                 to={buildLink(route.name, route.params)}
                 testID={options.tabBarTestID}
                 allowFontScaling={allowFontScaling}
@@ -146,7 +133,7 @@ export default function BottomTabBar({
    */
   const renderFloatingButton = useCallback(() => {
     const renderFloatingButton = () => {
-      if (typeof floatingButton?.icon == 'string') {
+      if (typeof floatingButton?.icon === 'string') {
         return <Icon source={floatingButton?.icon} size={32} color={'white'} />;
       }
       return floatingButton?.icon;
@@ -232,7 +219,7 @@ export default function BottomTabBar({
         style,
       ]}
       pointerEvents={'auto'}>
-      <View style={styles.content}>
+      <View style={styles.content} accessibilityLabel={'bottom_tab_bar'}>
         {useFloating && floatingButton?.container}
         <Animated.View
           style={{

package/Application/BottomTab/index.tsx

@@ -22,13 +22,18 @@ const TabScreen: React.FC<NavigationScreenProps> = ({route}) => {
   if (route.params?.options) {
     options = getOptions(route.params?.options, theme);
   }
+
   if (route.params?.nested) {
     return (
       <Stack.Navigator>
         <Stack.Screen
           name="Stack"
           component={StackScreen}
-          initialParams={{screen: route.params?.screen, options}}
+          initialParams={{
+            screen: route.params?.screen,
+            options,
+            initialParams: route.params?.initialParams,
+          }}
           options={{...getStackOptions()}}
         />
       </Stack.Navigator>
@@ -40,7 +45,11 @@ const TabScreen: React.FC<NavigationScreenProps> = ({route}) => {
         <Stack.Screen
           name="Stack"
           component={StackScreen}
-          initialParams={{screen: route.params?.screen, options}}
+          initialParams={{
+            screen: route.params?.screen,
+            options,
+            initialParams: route.params?.initialParams,
+          }}
           options={{...getStackOptions(), ...route.params?.options}}
         />
       </Stack.Navigator>
@@ -72,11 +81,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
       initialRouteName={initialRouteName}
       backBehavior={'firstRoute'}
       tabBar={props => (
-        <BottomTabBar
-          {...props}
-          accessibilityLabel={'BottomTabBar'}
-          floatingButton={floatingButton}
-        />
+        <BottomTabBar {...props} floatingButton={floatingButton} />
       )}
       tabBarOptions={{
         style: {
@@ -89,7 +94,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
       }}>
       {tabs.map(item => {
         const isNum = !isNaN(parseInt(`${item?.badgeLabel}`));
-        const isDot = typeof item?.badgeLabel == 'string' && !item?.badgeLabel;
+        const isDot = typeof item?.badgeLabel === 'string' && !item?.badgeLabel;
         return (
           <Tab.Screen
             key={item.name}

package/Application/Components.tsx

@@ -41,7 +41,7 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
 }) => {
   const {theme} = useContext(ApplicationContext);
   let buttonStyle: ViewStyle = {backgroundColor: '#00000066'};
-  if (tintColor != Colors.black_01) {
+  if (tintColor !== Colors.black_01) {
     buttonStyle = {
       backgroundColor: 'transparent',
       borderColor: '#00000066',
@@ -238,7 +238,7 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
   tintColor,
   dotColor,
 }) => {
-  const avatarStyle = imageShape == 'circle' ? styles.circle : styles.square;
+  const avatarStyle = imageShape === 'circle' ? styles.circle : styles.square;
   const header = (
     <View style={Styles.row}>
       <View>
@@ -265,7 +265,7 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
 
 const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
   const validateType = (child: React.ReactElement) => {
-    const valid = child?.type === NavigationButton || child?.type == Fragment;
+    const valid = child?.type === NavigationButton || child?.type === Fragment;
     if (__DEV__ && !valid) {
       console.warn(
         'HeaderRightAction contains element type of NavigationButton, Please check again.',
@@ -306,7 +306,7 @@ const HeaderToolkitAction: React.FC<any> = ({
   const {onAction} = toolConfig ?? {};
 
   let backgroundColor;
-  if (tintColor != Colors.black_01) {
+  if (tintColor !== Colors.black_01) {
     backgroundColor = 'transparent';
   }
 

package/Application/StackScreen.tsx

@@ -55,7 +55,6 @@ const StackScreen: React.FC<ScreenParams> = props => {
     }
 
     navigator?.maxApi?.of?.({screenName});
-
     tracked.current.timeoutLoad = setTimeout(() => {
       onScreenLoad();
     }, 5000);

package/Application/types.ts

@@ -102,24 +102,24 @@ export type ScreenParams = {
 
 export type ModalParams = {
   [key: string]: any;
-  screen: Screen;
+  screen: React.ComponentType;
   onDismiss?: () => void;
   barrierDismissible?: boolean;
 };
 
 export type BottomSheetParams = {
   [key: string]: any;
-  screen: Screen;
+  screen: React.ComponentType;
   options: {
     title: string;
     surface?: boolean;
   };
-  snapPoint?: '30%' | '50%' | '70%' | '90%' | 'content';
   surface?: boolean;
   onDismiss?: (type?: string) => void;
   barrierDismissible?: boolean;
   draggable?: boolean;
-  dragOnContent?: boolean;
+  useBottomInset?: boolean;
+  keyboardVerticalOffset?: number;
 };
 
 export type NavigationButtonProps = {
@@ -197,6 +197,7 @@ export type BottomTabItemProps = {
   badgeLabel?: string | number;
   screen: Screen;
   options: NavigationOptions;
+  initialParams?: any;
 };
 
 export type BottomTabProps = {

package/Application/utils.tsx

@@ -94,7 +94,7 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
     };
   }
 
-  if (typeof params.surface == 'boolean') {
+  if (typeof params.surface === 'boolean') {
     if (params.surface) {
       options = {
         ...options,

package/Assets/icon_bank.json

@@ -503,4 +503,4 @@
   "zalopay_icon": {
     "uri": "https://static.momocdn.net/app/img/kits/icon_bank/zalopay_icon.png"
   }
-}
+}

package/Button/index.tsx

@@ -94,7 +94,7 @@ const Button: FC<ButtonProps> = ({
   if (loading) {
     state = 'loading';
   }
-  if (gradient?.length > 0 && type == 'primary') {
+  if (gradient?.length > 0 && type === 'primary') {
     gradientPros = {
       colors: gradient,
       start: {x: 1, y: 0.5},
@@ -217,9 +217,9 @@ const Button: FC<ButtonProps> = ({
    */
   const renderTitle = () => {
     const typography = getTypography();
-    const color = getTextColor();
+    const textColor = getTextColor();
     return (
-      <Text typography={typography} color={color} numberOfLines={1}>
+      <Text typography={typography} color={textColor} numberOfLines={1}>
         {title}
       </Text>
     );
@@ -231,7 +231,7 @@ const Button: FC<ButtonProps> = ({
   const renderLeading = () => {
     const iconSize = getIconSize();
     const marginRight = getIconSpace();
-    const color = tintColor ?? getTextColor();
+    const textColor = tintColor ?? getTextColor();
 
     if (loading) {
       return (
@@ -256,7 +256,7 @@ const Button: FC<ButtonProps> = ({
             styles.leading,
             {width: iconSize, height: iconSize, marginRight},
           ]}>
-          <Icon color={color} source={iconLeft} size={iconSize} />
+          <Icon color={textColor} source={iconLeft} size={iconSize} />
         </View>
       );
     }
@@ -266,7 +266,7 @@ const Button: FC<ButtonProps> = ({
    * render trailing
    */
   const renderTrailing = () => {
-    const color = tintColor ?? getTextColor();
+    const textColor = tintColor ?? getTextColor();
     const marginLeft = getIconSpace();
 
     if (iconRight) {
@@ -277,7 +277,7 @@ const Button: FC<ButtonProps> = ({
             styles.trailing,
             {width: iconSize, height: iconSize, marginLeft},
           ]}>
-          <Icon color={color} source={iconRight} size={iconSize} />
+          <Icon color={textColor} source={iconRight} size={iconSize} />
         </View>
       );
     }

package/Icon/index.tsx

@@ -33,7 +33,7 @@ const Icon: React.FC<IconProps> = ({
       loading={false}
       source={getIconSource()}
       style={[style, {width: size, height: size}]}
-      resizeMode='contain'
+      resizeMode="contain"
       {...tintColorProps}
     />
   );

package/Icon/types.ts

@@ -1,5 +1,5 @@
 import {ImageStyle} from 'react-native-fast-image';
-import {StyleProp} from "react-native";
+import {StyleProp} from 'react-native';
 
 export type IconProps = {
   /**

package/Image/index.tsx

@@ -19,7 +19,6 @@ const Image: React.FC<ImageProps> = ({
   source,
   loading = true,
   children,
-  params,
   accessibilityLabel,
   ...rest
 }) => {

package/Input/InputDropDown.tsx

@@ -4,7 +4,7 @@ import {ApplicationContext, ComponentContext} from '../Application';
 import {Styles} from '../Consts';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
-import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
+import {ErrorView, FloatingView, getSizeStyle} from './common';
 import {InputDropDownProps} from './index';
 import styles from './styles';
 
@@ -61,7 +61,7 @@ const InputDropDown = ({
           styles.inputWrapper,
           {backgroundColor: theme.colors.background.surface},
           getSizeStyle(size),
-          getBorderColor(theme, false, errorMessage, disabled),
+          // getBorderColor(theme, false, errorMessage, disabled),
         ]}>
         <FloatingView
           floatingValue={floatingValue}

package/Input/InputMoney.tsx

@@ -1,6 +1,7 @@
 import React, {
   forwardRef,
   useContext,
+  useEffect,
   useImperativeHandle,
   useRef,
   useState,
@@ -40,6 +41,7 @@ const InputMoney = forwardRef(
       defaultValue = '',
       accessibilityLabel,
       hintText,
+      value: _value,
       ...props
     }: InputMoneyProps,
     ref,
@@ -48,6 +50,13 @@ const InputMoney = forwardRef(
     const [focused, setFocused] = useState(false);
     const inputRef = useRef<TextInput>(null);
 
+    useEffect(() => {
+      if (_value) {
+        setValue(validateText(_value));
+        onChangeText?.(formatMoneyToNumber(_value, 'đ').toString());
+      }
+    }, [_value]);
+
     const validateText = (text: string) => {
       const valueFormat = formatMoneyToNumber(text, 'đ');
       return formatNumberToMoney(valueFormat, 'đ');

package/Input/InputOTP.tsx

@@ -71,11 +71,8 @@ const InputOTP = forwardRef(
       errorMessage,
       errorSpacing,
       floatingValue = 'Label',
-      floatingIconColor,
-      floatingIcon,
       placeholder,
       onChangeText,
-      onFocus,
       onBlur,
       dataType = 'number',
       params,
@@ -125,16 +122,16 @@ const InputOTP = forwardRef(
       onChangeText?.(text);
     };
 
-    const renderInputs = (length: number) => {
+    const renderInputs = (inputLength: number) => {
       const TextInputs: React.ReactNode[] = [];
-      for (let i = 0; i < length; i++) {
+      for (let i = 0; i < inputLength; i++) {
         TextInputs.push(
           <View>
             {focused && value.length === i ? (
-              <OTPCaret index={i} length={length} />
+              <OTPCaret index={i} length={inputLength} />
             ) : (
               <Text
-                style={i !== length - 1 && {marginRight: Spacing.L}}
+                style={i !== inputLength - 1 && {marginRight: Spacing.L}}
                 color={
                   !!value[i]
                     ? theme.colors.text.default

package/Input/InputTextArea.tsx

@@ -44,7 +44,6 @@ const InputTextArea = forwardRef(
       required,
       errorSpacing,
       style,
-      accessibilityLabel,
       hintText,
       ...props
     }: InputTextAreaProps,