@tecsinapse/react-core 1.12.8 → 1.14.0

package/src/components/molecules/DateTimePicker/DateTimePicker.tsx

@@ -1,26 +1,25 @@
 import { format as formatDate } from 'date-fns';
 import * as React from 'react';
-import { ModalBaseProps } from 'react-native';
 import { InputContainerProps, useInputFocus } from '../../atoms/Input';
 import { Text, TextProps } from '../../atoms/Text';
 import { CalendarIcon, getStyledTextComponent } from '../DatePicker/styled';
-import { DateTimeSelectorProps } from '../DateTimeSelector';
-import { DateTimePickerModalProps, Modal } from './Modal';
+import { DateTimeSelector, DateTimeSelectorProps } from '../DateTimeSelector';
 import { HintInputContainer } from '../HintInputContainer';
+import { getStyledDateTimeSelector } from './styled';
 
-export interface DateTimePickerProps
-  extends InputContainerProps,
-    DateTimePickerModalProps,
-    Omit<DateTimeSelectorProps, 'style'> {
+export interface DateTimePickerProps extends InputContainerProps, Omit<DateTimeSelectorProps, 'style'> {
   controlComponent?: (
     onPress: () => void,
     displayValue?: string
   ) => JSX.Element;
   TextComponent?: React.FC<TextProps>;
-  animationType?: ModalBaseProps['animationType'];
+  DateTimeSelectorComponent: React.FC<DateTimeSelectorProps>;
   placeholder?: string;
   onFocus?: () => void | never;
   onBlur?: () => void | never;
+  renderSelector: (selector: React.ReactElement, blur?: () => void) => JSX.Element|null
+  requestShowSelector: () => void
+  requestCloseSelector: () => void
 }
 
 const DateTimePicker: React.FC<DateTimePickerProps> = ({
@@ -34,7 +33,6 @@ const DateTimePicker: React.FC<DateTimePickerProps> = ({
   offsetThreshold,
   upperOffsetThreshold,
   lowerOffsetThreshold,
-
   dateModalTitle,
   timeModalTitle,
   dateConfirmButtonText,
@@ -44,7 +42,6 @@ const DateTimePicker: React.FC<DateTimePickerProps> = ({
   yearLabel,
   hourLabel,
   minuteLabel,
-
   placeholder,
   onFocus,
   onBlur,
@@ -54,45 +51,68 @@ const DateTimePicker: React.FC<DateTimePickerProps> = ({
   hint,
   variant = 'default',
   TextComponent = Text,
-  DateTimeSelectorComponent,
-  bottomOffset,
+  DateTimeSelectorComponent = DateTimeSelector,
   rightComponent,
-  animationType = 'fade',
   style,
+  renderSelector,
+  requestShowSelector,
+  requestCloseSelector,
   ...rest
 }) => {
+  
   const { focused, handleBlur, handleFocus } = useInputFocus(
     onFocus,
     onBlur,
     !disabled
   );
 
-  const [modalVisible, setModalVisible] = React.useState(false);
-
-  const handlePressInput = () => {
-    setModalVisible(true);
+  const handleShowSelector = () => {
+    requestShowSelector()
     handleFocus();
   };
 
-  const handleCloseModal = () => {
-    setModalVisible(false);
-    handleBlur();
+  const handleChoosing = (value: Date) => {
+    onChange?.(value)
+    requestCloseSelector()
   };
 
   const StyledText = getStyledTextComponent(TextComponent);
-  const displayValue =
-    (value ? formatDate(value, format, { locale: locale }) : placeholder) ||
-    ' ';
+  const displayValue = (value ? formatDate(value, format, { locale: locale }) : placeholder) || ' ';
+  const StyledDateTimeSelector = getStyledDateTimeSelector(DateTimeSelectorComponent)
+
+  const dateTimeSelector = (
+    <StyledDateTimeSelector
+      value={value}
+      mode={mode}
+      format={format}
+      locale={locale}
+      upperDateThreshold={upperDateThreshold}
+      lowerDateThreshold={lowerDateThreshold}
+      offsetThreshold={offsetThreshold}
+      upperOffsetThreshold={upperOffsetThreshold}
+      lowerOffsetThreshold={lowerOffsetThreshold}
+      dateModalTitle={dateModalTitle}
+      timeModalTitle={timeModalTitle}
+      dateConfirmButtonText={dateConfirmButtonText}
+      timeConfirmButtonText={timeConfirmButtonText}
+      dayLabel={dayLabel}
+      monthLabel={monthLabel}
+      yearLabel={yearLabel}
+      hourLabel={hourLabel}
+      minuteLabel={minuteLabel}
+      onChange={handleChoosing}
+    />
+  )
 
   return (
     <>
       {controlComponent ? (
-        controlComponent(handlePressInput, displayValue)
+        controlComponent(handleShowSelector, displayValue)
       ) : (
         <HintInputContainer
           focused={focused}
           viewStyle={style}
-          onPress={handlePressInput}
+          onPress={handleShowSelector}
           disabled={disabled}
           LabelComponent={TextComponent}
           variant={variant}
@@ -111,33 +131,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = ({
           </StyledText>
         </HintInputContainer>
       )}
-      <Modal
-        DateTimeSelectorComponent={DateTimeSelectorComponent}
-        bottomOffset={bottomOffset}
-        visible={modalVisible}
-        onRequestClose={handleCloseModal}
-        animated
-        animationType={animationType}
-        onChange={onChange}
-        value={value}
-        mode={mode}
-        format={format}
-        locale={locale}
-        upperDateThreshold={upperDateThreshold}
-        lowerDateThreshold={lowerDateThreshold}
-        offsetThreshold={offsetThreshold}
-        upperOffsetThreshold={upperOffsetThreshold}
-        lowerOffsetThreshold={lowerOffsetThreshold}
-        dateModalTitle={dateModalTitle}
-        timeModalTitle={timeModalTitle}
-        dateConfirmButtonText={dateConfirmButtonText}
-        timeConfirmButtonText={timeConfirmButtonText}
-        dayLabel={dayLabel}
-        monthLabel={monthLabel}
-        yearLabel={yearLabel}
-        hourLabel={hourLabel}
-        minuteLabel={minuteLabel}
-      />
+      {renderSelector(dateTimeSelector, handleBlur)}
     </>
   );
 };

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

@@ -1,56 +1,8 @@
-import styled, { css } from '@emotion/native';
+import styled from '@emotion/native';
 import { FC } from 'react';
-import { Platform } from 'react-native';
 import { StyleProps } from '../../../types/defaults';
-import { RFValue, RFValueStr } from '../../../utils';
-import {
-  PressableSurface,
-  PressableSurfaceProps
-} from '../../atoms/PressableSurface';
 import { DateTimeSelectorProps } from '../DateTimeSelector';
 
-const isWeb = Platform.OS === 'web';
-
-export const StyledPressableSurface = styled(
-  PressableSurface
-)<PressableSurfaceProps>`
-  width: 100%;
-`;
-
-export const Backdrop = styled(PressableSurface)<Partial<StyleProps>>`
-  ${isWeb
-    ? css`
-        justify-content: center;
-        align-items: center;
-        background-color: rgba(0, 0, 0, 0.5);
-        height: 100vh;
-      `
-    : css`
-        justify-content: flex-end;
-        background-color: rgba(0, 0, 0, 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
-      ? `
-      width: ${RFValueStr('375px')};
-      border-radius: ${borderRadius.micro};
-    `
-      : `
-      border-top-left-radius: ${borderRadius.deca};
-      border-top-right-radius: ${borderRadius.deca};
-    `}
-  `}
-  overflow: hidden;
-`;
-
 export const getStyledDateTimeSelector = (
   component: FC<DateTimeSelectorProps>
 ) => {

package/src/components/molecules/Grid/Item/Item.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
-import {
-  extractNumbersFromString,
-  SpacingType,
-  useTheme,
-} from '@tecsinapse/react-core';
 import { View } from 'react-native';
+import { useTheme } from '../../../../hooks';
+import { SpacingType } from '../../../../types/defaults';
+import { extractNumbersFromString } from '../../../../utils';
 
 type FlexPositioning = 'flex-start' | 'flex-end' | 'center';
 type FlexAlignBase = FlexPositioning | 'stretch';

package/src/components/molecules/HintInputContainer/HintInputContainer.tsx

@@ -1,12 +1,7 @@
-import {
-  Hint,
-  InputVariantType,
-  PressableInputContainer,
-  PressableInputContainerProps,
-  TextProps,
-} from '@tecsinapse/react-core';
-import { StyleProp, View, ViewStyle } from 'react-native';
 import * as React from 'react';
+import { StyleProp, View, ViewStyle } from 'react-native';
+import { Hint, InputVariantType, PressableInputContainer, PressableInputContainerProps } from '../../atoms/Input';
+import { TextProps } from '../../atoms/Text';
 
 export interface HintInputContainerProps extends PressableInputContainerProps {
   viewStyle?: StyleProp<ViewStyle>;

package/src/components/molecules/TextArea/TextArea.tsx

@@ -1,15 +1,9 @@
 import React, { FC } from 'react';
-import {
-  FontStackType,
-  FontWeightType,
-  Hint,
-  InputContainerProps,
-  InputElementProps,
-  TextProps,
-} from '@tecsinapse/react-core';
 import { View } from 'react-native';
+import { FontStackType, FontWeightType } from '../../../types/defaults';
+import { Hint, InputContainerProps, InputElementProps } from '../../atoms/Input';
+import { Text, TextProps } from '../../atoms/Text';
 import { StyledInputContainer } from './styled';
-import { Text } from '../../atoms/Text';
 
 export interface TextAreaProps
   extends Omit<InputElementProps, 'style' | 'multiline' | 'value'>,

package/src/index.ts

@@ -31,16 +31,13 @@ export {
   InputElement,
   InputElementProps,
   InputVariantType,
-  Masks,
   PressableInputContainer,
   PressableInputContainerProps,
   StyledBorderKeeper,
-  useCurrencyMask,
   useInputFocus,
-  useMask,
+  useNumberMask,
+  useStringMask,
   disabledInputStyles,
-  IMask,
-  IMaskValue,
 } from './components/atoms/Input';
 export { Paper, PaperProps } from './components/atoms/Paper';
 export {
@@ -57,6 +54,7 @@ export {
   CalendarProps,
   DateRange,
   SelectionType,
+  Value,
 } from './components/molecules/Calendar';
 export { DatePicker, DatePickerProps } from './components/molecules/DatePicker';
 export {

package/src/utils/ResponsiveFontSize.ts

@@ -2,7 +2,7 @@ import { Dimensions, Platform, StatusBar } from "react-native";
 import { extractNumbersFromString } from "./extractNumbersFromString";
 import { isIphoneX } from "./IPhoneXHelper";
 
-const STANDARD_SCREEN_HEIGHT = 640
+const STANDARD_SCREEN_HEIGHT = 680
 
 /**
  * Use this function when you want to scale a percentage number
@@ -40,7 +40,7 @@ export const RFValue = (fontSize: number, standardScreenHeight: number = STANDAR
 }
 
 /**
- * Same of RFValue, however you can provide string values. E.g: '10px', '-5px'.
+ * Same as RFValue, however you can provide string values. E.g: '10px', '-5px'.
  * 
  * @param fontSize 
  * @param standardScreenHeight 

package/src/utils/formatWithMask.ts

@@ -0,0 +1,25 @@
+import {
+  MaskType,
+  CurrencyOptions,
+  getMask,
+  mergeMask,
+  getInternalNumberAndMask,
+} from '../components/atoms/Input';
+import currency from 'currency.js';
+
+export const formatWithMask = (
+  mask: (MaskType[] | ((value: string) => MaskType[])) | CurrencyOptions,
+  value: string | number
+): string | number => {
+  if (Array.isArray(mask) || typeof mask === 'function') {
+    const selectedMask = getMask(mask, String(value));
+    const { formatted } = mergeMask(String(value), selectedMask);
+    return formatted || '';
+  } else {
+    const { internalNumber, mergedOptions } = getInternalNumberAndMask(
+      value,
+      mask
+    );
+    return currency(internalNumber).format(mergedOptions);
+  }
+};

package/src/utils/index.ts

@@ -3,5 +3,7 @@ export {
   extractNumbersFromString,
   extractDigitsFromString,
 } from './extractNumbersFromString';
-export * from './IPhoneXHelper'
-export * from './ResponsiveFontSize'
+export * from './IPhoneXHelper';
+export * from './ResponsiveFontSize';
+export * from './masks';
+export * from './formatWithMask';

package/src/utils/masks.ts

@@ -0,0 +1,13 @@
+// NOTE: Add here all individually utils, then you can use it on input components everywhere.
+export const Masks = {
+  CPF: ['999.999.999-99'],
+  CNPJ: ['99.999.999/9999-99'],
+  DATE: ['99/99/9999'],
+  MONTH_YEAR: ['99/9999'],
+  CEP: ['99999-999'],
+  PHONE: ['(99) 9999-9999'],
+  PHONE_EXTENDED: ['(99) 99999-9999'],
+  COMBINED_PHONE: (value: string) =>
+    // Value in formatted mode
+    value?.length <= 14 ? Masks.PHONE : Masks.PHONE_EXTENDED,
+};

package/dist/components/atoms/Input/hooks/useCurrencyMask.d.ts

@@ -1,3 +0,0 @@
-import currency from 'currency.js';
-import { IMask } from './useMask';
-export declare const useCurrencyMask: (options?: currency.Options | undefined, defaultValue?: string | undefined) => [IMask, (value: string) => void];

package/dist/components/atoms/Input/hooks/useCurrencyMask.js

@@ -1,69 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useCurrencyMask = void 0;
-
-var _currency = _interopRequireDefault(require("currency.js"));
-
-var _react = require("react");
-
-var _reactCore = require("@tecsinapse/react-core");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const DEFAULT_OPTIONS = {
-  symbol: 'R$ ',
-  separator: '.',
-  decimal: ',',
-  precision: 2
-};
-
-const useCurrencyMask = (options, defaultValue) => {
-  const getRegex = (0, _react.useCallback)(precision => new RegExp(`\\B(?=(\\d{${precision}})(?!\\d))`, 'g'), [options]);
-  const applyMask = (0, _react.useCallback)((value = '') => {
-    const mergedOptions = { ...DEFAULT_OPTIONS,
-      ...options
-    };
-    const {
-      precision = -1
-    } = mergedOptions;
-    const onlyNumbers = String((0, _reactCore.extractNumbersFromString)(value));
-    const padZeros = String(onlyNumbers).padStart(precision + 1, '0');
-    let 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 {
-      raw: internalNumber,
-      formatted: (0, _currency.default)(internalNumber).format(mergedOptions)
-    };
-  }, [options, getRegex]);
-  const [value, setValue] = (0, _react.useState)({
-    converter: applyMask,
-    maskValue: applyMask(defaultValue)
-  });
-  const handleChangeValue = (0, _react.useCallback)(formattedValue => {
-    const {
-      raw,
-      formatted
-    } = applyMask(formattedValue);
-    setValue(oldValue => ({ ...oldValue,
-      maskValue: {
-        raw,
-        formatted
-      }
-    }));
-  }, [applyMask, setValue]);
-  return [value, handleChangeValue];
-};
-
-exports.useCurrencyMask = useCurrencyMask;
-//# sourceMappingURL=useCurrencyMask.js.map

package/dist/components/atoms/Input/hooks/useCurrencyMask.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../../src/components/atoms/Input/hooks/useCurrencyMask.ts"],"names":["DEFAULT_OPTIONS","symbol","separator","decimal","precision","useCurrencyMask","options","defaultValue","getRegex","RegExp","applyMask","value","mergedOptions","onlyNumbers","String","padZeros","padStart","internalNumber","Number","replace","MAX_SAFE_INTEGER","MIN_SAFE_INTEGER","raw","formatted","format","setValue","converter","maskValue","handleChangeValue","formattedValue","oldValue"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;AAIA,MAAMA,eAAgC,GAAG;AACvCC,EAAAA,MAAM,EAAE,KAD+B;AAEvCC,EAAAA,SAAS,EAAE,GAF4B;AAGvCC,EAAAA,OAAO,EAAE,GAH8B;AAIvCC,EAAAA,SAAS,EAAE;AAJ4B,CAAzC;;AAaO,MAAMC,eAAe,GAAG,CAC7BC,OAD6B,EAE7BC,YAF6B,KAGQ;AACrC,QAAMC,QAAQ,GAAG,wBACdJ,SAAD,IAAuB,IAAIK,MAAJ,CAAY,cAAaL,SAAU,YAAnC,EAAgD,GAAhD,CADR,EAEf,CAACE,OAAD,CAFe,CAAjB;AAKA,QAAMI,SAAS,GAAG,wBAChB,CAACC,KAAK,GAAG,EAAT,KAA4B;AAC1B,UAAMC,aAAa,GAAG,EAAE,GAAGZ,eAAL;AAAsB,SAAGM;AAAzB,KAAtB;AACA,UAAM;AAAEF,MAAAA,SAAS,GAAG,CAAC;AAAf,QAAqBQ,aAA3B;AACA,UAAMC,WAAW,GAAGC,MAAM,CAAC,yCAAyBH,KAAzB,CAAD,CAA1B;AACA,UAAMI,QAAQ,GAAGD,MAAM,CAACD,WAAD,CAAN,CAAoBG,QAApB,CAA6BZ,SAAS,GAAG,CAAzC,EAA4C,GAA5C,CAAjB;AACA,QAAIa,cAAc,GAAGC,MAAM,CAACH,QAAQ,CAACI,OAAT,CAAiBX,QAAQ,CAACJ,SAAD,CAAzB,EAAsC,GAAtC,CAAD,CAA3B;;AAEA,QAAIa,cAAc,GAAGC,MAAM,CAACE,gBAA5B,EAA8C;AAC5CH,MAAAA,cAAc,GAAGC,MAAM,CAACE,gBAAxB;AACD;;AAED,QAAIH,cAAc,GAAGC,MAAM,CAACG,gBAA5B,EAA8C;AAC5CJ,MAAAA,cAAc,GAAGC,MAAM,CAACG,gBAAxB;AACD;;AAED,WAAO;AACLC,MAAAA,GAAG,EAAEL,cADA;AAELM,MAAAA,SAAS,EAAE,uBAASN,cAAT,EAAyBO,MAAzB,CAAgCZ,aAAhC;AAFN,KAAP;AAID,GApBe,EAqBhB,CAACN,OAAD,EAAUE,QAAV,CArBgB,CAAlB;AAwBA,QAAM,CAACG,KAAD,EAAQc,QAAR,IAAoB,qBAAgB;AACxCC,IAAAA,SAAS,EAAEhB,SAD6B;AAExCiB,IAAAA,SAAS,EAAEjB,SAAS,CAACH,YAAD;AAFoB,GAAhB,CAA1B;AAKA,QAAMqB,iBAAiB,GAAG,wBACvBC,cAAD,IAA4B;AAC1B,UAAM;AAAEP,MAAAA,GAAF;AAAOC,MAAAA;AAAP,QAAqBb,SAAS,CAACmB,cAAD,CAApC;AACAJ,IAAAA,QAAQ,CAACK,QAAQ,KAAK,EACpB,GAAGA,QADiB;AAEpBH,MAAAA,SAAS,EAAE;AACTL,QAAAA,GADS;AAETC,QAAAA;AAFS;AAFS,KAAL,CAAT,CAAR;AAOD,GAVuB,EAWxB,CAACb,SAAD,EAAYe,QAAZ,CAXwB,CAA1B;AAcA,SAAO,CAACd,KAAD,EAAQiB,iBAAR,CAAP;AACD,CArDM","sourcesContent":["import currency from 'currency.js';\nimport { useCallback, useState } from 'react';\nimport { IMaskValue, IMask } from './useMask';\nimport { extractNumbersFromString } from '@tecsinapse/react-core';\n\ntype CurrencyOptions = currency.Options;\n\nconst DEFAULT_OPTIONS: CurrencyOptions = {\n  symbol: 'R$ ',\n  separator: '.',\n  decimal: ',',\n  precision: 2,\n};\n\n/**\n * TODO:\n * @param options\n * @param defaultValue\n * @returns\n */\nexport const useCurrencyMask = (\n  options?: CurrencyOptions,\n  defaultValue?: string\n): [IMask, (value: string) => void] => {\n  const getRegex = useCallback(\n    (precision: number) => new RegExp(`\\\\B(?=(\\\\d{${precision}})(?!\\\\d))`, 'g'),\n    [options]\n  );\n\n  const applyMask = useCallback(\n    (value = ''): IMaskValue => {\n      const mergedOptions = { ...DEFAULT_OPTIONS, ...options };\n      const { precision = -1 } = mergedOptions;\n      const onlyNumbers = String(extractNumbersFromString(value));\n      const padZeros = String(onlyNumbers).padStart(precision + 1, '0');\n      let internalNumber = Number(padZeros.replace(getRegex(precision), '.'));\n\n      if (internalNumber > Number.MAX_SAFE_INTEGER) {\n        internalNumber = Number.MAX_SAFE_INTEGER;\n      }\n\n      if (internalNumber < Number.MIN_SAFE_INTEGER) {\n        internalNumber = Number.MIN_SAFE_INTEGER;\n      }\n\n      return {\n        raw: internalNumber,\n        formatted: currency(internalNumber).format(mergedOptions),\n      };\n    },\n    [options, getRegex]\n  );\n\n  const [value, setValue] = useState<IMask>({\n    converter: applyMask,\n    maskValue: applyMask(defaultValue),\n  });\n\n  const handleChangeValue = useCallback(\n    (formattedValue: string) => {\n      const { raw, formatted } = applyMask(formattedValue);\n      setValue(oldValue => ({\n        ...oldValue,\n        maskValue: {\n          raw,\n          formatted,\n        },\n      }));\n    },\n    [applyMask, setValue]\n  );\n\n  return [value, handleChangeValue];\n};\n"],"file":"useCurrencyMask.js"}

package/dist/components/atoms/Input/hooks/useMask.d.ts

@@ -1,9 +0,0 @@
-export interface IMaskValue {
-    formatted?: string;
-    raw?: any;
-}
-export interface IMask {
-    converter?: (raw?: string) => IMaskValue;
-    maskValue?: IMaskValue;
-}
-export declare const useMask: (mask: string | ((raw: any) => string), defaultValue?: string | undefined) => [IMask, (text: string) => void];

package/dist/components/atoms/Input/hooks/useMask.js

@@ -1,61 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useMask = void 0;
-
-var _react = require("react");
-
-var _reactCore = require("@tecsinapse/react-core");
-
-const mergeMask = (value = '', mask) => {
-  const chars = '' + value;
-  let formattedValue = '';
-
-  for (let iMask = 0, iChars = 0; iMask < mask.length && iChars < chars.length; iMask++) {
-    formattedValue += mask.charAt(iMask) === '9' ? chars.charAt(iChars++) : mask.charAt(iMask);
-  }
-
-  return formattedValue;
-};
-
-const getMask = (value = '', mask) => {
-  if (typeof mask === 'function') {
-    return mask(value);
-  }
-
-  return mask;
-};
-
-const useMask = (mask, defaultValue) => {
-  const applyMask = (0, _react.useCallback)((value = '') => {
-    const onlyNumbers = value ? (0, _reactCore.extractDigitsFromString)(value) : value;
-    const selectedMask = getMask(onlyNumbers, mask);
-    const formattedValue = mergeMask(onlyNumbers, selectedMask);
-    return {
-      raw: onlyNumbers,
-      formatted: formattedValue
-    };
-  }, [mask]);
-  const [value, setValue] = (0, _react.useState)({
-    converter: applyMask,
-    maskValue: applyMask(defaultValue)
-  });
-  const handleChangeValue = (0, _react.useCallback)(value => {
-    const {
-      raw,
-      formatted
-    } = applyMask(value);
-    setValue(oldValue => ({ ...oldValue,
-      maskValue: {
-        raw,
-        formatted
-      }
-    }));
-  }, [applyMask, setValue]);
-  return [value, handleChangeValue];
-};
-
-exports.useMask = useMask;
-//# sourceMappingURL=useMask.js.map

package/dist/components/atoms/Input/hooks/useMask.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../../src/components/atoms/Input/hooks/useMask.ts"],"names":["mergeMask","value","mask","chars","formattedValue","iMask","iChars","length","charAt","getMask","useMask","defaultValue","applyMask","onlyNumbers","selectedMask","raw","formatted","setValue","converter","maskValue","handleChangeValue","oldValue"],"mappings":";;;;;;;AAAA;;AACA;;AAkBA,MAAMA,SAAS,GAAG,CAACC,KAAK,GAAG,EAAT,EAAaC,IAAb,KAA8B;AAC9C,QAAMC,KAAK,GAAG,KAAKF,KAAnB;AACA,MAAIG,cAAc,GAAG,EAArB;;AAEA,OACE,IAAIC,KAAK,GAAG,CAAZ,EAAeC,MAAM,GAAG,CAD1B,EAEED,KAAK,GAAGH,IAAI,CAACK,MAAb,IAAuBD,MAAM,GAAGH,KAAK,CAACI,MAFxC,EAGEF,KAAK,EAHP,EAIE;AACAD,IAAAA,cAAc,IACZF,IAAI,CAACM,MAAL,CAAYH,KAAZ,MAAuB,GAAvB,GAA6BF,KAAK,CAACK,MAAN,CAAaF,MAAM,EAAnB,CAA7B,GAAsDJ,IAAI,CAACM,MAAL,CAAYH,KAAZ,CADxD;AAED;;AACD,SAAOD,cAAP;AACD,CAbD;;AAqBA,MAAMK,OAAO,GAAG,CAACR,KAAK,GAAG,EAAT,EAAaC,IAAb,KAA+D;AAC7E,MAAI,OAAOA,IAAP,KAAgB,UAApB,EAAgC;AAC9B,WAAOA,IAAI,CAACD,KAAD,CAAX;AACD;;AACD,SAAOC,IAAP;AACD,CALD;;AAaO,MAAMQ,OAAO,GAAG,CACrBR,IADqB,EAErBS,YAFqB,KAGe;AACpC,QAAMC,SAAS,GAAG,wBAChB,CAACX,KAAK,GAAG,EAAT,KAA4B;AAC1B,UAAMY,WAAW,GAAGZ,KAAK,GAAG,wCAAwBA,KAAxB,CAAH,GAAoCA,KAA7D;AACA,UAAMa,YAAY,GAAGL,OAAO,CAACI,WAAD,EAAcX,IAAd,CAA5B;AACA,UAAME,cAAc,GAAGJ,SAAS,CAACa,WAAD,EAAcC,YAAd,CAAhC;AAEA,WAAO;AACLC,MAAAA,GAAG,EAAEF,WADA;AAELG,MAAAA,SAAS,EAAEZ;AAFN,KAAP;AAID,GAVe,EAWhB,CAACF,IAAD,CAXgB,CAAlB;AAcA,QAAM,CAACD,KAAD,EAAQgB,QAAR,IAAoB,qBAAgB;AACxCC,IAAAA,SAAS,EAAEN,SAD6B;AAExCO,IAAAA,SAAS,EAAEP,SAAS,CAACD,YAAD;AAFoB,GAAhB,CAA1B;AAKA,QAAMS,iBAAiB,GAAG,wBACvBnB,KAAD,IAAmB;AACjB,UAAM;AAAEc,MAAAA,GAAF;AAAOC,MAAAA;AAAP,QAAqBJ,SAAS,CAACX,KAAD,CAApC;AACAgB,IAAAA,QAAQ,CAACI,QAAQ,KAAK,EACpB,GAAGA,QADiB;AAEpBF,MAAAA,SAAS,EAAE;AACTJ,QAAAA,GADS;AAETC,QAAAA;AAFS;AAFS,KAAL,CAAT,CAAR;AAOD,GAVuB,EAWxB,CAACJ,SAAD,EAAYK,QAAZ,CAXwB,CAA1B;AAcA,SAAO,CAAChB,KAAD,EAAQmB,iBAAR,CAAP;AACD,CAtCM","sourcesContent":["import { useCallback, useState } from 'react';\nimport { extractDigitsFromString } from '@tecsinapse/react-core';\n\nexport interface IMaskValue {\n  formatted?: string;\n  raw?: any;\n}\n\nexport interface IMask {\n  converter?: (raw?: string) => IMaskValue;\n  maskValue?: IMaskValue;\n}\n\n/**\n * TODO:\n * @param value\n * @param mask\n * @returns\n */\nconst mergeMask = (value = '', mask: string) => {\n  const chars = '' + value;\n  let formattedValue = '';\n\n  for (\n    let iMask = 0, iChars = 0;\n    iMask < mask.length && iChars < chars.length;\n    iMask++\n  ) {\n    formattedValue +=\n      mask.charAt(iMask) === '9' ? chars.charAt(iChars++) : mask.charAt(iMask);\n  }\n  return formattedValue;\n};\n\n/**\n * TODO:\n * @param value\n * @param mask\n * @returns\n */\nconst getMask = (value = '', mask: ((raw: any) => string) | string): string => {\n  if (typeof mask === 'function') {\n    return mask(value);\n  }\n  return mask;\n};\n\n/**\n * TODO:\n * @param mask\n * @param defaultValue\n * @returns\n */\nexport const useMask = (\n  mask: ((raw: any) => string) | string,\n  defaultValue?: string\n): [IMask, (text: string) => void] => {\n  const applyMask = useCallback(\n    (value = ''): IMaskValue => {\n      const onlyNumbers = value ? extractDigitsFromString(value) : value;\n      const selectedMask = getMask(onlyNumbers, mask);\n      const formattedValue = mergeMask(onlyNumbers, selectedMask);\n\n      return {\n        raw: onlyNumbers,\n        formatted: formattedValue,\n      };\n    },\n    [mask]\n  );\n\n  const [value, setValue] = useState<IMask>({\n    converter: applyMask,\n    maskValue: applyMask(defaultValue),\n  });\n\n  const handleChangeValue = useCallback(\n    (value: string) => {\n      const { raw, formatted } = applyMask(value);\n      setValue(oldValue => ({\n        ...oldValue,\n        maskValue: {\n          raw,\n          formatted,\n        },\n      }));\n    },\n    [applyMask, setValue]\n  );\n\n  return [value, handleChangeValue];\n};\n"],"file":"useMask.js"}

package/dist/components/atoms/Input/masks/index.d.ts

@@ -1,10 +0,0 @@
-export declare const Masks: {
-    CPF: string;
-    CNPJ: string;
-    DATE: string;
-    MONTH_YEAR: string;
-    CEP: string;
-    PHONE: string;
-    PHONE_EXTENDED: string;
-    COMBINED_PHONE: (value: string) => string;
-};

package/dist/components/atoms/Input/masks/index.js

@@ -1,18 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Masks = void 0;
-const Masks = {
-  CPF: '999.999.999-99',
-  CNPJ: '99.999.999/9999-99',
-  DATE: '99/99/9999',
-  MONTH_YEAR: '99/9999',
-  CEP: '99999-999',
-  PHONE: '(99) 9999-9999',
-  PHONE_EXTENDED: '(99) 99999-9999',
-  COMBINED_PHONE: value => (value === null || value === void 0 ? void 0 : value.length) <= 10 ? Masks.PHONE : Masks.PHONE_EXTENDED
-};
-exports.Masks = Masks;
-//# sourceMappingURL=index.js.map

package/dist/components/atoms/Input/masks/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../../src/components/atoms/Input/masks/index.ts"],"names":["Masks","CPF","CNPJ","DATE","MONTH_YEAR","CEP","PHONE","PHONE_EXTENDED","COMBINED_PHONE","value","length"],"mappings":";;;;;;AACO,MAAMA,KAAK,GAAG;AACnBC,EAAAA,GAAG,EAAE,gBADc;AAEnBC,EAAAA,IAAI,EAAE,oBAFa;AAGnBC,EAAAA,IAAI,EAAE,YAHa;AAInBC,EAAAA,UAAU,EAAE,SAJO;AAKnBC,EAAAA,GAAG,EAAE,WALc;AAMnBC,EAAAA,KAAK,EAAE,gBANY;AAOnBC,EAAAA,cAAc,EAAE,iBAPG;AAQnBC,EAAAA,cAAc,EAAGC,KAAD,IACd,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEC,MAAP,KAAiB,EAAjB,GAAsBV,KAAK,CAACM,KAA5B,GAAoCN,KAAK,CAACO;AATzB,CAAd","sourcesContent":["// NOTE: Add here all individually masks, then you can use it on input components everywhere.\nexport const Masks = {\n  CPF: '999.999.999-99',\n  CNPJ: '99.999.999/9999-99',\n  DATE: '99/99/9999',\n  MONTH_YEAR: '99/9999',\n  CEP: '99999-999',\n  PHONE: '(99) 9999-9999',\n  PHONE_EXTENDED: '(99) 99999-9999',\n  COMBINED_PHONE: (value: string) =>\n    value?.length <= 10 ? Masks.PHONE : Masks.PHONE_EXTENDED,\n};\n"],"file":"index.js"}

package/dist/components/molecules/DatePicker/Modal.d.ts

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import { ModalProps } from 'react-native';
-import { CalendarProps, SelectionType } from '../Calendar';
-export interface DatePickerModalProps<T extends SelectionType> {
-    CalendarComponent?: React.FC<CalendarProps<T>>;
-    bottomOffset?: number;
-}
-export declare const Modal: <T extends SelectionType>({ type, value, onRequestClose, month, year, onChange, CalendarComponent, bottomOffset, locale, ...modalProps }: CalendarProps<T> & import("react-native").ModalBaseProps & import("react-native").ModalPropsIOS & import("react-native").ModalPropsAndroid & import("react-native").ViewProps & DatePickerModalProps<T>) => JSX.Element;

package/dist/components/molecules/DatePicker/Modal.js

@@ -1,60 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Modal = void 0;
-
-var React = _interopRequireWildcard(require("react"));
-
-var _reactNative = require("react-native");
-
-var _Calendar = require("../Calendar");
-
-var _styled = require("./styled");
-
-var _reactCore = require("@tecsinapse/react-core");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-const Component = ({
-  type,
-  value,
-  onRequestClose,
-  month,
-  year,
-  onChange,
-  CalendarComponent = _Calendar.Calendar,
-  bottomOffset = 0,
-  locale,
-  ...modalProps
-}) => {
-  return React.createElement(_reactNative.Modal, _extends({
-    transparent: true,
-    hardwareAccelerated: true,
-    statusBarTranslucent: true
-  }, modalProps, {
-    onRequestClose: onRequestClose
-  }), React.createElement(_styled.Backdrop, {
-    onPress: onRequestClose,
-    effect: "none"
-  }, React.createElement(_reactCore.PressableSurface, null, React.createElement(_styled.ModalContent, {
-    offset: bottomOffset
-  }, React.createElement(CalendarComponent, {
-    pointerEvents: 'box-none',
-    type: type,
-    value: value,
-    month: month,
-    year: year,
-    onChange: onChange,
-    locale: locale
-  })))));
-};
-
-const Modal = Component;
-exports.Modal = Modal;
-//# sourceMappingURL=Modal.js.map

package/dist/components/molecules/DatePicker/Modal.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/components/molecules/DatePicker/Modal.tsx"],"names":["Component","type","value","onRequestClose","month","year","onChange","CalendarComponent","Calendar","bottomOffset","locale","modalProps","Modal"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAOA,MAAMA,SAAS,GAAG,CAA0B;AAC1CC,EAAAA,IAD0C;AAE1CC,EAAAA,KAF0C;AAG1CC,EAAAA,cAH0C;AAI1CC,EAAAA,KAJ0C;AAK1CC,EAAAA,IAL0C;AAM1CC,EAAAA,QAN0C;AAO1CC,EAAAA,iBAAiB,GAAGC,kBAPsB;AAQ1CC,EAAAA,YAAY,GAAG,CAR2B;AAS1CC,EAAAA,MAT0C;AAU1C,KAAGC;AAVuC,CAA1B,KAW0D;AAC1E,SACE,oBAAC,kBAAD;AACE,IAAA,WAAW,MADb;AAEE,IAAA,mBAAmB,MAFrB;AAGE,IAAA,oBAAoB;AAHtB,KAIMA,UAJN;AAKE,IAAA,cAAc,EAAER;AALlB,MAOE,oBAAC,gBAAD;AAAU,IAAA,OAAO,EAAEA,cAAnB;AAAmC,IAAA,MAAM,EAAC;AAA1C,KACE,oBAAC,2BAAD,QACE,oBAAC,oBAAD;AAAc,IAAA,MAAM,EAAEM;AAAtB,KACE,oBAAC,iBAAD;AACE,IAAA,aAAa,EAAE,UADjB;AAEE,IAAA,IAAI,EAAER,IAFR;AAGE,IAAA,KAAK,EAAEC,KAHT;AAIE,IAAA,KAAK,EAAEE,KAJT;AAKE,IAAA,IAAI,EAAEC,IALR;AAME,IAAA,QAAQ,EAAEC,QANZ;AAOE,IAAA,MAAM,EAAEI;AAPV,IADF,CADF,CADF,CAPF,CADF;AAyBD,CArCD;;AAuCO,MAAME,KAAK,GAAGZ,SAAd","sourcesContent":["import * as React from 'react';\nimport { Modal as RNModal, ModalProps } from 'react-native';\nimport { Calendar, CalendarProps, SelectionType } from '../Calendar';\nimport { Backdrop, ModalContent } from './styled';\nimport { PressableSurface } from '@tecsinapse/react-core';\n\nexport interface DatePickerModalProps<T extends SelectionType> {\n  CalendarComponent?: React.FC<CalendarProps<T>>;\n  bottomOffset?: number;\n}\n\nconst Component = <T extends SelectionType>({\n  type,\n  value,\n  onRequestClose,\n  month,\n  year,\n  onChange,\n  CalendarComponent = Calendar,\n  bottomOffset = 0,\n  locale,\n  ...modalProps\n}: CalendarProps<T> & ModalProps & DatePickerModalProps<T>): JSX.Element => {\n  return (\n    <RNModal\n      transparent\n      hardwareAccelerated\n      statusBarTranslucent\n      {...modalProps}\n      onRequestClose={onRequestClose}\n    >\n      <Backdrop onPress={onRequestClose} effect=\"none\">\n        <PressableSurface>\n          <ModalContent offset={bottomOffset}>\n            <CalendarComponent\n              pointerEvents={'box-none'}\n              type={type}\n              value={value}\n              month={month}\n              year={year}\n              onChange={onChange}\n              locale={locale}\n            />\n          </ModalContent>\n        </PressableSurface>\n      </Backdrop>\n    </RNModal>\n  );\n};\n\nexport const Modal = Component;\n"],"file":"Modal.js"}