@tecsinapse/react-core 1.21.1-beta.1 → 1.21.1-beta.3

package/src/components/atoms/Input/Hint.tsx

@@ -1,48 +0,0 @@
-import React, { FC } from 'react';
-import { ColorType } from '../../../types/defaults';
-import { InputVariantType } from '../Input';
-import { Text, TextProps } from '../Text';
-import { StyledHintContainer, StyledHintIcon } from './styled';
-
-interface HintProps {
-  text?: string;
-  variant: InputVariantType;
-  TextComponent?: FC<TextProps>;
-}
-
-const Hint: FC<HintProps> = ({ variant, text, TextComponent = Text }) => {
-  let color: ColorType;
-  let icon;
-
-  switch (variant) {
-    case 'default':
-      color = 'secondary';
-      break;
-    case 'error':
-      color = 'error';
-      icon = 'close-circle-outline';
-      break;
-    case 'success':
-      color = 'success';
-      icon = 'checkmark-circle-outline';
-      break;
-  }
-
-  return (
-    <StyledHintContainer>
-      {icon && (
-        <StyledHintIcon
-          name={icon}
-          type="ionicon"
-          size="centi"
-          colorVariant={color}
-        />
-      )}
-      <TextComponent typography="label" colorVariant={color}>
-        {text}
-      </TextComponent>
-    </StyledHintContainer>
-  );
-};
-
-export default Hint;

package/src/components/atoms/Input/InputContainer/InputContainer.tsx

@@ -1,109 +0,0 @@
-import React, { FC } from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
-import { InputElementProps } from '..';
-import {
-  ColorGradationType,
-  ColorType,
-  FontColorType,
-  FontStackType,
-  FontWeightType,
-  TypographyVariationType,
-} from '@tecsinapse/react-core';
-import { Text, TextProps } from '../../Text';
-import {
-  StyledBorderKeeper,
-  StyledIconContent,
-  StyledInputContainer,
-  StyledLabelContainer,
-} from '../styled';
-
-export type InputVariantType = 'default' | 'error' | 'success';
-
-export interface InputContainerProps {
-  label?: string;
-  labelColor?: FontColorType;
-  labelColorVariant?: ColorType;
-  labelColorTone?: ColorGradationType;
-  labelTypography?: TypographyVariationType;
-  labelStack?: FontStackType;
-  LabelComponent?: FC<TextProps>;
-  labelWeight?: FontWeightType;
-  leftComponent?: JSX.Element;
-  rightComponent?: JSX.Element;
-  borderColor?: ColorType;
-  borderColorGradation?: ColorGradationType;
-  style?: StyleProp<ViewStyle>;
-  inputContainerStyle?: StyleProp<ViewStyle>;
-  focused?: boolean;
-  disabled?: boolean;
-  variant?: InputVariantType;
-  hint?: string;
-  hintComponent?: JSX.Element;
-}
-
-const InputContainer: FC<InputContainerProps & Partial<InputElementProps>> = ({
-  label,
-  labelColor = 'medium',
-  labelColorTone,
-  labelColorVariant,
-  labelTypography = 'label',
-  labelStack = 'default',
-  labelWeight = 'bold',
-  LabelComponent = Text,
-  leftComponent,
-  rightComponent,
-  inputContainerStyle,
-  disabled,
-  focused,
-  variant,
-  children,
-  ...rest
-}): JSX.Element => {
-  let _defaultLabelColor = labelColorVariant;
-  if (variant === 'error') _defaultLabelColor = 'error';
-  if (variant === 'success') _defaultLabelColor = 'success';
-  const _labelColorVariant = disabled ? 'secondary' : _defaultLabelColor;
-  const _labelColorTone = disabled ? 'light' : labelColorTone;
-
-  return (
-    <StyledInputContainer
-      {...rest}
-      style={inputContainerStyle}
-      focused={focused}
-      disabled={disabled}
-    >
-      <StyledBorderKeeper
-        focused={focused}
-        disabled={disabled}
-        borderColor={_defaultLabelColor}
-      />
-
-      {leftComponent && <StyledIconContent>{leftComponent}</StyledIconContent>}
-
-      <StyledLabelContainer
-        leftComponent={leftComponent}
-        rightComponent={rightComponent}
-      >
-        {label && (
-          <LabelComponent
-            fontColor={labelColor}
-            colorTone={_labelColorTone}
-            colorVariant={_labelColorVariant}
-            typography={labelTypography}
-            fontWeight={labelWeight}
-            fontStack={labelStack}
-          >
-            {label}
-          </LabelComponent>
-        )}
-        {children}
-      </StyledLabelContainer>
-
-      {rightComponent && (
-        <StyledIconContent>{rightComponent}</StyledIconContent>
-      )}
-    </StyledInputContainer>
-  );
-};
-
-export default InputContainer;

package/src/components/atoms/Input/InputElement/InputElement.tsx

@@ -1,50 +0,0 @@
-import { useTheme } from '@emotion/react';
-import { ThemeProp } from '@tecsinapse/react-core';
-import React from 'react';
-import { StyleProp, TextInput, TextInputProps, TextStyle } from 'react-native';
-import { StyledInputElement } from '../styled';
-
-export interface InputElementProps
-  extends Omit<TextInputProps, 'onChange' | 'value' | 'ref'> {
-  style?: StyleProp<TextStyle>;
-  value?: string;
-  placeholder?: string;
-  disabled?: boolean;
-  onChange?: (value: string) => void;
-  onFocus?: () => void;
-  onBlur?: () => void;
-}
-
-const InputElement = React.forwardRef<TextInput, InputElementProps>(
-  (
-    {
-      onChange,
-      placeholder,
-      value,
-      disabled = false,
-      placeholderTextColor,
-      ...rest
-    },
-    ref
-  ): JSX.Element => {
-    const theme = useTheme() as ThemeProp;
-    const _placeholderColor = placeholderTextColor || theme.font.color.dark;
-
-    return (
-      <StyledInputElement
-        {...rest}
-        ref={ref}
-        onChangeText={onChange}
-        value={value}
-        placeholder={placeholder}
-        placeholderTextColor={_placeholderColor}
-        disabled={disabled}
-        editable={!disabled}
-      />
-    );
-  }
-);
-
-InputElement.displayName = 'InputElement';
-
-export default InputElement;

package/src/components/atoms/Input/InputMaskElement/InputMaskElement.tsx

@@ -1,119 +0,0 @@
-import { useTheme } from '@emotion/react';
-import { ThemeProp } from '@tecsinapse/react-core';
-import React, { useCallback, useEffect } from 'react';
-import { StyleProp, TextInput, TextInputProps, TextStyle } from 'react-native';
-import { StyledInputElement } from '../styled';
-import { MaskType, useStringMask } from '../hooks/useStringMask';
-import { CurrencyOptions, useNumberMask } from '../hooks/useNumberMask';
-
-export interface InputMaskElementProps
-  extends Omit<TextInputProps, 'onChange' | 'value' | 'ref'> {
-  style?: StyleProp<TextStyle>;
-  value?: string | number;
-  placeholder?: string;
-  disabled?: boolean;
-  onChange?: (value: any) => void;
-  /**
-   To use mask for strings you have to pass a MaskType[] or ((value: string) => MaskType[])
-   A MaskType can be a string, RegExp, or Array<RegExp>.
-   In case we have a string, '9' represents digits, 'a' represents alphabet characters, and any other character represents fixed characters in the mask.
-   For example a phone mask can be represented as ['(99) \\99999-9999'], or ['(99) ', '/[9]/', '9999-9999'], or ['(', /[0-9]/, /[0-9]/, ') ', '/[9]/', '9999-9999'] and many others.
-   To use mask for numbers you have to pass a CurrencyOptions object
-   A CurrencyOptions object contains symbol, separator, decimal, precision. For example {symbol: 'R$ ', separator: '.', decimal: ',', precision: 2,}.
-   **/
-  mask?: (MaskType[] | ((value: string) => MaskType[])) | CurrencyOptions;
-  onFocus?: () => void;
-  onBlur?: () => void;
-}
-
-const InputMaskElement = React.forwardRef<TextInput, InputMaskElementProps>(
-  (
-    {
-      onChange,
-      placeholder,
-      value,
-      disabled = false,
-      placeholderTextColor,
-      mask,
-      ...rest
-    },
-    ref
-  ): JSX.Element => {
-    const theme = useTheme() as ThemeProp;
-
-    const _placeholderColor = placeholderTextColor || theme.font.color.dark;
-
-    const getInputHook = (value: string | number) => {
-      if (mask !== undefined) {
-        if (Array.isArray(mask) || typeof mask === 'function') {
-          return useStringMask(mask, value);
-        } else {
-          return useNumberMask(mask, value);
-        }
-      } else {
-        return [undefined, undefined];
-      }
-    };
-
-    const [maskValue, setMaskValue] = getInputHook(value ?? '');
-
-    const _value =
-      maskValue === undefined
-        ? value?.toString()
-        : maskValue.formatted
-        ? maskValue.formatted
-        : '';
-
-    useEffect(() => {
-      if (onChange) {
-        onChange(maskValue?.raw);
-      }
-    }, [maskValue]);
-
-    const onChangeValue = useCallback(
-      (value: string | number) => {
-        if (maskValue !== undefined && setMaskValue !== undefined) {
-          setMaskValue(value);
-        } else onChange && onChange(value);
-      },
-      [value]
-    );
-
-    useEffect(() => {
-      /** Used to reinitialize maskValue when the value is updated in the parent component **/
-      if (
-        maskValue !== undefined &&
-        setMaskValue !== undefined &&
-        value !== undefined &&
-        typeof maskValue === 'object'
-      ) {
-        /** Case there is a mask **/
-        if (
-          maskValue.raw !== undefined &&
-          maskValue.raw.toString() !== value.toString()
-        ) {
-          onChangeValue(value);
-        }
-      } else if (maskValue === undefined && value !== undefined) {
-        onChangeValue(value);
-      }
-    }, [value]);
-
-    return (
-      <StyledInputElement
-        {...rest}
-        ref={ref}
-        onChangeText={onChangeValue}
-        value={_value}
-        placeholder={placeholder}
-        placeholderTextColor={_placeholderColor}
-        disabled={disabled}
-        editable={!disabled}
-      />
-    );
-  }
-);
-
-InputMaskElement.displayName = 'InputMaskElement';
-
-export default InputMaskElement;

package/src/components/atoms/Input/PressableInputContainer/PressableInputContainer.tsx

@@ -1,36 +0,0 @@
-import * as React from 'react';
-import { PressableStateCallbackType, StyleProp, ViewStyle } from 'react-native';
-import InputContainer, {
-  InputContainerProps,
-} from '../InputContainer/InputContainer';
-import { StyledPressableSurface } from './styled';
-
-export interface PressableInputContainerProps
-  extends Omit<
-    InputContainerProps,
-    'value' | 'onChange' | 'onChangeText' | 'disabled' | 'style'
-  > {
-  onPress?: () => void | never;
-  disabled?: boolean;
-  style?:
-    | StyleProp<ViewStyle>
-    | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>);
-}
-
-const PressableInputContainer: React.FC<PressableInputContainerProps> = ({
-  onPress,
-  disabled,
-  style,
-  children,
-  ...rest
-}) => {
-  return (
-    <StyledPressableSurface onPress={onPress} disabled={disabled} style={style}>
-      <InputContainer disabled={disabled} {...rest}>
-        {children}
-      </InputContainer>
-    </StyledPressableSurface>
-  );
-};
-
-export default PressableInputContainer;

package/src/components/atoms/Input/PressableInputContainer/index.ts

@@ -1,2 +0,0 @@
-export { default as PressableInputContainer } from './PressableInputContainer';
-export type { PressableInputContainerProps } from './PressableInputContainer';

package/src/components/atoms/Input/PressableInputContainer/styled.ts

@@ -1,5 +0,0 @@
-import styled from '@emotion/native';
-
-export const StyledPressableSurface = styled.Pressable`
-  width: 100%;
-`;

package/src/components/atoms/Input/hooks/useInputFocus.ts

@@ -1,29 +0,0 @@
-import { useCallback, useState } from 'react';
-
-export const useInputFocus = (
-  onFocus?: () => void,
-  onBlur?: () => void,
-  focusEnabled = true
-) => {
-  const [focused, setFocused] = useState<boolean>(false);
-
-  const handleFocus = useCallback(() => {
-    if (focusEnabled) {
-      setFocused(true);
-      onFocus && onFocus();
-    }
-  }, [focusEnabled, setFocused, onFocus]);
-
-  const handleBlur = useCallback(() => {
-    if (focusEnabled) {
-      setFocused(false);
-      onBlur && onBlur();
-    }
-  }, [focusEnabled, setFocused, onBlur]);
-
-  return {
-    focused,
-    handleBlur,
-    handleFocus,
-  };
-};

package/src/components/atoms/Input/hooks/useNumberMask.ts

@@ -1,99 +0,0 @@
-import currency from 'currency.js';
-import { useCallback, useState } from 'react';
-import { extractNumbersFromString } from '../../../../utils/extractNumbersFromString';
-import { MaskValue } from './useStringMask';
-
-export type CurrencyOptions = currency.Options;
-
-const DEFAULT_OPTIONS: CurrencyOptions = {
-  symbol: 'R$ ',
-  separator: '.',
-  decimal: ',',
-  precision: 2,
-};
-
-const getRegex = (precision: number) =>
-  new RegExp(`\\B(?=(\\d{${precision}})(?!\\d))`, 'g');
-
-export const getInternalNumberAndMask = (
-  value: string | number,
-  options?: CurrencyOptions
-): { internalNumber: number; mergedOptions: CurrencyOptions } => {
-  const mergedOptions = { ...DEFAULT_OPTIONS, ...options };
-  const { precision = -1 } = mergedOptions;
-
-  let internalNumber;
-
-  if (typeof value === 'number') {
-    if (precision) {
-      let stringValue = String(value);
-      const decimalIndex = stringValue.indexOf('.');
-      const currentPrecision = decimalIndex + precision;
-      if (decimalIndex !== -1 && currentPrecision <= stringValue.length) {
-        const zeros = stringValue.length + 1 - currentPrecision;
-        for (let i = 0; i < zeros; i++) stringValue = stringValue + `0`;
-      }
-      internalNumber = Number(stringValue);
-    } else {
-      internalNumber = value;
-    }
-  } else {
-    const onlyNumbers = String(extractNumbersFromString(value));
-    const padZeros = String(onlyNumbers).padStart(precision + 1, '0');
-    internalNumber = Number(padZeros.replace(getRegex(precision), '.'));
-  }
-
-  if (internalNumber > Number.MAX_SAFE_INTEGER) {
-    internalNumber = Number.MAX_SAFE_INTEGER;
-  }
-
-  if (internalNumber < Number.MIN_SAFE_INTEGER) {
-    internalNumber = Number.MIN_SAFE_INTEGER;
-  }
-
-  return {
-    internalNumber,
-    mergedOptions,
-  };
-};
-
-/**
- * TODO:
- * @param options
- * @param defaultValue
- * @returns
- */
-export const useNumberMask = (
-  options?: CurrencyOptions,
-  defaultValue?: string | number
-): [MaskValue, (value: string | number) => void] => {
-  const applyMask = useCallback(
-    (value: string | number = 0): MaskValue => {
-      const { internalNumber, mergedOptions } = getInternalNumberAndMask(
-        value,
-        options
-      );
-
-      return {
-        raw: internalNumber,
-        formatted: currency(internalNumber).format(mergedOptions),
-      };
-    },
-    [options, getRegex]
-  );
-
-  const [value, setValue] = useState<MaskValue>(applyMask(defaultValue));
-
-  const handleChangeValue = useCallback(
-    (formattedValue: string | number) => {
-      const { raw, formatted } = applyMask(formattedValue);
-      setValue({
-        raw,
-        formatted,
-      });
-    },
-    [applyMask, setValue]
-  );
-
-  return [value, handleChangeValue];
-};

package/src/components/atoms/Input/hooks/useStringMask.ts

@@ -1,128 +0,0 @@
-import { useCallback, useState } from 'react';
-
-export interface MaskValue {
-  formatted?: string;
-  raw?: string | number;
-}
-
-export type MaskType = string | RegExp | Array<RegExp>;
-
-/**
- * TODO:
- * @param value
- * @param mask
- * @returns
- */
-export const mergeMask = (value = '', mask: MaskType[]): MaskValue => {
-  let formatted = '';
-  let raw = '';
-  let iMask = 0;
-  let iChars = 0;
-
-  while (!(iMask === mask.length || iChars === value.length)) {
-    const maskChar = mask[iMask];
-    const valueChar = value[iChars];
-
-    if (maskChar === valueChar) {
-      formatted += maskChar;
-      iChars++;
-      iMask++;
-      continue;
-    }
-
-    const rawValueChar = value[iChars];
-
-    if (typeof maskChar === 'object') {
-      iChars++;
-
-      const maskCharRegex = Array.isArray(maskChar) ? maskChar[0] : maskChar;
-      const matchRegex = RegExp(maskCharRegex).test(valueChar);
-
-      if (matchRegex) {
-        formatted += valueChar;
-        raw += rawValueChar;
-        iMask++;
-      }
-    } else {
-      formatted += maskChar;
-      iMask++;
-    }
-  }
-
-  return { raw, formatted };
-};
-
-export const getMask = (
-  mask: MaskType[] | ((value: string) => MaskType[]),
-  newValue: string
-): MaskType[] => {
-  let maskArray: MaskType[];
-  const regexArray: MaskType[] = [];
-
-  if (typeof mask === 'function') {
-    maskArray = mask(newValue);
-  } else {
-    maskArray = mask;
-  }
-
-  maskArray.forEach(exp => {
-    if (typeof exp !== 'string') {
-      if (Array.isArray(exp)) regexArray.push(exp);
-      else regexArray.push(exp);
-    } else {
-      for (let i = 0; i < exp.length; i++) {
-        if (exp[i] === '\\') {
-          regexArray.push(exp[i + 1]);
-          i++;
-        } else {
-          if (exp[i] === '9') regexArray.push(/\d/);
-          else if (exp[i] === 'a') regexArray.push(/[a-zA-Z]/);
-          else regexArray.push(exp[i]);
-        }
-      }
-    }
-  });
-
-  return regexArray;
-};
-
-/**
- * TODO:
- * @param mask
- * @param defaultValue
- * @returns
- */
-export const useStringMask = (
-  mask: MaskType[] | ((value: string) => MaskType[]),
-  defaultValue?: string | number
-): [MaskValue, (text: string | number) => void] => {
-  const applyMask = useCallback(
-    (value = ''): MaskValue => {
-      const selectedMask = getMask(mask, value);
-      const { formatted, raw } = mergeMask(value, selectedMask);
-
-      return {
-        raw,
-        formatted,
-      };
-    },
-    [mask]
-  );
-
-  const [value, setValue] = useState<MaskValue>(
-    applyMask(defaultValue?.toString())
-  );
-
-  const handleChangeValue = useCallback(
-    (formattedValue: string | number) => {
-      const { raw, formatted } = applyMask(formattedValue?.toString());
-      setValue({
-        raw,
-        formatted,
-      });
-    },
-    [applyMask, setValue]
-  );
-
-  return [value, handleChangeValue];
-};

package/src/components/atoms/Input/index.ts

@@ -1,16 +0,0 @@
-export { default as Hint } from './Hint';
-export * from './hooks/useInputFocus';
-export * from './hooks/useNumberMask';
-export * from './hooks/useStringMask';
-export { default as InputContainer } from './InputContainer/InputContainer';
-export type {
-  InputContainerProps,
-  InputVariantType,
-} from './InputContainer/InputContainer';
-export { default as InputElement } from './InputElement/InputElement';
-export type { InputElementProps } from './InputElement/InputElement';
-export { default as InputMaskElement } from './InputMaskElement/InputMaskElement';
-export type { InputMaskElementProps } from './InputMaskElement/InputMaskElement';
-export { PressableInputContainer } from './PressableInputContainer';
-export type { PressableInputContainerProps } from './PressableInputContainer';
-export { StyledBorderKeeper, disabledInputStyles } from './styled';