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

package/src/foundations/Input/TextTyping.tsx

@@ -0,0 +1,115 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { FC, memo, useEffect, useRef } from 'react';
+import { Platform, TextInput, TextStyle } from 'react-native';
+import { Colors } from '../Consts';
+import { useScaleSize } from '../Text';
+
+export interface TextTypingProps {
+  data: string[];
+  timeDelayEnd?: number;
+  timeDelayNextChar?: number;
+  inputStyle?: TextStyle;
+}
+
+const TextTyping: FC<TextTypingProps> = ({
+  data = [],
+  timeDelayEnd = 2000,
+  timeDelayNextChar = 20,
+  inputStyle = {},
+}) => {
+  const textRef = useRef<TextInput>(null);
+  const scaledFontSize = useScaleSize(12);
+
+  const currentIndex = useRef<number>(0);
+  const currentCharIndex = useRef<number>(0);
+  const currentText = useRef('');
+
+  const playAnimation = () => {
+    const handleResetList = () => {
+      currentIndex.current = 0;
+      handleAnimation();
+    };
+
+    const handleAnimation = () => {
+      const listChar = data?.[currentIndex.current]?.split('') || [];
+      listChar.length !== 0 && showChar(listChar?.[currentCharIndex.current]);
+    };
+
+    currentIndex.current >= data?.length
+      ? handleResetList()
+      : handleAnimation();
+  };
+
+  const showChar = (char?: string) => {
+    const handleResetString = () => {
+      setTimeout(() => {
+        reset();
+      }, timeDelayEnd);
+    };
+
+    const handleShowChar = () => {
+      setTimeout(() => {
+        textRef.current?.setNativeProps?.({
+          text: currentText.current + char,
+        });
+        currentText.current += char;
+        currentCharIndex.current++;
+        playAnimation();
+      }, timeDelayNextChar);
+    };
+
+    currentCharIndex.current >= (data?.[currentIndex.current]?.length || 0)
+      ? handleResetString()
+      : handleShowChar();
+  };
+
+  const reset = () => {
+    const handleNextString = () => {
+      currentIndex.current++;
+      playAnimation();
+    };
+
+    const handleReset = () => {
+      setTimeout(() => {
+        textRef.current?.setNativeProps?.({
+          text: currentText.current.slice(0, -1),
+        });
+        currentText.current = currentText.current.slice(0, -1);
+        currentCharIndex.current--;
+        reset();
+      }, timeDelayNextChar);
+    };
+
+    currentCharIndex.current <= 0 ? handleNextString() : handleReset();
+  };
+
+  useEffect(() => {
+    setTimeout(() => {
+      playAnimation();
+    }, 1000);
+  }, []);
+
+  return (
+    <TextInput
+      style={[
+        {
+          color: Colors.black_12,
+          fontSize: scaledFontSize,
+          height: Platform.select({
+            android: 60,
+            ios: 36,
+          }),
+        },
+        inputStyle,
+      ]}
+      ref={textRef}
+      editable={false}
+      autoCorrect={false}
+      pointerEvents={'none'}
+      numberOfLines={1}
+      allowFontScaling={false}
+    />
+  );
+};
+
+export default memo(TextTyping);

package/src/foundations/Input/common.tsx

@@ -0,0 +1,243 @@
+import React, { FC, ReactNode, useContext } from 'react';
+import {
+  GestureResponderEvent,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native';
+import { ApplicationContext } from '../Context';
+import { Theme } from '../Application/types';
+import { Styles } from '../Consts';
+import { Icon } from '../Icon';
+import { useScaleSize, Text } from '../Text';
+import styles from './styles';
+import { Loader } from '../Loader';
+import IconSources from '../Assets/icon.json';
+
+type FloatingViewProps = {
+  floatingValue?: string;
+  floatingIconColor?: string;
+  componentId?: string;
+  disabled?: boolean;
+  floatingIcon?: string;
+  required?: boolean;
+  style?: ViewStyle;
+  onPress?: (e: GestureResponderEvent) => void;
+};
+
+type TrailingProps = {
+  loading?: boolean;
+  color?: string;
+  icon?: string;
+  componentId?: string;
+  onPressIcon?: () => void;
+};
+
+export const MAX_LENGTH = 300;
+
+export const getBorderColor = (
+  theme: Theme,
+  focused: boolean,
+  errorMessage?: string,
+  disabled?: boolean,
+) => {
+  let borderColor = theme.colors.border.default;
+
+  if (focused) {
+    borderColor = theme.colors.primary;
+  }
+
+  if (errorMessage) {
+    borderColor = theme.colors.error.primary;
+  }
+
+  if (disabled) {
+    borderColor = theme.colors.border.disable;
+  }
+
+  return { borderColor };
+};
+
+export const getSizeStyle = (
+  size?: 'small' | 'large',
+  multiline: boolean = false,
+  height?: number,
+) => {
+  let scaleStyle: ViewStyle = {};
+  if (height) {
+    scaleStyle = { height };
+  }
+
+  if (multiline)
+    return [
+      styles.multilineContainer,
+      {
+        minHeight: height,
+      },
+    ];
+
+  if (size === 'small') {
+    return [styles.smallContainer, scaleStyle];
+  }
+  return [styles.container, scaleStyle];
+};
+
+export const ErrorView: FC<{
+  errorMessage?: string;
+  errorSpacing?: boolean;
+  hintText?: string;
+  componentId?: string;
+}> = ({ 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';
+  const scaledIconSize = useScaleSize(16);
+
+  if (errorMessage || hintText) {
+    return (
+      <View style={styles.errorView}>
+        <View style={styles.errorIcon}>
+          <Icon
+            color={errorMessage ? errorColor : hintColor}
+            source="ic_error"
+            size={scaledIconSize}
+          />
+        </View>
+        <Text
+          accessibilityLabel={`${componentId}|${
+            errorMessage ? 'error' : 'hint'
+          }-text`}
+          style={Styles.flex}
+          color={errorMessage ? errorColor : hintColor}
+          typography={'description_default_regular'}
+        >
+          {errorMessage ?? hintTextDefault}
+        </Text>
+      </View>
+    );
+  }
+  if (errorSpacing) {
+    return <View style={[styles.errorView, { height: 18 }]} />;
+  }
+  return <View />;
+};
+
+export const FloatingView: FC<FloatingViewProps> = ({
+  floatingValue,
+  floatingIconColor,
+  disabled,
+  floatingIcon,
+  required,
+  style,
+  onPress,
+  componentId,
+}) => {
+  const { theme } = useContext(ApplicationContext);
+  const scaledTop = useScaleSize(10);
+  if (floatingValue) {
+    let floatingTextColor = theme.colors.text.hint;
+    let floatingIconTintColor = floatingIconColor;
+    if (disabled) {
+      floatingTextColor = theme.colors.text.disable;
+      floatingIconTintColor = theme.colors.text.disable;
+    }
+
+    return (
+      <View
+        style={[
+          styles.floatingView,
+          {
+            backgroundColor: theme.colors.background.surface,
+            zIndex: 10,
+            top: -scaledTop,
+          },
+          style,
+        ]}
+      >
+        <Text
+          color={floatingTextColor}
+          typography={'label_s_medium'}
+          accessibilityLabel={`${componentId}|floating-text`}
+        >
+          {floatingValue}
+          {required && (
+            <Text
+              typography={'label_s_medium'}
+              color={theme.colors.error.primary}
+            >
+              *
+            </Text>
+          )}
+        </Text>
+        {!!floatingIcon && (
+          <TouchableOpacity
+            activeOpacity={onPress ? 0.6 : 1}
+            onPress={onPress}
+            accessibilityLabel={`${componentId}|floating-icon-touch`}
+          >
+            <Icon
+              color={floatingIconTintColor}
+              source={floatingIcon}
+              size={16}
+              style={styles.floatingIcon}
+              accessibilityLabel={`${componentId}|floating-icon`}
+            />
+          </TouchableOpacity>
+        )}
+      </View>
+    );
+  }
+  return null;
+};
+
+export const RenderTrailing: FC<TrailingProps> = ({
+  loading,
+  color,
+  icon,
+  onPressIcon,
+  componentId,
+}) => {
+  const { theme } = useContext(ApplicationContext);
+  if (loading) {
+    return <Loader type={'spinner'} color={color} style={styles.icon} />;
+  }
+
+  if (icon) {
+    const isIcon =
+      (IconSources as any)?.[icon as string]?.uri || icon?.includes('http');
+    const renderIconTouchable = (icon: ReactNode) => {
+      return (
+        <TouchableOpacity
+          accessibilityLabel={`${componentId}|trailing-touch`}
+          onPress={onPressIcon}
+          style={styles.icon}
+        >
+          {icon}
+        </TouchableOpacity>
+      );
+    };
+
+    if (isIcon) {
+      return renderIconTouchable(
+        <Icon
+          color={color}
+          source={icon as string}
+          size={24}
+          accessibilityLabel={`${componentId}|trailing-icon`}
+        />,
+      );
+    }
+    return renderIconTouchable(
+      <Text
+        typography="action_xs_bold"
+        color={color ?? theme.colors.primary}
+        numberOfLines={1}
+        accessibilityLabel={`${componentId}|trailing-text`}
+      >
+        {icon!.substring(0, 15)}
+      </Text>,
+    );
+  }
+  return null;
+};