@momo-kits/foundation 0.81.43 → 0.81.48

package/Input/Input.tsx

@@ -37,6 +37,7 @@ const Input = forwardRef(
       leadingIconColor,
       fontWeight = 'Regular',
       onPressIcon,
+      secureTextEntry,
       style,
       ...props
     }: InputProps,
@@ -45,8 +46,8 @@ const Input = forwardRef(
     const {theme} = useContext(ApplicationContext);
     const [focused, setFocused] = useState(false);
     const [haveValue, setHaveValue] = useState(!!value || !!props.defaultValue);
+    const [secureTextInput, setSecureTextInput] = useState(secureTextEntry);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
-    const accessibilityLabel = `Input/${floatingValue ?? placeholder}`;
 
     const onClearText = () => {
       inputRef?.current?.clear();
@@ -70,11 +71,29 @@ const Input = forwardRef(
 
     const renderIcon = (color: string | undefined) => {
       if (loading) {
-        return <Loader type={'spinner'} color={color} />;
+        return <Loader type={'spinner'} color={color} style={styles.icon} />;
+      }
+      if (secureTextEntry) {
+        return (
+          <TouchableOpacity
+            onPress={() => setSecureTextInput(!secureTextInput)}
+            style={styles.icon}>
+            <Icon
+              color={color}
+              size={24}
+              source={
+                secureTextInput ? '24_security_eye_off' : '24_security_eye_open'
+              }
+            />
+          </TouchableOpacity>
+        );
       }
       if (icon) {
         return (
-          <TouchableOpacity onPress={onPressIcon} disabled={!onPressIcon}>
+          <TouchableOpacity
+            onPress={onPressIcon}
+            disabled={!onPressIcon}
+            style={styles.icon}>
             <Icon color={color} source={icon} size={24} />
           </TouchableOpacity>
         );
@@ -83,6 +102,7 @@ const Input = forwardRef(
 
     const renderInputView = () => {
       const disabledColor = theme.colors.text.disable;
+      const secure = secureTextInput && secureTextEntry;
       let textColor = theme.colors.text.default;
       let placeholderColor = theme.colors.text.hint;
       let iconTintColor = iconColor;
@@ -120,8 +140,8 @@ const Input = forwardRef(
             )}
             <TextInput
               {...props}
-              accessibilityLabel={accessibilityLabel}
               editable={!disabled}
+              secureTextEntry={secure}
               textAlignVertical="center"
               ref={inputRef}
               style={[
@@ -130,6 +150,7 @@ const Input = forwardRef(
                   color: textColor,
                   fontFamily: `${theme.font}-${fontWeight}`,
                 },
+                secure && haveValue && {fontSize: size === 'small' ? 18 : 22},
               ]}
               textBreakStrategy="highQuality"
               value={value}
@@ -160,9 +181,7 @@ const Input = forwardRef(
     };
 
     return (
-      <View
-        style={[style, styles.wrapper]}
-        accessibilityLabel={accessibilityLabel}>
+      <View style={[style, styles.wrapper]}>
         {renderInputView()}
         <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
       </View>

package/Input/InputDropDown.tsx

@@ -30,7 +30,6 @@ const InputDropDown = ({
 }: InputDropDownProps) => {
   const {theme} = useContext(ApplicationContext);
   const full = !!value || !!placeholder;
-  const accessibilityLabel = `InputDropDown/${floatingValue ?? placeholder}`;
 
   const renderIcon = (color: string | undefined) => {
     if (loading) {
@@ -82,7 +81,6 @@ const InputDropDown = ({
             <TextInput
               {...props}
               onPressIn={onPress}
-              accessibilityLabel={accessibilityLabel}
               editable={false}
               textAlignVertical="top"
               style={[
@@ -106,10 +104,7 @@ const InputDropDown = ({
   };
 
   return (
-    <TouchableOpacity
-      onPress={onPress}
-      style={[style, full && styles.wrapper]}
-      accessibilityLabel={accessibilityLabel}>
+    <TouchableOpacity onPress={onPress} style={[style, full && styles.wrapper]}>
       {renderInputView()}
       <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
     </TouchableOpacity>

package/Input/InputMoney.tsx

@@ -1,4 +1,10 @@
-import React, {forwardRef, useContext, useRef, useState} from 'react';
+import React, {
+  forwardRef,
+  useContext,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
 import {
   NativeSyntheticEvent,
   TextInput,
@@ -38,7 +44,6 @@ const InputMoney = forwardRef(
     const {theme} = useContext(ApplicationContext);
     const [focused, setFocused] = useState(false);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
-    const accessibilityLabel = `InputMoney/${floatingValue}`;
 
     const validateText = (text: string) => {
       const valueFormat = formatMoneyToNumber(text, 'đ');
@@ -63,6 +68,12 @@ const InputMoney = forwardRef(
       onChangeText?.(formatMoneyToNumber(text, 'đ').toString());
     };
 
+    useImperativeHandle(ref, () => {
+      return {
+        setText: _onChangeText,
+      };
+    });
+
     const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
       setFocused(true);
       onFocus?.(e);
@@ -103,7 +114,6 @@ const InputMoney = forwardRef(
           <View style={styles.inputView}>
             <TextInput
               {...props}
-              accessibilityLabel={accessibilityLabel}
               editable={!disabled}
               textAlignVertical="top"
               ref={inputRef}
@@ -142,9 +152,7 @@ const InputMoney = forwardRef(
     };
 
     return (
-      <View
-        style={[style, styles.wrapper]}
-        accessibilityLabel={accessibilityLabel}>
+      <View style={[style, styles.wrapper]}>
         {renderInputView()}
         <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
       </View>

package/Input/InputOTP.tsx

@@ -57,7 +57,7 @@ const OTPCaret: FC<CaretProps> = ({index, length}) => {
           opacity,
         }}
       />
-      <Text color={theme.colors.text.hint} typography={'paragraph_default'}>
+      <Text color={theme.colors.text.hint} typography={'body_default_regular'}>
         -
       </Text>
     </View>
@@ -88,7 +88,6 @@ const InputOTP = forwardRef(
     const [focused, setFocused] = useState(false);
     const inputRef = useRef<TextInput>(null);
     const {theme} = useContext(ApplicationContext);
-    const accessibilityLabel = `InputOTP/${floatingValue ?? placeholder}`;
 
     useImperativeHandle(ref, () => ({
       onChangeText: (text: string) => {
@@ -135,7 +134,9 @@ const InputOTP = forwardRef(
                     ? theme.colors.text.default
                     : theme.colors.text.hint
                 }
-                typography={!!value[i] ? 'title_s' : 'paragraph_default'}>
+                typography={
+                  !!value[i] ? 'header_m_bold' : 'body_default_regular'
+                }>
                 {value[i] || '-'}
               </Text>
             )}
@@ -150,7 +151,9 @@ const InputOTP = forwardRef(
 
       if (!focused && value.length === 0 && !!placeholder) {
         return (
-          <Text color={theme.colors.text.hint} typography={'description_s'}>
+          <Text
+            color={theme.colors.text.hint}
+            typography={'description_default_regular'}>
             {placeholder}
           </Text>
         );
@@ -167,7 +170,7 @@ const InputOTP = forwardRef(
                     marginRight: Spacing.L,
                   }
                 }
-                typography={'title_s'}>
+                typography={'header_m_bold'}>
                 {letter}
               </Text>
             );
@@ -191,7 +194,9 @@ const InputOTP = forwardRef(
                 styles.otpFloatingView,
                 {backgroundColor: theme.colors.background.surface},
               ]}>
-              <Text typography={'description_s'}>{floatingValue}</Text>
+              <Text typography={'description_default_regular'}>
+                {floatingValue}
+              </Text>
             </View>
           )}
           <View style={styles.otpInputsView}>
@@ -200,7 +205,6 @@ const InputOTP = forwardRef(
           <View style={styles.inputView}>
             <TextInput
               {...props}
-              accessibilityLabel={accessibilityLabel}
               ref={inputRef}
               value={value}
               onChangeText={_onChangeText}
@@ -220,8 +224,7 @@ const InputOTP = forwardRef(
       <TouchableOpacity
         activeOpacity={1}
         onPress={onFocusInput}
-        style={[style, styles.otpWrapper]}
-        accessibilityLabel={accessibilityLabel}>
+        style={[style, styles.otpWrapper]}>
         {renderInputView()}
         <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
       </TouchableOpacity>

package/Input/InputSearch.tsx

@@ -25,10 +25,10 @@ const InputSearch = forwardRef(
       icon,
       buttonText = 'Hủy',
       showButtonText = true,
-      showBorder = true,
       style,
       defaultValue,
       onPressButtonText,
+        hasColorBG = true,
       ...props
     }: InputSearchProps,
     ref,
@@ -37,7 +37,6 @@ const InputSearch = forwardRef(
     const [focused, setFocused] = useState(false);
     const [haveValue, setHaveValue] = useState(!!value || !!defaultValue);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
-    const accessibilityLabel = `InputMoney/${placeholder}`;
 
     const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
       setFocused(true);
@@ -63,7 +62,6 @@ const InputSearch = forwardRef(
       return (
         <TextInput
           {...props}
-          accessibilityLabel={accessibilityLabel}
           textAlignVertical="center"
           ref={inputRef}
           style={[
@@ -118,19 +116,17 @@ const InputSearch = forwardRef(
         </View>
       );
     };
+
+    const backgroundColor = hasColorBG ? theme.colors.background.default : theme.colors.background.surface
+
     return (
-      <View
-        style={[style, styles.searchInputContainer]}
-        accessibilityLabel={accessibilityLabel}>
+      <View style={[style, styles.searchInputContainer]}>
         <View
           style={[
             styles.searchInputWrapper,
             {
-              backgroundColor: theme.colors.background.surface,
-              borderColor: theme.colors.background.surface,
-            },
-            showBorder && {borderColor: theme.colors.border.default},
-            focused && {borderColor: theme.colors.primary},
+              backgroundColor,
+            }
           ]}>
           <Icon
             source={'navigation_search'}
@@ -142,7 +138,7 @@ const InputSearch = forwardRef(
         </View>
         {showButtonText && (
           <TouchableOpacity onPress={onPressButtonText}>
-            <Text typography={'action_default'} style={styles.textButton}>
+            <Text typography={'action_default_bold'} style={styles.textButton}>
               {buttonText}
             </Text>
           </TouchableOpacity>

package/Input/InputTextArea.tsx

@@ -46,7 +46,6 @@ const InputTextArea = forwardRef(
     const [focused, setFocused] = useState(false);
     const [inputValue, setInputValue] = useState(defaultValue ?? '');
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
-    const accessibilityLabel = `InputTextArea/${floatingValue ?? placeholder}`;
 
     const onClearText = () => {
       inputRef?.current?.clear();
@@ -71,7 +70,9 @@ const InputTextArea = forwardRef(
     const renderCountingView = () => {
       return (
         <View style={styles.countingView}>
-          <Text color={theme.colors.text.hint} typography={'description_xs'}>
+          <Text
+            color={theme.colors.text.hint}
+            typography={'description_xs_regular'}>
             {`${inputValue.length}/${maxLength}`}
           </Text>
         </View>
@@ -108,7 +109,6 @@ const InputTextArea = forwardRef(
             <View style={styles.textAreaView}>
               <TextInput
                 {...props}
-                accessibilityLabel={accessibilityLabel}
                 ref={inputRef}
                 editable={!disabled}
                 textAlignVertical="top"
@@ -148,9 +148,7 @@ const InputTextArea = forwardRef(
     };
 
     return (
-      <View
-        style={[style, styles.wrapper]}
-        accessibilityLabel={accessibilityLabel}>
+      <View style={[style, styles.wrapper]}>
         {renderInputView()}
         <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
       </View>

package/Input/common.tsx

@@ -64,7 +64,7 @@ export const ErrorView: FC<{errorMessage?: string; errorSpacing?: boolean}> = ({
           style={Styles.flex}
           color={errorColor}
           numberOfLines={2}
-          typography={'description_s'}>
+          typography={'description_default_regular'}>
           {errorMessage}
         </Text>
       </View>
@@ -104,10 +104,12 @@ export const FloatingView: FC<FloatingViewProps> = ({
           },
           style,
         ]}>
-        <Text color={floatingTextColor} typography={'label_s'}>
+        <Text color={floatingTextColor} typography={'label_s_medium'}>
           {floatingValue}
           {required && (
-            <Text typography={'label_s'} color={theme.colors.error.primary}>
+            <Text
+              typography={'label_s_medium'}
+              color={theme.colors.error.primary}>
               *
             </Text>
           )}

package/Input/index.tsx

@@ -109,12 +109,6 @@ export interface InputSearchProps extends TextInputProps {
    */
   showButtonText?: boolean;
 
-  /**
-   * Optional. If `true`, a border will be displayed around the InputSearch component.
-   * Defaults to `true` if not provided.
-   */
-  showBorder?: boolean;
-
   onPressButtonText?: () => void;
 
   /**
@@ -126,6 +120,8 @@ export interface InputSearchProps extends TextInputProps {
    * Optional. Represents the name or key of the icon to be displayed in the Input component.
    */
   icon?: string;
+
+  hasColorBG?: boolean
 }
 
 export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}

package/Input/styles.ts

@@ -53,8 +53,7 @@ export default StyleSheet.create({
     marginRight: Spacing.M,
   },
   icon: {
-    width: 24,
-    height: 24,
+    marginLeft: Spacing.S
   },
   iconWrapper: {
     width: 24,
@@ -101,7 +100,6 @@ export default StyleSheet.create({
   searchInputWrapper: {
     flexDirection: 'row',
     borderRadius: Radius.XL,
-    borderWidth: 1,
     paddingHorizontal: Spacing.S,
     alignItems: 'center',
     flex: 1,

package/Layout/Card.tsx

@@ -29,7 +29,7 @@ const Card: React.FC<CardProps> = ({
   useShadow = false,
   ...props
 }) => {
-  const {showGrid} = useContext(ApplicationContext);
+  const {showGrid, theme} = useContext(ApplicationContext);
   const {numberOfColumns} = useGridSystem();
 
   const gutterSize = 8;
@@ -47,6 +47,7 @@ const Card: React.FC<CardProps> = ({
       return span * sizePerSpan + (span - 1) * gutterSize;
     },
   };
+
   /**
    * render overlay only dev mode
    */
@@ -107,8 +108,9 @@ const Card: React.FC<CardProps> = ({
     if (Array.isArray(children)) {
       let cursor = 0;
       let rows: any[] = [];
-      for (let i = 0; i < children.length; ++i) {
-        const item = children[i];
+      const arrayChild = children.filter(item => !!item);
+      for (let i = 0; i < arrayChild.length; ++i) {
+        const item = arrayChild[i];
         const totalSpan = rows
           .concat([item])
           .map(i => i.props?.widthSpan)
@@ -124,7 +126,7 @@ const Card: React.FC<CardProps> = ({
           rows = [item];
         }
 
-        if (i == children.length - 1) {
+        if (i == arrayChild.length - 1) {
           cursor += 1;
           element.push(addRowView(rows, cursor, true));
         }
@@ -138,23 +140,20 @@ const Card: React.FC<CardProps> = ({
     return element;
   };
 
-  const {theme} = useContext(ApplicationContext);
   return (
     <GridContext.Provider value={gridContext}>
       <View
         {...props}
-        accessibilityLabel={`Card`}
         style={[
+          {backgroundColor: theme.colors.background.surface},
           style,
           styles.protectedStyle,
           styles.card,
           {
             width: widthSection,
             marginHorizontal: margin,
-            backgroundColor: backgroundImage
-              ? undefined
-              : theme.colors.background.surface,
           },
+          !!backgroundImage && {backgroundColor: undefined},
           useShadow && Shadow.Light,
         ]}>
         {!!backgroundImage && (

package/Layout/Item.tsx

@@ -37,7 +37,6 @@ const Item: React.FC<ItemProps> = ({
 
   return (
     <View
-      accessibilityLabel={`Item`}
       style={[
         style,
         styles.item,

package/Layout/ItemList.tsx

@@ -1,4 +1,4 @@
-import React, {FC, useContext} from 'react';
+import React, {forwardRef, useContext} from 'react';
 import {FlatList, FlatListProps, View} from 'react-native';
 import Item, {SpanNumber} from './Item';
 import {GridContext} from './index';
@@ -11,39 +11,45 @@ export interface ItemListProps extends FlatListProps<any> {
   widthSpan?: SpanNumber;
 }
 
-const ItemList: FC<ItemListProps> = ({
-  renderItem,
-  widthSpan,
-  style,
-  contentContainerStyle,
-  ...props
-}) => {
-  const {gutterSize, numberOfColumns} = useContext(GridContext);
-  const widthItem = (widthSpan ?? numberOfColumns) as SpanNumber;
-  const numColumns = Math.floor(numberOfColumns / widthItem);
-  const indexBegin = props?.data?.map((_i, index) => index * numColumns);
-  const _renderItem = (item: any) => {
-    if (indexBegin?.includes(item?.index)) {
-      return <Item widthSpan={widthItem}>{renderItem?.(item)}</Item>;
-    }
+const ItemList = forwardRef(
+  (
+    {
+      renderItem,
+      widthSpan,
+      style,
+      contentContainerStyle,
+      ...props
+    }: ItemListProps,
+    ref,
+  ) => {
+    const {gutterSize, numberOfColumns} = useContext(GridContext);
+    const widthItem = (widthSpan ?? numberOfColumns) as SpanNumber;
+    const numColumns = Math.floor(numberOfColumns / widthItem);
+    const indexBegin = props?.data?.map((_i, index) => index * numColumns);
+    const _renderItem = (item: any) => {
+      if (indexBegin?.includes(item?.index)) {
+        return <Item widthSpan={widthItem}>{renderItem?.(item)}</Item>;
+      }
+      return (
+        <View style={{paddingLeft: gutterSize}}>
+          <Item widthSpan={widthItem}>{renderItem?.(item)}</Item>
+        </View>
+      );
+    };
+
     return (
-      <View style={{paddingLeft: gutterSize}}>
-        <Item widthSpan={widthItem}>{renderItem?.(item)}</Item>
-      </View>
+      <FlatList
+        ref={ref as React.RefObject<FlatList>}
+        {...props}
+        numColumns={numColumns}
+        renderItem={_renderItem}
+        horizontal={false}
+        ItemSeparatorComponent={() => <View style={{height: gutterSize}} />}
+        style={[style, styles.protectedStyle]}
+        contentContainerStyle={[contentContainerStyle, styles.protectedStyle]}
+      />
     );
-  };
-
-  return (
-    <FlatList
-      {...props}
-      numColumns={numColumns}
-      renderItem={_renderItem}
-      horizontal={false}
-      ItemSeparatorComponent={() => <View style={{height: gutterSize}} />}
-      style={[style, styles.protectedStyle]}
-      contentContainerStyle={[contentContainerStyle, styles.protectedStyle]}
-    />
-  );
-};
+  },
+);
 
 export default ItemList;

package/Layout/Screen.tsx

@@ -301,9 +301,7 @@ const Screen = forwardRef(
     };
 
     return (
-      <View
-        style={[Styles.flex, {backgroundColor}]}
-        accessibilityLabel={`ScreenContainer`}>
+      <View style={[Styles.flex, {backgroundColor}]}>
         {!!headerBackground && (
           <>
             <Image

package/Layout/Section.tsx

@@ -107,8 +107,9 @@ const Section: React.FC<SectionProps> = ({
     if (Array.isArray(children)) {
       let cursor = 0;
       let rows: any[] = [];
-      for (let i = 0; i < children.length; ++i) {
-        const item = children[i];
+      const arrayChild = children.filter(item => !!item);
+      for (let i = 0; i < arrayChild.length; ++i) {
+        const item = arrayChild[i];
         const totalSpan = rows
           .concat([item])
           .map(i => i.props?.widthSpan)
@@ -124,7 +125,7 @@ const Section: React.FC<SectionProps> = ({
           rows = [item];
         }
 
-        if (i == children.length - 1) {
+        if (i == arrayChild.length - 1) {
           cursor += 1;
           element.push(addRowView(rows, cursor, true));
         }
@@ -150,7 +151,6 @@ const Section: React.FC<SectionProps> = ({
       }}>
       <View
         {...props}
-        accessibilityLabel={`Section`}
         style={[
           style,
           styles.protectedStyle,

package/Pagination/PaginationNumber.tsx

@@ -13,7 +13,7 @@ const PaginationNumber: FC<ChildPaginationProps> = ({
   return (
     <View style={[style, styles.row]}>
       <View style={styles.paginationNumberContainer}>
-        <Text color={Colors.black_01} typography={'label_default'}>{`${
+        <Text color={Colors.black_01} typography={'label_default_medium'}>{`${
           activeIndex + 1
         }/${dataLength}`}</Text>
       </View>

package/Pagination/PaginationScroll.tsx

@@ -31,7 +31,6 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
   const renderScrollView = () => {
     return (
       <Animated.ScrollView
-        accessibilityLabel={'PaginationScroll'}
         ref={scrollViewRef}
         onScroll={Animated.event(
           [