@tecsinapse/react-core 1.12.8 → 1.14.0

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

@@ -1,20 +1,27 @@
 import { useTheme } from '@emotion/react';
 import { ThemeProp } from '@tecsinapse/react-core';
-import React, { FC } from 'react';
+import React, { FC, useEffect, useState } from 'react';
 import { StyleProp, TextInputProps, TextStyle } from 'react-native';
-import { IMask } from '../hooks/useMask';
 import { StyledInputElement } from '../styled';
+import { MaskType, useStringMask } from '../hooks/useStringMask';
+import { CurrencyOptions, useNumberMask } from '../hooks/useNumberMask';
 
 export interface InputElementProps
   extends Omit<TextInputProps, 'onChange' | 'value' | 'ref'> {
   style?: StyleProp<TextStyle>;
-  /**
-   * TODO:
-   */
-  value?: string | IMask;
+  value: string | number;
   placeholder?: string;
   disabled?: boolean;
-  onChange?: (value: string) => void;
+  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;
   ref?: React.Ref<any>;
@@ -28,21 +35,40 @@ const InputElement: FC<InputElementProps> = React.forwardRef(
       value,
       disabled = false,
       placeholderTextColor,
+      mask,
       ...rest
     },
     ref: React.Ref<any>
   ): JSX.Element => {
     const theme = useTheme() as ThemeProp;
-    const _value =
-      typeof value === 'string' ? value : value?.maskValue?.formatted;
     const _placeholderColor = placeholderTextColor || theme.font.color.dark;
 
+    const [maskValue, setMaskValue] =
+      mask === undefined
+        ? useState<string>(String(value))
+        : Array.isArray(mask) || typeof mask === 'function'
+        ? useStringMask(mask, String(value))
+        : useNumberMask(mask, value);
+
+    useEffect(() => {
+      if (onChange) {
+        if (typeof maskValue === 'string') onChange(maskValue);
+        else onChange(maskValue?.raw);
+      }
+    }, [maskValue]);
+
+    const onChangeValue = (value: string) => {
+      setMaskValue(value);
+    };
+
     return (
       <StyledInputElement
         {...rest}
         ref={ref}
-        onChangeText={onChange}
-        value={_value}
+        onChangeText={onChangeValue}
+        value={
+          typeof maskValue === 'string' ? maskValue : maskValue?.formatted ?? ''
+        }
         placeholder={placeholder}
         placeholderTextColor={_placeholderColor}
         disabled={disabled}

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

@@ -0,0 +1,99 @@
+import currency from 'currency.js';
+import { useCallback, useState } from 'react';
+import { extractNumbersFromString } from '../../../../utils';
+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) => 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) => {
+      const { raw, formatted } = applyMask(formattedValue);
+      setValue({
+        raw,
+        formatted,
+      });
+    },
+    [applyMask, setValue]
+  );
+
+  return [value, handleChangeValue];
+};

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

@@ -0,0 +1,126 @@
+import { useCallback, useState } from 'react';
+
+export interface MaskValue {
+  formatted?: string;
+  raw?: any;
+}
+
+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
+): [MaskValue, (text: string) => 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));
+
+  const handleChangeValue = useCallback(
+    (formattedValue: string) => {
+      const { raw, formatted } = applyMask(formattedValue);
+      setValue({
+        raw,
+        formatted,
+      });
+    },
+    [applyMask, setValue]
+  );
+
+  return [value, handleChangeValue];
+};

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

@@ -1,7 +1,7 @@
 export { default as Hint } from './Hint';
-export * from './hooks/useCurrencyMask';
 export * from './hooks/useInputFocus';
-export * from './hooks/useMask';
+export * from './hooks/useNumberMask';
+export * from './hooks/useStringMask';
 export {
   default as InputContainer,
   InputContainerProps,
@@ -11,7 +11,6 @@ export {
   default as InputElement,
   InputElementProps,
 } from './InputElement/InputElement';
-export * from './masks';
 export {
   PressableInputContainer,
   PressableInputContainerProps,

package/src/components/atoms/ProgressBar/ProgressBar.tsx

@@ -1,13 +1,13 @@
+import { useTheme } from '@emotion/react';
 import * as React from 'react';
 import { Animated, ViewProps } from 'react-native';
-import { Container, Progress, Segment } from './styled';
-import { useTheme } from '@emotion/react';
 import {
   ColorGradationType,
   ColorType,
-  extractNumbersFromString,
-  ThemeProp,
-} from '@tecsinapse/react-core';
+  ThemeProp
+} from '../../../types/defaults';
+import { extractNumbersFromString } from '../../../utils';
+import { Container, Progress, Segment } from './styled';
 
 export interface ProgressBarProps extends ViewProps {
   /** Number of segments. Defaults to 1. Set to 1 when 0 or less */

package/src/components/molecules/Calendar/components/MonthWeek.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { compareAsc as compare, differenceInDays, isSameDay } from 'date-fns';
+import { compareAsc as compare, isSameDay } from 'date-fns';
 import { Cell, Selected, Week } from '../styled';
 import { Value, DateRange, SelectionType } from '../Calendar';
 import { TextProps } from '@tecsinapse/react-core';
@@ -62,7 +62,7 @@ const MonthWeek = <T extends SelectionType>({
 
         if (!highest) {
           if (compare(date, lowest) === -1) {
-            newValue = { lowest: date, highest: lowest };
+            newValue = { lowest: date, highest: undefined };
           } else if (compare(date, lowest) === 0) {
             newValue = undefined;
           } else {
@@ -70,17 +70,12 @@ const MonthWeek = <T extends SelectionType>({
           }
         } else {
           if (compare(date, lowest) === -1) {
-            newValue = { lowest: date, highest: highest };
+            newValue = { lowest: date, highest: undefined };
           } else if (compare(date, lowest) === 0) {
-            newValue = { lowest: highest, highest: undefined };
+            newValue = undefined;
           } else {
             if (compare(date, highest) === -1) {
-              const lowestDiff = Math.abs(differenceInDays(date, lowest));
-              const highestDiff = Math.abs(differenceInDays(date, highest));
-              newValue = {
-                lowest: lowestDiff < highestDiff ? date : lowest,
-                highest: highestDiff <= lowestDiff ? date : highest,
-              };
+              newValue = { lowest: lowest, highest: date };
             } else if (compare(date, highest) === 0) {
               newValue = { lowest: lowest, highest: undefined };
             } else {

package/src/components/molecules/Calendar/index.ts

@@ -3,4 +3,5 @@ export {
   CalendarProps,
   SelectionType,
   DateRange,
+  Value
 } from './Calendar';

package/src/components/molecules/Calendar/styled.ts

@@ -19,26 +19,6 @@ export const TitleContainer = styled.View<Partial<StyleProps>>`
   background-color: ${({ theme }) => theme.color.secondary.xlight};
 `;
 
-const surfaceBorderRight = ({
-  isRright,
-  theme,
-}: ButtonBorders & Partial<StyleProps>) =>
-  !isWeb &&
-  isRright &&
-  css`
-    border-top-right-radius: ${theme?.borderRadius.deca};
-  `;
-
-const surfaceBorderLeft = ({
-  isLeft,
-  theme,
-}: ButtonBorders & Partial<StyleProps>) =>
-  !isWeb &&
-  isLeft &&
-  css`
-    border-top-left-radius: ${theme?.borderRadius.deca};
-  `;
-
 export const Control = styled(PressableSurface)(
   (
     props: Partial<StyleProps> & ButtonBorders & { align: 'start' | 'end' }
@@ -47,8 +27,6 @@ export const Control = styled(PressableSurface)(
     padding: ${props.theme?.spacing.centi};
     border-radius: ${props.theme?.borderRadius.mili};
     margin: ${props.theme?.spacing.mili};
-    ${surfaceBorderRight(props)}
-    ${surfaceBorderLeft(props)}
   `
 );
 

package/src/components/molecules/DatePicker/DatePicker.tsx

@@ -1,29 +1,27 @@
 import { format as formatDate } from 'date-fns';
 import * as React from 'react';
-import { ModalBaseProps } from 'react-native';
+import { useEffect } from 'react';
 import { InputContainerProps, useInputFocus } from '../../atoms/Input';
 import { Text, TextProps } from '../../atoms/Text';
 import { CalendarProps, DateRange, SelectionType } from '../Calendar';
-import { DatePickerModalProps, Modal } from './Modal';
-import { CalendarIcon, getStyledTextComponent } from './styled';
 import { HintInputContainer } from '../HintInputContainer';
-import { useEffect } from 'react';
+import { CalendarIcon, getStyledTextComponent } from './styled';
 
-export interface DatePickerProps<T extends SelectionType>
-  extends InputContainerProps,
-    DatePickerModalProps<T>,
-    Omit<CalendarProps<T>, 'style'> {
+export interface DatePickerProps<T extends SelectionType> extends InputContainerProps, Omit<CalendarProps<T>, 'style'> {
   controlComponent?: (
     onPress: () => void,
     displayValue?: string
   ) => JSX.Element;
   TextComponent?: React.FC<TextProps>;
-  animationType?: ModalBaseProps['animationType'];
+  CalendarComponent: React.FC<CalendarProps<T>>
   placeholder?: string;
   onFocus?: () => void | never;
   onBlur?: () => void | never;
   format?: string;
   closeOnPick?: boolean;
+  renderCalendar: (calendar: React.ReactElement, blur?: () => void) => JSX.Element|null
+  requestShowCalendar: () => void
+  requestCloseCalendar: () => void
 }
 
 function DatePicker<T extends SelectionType>({
@@ -34,7 +32,6 @@ function DatePicker<T extends SelectionType>({
   value,
   type,
   format = 'yyyy-MM-dd',
-
   placeholder,
   onFocus,
   onBlur,
@@ -45,31 +42,26 @@ function DatePicker<T extends SelectionType>({
   variant,
   TextComponent = Text,
   CalendarComponent,
-  bottomOffset,
   rightComponent,
-  animationType = 'fade',
   style,
   locale,
   closeOnPick = false,
+  renderCalendar,
+  requestShowCalendar,
+  requestCloseCalendar,
   ...rest
 }: DatePickerProps<T>): JSX.Element {
+  
   const { focused, handleBlur, handleFocus } = useInputFocus(
     onFocus,
     onBlur,
     !disabled
   );
 
-  const [modalVisible, setModalVisible] = React.useState(false);
-
-  const handlePressInput = React.useCallback(() => {
-    setModalVisible(true);
+  const handleShowCalendar = React.useCallback(() => {
+    requestShowCalendar()
     handleFocus();
-  }, [handleFocus, setModalVisible]);
-
-  const handleCloseModal = React.useCallback(() => {
-    setModalVisible(false);
-    handleBlur();
-  }, [handleBlur, setModalVisible]);
+  }, [handleFocus, requestShowCalendar]);
 
   const getDisplayValue = () => {
     if (!value) return placeholder;
@@ -89,23 +81,35 @@ function DatePicker<T extends SelectionType>({
 
   useEffect(() => {
     if (closeOnPick && value && type === 'day') {
-      setTimeout(handleCloseModal, 200);
+      setTimeout(requestCloseCalendar, 200);
     }
     if (closeOnPick && value && type === 'range') {
       const { lowest, highest } = value as DateRange;
-      lowest && highest && setTimeout(handleCloseModal, 200);
+      lowest && highest && setTimeout(requestCloseCalendar, 200);
     }
-  }, [value, closeOnPick, type, handleCloseModal]);
+  }, [value, closeOnPick, type, requestCloseCalendar]);
+
+  const calendar = (
+    <CalendarComponent
+      pointerEvents={'box-none'}
+      type={type}
+      value={value}
+      month={month}
+      year={year}
+      onChange={onChange}
+      locale={locale}
+    />
+  )
 
   return (
     <>
       {controlComponent ? (
-        controlComponent(handlePressInput, getDisplayValue())
+        controlComponent(handleShowCalendar, getDisplayValue())
       ) : (
         <HintInputContainer
           focused={focused}
           viewStyle={style}
-          onPress={handlePressInput}
+          onPress={handleShowCalendar}
           disabled={disabled}
           hintComponent={hintComponent}
           LabelComponent={TextComponent}
@@ -124,20 +128,7 @@ function DatePicker<T extends SelectionType>({
           </StyledText>
         </HintInputContainer>
       )}
-      <Modal
-        CalendarComponent={CalendarComponent}
-        bottomOffset={bottomOffset}
-        visible={modalVisible}
-        onRequestClose={handleCloseModal}
-        animated
-        animationType={animationType}
-        month={month}
-        year={year}
-        onChange={onChange}
-        value={value}
-        type={type}
-        locale={locale}
-      />
+      {renderCalendar(calendar, handleBlur)}
     </>
   );
 }

package/src/components/molecules/DatePicker/styled.ts

@@ -1,50 +1,10 @@
 import styled, { css } from '@emotion/native';
 import { FC } from 'react';
-import { Platform } from 'react-native';
-import { hex2rgba } from '../../../styles/definitions';
 import { StyleProps } from '../../../types/defaults';
-import { RFValue } from '../../../utils';
 import { Icon } from '../../atoms/Icon';
 import { disabledInputStyles, InputContainerProps } from '../../atoms/Input';
-import { PressableSurface } from '../../atoms/PressableSurface';
 import { TextProps } from '../../atoms/Text';
 
-const isWeb = Platform.OS === 'web';
-
-export const Backdrop = styled(PressableSurface)<Partial<StyleProps>>`
-  ${({ theme }) =>
-    isWeb
-      ? css`
-          justify-content: center;
-          align-items: center;
-          background-color: ${hex2rgba(theme.miscellaneous.overlay, 0.5)};
-          height: 100vh;
-        `
-      : css`
-          justify-content: flex-end;
-          background-color: ${hex2rgba(theme.miscellaneous.overlay, 0.5)};
-          height: 100%;
-        `}
-`;
-
-export const ModalContent = styled.View<
-  { offset: number } & Partial<StyleProps>
->`
-  background-color: transparent;
-  padding-bottom: ${({ offset }) => `${RFValue(offset)}px`};
-  ${({ theme: { borderRadius } }) => css`
-    ${isWeb
-      ? `
-      border-radius: ${borderRadius.micro};
-    `
-      : `
-      border-top-left-radius: ${borderRadius.deca};
-      border-top-right-radius: ${borderRadius.deca};
-    `}
-  `}
-  overflow: hidden;
-`;
-
 export const getStyledTextComponent = (component: FC<TextProps>) => {
   return styled(component)(
     (props: Partial<InputContainerProps> & Partial<StyleProps>) => css`