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

package/src/foundations/Input/TextTyping.tsx

@@ -1,115 +0,0 @@
-/* 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

@@ -1,243 +0,0 @@
-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;
-};