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

package/Input/FloatingView.tsx

@@ -0,0 +1,101 @@
+import React, { type FC, useContext } from 'react';
+import {
+  type GestureResponderEvent,
+  TouchableOpacity,
+  View,
+  type ViewStyle,
+} from 'react-native';
+import { ApplicationContext } from '../Context';
+import { Icon } from '../Icon';
+import { Text, useScaleSize } from '../Text';
+import { PRESSED_OPACITY } from './constants';
+import styles from './styles';
+
+const LABEL_OFFSET = 10;
+const ICON_SIZE = 16;
+
+type FloatingViewProps = {
+  floatingValue?: string;
+  floatingIconColor?: string;
+  componentId?: string;
+  disabled?: boolean;
+  floatingIcon?: string;
+  required?: boolean;
+  style?: ViewStyle;
+  onPress?: (e: GestureResponderEvent) => void;
+};
+
+/**
+ * Floating label on the input's top border with a required `*` and an
+ * optional pressable icon; renders nothing without `floatingValue`.
+ */
+const FloatingView: FC<FloatingViewProps> = ({
+  floatingValue,
+  floatingIconColor,
+  disabled,
+  floatingIcon,
+  required,
+  style,
+  onPress,
+  componentId,
+}) => {
+  const { theme } = useContext(ApplicationContext);
+  const scaledTop = useScaleSize(LABEL_OFFSET);
+  if (!floatingValue) {
+    return null;
+  }
+
+  let floatingTextColor = theme.colors.text.hint;
+  let floatingIconTintColor = floatingIconColor;
+  if (disabled) {
+    floatingTextColor = theme.colors.text.disable;
+    floatingIconTintColor = theme.colors.text.disable;
+  }
+
+  return (
+    <View
+      style={[
+        styles.floatingView,
+        styles.floatingViewLayer,
+        {
+          backgroundColor: theme.colors.background.surface,
+          top: -scaledTop,
+        },
+        style,
+      ]}
+    >
+      <Text
+        color={floatingTextColor}
+        typography={'label_s_medium'}
+        accessibilityLabel={`${componentId}|floating-text`}
+      >
+        {floatingValue}
+        {required && (
+          <Text
+            typography={'label_s_medium'}
+            color={theme.colors.error.primary}
+          >
+            *
+          </Text>
+        )}
+      </Text>
+      {!!floatingIcon && (
+        <TouchableOpacity
+          activeOpacity={onPress ? PRESSED_OPACITY : 1}
+          onPress={onPress}
+          accessibilityLabel={`${componentId}|floating-icon-touch`}
+        >
+          <Icon
+            color={floatingIconTintColor}
+            source={floatingIcon}
+            size={ICON_SIZE}
+            style={styles.floatingIcon}
+            accessibilityLabel={`${componentId}|floating-icon`}
+          />
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+
+export { FloatingView };

package/Input/Input.tsx

@@ -13,22 +13,25 @@ import {
 } from 'react-native';
 import { useComponentId } from '../Application';
 import { Icon } from '../Icon';
-import { exportFontFamily, useScaleSize } from '../Text';
-import {
-  ErrorView,
-  FloatingView,
-  getBorderColor,
-  getSizeStyle,
-  RenderTrailing,
-} from './common';
-import { InputProps } from './index';
-import styles from './styles';
-import SystemTextInput from './SystemTextInput';
 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 { InputProps } from './index';
+import { RenderTrailing } from './RenderTrailing';
+import styles from './styles';
+import SystemTextInput from './SystemTextInput';
+import {
+  getBorderColor,
+  getInputHeight,
+  getLeadingIconSize,
+  getSizeStyle,
+} from './utils';
 
 /**
  * Text input with floating label, leading/trailing/clear icons and an error or
@@ -73,11 +76,11 @@ const Input = forwardRef(
   ) => {
     const { theme } = useContext(ApplicationContext);
     const context = useContext<any>(MiniAppContext);
-    const scaledFontSize = useScaleSize(14);
-    const scaleHeight = useScaleSize(size === 'small' ? 48 : 56);
-    const [focused, setFocused] = useState(false);
+    const scaledFontSize = useScaleSize(INPUT_FONT_SIZE);
+    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 = 'Input';
 
@@ -88,30 +91,30 @@ const Input = forwardRef(
       props.accessibilityLabel,
     );
 
-    const onClearText = () => {
+    const handleClearText = () => {
       inputRef?.current?.clear();
       inputRef.current?.setNativeProps({ text: '' });
-      _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. ` +
@@ -120,21 +123,21 @@ const Input = 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,
       };
     });
 
     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;
@@ -156,7 +159,7 @@ const Input = forwardRef(
             styles.inputWrapper,
             { backgroundColor: theme.colors.background.surface },
             getSizeStyle(size, undefined, scaleHeight),
-            getBorderColor(theme, focused, errorMessage, disabled),
+            getBorderColor(theme, isFocused, errorMessage, disabled),
           ]}
         >
           <FloatingView
@@ -178,7 +181,7 @@ const Input = forwardRef(
                   <Icon
                     color={leadingIconColor}
                     source={leadingIcon}
-                    size={size === 'small' ? 24 : 32}
+                    size={getLeadingIconSize(size)}
                     accessibilityLabel={`${componentId}|leading-icon`}
                   />
                 </TouchableOpacity>
@@ -188,7 +191,7 @@ const Input = forwardRef(
               {...props}
               accessibilityLabel={`${componentId}`}
               editable={editable && !disabled}
-              secureTextEntry={secure}
+              secureTextEntry={isSecure}
               textAlignVertical="center"
               ref={inputRef}
               accessibilityState={{
@@ -202,15 +205,15 @@ const Input = forwardRef(
                   color: textColor,
                   fontFamily: exportFontFamily(fontWeight ?? 'regular'),
                 },
-                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}
@@ -218,16 +221,16 @@ const Input = 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`}
                 />

package/Input/InputDropDown.tsx

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