@momo-kits/foundation 0.114.1-beta.9 → 0.114.2

package/Application/Components/HeaderTitle.tsx

@@ -6,7 +6,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {ApplicationContext, MiniAppContext} from '../index';
+import {ApplicationContext, MiniAppContext, setAutomationID} from '../index';
 import {exportFontFamily, scaleSize, Text} from '../../Text';
 import {Colors, Radius, Spacing, Styles} from '../../Consts';
 import {TitleJourneyProps, TitleLocationProps, TitleUserProps} from '../types';
@@ -30,7 +30,7 @@ const HeaderTitle: React.FC<any> = props => {
     <View pointerEvents={'none'} style={styles.headerTitleContainer}>
       <Animated.Text
         {...props}
-        accessibilityLabel={'title_navigation_header'}
+        {...setAutomationID('title_navigation_header')}
         style={[
           styles.title,
           {

package/Input/InputMoney.tsx

@@ -28,12 +28,11 @@ import {
 } from './common';
 import {InputMoneyProps} from './index';
 import styles from './styles';
-import {formatNumberToMoney} from './utils';
+import {formatMoneyToNumber, formatNumberToMoney} from './utils';
 
 const InputMoney = forwardRef(
   (
     {
-      value,
       onChangeText,
       floatingValue,
       floatingIcon,
@@ -51,20 +50,22 @@ const InputMoney = forwardRef(
       errorSpacing,
       style,
       params,
+      defaultValue = '',
       hintText,
+      value: _value,
       onPressFloatingIcon,
       placeholder = '0đ',
+      currency = 'đ',
       showClearIcon = true,
       ...props
     }: InputMoneyProps,
     ref
   ) => {
     const {theme} = useContext(ApplicationContext);
+
     const [focused, setFocused] = useState(false);
-    const [displayValue, setDisplayValue] = useState('');
-    const [numericValue, setNumericValue] = useState('');
-    const [lastDisplayValue, setLastDisplayValue] = useState('');
     const inputRef = useRef<TextInput>(null);
+
     const componentName = 'InputMoney';
 
     const {componentId} = useComponentId(
@@ -73,70 +74,44 @@ const InputMoney = forwardRef(
     );
 
     useEffect(() => {
-      if (value !== undefined && typeof value === 'string') {
-        const cleanValue = value.replace(/\D/g, '');
-        if (cleanValue !== numericValue) {
-          setNumericValue(cleanValue);
-          updateDisplayValue(cleanValue);
-        }
+      if (_value) {
+        setValue(validateText(_value));
+        onChangeText?.(formatMoneyToNumber(_value, currency).toString());
       }
-    }, [value]);
-
-    useEffect(() => {
-      setLastDisplayValue(displayValue);
-    }, [displayValue]);
+    }, [_value]);
 
-    const updateDisplayValue = (numeric: string) => {
-      if (!numeric) {
-        setDisplayValue('');
-        return;
-      }
-      const formatted = formatNumberToMoney(Number(numeric));
-      setDisplayValue(formatted ? `${formatted}đ` : '');
+    const validateText = (text: string) => {
+      const valueFormat = formatMoneyToNumber(text, currency);
+      return formatNumberToMoney(valueFormat, currency);
     };
 
+    const [value, setValue] = useState(
+      defaultValue ? validateText(defaultValue) : ''
+    );
+
     const onClearText = () => {
-      setDisplayValue('');
-      setNumericValue('');
+      inputRef?.current?.clear();
+      setValue('');
       onChangeText?.('');
-      inputRef?.current?.focus();
     };
 
     const _onChangeText = (text: string) => {
-      if (!text) {
-        setDisplayValue('');
-        setNumericValue('');
-        onChangeText?.('');
-        return;
-      }
-
-      if (text.length < lastDisplayValue.length) {
-        const lastChar = lastDisplayValue.charAt(lastDisplayValue.length - 1);
-        const isRemovingDong = lastChar === 'đ' || lastChar === ' ';
-        const isRemovingDot = lastChar === '.';
-
-        if (isRemovingDong || isRemovingDot) {
-          const currentNumericValue = numericValue;
-          if (currentNumericValue.length > 0) {
-            const newNumericValue = currentNumericValue.slice(0, -1);
-            setNumericValue(newNumericValue);
-            updateDisplayValue(newNumericValue);
-            onChangeText?.(newNumericValue);
-            return;
-          }
-        }
-      }
-
-      const textWithoutCurrency = text.replace(/ đ$/g, '').trim();
-      const newNumericValue = textWithoutCurrency.replace(/[^\d]/g, '');
-
-      if (/^\d*$/.test(newNumericValue)) {
-        setNumericValue(newNumericValue);
-        updateDisplayValue(newNumericValue);
-        onChangeText?.(newNumericValue);
+      if (text.length < value.length && value.indexOf(text) === 0) {
+        text = value.slice(0, -2) + currency;
       }
+      setValue(validateText(text));
+      onChangeText?.(formatMoneyToNumber(text, currency).toString());
     };
 
+    useImperativeHandle(ref, () => {
+      return {
+        clear: onClearText,
+        focus: () => inputRef.current?.focus(),
+        blur: () => inputRef.current?.blur(),
+        setText: _onChangeText,
+      };
+    });
+
     const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
       setFocused(true);
       onFocus?.(e);
@@ -147,19 +122,6 @@ const InputMoney = forwardRef(
       onBlur?.(e);
     };
 
-    const _setText = (text: string) => {
-      _onChangeText(text);
-    };
-
-    useImperativeHandle(ref, () => {
-      return {
-        clear: onClearText,
-        focus: () => inputRef.current?.focus(),
-        blur: () => inputRef.current?.blur(),
-        setText: _setText,
-      };
-    });
-
     const renderInputView = () => {
       const disabledColor = theme.colors.text.disable;
       let textColor = theme.colors.text.default;
@@ -192,33 +154,32 @@ const InputMoney = forwardRef(
           <View style={styles.inputView}>
             <TextInput
               {...props}
-              accessibilityLabel={`${componentId}`}
-              textAlignVertical="center"
+              editable={!disabled}
               ref={inputRef}
-              accessibilityState={{
-                disabled: disabled,
-                ...props.accessibilityState,
-              }}
+              keyboardType={'number-pad'}
+              allowFontScaling={false}
               style={[
                 styles.moneyInput,
                 {
                   color: textColor,
                 },
               ]}
-              allowFontScaling={false}
-              textBreakStrategy="highQuality"
-              value={displayValue}
+              accessibilityState={{
+                disabled: disabled,
+                ...props.accessibilityState,
+              }}
+              value={value}
               onChangeText={_onChangeText}
               onFocus={_onFocus}
               onBlur={_onBlur}
-              placeholder={'0đ'}
               selectionColor={theme.colors.primary}
               placeholderTextColor={placeholderColor}
-              keyboardType={'numeric'}
+              placeholder={placeholder}
+              accessibilityLabel={`${componentId}`}
             />
           </View>
           <View style={styles.iconView}>
-            {showClearIcon && focused && displayValue ? (
+            {showClearIcon && focused && (
               <TouchableOpacity
                 accessibilityLabel={`${componentId}|clear-icon-touch`}
                 style={styles.iconWrapper}
@@ -230,7 +191,7 @@ const InputMoney = forwardRef(
                   accessibilityLabel={`${componentId}|clear-icon`}
                 />
               </TouchableOpacity>
-            ) : null}
+            )}
             <RenderTrailing
               color={iconTintColor}
               icon={trailing}
@@ -244,12 +205,14 @@ const InputMoney = forwardRef(
     };
 
     let inputState = 'active';
-    if (displayValue) {
+
+    if (value && value?.length > 0) {
       inputState = 'filled';
     }
     if (errorMessage && errorMessage?.length > 0) {
       inputState = 'error';
     }
+
     if (disabled) {
       inputState = 'disabled';
     }

package/Input/styles.ts

@@ -210,5 +210,4 @@ export default StyleSheet.create({
     borderRadius: Radius.XS,
     overflow: 'hidden',
   },
-  currency: {fontSize: scaleSize(20), fontWeight: 'bold'},
 });

package/Popup/PopupNotify.tsx

@@ -210,16 +210,12 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       ]}>
       {!!image && <Image source={{uri: image}} style={styles.image} />}
       <View style={styles.content}>
-        <Text
-          typography={'header_default_bold'}
-          numberOfLines={3}
-          accessibilityLabel={'title_popup_notify'}>
+        <Text typography={'header_default_bold'} numberOfLines={3}>
           {title}
         </Text>
         <Description style={[styles.description, descriptionStyle]}>
           {typeof description === 'string' ? (
             <Text
-              accessibilityLabel={'description_popup_notify'}
               typography={'body_default_regular'}
               onTextLayout={({nativeEvent: {lines}}) => {
                 const enableScroll = lines.length > 3;
@@ -236,7 +232,6 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
         {!!error && (
           <View style={styles.information}>
             <Text
-              accessibilityLabel={'description_popup_notify'}
               typography={'description_xs_regular'}
               color={theme.colors.text.hint}
               numberOfLines={1}>

package/Switch/index.tsx

@@ -3,7 +3,7 @@ import {TouchableOpacity, View} from 'react-native';
 import {SwitchProps} from './types';
 import styles from './styles';
 import {Colors} from '../Consts';
-import {ComponentContext, useComponentId} from '../Application';
+import {ComponentContext} from '../Application';
 
 const Switch: FC<SwitchProps> = ({
   value = false,
@@ -11,14 +11,10 @@ const Switch: FC<SwitchProps> = ({
   disabled = false,
   style,
   params,
-  accessibilityLabel,
   ...props
 }) => {
   const circleBackgroundColor = value ? Colors.black_01 : Colors.black_03;
   const circleAlign = value ? 'flex-end' : 'flex-start';
-  const componentName = 'Switch';
-
-  const {componentId} = useComponentId(componentName, accessibilityLabel);
 
   let backgroundColor = value ? Colors.green_03 : Colors.black_07;
   if (disabled) {
@@ -28,7 +24,7 @@ const Switch: FC<SwitchProps> = ({
   return (
     <ComponentContext.Provider
       value={{
-        componentName,
+        componentName: 'Switch',
         params,
         state: disabled ? 'disabled' : 'enabled',
         action: 'click',
@@ -36,12 +32,6 @@ const Switch: FC<SwitchProps> = ({
       <TouchableOpacity
         {...props}
         disabled={disabled}
-        accessibilityState={{
-          checked: value,
-          disabled: disabled === null ? false : disabled,
-          ...props.accessibilityState,
-        }}
-        accessibilityLabel={componentId}
         onPress={() => onChange?.(!value)}
         style={[
           style,

package/Title/index.tsx

@@ -2,7 +2,11 @@ import React, {FC, useContext, useState} from 'react';
 import {Text as RNText, TouchableOpacity, View, ViewStyle} from 'react-native';
 import {Icon} from '../Icon';
 import {scaleSize, Text} from '../Text';
-import {ApplicationContext, useComponentId} from '../Application';
+import {
+  ApplicationContext,
+  setAutomationID,
+  useComponentId,
+} from '../Application';
 import {Badge} from '../Badge';
 import {Colors} from '../Consts';
 import styles from './styles';
@@ -82,7 +86,7 @@ const Title: FC<TitleProps> = ({
           }}
           style={[styles.iconLeftView, flexStyle]}>
           <RNText
-            accessibilityLabel={componentId + '|title-text'}
+            {...setAutomationID(componentId + '|title-text')}
             numberOfLines={numberOfLines}
             style={[
               styleSheet[typography],
@@ -201,7 +205,7 @@ const Title: FC<TitleProps> = ({
     return (
       <View style={isSection && styles.margin}>
         <RNText
-          accessibilityLabel={componentId + '|title-text'}
+          {...setAutomationID(componentId + '|title-text')}
           numberOfLines={numberOfLines}
           style={[styleSheet[typography], styles.title]}>
           {title}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "0.114.1-beta.9",
+  "version": "0.114.2",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {},
@@ -14,13 +14,13 @@
     "react-native-linear-gradient": "2.8.3",
     "react-native-gesture-handler": "1.10.3",
     "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"
+    "react-native-reanimated": "git+https://oauth2:q9C8ByV3vnsw_vjwrDay@gitlab.mservice.com.vn/momo-platform/react-native-reanimated.git#v1.13.4_gradle_7",
+    "lottie-react-native": "git+https://oauth2:oZFuaMKUc7GV7HeP8xq6@gitlab.mservice.com.vn/momo-platform/momo-lottie-react-native.git",
+    "@react-navigation/stack": "git+https://oauth2:ntR45Ct8MSUKVd52rG7a@gitlab.mservice.com.vn/momo-platform/react-navigation-stack.git",
+    "@react-navigation/bottom-tabs": "git+https://oauth2:RQq-YxRT5sme7Hx3xkKk@gitlab.mservice.com.vn/momo-platform/react-native-bottom-tabs.git"
   },
   "peerDependencies": {
     "react-native": "*"