@momo-kits/foundation 0.151.2-beta.1 → 0.152.1-beta.1

package/Divider/index.tsx

@@ -1,8 +1,8 @@
-import React, {useContext} from 'react';
-import {View, ViewStyle} from 'react-native';
-import {ApplicationContext} from '../Application';
-import {Spacing} from '../Consts';
-import {DashDivider} from './DashDivider';
+import React, { useContext } from 'react';
+import { View, ViewStyle } from 'react-native';
+import { ApplicationContext } from '../Context';
+import { Spacing } from '../Consts';
+import { DashDivider } from './DashDivider';
 
 export interface DividerProps {
   /**
@@ -23,7 +23,7 @@ const Divider: React.FC<DividerProps> = ({
   useMargin = true,
   type = 'default',
 }) => {
-  const {theme} = useContext(ApplicationContext);
+  const { theme } = useContext(ApplicationContext);
 
   if (type === 'dash') return <DashDivider style={style} />;
 
@@ -42,4 +42,4 @@ const Divider: React.FC<DividerProps> = ({
   );
 };
 
-export {Divider};
+export { Divider };

package/Icon/index.tsx

@@ -1,9 +1,9 @@
-import React, {useContext} from 'react';
+import React, { useContext } from 'react';
 import IconSources from '../Assets/icon.json';
 import IconBankSources from '../Assets/icon_bank.json';
-import {IconProps} from './types';
-import {ApplicationContext} from '../Application';
-import {Image} from '../Image';
+import { IconProps } from './types';
+import { ApplicationContext } from '../Context';
+import { Image } from '../Image';
 
 const Icon: React.FC<IconProps> = ({
   source = 'ic_back',
@@ -12,17 +12,17 @@ const Icon: React.FC<IconProps> = ({
   style = {},
   ...props
 }) => {
-  const {theme} = useContext(ApplicationContext);
+  const { theme } = useContext(ApplicationContext);
 
   /**
    * get icon source maps or remote http
    */
   const getIconSource = (): any => {
     if (source && !source.includes('http')) {
-      let icon: {[key: string]: {uri: string}} = IconSources;
+      let icon: { [key: string]: { uri: string } } = IconSources;
       return icon[source] ?? icon.ic_warning;
     }
-    return {uri: source};
+    return { uri: source };
   };
 
   const tintColorProps = color !== null && {
@@ -34,11 +34,11 @@ const Icon: React.FC<IconProps> = ({
       {...props}
       loading={false}
       source={getIconSource()}
-      style={[style, {width: size, height: size}]}
+      style={[style, { width: size, height: size }]}
       resizeMode="contain"
       {...tintColorProps}
     />
   );
 };
 
-export {Icon, IconSources, IconBankSources};
+export { Icon, IconSources, IconBankSources };

package/IconButton/index.tsx

@@ -1,12 +1,12 @@
-import React, {useContext} from 'react';
+import React, { useContext } from 'react';
 import {
   StyleSheet,
   TouchableOpacity,
   TouchableOpacityProps,
 } from 'react-native';
-import {ApplicationContext, ComponentContext} from '../Application';
-import {Colors} from '../Consts';
-import {Icon} from '../Icon';
+import { ApplicationContext, ComponentContext } from '../Context';
+import { Colors } from '../Consts';
+import { Icon } from '../Icon';
 import styles from './styles';
 
 export interface IconButtonProps extends TouchableOpacityProps {
@@ -39,7 +39,7 @@ const IconButton: React.FC<IconButtonProps> = ({
   params,
   ...rest
 }) => {
-  const {theme} = useContext(ApplicationContext);
+  const { theme } = useContext(ApplicationContext);
 
   /**
    * get size icon button
@@ -61,7 +61,7 @@ const IconButton: React.FC<IconButtonProps> = ({
           backgroundColor: theme.colors.background.disable,
         };
       case 'primary':
-        return {backgroundColor: theme.colors.primary};
+        return { backgroundColor: theme.colors.primary };
       case 'secondary':
         return {
           backgroundColor: theme.colors.background.surface,
@@ -83,7 +83,7 @@ const IconButton: React.FC<IconButtonProps> = ({
           backgroundColor: theme.colors.error.primary,
         };
       default:
-        return {backgroundColor: theme.colors.primary};
+        return { backgroundColor: theme.colors.primary };
     }
   };
 
@@ -120,16 +120,18 @@ const IconButton: React.FC<IconButtonProps> = ({
         params,
         state: type === 'disabled' ? 'disabled' : 'enabled',
         action: 'click',
-      }}>
+      }}
+    >
       <TouchableOpacity
         {...rest}
         disabled={type === 'disabled'}
         activeOpacity={activeOpacity}
-        style={buttonStyle}>
+        style={buttonStyle}
+      >
         <Icon size={iconSize} source={icon} color={getIconColor()} />
       </TouchableOpacity>
     </ComponentContext.Provider>
   );
 };
 
-export {IconButton};
+export { IconButton };

package/Image/index.tsx

@@ -6,15 +6,22 @@ import {
   ApplicationContext,
   ComponentContext,
   SkeletonContext,
-} from '../Application';
+} from '../Context';
 import { Skeleton } from '../Skeleton';
 import { Icon } from '../Icon';
 import { Styles } from '../Consts';
 import { ImageProps } from './types';
-import { getImageName } from '../Application/utils';
 
 type Status = 'success' | 'loading' | 'error';
 
+export const getImageName = (source: any): string => {
+  const parts = source?.uri?.split?.('/');
+  if (parts?.length > 0) {
+    return parts?.[parts.length - 1];
+  }
+  return '';
+};
+
 const Image: React.FC<ImageProps> = ({
   style,
   source,

package/Input/Input.tsx

@@ -12,11 +12,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {
-  ApplicationContext,
-  ComponentContext,
-  useComponentId,
-} from '../Application';
+import { useComponentId } from '../Application';
 import { Icon } from '../Icon';
 import { exportFontFamily } from '../Text';
 import {
@@ -30,6 +26,7 @@ import { InputProps } from './index';
 import styles from './styles';
 import { checkTyping } from './utils';
 import SystemTextInput from './SystemTextInput';
+import { ApplicationContext, ComponentContext } from '../Context';
 
 /**
  * Input default component

package/Input/InputDropDown.tsx

@@ -1,16 +1,18 @@
-import React, {useContext} from 'react';
-import {TouchableOpacity, View} from 'react-native';
+import React, { useContext } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { useComponentId } from '../Application';
+import { ApplicationContext, ComponentContext } from '../Context';
+import { Icon } from '../Icon';
 import {
-  ApplicationContext,
-  ComponentContext,
-  useComponentId,
-} from '../Application';
-import {Icon} from '../Icon';
-import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
-import {InputDropDownProps} from './index';
-import {Text} from '../Text';
+  ErrorView,
+  FloatingView,
+  getBorderColor,
+  getSizeStyle,
+} from './common';
+import { InputDropDownProps } from './index';
+import { Text } from '../Text';
 import styles from './styles';
-import {Spacing} from '../Consts';
+import { Spacing } from '../Consts';
 
 const InputDropDown = ({
   value,
@@ -32,12 +34,12 @@ const InputDropDown = ({
   multiline,
   ...props
 }: InputDropDownProps) => {
-  const {theme} = useContext(ApplicationContext);
+  const { theme } = useContext(ApplicationContext);
   const componentName = 'InputDropDown';
 
-  const {componentId} = useComponentId(
+  const { componentId } = useComponentId(
     `${componentName}/${placeholder}`,
-    props.accessibilityLabel
+    props.accessibilityLabel,
   );
 
   /**
@@ -57,10 +59,11 @@ const InputDropDown = ({
       <View
         style={[
           styles.inputDropDownWrapper,
-          {backgroundColor: theme.colors.background.surface},
+          { backgroundColor: theme.colors.background.surface },
           getSizeStyle(size, multiline),
           getBorderColor(theme, false, errorMessage, disabled as boolean),
-        ]}>
+        ]}
+      >
         <FloatingView
           floatingValue={floatingValue}
           floatingIconColor={floatingIconColor}
@@ -79,7 +82,8 @@ const InputDropDown = ({
                   marginTop: Spacing.M,
                   marginRight: Spacing.S,
                 },
-              ]}>
+              ]}
+            >
               <Icon
                 color={leadingIconColor}
                 source={leadingIcon}
@@ -93,8 +97,9 @@ const InputDropDown = ({
               numberOfLines={multiline ? undefined : 1}
               typography={'body_default_regular'}
               color={value ? textColor : placeholderColor}
-              accessibilityState={{disabled: disabled as boolean}}
-              accessibilityLabel={`${componentId}`}>
+              accessibilityState={{ disabled: disabled as boolean }}
+              accessibilityLabel={`${componentId}`}
+            >
               {value || placeholder}
             </Text>
           </View>
@@ -106,7 +111,8 @@ const InputDropDown = ({
               alignItems: multiline ? 'flex-start' : 'center',
               paddingTop: multiline ? Spacing.M : 0,
             },
-          ]}>
+          ]}
+        >
           <Icon source={'arrow_chevron_down_small'} />
         </View>
       </View>
@@ -120,13 +126,15 @@ const InputDropDown = ({
         componentId,
         params,
         state: 'enabled',
-      }}>
+      }}
+    >
       <TouchableOpacity
         {...props}
         accessibilityLabel={`${componentId}|touch`}
-        accessibilityState={{disabled: disabled as boolean}}
+        accessibilityState={{ disabled: disabled as boolean }}
         activeOpacity={0.6}
-        style={[style, styles.wrapper]}>
+        style={[style, styles.wrapper]}
+      >
         {renderInputView()}
         <ErrorView
           errorMessage={errorMessage}

package/Input/InputMoney.tsx

@@ -14,11 +14,8 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {
-  ApplicationContext,
-  ComponentContext,
-  useComponentId,
-} from '../Application';
+import { useComponentId } from '../Application';
+import { ApplicationContext, ComponentContext } from '../Context';
 import { Icon } from '../Icon';
 import {
   ErrorView,

package/Input/InputOTP.tsx

@@ -14,11 +14,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {
-  ApplicationContext,
-  ComponentContext,
-  useComponentId,
-} from '../Application';
+import { useComponentId } from '../Application';
 import { Spacing, Styles } from '../Consts';
 import { scaleSize, Text } from '../Text';
 import { ErrorView, getBorderColor } from './common';
@@ -26,6 +22,7 @@ import { CaretProps, InputOTPProps } from './index';
 import styles from './styles';
 import { Icon } from '../Icon';
 import SystemTextInput from './SystemTextInput';
+import { ApplicationContext, ComponentContext } from '../Context';
 
 const OTPCaret: FC<CaretProps> = ({ index, length }) => {
   const DURATION = 300;

package/Input/InputPhoneNumber.tsx

@@ -13,11 +13,8 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {
-  ApplicationContext,
-  ComponentContext,
-  useComponentId,
-} from '../Application';
+import { useComponentId } from '../Application';
+import { ApplicationContext, ComponentContext } from '../Context';
 import { Colors, Spacing, Styles } from '../Consts';
 import { Icon } from '../Icon';
 import { scaleSize, Text } from '../Text';

package/Input/InputSearch.tsx

@@ -16,11 +16,8 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {
-  ApplicationContext,
-  ComponentContext,
-  useComponentId,
-} from '../Application';
+import { useComponentId } from '../Application';
+import { ApplicationContext, ComponentContext } from '../Context';
 import { Icon } from '../Icon';
 import { Text } from '../Text';
 import { InputRef, InputSearchProps } from './index';

package/Input/InputTextArea.tsx

@@ -13,7 +13,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import { ApplicationContext } from '../Application';
+import { ApplicationContext } from '../Context';
 import { Icon } from '../Icon';
 import { Text } from '../Text';
 import {

package/Input/common.tsx

@@ -1,17 +1,17 @@
-import React, {FC, ReactNode, useContext} from 'react';
+import React, { FC, ReactNode, useContext } from 'react';
 import {
   GestureResponderEvent,
   TouchableOpacity,
   View,
   ViewStyle,
 } from 'react-native';
-import {ApplicationContext} from '../Application';
-import {Theme} from '../Application/types';
-import {Styles} from '../Consts';
-import {Icon} from '../Icon';
-import {scaleSize, Text} from '../Text';
+import { ApplicationContext } from '../Context';
+import { Theme } from '../Application/types';
+import { Styles } from '../Consts';
+import { Icon } from '../Icon';
+import { scaleSize, Text } from '../Text';
 import styles from './styles';
-import {Loader} from '../Loader';
+import { Loader } from '../Loader';
 import IconSources from '../Assets/icon.json';
 
 type FloatingViewProps = {
@@ -40,7 +40,7 @@ export const getBorderColor = (
   theme: Theme,
   focused: boolean,
   errorMessage?: string,
-  disabled?: boolean
+  disabled?: boolean,
 ) => {
   let borderColor = theme.colors.border.default;
 
@@ -56,12 +56,12 @@ export const getBorderColor = (
     borderColor = theme.colors.border.disable;
   }
 
-  return {borderColor};
+  return { borderColor };
 };
 
 export const getSizeStyle = (
   size?: 'small' | 'large',
-  multiline: boolean = false
+  multiline: boolean = false,
 ) => {
   if (multiline)
     return [
@@ -81,8 +81,8 @@ export const ErrorView: FC<{
   errorSpacing?: boolean;
   hintText?: string;
   componentId?: string;
-}> = ({errorMessage, errorSpacing, hintText, componentId}) => {
-  const {theme} = useContext(ApplicationContext);
+}> = ({ errorMessage, errorSpacing, hintText, componentId }) => {
+  const { theme } = useContext(ApplicationContext);
   const errorColor = theme.colors.error.primary;
   const hintColor = theme.colors.text.hint;
   const hintTextDefault = hintText ?? 'Không thể chỉnh sửa';
@@ -102,14 +102,15 @@ export const ErrorView: FC<{
           }-text`}
           style={Styles.flex}
           color={errorMessage ? errorColor : hintColor}
-          typography={'description_default_regular'}>
+          typography={'description_default_regular'}
+        >
           {errorMessage ?? hintTextDefault}
         </Text>
       </View>
     );
   }
   if (errorSpacing) {
-    return <View style={[styles.errorView, {height: 18}]} />;
+    return <View style={[styles.errorView, { height: 18 }]} />;
   }
   return <View />;
 };
@@ -124,7 +125,7 @@ export const FloatingView: FC<FloatingViewProps> = ({
   onPress,
   componentId,
 }) => {
-  const {theme} = useContext(ApplicationContext);
+  const { theme } = useContext(ApplicationContext);
 
   if (floatingValue) {
     let floatingTextColor = theme.colors.text.hint;
@@ -143,16 +144,19 @@ export const FloatingView: FC<FloatingViewProps> = ({
             zIndex: 10,
           },
           style,
-        ]}>
+        ]}
+      >
         <Text
           color={floatingTextColor}
           typography={'label_s_medium'}
-          accessibilityLabel={`${componentId}|floating-text`}>
+          accessibilityLabel={`${componentId}|floating-text`}
+        >
           {floatingValue}
           {required && (
             <Text
               typography={'label_s_medium'}
-              color={theme.colors.error.primary}>
+              color={theme.colors.error.primary}
+            >
               *
             </Text>
           )}
@@ -161,7 +165,8 @@ export const FloatingView: FC<FloatingViewProps> = ({
           <TouchableOpacity
             activeOpacity={onPress ? 0.6 : 1}
             onPress={onPress}
-            accessibilityLabel={`${componentId}|floating-icon-touch`}>
+            accessibilityLabel={`${componentId}|floating-icon-touch`}
+          >
             <Icon
               color={floatingIconTintColor}
               source={floatingIcon}
@@ -184,7 +189,7 @@ export const RenderTrailing: FC<TrailingProps> = ({
   onPressIcon,
   componentId,
 }) => {
-  const {theme} = useContext(ApplicationContext);
+  const { theme } = useContext(ApplicationContext);
   if (loading) {
     return <Loader type={'spinner'} color={color} style={styles.icon} />;
   }
@@ -197,7 +202,8 @@ export const RenderTrailing: FC<TrailingProps> = ({
         <TouchableOpacity
           accessibilityLabel={`${componentId}|trailing-touch`}
           onPress={onPressIcon}
-          style={styles.icon}>
+          style={styles.icon}
+        >
           {icon}
         </TouchableOpacity>
       );
@@ -210,7 +216,7 @@ export const RenderTrailing: FC<TrailingProps> = ({
           source={icon as string}
           size={24}
           accessibilityLabel={`${componentId}|trailing-icon`}
-        />
+        />,
       );
     }
     return renderIconTouchable(
@@ -218,9 +224,10 @@ export const RenderTrailing: FC<TrailingProps> = ({
         typography="action_xs_bold"
         color={color ?? theme.colors.primary}
         numberOfLines={1}
-        accessibilityLabel={`${componentId}|trailing-text`}>
+        accessibilityLabel={`${componentId}|trailing-text`}
+      >
         {icon!.substring(0, 15)}
-      </Text>
+      </Text>,
     );
   }
   return null;

package/Layout/Card.tsx

@@ -4,7 +4,7 @@ import { useGridSystem } from './utils';
 import { GridContextProps } from './types';
 import { GridContext, GridSystem } from './index';
 import { Image } from '../Image';
-import { ApplicationContext } from '../Application';
+import { ApplicationContext } from '../Context';
 import styles from './styles';
 import { Colors, Radius, Shadow, Spacing } from '../Consts';
 

package/Layout/FloatingButton.tsx

@@ -12,7 +12,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import { ApplicationContext } from '../Application';
+import { ApplicationContext } from '../Context';
 import { Icon } from '../Icon';
 
 export interface FloatingButtonProps {

package/Layout/GridSystem.tsx

@@ -1,10 +1,10 @@
-import React, {useContext} from 'react';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import {Dimensions, StyleSheet, View} from 'react-native';
-import {ApplicationContext} from '../Application';
-import {Colors, Spacing} from '../Consts';
-import {GridContextProps} from './types';
-import {useGridSystem} from './utils';
+import React, { useContext } from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Dimensions, StyleSheet, View } from 'react-native';
+import { ApplicationContext } from '../Context';
+import { Colors, Spacing } from '../Consts';
+import { GridContextProps } from './types';
+import { useGridSystem } from './utils';
 
 const GridSystem: React.FC<any> = ({
   width = Dimensions.get('window').width,
@@ -13,8 +13,8 @@ const GridSystem: React.FC<any> = ({
   screenGrid = true,
   gridColor = Colors.blue_07,
 }) => {
-  const {theme} = useContext(ApplicationContext);
-  const {numberOfColumns} = useGridSystem();
+  const { theme } = useContext(ApplicationContext);
+  const { numberOfColumns } = useGridSystem();
 
   const margin = useMargin ? Spacing.M : 0;
   const widthSection = width - margin * 2;
@@ -49,11 +49,12 @@ const GridSystem: React.FC<any> = ({
             top: Spacing.M,
             bottom: Spacing.M,
           },
-        ]}>
+        ]}
+      >
         {list.map((_, index) => {
           return (
-            <View style={{flexDirection: 'row'}} key={index.toString()}>
-              {index !== 0 && <View style={{width: grid.gutterSize}} />}
+            <View style={{ flexDirection: 'row' }} key={index.toString()}>
+              {index !== 0 && <View style={{ width: grid.gutterSize }} />}
               <View
                 key={`Grid${index.toString()}`}
                 pointerEvents="none"
@@ -75,11 +76,11 @@ const GridSystem: React.FC<any> = ({
           <View pointerEvents="none" style={styles.dangerRightContainer} />
           <View
             pointerEvents="none"
-            style={[styles.dangerTopContainer, {height: Spacing.M}]}
+            style={[styles.dangerTopContainer, { height: Spacing.M }]}
           />
           <View
             pointerEvents="none"
-            style={[styles.dangerBottomContainer, {height: insets.bottom}]}
+            style={[styles.dangerBottomContainer, { height: insets.bottom }]}
           />
         </>
       )}

package/Layout/Item.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import { View, ViewProps } from 'react-native';
 import { GridContext } from './index';
-import { ApplicationContext } from '../Application';
+import { ApplicationContext } from '../Context';
 import styles from './styles';
 import { SpanNumber } from './types';
 

package/Layout/Screen.tsx

@@ -26,7 +26,7 @@ import {
   ViewProps,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { ApplicationContext, ScreenContext } from '../Application';
+import { ApplicationContext, ScreenContext } from '../Context';
 import Navigation from '../Application/Navigation';
 import {
   AnimatedHeader,
@@ -36,17 +36,18 @@ import {
 } from '../Application/types';
 import { Colors, Spacing, Styles } from '../Consts';
 import { FloatingButton, FloatingButtonProps } from './FloatingButton';
-import { Section, validateChildren } from './index';
 import styles from './styles';
 import { HeaderType } from './types';
 import { InputRef } from '../Input';
 import { exportHeaderTitle, getOptions } from '../Application/utils';
+import { validateChildren } from './utils';
+import Section from './Section';
 import {
   HeaderBackground,
   HeaderExtendHeader,
   HeaderTitle,
-} from '../Application/Components';
-import { SearchHeader } from '../Application/Components/SearchHeader';
+  SearchHeader,
+} from '../Application';
 
 export interface ScreenProps extends ViewProps {
   /**

package/Layout/Section.tsx

@@ -3,7 +3,7 @@ import { Dimensions, View, ViewProps } from 'react-native';
 import { useGridSystem } from './utils';
 import { GridContextProps } from './types';
 import { GridContext } from './index';
-import { ApplicationContext } from '../Application';
+import { ApplicationContext } from '../Context';
 import styles from './styles';
 import { Image } from '../Image';
 import { Spacing } from '../Consts';