@momo-kits/foundation 0.169.10-beta.1 → 0.169.10

package/Input/InputMoney.tsx

@@ -10,11 +10,11 @@ import React, {
 import { Platform, TextInput, TextInputFocusEvent, View } from 'react-native';
 import { useComponentId } from '../Application';
 import { ComponentContext, MiniAppContext } from '../Context';
-import { ErrorView } from './common';
+import { ErrorView } from './ErrorView';
 import { InputMoneyProps } from './index';
 import { InputMoneyView } from './InputMoneyView';
-import { findEdit, moneyFormatter } from './moneyUtils';
 import styles from './styles';
+import { findEdit, moneyFormatter } from './utils';
 
 /**
  * Money input: keeps digits only, shows them grouped with a currency suffix and
@@ -52,7 +52,7 @@ const InputMoney = forwardRef(
     ref,
   ) => {
     const context = useContext<any>(MiniAppContext);
-    const [focused, setFocused] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
     const [displayValue, setDisplayValue] = useState('');
     const [numericValue, setNumericValue] = useState('');
     const [lastDisplayValue, setLastDisplayValue] = useState('');
@@ -126,7 +126,7 @@ const InputMoney = forwardRef(
       }
     };
 
-    const onClearText = () => {
+    const handleClearText = () => {
       inputRef?.current?.clear();
       inputRef.current?.setNativeProps({ text: '' });
       setDisplayValue('');
@@ -134,7 +134,7 @@ const InputMoney = forwardRef(
       onChangeText?.('');
     };
 
-    const _onChangeText = (text: string) => {
+    const handleChangeText = (text: string) => {
       if (!text) {
         lastRawText.current = '';
         setDisplayValue('');
@@ -166,17 +166,17 @@ const InputMoney = forwardRef(
       inputRef.current?.setSelection(displayValue.length, displayValue.length);
     };
 
-    const _onFocus = (e: TextInputFocusEvent) => {
-      setFocused(true);
+    const handleFocus = (e: TextInputFocusEvent) => {
+      setIsFocused(true);
       onFocus?.(e);
     };
 
-    const _onBlur = (e: TextInputFocusEvent) => {
-      setFocused(false);
+    const handleBlur = (e: TextInputFocusEvent) => {
+      setIsFocused(false);
       onBlur?.(e);
     };
 
-    const _setText = (text: string) => {
+    const handleSetText = (text: string) => {
       caretDigitsAfter.current = undefined;
       if (!text) {
         setDisplayValue('');
@@ -190,10 +190,10 @@ const InputMoney = forwardRef(
 
     useImperativeHandle(ref, () => {
       return {
-        clear: onClearText,
+        clear: handleClearText,
         focus: () => inputRef.current?.focus(),
         blur: () => inputRef.current?.blur(),
-        setText: _setText,
+        setText: handleSetText,
       };
     });
 
@@ -240,16 +240,16 @@ const InputMoney = forwardRef(
             showClearIcon={showClearIcon}
             placeholder={placeholder}
             currency={currency}
-            focused={focused}
+            focused={isFocused}
             componentId={componentId}
             displayValue={displayValue}
             caretSelection={caretSelection}
             inputRef={inputRef}
             focusAtEnd={focusAtEnd}
-            onClearText={onClearText}
-            onChangeText={_onChangeText}
-            onFocus={_onFocus}
-            onBlur={_onBlur}
+            onClearText={handleClearText}
+            onChangeText={handleChangeText}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
             inputProps={props}
           />
           <ErrorView

package/Input/InputMoneyView.tsx

@@ -11,15 +11,15 @@ import {
 import { ApplicationContext } from '../Context';
 import { Icon } from '../Icon';
 import { useScaleSize, exportFontFamily } from '../Text';
-import {
-  FloatingView,
-  getBorderColor,
-  getSizeStyle,
-  RenderTrailing,
-} from './common';
+import { CLEAR_ICON_SIZE } from './constants';
+import { FloatingView } from './FloatingView';
 import { InputMoneyProps } from './index';
+import { RenderTrailing } from './RenderTrailing';
 import styles from './styles';
 import SystemTextInput from './SystemTextInput';
+import { getBorderColor, getInputHeight, getSizeStyle } from './utils';
+
+const MONEY_FONT_SIZE = 20;
 
 type InputMoneyViewProps = Pick<
   InputMoneyProps,
@@ -85,8 +85,8 @@ export const InputMoneyView = ({
   inputProps: props,
 }: InputMoneyViewProps) => {
   const { theme } = useContext(ApplicationContext);
-  const scaleHeight = useScaleSize(size === 'small' ? 48 : 56);
-  const scaledFontSize = useScaleSize(20);
+  const scaleHeight = useScaleSize(getInputHeight(size));
+  const scaledFontSize = useScaleSize(MONEY_FONT_SIZE);
   const inputFontFamily = exportFontFamily('bold');
   const disabledColor = theme.colors.text.disable;
   let textColor = theme.colors.text.default;
@@ -101,11 +101,11 @@ export const InputMoneyView = ({
     fontSize: scaledFontSize,
     fontFamily: inputFontFamily,
   };
-  const placeholderHasCurrency = placeholder.endsWith(currency);
-  const shouldShowCurrency = !!displayValue || placeholderHasCurrency;
+  const hasCurrencyInPlaceholder = placeholder.endsWith(currency);
+  const shouldShowCurrency = !!displayValue || hasCurrencyInPlaceholder;
   const shouldShowClearIcon = !!(showClearIcon && focused && displayValue);
   let inputPlaceholder = placeholder;
-  if (placeholderHasCurrency) {
+  if (hasCurrencyInPlaceholder) {
     inputPlaceholder = placeholder.slice(0, -currency.length);
   }
   return (
@@ -175,7 +175,7 @@ export const InputMoneyView = ({
           >
             <Icon
               source="24_navigation_close_circle_full"
-              size={16}
+              size={CLEAR_ICON_SIZE}
               color={theme.colors.text.hint}
               accessibilityLabel={`${componentId}|clear-icon`}
             />

package/Input/InputOTP.tsx

@@ -26,31 +26,37 @@ import Animated, {
 } from 'react-native-reanimated';
 import { useComponentId } from '../Application';
 import { Spacing, Styles } from '../Consts';
-import { useScaleSize, Text } from '../Text';
-import { ErrorView, getBorderColor } from './common';
-import { CaretProps, InputOTPProps } from './index';
-import styles from './styles';
-import { Icon } from '../Icon';
-import SystemTextInput from './SystemTextInput';
 import {
   ApplicationContext,
   ComponentContext,
   MiniAppContext,
 } from '../Context';
+import { Icon } from '../Icon';
+import { useScaleSize, Text } from '../Text';
+import { ErrorView } from './ErrorView';
+import { CaretProps, InputOTPProps } from './index';
+import styles from './styles';
+import SystemTextInput from './SystemTextInput';
+import { getBorderColor } from './utils';
+
+const BLINK_DURATION = 300;
+const CARET_HEIGHT = 12;
+const OTP_CLEAR_ICON_SIZE = 12;
+const MAX_LENGTH = 10;
+const COMPACT_LENGTH_THRESHOLD = 6;
 
 /** Blinking caret shown in the OTP slot being typed. */
 const OTPCaret: FC<CaretProps> = ({ index, length }) => {
-  const DURATION = 300;
   const { theme } = useContext(ApplicationContext);
   const opacity = useSharedValue(0);
 
   useEffect(() => {
     opacity.value = withRepeat(
       withSequence(
-        withTiming(1, { duration: DURATION, easing: Easing.linear }),
+        withTiming(1, { duration: BLINK_DURATION, easing: Easing.linear }),
         withDelay(
-          DURATION * 2,
-          withTiming(0, { duration: DURATION, easing: Easing.linear }),
+          BLINK_DURATION * 2,
+          withTiming(0, { duration: BLINK_DURATION, easing: Easing.linear }),
         ),
       ),
       -1,
@@ -72,7 +78,7 @@ const OTPCaret: FC<CaretProps> = ({ index, length }) => {
         style={[
           styles.otpCursor,
           {
-            height: useScaleSize(12),
+            height: useScaleSize(CARET_HEIGHT),
             backgroundColor: theme.colors.primary,
           },
           animatedStyle,
@@ -108,9 +114,8 @@ const InputOTP = forwardRef(
     }: InputOTPProps,
     ref,
   ) => {
-    const MAX_LENGTH = 10;
     const [value, setValue] = useState('');
-    const [focused, setFocused] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
     const inputRef = useRef<TextInput | null>(null);
     const { theme } = useContext(ApplicationContext);
     const context = useContext<any>(MiniAppContext);
@@ -127,25 +132,25 @@ const InputOTP = forwardRef(
     useImperativeHandle(ref, () => {
       return {
         onChangeText: (text: string) => {
-          _onChangeText(text);
+          handleChangeText(text);
         },
         focus: () => inputRef.current?.focus(),
         blur: () => inputRef.current?.blur(),
-        setText: (text: string) => _onChangeText(text),
+        setText: (text: string) => handleChangeText(text),
       };
     });
 
-    const onFocusInput = (e: TextInputFocusEvent) => {
-      setFocused(true);
+    const handleFocusInput = (e: TextInputFocusEvent) => {
+      setIsFocused(true);
       onFocus?.(e);
     };
 
-    const onBlurInput = (e: TextInputFocusEvent) => {
-      setFocused(false);
+    const handleBlurInput = (e: TextInputFocusEvent) => {
+      setIsFocused(false);
       onBlur?.(e);
     };
 
-    const _onChangeText = (text: string) => {
+    const handleChangeText = (text: string) => {
       if (text.length > MAX_LENGTH) return;
       const isNumeric = !isNaN(Number(text));
       if (dataType === 'number' && !isNumeric) return;
@@ -156,8 +161,8 @@ const InputOTP = forwardRef(
       onChangeText?.(text);
     };
 
-    const onClearText = () => {
-      _onChangeText('');
+    const handleClearText = () => {
+      handleChangeText('');
     };
 
     const fontScale = PixelRatio.getFontScale();
@@ -167,7 +172,7 @@ const InputOTP = forwardRef(
       const textColors = theme.colors.text;
       for (let i = 0; i < inputLength; i++) {
         let slot: React.ReactNode;
-        if (focused && value.length === i) {
+        if (isFocused && value.length === i) {
           slot = <OTPCaret index={i} length={inputLength} />;
         } else {
           slot = (
@@ -188,7 +193,7 @@ const InputOTP = forwardRef(
     const renderUnidentifiedInputs = () => {
       const splitValue = value.split('');
 
-      if (!focused && value.length === 0 && !!placeholder) {
+      if (!isFocused && value.length === 0 && !!placeholder) {
         return (
           <Text
             color={theme.colors.text.hint}
@@ -203,8 +208,9 @@ const InputOTP = forwardRef(
         <View style={Styles.row}>
           {splitValue.map((letter, index) => {
             const isLast = index === value.length - 1;
-            const isTyping = focused && value.length !== MAX_LENGTH;
-            const isCompact = fontScale > 1 && value.length > 6;
+            const isTyping = isFocused && value.length !== MAX_LENGTH;
+            const isLongCode = value.length > COMPACT_LENGTH_THRESHOLD;
+            const isCompact = fontScale > 1 && isLongCode;
             const marginRight = isCompact ? Spacing.M : Spacing.L;
             return (
               <Text
@@ -216,7 +222,7 @@ const InputOTP = forwardRef(
               </Text>
             );
           })}
-          {focused && value.length !== MAX_LENGTH && <OTPCaret />}
+          {isFocused && value.length !== MAX_LENGTH && <OTPCaret />}
         </View>
       );
     };
@@ -229,7 +235,7 @@ const InputOTP = forwardRef(
           style={[
             styles.otpInput,
             { backgroundColor: theme.colors.background.surface },
-            getBorderColor(theme, focused, errorMessage),
+            getBorderColor(theme, isFocused, errorMessage),
           ]}
         >
           {!!floatingValue && (
@@ -248,9 +254,15 @@ const InputOTP = forwardRef(
               </Text>
             </View>
           )}
-          {value.length > 0 && focused && (
-            <TouchableOpacity onPress={onClearText} style={styles.clearIcon}>
-              <Icon source={'24_navigation_close_circle_full'} size={12} />
+          {value.length > 0 && isFocused && (
+            <TouchableOpacity
+              onPress={handleClearText}
+              style={styles.clearIcon}
+            >
+              <Icon
+                source={'24_navigation_close_circle_full'}
+                size={OTP_CLEAR_ICON_SIZE}
+              />
             </TouchableOpacity>
           )}
           <View style={styles.otpInputsView}>
@@ -262,11 +274,11 @@ const InputOTP = forwardRef(
               ref={inputRef}
               value={value}
               textAlign={'center'}
-              onChangeText={_onChangeText}
+              onChangeText={handleChangeText}
               keyboardType={dataType === 'number' ? 'number-pad' : 'default'}
               allowFontScaling={false}
-              onFocus={onFocusInput}
-              onBlur={onBlurInput}
+              onFocus={handleFocusInput}
+              onBlur={handleBlurInput}
               style={styles.otpRealInput}
               selectionColor={theme.colors.primary}
               placeholderTextColor={theme.colors.text.hint}

package/Input/InputPhoneNumber.tsx

@@ -20,18 +20,23 @@ import {
 } from '../Context';
 import { Colors, Spacing, Styles } from '../Consts';
 import { Icon } from '../Icon';
+import { Image } from '../Image';
 import { useScaleSize, Text, exportFontFamily } from '../Text';
-import {
-  ErrorView,
-  getBorderColor,
-  getSizeStyle,
-  RenderTrailing,
-} from './common';
+import { Typography } from '../Text/types';
+import { CLEAR_ICON_SIZE } from './constants';
+import { ErrorView } from './ErrorView';
 import { InputPhoneNumberProps } from './index';
+import { RenderTrailing } from './RenderTrailing';
 import styles from './styles';
 import SystemTextInput from './SystemTextInput';
-import { Image } from '../Image';
-import { Typography } from '../Text/types';
+import { getBorderColor, getInputHeight, getSizeStyle } from './utils';
+
+const SMALL_FONT_SIZE = 14;
+const LARGE_FONT_SIZE = 18;
+const SMALL_DIVIDER_HEIGHT = 24;
+const LARGE_DIVIDER_HEIGHT = 32;
+const FOCUSED_BORDER_WIDTH = 1.5;
+const FLAG_SIZE = 24;
 
 /**
  * Vietnamese phone number input with a fixed flag and `+84` prefix, number pad
@@ -67,10 +72,10 @@ const InputPhoneNumber = forwardRef(
   ) => {
     const { theme } = useContext(ApplicationContext);
     const context = useContext<any>(MiniAppContext);
-    const scaleHeight = useScaleSize(size === 'small' ? 48 : 56);
-    const [focused, setFocused] = useState(false);
+    const scaleHeight = useScaleSize(getInputHeight(size));
+    const [isFocused, setIsFocused] = useState(false);
     const [internalText, setInternalText] = useState(defaultValue || '');
-    const haveValue = value !== undefined ? !!value : !!internalText;
+    const hasValue = value !== undefined ? !!value : !!internalText;
     const inputRef = useRef<TextInput | null>(null);
     const componentName = 'InputPhoneNumber';
 
@@ -81,29 +86,29 @@ const InputPhoneNumber = forwardRef(
       props.accessibilityLabel,
     );
 
-    const onClearText = () => {
+    const handleClearText = () => {
       inputRef?.current?.clear();
-      _onChangeText('');
+      handleChangeText('');
     };
 
-    const _onChangeText = (text: string) => {
+    const handleChangeText = (text: string) => {
       if (value === undefined) {
         setInternalText(text);
       }
       onChangeText?.(text);
     };
 
-    const _onFocus = (e: TextInputFocusEvent) => {
-      setFocused(true);
+    const handleFocus = (e: TextInputFocusEvent) => {
+      setIsFocused(true);
       onFocus?.(e);
     };
 
-    const _onBlur = (e: TextInputFocusEvent) => {
-      setFocused(false);
+    const handleBlur = (e: TextInputFocusEvent) => {
+      setIsFocused(false);
       onBlur?.(e);
     };
 
-    const _setText = (text: string) => {
+    const handleSetText = (text: string) => {
       if (__DEV__ && value !== undefined) {
         console.error(
           `${componentName}: calling ref.setText() on a controlled input (\`value\` is provided) is an anti-pattern. ` +
@@ -112,48 +117,48 @@ const InputPhoneNumber = forwardRef(
         );
       }
       inputRef?.current?.setNativeProps({ text });
-      _onChangeText(text);
+      handleChangeText(text);
     };
 
     useImperativeHandle(ref, () => {
       return {
-        clear: onClearText,
+        clear: handleClearText,
         focus: () => inputRef.current?.focus(),
         blur: () => inputRef.current?.blur(),
-        setText: _setText,
+        setText: handleSetText,
       };
     });
 
     let inputTextStyles = {};
-    let dividerHeight = 24;
-    let size14 = useScaleSize(14);
-    let size18 = useScaleSize(18);
+    let dividerHeight = SMALL_DIVIDER_HEIGHT;
+    const smallFontSize = useScaleSize(SMALL_FONT_SIZE);
+    const largeFontSize = useScaleSize(LARGE_FONT_SIZE);
     const semiboldFontFamily = exportFontFamily('semibold');
     const boldFontFamily = exportFontFamily('bold');
     let typography: Typography;
     if (size === 'small') {
       inputTextStyles = {
-        fontSize: size14,
+        fontSize: smallFontSize,
         fontFamily: semiboldFontFamily,
       };
-      dividerHeight = 24;
+      dividerHeight = SMALL_DIVIDER_HEIGHT;
       typography = 'header_s_semibold';
     } else {
       inputTextStyles = {
-        fontSize: size18,
+        fontSize: largeFontSize,
         fontFamily: boldFontFamily,
       };
-      dividerHeight = 32;
+      dividerHeight = LARGE_DIVIDER_HEIGHT;
       typography = 'header_m_bold';
     }
 
     const renderInputView = () => {
       const disabledColor = theme.colors.text.disable;
-      const secure = secureTextEntry;
+      const isSecure = secureTextEntry;
       let textColor = theme.colors.text.default;
       let placeholderColor = theme.colors.text.hint;
       let iconTintColor = trailingColor ?? theme.colors.text.default;
-      const borderWidth = focused ? 1.5 : 1;
+      const borderWidth = isFocused ? FOCUSED_BORDER_WIDTH : 1;
       let secureTextStyle = styles.secureTextLarge;
 
       if (size === 'small') {
@@ -173,7 +178,7 @@ const InputPhoneNumber = forwardRef(
             { backgroundColor: theme.colors.background.surface },
             getSizeStyle(size, undefined, scaleHeight),
             { borderWidth },
-            getBorderColor(theme, focused, errorMessage, disabled),
+            getBorderColor(theme, isFocused, errorMessage, disabled),
           ]}
         >
           <View style={styles.inputView}>
@@ -204,7 +209,7 @@ const InputPhoneNumber = forwardRef(
               {...props}
               accessibilityLabel={`${componentId}`}
               editable={editable && !disabled}
-              secureTextEntry={secure}
+              secureTextEntry={isSecure}
               textAlignVertical="center"
               ref={inputRef}
               accessibilityState={{
@@ -217,15 +222,15 @@ const InputPhoneNumber = forwardRef(
                   color: textColor,
                 },
                 inputTextStyles,
-                secure && haveValue && secureTextStyle,
+                isSecure && hasValue && secureTextStyle,
               ]}
               defaultValue={defaultValue}
               allowFontScaling={false}
               textBreakStrategy="highQuality"
               value={value}
-              onChangeText={_onChangeText}
-              onFocus={_onFocus}
-              onBlur={_onBlur}
+              onChangeText={handleChangeText}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
               placeholder={placeholder}
               selectionColor={theme.colors.primary}
               placeholderTextColor={placeholderColor}
@@ -233,16 +238,16 @@ const InputPhoneNumber = forwardRef(
             />
           </View>
           <View style={styles.iconView}>
-            {showClearIcon && focused && haveValue && (
+            {showClearIcon && isFocused && hasValue && (
               <TouchableOpacity
                 accessibilityLabel={`${componentId}|clear-icon-touch`}
                 accessible={false}
                 style={styles.iconWrapper}
-                onPress={onClearText}
+                onPress={handleClearText}
               >
                 <Icon
                   source="24_navigation_close_circle_full"
-                  size={16}
+                  size={CLEAR_ICON_SIZE}
                   color={theme.colors.text.hint}
                   accessibilityLabel={`${componentId}|clear-icon`}
                 />
@@ -299,9 +304,9 @@ const InputPhoneNumber = forwardRef(
 
 const innerStyle = StyleSheet.create({
   iconFlag: {
-    width: 24,
-    height: 24,
-    marginHorizontal: 2,
+    width: FLAG_SIZE,
+    height: FLAG_SIZE,
+    marginHorizontal: Spacing.XXS,
   },
 });