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

package/Input/InputSearch.tsx

@@ -0,0 +1,151 @@
+import React, {forwardRef, useContext, useRef, useState} from 'react';
+import {
+  NativeSyntheticEvent,
+  TextInput,
+  TextInputFocusEventData,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {InputSearchProps} from './index';
+import {ApplicationContext} from '../Application';
+import styles from './styles';
+import {Icon} from '../Icon';
+import {Text} from '../Text';
+import {checkTyping} from './utils';
+
+const InputSearch = forwardRef(
+  (
+    {
+      placeholder,
+      onFocus,
+      onBlur,
+      iconColor,
+      value,
+      onChangeText,
+      icon,
+      buttonText = 'Hủy',
+      showButtonText = true,
+      style,
+      defaultValue,
+      onPressButtonText,
+        hasColorBG = true,
+      ...props
+    }: InputSearchProps,
+    ref,
+  ) => {
+    const {theme} = useContext(ApplicationContext);
+    const [focused, setFocused] = useState(false);
+    const [haveValue, setHaveValue] = useState(!!value || !!defaultValue);
+    const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
+
+    const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      setFocused(true);
+      onFocus?.(e);
+    };
+
+    const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      setFocused(false);
+      onBlur?.(e);
+    };
+
+    const onClearText = () => {
+      inputRef?.current?.clear();
+      _onChangeText('');
+    };
+
+    const _onChangeText = (text: string) => {
+      checkTyping(text, haveValue, setHaveValue);
+      onChangeText?.(text);
+    };
+
+    const renderInputView = () => {
+      return (
+        <TextInput
+          {...props}
+          textAlignVertical="center"
+          ref={inputRef}
+          style={[
+            styles.searchInput,
+            {
+              color: theme.colors.text.default,
+            },
+          ]}
+          value={value}
+          onChangeText={_onChangeText}
+          onFocus={_onFocus}
+          onBlur={_onBlur}
+          placeholder={placeholder}
+          selectionColor={theme.colors.primary}
+          placeholderTextColor={theme.colors.text.hint}
+        />
+      );
+    };
+
+    const renderIconView = () => {
+      return (
+        <View
+          style={{
+            flexDirection: 'row',
+          }}>
+          {focused && haveValue && (
+            <TouchableOpacity style={styles.iconWrapper} onPress={onClearText}>
+              <Icon
+                source="24_navigation_close_circle_full"
+                size={16}
+                color={theme.colors.text.hint}
+              />
+            </TouchableOpacity>
+          )}
+          {!!icon && (
+            <View style={{flexDirection: 'row'}}>
+              <View
+                style={[
+                  styles.divider,
+                  {
+                    backgroundColor: theme.colors.primary,
+                  },
+                ]}
+              />
+              <Icon
+                color={iconColor}
+                source={icon}
+                style={styles.iconSearchInput}
+              />
+            </View>
+          )}
+        </View>
+      );
+    };
+
+    const backgroundColor = hasColorBG ?theme.colors.background.default:theme.colors.background.surface
+    return (
+      <View style={[style, styles.searchInputContainer]}>
+        <View
+          style={[
+            styles.searchInputWrapper,
+            {
+              backgroundColor,
+              borderColor: theme.colors.background.surface,
+            }
+          ]}>
+          <Icon
+            source={'navigation_search'}
+            size={24}
+            color={theme.colors.text.hint}
+          />
+          {renderInputView()}
+          {renderIconView()}
+        </View>
+        {showButtonText && (
+          <TouchableOpacity onPress={onPressButtonText}>
+            <Text typography={'action_default_bold'} style={styles.textButton}>
+              {buttonText}
+            </Text>
+          </TouchableOpacity>
+        )}
+      </View>
+    );
+  },
+);
+
+export default InputSearch;

package/Input/InputTextArea.tsx

@@ -0,0 +1,159 @@
+import React, {forwardRef, useContext, useRef, useState} from 'react';
+import {
+  NativeSyntheticEvent,
+  TextInput,
+  TextInputFocusEventData,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import styles from './styles';
+import {Text} from '../Text';
+import {
+  DEFAULT_HEIGHT,
+  ErrorView,
+  FloatingView,
+  getBorderColor,
+  MAX_LENGTH,
+} from './common';
+import {InputTextAreaProps} from './index';
+import {Icon} from '../Icon';
+import {ApplicationContext} from '../Application';
+
+const InputTextArea = forwardRef(
+  (
+    {
+      errorMessage,
+      onChangeText,
+      floatingIconColor,
+      floatingIcon,
+      floatingValue,
+      onFocus,
+      onBlur,
+      disabled = false,
+      value,
+      defaultValue,
+      height,
+      placeholder,
+      maxLength = MAX_LENGTH,
+      required,
+      errorSpacing,
+      style,
+      ...props
+    }: InputTextAreaProps,
+    ref,
+  ) => {
+    const {theme} = useContext(ApplicationContext);
+    const [focused, setFocused] = useState(false);
+    const [inputValue, setInputValue] = useState(defaultValue ?? '');
+    const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
+
+    const onClearText = () => {
+      inputRef?.current?.clear();
+      _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);
+    };
+
+    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}
+          />
+          <View style={styles.rowArea}>
+            <View style={styles.textAreaView}>
+              <TextInput
+                {...props}
+                ref={inputRef}
+                editable={!disabled}
+                textAlignVertical="top"
+                style={[
+                  styles.textArea,
+                  {
+                    color: textColor,
+                  },
+                ]}
+                maxLength={maxLength}
+                textBreakStrategy="highQuality"
+                multiline={true}
+                value={value}
+                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}>
+                <Icon
+                  source="24_navigation_close_circle_full"
+                  size={16}
+                  color={theme.colors.text.hint}
+                />
+              </TouchableOpacity>
+            )}
+          </View>
+          {renderCountingView()}
+        </View>
+      );
+    };
+
+    return (
+      <View style={[style, styles.wrapper]}>
+        {renderInputView()}
+        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+      </View>
+    );
+  },
+);
+
+export default InputTextArea;

package/Input/common.tsx

@@ -0,0 +1,129 @@
+import {View, ViewStyle} from 'react-native';
+import styles from './styles';
+import {scaleSize, Text} from '../Text';
+import React, {FC, useContext} from 'react';
+import {ApplicationContext} from '../Application';
+import {Icon} from '../Icon';
+import {Styles} from '../Consts';
+import {Theme} from '../Application/types';
+
+type FloatingViewProps = {
+  floatingValue?: string;
+  floatingIconColor?: string;
+  disabled?: boolean;
+  floatingIcon?: string;
+  required?: boolean;
+  style?: ViewStyle;
+};
+
+export const DEFAULT_HEIGHT = scaleSize(104);
+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') => {
+  if (size === 'small') {
+    return styles.smallContainer;
+  }
+  return styles.container;
+};
+export const ErrorView: FC<{errorMessage?: string; errorSpacing?: boolean}> = ({
+  errorMessage,
+  errorSpacing,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const errorColor = theme.colors.error.primary;
+  if (errorMessage) {
+    return (
+      <View style={styles.errorView}>
+        <View style={styles.errorIcon}>
+          <Icon color={errorColor} source="ic_error" size={16} />
+        </View>
+        <Text
+          style={Styles.flex}
+          color={errorColor}
+          numberOfLines={2}
+          typography={'description_default_regular'}>
+          {errorMessage}
+        </Text>
+      </View>
+    );
+  }
+  if (errorSpacing) {
+    return <View style={[styles.errorView, {height: 18}]} />;
+  }
+  return <View />;
+};
+
+export const FloatingView: FC<FloatingViewProps> = ({
+  floatingValue,
+  floatingIconColor,
+  disabled,
+  floatingIcon,
+  required,
+  style,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+
+  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,
+          },
+          style,
+        ]}>
+        <Text color={floatingTextColor} typography={'label_s_medium'}>
+          {floatingValue}
+          {required && (
+            <Text
+              typography={'label_s_medium'}
+              color={theme.colors.error.primary}>
+              *
+            </Text>
+          )}
+        </Text>
+        {!!floatingIcon && (
+          <Icon
+            color={floatingIconTintColor}
+            source={floatingIcon}
+            size={16}
+            style={styles.floatingIcon}
+          />
+        )}
+      </View>
+    );
+  }
+  return null;
+};

package/Input/index.tsx

@@ -0,0 +1,251 @@
+import Input from './Input';
+import InputTextArea from './InputTextArea';
+import InputSearch from './InputSearch';
+import InputMoney from './InputMoney';
+import InputOTP from './InputOTP';
+import InputDropDown from './InputDropDown';
+import {TextInputProps, ViewStyle} from 'react-native';
+
+export interface InputProps extends TextInputProps {
+  /**
+   *  Optional. Defines the size of the Input component.
+   */
+  size?: 'small' | 'large';
+
+  /**
+   * Optional. Represents the value for the floating title in the Input component.
+   */
+  floatingValue?: string;
+
+  /**
+   * Optional. Represents the name or key of the floating icon to be displayed in the Input component.
+   */
+  floatingIcon?: string;
+
+  /**
+   * Optional. Represents the error message to be displayed below the Input component when there is an error.
+   */
+  errorMessage?: string;
+
+  /**
+   * Optional. Represents the name or key of the icon to be displayed in the Input component.
+   */
+  icon?: string;
+
+  /**
+   * Optional. Represents the color of the icon in the Input component.
+   */
+  iconColor?: string;
+
+  /**
+   * Optional. If `true`, the user won't be able to interact with the Input component.
+   * Defaults to `false` if not provided.
+   */
+  disabled?: boolean;
+
+  /**
+   * Optional. Represents the color of the floating icon in the Input component.
+   */
+  floatingIconColor?: string;
+
+  /**
+   * Optional. If `true`, the Input component is marked as required,
+   * indicating that the user must provide a value before submitting a form.
+   * Defaults to `false` if not provided.
+   */
+  required?: boolean;
+
+  /**
+   * Optional. If `true`,
+   * include spacing when Input not have error message.
+   * Defaults to `false` if not provided.
+   */
+  errorSpacing?: boolean;
+
+  /**
+   *  If true, the icon of input will use be show indicator loading.
+   */
+  loading?: boolean;
+
+  /**
+   *  Optional. Represents the leading icon in the Input component.
+   */
+  leadingIcon?: string;
+
+  /**
+   * Optional. Represents the color of the leading icon in the Input component.
+   */
+  leadingIconColor?: string;
+
+  fontWeight?: 'Regular' | 'Bold';
+
+  onPressIcon?: () => void;
+}
+
+type InputPropsWithoutSizeAndIcon = Omit<
+  InputProps,
+  'size' | 'icon' | 'iconColor'
+>;
+
+type InputPropsWithoutPlaceholder = Omit<InputProps, 'placeholder'>;
+
+export interface InputTextAreaProps extends InputPropsWithoutSizeAndIcon {
+  /**
+   * Optional. Defines the height of the InputTextArea component.
+   * It can be used to set a specific height for the text area.
+   */
+  height?: number;
+}
+
+export interface InputSearchProps extends TextInputProps {
+  /**
+   * Optional. Represents the text to be displayed on the search button within the InputSearch component.
+   */
+  buttonText?: string;
+
+  /**
+   * Optional. If `true`, the text on the search button will be displayed.
+   * Defaults to `false` if not provided.
+   */
+  showButtonText?: boolean;
+
+  onPressButtonText?: () => void;
+
+  /**
+   * Optional. Represents the color of the icon in the Input component.
+   */
+  iconColor?: string;
+
+  /**
+   * Optional. Represents the name or key of the icon to be displayed in the Input component.
+   */
+  icon?: string;
+
+  hasColorBG?: boolean
+}
+
+export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}
+
+export type OTPInputLength = 2 | 4 | 6 | 8 | 10;
+
+export interface InputOTPProps extends InputPropsWithoutSizeAndIcon {
+  /**
+   * Optional. Defines the length of the OTP (One Time Password) input.
+   * Can be 2, 4, 6, 8, or 10.
+   */
+  length?: OTPInputLength;
+
+  /**
+   * Optional. Defines the data type of the OTP input.
+   * 'string' - The OTP input will be treated as a string.
+   * 'number' - The OTP input will be treated as a number.
+   */
+  dataType?: 'string' | 'number';
+}
+
+export type CaretProps = {
+  /**
+   * Optional. The index of the caret in the input field.
+   * Represents the position where the caret is located.
+   */
+  index?: number;
+
+  /**
+   * Optional. The total length of the input field in which the caret is present.
+   * This dictates the maximum value of the 'index' property.
+   */
+  length?: number;
+};
+
+export interface InputDropDownProps {
+  /**
+   * Optional. Defines the size of the InputDropDown component.
+   * 'small' - A smaller, less prominent input.
+   * 'large' - A larger, more prominent input.
+   */
+  size?: 'small' | 'large';
+
+  /**
+   * Optional. The current value of the InputDropDown.
+   */
+  value?: string;
+
+  /**
+   * Optional. Text that is displayed when there is no value set in the InputDropDown.
+   */
+  placeholder?: string;
+
+  /**
+   * Optional. Function to be called when the InputDropDown is pressed.
+   */
+  onPress?: () => void;
+
+  /**
+   * Optional. Represents the value for the floating title in the InputDropDown component.
+   */
+  floatingValue?: string;
+
+  /**
+   * Optional. Represents the name or key of the floating icon to be displayed in the InputDropDown component.
+   */
+  floatingIcon?: string;
+
+  /**
+   * Optional. Represents the error message to be displayed below the InputDropDown component when there is an error.
+   */
+  errorMessage?: string;
+
+  /**
+   * Optional. Represents the name or key of the icon to be displayed in the InputDropDown component.
+   */
+  icon?: string;
+
+  /**
+   * Optional. Represents the color of the icon in the InputDropDown component.
+   */
+  iconColor?: string;
+
+  /**
+   * Optional. If `true`, the user won't be able to interact with the InputDropDown component.
+   * Defaults to `false` if not provided.
+   */
+  disabled?: boolean;
+
+  /**
+   * Optional. Represents the color of the floating icon in the InputDropDown component.
+   */
+  floatingIconColor?: string;
+
+  /**
+   * Optional. If `true`, the InputDropDown component is marked as required,
+   * indicating that the user must provide a value before submitting a form.
+   * Defaults to `false` if not provided.
+   */
+  required?: boolean;
+
+  /**
+   * Optional. If `true`,
+   * includes spacing when InputDropDown does not have an error message.
+   * Defaults to `false` if not provided.
+   */
+  errorSpacing?: boolean;
+
+  /**
+   * If `true`, the icon of the input will show an indicator for loading.
+   */
+  loading?: boolean;
+
+  /**
+   * Optional. Represents the leading icon in the InputDropDown component.
+   */
+  leadingIcon?: string;
+
+  /**
+   * Optional. Represents the color of the leading icon in the InputDropDown component.
+   */
+  leadingIconColor?: string;
+
+  style: ViewStyle | ViewStyle[];
+}
+
+export {Input, InputTextArea, InputSearch, InputMoney, InputOTP, InputDropDown};