@momo-kits/native-kits 0.157.1-com.1-debug → 0.157.1-com.1

package/src/foundations/Input/InputOTP.tsx

@@ -1,299 +0,0 @@
-import React, {
-  FC,
-  forwardRef,
-  useContext,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from 'react';
-import {
-  Animated,
-  PixelRatio,
-  TextInput,
-  TextInputFocusEvent,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-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';
-
-const OTPCaret: FC<CaretProps> = ({ index, length }) => {
-  const DURATION = 300;
-  const { theme } = useContext(ApplicationContext);
-  const opacity = useRef(new Animated.Value(0)).current;
-
-  useEffect(() => {
-    Animated.loop(
-      Animated.sequence([
-        Animated.timing(opacity, {
-          toValue: 1,
-          duration: DURATION,
-          useNativeDriver: true,
-        }),
-        Animated.delay(DURATION * 2),
-        Animated.timing(opacity, {
-          toValue: 0,
-          duration: DURATION,
-          useNativeDriver: true,
-        }),
-      ]),
-    ).start();
-  }, [opacity]);
-  const spacingStyle = !isNaN(Number(length)) &&
-    index !== Number(length) - 1 && { marginRight: Spacing.L };
-
-  return (
-    <View style={[Styles.rowCenter, spacingStyle]}>
-      <Animated.View
-        style={{
-          height: useScaleSize(12),
-          width: 1,
-          backgroundColor: theme.colors.primary,
-          opacity,
-        }}
-      />
-      <Text color={theme.colors.text.hint} typography={'body_default_regular'}>
-        -
-      </Text>
-    </View>
-  );
-};
-
-const InputOTP = forwardRef(
-  (
-    {
-      length,
-      errorMessage,
-      errorSpacing,
-      floatingValue = 'Label',
-      placeholder,
-      onChangeText,
-      onBlur,
-      onFocus,
-      dataType = 'number',
-      params,
-      style,
-      hintText,
-      ...props
-    }: InputOTPProps,
-    ref,
-  ) => {
-    const MAX_LENGTH = 10;
-    const [value, setValue] = useState('');
-    const [focused, setFocused] = useState(false);
-    const inputRef = useRef<TextInput | null>(null);
-    const { theme } = useContext(ApplicationContext);
-    const context = useContext<any>(MiniAppContext);
-
-    const componentName = 'InputOTP';
-
-    const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
-
-    const { componentId } = useComponentId(
-      `${componentName}/${placeholder}`,
-      props.accessibilityLabel,
-    );
-
-    useImperativeHandle(ref, () => ({
-      onChangeText: (text: string) => {
-        _onChangeText(text);
-      },
-      focus: () => inputRef.current?.focus(),
-      blur: () => inputRef.current?.blur(),
-      setText: (text: string) => _onChangeText(text),
-    }));
-
-    const onFocusInput = (e: TextInputFocusEvent) => {
-      setFocused(true);
-      onFocus?.(e);
-    };
-
-    const onBlurInput = (e: TextInputFocusEvent) => {
-      setFocused(false);
-      onBlur?.(e);
-    };
-
-    const _onChangeText = (text: string) => {
-      if (text.length > MAX_LENGTH) return;
-      if (dataType === 'number' && isNaN(Number(text))) return;
-      if (
-        !isNaN(Number(text)) &&
-        value.length >= Number(length) &&
-        text.length >= value.length
-      )
-        return;
-
-      setValue(text);
-      onChangeText?.(text);
-    };
-
-    const onClearText = () => {
-      _onChangeText('');
-    };
-
-    const fontScale = PixelRatio.getFontScale();
-
-    const renderInputs = (inputLength: number) => {
-      const TextInputs: React.ReactNode[] = [];
-      for (let i = 0; i < inputLength; i++) {
-        TextInputs.push(
-          <View key={`otp-input-${i}`}>
-            {focused && value.length === i ? (
-              <OTPCaret index={i} length={inputLength} />
-            ) : (
-              <Text
-                style={i !== inputLength - 1 && { marginRight: Spacing.L }}
-                color={
-                  value[i] ? theme.colors.text.default : theme.colors.text.hint
-                }
-                typography={value[i] ? 'header_m_bold' : 'body_default_regular'}
-              >
-                {value[i] || '-'}
-              </Text>
-            )}
-          </View>,
-        );
-      }
-      return TextInputs;
-    };
-
-    const renderUnidentifiedInputs = () => {
-      const splitValue = value.split('');
-
-      if (!focused && value.length === 0 && !!placeholder) {
-        return (
-          <Text
-            color={theme.colors.text.hint}
-            typography={'description_default_regular'}
-          >
-            {placeholder}
-          </Text>
-        );
-      }
-
-      return (
-        <View style={Styles.row}>
-          {splitValue.map((letter, index) => {
-            return (
-              <Text
-                key={`otp-letter-${index}`}
-                style={
-                  (index !== value.length - 1 ||
-                    (focused && value.length !== MAX_LENGTH)) && {
-                    marginRight:
-                      fontScale > 1 && value.length > 6 ? Spacing.M : Spacing.L,
-                  }
-                }
-                typography={'header_m_bold'}
-              >
-                {letter}
-              </Text>
-            );
-          })}
-          {focused && value.length !== MAX_LENGTH && <OTPCaret />}
-        </View>
-      );
-    };
-
-    const renderInputView = () => {
-      return (
-        <TouchableOpacity
-          activeOpacity={1}
-          onPress={() => inputRef.current?.focus()}
-          style={[
-            styles.otpInput,
-            { backgroundColor: theme.colors.background.surface },
-            getBorderColor(theme, focused, errorMessage),
-          ]}
-        >
-          {!!floatingValue && (
-            <View
-              style={[
-                styles.otpFloatingView,
-                { backgroundColor: theme.colors.background.surface },
-              ]}
-            >
-              <Text
-                typography={'description_default_regular'}
-                color={theme.colors.text.hint}
-                accessibilityLabel={`${componentId}|floating-text`}
-              >
-                {floatingValue}
-              </Text>
-            </View>
-          )}
-          {value.length > 0 && focused && (
-            <TouchableOpacity onPress={onClearText} style={styles.clearIcon}>
-              <Icon source={'24_navigation_close_circle_full'} size={12} />
-            </TouchableOpacity>
-          )}
-          <View style={styles.otpInputsView}>
-            {length ? renderInputs(length) : renderUnidentifiedInputs()}
-          </View>
-          <View style={styles.otpRealInputWrapper}>
-            <SystemTextInput
-              {...props}
-              ref={inputRef}
-              value={value}
-              textAlign={'center'}
-              onChangeText={_onChangeText}
-              keyboardType={dataType === 'number' ? 'number-pad' : 'default'}
-              allowFontScaling={false}
-              onFocus={onFocusInput}
-              onBlur={onBlurInput}
-              style={styles.otpRealInput}
-              selectionColor={theme.colors.primary}
-              placeholderTextColor={theme.colors.text.hint}
-              accessibilityState={{
-                disabled: props.disabled,
-                ...props.accessibilityState,
-              }}
-              accessibilityLabel={componentId}
-            />
-          </View>
-        </TouchableOpacity>
-      );
-    };
-
-    return (
-      <ComponentContext.Provider
-        value={{
-          componentName,
-          componentId,
-          params,
-          state: 'enabled',
-        }}
-      >
-        <View
-          style={[
-            style,
-            styles.otpWrapper,
-            showBaseLineDebug && styles.debugBaseLine,
-          ]}
-        >
-          {renderInputView()}
-          <ErrorView
-            errorMessage={errorMessage}
-            errorSpacing={errorSpacing}
-            hintText={hintText}
-            componentId={componentId}
-          />
-        </View>
-      </ComponentContext.Provider>
-    );
-  },
-);
-
-export default InputOTP;

package/src/foundations/Input/InputPhoneNumber.tsx

@@ -1,287 +0,0 @@
-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,
-  MiniAppContext,
-} from '../Context';
-import { Colors, Spacing, Styles } from '../Consts';
-import { Icon } from '../Icon';
-import { useScaleSize, Text } from '../Text';
-import {
-  ErrorView,
-  getBorderColor,
-  getSizeStyle,
-  RenderTrailing,
-} from './common';
-import { InputPhoneNumberProps } from './index';
-import styles from './styles';
-import SystemTextInput from './SystemTextInput';
-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,
-      defaultValue,
-      ...props
-    }: InputPhoneNumberProps,
-    ref,
-  ) => {
-    const { theme } = useContext(ApplicationContext);
-    const context = useContext<any>(MiniAppContext);
-    const scaleHeight = useScaleSize(size === 'small' ? 48 : 56, 1.1);
-    const [focused, setFocused] = useState(false);
-    const haveValue = !!value || !!defaultValue;
-    const inputRef = useRef<TextInput | null>(null);
-    const componentName = 'InputPhoneNumber';
-
-    const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
-
-    const { componentId } = useComponentId(
-      `${componentName}/${placeholder}`,
-      props.accessibilityLabel,
-    );
-
-    const onClearText = () => {
-      inputRef?.current?.clear();
-      _onChangeText('');
-    };
-
-    const _onChangeText = (text: string) => {
-      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 size14 = useScaleSize(14);
-    let size18 = useScaleSize(18);
-    let typography: Typography;
-    if (size === 'small') {
-      inputTextStyles = { fontSize: size14, fontWeight: '600' };
-      dividerHeight = 24;
-      typography = 'header_s_semibold';
-    } else {
-      inputTextStyles = { fontSize: size18, 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, undefined, scaleHeight),
-            { 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 },
-              ]}
-              defaultValue={defaultValue}
-              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,
-            showBaseLineDebug && styles.debugBaseLine,
-          ]}
-        >
-          {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;