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

package/Input/Input.tsx

@@ -13,25 +13,22 @@ import {
 } from 'react-native';
 import { useComponentId } from '../Application';
 import { Icon } from '../Icon';
-import {
-  ApplicationContext,
-  ComponentContext,
-  MiniAppContext,
-} from '../Context';
 import { exportFontFamily, useScaleSize } from '../Text';
-import { CLEAR_ICON_SIZE, INPUT_FONT_SIZE } from './constants';
-import { ErrorView } from './ErrorView';
-import { FloatingView } from './FloatingView';
+import {
+  ErrorView,
+  FloatingView,
+  getBorderColor,
+  getSizeStyle,
+  RenderTrailing,
+} from './common';
 import { InputProps } from './index';
-import { RenderTrailing } from './RenderTrailing';
 import styles from './styles';
 import SystemTextInput from './SystemTextInput';
 import {
-  getBorderColor,
-  getInputHeight,
-  getLeadingIconSize,
-  getSizeStyle,
-} from './utils';
+  ApplicationContext,
+  ComponentContext,
+  MiniAppContext,
+} from '../Context';
 
 /**
  * Text input with floating label, leading/trailing/clear icons and an error or
@@ -76,11 +73,11 @@ const Input = forwardRef(
   ) => {
     const { theme } = useContext(ApplicationContext);
     const context = useContext<any>(MiniAppContext);
-    const scaledFontSize = useScaleSize(INPUT_FONT_SIZE);
-    const scaleHeight = useScaleSize(getInputHeight(size));
-    const [isFocused, setIsFocused] = useState(false);
+    const scaledFontSize = useScaleSize(14);
+    const scaleHeight = useScaleSize(size === 'small' ? 48 : 56);
+    const [focused, setFocused] = useState(false);
     const [internalText, setInternalText] = useState(defaultValue || '');
-    const hasValue = value !== undefined ? !!value : !!internalText;
+    const haveValue = value !== undefined ? !!value : !!internalText;
     const inputRef = useRef<TextInput | null>(null);
     const componentName = 'Input';
 
@@ -91,30 +88,30 @@ const Input = forwardRef(
       props.accessibilityLabel,
     );
 
-    const handleClearText = () => {
+    const onClearText = () => {
       inputRef?.current?.clear();
       inputRef.current?.setNativeProps({ text: '' });
-      handleChangeText('');
+      _onChangeText('');
     };
 
-    const handleChangeText = (text: string) => {
+    const _onChangeText = (text: string) => {
       if (value === undefined) {
         setInternalText(text);
       }
       onChangeText?.(text);
     };
 
-    const handleFocus = (e: TextInputFocusEvent) => {
-      setIsFocused(true);
+    const _onFocus = (e: TextInputFocusEvent) => {
+      setFocused(true);
       onFocus?.(e);
     };
 
-    const handleBlur = (e: TextInputFocusEvent) => {
-      setIsFocused(false);
+    const _onBlur = (e: TextInputFocusEvent) => {
+      setFocused(false);
       onBlur?.(e);
     };
 
-    const handleSetText = (text: string) => {
+    const _setText = (text: string) => {
       if (__DEV__ && value !== undefined) {
         console.error(
           `${componentName}: calling ref.setText() on a controlled input (\`value\` is provided) is an anti-pattern. ` +
@@ -123,21 +120,21 @@ const Input = forwardRef(
         );
       }
       inputRef?.current?.setNativeProps({ text });
-      handleChangeText(text);
+      _onChangeText(text);
     };
 
     useImperativeHandle(ref, () => {
       return {
-        clear: handleClearText,
+        clear: onClearText,
         focus: () => inputRef.current?.focus(),
         blur: () => inputRef.current?.blur(),
-        setText: handleSetText,
+        setText: _setText,
       };
     });
 
     const renderInputView = () => {
       const disabledColor = theme.colors.text.disable;
-      const isSecure = secureTextEntry;
+      const secure = secureTextEntry;
       let textColor = theme.colors.text.default;
       let placeholderColor = theme.colors.text.hint;
       let iconTintColor = trailingColor;
@@ -159,7 +156,7 @@ const Input = forwardRef(
             styles.inputWrapper,
             { backgroundColor: theme.colors.background.surface },
             getSizeStyle(size, undefined, scaleHeight),
-            getBorderColor(theme, isFocused, errorMessage, disabled),
+            getBorderColor(theme, focused, errorMessage, disabled),
           ]}
         >
           <FloatingView
@@ -181,7 +178,7 @@ const Input = forwardRef(
                   <Icon
                     color={leadingIconColor}
                     source={leadingIcon}
-                    size={getLeadingIconSize(size)}
+                    size={size === 'small' ? 24 : 32}
                     accessibilityLabel={`${componentId}|leading-icon`}
                   />
                 </TouchableOpacity>
@@ -191,7 +188,7 @@ const Input = forwardRef(
               {...props}
               accessibilityLabel={`${componentId}`}
               editable={editable && !disabled}
-              secureTextEntry={isSecure}
+              secureTextEntry={secure}
               textAlignVertical="center"
               ref={inputRef}
               accessibilityState={{
@@ -205,15 +202,15 @@ const Input = forwardRef(
                   color: textColor,
                   fontFamily: exportFontFamily(fontWeight ?? 'regular'),
                 },
-                isSecure && hasValue && secureTextStyle,
+                secure && haveValue && secureTextStyle,
               ]}
               defaultValue={defaultValue}
               allowFontScaling={false}
               textBreakStrategy="highQuality"
               value={value}
-              onChangeText={handleChangeText}
-              onFocus={handleFocus}
-              onBlur={handleBlur}
+              onChangeText={_onChangeText}
+              onFocus={_onFocus}
+              onBlur={_onBlur}
               placeholder={placeholder}
               selectionColor={theme.colors.primary}
               placeholderTextColor={placeholderColor}
@@ -221,16 +218,16 @@ const Input = forwardRef(
             />
           </View>
           <View style={styles.iconView}>
-            {showClearIcon && isFocused && hasValue && (
+            {showClearIcon && focused && haveValue && (
               <TouchableOpacity
                 accessibilityLabel={`${componentId}|clear-icon-touch`}
                 accessible={false}
                 style={styles.iconWrapper}
-                onPress={handleClearText}
+                onPress={onClearText}
               >
                 <Icon
                   source="24_navigation_close_circle_full"
-                  size={CLEAR_ICON_SIZE}
+                  size={16}
                   color={theme.colors.text.hint}
                   accessibilityLabel={`${componentId}|clear-icon`}
                 />

package/Input/InputDropDown.tsx

@@ -6,20 +6,17 @@ import {
   ComponentContext,
   MiniAppContext,
 } from '../Context';
-import { Spacing } from '../Consts';
 import { Icon } from '../Icon';
-import { Text, useScaleSize } from '../Text';
-import { PRESSED_OPACITY } from './constants';
-import { ErrorView } from './ErrorView';
-import { FloatingView } from './FloatingView';
-import { InputDropDownProps } from './index';
-import styles from './styles';
 import {
+  ErrorView,
+  FloatingView,
   getBorderColor,
-  getInputHeight,
-  getLeadingIconSize,
   getSizeStyle,
-} from './utils';
+} from './common';
+import { InputDropDownProps } from './index';
+import { Text, useScaleSize } from '../Text';
+import styles from './styles';
+import { Spacing } from '../Consts';
 
 /**
  * Pressable field styled like an input with a chevron; shows `value` or
@@ -47,7 +44,7 @@ const InputDropDown = ({
 }: InputDropDownProps) => {
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
-  const scaleHeight = useScaleSize(getInputHeight(size));
+  const scaleHeight = useScaleSize(size === 'small' ? 48 : 56);
   const componentName = 'InputDropDown';
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
@@ -102,7 +99,7 @@ const InputDropDown = ({
               <Icon
                 color={leadingIconColor}
                 source={leadingIcon}
-                size={getLeadingIconSize(size)}
+                size={size === 'small' ? 24 : 32}
                 accessibilityLabel={`${componentId}|leading-icon`}
               />
             </View>
@@ -139,7 +136,7 @@ const InputDropDown = ({
         {...props}
         accessibilityLabel={`${componentId}|touch`}
         accessibilityState={{ disabled: disabled as boolean }}
-        activeOpacity={PRESSED_OPACITY}
+        activeOpacity={0.6}
         style={[
           style,
           styles.wrapper,

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 './ErrorView';
+import { ErrorView } from './common';
 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 [isFocused, setIsFocused] = useState(false);
+    const [focused, setFocused] = useState(false);
     const [displayValue, setDisplayValue] = useState('');
     const [numericValue, setNumericValue] = useState('');
     const [lastDisplayValue, setLastDisplayValue] = useState('');
@@ -126,7 +126,7 @@ const InputMoney = forwardRef(
       }
     };
 
-    const handleClearText = () => {
+    const onClearText = () => {
       inputRef?.current?.clear();
       inputRef.current?.setNativeProps({ text: '' });
       setDisplayValue('');
@@ -134,7 +134,7 @@ const InputMoney = forwardRef(
       onChangeText?.('');
     };
 
-    const handleChangeText = (text: string) => {
+    const _onChangeText = (text: string) => {
       if (!text) {
         lastRawText.current = '';
         setDisplayValue('');
@@ -166,17 +166,17 @@ const InputMoney = forwardRef(
       inputRef.current?.setSelection(displayValue.length, displayValue.length);
     };
 
-    const handleFocus = (e: TextInputFocusEvent) => {
-      setIsFocused(true);
+    const _onFocus = (e: TextInputFocusEvent) => {
+      setFocused(true);
       onFocus?.(e);
     };
 
-    const handleBlur = (e: TextInputFocusEvent) => {
-      setIsFocused(false);
+    const _onBlur = (e: TextInputFocusEvent) => {
+      setFocused(false);
       onBlur?.(e);
     };
 
-    const handleSetText = (text: string) => {
+    const _setText = (text: string) => {
       caretDigitsAfter.current = undefined;
       if (!text) {
         setDisplayValue('');
@@ -190,10 +190,10 @@ const InputMoney = forwardRef(
 
     useImperativeHandle(ref, () => {
       return {
-        clear: handleClearText,
+        clear: onClearText,
         focus: () => inputRef.current?.focus(),
         blur: () => inputRef.current?.blur(),
-        setText: handleSetText,
+        setText: _setText,
       };
     });
 
@@ -240,16 +240,16 @@ const InputMoney = forwardRef(
             showClearIcon={showClearIcon}
             placeholder={placeholder}
             currency={currency}
-            focused={isFocused}
+            focused={focused}
             componentId={componentId}
             displayValue={displayValue}
             caretSelection={caretSelection}
             inputRef={inputRef}
             focusAtEnd={focusAtEnd}
-            onClearText={handleClearText}
-            onChangeText={handleChangeText}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
+            onClearText={onClearText}
+            onChangeText={_onChangeText}
+            onFocus={_onFocus}
+            onBlur={_onBlur}
             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 { CLEAR_ICON_SIZE } from './constants';
-import { FloatingView } from './FloatingView';
+import {
+  FloatingView,
+  getBorderColor,
+  getSizeStyle,
+  RenderTrailing,
+} from './common';
 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(getInputHeight(size));
-  const scaledFontSize = useScaleSize(MONEY_FONT_SIZE);
+  const scaleHeight = useScaleSize(size === 'small' ? 48 : 56);
+  const scaledFontSize = useScaleSize(20);
   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 hasCurrencyInPlaceholder = placeholder.endsWith(currency);
-  const shouldShowCurrency = !!displayValue || hasCurrencyInPlaceholder;
+  const placeholderHasCurrency = placeholder.endsWith(currency);
+  const shouldShowCurrency = !!displayValue || placeholderHasCurrency;
   const shouldShowClearIcon = !!(showClearIcon && focused && displayValue);
   let inputPlaceholder = placeholder;
-  if (hasCurrencyInPlaceholder) {
+  if (placeholderHasCurrency) {
     inputPlaceholder = placeholder.slice(0, -currency.length);
   }
   return (
@@ -175,7 +175,7 @@ export const InputMoneyView = ({
           >
             <Icon
               source="24_navigation_close_circle_full"
-              size={CLEAR_ICON_SIZE}
+              size={16}
               color={theme.colors.text.hint}
               accessibilityLabel={`${componentId}|clear-icon`}
             />

package/Input/InputOTP.tsx

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