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

package/src/foundations/Input/InputSearch.tsx

@@ -1,351 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import React, {
-  FC,
-  forwardRef,
-  ForwardRefRenderFunction,
-  useContext,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from 'react';
-import {
-  NativeSyntheticEvent,
-  TextInput,
-  TextInputFocusEventData,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import { useComponentId } from '../Application';
-import {
-  ApplicationContext,
-  ComponentContext,
-  MiniAppContext,
-} from '../Context';
-import { Icon } from '../Icon';
-import { Text, useScaleSize } from '../Text';
-import { InputRef, InputSearchProps } from './index';
-import styles from './styles';
-import { Styles } from '../Consts';
-import SystemTextInput from './SystemTextInput';
-
-const TextTyping: FC<any> = ({
-  data = [],
-  timeDelayEnd = 2000,
-  timeDelayNextChar = 20,
-}) => {
-  const textRef = useRef<TextInput>(null);
-
-  const currentIndex = useRef<number>(0);
-  const currentCharIndex = useRef<number>(0);
-  const currentText = useRef('');
-
-  useEffect(() => {
-    setTimeout(() => {
-      playAnimation();
-    }, 1000);
-  }, []);
-
-  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();
-  };
-
-  return (
-    <TextInput
-      style={styles.inputStyle}
-      ref={textRef}
-      editable={false}
-      autoCorrect={false}
-      pointerEvents={'none'}
-      numberOfLines={1}
-      allowFontScaling={false}
-    />
-  );
-};
-
-const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
-  {
-    placeholder,
-    onFocus,
-    onBlur,
-    value,
-    trailing,
-    trailingColor,
-    onPressTrailing,
-    onChangeText,
-    buttonText = 'Hủy',
-    showButtonText = true,
-    style,
-    defaultValue,
-    onPressButtonText,
-    params,
-    backgroundColor,
-    onPress,
-    typingData,
-    ...props
-  },
-  ref,
-) => {
-  const { theme } = useContext(ApplicationContext);
-  const context = useContext<any>(MiniAppContext);
-  const scaledFontSize = useScaleSize(14);
-
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
-
-  const [focused, setFocused] = useState(false);
-  const [internalText, setInternalText] = useState(defaultValue || '');
-  const currentValue = value !== undefined ? value : internalText;
-  const haveValue = !!currentValue;
-  const inputRef = useRef<TextInput | null>(null);
-
-  const componentName = 'InputSearch';
-
-  const { componentId } = useComponentId(
-    `${componentName}/${placeholder}`,
-    props.accessibilityLabel,
-  );
-
-  const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
-    setFocused(true);
-    onFocus?.(e);
-  };
-
-  const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
-    setFocused(false);
-    onBlur?.(e);
-  };
-
-  const onClearText = () => {
-    inputRef?.current?.clear();
-    inputRef.current?.setNativeProps({ text: '' });
-    _onChangeText('');
-  };
-
-  const _onChangeText = (text: string) => {
-    if (value === undefined) {
-      setInternalText(text);
-    }
-    onChangeText?.(text);
-  };
-
-  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,
-    };
-  });
-
-  /**
-   * Render the input view
-   */
-  const renderInputView = () => {
-    if (typingData && typingData?.length > 0) {
-      return (
-        <TouchableOpacity
-          style={[
-            styles.searchInput,
-            {
-              justifyContent: 'center',
-            },
-          ]}
-          onPress={onPress}
-          activeOpacity={onPress ? 0.6 : 1}
-        >
-          <TextTyping data={typingData} />
-        </TouchableOpacity>
-      );
-    }
-
-    return (
-      <SystemTextInput
-        {...props}
-        accessibilityLabel={componentId}
-        textAlignVertical="center"
-        allowFontScaling={false}
-        ref={inputRef}
-        style={[
-          styles.searchInput,
-          {
-            fontSize: scaledFontSize,
-            color: theme.colors.text.default,
-          },
-        ]}
-        value={value}
-        onChangeText={_onChangeText}
-        defaultValue={defaultValue}
-        onFocus={_onFocus}
-        onBlur={_onBlur}
-        placeholder={placeholder}
-        selectionColor={theme.colors.primary}
-        placeholderTextColor={theme.colors.text.hint}
-      />
-    );
-  };
-
-  /**
-   * Render trailing icon or text
-   */
-  const renderTrailing = () => {
-    return (
-      <View style={Styles.row}>
-        {haveValue && (
-          <TouchableOpacity
-            style={styles.iconWrapper}
-            onPress={onClearText}
-            accessibilityLabel={`${componentId}|close-icon-touch`}
-          >
-            <Icon
-              source="24_navigation_close_circle_full"
-              size={16}
-              color={theme.colors.text.hint}
-            />
-          </TouchableOpacity>
-        )}
-        {!!trailing && (
-          <TouchableOpacity
-            style={Styles.row}
-            onPress={onPressTrailing}
-            accessibilityLabel={`${componentId}|trailing-touch`}
-          >
-            <View
-              style={[
-                styles.divider,
-                {
-                  backgroundColor: theme.colors.primary,
-                },
-              ]}
-            />
-            <Icon
-              color={trailingColor}
-              source={trailing as string}
-              style={styles.iconSearchInput}
-            />
-          </TouchableOpacity>
-        )}
-      </View>
-    );
-  };
-
-  let inputState = 'empty';
-  if (focused) {
-    inputState = 'focus';
-  }
-  if (value && value?.length > 0) {
-    inputState = 'filled';
-  }
-
-  return (
-    <ComponentContext.Provider
-      value={{
-        componentName,
-        componentId,
-        params,
-        state: inputState,
-      }}
-    >
-      <View
-        style={[
-          style,
-          styles.searchInputContainer,
-          showBaseLineDebug && styles.debugBaseLine,
-        ]}
-      >
-        <View
-          style={[
-            styles.searchInputWrapper,
-            {
-              backgroundColor:
-                backgroundColor ?? theme.colors.background.surface,
-            },
-          ]}
-        >
-          <Icon
-            source={'navigation_search'}
-            size={24}
-            color={theme.colors.text.hint}
-          />
-          {renderInputView()}
-          {renderTrailing()}
-        </View>
-        {showButtonText && (
-          <TouchableOpacity
-            onPress={onPressButtonText}
-            accessibilityLabel={`${componentId}|button-text-touch`}
-          >
-            <Text
-              typography={'action_default_bold'}
-              style={styles.textButton}
-              accessibilityLabel={`${componentId}|button-text`}
-            >
-              {buttonText}
-            </Text>
-          </TouchableOpacity>
-        )}
-      </View>
-    </ComponentContext.Provider>
-  );
-};
-
-export default forwardRef(InputSearch);

package/src/foundations/Input/InputTextArea.tsx

@@ -1,218 +0,0 @@
-import React, {
-  forwardRef,
-  useContext,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from 'react';
-import {
-  NativeSyntheticEvent,
-  TextInput,
-  TextInputFocusEventData,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import { ApplicationContext, MiniAppContext } from '../Context';
-import { Icon } from '../Icon';
-import { Text, useScaleSize } from '../Text';
-import { Spacing } from '../Consts';
-import { ErrorView, FloatingView, getBorderColor, MAX_LENGTH } from './common';
-import { InputTextAreaProps } from './index';
-import styles from './styles';
-import SystemTextInput from './SystemTextInput';
-import { useComponentId } from '../Application';
-
-const InputTextArea = forwardRef(
-  (
-    {
-      errorMessage,
-      onChangeText,
-      floatingIconColor,
-      floatingIcon,
-      floatingValue,
-      onFocus,
-      onBlur,
-      disabled = false,
-      value,
-      defaultValue,
-      height,
-      placeholder,
-      maxLength = MAX_LENGTH,
-      required,
-      errorSpacing,
-      style,
-      hintText,
-      ...props
-    }: InputTextAreaProps,
-    ref,
-  ) => {
-    const componentName = 'InputTextArea';
-
-    const { componentId } = useComponentId(
-      `${componentName}/${placeholder}`,
-      props.accessibilityLabel,
-    );
-    const { theme } = useContext(ApplicationContext);
-    const context = useContext<any>(MiniAppContext);
-    const DEFAULT_HEIGHT = useScaleSize(104);
-
-    const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
-    const scaledFontSize = useScaleSize(14);
-    const [focused, setFocused] = useState(false);
-    const [inputValue, setInputValue] = useState(defaultValue ?? '');
-    const inputRef = useRef<TextInput | null>(null);
-
-    useEffect(() => {
-      setInputValue(value ?? '');
-    }, [value]);
-
-    const onClearText = () => {
-      inputRef?.current?.clear();
-      inputRef.current?.setNativeProps({ text: '' });
-      _onChangeText('');
-    };
-
-    const _onChangeText = (text: string) => {
-      onChangeText?.(text);
-      setInputValue(text);
-    };
-
-    const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
-      setFocused(true);
-      onFocus?.(e);
-    };
-
-    const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
-      setFocused(false);
-      onBlur?.(e);
-    };
-
-    useImperativeHandle(ref, () => {
-      return {
-        clear: onClearText,
-        focus: () => inputRef.current?.focus(),
-        blur: () => inputRef.current?.blur(),
-        setText: (text: string) => _onChangeText(text),
-      };
-    });
-
-    const renderCountingView = () => {
-      return (
-        <View style={styles.countingView}>
-          <Text
-            color={theme.colors.text.hint}
-            typography={'description_xs_regular'}
-          >
-            {`${inputValue.length}/${maxLength}`}
-          </Text>
-        </View>
-      );
-    };
-    const renderInputView = () => {
-      const disabledColor = theme.colors.text.disable;
-      let textColor = theme.colors.text.default;
-      let placeholderColor = theme.colors.text.hint;
-
-      if (disabled) {
-        textColor = disabledColor;
-        placeholderColor = disabledColor;
-      }
-
-      return (
-        <View
-          style={[
-            styles.textAreaWrapper,
-            {
-              height: height || DEFAULT_HEIGHT,
-              backgroundColor: theme.colors.background.surface,
-            },
-            getBorderColor(theme, focused, errorMessage, disabled),
-          ]}
-        >
-          <FloatingView
-            floatingValue={floatingValue}
-            floatingIconColor={floatingIconColor}
-            disabled={disabled}
-            floatingIcon={floatingIcon}
-            required={required}
-            componentId={componentId}
-          />
-          <View style={styles.rowArea}>
-            <View style={styles.textAreaView}>
-              <SystemTextInput
-                {...props}
-                ref={inputRef}
-                accessibilityLabel={`${componentId}`}
-                accessibilityState={{
-                  disabled: disabled,
-                  ...props.accessibilityState,
-                }}
-                editable={!disabled}
-                textAlignVertical="top"
-                allowFontScaling={false}
-                style={[
-                  {
-                    width: '100%',
-                    flex: 1,
-                    paddingRight: Spacing.XS,
-                    paddingVertical: Spacing.XS,
-                    fontSize: scaledFontSize,
-                  },
-                  {
-                    color: textColor,
-                  },
-                ]}
-                defaultValue={defaultValue}
-                maxLength={maxLength}
-                textBreakStrategy="highQuality"
-                multiline={true}
-                value={inputValue}
-                onChangeText={_onChangeText}
-                onFocus={_onFocus}
-                onBlur={_onBlur}
-                placeholder={placeholder}
-                selectionColor={theme.colors.primary}
-                placeholderTextColor={placeholderColor}
-              />
-            </View>
-            {focused && inputValue.length > 0 && (
-              <TouchableOpacity
-                style={styles.iconWrapper}
-                onPress={onClearText}
-                accessibilityLabel={`${componentId}|clear-icon-touch`}
-              >
-                <Icon
-                  source="24_navigation_close_circle_full"
-                  size={16}
-                  color={theme.colors.text.hint}
-                  accessibilityLabel={`${componentId}|clear-icon`}
-                />
-              </TouchableOpacity>
-            )}
-          </View>
-          {renderCountingView()}
-        </View>
-      );
-    };
-
-    return (
-      <View
-        style={[
-          style,
-          styles.wrapper,
-          showBaseLineDebug && styles.debugBaseLine,
-        ]}
-      >
-        {renderInputView()}
-        <ErrorView
-          errorMessage={errorMessage}
-          errorSpacing={errorSpacing}
-          hintText={hintText}
-        />
-      </View>
-    );
-  },
-);
-
-export default InputTextArea;

package/src/foundations/Input/SystemTextInput.tsx

@@ -1,44 +0,0 @@
-import React, { FC } from 'react';
-import {
-  Platform,
-  TextInput,
-  TextInputProps,
-  TouchableOpacity,
-} from 'react-native';
-import { Styles } from '../Consts';
-
-interface SystemTextInputProps extends TextInputProps {
-  ref?: React.RefObject<TextInput | null>;
-}
-
-const SystemTextInput: FC<SystemTextInputProps> = props => {
-  const { editable, onPressIn, onPressOut, ref } = props;
-
-  const needsAndroidWrapper =
-    Platform.OS === 'android' && !editable && (onPressIn || onPressOut);
-
-  const inputProps: TextInputProps = {
-    ...props,
-    ...(needsAndroidWrapper
-      ? { onPressIn: undefined, onPressOut: undefined }
-      : null),
-    ...(editable === false ? { accessibilityState: undefined } : null),
-  };
-
-  if (needsAndroidWrapper) {
-    return (
-      <TouchableOpacity
-        activeOpacity={1}
-        onPressIn={onPressIn}
-        onPressOut={onPressOut}
-        style={Styles.flex}
-      >
-        <TextInput ref={ref} {...inputProps} pointerEvents="none" />
-      </TouchableOpacity>
-    );
-  }
-
-  return <TextInput ref={ref} {...inputProps} />;
-};
-
-export default SystemTextInput;