@momo-kits/foundation 0.75.1-beta.3

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 './common';
+
+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,125 @@
+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;
+};
+
+export const checkTyping = (text: string, value: boolean, setValue: any) => {
+  let typing = text?.length > 0;
+  if (typing != value) {
+    setValue(typing);
+  }
+};

package/Input/index.tsx

@@ -0,0 +1,41 @@
+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 {
+  size?: 'small' | 'large';
+  floatingValue?: string;
+  floatingIcon?: string;
+  errorMessage?: string;
+  icon?: string;
+  disabled?: boolean;
+  floatingIconColor?: string;
+  iconColor?: string;
+  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 {
+  height?: number;
+}
+
+export interface InputSearchProps extends InputPropsOmitForSearch {
+  buttonText?: string;
+  showButtonText?: boolean;
+  showBorder?: boolean;
+}
+
+export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}
+
+export {Input, InputTextArea, InputSearch, InputMoney};

package/Input/styles.ts

@@ -0,0 +1,122 @@
+import {StyleSheet} from 'react-native';
+import {Radius, Spacing} from '../Consts';
+
+export default StyleSheet.create({
+  //input style
+  input: {width: '100%', paddingLeft: Spacing.M, height: '100%'},
+  wrapper: {
+    width: '100%',
+  },
+  container: {
+    borderWidth: 1,
+    borderRadius: Radius.S,
+    height: 56,
+    paddingVertical: 8,
+  },
+  smallContainer: {
+    borderRadius: Radius.S,
+    borderWidth: 1,
+    height: 48,
+  },
+  floatingView: {
+    position: 'absolute',
+    top: -10,
+    left: Spacing.S,
+    paddingHorizontal: Spacing.S,
+    flexDirection: 'row',
+  },
+  floatingIcon: {marginLeft: Spacing.XS},
+  errorIcon: {marginRight: Spacing.XS},
+  errorView: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: Spacing.XS,
+  },
+  inputView: {
+    justifyContent: 'space-between',
+    flex: 1,
+  },
+  iconView: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginLeft: Spacing.XS,
+    marginRight: Spacing.M,
+  },
+  icon: {
+    width: 24,
+    height: 24,
+  },
+  iconWrapper: {
+    width: 24,
+    height: 24,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  inputWrapper: {
+    flexDirection: 'row',
+    marginTop: Spacing.S,
+  },
+
+  //text area style
+  textAreaView: {
+    flex: 1,
+  },
+  textArea: {
+    width: '100%',
+    flex: 1,
+    paddingRight: Spacing.XS,
+  },
+  textAreaWrapper: {
+    borderWidth: 1,
+    borderRadius: Radius.S,
+    paddingVertical: Spacing.S,
+    paddingLeft: Spacing.M,
+    paddingRight: Spacing.S,
+  },
+  countingView: {
+    width: '100%',
+    alignItems: 'flex-end',
+    paddingRight: Spacing.XS,
+  },
+  rowArea: {
+    flexDirection: 'row',
+    width: '100%',
+    flex: 1,
+    marginBottom: Spacing.XS,
+  },
+
+  //searchInput
+  searchInputWrapper: {
+    flexDirection: 'row',
+    borderRadius: Radius.XL,
+    borderWidth: 1,
+    paddingHorizontal: Spacing.S,
+    alignItems: 'center',
+    flex: 1,
+  },
+  searchInput: {
+    height: 36,
+    marginLeft: Spacing.S,
+    flex: 1,
+  },
+  searchInputView: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  iconSearchInput: {
+    marginLeft: Spacing.S,
+  },
+  searchInputContainer: {flexDirection: 'row', alignItems: 'center'},
+  textButton: {marginLeft: Spacing.L},
+  divider: {
+    width: 1,
+    marginLeft: Spacing.XS,
+  },
+  moneyInput: {
+    width: '100%',
+    paddingLeft: Spacing.M,
+    height: '100%',
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+});

package/Input/utils.ts

@@ -0,0 +1,63 @@
+const formatNumberToMoney = (number: number, currency = '') => {
+  if (!number || isNaN(number) || Number(number) === 0) {
+    return `0${currency}`;
+  }
+
+  const array = [];
+  let result = '';
+  let isNegative = false;
+
+  if (number < 0) {
+    isNegative = true;
+  }
+
+  const numberString = Math.abs(number).toString();
+  if (numberString.length < 3) {
+    return numberString + currency;
+  }
+
+  let count = 0;
+  for (let i = numberString.length - 1; i >= 0; i -= 1) {
+    count += 1;
+    if (numberString[i] === '.' || numberString[i] === ',') {
+      array.push(',');
+      count = 0;
+    } else {
+      array.push(numberString[i]);
+    }
+    if (count === 3 && i >= 1) {
+      array.push('.');
+      count = 0;
+    }
+  }
+
+  for (let i = array.length - 1; i >= 0; i -= 1) {
+    result += array[i];
+  }
+
+  if (isNegative) {
+    result = `-${result}`;
+  }
+
+  return result + currency;
+};
+
+const formatMoneyToNumber = (money: string, currencyUnit: string) => {
+  if (money && money.length > 0) {
+    const moneyString = money
+      .replace(currencyUnit, '')
+      .replace(/,/g, '')
+      .replace(/đ/g, '')
+      .replace(/\./g, '')
+      .replace(/ /g, '');
+    const number = Number(moneyString);
+    if (isNaN(number)) {
+      return 0;
+    }
+    return number;
+  }
+
+  return Number(money);
+};
+
+export {formatMoneyToNumber, formatNumberToMoney};