@momo-kits/foundation 0.74.2-react-native.1

package/Input/Input.tsx

@@ -0,0 +1,192 @@
+import React, {forwardRef, useContext, useRef, useState} from 'react';
+import {
+  NativeSyntheticEvent,
+  TextInput,
+  TextInputFocusEventData,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {ApplicationContext} from '../Application';
+import styles from './styles';
+import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
+import {InputProps} from './index';
+import {Icon} from '../Icon';
+import {checkTyping} from './utils';
+import {Loader} from '../Loader';
+
+const Input = forwardRef(
+  (
+    {
+      value,
+      onChangeText,
+      floatingValue,
+      floatingIcon,
+      size = 'small',
+      placeholder,
+      onBlur,
+      onFocus,
+      errorMessage,
+      icon,
+      disabled = false,
+      floatingIconColor,
+      iconColor,
+      required = false,
+      errorSpacing,
+      loading = false,
+      leadingIcon,
+      leadingIconColor,
+      fontWeight = 'Regular',
+      onPressIcon,
+      secureTextEntry,
+      style,
+      ...props
+    }: InputProps,
+    ref,
+  ) => {
+    const {theme} = useContext(ApplicationContext);
+    const [focused, setFocused] = useState(false);
+    const [haveValue, setHaveValue] = useState(!!value || !!props.defaultValue);
+    const [secureTextInput, setSecureTextInput] = useState(secureTextEntry);
+    const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
+
+    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 renderIcon = (color: string | undefined) => {
+      if (loading) {
+        return <Loader type={'spinner'} color={color} style={styles.icon} />;
+      }
+      if (secureTextEntry) {
+        return (
+          <TouchableOpacity
+            onPress={() => setSecureTextInput(!secureTextInput)}
+            style={styles.icon}>
+            <Icon
+              color={color}
+              size={24}
+              source={
+                secureTextInput ? '24_security_eye_off' : '24_security_eye_open'
+              }
+            />
+          </TouchableOpacity>
+        );
+      }
+      if (icon) {
+        return (
+          <TouchableOpacity
+            onPress={onPressIcon}
+            disabled={!onPressIcon}
+            style={styles.icon}>
+            <Icon color={color} source={icon} size={24} />
+          </TouchableOpacity>
+        );
+      }
+    };
+
+    const renderInputView = () => {
+      const disabledColor = theme.colors.text.disable;
+      const secure = secureTextInput && secureTextEntry;
+      let textColor = theme.colors.text.default;
+      let placeholderColor = theme.colors.text.hint;
+      let iconTintColor = iconColor;
+
+      if (disabled) {
+        textColor = disabledColor;
+        placeholderColor = disabledColor;
+        iconTintColor = disabledColor;
+      }
+
+      return (
+        <View
+          style={[
+            styles.inputWrapper,
+            {backgroundColor: theme.colors.background.surface},
+            getSizeStyle(size),
+            getBorderColor(theme, focused, errorMessage, disabled),
+          ]}>
+          <FloatingView
+            floatingValue={floatingValue}
+            floatingIconColor={floatingIconColor}
+            disabled={disabled}
+            required={required}
+            floatingIcon={floatingIcon}
+          />
+          <View style={styles.inputView}>
+            {!!leadingIcon && (
+              <View style={styles.leadingIconContainer}>
+                <Icon
+                  color={leadingIconColor}
+                  source={leadingIcon}
+                  size={size === 'small' ? 24 : 32}
+                />
+              </View>
+            )}
+            <TextInput
+              {...props}
+              editable={!disabled}
+              secureTextEntry={secure}
+              textAlignVertical="center"
+              ref={inputRef}
+              style={[
+                styles.input,
+                {
+                  color: textColor,
+                  fontFamily: `${theme.font}-${fontWeight}`,
+                },
+                secure && haveValue && {fontSize: size === 'small' ? 18 : 22},
+              ]}
+              textBreakStrategy="highQuality"
+              value={value}
+              onChangeText={_onChangeText}
+              onFocus={_onFocus}
+              onBlur={_onBlur}
+              placeholder={placeholder}
+              selectionColor={theme.colors.primary}
+              placeholderTextColor={placeholderColor}
+            />
+          </View>
+          <View style={styles.iconView}>
+            {focused && haveValue && (
+              <TouchableOpacity
+                style={styles.iconWrapper}
+                onPress={onClearText}>
+                <Icon
+                  source="24_navigation_close_circle_full"
+                  size={16}
+                  color={theme.colors.text.hint}
+                />
+              </TouchableOpacity>
+            )}
+            {renderIcon(iconTintColor)}
+          </View>
+        </View>
+      );
+    };
+
+    return (
+      <View style={[style, styles.wrapper]}>
+        {renderInputView()}
+        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+      </View>
+    );
+  },
+);
+
+export default Input;

package/Input/InputDropDown.tsx

@@ -0,0 +1,114 @@
+import React, {useContext} from 'react';
+import {TextInput, TouchableOpacity, View} from 'react-native';
+import {ApplicationContext} from '../Application';
+import styles from './styles';
+import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
+import {InputDropDownProps} from './index';
+import {Icon} from '../Icon';
+import {Loader} from '../Loader';
+import {Styles} from '../Consts';
+
+const InputDropDown = ({
+  value,
+  floatingValue,
+  floatingIcon,
+  size = 'small',
+  onPress,
+  placeholder,
+  errorMessage,
+  icon = 'arrow_chevron_down_small',
+  disabled = false,
+  floatingIconColor,
+  iconColor,
+  required = false,
+  errorSpacing,
+  loading = false,
+  leadingIcon,
+  leadingIconColor,
+  style,
+  ...props
+}: InputDropDownProps) => {
+  const {theme} = useContext(ApplicationContext);
+  const full = !!value || !!placeholder;
+
+  const renderIcon = (color: string | undefined) => {
+    if (loading) {
+      return <Loader type={'spinner'} color={color} />;
+    }
+    if (icon) {
+      return <Icon color={color} source={icon} size={24} />;
+    }
+  };
+
+  const renderInputView = () => {
+    const disabledColor = theme.colors.text.disable;
+    let textColor = theme.colors.text.default;
+    let placeholderColor = theme.colors.text.hint;
+    let iconTintColor = iconColor;
+
+    if (disabled) {
+      textColor = disabledColor;
+      placeholderColor = disabledColor;
+      iconTintColor = disabledColor;
+    }
+
+    return (
+      <View
+        style={[
+          styles.inputWrapper,
+          {backgroundColor: theme.colors.background.surface},
+          getSizeStyle(size),
+          getBorderColor(theme, false, errorMessage, disabled),
+        ]}>
+        <FloatingView
+          floatingValue={floatingValue}
+          floatingIconColor={floatingIconColor}
+          disabled={disabled}
+          required={required}
+          floatingIcon={floatingIcon}
+        />
+        <View style={full ? styles.inputView : Styles.row}>
+          {!!leadingIcon && (
+            <View style={styles.leadingIconContainer}>
+              <Icon
+                color={leadingIconColor}
+                source={leadingIcon}
+                size={size === 'small' ? 24 : 32}
+              />
+            </View>
+          )}
+          {full && (
+            <TextInput
+              {...props}
+              onPressIn={onPress}
+              editable={false}
+              textAlignVertical="top"
+              style={[
+                styles.input,
+                {
+                  color: textColor,
+                  fontFamily: `${theme.font}-Regular`,
+                },
+              ]}
+              textBreakStrategy="highQuality"
+              value={value}
+              placeholder={placeholder}
+              selectionColor={theme.colors.primary}
+              placeholderTextColor={placeholderColor}
+            />
+          )}
+        </View>
+        <View style={styles.iconView}>{renderIcon(iconTintColor)}</View>
+      </View>
+    );
+  };
+
+  return (
+    <TouchableOpacity onPress={onPress} style={[style, full && styles.wrapper]}>
+      {renderInputView()}
+      <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+    </TouchableOpacity>
+  );
+};
+
+export default InputDropDown;

package/Input/InputMoney.tsx

@@ -0,0 +1,163 @@
+import React, {
+  forwardRef,
+  useContext,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import {
+  NativeSyntheticEvent,
+  TextInput,
+  TextInputFocusEventData,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {ApplicationContext} from '../Application';
+import styles from './styles';
+import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
+import {InputMoneyProps} from './index';
+import {Icon} from '../Icon';
+import {formatMoneyToNumber, formatNumberToMoney} from './utils';
+
+const InputMoney = forwardRef(
+  (
+    {
+      onChangeText,
+      floatingValue,
+      floatingIcon,
+      size = 'small',
+      onBlur,
+      onFocus,
+      errorMessage,
+      icon,
+      disabled = false,
+      floatingIconColor,
+      iconColor,
+      required = false,
+      errorSpacing,
+      style,
+      defaultValue = '',
+      ...props
+    }: InputMoneyProps,
+    ref,
+  ) => {
+    const {theme} = useContext(ApplicationContext);
+    const [focused, setFocused] = useState(false);
+    const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
+
+    const validateText = (text: string) => {
+      const valueFormat = formatMoneyToNumber(text, 'đ');
+      return formatNumberToMoney(valueFormat, 'đ');
+    };
+
+    const [value, setValue] = useState(
+      defaultValue ? validateText(defaultValue) : '',
+    );
+
+    const onClearText = () => {
+      inputRef?.current?.clear();
+      setValue('');
+      onChangeText?.('');
+    };
+
+    const _onChangeText = (text: string) => {
+      if (text.length < value.length && value.indexOf(text) === 0) {
+        text = value.slice(0, -2) + 'đ';
+      }
+      setValue(validateText(text));
+      onChangeText?.(formatMoneyToNumber(text, 'đ').toString());
+    };
+
+    useImperativeHandle(ref, () => {
+      return {
+        setText: _onChangeText,
+      };
+    });
+
+    const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      setFocused(true);
+      onFocus?.(e);
+    };
+
+    const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      setFocused(false);
+      onBlur?.(e);
+    };
+
+    const renderInputView = () => {
+      const disabledColor = theme.colors.text.disable;
+      let textColor = theme.colors.text.default;
+      let placeholderColor = theme.colors.text.hint;
+      let iconTintColor = iconColor;
+
+      if (disabled) {
+        textColor = disabledColor;
+        placeholderColor = disabledColor;
+        iconTintColor = disabledColor;
+      }
+
+      return (
+        <View
+          style={[
+            styles.inputWrapper,
+            {backgroundColor: theme.colors.background.surface},
+            getSizeStyle(size),
+            getBorderColor(theme, focused, errorMessage, disabled),
+          ]}>
+          <FloatingView
+            floatingValue={floatingValue}
+            floatingIconColor={floatingIconColor}
+            disabled={disabled}
+            required={required}
+            floatingIcon={floatingIcon}
+          />
+          <View style={styles.inputView}>
+            <TextInput
+              {...props}
+              editable={!disabled}
+              textAlignVertical="top"
+              ref={inputRef}
+              keyboardType={'number-pad'}
+              style={[
+                styles.moneyInput,
+                {
+                  color: textColor,
+                },
+              ]}
+              value={value}
+              onChangeText={_onChangeText}
+              onFocus={_onFocus}
+              onBlur={_onBlur}
+              selectionColor={theme.colors.primary}
+              placeholderTextColor={placeholderColor}
+              placeholder={'0đ'}
+            />
+          </View>
+          <View style={styles.iconView}>
+            {focused && (
+              <TouchableOpacity
+                style={styles.iconWrapper}
+                onPress={onClearText}>
+                <Icon
+                  source="24_navigation_close_circle_full"
+                  size={16}
+                  color={theme.colors.text.hint}
+                />
+              </TouchableOpacity>
+            )}
+            {!!icon && <Icon color={iconTintColor} source={icon} />}
+          </View>
+        </View>
+      );
+    };
+
+    return (
+      <View style={[style, styles.wrapper]}>
+        {renderInputView()}
+        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+      </View>
+    );
+  },
+);
+
+export default InputMoney;

package/Input/InputOTP.tsx

@@ -0,0 +1,235 @@
+import React, {
+  FC,
+  forwardRef,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import {
+  Animated,
+  NativeSyntheticEvent,
+  TextInput,
+  TextInputFocusEventData,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {CaretProps, InputOTPProps} from './index';
+import {scaleSize, Text} from '../Text';
+import styles from './styles';
+import {ErrorView, getBorderColor} from './common';
+import {ApplicationContext} from '../Application';
+import {Spacing} from '../Consts';
+
+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();
+  }, []);
+  const spacingStyle = !isNaN(Number(length)) &&
+    index !== Number(length) - 1 && {marginRight: Spacing.L};
+
+  return (
+    <View style={[{flexDirection: 'row', alignItems: 'center'}, spacingStyle]}>
+      <Animated.View
+        style={{
+          height: scaleSize(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,
+      floatingIconColor,
+      floatingIcon,
+      placeholder,
+      onChangeText,
+      onFocus,
+      onBlur,
+      dataType = 'number',
+      style,
+      ...props
+    }: InputOTPProps,
+    ref,
+  ) => {
+    const MAX_LENGTH = 10;
+    const [value, setValue] = useState('');
+    const [focused, setFocused] = useState(false);
+    const inputRef = useRef<TextInput>(null);
+    const {theme} = useContext(ApplicationContext);
+
+    useImperativeHandle(ref, () => ({
+      onChangeText: (text: string) => {
+        _onChangeText(text);
+      },
+    }));
+
+    const onFocusInput = () => {
+      setFocused(true);
+      inputRef.current?.focus();
+    };
+
+    const onBlurInput = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      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 renderInputs = (length: number) => {
+      const TextInputs: React.ReactNode[] = [];
+      for (let i = 0; i < length; i++) {
+        TextInputs.push(
+          <View>
+            {focused && value.length === i ? (
+              <OTPCaret index={i} length={length} />
+            ) : (
+              <Text
+                style={i !== length - 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={{flexDirection: 'row'}}>
+          {splitValue.map((letter, index) => {
+            return (
+              <Text
+                style={
+                  (index !== value.length - 1 ||
+                    (focused && value.length !== MAX_LENGTH)) && {
+                    marginRight: Spacing.L,
+                  }
+                }
+                typography={'header_m_bold'}>
+                {letter}
+              </Text>
+            );
+          })}
+          {focused && value.length !== MAX_LENGTH && <OTPCaret />}
+        </View>
+      );
+    };
+
+    const renderInputView = () => {
+      return (
+        <View
+          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'}>
+                {floatingValue}
+              </Text>
+            </View>
+          )}
+          <View style={styles.otpInputsView}>
+            {length ? renderInputs(length) : renderUnidentifiedInputs()}
+          </View>
+          <View style={styles.inputView}>
+            <TextInput
+              {...props}
+              ref={inputRef}
+              value={value}
+              onChangeText={_onChangeText}
+              keyboardType={dataType === 'number' ? 'number-pad' : 'default'}
+              onFocus={onFocusInput}
+              onBlur={onBlurInput}
+              style={{opacity: 0}}
+              selectionColor={theme.colors.primary}
+              placeholderTextColor={theme.colors.text.hint}
+            />
+          </View>
+        </View>
+      );
+    };
+
+    return (
+      <TouchableOpacity
+        activeOpacity={1}
+        onPress={onFocusInput}
+        style={[style, styles.otpWrapper]}>
+        {renderInputView()}
+        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+      </TouchableOpacity>
+    );
+  },
+);
+
+export default InputOTP;