@momo-kits/foundation 0.75.1-beta.10

package/Input/InputMoney.tsx

@@ -0,0 +1,132 @@
+import React, {FC, useContext, useRef, useState} from 'react';
+import {
+  NativeSyntheticEvent,
+  TextInput,
+  TextInputFocusEventData,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {ApplicationContext} from '../Navigation';
+import styles from './styles';
+import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
+import {InputMoneyProps} from './index';
+import {Icon} from '../Icon';
+import {formatMoneyToNumber, formatNumberToMoney} from './utils';
+
+const InputMoney: FC<InputMoneyProps> = ({
+  onChangeText,
+  floatingValue,
+  floatingIcon,
+  size = 'small',
+  onBlur,
+  onFocus,
+  errorMessage,
+  icon,
+  disabled,
+  floatingIconColor,
+  iconColor,
+  required,
+  ...props
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const [focused, setFocused] = useState(false);
+  const inputRef = useRef<any>(null);
+  const [value, setValue] = useState('');
+  const onClearText = () => {
+    inputRef?.current?.clear();
+    setValue('');
+    onChangeText?.('');
+  };
+  const _onChangeText = (text: string) => {
+    if (text.length < value.length && value.indexOf(text) === 0) {
+      text = value.slice(0, -2) + 'đ';
+    }
+    const valueFormat = formatMoneyToNumber(text, 'đ');
+    setValue(formatNumberToMoney(valueFormat, 'đ'));
+    onChangeText?.(formatMoneyToNumber(text, 'đ').toString());
+  };
+
+  const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    setFocused(true);
+    onFocus?.(e);
+  };
+
+  const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    setFocused(false);
+    onBlur?.(e);
+  };
+
+  const renderInputView = () => {
+    const disabledColor = theme.colors.text.disable;
+    let textColor = theme.colors.text.default;
+    let placeholderColor = theme.colors.text.hint;
+    let iconTintColor = iconColor;
+
+    if (disabled) {
+      textColor = disabledColor;
+      placeholderColor = disabledColor;
+      iconTintColor = disabledColor;
+    }
+
+    return (
+      <View
+        style={[
+          getSizeStyle(size),
+          getBorderColor(focused, errorMessage, disabled),
+          styles.inputWrapper,
+          {backgroundColor: theme.colors.background.surface},
+        ]}>
+        <FloatingView
+          floatingValue={floatingValue}
+          floatingIconColor={floatingIconColor}
+          disabled={disabled}
+          required={required}
+          floatingIcon={floatingIcon}
+        />
+        <View style={styles.inputView}>
+          <TextInput
+            {...props}
+            editable={!disabled}
+            textAlignVertical="top"
+            ref={inputRef}
+            keyboardType={'number-pad'}
+            style={[
+              styles.moneyInput,
+              {
+                color: textColor,
+              },
+            ]}
+            value={value}
+            onChangeText={_onChangeText}
+            onFocus={_onFocus}
+            onBlur={_onBlur}
+            selectionColor={theme.colors.primary}
+            placeholderTextColor={placeholderColor}
+            placeholder={'0đ'}
+          />
+        </View>
+        <View style={styles.iconView}>
+          {focused && (
+            <TouchableOpacity style={styles.iconWrapper} onPress={onClearText}>
+              <Icon
+                source="24_navigation_close_circle_full"
+                size={16}
+                color={theme.colors.text.hint}
+              />
+            </TouchableOpacity>
+          )}
+          {!!icon && <Icon color={iconTintColor} source={icon} />}
+        </View>
+      </View>
+    );
+  };
+
+  return (
+    <View style={styles.wrapper} accessibilityLabel={`InputMoney`}>
+      {renderInputView()}
+      <ErrorView errorMessage={errorMessage} />
+    </View>
+  );
+};
+
+export default InputMoney;

package/Input/InputSearch.tsx

@@ -0,0 +1,161 @@
+import React, {FC, useContext, useRef, useState} from 'react';
+import {
+  NativeSyntheticEvent,
+  TextInput,
+  TextInputFocusEventData,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {InputSearchProps} from './index';
+import {ApplicationContext} from '../Navigation';
+import styles from './styles';
+import {Icon} from '../Icon';
+import {Text} from '../Text';
+import {checkTyping} from './utils';
+
+const InputSearch: FC<InputSearchProps> = ({
+  placeholder,
+  onFocus,
+  onBlur,
+  iconColor,
+  value,
+  onChangeText,
+  icon,
+  buttonText = 'Hủy',
+  showButtonText = true,
+  showBorder = true,
+  style,
+  defaultValue,
+  ...props
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const [focused, setFocused] = useState(false);
+  const [haveValue, setHaveValue] = useState(!!value || !!defaultValue);
+  const inputRef = useRef<any>(null);
+  let iconTintColor = iconColor;
+
+  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 getBorderColor = () => {
+    let borderColor = showBorder
+      ? theme.colors.border.default
+      : theme.colors.background.surface;
+
+    if (focused) {
+      borderColor = theme.colors.primary;
+    }
+
+    return {borderColor};
+  };
+
+  const renderInputView = () => {
+    let textColor = theme.colors.text.default;
+    let placeholderColor = theme.colors.text.hint;
+
+    return (
+      <TextInput
+        {...props}
+        textAlignVertical="top"
+        ref={inputRef}
+        style={[
+          styles.searchInput,
+          {
+            color: textColor,
+          },
+        ]}
+        value={value}
+        onChangeText={_onChangeText}
+        onFocus={_onFocus}
+        onBlur={_onBlur}
+        placeholder={placeholder}
+        selectionColor={theme.colors.primary}
+        placeholderTextColor={placeholderColor}
+      />
+    );
+  };
+
+  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={iconTintColor}
+              source={icon}
+              style={styles.iconSearchInput}
+            />
+          </View>
+        )}
+      </View>
+    );
+  };
+  return (
+    <View
+      style={[style, styles.searchInputContainer]}
+      accessibilityLabel={`InputSearch`}>
+      <View
+        style={[
+          getBorderColor(),
+          styles.searchInputWrapper,
+          {
+            backgroundColor: theme.colors.background.surface,
+          },
+        ]}>
+        <Icon
+          source={'navigation_search'}
+          size={24}
+          color={theme.colors.text.hint}
+        />
+        {renderInputView()}
+        {renderIconView()}
+      </View>
+      {showButtonText && (
+        <TouchableOpacity>
+          <Text typography={'action_default'} style={styles.textButton}>
+            {buttonText}
+          </Text>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+
+export default InputSearch;

package/Input/InputTextArea.tsx

@@ -0,0 +1,152 @@
+import React, {FC, useContext, useRef, useState} from 'react';
+import {
+  NativeSyntheticEvent,
+  TextInput,
+  TextInputFocusEventData,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import styles from './styles';
+import {Text} from '../Text';
+import {ApplicationContext} from '../Navigation';
+import {
+  DEFAULT_HEIGHT,
+  ErrorView,
+  FloatingView,
+  getBorderColor,
+  MAX_LENGTH,
+} from './common';
+import {InputTextAreaProps} from './index';
+import {Icon} from '../Icon';
+
+const InputTextArea: FC<InputTextAreaProps> = props => {
+  const {theme} = useContext(ApplicationContext);
+  const {
+    errorMessage,
+    onChangeText,
+    floatingIconColor,
+    floatingIcon,
+    floatingValue,
+    onFocus,
+    onBlur,
+    disabled,
+    value,
+    defaultValue,
+    height,
+    placeholder,
+    maxLength,
+    required,
+  } = props;
+
+  const [focused, setFocused] = useState(false);
+  const [inputValue, setInputValue] = useState(defaultValue ?? '');
+  const inputRef = useRef<any>(null);
+
+  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'}>
+          {`${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={[
+          getBorderColor(focused, errorMessage, disabled),
+          styles.textAreaWrapper,
+          {
+            height: height || DEFAULT_HEIGHT,
+            backgroundColor: theme.colors.background.surface,
+          },
+        ]}>
+        <FloatingView
+          floatingValue={floatingValue}
+          floatingIconColor={floatingIconColor}
+          disabled={disabled}
+          floatingIcon={floatingIcon}
+          required={required}
+        />
+        <View style={styles.rowArea}>
+          <View style={styles.textAreaView}>
+            <TextInput
+              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={styles.wrapper} accessibilityLabel={`InputTextArea`}>
+      {renderInputView()}
+      <ErrorView errorMessage={errorMessage} />
+    </View>
+  );
+};
+
+InputTextArea.defaultProps = {
+  maxLength: MAX_LENGTH,
+};
+
+export default InputTextArea;

package/Input/common.tsx

@@ -0,0 +1,118 @@
+import {View} from 'react-native';
+import styles from './styles';
+import {Text} from '../Text';
+import React, {FC, useContext} from 'react';
+import {ApplicationContext} from '../Navigation';
+import {Icon} from '../Icon';
+import {Styles} from '../Consts';
+
+type FloatingViewProps = {
+  floatingValue?: string;
+  floatingIconColor?: string;
+  disabled?: boolean;
+  floatingIcon?: string;
+  required?: boolean;
+};
+
+export const DEFAULT_HEIGHT = 112;
+export const MAX_LENGTH = 300;
+
+export const getBorderColor = (
+  focused: boolean,
+  errorMessage?: string,
+  disabled?: boolean,
+) => {
+  const {theme} = useContext(ApplicationContext);
+
+  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}> = ({errorMessage}) => {
+  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={1}
+          typography={'description_s'}>
+          {errorMessage}
+        </Text>
+      </View>
+    );
+  }
+  return null;
+};
+
+export const FloatingView: FC<FloatingViewProps> = ({
+  floatingValue,
+  floatingIconColor,
+  disabled,
+  floatingIcon,
+  required,
+}) => {
+  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,
+          },
+        ]}>
+        <Text color={floatingTextColor} typography={'label_s'}>
+          {floatingValue}
+          {required && (
+            <Text typography={'label_s'} 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,96 @@
+import Input from './Input';
+import InputTextArea from './InputTextArea';
+import InputSearch from './InputSearch';
+import InputMoney from './InputMoney';
+import {TextInputProps} 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. 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. Represents the color of the icon in the Input component.
+   */
+  iconColor?: 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;
+}
+
+type InputPropsWithoutSizeAndIcon = Omit<
+  InputProps,
+  'size' | 'icon' | 'iconColor'
+>;
+type InputPropsOmitForSearch = Omit<
+  InputProps,
+  'required' | 'size' | 'errorMessage' | 'disabled'
+>;
+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 InputPropsOmitForSearch {
+  /**
+   * 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;
+
+  /**
+   * Optional. If `true`, a border will be displayed around the InputSearch component.
+   * Defaults to `true` if not provided.
+   */
+  showBorder?: boolean;
+}
+
+export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}
+
+export {Input, InputTextArea, InputSearch, InputMoney};