@tecsinapse/react-core 1.13.0 → 1.14.0

package/dist/utils/index.js

@@ -58,4 +58,32 @@ Object.keys(_ResponsiveFontSize).forEach(function (key) {
     }
   });
 });
+
+var _masks = require("./masks");
+
+Object.keys(_masks).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _masks[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _masks[key];
+    }
+  });
+});
+
+var _formatWithMask = require("./formatWithMask");
+
+Object.keys(_formatWithMask).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _formatWithMask[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _formatWithMask[key];
+    }
+  });
+});
 //# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAIA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { lightenDarkenColor } from './lightenDarkenColor';\nexport {\n  extractNumbersFromString,\n  extractDigitsFromString,\n} from './extractNumbersFromString';\nexport * from './IPhoneXHelper'\nexport * from './ResponsiveFontSize'"],"file":"index.js"}
+{"version":3,"sources":["../../src/utils/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAIA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { lightenDarkenColor } from './lightenDarkenColor';\nexport {\n  extractNumbersFromString,\n  extractDigitsFromString,\n} from './extractNumbersFromString';\nexport * from './IPhoneXHelper';\nexport * from './ResponsiveFontSize';\nexport * from './masks';\nexport * from './formatWithMask';\n"],"file":"index.js"}

package/dist/utils/masks.d.ts

@@ -0,0 +1,10 @@
+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/utils/masks.js

@@ -0,0 +1,18 @@
+"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) <= 14 ? Masks.PHONE : Masks.PHONE_EXTENDED
+};
+exports.Masks = Masks;
+//# sourceMappingURL=masks.js.map

package/dist/utils/masks.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/masks.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,CAAC,gBAAD,CADc;AAEnBC,EAAAA,IAAI,EAAE,CAAC,oBAAD,CAFa;AAGnBC,EAAAA,IAAI,EAAE,CAAC,YAAD,CAHa;AAInBC,EAAAA,UAAU,EAAE,CAAC,SAAD,CAJO;AAKnBC,EAAAA,GAAG,EAAE,CAAC,WAAD,CALc;AAMnBC,EAAAA,KAAK,EAAE,CAAC,gBAAD,CANY;AAOnBC,EAAAA,cAAc,EAAE,CAAC,iBAAD,CAPG;AAQnBC,EAAAA,cAAc,EAAGC,KAAD,IAEd,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEC,MAAP,KAAiB,EAAjB,GAAsBV,KAAK,CAACM,KAA5B,GAAoCN,KAAK,CAACO;AAVzB,CAAd","sourcesContent":["// NOTE: Add here all individually utils, 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 in formatted mode\n    value?.length <= 14 ? Masks.PHONE : Masks.PHONE_EXTENDED,\n};\n"],"file":"masks.js"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-core",
   "description": "TecSinapse hybrid React components",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -31,5 +31,5 @@
     "react-native": ">=0.64.0",
     "react-native-vector-icons": ">=8.1.0"
   },
-  "gitHead": "d5d2193bf8716615751e28b7009da59520e8080c"
+  "gitHead": "fb1d3b3bfa028174ef30ee2c9387a04c81699c3f"
 }

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/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,7 +54,7 @@ export {
   CalendarProps,
   DateRange,
   SelectionType,
-  Value
+  Value,
 } from './components/molecules/Calendar';
 export { DatePicker, DatePickerProps } from './components/molecules/DatePicker';
 export {

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 _utils = require("../../../../utils");
-
-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, _utils.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;;AACA;;;;AAKA,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,qCAAyBH,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 { extractNumbersFromString } from '../../../../utils';\nimport { IMask, IMaskValue } from './useMask';\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 _utils = require("../../../../utils");
-
-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, _utils.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,oCAAwBA,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 '../../../../utils';\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;
-};