@momo-kits/foundation 0.79.6-beta.10 → 0.79.6-beta.12

package/Application/ModalScreen.tsx

@@ -241,11 +241,12 @@ const styles = StyleSheet.create({
   indicatorContainer: {
     width: '100%',
     paddingTop: Spacing.S,
+    paddingBottom: Spacing.XS,
     alignItems: 'center',
     justifyContent: 'center',
   },
   indicator: {
-    width: 64,
+    width: 40,
     height: 4,
     borderRadius: Radius.S,
   },

package/Input/InputOTP.tsx

@@ -0,0 +1,171 @@
+import React, {FC, useContext, useRef, useState} from 'react';
+import {
+  KeyboardType,
+  NativeSyntheticEvent,
+  TextInput,
+  TextInputFocusEventData,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {InputOTPProps} from './index';
+import {Text} from '../Text';
+import styles from './styles';
+import {ErrorView, getBorderColor} from './common';
+import {ApplicationContext} from '../Application';
+import {Spacing} from '../Consts';
+import OTPCaret from './OTPCaret';
+
+const InputOTP: FC<InputOTPProps> = ({
+  length,
+  errorMessage,
+  errorSpacing,
+  floatingValue,
+  floatingIconColor,
+  floatingIcon,
+  placeholder,
+  onChangeText,
+  onFocus,
+  onBlur,
+  dataType = 'number',
+  ...props
+}) => {
+  const MAX_LENGTH = 10;
+  const [value, setValue] = useState('');
+  const [focused, setFocused] = useState(false);
+  const inputRef = useRef<TextInput>(null);
+  const {theme} = useContext(ApplicationContext);
+
+  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 = [];
+    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] ? 'title_s' : 'paragraph_default'}>
+              {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_s'}>
+          {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={'title_s'}>
+              {letter}
+            </Text>
+          );
+        })}
+        {focused && value.length !== MAX_LENGTH && <OTPCaret />}
+      </View>
+    );
+  };
+
+  const renderInputView = () => {
+    let placeholderColor = theme.colors.text.hint;
+    const keyboardType: KeyboardType =
+      dataType === 'number' ? 'number-pad' : 'default';
+    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_s'}>{floatingValue}</Text>
+          </View>
+        )}
+        <View style={styles.otpInputsView}>
+          {length ? renderInputs(length) : renderUnidentifiedInputs()}
+        </View>
+        <View style={styles.inputView}>
+          <TextInput
+            {...props}
+            accessibilityLabel={`TextInput`}
+            ref={inputRef}
+            value={value}
+            onChangeText={_onChangeText}
+            keyboardType={keyboardType}
+            onFocus={onFocusInput}
+            onBlur={onBlurInput}
+            style={{opacity: 0}}
+            selectionColor={theme.colors.primary}
+            placeholderTextColor={placeholderColor}
+          />
+        </View>
+      </View>
+    );
+  };
+
+  return (
+    <TouchableOpacity
+      activeOpacity={1}
+      onPress={onFocusInput}
+      style={styles.otpWrapper}
+      accessibilityLabel={`Input/${floatingValue}`}>
+      {renderInputView()}
+      <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+    </TouchableOpacity>
+  );
+};
+
+export default InputOTP;

package/Input/OTPCaret.tsx

@@ -0,0 +1,50 @@
+import React, {FC, useContext, useEffect, useRef} from 'react';
+import {Animated, View} from 'react-native';
+import {Spacing} from '../Consts';
+import {scaleSize, Text} from '../Text';
+import {ApplicationContext} from '../Application';
+import {CaretProps} from './index';
+
+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={'paragraph_default'}>
+        -
+      </Text>
+    </View>
+  );
+};
+
+export default OtpCaret;

package/Input/common.tsx

@@ -1,4 +1,4 @@
-import {View} from 'react-native';
+import {View, ViewStyle} from 'react-native';
 import styles from './styles';
 import {Text} from '../Text';
 import React, {FC, useContext} from 'react';
@@ -13,6 +13,7 @@ type FloatingViewProps = {
   disabled?: boolean;
   floatingIcon?: string;
   required?: boolean;
+  style?: ViewStyle;
 };
 
 export const DEFAULT_HEIGHT = 112;
@@ -81,6 +82,7 @@ export const FloatingView: FC<FloatingViewProps> = ({
   disabled,
   floatingIcon,
   required,
+  style,
 }) => {
   const {theme} = useContext(ApplicationContext);
 
@@ -100,6 +102,7 @@ export const FloatingView: FC<FloatingViewProps> = ({
             backgroundColor: theme.colors.background.surface,
             zIndex: 10,
           },
+          style,
         ]}>
         <Text color={floatingTextColor} typography={'label_s'}>
           {floatingValue}

package/Input/index.tsx

@@ -2,6 +2,7 @@ import Input from './Input';
 import InputTextArea from './InputTextArea';
 import InputSearch from './InputSearch';
 import InputMoney from './InputMoney';
+import InputOTP from './InputOTP';
 import {TextInputProps} from 'react-native';
 
 export interface InputProps extends TextInputProps {
@@ -109,4 +110,15 @@ export interface InputSearchProps extends InputPropsOmitForSearch {
 
 export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}
 
-export {Input, InputTextArea, InputSearch, InputMoney};
+export type OTPInputLength = 2 | 4 | 6 | 8 | 10;
+
+export interface InputOTPProps extends InputPropsWithoutSizeAndIcon {
+  length?: OTPInputLength;
+  dataType?: 'string' | 'number';
+}
+
+export type CaretProps = {
+  index?: number;
+  length?: number;
+};
+export {Input, InputTextArea, InputSearch, InputMoney, InputOTP};

package/Input/styles.ts

@@ -142,4 +142,28 @@ export default StyleSheet.create({
     paddingVertical: Spacing.S,
     fontWeight: 'bold',
   },
+
+  //OTP
+  otpWrapper: {
+    width: '100%',
+    marginTop: Spacing.M,
+  },
+  otpInput: {
+    height: scaleSize(56),
+    borderRadius: Radius.S,
+    borderWidth: 1,
+  },
+  otpFloatingView: {
+    position: 'absolute',
+    top: -Spacing.S,
+    alignSelf: 'center',
+    paddingHorizontal: Spacing.S,
+  },
+  otpInputsView: {
+    width: '100%',
+    height: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
 });

package/package.json

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