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

package/src/foundations/Input/index.tsx

@@ -1,373 +0,0 @@
-import {
-  GestureResponderEvent,
-  TextInputProps,
-  TouchableOpacityProps,
-} from 'react-native';
-import Input from './Input';
-import InputDropDown from './InputDropDown';
-import InputMoney from './InputMoney';
-import InputOTP from './InputOTP';
-import InputSearch from './InputSearch';
-import InputTextArea from './InputTextArea';
-import InputPhoneNumber from './InputPhoneNumber';
-import { checkValidPhoneNumber } from './utils';
-
-export type OTPInputLength = 2 | 4 | 6 | 8 | 10;
-
-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.
-   */
-  trailing?: string;
-
-  /**
-   * Optional. Represents the color of the icon in the Input component.
-   */
-  trailingColor?: string;
-
-  /**
-   * Optional. callback function to be called when the icon is pressed.
-   */
-  onPressTrailing?: () => void;
-
-  /**
-   * 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. callback function to be called when the leading icon is pressed.
-   */
-  onPressLeadingIcon?: () => void;
-
-  /**
-   * Optional. Represents the color of the leading icon in the Input component.
-   */
-  leadingIconColor?: string;
-
-  /**
-   * Optional. Represents the font weight of the text in the Input component.
-   */
-  fontWeight?: string;
-
-  /**
-   * Optional. Params auto tracking component.
-   */
-  params?: any;
-
-  /**
-   * Optional. Represents text below the Input component.
-   */
-  hintText?: string;
-
-  /**
-   * Optional. Represents the style of the Input component.
-   */
-  onPressFloatingIcon?: () => void;
-
-  /**
-   * Optional. Represents the style of the Input component.
-   */
-  showClearIcon?: boolean;
-}
-
-export interface InputTextAreaProps extends Omit<InputProps, 'size'> {
-  /**
-   * 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;
-
-  /**
-   * Optional. Represents the value for the floating title in the InputSearch component.
-   */
-  onPressButtonText?: () => void;
-
-  /**
-   * @deprecated Use `trailing` instead.
-   * Optional. Represents the name or key of the icon to be displayed in the Input component.
-   */
-  icon?: string;
-
-  /**
-   * @deprecated Use `trailingColor` instead.
-   * Optional. Represents the color of the icon in the Input component.
-   */
-  iconColor?: string;
-
-  /**
-   * @deprecated Use `onPressTrailing` instead.
-   * Optional. callback function to be called when the icon is pressed.
-   */
-  onPressIcon?: () => void;
-
-  /**
-   * Optional. Represents the name or key of the icon to be displayed in the Input component.
-   */
-  trailing?: string;
-
-  /**
-   * Optional. Represents the color of the icon in the Input component.
-   */
-  trailingColor?: string;
-
-  /**
-   * Optional. callback function to be called when the icon is pressed.
-   */
-  onPressTrailing?: () => void;
-
-  /**
-   * Optional. If `true`, the user won't be able to interact with the Input component.
-   */
-  backgroundColor?: string;
-
-  /**
-   * Optional. Params auto tracking component.
-   */
-  params?: any;
-
-  /**
-   * Optional. Represents the data for typing animation.
-   */
-  typingData?: string[];
-
-  /**
-   * Optional. Represents the callback function to be called when the search button is pressed.
-   * @param e
-   */
-  onPress?: (e: GestureResponderEvent) => void;
-}
-
-export interface InputMoneyProps extends InputProps {
-  currency?: string;
-}
-
-export interface InputOTPProps
-  extends Omit<InputProps, 'size' | 'icon' | 'iconColor'> {
-  /**
-   * 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';
-
-  /**
-   * Optional. Represents the value for the floating title in the InputOTP component.
-   */
-  floatingValue: string;
-}
-
-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 extends TouchableOpacityProps {
-  /**
-   * Optional. Defines the size of the InputDropDown component.
-   * 'small' - A smaller, less prominent input.
-   * 'large' - A larger, more prominent input.
-   */
-  size?: 'small' | 'large';
-
-  /**
-   * Optional. Represents the text to be displayed in the InputDropDown component.
-   */
-  value?: string;
-
-  /**
-   * Optional. Represents the placeholder text to be displayed in the InputDropDown component.
-   */
-  placeholder?: string;
-
-  /**
-   * Optional. Represents the data for the dropdown.
-   */
-  multiline?: boolean;
-
-  /**
-   * 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;
-
-  /**
-   * @deprecated Use `trailing` instead.
-   * Optional. Represents the name or key of the icon to be displayed in the Input component.
-   */
-  icon?: string;
-
-  /**
-   * @deprecated Use `onPressTrailing` instead.
-   * Optional. callback function to be called when the icon is pressed.
-   */
-  onPressIcon?: () => void;
-
-  /**
-   * 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. callback function to be called when the leading icon is pressed.
-   */
-  onPressLeadingIcon?: () => void;
-
-  /**
-   * Optional. Represents the color of the leading icon in the Input component.
-   */
-  leadingIconColor?: string;
-
-  /**
-   * Optional. Params auto tracking component.
-   */
-  params?: any;
-
-  /**
-   * Optional. Represents text below the Input component.
-   */
-  hintText?: string;
-
-  /**
-   * Optional. Represents the style of the Input component.
-   */
-  onPressFloatingIcon?: () => void;
-}
-
-export interface InputPhoneNumberProps extends InputProps {
-  /**
-   * Optional. Represents the country code to be displayed in the InputPhoneNumber component.
-   * It should be in the format of a string, e.g., "+1" for the United States.
-   */
-  countryCode?: string;
-}
-
-export type InputRef = {
-  clear: () => void;
-  focus: () => void | undefined;
-  blur: () => void | undefined;
-  setText: (text: string) => void;
-};
-
-export {
-  Input,
-  InputDropDown,
-  InputMoney,
-  InputOTP,
-  InputSearch,
-  InputTextArea,
-  InputPhoneNumber,
-};
-
-export {checkValidPhoneNumber};

package/src/foundations/Input/styles.ts

@@ -1,226 +0,0 @@
-import { Platform, StyleSheet } from 'react-native';
-import { Colors, Radius, Spacing } from '../Consts';
-import { scaleSize } from '../Text';
-
-export default StyleSheet.create({
-  //input style
-  input: {
-    flex: 1,
-    paddingLeft: Spacing.M,
-    fontSize: scaleSize(14),
-    height: '100%',
-  },
-  wrapper: {
-    width: '100%',
-  },
-  container: {
-    borderWidth: 1,
-    borderRadius: Radius.S,
-    height: 56,
-  },
-  smallContainer: {
-    borderRadius: Radius.S,
-    borderWidth: 1,
-    height: 48,
-  },
-  floatingView: {
-    position: 'absolute',
-    top: -10,
-    left: Spacing.S,
-    paddingHorizontal: Spacing.S,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  floatingIcon: { marginLeft: Spacing.XS },
-  errorIcon: { marginRight: Spacing.XS, marginTop: Spacing.XXS },
-  errorView: {
-    flexDirection: 'row',
-    marginTop: Spacing.XS,
-  },
-  inputView: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  leadingIconContainer: {
-    marginLeft: Spacing.M,
-    borderRadius: Radius.XS,
-    overflow: 'hidden',
-  },
-  iconView: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginLeft: Spacing.XS,
-    marginRight: Spacing.M,
-  },
-  icon: {
-    marginLeft: Spacing.S,
-  },
-  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,
-    paddingVertical: Spacing.XS,
-    fontSize: scaleSize(14),
-  },
-  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,
-    paddingHorizontal: Spacing.S,
-    alignItems: 'center',
-    flex: 1,
-  },
-  searchInput: {
-    height: 36,
-    marginLeft: Spacing.S,
-    flex: 1,
-    paddingVertical: Spacing.XS,
-  },
-  searchInputView: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  iconSearchInput: {
-    marginLeft: Spacing.S,
-  },
-  searchInputContainer: { flexDirection: 'row', alignItems: 'center' },
-  textButton: { marginLeft: Spacing.L },
-  divider: {
-    width: 1,
-    height: 20,
-    marginLeft: Spacing.XS,
-  },
-  moneyInput: {
-    width: '100%',
-    paddingLeft: Spacing.M,
-    height: '100%',
-    fontSize: scaleSize(20),
-    paddingVertical: Spacing.S,
-    fontWeight: 'bold',
-  },
-  inputStyle: {
-    color: Colors.black_12,
-    fontSize: scaleSize(12),
-    height: Platform.select({
-      android: 60,
-      ios: 36,
-    }),
-  },
-  //OTP
-  otpWrapper: {
-    width: '100%',
-    marginTop: Spacing.M,
-  },
-  otpInput: {
-    height: 56,
-    borderRadius: Radius.S,
-    justifyContent: 'center',
-    borderWidth: 1,
-  },
-  clearIcon: {
-    position: 'absolute',
-    right: Spacing.M,
-    zIndex: 4,
-  },
-  otpFloatingView: {
-    position: 'absolute',
-    top: -Spacing.M + 2,
-    alignSelf: 'center',
-    paddingHorizontal: Spacing.S,
-  },
-  otpInputsView: {
-    width: '100%',
-    height: '100%',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  otpRealInputWrapper: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    position: 'absolute',
-    width: '100%',
-    height: '100%',
-    opacity: 0.02,
-    backgroundColor: 'transparent',
-    zIndex: 2,
-  },
-  otpRealInput: {
-    width: '100%',
-    height: '100%',
-    zIndex: 2,
-    opacity: 0.02,
-    letterSpacing: Spacing.XXL,
-  },
-  //DropDown
-  inputDropDownWrapper: {
-    flexDirection: 'row',
-    marginTop: Spacing.S,
-  },
-  inputDropDownView: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingLeft: Spacing.M,
-  },
-  iconViewDropDown: {
-    flexDirection: 'row',
-    marginRight: Spacing.M,
-  },
-  textViewDropDown: {
-    flex: 1,
-    marginVertical: Spacing.S,
-    marginRight: Spacing.S,
-    justifyContent: 'center',
-  },
-  multilineContainer: {
-    borderWidth: 1,
-    borderRadius: Radius.S,
-  },
-  leadingIconContainerDropDown: {
-    borderRadius: Radius.XS,
-    overflow: 'hidden',
-  },
-  currency: { fontSize: scaleSize(20), fontWeight: 'bold' },
-  phoneNumberDivider: {
-    width: 1,
-    marginLeft: Spacing.M,
-  },
-  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
-});

package/src/foundations/Input/utils.ts

@@ -1,97 +0,0 @@
-import { Localize } from '../Application';
-
-const formatNumberToMoney = (number: number, currency = '') => {
-  if (!number || isNaN(number) || Number(number) === 0) {
-    return `0${currency}`;
-  }
-
-  const array: string[] = [];
-  let result = '';
-  let isNegative = false;
-
-  if (number < 0) {
-    isNegative = true;
-  }
-
-  const numberString = Math.abs(number).toString();
-  if (numberString.length < 3) {
-    return isNegative
-      ? `-${numberString}${currency}`
-      : `${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] as string);
-    }
-    if (count === 3 && i >= 1) {
-      array.push('.');
-      count = 0;
-    }
-  }
-
-  for (let i = array.length - 1; i >= 0; i -= 1) {
-    result += array[i];
-  }
-
-  return isNegative ? `-${result}${currency}` : `${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);
-};
-
-// --- PHONE VALIDATION ---
-function formatPhoneNumber(phone: string): string {
-  return phone.replace(/\D/g, '');
-}
-
-function checkValidPhoneNumber(phone: string): {
-  phoneFormatted: string;
-  error?: string;
-} {
-  let phoneNumber = phone;
-
-  // if not starting with 0 and has 9 digits => prepend 0
-  if (
-    phoneNumber.length > 0 &&
-    phoneNumber[0] !== '0' &&
-    /^\d$/.test(phoneNumber[0]) &&
-    phoneNumber.length === 9
-  ) {
-    phoneNumber = '0' + phoneNumber;
-  }
-
-  const phoneFormatted = formatPhoneNumber(phoneNumber);
-  const localize = new Localize({ vi: {}, en: {} });
-  let error: string | undefined;
-
-  if (phoneFormatted.length === 0) {
-    error = localize.translate('enterPhoneNumber');
-  } else if (phoneFormatted.length < 10 || phoneFormatted.length > 11) {
-    error = localize.translate('invalidPhoneNumber');
-  }
-
-  return { phoneFormatted: phoneFormatted, error };
-}
-
-export { formatMoneyToNumber, formatNumberToMoney, checkValidPhoneNumber };