@momo-kits/foundation 0.151.1-beta.1 → 0.151.1-beta.2

package/Application/BottomSheet.tsx

@@ -49,6 +49,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     keyboardVerticalOffset,
     useDivider = true,
     footerComponent,
+    leftOptions,
   }: BottomSheetParams = props.route.params;
 
   const translateY = useSharedValue(heightDevice);
@@ -167,11 +168,23 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
             },
           ]}
         >
+          {leftOptions?.onPressIconLeft ? (
+            <TouchableOpacity
+              style={styles.iconButton}
+              onPress={() => {
+                onDismiss(true, leftOptions.onPressIconLeft);
+              }}
+            >
+              <Icon source={leftOptions.iconLeft ?? 'ic_back'} />
+            </TouchableOpacity>
+          ) : (
+            <View style={styles.iconButton} />
+          )}
+
           {options.header ? (
             <View style={Styles.flex}>{options.header}</View>
           ) : (
             <>
-              <View style={styles.iconButton} />
               <Text
                 style={[Styles.flex, { textAlign: 'center' }]}
                 numberOfLines={1}
@@ -195,6 +208,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     );
   }, [
     onDismiss,
+    leftOptions,
     options.header,
     options.title,
     panResponder.panHandlers,

package/Application/types.ts

@@ -167,6 +167,10 @@ export type BottomSheetParams = {
   keyboardVerticalOffset?: number;
   useDivider?: boolean;
   footerComponent?: React.ReactNode;
+  leftOptions?: {
+    iconLeft?: string;
+    onPressIconLeft?: () => void;
+  };
 };
 
 export interface NavigationButtonProps extends TouchableOpacityProps {

package/Assets/language.json

@@ -98,7 +98,9 @@
     "tutorial": "Hướng dẫn sử dụng",
     "question": "Câu hỏi thường gặp",
     "support": "Trung tâm hỗ trợ",
-    "skip": "Bỏ qua"
+    "skip": "Bỏ qua",
+    "enterPhoneNumber": "Vui lòng nhập số điện thoại",
+    "invalidPhoneNumber": "Số điện thoại không đúng"
   },
   "en": {
     "seeMore": "See more",
@@ -199,6 +201,8 @@
     "question": "FAQ",
     "support": "Support center",
     "errorCode": "Error code: ",
-    "skip": "Skip"
+    "skip": "Skip",
+    "enterPhoneNumber": "Please enter your phone number",
+    "invalidPhoneNumber": "Invalid phone number"
   }
 }

package/CheckBox/index.tsx

@@ -80,7 +80,7 @@ const CheckBox: FC<CheckBoxProps> = ({
             />
           )}
         </View>
-        {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
+        {!!label && <Text typography={'body_default_regular'} style={styles.label}>{label}</Text>}
       </TouchableOpacity>
     </ComponentContext.Provider>
   );

package/CheckBox/styles.ts

@@ -12,4 +12,5 @@ export default StyleSheet.create({
     alignItems: 'center',
   },
   container: {flexDirection: 'row', alignItems: 'center'},
+  label: {flexShrink: 1}
 });

package/Input/InputPhoneNumber.tsx

@@ -0,0 +1,274 @@
+import React, {
+  forwardRef,
+  useContext,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import {
+  NativeSyntheticEvent,
+  StyleSheet,
+  TextInput,
+  TextInputFocusEventData,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {
+  ApplicationContext,
+  ComponentContext,
+  useComponentId,
+} from '../Application';
+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/index.tsx

@@ -9,6 +9,8 @@ import InputMoney from './InputMoney';
 import InputOTP from './InputOTP';
 import InputSearch from './InputSearch';
 import InputTextArea from './InputTextArea';
+import InputPhoneNumber from './InputPhoneNumber';
+import { checkValidPhoneNumber } from './utils';
 
 export type OTPInputLength = 2 | 4 | 6 | 8 | 10;
 
@@ -343,6 +345,14 @@ export interface InputDropDownProps extends TouchableOpacityProps {
   onPressFloatingIcon?: () => void;
 }
 
+export interface InputPhoneNumberProps extends InputProps {
+  /**
+   * Optional. Represents the country code to be displayed in the InputPhoneNumber component.
+   * It should be in the format of a string, e.g., "+1" for the United States.
+   */
+  countryCode?: string;
+}
+
 export type InputRef = {
   clear: () => void;
   focus: () => void | undefined;
@@ -350,4 +360,14 @@ export type InputRef = {
   setText: (text: string) => void;
 };
 
-export {Input, InputDropDown, InputMoney, InputOTP, InputSearch, InputTextArea};
+export {
+  Input,
+  InputDropDown,
+  InputMoney,
+  InputOTP,
+  InputSearch,
+  InputTextArea,
+  InputPhoneNumber,
+};
+
+export {checkValidPhoneNumber};

package/Input/styles.ts

@@ -218,4 +218,8 @@ export default StyleSheet.create({
     overflow: 'hidden',
   },
   currency: { fontSize: scaleSize(20), fontWeight: 'bold' },
+  phoneNumberDivider: {
+    width: 1,
+    marginLeft: Spacing.M
+  },
 });

package/Input/utils.ts

@@ -1,3 +1,5 @@
+import { Localize } from '../Application';
+
 const formatNumberToMoney = (number: number, currency = '') => {
   if (!number || isNaN(number) || Number(number) === 0) {
     return `0${currency}`;
@@ -64,4 +66,43 @@ const checkTyping = (text: string, value: boolean, setValue: any) => {
   }
 };
 
-export { formatMoneyToNumber, formatNumberToMoney, checkTyping };
+// --- PHONE VALIDATION ---
+function formatPhoneNumber(phone: string): string {
+  return phone.replace(/\D/g, '');
+}
+
+function checkValidPhoneNumber(phone: string): {
+  phoneFormatted: string;
+  error?: string;
+} {
+  let phoneNumber = phone;
+
+  // if not starting with 0 and has 9 digits => prepend 0
+  if (
+    phoneNumber.length > 0 &&
+    phoneNumber[0] !== '0' &&
+    /^\d$/.test(phoneNumber[0]) &&
+    phoneNumber.length === 9
+  ) {
+    phoneNumber = '0' + phoneNumber;
+  }
+
+  const phoneFormatted = formatPhoneNumber(phoneNumber);
+  const localize = new Localize({ vi: {}, en: {} });
+  let error: string | undefined;
+
+  if (phoneFormatted.length === 0) {
+    error = localize.translate('enterPhoneNumber');
+  } else if (phoneFormatted.length < 10 || phoneFormatted.length > 11) {
+    error = localize.translate('invalidPhoneNumber');
+  }
+
+  return { phoneFormatted: phoneFormatted, error };
+}
+
+export {
+  formatMoneyToNumber,
+  formatNumberToMoney,
+  checkTyping,
+  checkValidPhoneNumber,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.151.1-beta.1",
+    "version": "0.151.1-beta.2",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},