@momo-kits/foundation 0.150.2-phuc.13 → 0.150.2-scaleSize.35

package/Input/index.tsx

@@ -9,6 +9,8 @@ import InputMoney from './InputMoney';
 import InputOTP from './InputOTP';
 import InputSearch from './InputSearch';
 import InputTextArea from './InputTextArea';
+import InputPhoneNumber from './InputPhoneNumber';
+import { checkValidPhoneNumber } from './utils';
 
 export type OTPInputLength = 2 | 4 | 6 | 8 | 10;
 
@@ -343,6 +345,14 @@ export interface InputDropDownProps extends TouchableOpacityProps {
   onPressFloatingIcon?: () => void;
 }
 
+export interface InputPhoneNumberProps extends InputProps {
+  /**
+   * Optional. Represents the country code to be displayed in the InputPhoneNumber component.
+   * It should be in the format of a string, e.g., "+1" for the United States.
+   */
+  countryCode?: string;
+}
+
 export type InputRef = {
   clear: () => void;
   focus: () => void | undefined;
@@ -350,4 +360,14 @@ export type InputRef = {
   setText: (text: string) => void;
 };
 
-export {Input, InputDropDown, InputMoney, InputOTP, InputSearch, InputTextArea};
+export {
+  Input,
+  InputDropDown,
+  InputMoney,
+  InputOTP,
+  InputSearch,
+  InputTextArea,
+  InputPhoneNumber,
+};
+
+export {checkValidPhoneNumber};

package/Input/styles.ts

@@ -1,6 +1,6 @@
-import {Platform, StyleSheet} from 'react-native';
-import {Colors, Radius, Spacing} from '../Consts';
-import {scaleSize} from '../Text';
+import { Platform, StyleSheet } from 'react-native';
+import { Colors, Radius, Spacing } from '../Consts';
+import { scaleSize } from '../Text';
 
 export default StyleSheet.create({
   //input style
@@ -31,8 +31,8 @@ export default StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
   },
-  floatingIcon: {marginLeft: Spacing.XS},
-  errorIcon: {marginRight: Spacing.XS, marginTop: Spacing.XXS},
+  floatingIcon: { marginLeft: Spacing.XS },
+  errorIcon: { marginRight: Spacing.XS, marginTop: Spacing.XXS },
   errorView: {
     flexDirection: 'row',
     marginTop: Spacing.XS,
@@ -119,8 +119,8 @@ export default StyleSheet.create({
   iconSearchInput: {
     marginLeft: Spacing.S,
   },
-  searchInputContainer: {flexDirection: 'row', alignItems: 'center'},
-  textButton: {marginLeft: Spacing.L},
+  searchInputContainer: { flexDirection: 'row', alignItems: 'center' },
+  textButton: { marginLeft: Spacing.L },
   divider: {
     width: 1,
     height: 20,
@@ -178,16 +178,17 @@ export default StyleSheet.create({
     position: 'absolute',
     width: '100%',
     height: '100%',
-    opacity: 0.01,
+    opacity: 0.02,
     backgroundColor: 'transparent',
+    zIndex: 2,
   },
   otpRealInput: {
-    opacity: 0.01,
     width: '100%',
     height: '100%',
-    zIndex: 1,
+    zIndex: 2,
+    opacity: 0.02,
+    letterSpacing: Spacing.XXL,
   },
-
   //DropDown
   inputDropDownWrapper: {
     flexDirection: 'row',
@@ -216,5 +217,9 @@ export default StyleSheet.create({
     borderRadius: Radius.XS,
     overflow: 'hidden',
   },
-  currency: {fontSize: scaleSize(20), fontWeight: 'bold'},
+  currency: { fontSize: scaleSize(20), fontWeight: 'bold' },
+  phoneNumberDivider: {
+    width: 1,
+    marginLeft: Spacing.M
+  },
 });

package/Input/utils.ts

@@ -1,3 +1,5 @@
+import { Localize } from '../Application';
+
 const formatNumberToMoney = (number: number, currency = '') => {
   if (!number || isNaN(number) || Number(number) === 0) {
     return `0${currency}`;
@@ -64,4 +66,43 @@ const checkTyping = (text: string, value: boolean, setValue: any) => {
   }
 };
 
-export { formatMoneyToNumber, formatNumberToMoney, checkTyping };
+// --- PHONE VALIDATION ---
+function formatPhoneNumber(phone: string): string {
+  return phone.replace(/\D/g, '');
+}
+
+function checkValidPhoneNumber(phone: string): {
+  phoneFormatted: string;
+  error?: string;
+} {
+  let phoneNumber = phone;
+
+  // if not starting with 0 and has 9 digits => prepend 0
+  if (
+    phoneNumber.length > 0 &&
+    phoneNumber[0] !== '0' &&
+    /^\d$/.test(phoneNumber[0]) &&
+    phoneNumber.length === 9
+  ) {
+    phoneNumber = '0' + phoneNumber;
+  }
+
+  const phoneFormatted = formatPhoneNumber(phoneNumber);
+  const localize = new Localize({ vi: {}, en: {} });
+  let error: string | undefined;
+
+  if (phoneFormatted.length === 0) {
+    error = localize.translate('enterPhoneNumber');
+  } else if (phoneFormatted.length < 10 || phoneFormatted.length > 11) {
+    error = localize.translate('invalidPhoneNumber');
+  }
+
+  return { phoneFormatted: phoneFormatted, error };
+}
+
+export {
+  formatMoneyToNumber,
+  formatNumberToMoney,
+  checkTyping,
+  checkValidPhoneNumber,
+};

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';
 
@@ -33,9 +33,10 @@ const Card: React.FC<CardProps> = ({
   const gutterSize = 8;
   const margin = 12;
   const widthSection = Dimensions.get('window').width - margin * 2;
-  const sizePerSpan =
+  let sizePerSpan =
     (widthSection - margin * 2 - gutterSize * (numberOfColumns - 1)) /
-    numberOfColumns;
+      numberOfColumns -
+    1 / numberOfColumns;
 
   const gridContext: GridContextProps = {
     numberOfColumns,

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,19 @@ 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,
+  HeaderLeft,
   HeaderTitle,
-} from '../Application/Components';
-import { SearchHeader } from '../Application/Components/SearchHeader';
+  SearchHeader,
+} from '../Application';
 
 export interface ScreenProps extends ViewProps {
   /**
@@ -385,7 +387,8 @@ const Screen = forwardRef(
           margin: 0,
           left: Spacing.M,
         },
-        headerLeft: () => null,
+        headerLeft: (props: any) =>
+          params?.hiddenBack ? null : <HeaderLeft {...props} />,
         headerTitle: () => (
           <SearchHeader {...params} animatedValue={animatedValue.current} />
         ),

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';

package/Layout/TrackingScope.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {TrackingScopeContext} from '../Application';
+import { TrackingScopeContext } from '../Context';
 
 const TrackingScope = ({
   scopeName,
@@ -9,10 +9,10 @@ const TrackingScope = ({
   children: any;
 }) => {
   return (
-    <TrackingScopeContext.Provider value={{scopeName}}>
+    <TrackingScopeContext.Provider value={{ scopeName }}>
       {children}
     </TrackingScopeContext.Provider>
   );
 };
 
-export {TrackingScope};
+export { TrackingScope };

package/Loader/DotLoader.tsx

@@ -1,12 +1,12 @@
-import React, {FC, useContext} from 'react';
+import React, { FC, useContext } from 'react';
 import AnimatedLottieView from 'lottie-react-native';
 import animation from '../Assets/DotAnimation.json';
-import {ApplicationContext} from '../Application';
-import {hexToRGBA} from './utils';
-import {LoaderProps} from './types';
+import { ApplicationContext } from '../Context';
+import { hexToRGBA } from './utils';
+import { LoaderProps } from './types';
 
-const DotLoader: FC<LoaderProps> = ({color, style}) => {
-  const {theme} = useContext(ApplicationContext);
+const DotLoader: FC<LoaderProps> = ({ color, style }) => {
+  const { theme } = useContext(ApplicationContext);
 
   const arrayColor = [
     color ?? theme.colors.primary,
@@ -28,7 +28,7 @@ const DotLoader: FC<LoaderProps> = ({color, style}) => {
   return (
     <AnimatedLottieView
       source={source}
-      style={[{width: 52, height: 18}, style]}
+      style={[{ width: 52, height: 18 }, style]}
       autoPlay
     />
   );

package/Loader/ProgressBar.tsx

@@ -1,12 +1,12 @@
-import React, {FC, useContext, useEffect, useRef} from 'react';
-import {Animated, View} from 'react-native';
+import React, { FC, useContext, useEffect, useRef } from 'react';
+import { Animated, View } from 'react-native';
 import styles from './styles';
-import {ProgressBarProps} from './types';
-import {ApplicationContext} from '../Application';
-import {Radius} from '../Consts';
+import { ProgressBarProps } from './types';
+import { ApplicationContext } from '../Context';
+import { Radius } from '../Consts';
 
-const ProgressBar: FC<ProgressBarProps> = ({percent = 0, style}) => {
-  const {theme} = useContext(ApplicationContext);
+const ProgressBar: FC<ProgressBarProps> = ({ percent = 0, style }) => {
+  const { theme } = useContext(ApplicationContext);
   const animation = useRef(new Animated.Value(0)).current;
 
   useEffect(() => {
@@ -27,8 +27,9 @@ const ProgressBar: FC<ProgressBarProps> = ({percent = 0, style}) => {
       style={[
         style,
         styles.progressContainer,
-        {backgroundColor: theme.colors.background.default},
-      ]}>
+        { backgroundColor: theme.colors.background.default },
+      ]}
+    >
       <Animated.View
         style={{
           height: 4,

package/Loader/Spinner.tsx

@@ -1,12 +1,12 @@
-import React, {FC, useContext} from 'react';
+import React, { FC, useContext } from 'react';
 import AnimatedLottieView from 'lottie-react-native';
 import animation from '../Assets/SpinnerAnimation.json';
-import {hexToRGBA} from './utils';
-import {ApplicationContext} from '../Application';
-import {LoaderProps} from './types';
+import { hexToRGBA } from './utils';
+import { ApplicationContext } from '../Context';
+import { LoaderProps } from './types';
 
-const Spinner: FC<LoaderProps> = ({color, style}) => {
-  const {theme} = useContext(ApplicationContext);
+const Spinner: FC<LoaderProps> = ({ color, style }) => {
+  const { theme } = useContext(ApplicationContext);
 
   let source: any = animation;
   source.assets[0].layers.forEach((layer: any) => {
@@ -20,7 +20,7 @@ const Spinner: FC<LoaderProps> = ({color, style}) => {
   return (
     <AnimatedLottieView
       source={source}
-      style={[{width: 24, height: 24}, style]}
+      style={[{ width: 24, height: 24 }, style]}
       autoPlay
     />
   );

package/Pagination/Dot.tsx

@@ -1,14 +1,17 @@
-import React, {FC, useContext} from 'react';
-import {Animated} from 'react-native';
+import React, { FC, useContext } from 'react';
+import { Animated } from 'react-native';
 import styles from './styles';
-import {DotProps} from './types';
-import {ApplicationContext} from '../Application';
+import { DotProps } from './types';
+import { ApplicationContext } from '../Context';
 
-const Dot: FC<DotProps> = ({active, style}) => {
-  const {theme} = useContext(ApplicationContext);
+const Dot: FC<DotProps> = ({ active, style }) => {
+  const { theme } = useContext(ApplicationContext);
   const dotStyle = active
     ? [styles.activeDot]
-    : [styles.inactiveDot, {backgroundColor: theme.colors.background.pressed}];
+    : [
+        styles.inactiveDot,
+        { backgroundColor: theme.colors.background.pressed },
+      ];
 
   return <Animated.View style={[style, dotStyle]} />;
 };

package/Pagination/PaginationDot.tsx

@@ -1,17 +1,17 @@
-import React, {FC, useContext} from 'react';
-import {View} from 'react-native';
-import {ChildPaginationProps} from './types';
+import React, { FC, useContext } from 'react';
+import { View } from 'react-native';
+import { ChildPaginationProps } from './types';
 import Dot from './Dot';
 import styles from './styles';
-import {Spacing} from '../Consts';
-import {ApplicationContext} from '../Application';
+import { Spacing } from '../Consts';
+import { ApplicationContext } from '../Context';
 
 const PaginationDot: FC<ChildPaginationProps> = ({
   dataLength = 2,
   activeIndex = 0,
   style,
 }) => {
-  const {theme} = useContext(ApplicationContext);
+  const { theme } = useContext(ApplicationContext);
   const renderDots = () => {
     const dots: React.ReactElement[] = [];
     for (let i = 0; i < dataLength; i++) {
@@ -19,8 +19,8 @@ const PaginationDot: FC<ChildPaginationProps> = ({
         <Dot
           key={`Dot${i}`}
           style={[
-            i !== dataLength - 1 ? {marginRight: Spacing.XS} : {},
-            {backgroundColor: theme.colors.primary},
+            i !== dataLength - 1 ? { marginRight: Spacing.XS } : {},
+            { backgroundColor: theme.colors.primary },
           ]}
           active={activeIndex === i}
         />,

package/Pagination/PaginationScroll.tsx

@@ -1,8 +1,8 @@
-import React, {FC, useContext, useRef, useState} from 'react';
-import {Animated, View} from 'react-native';
-import {ScrollIndicatorProps} from './types';
+import React, { FC, useContext, useRef, useState } from 'react';
+import { Animated, View } from 'react-native';
+import { ScrollIndicatorProps } from './types';
 import styles from './styles';
-import {ApplicationContext} from '../Application';
+import { ApplicationContext } from '../Context';
 
 const INDICATOR_WIDTH = 24;
 const INDICATOR_CONTAINER_WIDTH = 72;
@@ -11,7 +11,7 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
   children,
   scrollViewRef,
 }) => {
-  const {theme} = useContext(ApplicationContext);
+  const { theme } = useContext(ApplicationContext);
   const left = useRef(new Animated.Value(0)).current;
   const [scrollViewWidth, setScrollViewWidth] = useState(0);
   const [scrollContentWidth, setScrollContentWidth] = useState(0);
@@ -23,7 +23,7 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
         outputRange: [0, INDICATOR_CONTAINER_WIDTH - INDICATOR_WIDTH],
         extrapolate: 'clamp',
       });
-      return {transform: [{translateX: value}]};
+      return { transform: [{ translateX: value }] };
     }
     return {};
   };
@@ -42,7 +42,7 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
               },
             },
           ],
-          {useNativeDriver: true}
+          { useNativeDriver: true },
         )}
         alwaysBounceHorizontal={false}
         showsHorizontalScrollIndicator={false}
@@ -53,7 +53,8 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
         }}
         onLayout={e => {
           setScrollViewWidth(e.nativeEvent.layout.width);
-        }}>
+        }}
+      >
         {children}
       </Animated.ScrollView>
     );
@@ -63,8 +64,9 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
       <View
         style={[
           styles.indicatorContainer,
-          {backgroundColor: theme.colors.background.pressed},
-        ]}>
+          { backgroundColor: theme.colors.background.pressed },
+        ]}
+      >
         <Animated.View
           style={[
             styles.indicator,

package/Popup/PopupNotify.tsx

@@ -6,7 +6,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import { ApplicationContext, MiniAppContext } from '../Application';
+import { ApplicationContext, MiniAppContext } from '../Context';
 import { Button } from '../Button';
 import { Radius, Spacing, Styles } from '../Consts';
 import { Icon } from '../Icon';
@@ -226,7 +226,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
             <Text
               accessibilityLabel={'description_popup_notify'}
               typography={'body_default_regular'}
-              onTextLayout={({nativeEvent: {lines}}) => {
+              onTextLayout={({ nativeEvent: { lines } }) => {
                 const enableScroll = lines.length > 8.5;
                 if (enableScroll !== scrollContent) {
                   setScrollContent(enableScroll);

package/Popup/PopupPromotion.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useRef } from 'react';
 import { Dimensions, StyleSheet, TouchableOpacity, View } from 'react-native';
 import { PopupPromotionProps } from './types';
-import { ApplicationContext, MiniAppContext } from '../Application';
+import { ApplicationContext, MiniAppContext } from '../Context';
 import { Image } from '../Image';
 import { Radius, Spacing } from '../Consts';
 import { Icon } from '../Icon';

package/Radio/index.tsx

@@ -1,15 +1,12 @@
-import React, {FC, useContext} from 'react';
-import {TouchableOpacity, View} from 'react-native';
+import React, { FC, useContext } from 'react';
+import { TouchableOpacity, View } from 'react-native';
 
-import {RadioProps} from './types';
-import {Text} from '../Text';
+import { RadioProps } from './types';
+import { Text } from '../Text';
 import styles from './styles';
-import {
-  ApplicationContext,
-  ComponentContext,
-  useComponentId,
-} from '../Application';
-import {Spacing} from '../Consts';
+import { useComponentId } from '../Application';
+import { ApplicationContext, ComponentContext } from '../Context';
+import { Spacing } from '../Consts';
 
 const Radio: FC<RadioProps> = ({
   value,
@@ -23,12 +20,12 @@ const Radio: FC<RadioProps> = ({
   accessibilityLabel,
   ...props
 }) => {
-  const {theme} = useContext(ApplicationContext);
+  const { theme } = useContext(ApplicationContext);
   const selected = value === groupValue;
   const componentName = 'Radio';
-  const {componentId} = useComponentId(
+  const { componentId } = useComponentId(
     `${componentName}${label ? `/${label}` : ''}`,
-    accessibilityLabel
+    accessibilityLabel,
   );
   let disabledStyle = {};
   let checkBoxStyle = {
@@ -58,7 +55,8 @@ const Radio: FC<RadioProps> = ({
         params,
         state: disabled ? 'disabled' : 'enabled',
         action: 'click',
-      }}>
+      }}
+    >
       <TouchableOpacity
         {...props}
         disabled={disabled}
@@ -75,20 +73,22 @@ const Radio: FC<RadioProps> = ({
           disabled: disabled as boolean,
           ...accessibilityState,
         }}
-        accessibilityLabel={componentId}>
+        accessibilityLabel={componentId}
+      >
         <View
           style={[
             styles.radio,
             checkBoxStyle,
             disabledStyle,
-            {marginRight: label ? Spacing.S : 0},
+            { marginRight: label ? Spacing.S : 0 },
           ]}
         />
         {!!label && (
           <Text
             typography={'body_default_regular'}
             style={styles.radioText}
-            accessibilityLabel={componentId + '|text'}>
+            accessibilityLabel={componentId + '|text'}
+          >
             {label}
           </Text>
         )}
@@ -97,4 +97,4 @@ const Radio: FC<RadioProps> = ({
   );
 };
 
-export {Radio};
+export { Radio };

package/Skeleton/index.tsx

@@ -12,7 +12,7 @@ import LinearGradient from 'react-native-linear-gradient';
 import { SkeletonTypes } from './types';
 import { Colors, Styles } from '../Consts';
 import styles from './styles';
-import { ScreenContext, SkeletonContext } from '../Application';
+import { ScreenContext, SkeletonContext } from '../Context';
 
 const Skeleton: React.FC<SkeletonTypes> = ({ style }) => {
   const screen = useContext<any>(ScreenContext);