@tecsinapse/react-core 1.13.0 → 1.14.3

package/CHANGELOG.md

@@ -3,6 +3,48 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.14.3](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.14.2...@tecsinapse/react-core@1.14.3) (2022-02-16)
+
+**Note:** Version bump only for package @tecsinapse/react-core
+
+
+
+
+
+## [1.14.2](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.14.1...@tecsinapse/react-core@1.14.2) (2022-02-15)
+
+
+### Bug Fixes
+
+* Input initializan for string and no mask. ([78353ef](https://github.com/tecsinapse/design-system/commit/78353ef7b4d24216a1b99eab800f8d448ff21a34))
+
+
+
+
+
+## [1.14.1](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.14.0...@tecsinapse/react-core@1.14.1) (2022-02-15)
+
+
+### Bug Fixes
+
+* Input initialization. ([a48c2d6](https://github.com/tecsinapse/design-system/commit/a48c2d6d8d1ee8d1282fa5082af40c6a1bce3e4b))
+* Input initialization. ([b0be51f](https://github.com/tecsinapse/design-system/commit/b0be51f7699a3936b7d3d193437a2636bad7abc7))
+
+
+
+
+
+# [1.14.0](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.13.0...@tecsinapse/react-core@1.14.0) (2022-02-14)
+
+
+### Bug Fixes
+
+* formatWithMask util. Refactoring on useNumberMask and useStringMask hooks. ([76920f6](https://github.com/tecsinapse/design-system/commit/76920f62fb8cf9070b9b2e477dc720e9b7b24077))
+
+
+
+
+
 # [1.13.0](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.12.10...@tecsinapse/react-core@1.13.0) (2022-02-09)
 
 **Note:** Version bump only for package @tecsinapse/react-core

package/dist/components/atoms/Input/InputElement/InputElement.d.ts

@@ -1,12 +1,14 @@
 import React, { FC } from 'react';
 import { StyleProp, TextInputProps, TextStyle } from 'react-native';
-import { IMask } from '../hooks/useMask';
+import { MaskType } from '../hooks/useStringMask';
+import { CurrencyOptions } from '../hooks/useNumberMask';
 export interface InputElementProps extends Omit<TextInputProps, 'onChange' | 'value' | 'ref'> {
     style?: StyleProp<TextStyle>;
-    value?: string | IMask;
+    value: string | number;
     placeholder?: string;
     disabled?: boolean;
-    onChange?: (value: string) => void;
+    onChange?: (value: any) => void;
+    mask?: (MaskType[] | ((value: string) => MaskType[])) | CurrencyOptions;
     onFocus?: () => void;
     onBlur?: () => void;
     ref?: React.Ref<any>;

package/dist/components/atoms/Input/InputElement/InputElement.js

@@ -7,11 +7,17 @@ exports.default = void 0;
 
 var _react = require("@emotion/react");
 
-var _react2 = _interopRequireDefault(require("react"));
+var _react2 = _interopRequireWildcard(require("react"));
 
 var _styled = require("../styled");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _useStringMask = require("../hooks/useStringMask");
+
+var _useNumberMask = require("../hooks/useNumberMask");
+
+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); }
 
@@ -21,19 +27,54 @@ const InputElement = _react2.default.forwardRef(({
   value,
   disabled = false,
   placeholderTextColor,
+  mask,
   ...rest
 }, ref) => {
-  var _value$maskValue;
-
   const theme = (0, _react.useTheme)();
-
-  const _value = typeof value === 'string' ? value : value === null || value === void 0 ? void 0 : (_value$maskValue = value.maskValue) === null || _value$maskValue === void 0 ? void 0 : _value$maskValue.formatted;
+  const [valueReinitialized, setValueReinitialized] = (0, _react2.useState)(false);
 
   const _placeholderColor = placeholderTextColor || theme.font.color.dark;
 
+  const getInputHook = () => {
+    if (mask !== undefined) {
+      if (Array.isArray(mask) || typeof mask === 'function') {
+        return (0, _useStringMask.useStringMask)(mask, value ?? '');
+      } else {
+        return (0, _useNumberMask.useNumberMask)(mask, value ?? '');
+      }
+    } else {
+      return [undefined, undefined];
+    }
+  };
+
+  const [maskValue, setMaskValue] = getInputHook();
+
+  const _value = maskValue !== undefined ? (maskValue === null || maskValue === void 0 ? void 0 : maskValue.formatted) ?? '' : (value === null || value === void 0 ? void 0 : value.toString()) ?? '';
+
+  const onChangeMaskValue = (0, _react2.useCallback)(() => {
+    if (onChange) {
+      onChange(maskValue === null || maskValue === void 0 ? void 0 : maskValue.raw);
+    }
+  }, [maskValue]);
+  const onChangeValue = (0, _react2.useCallback)(async value => {
+    if (maskValue !== undefined && setMaskValue !== undefined) {
+      await setMaskValue(value);
+      onChangeMaskValue();
+    } else onChange && onChange(value);
+  }, [value]);
+  (0, _react2.useEffect)(() => {
+    if (!valueReinitialized) {
+      if (maskValue !== undefined && setMaskValue !== undefined && value !== undefined && typeof maskValue === 'object') {
+        if (maskValue.raw !== value.toString()) {
+          setValueReinitialized(true);
+          setMaskValue(value);
+        }
+      }
+    }
+  }, [value, maskValue, valueReinitialized]);
   return _react2.default.createElement(_styled.StyledInputElement, _extends({}, rest, {
     ref: ref,
-    onChangeText: onChange,
+    onChangeText: onChangeValue,
     value: _value,
     placeholder: placeholder,
     placeholderTextColor: _placeholderColor,

package/dist/components/atoms/Input/InputElement/InputElement.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/atoms/Input/InputElement/InputElement.tsx"],"names":["InputElement","React","forwardRef","onChange","placeholder","value","disabled","placeholderTextColor","rest","ref","theme","_value","maskValue","formatted","_placeholderColor","font","color","dark","displayName"],"mappings":";;;;;;;AAAA;;AAEA;;AAGA;;;;;;AAiBA,MAAMA,YAAmC,GAAGC,gBAAMC,UAAN,CAC1C,CACE;AACEC,EAAAA,QADF;AAEEC,EAAAA,WAFF;AAGEC,EAAAA,KAHF;AAIEC,EAAAA,QAAQ,GAAG,KAJb;AAKEC,EAAAA,oBALF;AAME,KAAGC;AANL,CADF,EASEC,GATF,KAUkB;AAAA;;AAChB,QAAMC,KAAK,GAAG,sBAAd;;AACA,QAAMC,MAAM,GACV,OAAON,KAAP,KAAiB,QAAjB,GAA4BA,KAA5B,GAAoCA,KAApC,aAAoCA,KAApC,2CAAoCA,KAAK,CAAEO,SAA3C,qDAAoC,iBAAkBC,SADxD;;AAEA,QAAMC,iBAAiB,GAAGP,oBAAoB,IAAIG,KAAK,CAACK,IAAN,CAAWC,KAAX,CAAiBC,IAAnE;;AAEA,SACE,8BAAC,0BAAD,eACMT,IADN;AAEE,IAAA,GAAG,EAAEC,GAFP;AAGE,IAAA,YAAY,EAAEN,QAHhB;AAIE,IAAA,KAAK,EAAEQ,MAJT;AAKE,IAAA,WAAW,EAAEP,WALf;AAME,IAAA,oBAAoB,EAAEU,iBANxB;AAOE,IAAA,QAAQ,EAAER,QAPZ;AAQE,IAAA,QAAQ,EAAE,CAACA;AARb,KADF;AAYD,CA7ByC,CAA5C;;AAgCAN,YAAY,CAACkB,WAAb,GAA2B,cAA3B;eAEelB,Y","sourcesContent":["import { useTheme } from '@emotion/react';\nimport { ThemeProp } from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport { StyleProp, TextInputProps, TextStyle } from 'react-native';\nimport { IMask } from '../hooks/useMask';\nimport { StyledInputElement } from '../styled';\n\nexport interface InputElementProps\n  extends Omit<TextInputProps, 'onChange' | 'value' | 'ref'> {\n  style?: StyleProp<TextStyle>;\n  /**\n   * TODO:\n   */\n  value?: string | IMask;\n  placeholder?: string;\n  disabled?: boolean;\n  onChange?: (value: string) => void;\n  onFocus?: () => void;\n  onBlur?: () => void;\n  ref?: React.Ref<any>;\n}\n\nconst InputElement: FC<InputElementProps> = React.forwardRef(\n  (\n    {\n      onChange,\n      placeholder,\n      value,\n      disabled = false,\n      placeholderTextColor,\n      ...rest\n    },\n    ref: React.Ref<any>\n  ): JSX.Element => {\n    const theme = useTheme() as ThemeProp;\n    const _value =\n      typeof value === 'string' ? value : value?.maskValue?.formatted;\n    const _placeholderColor = placeholderTextColor || theme.font.color.dark;\n\n    return (\n      <StyledInputElement\n        {...rest}\n        ref={ref}\n        onChangeText={onChange}\n        value={_value}\n        placeholder={placeholder}\n        placeholderTextColor={_placeholderColor}\n        disabled={disabled}\n        editable={!disabled}\n      />\n    );\n  }\n);\n\nInputElement.displayName = 'InputElement';\n\nexport default InputElement;\n"],"file":"InputElement.js"}
+{"version":3,"sources":["../../../../../src/components/atoms/Input/InputElement/InputElement.tsx"],"names":["InputElement","React","forwardRef","onChange","placeholder","value","disabled","placeholderTextColor","mask","rest","ref","theme","valueReinitialized","setValueReinitialized","_placeholderColor","font","color","dark","getInputHook","undefined","Array","isArray","maskValue","setMaskValue","_value","formatted","toString","onChangeMaskValue","raw","onChangeValue","displayName"],"mappings":"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","sourcesContent":["import { useTheme } from '@emotion/react';\nimport { ThemeProp } from '@tecsinapse/react-core';\nimport React, { FC, useCallback, useEffect, useState } from 'react';\nimport { StyleProp, TextInputProps, TextStyle } from 'react-native';\nimport { StyledInputElement } from '../styled';\nimport { MaskType, useStringMask } from '../hooks/useStringMask';\nimport { CurrencyOptions, useNumberMask } from '../hooks/useNumberMask';\n\nexport interface InputElementProps\n  extends Omit<TextInputProps, 'onChange' | 'value' | 'ref'> {\n  style?: StyleProp<TextStyle>;\n  value: string | number;\n  placeholder?: string;\n  disabled?: boolean;\n  onChange?: (value: any) => void;\n  /**\n   To use mask for strings you have to pass a MaskType[] or ((value: string) => MaskType[])\n   A MaskType can be a string, RegExp, or Array<RegExp>.\n   In case we have a string, '9' represents digits, 'a' represents alphabet characters, and any other character represents fixed characters in the mask.\n   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.\n   To use mask for numbers you have to pass a CurrencyOptions object\n   A CurrencyOptions object contains symbol, separator, decimal, precision. For example {symbol: 'R$ ', separator: '.', decimal: ',', precision: 2,}.\n   **/\n  mask?: (MaskType[] | ((value: string) => MaskType[])) | CurrencyOptions;\n  onFocus?: () => void;\n  onBlur?: () => void;\n  ref?: React.Ref<any>;\n}\n\nconst InputElement: FC<InputElementProps> = React.forwardRef(\n  (\n    {\n      onChange,\n      placeholder,\n      value,\n      disabled = false,\n      placeholderTextColor,\n      mask,\n      ...rest\n    },\n    ref: React.Ref<any>\n  ): JSX.Element => {\n    const theme = useTheme() as ThemeProp;\n\n    /** Check if value was reinitialized, without this state we can't total \"erase\" a value that was already reinitialized  **/\n    const [valueReinitialized, setValueReinitialized] = useState<boolean>(\n      false\n    );\n\n    const _placeholderColor = placeholderTextColor || theme.font.color.dark;\n\n    const getInputHook = () => {\n      if (mask !== undefined) {\n        if (Array.isArray(mask) || typeof mask === 'function') {\n          return useStringMask(mask, value ?? '');\n        } else {\n          return useNumberMask(mask, value ?? '');\n        }\n      } else {\n        return [undefined, undefined];\n      }\n    };\n\n    const [maskValue, setMaskValue] = getInputHook();\n\n    const _value =\n      maskValue !== undefined\n        ? maskValue?.formatted ?? ''\n        : value?.toString() ?? '';\n\n    const onChangeMaskValue = useCallback(() => {\n      if (onChange) {\n        onChange(maskValue?.raw);\n      }\n    }, [maskValue]);\n\n    const onChangeValue = useCallback(\n      async (value: string | number) => {\n        if (maskValue !== undefined && setMaskValue !== undefined) {\n          await setMaskValue(value);\n          onChangeMaskValue();\n        } else onChange && onChange(value);\n      },\n      [value]\n    );\n\n    useEffect(() => {\n      if (!valueReinitialized) {\n        /** Used to reinitialize maskValue with a value that was loaded after Input was rendered **/\n        if (\n          maskValue !== undefined &&\n          setMaskValue !== undefined &&\n          value !== undefined &&\n          typeof maskValue === 'object'\n        ) {\n          /** Case there is a mask **/\n          if (maskValue.raw !== value.toString()) {\n            setValueReinitialized(true);\n            setMaskValue(value);\n          }\n        }\n      }\n    }, [value, maskValue, valueReinitialized]);\n\n    return (\n      <StyledInputElement\n        {...rest}\n        ref={ref}\n        onChangeText={onChangeValue}\n        value={_value}\n        placeholder={placeholder}\n        placeholderTextColor={_placeholderColor}\n        disabled={disabled}\n        editable={!disabled}\n      />\n    );\n  }\n);\n\nInputElement.displayName = 'InputElement';\n\nexport default InputElement;\n"],"file":"InputElement.js"}

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

@@ -0,0 +1,8 @@
+import currency from 'currency.js';
+import { MaskValue } from './useStringMask';
+export declare type CurrencyOptions = currency.Options;
+export declare const getInternalNumberAndMask: (value: string | number, options?: currency.Options | undefined) => {
+    internalNumber: number;
+    mergedOptions: CurrencyOptions;
+};
+export declare const useNumberMask: (options?: currency.Options | undefined, defaultValue?: string | number | undefined) => [MaskValue, (value: string | number) => void];

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

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useNumberMask = exports.getInternalNumberAndMask = 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 getRegex = precision => new RegExp(`\\B(?=(\\d{${precision}})(?!\\d))`, 'g');
+
+const getInternalNumberAndMask = (value, options) => {
+  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((0, _utils.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
+  };
+};
+
+exports.getInternalNumberAndMask = getInternalNumberAndMask;
+
+const useNumberMask = (options, defaultValue) => {
+  const applyMask = (0, _react.useCallback)((value = 0) => {
+    const {
+      internalNumber,
+      mergedOptions
+    } = getInternalNumberAndMask(value, options);
+    return {
+      raw: internalNumber,
+      formatted: (0, _currency.default)(internalNumber).format(mergedOptions)
+    };
+  }, [options, getRegex]);
+  const [value, setValue] = (0, _react.useState)(applyMask(defaultValue));
+  const handleChangeValue = (0, _react.useCallback)(formattedValue => {
+    const {
+      raw,
+      formatted
+    } = applyMask(formattedValue);
+    setValue({
+      raw,
+      formatted
+    });
+  }, [applyMask, setValue]);
+  return [value, handleChangeValue];
+};
+
+exports.useNumberMask = useNumberMask;
+//# sourceMappingURL=useNumberMask.js.map

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

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

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

@@ -0,0 +1,8 @@
+export interface MaskValue {
+    formatted?: string;
+    raw?: string | number;
+}
+export declare type MaskType = string | RegExp | Array<RegExp>;
+export declare const mergeMask: (value: string | undefined, mask: MaskType[]) => MaskValue;
+export declare const getMask: (mask: MaskType[] | ((value: string) => MaskType[]), newValue: string) => MaskType[];
+export declare const useStringMask: (mask: MaskType[] | ((value: string) => MaskType[]), defaultValue?: string | number | undefined) => [MaskValue, (text: string | number) => void];

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

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStringMask = exports.getMask = exports.mergeMask = void 0;
+
+var _react = require("react");
+
+const mergeMask = (value = '', mask) => {
+  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
+  };
+};
+
+exports.mergeMask = mergeMask;
+
+const getMask = (mask, newValue) => {
+  let maskArray;
+  const regexArray = [];
+
+  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;
+};
+
+exports.getMask = getMask;
+
+const useStringMask = (mask, defaultValue) => {
+  const applyMask = (0, _react.useCallback)((value = '') => {
+    const selectedMask = getMask(mask, value);
+    const {
+      formatted,
+      raw
+    } = mergeMask(value, selectedMask);
+    return {
+      raw,
+      formatted
+    };
+  }, [mask]);
+  const [value, setValue] = (0, _react.useState)(applyMask(defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString()));
+  const handleChangeValue = (0, _react.useCallback)(formattedValue => {
+    const {
+      raw,
+      formatted
+    } = applyMask(formattedValue.toString());
+    setValue({
+      raw,
+      formatted
+    });
+  }, [applyMask, setValue]);
+  return [value, handleChangeValue];
+};
+
+exports.useStringMask = useStringMask;
+//# sourceMappingURL=useStringMask.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/atoms/Input/hooks/useStringMask.ts"],"names":["mergeMask","value","mask","formatted","raw","iMask","iChars","length","maskChar","valueChar","rawValueChar","maskCharRegex","Array","isArray","matchRegex","RegExp","test","getMask","newValue","maskArray","regexArray","forEach","exp","push","i","useStringMask","defaultValue","applyMask","selectedMask","setValue","toString","handleChangeValue","formattedValue"],"mappings":"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","sourcesContent":["import { useCallback, useState } from 'react';\n\nexport interface MaskValue {\n  formatted?: string;\n  raw?: string | number;\n}\n\nexport type MaskType = string | RegExp | Array<RegExp>;\n\n/**\n * TODO:\n * @param value\n * @param mask\n * @returns\n */\nexport const mergeMask = (value = '', mask: MaskType[]): MaskValue => {\n  let formatted = '';\n  let raw = '';\n  let iMask = 0;\n  let iChars = 0;\n\n  while (!(iMask === mask.length || iChars === value.length)) {\n    const maskChar = mask[iMask];\n    const valueChar = value[iChars];\n\n    if (maskChar === valueChar) {\n      formatted += maskChar;\n      iChars++;\n      iMask++;\n      continue;\n    }\n\n    const rawValueChar = value[iChars];\n\n    if (typeof maskChar === 'object') {\n      iChars++;\n\n      const maskCharRegex = Array.isArray(maskChar) ? maskChar[0] : maskChar;\n      const matchRegex = RegExp(maskCharRegex).test(valueChar);\n\n      if (matchRegex) {\n        formatted += valueChar;\n        raw += rawValueChar;\n        iMask++;\n      }\n    } else {\n      formatted += maskChar;\n      iMask++;\n    }\n  }\n\n  return { raw, formatted };\n};\n\nexport const getMask = (\n  mask: MaskType[] | ((value: string) => MaskType[]),\n  newValue: string\n): MaskType[] => {\n  let maskArray: MaskType[];\n  const regexArray: MaskType[] = [];\n\n  if (typeof mask === 'function') {\n    maskArray = mask(newValue);\n  } else {\n    maskArray = mask;\n  }\n\n  maskArray.forEach(exp => {\n    if (typeof exp !== 'string') {\n      if (Array.isArray(exp)) regexArray.push(exp);\n      else regexArray.push(exp);\n    } else {\n      for (let i = 0; i < exp.length; i++) {\n        if (exp[i] === '\\\\') {\n          regexArray.push(exp[i + 1]);\n          i++;\n        } else {\n          if (exp[i] === '9') regexArray.push(/\\d/);\n          else if (exp[i] === 'a') regexArray.push(/[a-zA-Z]/);\n          else regexArray.push(exp[i]);\n        }\n      }\n    }\n  });\n\n  return regexArray;\n};\n\n/**\n * TODO:\n * @param mask\n * @param defaultValue\n * @returns\n */\nexport const useStringMask = (\n  mask: MaskType[] | ((value: string) => MaskType[]),\n  defaultValue?: string | number\n): [MaskValue, (text: string | number) => void] => {\n  const applyMask = useCallback(\n    (value = ''): MaskValue => {\n      const selectedMask = getMask(mask, value);\n      const { formatted, raw } = mergeMask(value, selectedMask);\n\n      return {\n        raw,\n        formatted,\n      };\n    },\n    [mask]\n  );\n\n  const [value, setValue] = useState<MaskValue>(\n    applyMask(defaultValue?.toString())\n  );\n\n  const handleChangeValue = useCallback(\n    (formattedValue: string | number) => {\n      const { raw, formatted } = applyMask(formattedValue.toString());\n      setValue({\n        raw,\n        formatted,\n      });\n    },\n    [applyMask, setValue]\n  );\n\n  return [value, handleChangeValue];\n};\n"],"file":"useStringMask.js"}

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

@@ -1,9 +1,8 @@
 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, InputVariantType, } from './InputContainer/InputContainer';
 export { default as InputElement, InputElementProps, } from './InputElement/InputElement';
-export * from './masks';
 export { PressableInputContainer, PressableInputContainerProps, } from './PressableInputContainer';
 export { StyledBorderKeeper, disabledInputStyles } from './styled';

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

@@ -78,20 +78,6 @@ Object.defineProperty(exports, "disabledInputStyles", {
 
 var _Hint = _interopRequireDefault(require("./Hint"));
 
-var _useCurrencyMask = require("./hooks/useCurrencyMask");
-
-Object.keys(_useCurrencyMask).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _useCurrencyMask[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _useCurrencyMask[key];
-    }
-  });
-});
-
 var _useInputFocus = require("./hooks/useInputFocus");
 
 Object.keys(_useInputFocus).forEach(function (key) {
@@ -106,38 +92,38 @@ Object.keys(_useInputFocus).forEach(function (key) {
   });
 });
 
-var _useMask = require("./hooks/useMask");
+var _useNumberMask = require("./hooks/useNumberMask");
 
-Object.keys(_useMask).forEach(function (key) {
+Object.keys(_useNumberMask).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _useMask[key]) return;
+  if (key in exports && exports[key] === _useNumberMask[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _useMask[key];
+      return _useNumberMask[key];
     }
   });
 });
 
-var _InputContainer = _interopRequireWildcard(require("./InputContainer/InputContainer"));
-
-var _InputElement = _interopRequireWildcard(require("./InputElement/InputElement"));
-
-var _masks = require("./masks");
+var _useStringMask = require("./hooks/useStringMask");
 
-Object.keys(_masks).forEach(function (key) {
+Object.keys(_useStringMask).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;
+  if (key in exports && exports[key] === _useStringMask[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _masks[key];
+      return _useStringMask[key];
     }
   });
 });
 
+var _InputContainer = _interopRequireWildcard(require("./InputContainer/InputContainer"));
+
+var _InputElement = _interopRequireWildcard(require("./InputElement/InputElement"));
+
 var _PressableInputContainer = require("./PressableInputContainer");
 
 var _styled = require("./styled");

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/Input/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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;;AACA;;AAKA;;AAIA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAIA","sourcesContent":["export { default as Hint } from './Hint';\nexport * from './hooks/useCurrencyMask';\nexport * from './hooks/useInputFocus';\nexport * from './hooks/useMask';\nexport {\n  default as InputContainer,\n  InputContainerProps,\n  InputVariantType,\n} from './InputContainer/InputContainer';\nexport {\n  default as InputElement,\n  InputElementProps,\n} from './InputElement/InputElement';\nexport * from './masks';\nexport {\n  PressableInputContainer,\n  PressableInputContainerProps,\n} from './PressableInputContainer';\nexport { StyledBorderKeeper, disabledInputStyles } from './styled';\n"],"file":"index.js"}
+{"version":3,"sources":["../../../../src/components/atoms/Input/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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;;AACA;;AAKA;;AAIA;;AAIA","sourcesContent":["export { default as Hint } from './Hint';\nexport * from './hooks/useInputFocus';\nexport * from './hooks/useNumberMask';\nexport * from './hooks/useStringMask';\nexport {\n  default as InputContainer,\n  InputContainerProps,\n  InputVariantType,\n} from './InputContainer/InputContainer';\nexport {\n  default as InputElement,\n  InputElementProps,\n} from './InputElement/InputElement';\nexport {\n  PressableInputContainer,\n  PressableInputContainerProps,\n} from './PressableInputContainer';\nexport { StyledBorderKeeper, disabledInputStyles } from './styled';\n"],"file":"index.js"}

package/dist/index.d.ts

@@ -9,7 +9,7 @@ export { Checkbox, CheckboxProps } from './components/atoms/Checkbox';
 export { Divider, DividerProps } from './components/atoms/Divider';
 export { GroupButton, GroupButtonOption, GroupButtonOptionProps, GroupButtonProps, GroupButtonValue, } from './components/atoms/GroupButton';
 export { Icon, IconProps } from './components/atoms/Icon';
-export { Hint, InputContainer, InputContainerProps, InputElement, InputElementProps, InputVariantType, Masks, PressableInputContainer, PressableInputContainerProps, StyledBorderKeeper, useCurrencyMask, useInputFocus, useMask, disabledInputStyles, IMask, IMaskValue, } from './components/atoms/Input';
+export { Hint, InputContainer, InputContainerProps, InputElement, InputElementProps, InputVariantType, PressableInputContainer, PressableInputContainerProps, StyledBorderKeeper, useInputFocus, useNumberMask, useStringMask, disabledInputStyles, } from './components/atoms/Input';
 export { Paper, PaperProps } from './components/atoms/Paper';
 export { PressableSurface, PressableSurfaceProps, } from './components/atoms/PressableSurface';
 export { ProgressBar, ProgressBarProps } from './components/atoms/ProgressBar';
@@ -17,7 +17,7 @@ export { RadioButton, RadioButtonProps } from './components/atoms/RadioButton';
 export { Switch, SwitchProps } from './components/atoms/Switch';
 export { Tag, TagProps } from './components/atoms/Tag';
 export { Text, TextProps } from './components/atoms/Text';
-export { Calendar, CalendarProps, DateRange, SelectionType, Value } from './components/molecules/Calendar';
+export { Calendar, CalendarProps, DateRange, SelectionType, Value, } from './components/molecules/Calendar';
 export { DatePicker, DatePickerProps } from './components/molecules/DatePicker';
 export { DateTimePicker, DateTimePickerProps, } from './components/molecules/DateTimePicker';
 export { DateTimeSelector, DateTimeSelectorMode, DateTimeSelectorProps, } from './components/molecules/DateTimeSelector';

package/dist/index.js

@@ -41,16 +41,13 @@ var _exportNames = {
   InputElement: true,
   InputElementProps: true,
   InputVariantType: true,
-  Masks: true,
   PressableInputContainer: true,
   PressableInputContainerProps: true,
   StyledBorderKeeper: true,
-  useCurrencyMask: true,
   useInputFocus: true,
-  useMask: true,
+  useNumberMask: true,
+  useStringMask: true,
   disabledInputStyles: true,
-  IMask: true,
-  IMaskValue: true,
   Paper: true,
   PaperProps: true,
   PressableSurface: true,
@@ -313,12 +310,6 @@ Object.defineProperty(exports, "InputVariantType", {
     return _Input.InputVariantType;
   }
 });
-Object.defineProperty(exports, "Masks", {
-  enumerable: true,
-  get: function () {
-    return _Input.Masks;
-  }
-});
 Object.defineProperty(exports, "PressableInputContainer", {
   enumerable: true,
   get: function () {
@@ -337,40 +328,28 @@ Object.defineProperty(exports, "StyledBorderKeeper", {
     return _Input.StyledBorderKeeper;
   }
 });
-Object.defineProperty(exports, "useCurrencyMask", {
-  enumerable: true,
-  get: function () {
-    return _Input.useCurrencyMask;
-  }
-});
 Object.defineProperty(exports, "useInputFocus", {
   enumerable: true,
   get: function () {
     return _Input.useInputFocus;
   }
 });
-Object.defineProperty(exports, "useMask", {
+Object.defineProperty(exports, "useNumberMask", {
   enumerable: true,
   get: function () {
-    return _Input.useMask;
+    return _Input.useNumberMask;
   }
 });
-Object.defineProperty(exports, "disabledInputStyles", {
-  enumerable: true,
-  get: function () {
-    return _Input.disabledInputStyles;
-  }
-});
-Object.defineProperty(exports, "IMask", {
+Object.defineProperty(exports, "useStringMask", {
   enumerable: true,
   get: function () {
-    return _Input.IMask;
+    return _Input.useStringMask;
   }
 });
-Object.defineProperty(exports, "IMaskValue", {
+Object.defineProperty(exports, "disabledInputStyles", {
   enumerable: true,
   get: function () {
-    return _Input.IMaskValue;
+    return _Input.disabledInputStyles;
   }
 });
 Object.defineProperty(exports, "Paper", {