@momo-kits/foundation 0.150.2-phuc.13 → 0.150.2-scaleSize.35

package/Input/InputDropDown.tsx

@@ -1,16 +1,18 @@
-import React, {useContext} from 'react';
-import {TouchableOpacity, View} from 'react-native';
+import React, { useContext } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { useComponentId } from '../Application';
+import { ApplicationContext, ComponentContext } from '../Context';
+import { Icon } from '../Icon';
 import {
-  ApplicationContext,
-  ComponentContext,
-  useComponentId,
-} from '../Application';
-import {Icon} from '../Icon';
-import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
-import {InputDropDownProps} from './index';
-import {Text} from '../Text';
+  ErrorView,
+  FloatingView,
+  getBorderColor,
+  getSizeStyle,
+} from './common';
+import { InputDropDownProps } from './index';
+import { Text } from '../Text';
 import styles from './styles';
-import {Spacing} from '../Consts';
+import { Spacing } from '../Consts';
 
 const InputDropDown = ({
   value,
@@ -32,12 +34,12 @@ const InputDropDown = ({
   multiline,
   ...props
 }: InputDropDownProps) => {
-  const {theme} = useContext(ApplicationContext);
+  const { theme } = useContext(ApplicationContext);
   const componentName = 'InputDropDown';
 
-  const {componentId} = useComponentId(
+  const { componentId } = useComponentId(
     `${componentName}/${placeholder}`,
-    props.accessibilityLabel
+    props.accessibilityLabel,
   );
 
   /**
@@ -57,10 +59,11 @@ const InputDropDown = ({
       <View
         style={[
           styles.inputDropDownWrapper,
-          {backgroundColor: theme.colors.background.surface},
+          { backgroundColor: theme.colors.background.surface },
           getSizeStyle(size, multiline),
           getBorderColor(theme, false, errorMessage, disabled as boolean),
-        ]}>
+        ]}
+      >
         <FloatingView
           floatingValue={floatingValue}
           floatingIconColor={floatingIconColor}
@@ -79,7 +82,8 @@ const InputDropDown = ({
                   marginTop: Spacing.M,
                   marginRight: Spacing.S,
                 },
-              ]}>
+              ]}
+            >
               <Icon
                 color={leadingIconColor}
                 source={leadingIcon}
@@ -93,8 +97,9 @@ const InputDropDown = ({
               numberOfLines={multiline ? undefined : 1}
               typography={'body_default_regular'}
               color={value ? textColor : placeholderColor}
-              accessibilityState={{disabled: disabled as boolean}}
-              accessibilityLabel={`${componentId}`}>
+              accessibilityState={{ disabled: disabled as boolean }}
+              accessibilityLabel={`${componentId}`}
+            >
               {value || placeholder}
             </Text>
           </View>
@@ -106,7 +111,8 @@ const InputDropDown = ({
               alignItems: multiline ? 'flex-start' : 'center',
               paddingTop: multiline ? Spacing.M : 0,
             },
-          ]}>
+          ]}
+        >
           <Icon source={'arrow_chevron_down_small'} />
         </View>
       </View>
@@ -120,13 +126,15 @@ const InputDropDown = ({
         componentId,
         params,
         state: 'enabled',
-      }}>
+      }}
+    >
       <TouchableOpacity
         {...props}
         accessibilityLabel={`${componentId}|touch`}
-        accessibilityState={{disabled: disabled as boolean}}
+        accessibilityState={{ disabled: disabled as boolean }}
         activeOpacity={0.6}
-        style={[style, styles.wrapper]}>
+        style={[style, styles.wrapper]}
+      >
         {renderInputView()}
         <ErrorView
           errorMessage={errorMessage}

package/Input/InputMoney.tsx

@@ -14,11 +14,8 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {
-  ApplicationContext,
-  ComponentContext,
-  useComponentId,
-} from '../Application';
+import { useComponentId } from '../Application';
+import { ApplicationContext, ComponentContext } from '../Context';
 import { Icon } from '../Icon';
 import {
   ErrorView,
@@ -122,6 +119,7 @@ const InputMoney = forwardRef(
 
     const onClearText = () => {
       inputRef?.current?.clear();
+      inputRef.current?.setNativeProps({ text: '' });
       setDisplayValue('');
       setNumericValue('');
       onChangeText?.('');

package/Input/InputOTP.tsx

@@ -14,18 +14,16 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {
-  ApplicationContext,
-  ComponentContext,
-  useComponentId,
-} from '../Application';
+import { useComponentId } from '../Application';
 import { Spacing, Styles } from '../Consts';
-import { scaleSize, Text } from '../Text';
+import { 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 } from '../Context';
+import { useScaleSize } from '../Text/utils.ts';
 
 const OTPCaret: FC<CaretProps> = ({ index, length }) => {
   const DURATION = 300;
@@ -56,7 +54,7 @@ const OTPCaret: FC<CaretProps> = ({ index, length }) => {
     <View style={[Styles.rowCenter, spacingStyle]}>
       <Animated.View
         style={{
-          height: scaleSize(12),
+          height: useScaleSize(12),
           width: 1,
           backgroundColor: theme.colors.primary,
           opacity,
@@ -202,6 +200,7 @@ const InputOTP = forwardRef(
     const renderInputView = () => {
       return (
         <TouchableOpacity
+          activeOpacity={1}
           onPress={() => inputRef.current?.focus()}
           style={[
             styles.otpInput,
@@ -238,6 +237,7 @@ const InputOTP = forwardRef(
               {...props}
               ref={inputRef}
               value={value}
+              textAlign={'center'}
               onChangeText={_onChangeText}
               keyboardType={dataType === 'number' ? 'number-pad' : 'default'}
               allowFontScaling={false}

package/Input/InputPhoneNumber.tsx

@@ -0,0 +1,271 @@
+import React, {
+  forwardRef,
+  useContext,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import {
+  NativeSyntheticEvent,
+  StyleSheet,
+  TextInput,
+  TextInputFocusEventData,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { useComponentId } from '../Application';
+import { ApplicationContext, ComponentContext } from '../Context';
+import { Colors, Spacing, Styles } from '../Consts';
+import { Icon } from '../Icon';
+import { scaleSize, Text } from '../Text';
+import {
+  ErrorView,
+  getBorderColor,
+  getSizeStyle,
+  RenderTrailing,
+} from './common';
+import { InputPhoneNumberProps } from './index';
+import styles from './styles';
+import SystemTextInput from './SystemTextInput';
+import { checkTyping } from './utils';
+import { Image } from '../Image';
+import { Typography } from '../Text/types';
+
+/**
+ * Input default component
+ */
+const InputPhoneNumber = forwardRef(
+  (
+    {
+      value,
+      onChangeText,
+      size = 'small',
+      placeholder = '0123456789',
+      onBlur,
+      onFocus,
+      errorMessage,
+      trailing,
+      trailingColor,
+      onPressTrailing,
+      disabled = false,
+      errorSpacing,
+      loading = false,
+      secureTextEntry,
+      keyboardType,
+      style,
+      params,
+      hintText,
+      editable = true,
+      showClearIcon = true,
+      ...props
+    }: InputPhoneNumberProps,
+    ref,
+  ) => {
+    const { theme } = useContext(ApplicationContext);
+    const [focused, setFocused] = useState(false);
+    const [haveValue, setHaveValue] = useState(!!value || !!props.defaultValue);
+    const inputRef = useRef<TextInput | null>(null);
+    const componentName = 'InputPhoneNumber';
+
+    const { componentId } = useComponentId(
+      `${componentName}/${placeholder}`,
+      props.accessibilityLabel,
+    );
+
+    const onClearText = () => {
+      inputRef?.current?.clear();
+      _onChangeText('');
+    };
+
+    const _onChangeText = (text: string) => {
+      checkTyping(text, haveValue, setHaveValue);
+      onChangeText?.(text);
+    };
+
+    const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      setFocused(true);
+      onFocus?.(e);
+    };
+
+    const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      setFocused(false);
+      onBlur?.(e);
+    };
+
+    const _setText = (text: string) => {
+      inputRef?.current?.setNativeProps({ text });
+      _onChangeText(text);
+    };
+
+    useImperativeHandle(ref, () => {
+      return {
+        clear: onClearText,
+        focus: () => inputRef.current?.focus(),
+        blur: () => inputRef.current?.blur(),
+        setText: _setText,
+      };
+    });
+
+    let inputTextStyles = {};
+    let dividerHeight = 24;
+    let typography: Typography;
+    if (size === 'small') {
+      inputTextStyles = { fontSize: scaleSize(14), fontWeight: '600' };
+      dividerHeight = 24;
+      typography = 'header_s_semibold';
+    } else {
+      inputTextStyles = { fontSize: scaleSize(18), fontWeight: '700' };
+      dividerHeight = 32;
+      typography = 'header_m_bold';
+    }
+
+    /**
+     * Render input view
+     */
+    const renderInputView = () => {
+      const disabledColor = theme.colors.text.disable;
+      const secure = 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;
+
+      if (disabled) {
+        textColor = disabledColor;
+        placeholderColor = disabledColor;
+        iconTintColor = disabledColor;
+      }
+
+      return (
+        <View
+          style={[
+            styles.inputWrapper,
+            { backgroundColor: theme.colors.background.surface },
+            getSizeStyle(size),
+            { borderWidth },
+            getBorderColor(theme, focused, errorMessage, disabled),
+          ]}
+        >
+          <View style={styles.inputView}>
+            <View style={[styles.leadingIconContainer, Styles.row]}>
+              <Image
+                source={{
+                  uri: 'https://static.momocdn.net/app/img/icon/ic-qrcode-package/ic_vn_flag.png',
+                }}
+                style={innerStyle.iconFlag}
+                resizeMode="contain"
+                accessibilityLabel={`${componentId}|leading-icon`}
+              />
+              <View style={{ width: Spacing.XS }} />
+              <Text typography={typography} color={textColor}>
+                {'+84'}
+              </Text>
+              <View
+                style={[
+                  styles.phoneNumberDivider,
+                  {
+                    height: dividerHeight,
+                    backgroundColor: Colors.black_04,
+                  },
+                ]}
+              />
+            </View>
+            <SystemTextInput
+              {...props}
+              accessibilityLabel={`${componentId}`}
+              editable={editable && !disabled}
+              secureTextEntry={secure}
+              textAlignVertical="center"
+              ref={inputRef}
+              accessibilityState={{
+                disabled,
+                ...props.accessibilityState,
+              }}
+              style={[
+                styles.input,
+                {
+                  color: textColor,
+                },
+                inputTextStyles,
+                secure && haveValue && { fontSize: size === 'small' ? 18 : 22 },
+              ]}
+              allowFontScaling={false}
+              textBreakStrategy="highQuality"
+              value={value}
+              onChangeText={_onChangeText}
+              onFocus={_onFocus}
+              onBlur={_onBlur}
+              placeholder={placeholder}
+              selectionColor={theme.colors.primary}
+              placeholderTextColor={placeholderColor}
+              keyboardType={keyboardType ?? 'number-pad'}
+            />
+          </View>
+          <View style={styles.iconView}>
+            {showClearIcon && focused && haveValue && (
+              <TouchableOpacity
+                accessibilityLabel={`${componentId}|clear-icon-touch`}
+                accessible={false}
+                style={styles.iconWrapper}
+                onPress={onClearText}
+              >
+                <Icon
+                  source="24_navigation_close_circle_full"
+                  size={16}
+                  color={theme.colors.text.hint}
+                  accessibilityLabel={`${componentId}|clear-icon`}
+                />
+              </TouchableOpacity>
+            )}
+            <RenderTrailing
+              color={iconTintColor}
+              icon={trailing}
+              onPressIcon={onPressTrailing}
+              loading={loading}
+              componentId={componentId}
+            />
+          </View>
+        </View>
+      );
+    };
+
+    let inputState = 'active';
+    if (value && value?.length > 0) {
+      inputState = 'filled';
+    }
+    if (errorMessage && errorMessage?.length > 0) {
+      inputState = 'error';
+    }
+
+    return (
+      <ComponentContext.Provider
+        value={{
+          componentName,
+          componentId,
+          params,
+          state: inputState,
+        }}
+      >
+        <View style={[style, styles.wrapper]}>
+          {renderInputView()}
+          <ErrorView
+            errorMessage={errorMessage}
+            errorSpacing={errorSpacing}
+            hintText={hintText}
+            componentId={componentId}
+          />
+        </View>
+      </ComponentContext.Provider>
+    );
+  },
+);
+
+const innerStyle = StyleSheet.create({
+  iconFlag: {
+    width: 24,
+    height: 24,
+    marginHorizontal: 2,
+  },
+});
+
+export default InputPhoneNumber;

package/Input/InputSearch.tsx

@@ -16,11 +16,8 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {
-  ApplicationContext,
-  ComponentContext,
-  useComponentId,
-} from '../Application';
+import { useComponentId } from '../Application';
+import { ApplicationContext, ComponentContext } from '../Context';
 import { Icon } from '../Icon';
 import { Text } from '../Text';
 import { InputRef, InputSearchProps } from './index';
@@ -166,6 +163,7 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
 
   const onClearText = () => {
     inputRef?.current?.clear();
+    inputRef.current?.setNativeProps({ text: '' });
     _onChangeText('');
   };
 

package/Input/InputTextArea.tsx

@@ -13,7 +13,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import { ApplicationContext } from '../Application';
+import { ApplicationContext } from '../Context';
 import { Icon } from '../Icon';
 import { Text } from '../Text';
 import {
@@ -62,6 +62,7 @@ const InputTextArea = forwardRef(
 
     const onClearText = () => {
       inputRef?.current?.clear();
+      inputRef.current?.setNativeProps({ text: '' });
       _onChangeText('');
     };
 

package/Input/TextTyping.tsx

@@ -3,6 +3,7 @@ import React, { FC, memo, useEffect, useRef } from 'react';
 import { Platform, StyleSheet, TextInput, TextStyle } from 'react-native';
 import { Colors } from '../Consts';
 import { scaleSize } from '../Text';
+import { useScaleSize } from '../Text/utils.ts';
 
 export interface TextTypingProps {
   data: string[];
@@ -90,7 +91,13 @@ const TextTyping: FC<TextTypingProps> = ({
 
   return (
     <TextInput
-      style={[styles.inputStyle, inputStyle]}
+      style={[
+        styles.inputStyle,
+        inputStyle,
+        {
+          fontSize: useScaleSize(12),
+        },
+      ]}
       ref={textRef}
       editable={false}
       autoCorrect={false}
@@ -106,7 +113,6 @@ export default memo(TextTyping);
 const styles = StyleSheet.create({
   inputStyle: {
     color: Colors.black_12,
-    fontSize: scaleSize(12),
     height: Platform.select({
       android: 60,
       ios: 36,

package/Input/common.tsx

@@ -1,17 +1,17 @@
-import React, {FC, ReactNode, useContext} from 'react';
+import React, { FC, ReactNode, useContext } from 'react';
 import {
   GestureResponderEvent,
   TouchableOpacity,
   View,
   ViewStyle,
 } from 'react-native';
-import {ApplicationContext} from '../Application';
-import {Theme} from '../Application/types';
-import {Styles} from '../Consts';
-import {Icon} from '../Icon';
-import {scaleSize, Text} from '../Text';
+import { ApplicationContext } from '../Context';
+import { Theme } from '../Application/types';
+import { Styles } from '../Consts';
+import { Icon } from '../Icon';
+import { scaleSize, Text } from '../Text';
 import styles from './styles';
-import {Loader} from '../Loader';
+import { Loader } from '../Loader';
 import IconSources from '../Assets/icon.json';
 
 type FloatingViewProps = {
@@ -40,7 +40,7 @@ export const getBorderColor = (
   theme: Theme,
   focused: boolean,
   errorMessage?: string,
-  disabled?: boolean
+  disabled?: boolean,
 ) => {
   let borderColor = theme.colors.border.default;
 
@@ -56,12 +56,12 @@ export const getBorderColor = (
     borderColor = theme.colors.border.disable;
   }
 
-  return {borderColor};
+  return { borderColor };
 };
 
 export const getSizeStyle = (
   size?: 'small' | 'large',
-  multiline: boolean = false
+  multiline: boolean = false,
 ) => {
   if (multiline)
     return [
@@ -81,8 +81,8 @@ export const ErrorView: FC<{
   errorSpacing?: boolean;
   hintText?: string;
   componentId?: string;
-}> = ({errorMessage, errorSpacing, hintText, componentId}) => {
-  const {theme} = useContext(ApplicationContext);
+}> = ({ errorMessage, errorSpacing, hintText, componentId }) => {
+  const { theme } = useContext(ApplicationContext);
   const errorColor = theme.colors.error.primary;
   const hintColor = theme.colors.text.hint;
   const hintTextDefault = hintText ?? 'Không thể chỉnh sửa';
@@ -102,14 +102,15 @@ export const ErrorView: FC<{
           }-text`}
           style={Styles.flex}
           color={errorMessage ? errorColor : hintColor}
-          typography={'description_default_regular'}>
+          typography={'description_default_regular'}
+        >
           {errorMessage ?? hintTextDefault}
         </Text>
       </View>
     );
   }
   if (errorSpacing) {
-    return <View style={[styles.errorView, {height: 18}]} />;
+    return <View style={[styles.errorView, { height: 18 }]} />;
   }
   return <View />;
 };
@@ -124,7 +125,7 @@ export const FloatingView: FC<FloatingViewProps> = ({
   onPress,
   componentId,
 }) => {
-  const {theme} = useContext(ApplicationContext);
+  const { theme } = useContext(ApplicationContext);
 
   if (floatingValue) {
     let floatingTextColor = theme.colors.text.hint;
@@ -143,16 +144,19 @@ export const FloatingView: FC<FloatingViewProps> = ({
             zIndex: 10,
           },
           style,
-        ]}>
+        ]}
+      >
         <Text
           color={floatingTextColor}
           typography={'label_s_medium'}
-          accessibilityLabel={`${componentId}|floating-text`}>
+          accessibilityLabel={`${componentId}|floating-text`}
+        >
           {floatingValue}
           {required && (
             <Text
               typography={'label_s_medium'}
-              color={theme.colors.error.primary}>
+              color={theme.colors.error.primary}
+            >
               *
             </Text>
           )}
@@ -161,7 +165,8 @@ export const FloatingView: FC<FloatingViewProps> = ({
           <TouchableOpacity
             activeOpacity={onPress ? 0.6 : 1}
             onPress={onPress}
-            accessibilityLabel={`${componentId}|floating-icon-touch`}>
+            accessibilityLabel={`${componentId}|floating-icon-touch`}
+          >
             <Icon
               color={floatingIconTintColor}
               source={floatingIcon}
@@ -184,7 +189,7 @@ export const RenderTrailing: FC<TrailingProps> = ({
   onPressIcon,
   componentId,
 }) => {
-  const {theme} = useContext(ApplicationContext);
+  const { theme } = useContext(ApplicationContext);
   if (loading) {
     return <Loader type={'spinner'} color={color} style={styles.icon} />;
   }
@@ -197,7 +202,8 @@ export const RenderTrailing: FC<TrailingProps> = ({
         <TouchableOpacity
           accessibilityLabel={`${componentId}|trailing-touch`}
           onPress={onPressIcon}
-          style={styles.icon}>
+          style={styles.icon}
+        >
           {icon}
         </TouchableOpacity>
       );
@@ -210,7 +216,7 @@ export const RenderTrailing: FC<TrailingProps> = ({
           source={icon as string}
           size={24}
           accessibilityLabel={`${componentId}|trailing-icon`}
-        />
+        />,
       );
     }
     return renderIconTouchable(
@@ -218,9 +224,10 @@ export const RenderTrailing: FC<TrailingProps> = ({
         typography="action_xs_bold"
         color={color ?? theme.colors.primary}
         numberOfLines={1}
-        accessibilityLabel={`${componentId}|trailing-text`}>
+        accessibilityLabel={`${componentId}|trailing-text`}
+      >
         {icon!.substring(0, 15)}
-      </Text>
+      </Text>,
     );
   }
   return null;