@tecsinapse/react-core 1.12.9 → 1.14.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/CHANGELOG.md +39 -0
  2. package/dist/components/atoms/Input/InputElement/InputElement.d.ts +5 -3
  3. package/dist/components/atoms/Input/InputElement/InputElement.js +51 -7
  4. package/dist/components/atoms/Input/InputElement/InputElement.js.map +1 -1
  5. package/dist/components/atoms/Input/hooks/useNumberMask.d.ts +8 -0
  6. package/dist/components/atoms/Input/hooks/useNumberMask.js +98 -0
  7. package/dist/components/atoms/Input/hooks/useNumberMask.js.map +1 -0
  8. package/dist/components/atoms/Input/hooks/useStringMask.d.ts +8 -0
  9. package/dist/components/atoms/Input/hooks/useStringMask.js +109 -0
  10. package/dist/components/atoms/Input/hooks/useStringMask.js.map +1 -0
  11. package/dist/components/atoms/Input/index.d.ts +2 -3
  12. package/dist/components/atoms/Input/index.js +12 -26
  13. package/dist/components/atoms/Input/index.js.map +1 -1
  14. package/dist/components/molecules/Calendar/components/MonthWeek.js +5 -10
  15. package/dist/components/molecules/Calendar/components/MonthWeek.js.map +1 -1
  16. package/dist/index.d.ts +2 -2
  17. package/dist/index.js +8 -29
  18. package/dist/index.js.map +1 -1
  19. package/dist/utils/ResponsiveFontSize.js +1 -1
  20. package/dist/utils/ResponsiveFontSize.js.map +1 -1
  21. package/dist/utils/formatWithMask.d.ts +3 -0
  22. package/dist/utils/formatWithMask.js +31 -0
  23. package/dist/utils/formatWithMask.js.map +1 -0
  24. package/dist/utils/index.d.ts +2 -0
  25. package/dist/utils/index.js +28 -0
  26. package/dist/utils/index.js.map +1 -1
  27. package/dist/utils/masks.d.ts +11 -0
  28. package/dist/utils/masks.js +19 -0
  29. package/dist/utils/masks.js.map +1 -0
  30. package/package.json +2 -2
  31. package/src/components/atoms/Input/InputElement/InputElement.tsx +87 -10
  32. package/src/components/atoms/Input/hooks/useNumberMask.ts +99 -0
  33. package/src/components/atoms/Input/hooks/useStringMask.ts +128 -0
  34. package/src/components/atoms/Input/index.ts +2 -3
  35. package/src/components/molecules/Calendar/components/MonthWeek.tsx +5 -10
  36. package/src/index.ts +3 -6
  37. package/src/utils/ResponsiveFontSize.ts +2 -2
  38. package/src/utils/formatWithMask.ts +25 -0
  39. package/src/utils/index.ts +4 -2
  40. package/src/utils/masks.ts +15 -0
  41. package/dist/components/atoms/Input/hooks/useCurrencyMask.d.ts +0 -3
  42. package/dist/components/atoms/Input/hooks/useCurrencyMask.js +0 -69
  43. package/dist/components/atoms/Input/hooks/useCurrencyMask.js.map +0 -1
  44. package/dist/components/atoms/Input/hooks/useMask.d.ts +0 -9
  45. package/dist/components/atoms/Input/hooks/useMask.js +0 -61
  46. package/dist/components/atoms/Input/hooks/useMask.js.map +0 -1
  47. package/dist/components/atoms/Input/masks/index.d.ts +0 -10
  48. package/dist/components/atoms/Input/masks/index.js +0 -18
  49. package/dist/components/atoms/Input/masks/index.js.map +0 -1
  50. package/src/components/atoms/Input/hooks/useCurrencyMask.ts +0 -74
  51. package/src/components/atoms/Input/hooks/useMask.ts +0 -92
  52. package/src/components/atoms/Input/masks/index.ts +0 -12
package/CHANGELOG.md CHANGED
@@ -3,6 +3,45 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [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)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * Input initialization. ([a48c2d6](https://github.com/tecsinapse/design-system/commit/a48c2d6d8d1ee8d1282fa5082af40c6a1bce3e4b))
12
+ * Input initialization. ([b0be51f](https://github.com/tecsinapse/design-system/commit/b0be51f7699a3936b7d3d193437a2636bad7abc7))
13
+
14
+
15
+
16
+
17
+
18
+ # [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)
19
+
20
+
21
+ ### Bug Fixes
22
+
23
+ * formatWithMask util. Refactoring on useNumberMask and useStringMask hooks. ([76920f6](https://github.com/tecsinapse/design-system/commit/76920f62fb8cf9070b9b2e477dc720e9b7b24077))
24
+
25
+
26
+
27
+
28
+
29
+ # [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)
30
+
31
+ **Note:** Version bump only for package @tecsinapse/react-core
32
+
33
+
34
+
35
+
36
+
37
+ ## [1.12.10](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.12.9...@tecsinapse/react-core@1.12.10) (2022-01-19)
38
+
39
+ **Note:** Version bump only for package @tecsinapse/react-core
40
+
41
+
42
+
43
+
44
+
6
45
  ## [1.12.9](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.12.8...@tecsinapse/react-core@1.12.9) (2022-01-18)
7
46
 
8
47
  **Note:** Version bump only for package @tecsinapse/react-core
@@ -1,12 +1,14 @@
1
1
  import React, { FC } from 'react';
2
2
  import { StyleProp, TextInputProps, TextStyle } from 'react-native';
3
- import { IMask } from '../hooks/useMask';
3
+ import { MaskType } from '../hooks/useStringMask';
4
+ import { CurrencyOptions } from '../hooks/useNumberMask';
4
5
  export interface InputElementProps extends Omit<TextInputProps, 'onChange' | 'value' | 'ref'> {
5
6
  style?: StyleProp<TextStyle>;
6
- value?: string | IMask;
7
+ value: string | number;
7
8
  placeholder?: string;
8
9
  disabled?: boolean;
9
- onChange?: (value: string) => void;
10
+ onChange?: (value: any) => void;
11
+ mask?: (MaskType[] | ((value: string) => MaskType[])) | CurrencyOptions;
10
12
  onFocus?: () => void;
11
13
  onBlur?: () => void;
12
14
  ref?: React.Ref<any>;
@@ -7,11 +7,17 @@ exports.default = void 0;
7
7
 
8
8
  var _react = require("@emotion/react");
9
9
 
10
- var _react2 = _interopRequireDefault(require("react"));
10
+ var _react2 = _interopRequireWildcard(require("react"));
11
11
 
12
12
  var _styled = require("../styled");
13
13
 
14
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
+ var _useStringMask = require("../hooks/useStringMask");
15
+
16
+ var _useNumberMask = require("../hooks/useNumberMask");
17
+
18
+ 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); }
19
+
20
+ 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; }
15
21
 
16
22
  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); }
17
23
 
@@ -21,19 +27,57 @@ const InputElement = _react2.default.forwardRef(({
21
27
  value,
22
28
  disabled = false,
23
29
  placeholderTextColor,
30
+ mask,
24
31
  ...rest
25
32
  }, ref) => {
26
- var _value$maskValue;
27
-
28
33
  const theme = (0, _react.useTheme)();
29
-
30
- 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;
34
+ const [valueReinitialized, setValueReinitialized] = (0, _react2.useState)(false);
31
35
 
32
36
  const _placeholderColor = placeholderTextColor || theme.font.color.dark;
33
37
 
38
+ const getInputHook = () => {
39
+ if (mask !== undefined) {
40
+ if (Array.isArray(mask) || typeof mask === 'function') return (0, _useStringMask.useStringMask)(mask, value ?? '');else {
41
+ return (0, _useNumberMask.useNumberMask)(mask, value ?? '');
42
+ }
43
+ } else {
44
+ return (0, _react2.useState)(value ?? '');
45
+ }
46
+ };
47
+
48
+ const [maskValue, setMaskValue] = getInputHook();
49
+
50
+ const _value = typeof maskValue === 'object' ? (maskValue === null || maskValue === void 0 ? void 0 : maskValue.formatted) ?? '' : maskValue === null || maskValue === void 0 ? void 0 : maskValue.toString();
51
+
52
+ (0, _react2.useEffect)(() => {
53
+ if (onChange) {
54
+ if (typeof maskValue === 'object') onChange(maskValue === null || maskValue === void 0 ? void 0 : maskValue.raw);else onChange(maskValue);
55
+ }
56
+ }, [maskValue]);
57
+ const onChangeValue = (0, _react2.useCallback)(value => {
58
+ setMaskValue(value);
59
+ }, [value]);
60
+ (0, _react2.useEffect)(() => {
61
+ if (!valueReinitialized) {
62
+ if ((maskValue === undefined || maskValue === '') && value !== undefined) {
63
+ setMaskValue(value);
64
+ setValueReinitialized(true);
65
+ } else if (maskValue !== undefined && value !== undefined && typeof maskValue === 'object') {
66
+ if (maskValue.raw !== value) {
67
+ if ((Array.isArray(mask) || typeof mask === 'function') && (maskValue.raw === undefined || maskValue.raw === '')) {
68
+ setValueReinitialized(true);
69
+ setMaskValue(value);
70
+ } else if (typeof mask === 'object' && maskValue.raw === 0) {
71
+ setValueReinitialized(true);
72
+ setMaskValue(value);
73
+ }
74
+ }
75
+ }
76
+ }
77
+ }, [value, maskValue, setMaskValue, valueReinitialized]);
34
78
  return _react2.default.createElement(_styled.StyledInputElement, _extends({}, rest, {
35
79
  ref: ref,
36
- onChangeText: onChange,
80
+ onChangeText: onChangeValue,
37
81
  value: _value,
38
82
  placeholder: placeholder,
39
83
  placeholderTextColor: _placeholderColor,
@@ -1 +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"}
1
+ {"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","raw","onChangeValue","displayName"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;;AACA;;AACA;;;;;;;;AAuBA,MAAMA,YAAmC,GAAGC,gBAAMC,UAAN,CAC1C,CACE;AACEC,EAAAA,QADF;AAEEC,EAAAA,WAFF;AAGEC,EAAAA,KAHF;AAIEC,EAAAA,QAAQ,GAAG,KAJb;AAKEC,EAAAA,oBALF;AAMEC,EAAAA,IANF;AAOE,KAAGC;AAPL,CADF,EAUEC,GAVF,KAWkB;AAChB,QAAMC,KAAK,GAAG,sBAAd;AAGA,QAAM,CAACC,kBAAD,EAAqBC,qBAArB,IAA8C,sBAClD,KADkD,CAApD;;AAIA,QAAMC,iBAAiB,GAAGP,oBAAoB,IAAII,KAAK,CAACI,IAAN,CAAWC,KAAX,CAAiBC,IAAnE;;AAEA,QAAMC,YAAY,GAAG,MAAM;AACzB,QAAIV,IAAI,KAAKW,SAAb,EAAwB;AACtB,UAAIC,KAAK,CAACC,OAAN,CAAcb,IAAd,KAAuB,OAAOA,IAAP,KAAgB,UAA3C,EACE,OAAO,kCAAcA,IAAd,EAAoBH,KAAK,IAAI,EAA7B,CAAP,CADF,KAEK;AACH,eAAO,kCAAcG,IAAd,EAAoBH,KAAK,IAAI,EAA7B,CAAP;AACD;AACF,KAND,MAMO;AACL,aAAO,sBAA0BA,KAAK,IAAI,EAAnC,CAAP;AACD;AACF,GAVD;;AAYA,QAAM,CAACiB,SAAD,EAAYC,YAAZ,IAA4BL,YAAY,EAA9C;;AAEA,QAAMM,MAAM,GACV,OAAOF,SAAP,KAAqB,QAArB,GACI,CAAAA,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAEG,SAAX,KAAwB,EAD5B,GAEIH,SAFJ,aAEIA,SAFJ,uBAEIA,SAAS,CAAEI,QAAX,EAHN;;AAKA,yBAAU,MAAM;AACd,QAAIvB,QAAJ,EAAc;AACZ,UAAI,OAAOmB,SAAP,KAAqB,QAAzB,EAAmCnB,QAAQ,CAACmB,SAAD,aAACA,SAAD,uBAACA,SAAS,CAAEK,GAAZ,CAAR,CAAnC,KACKxB,QAAQ,CAACmB,SAAD,CAAR;AACN;AACF,GALD,EAKG,CAACA,SAAD,CALH;AAOA,QAAMM,aAAa,GAAG,yBACnBvB,KAAD,IAA4B;AAC1BkB,IAAAA,YAAY,CAAClB,KAAD,CAAZ;AACD,GAHmB,EAIpB,CAACA,KAAD,CAJoB,CAAtB;AAOA,yBAAU,MAAM;AACd,QAAI,CAACO,kBAAL,EAAyB;AAEvB,UACE,CAACU,SAAS,KAAKH,SAAd,IAA2BG,SAAS,KAAK,EAA1C,KACAjB,KAAK,KAAKc,SAFZ,EAGE;AAEAI,QAAAA,YAAY,CAAClB,KAAD,CAAZ;AACAQ,QAAAA,qBAAqB,CAAC,IAAD,CAArB;AACD,OAPD,MAOO,IACLS,SAAS,KAAKH,SAAd,IACAd,KAAK,KAAKc,SADV,IAEA,OAAOG,SAAP,KAAqB,QAHhB,EAIL;AAEA,YAAIA,SAAS,CAACK,GAAV,KAAkBtB,KAAtB,EAA6B;AAC3B,cACE,CAACe,KAAK,CAACC,OAAN,CAAcb,IAAd,KAAuB,OAAOA,IAAP,KAAgB,UAAxC,MACCc,SAAS,CAACK,GAAV,KAAkBR,SAAlB,IAA+BG,SAAS,CAACK,GAAV,KAAkB,EADlD,CADF,EAGE;AACAd,YAAAA,qBAAqB,CAAC,IAAD,CAArB;AACAU,YAAAA,YAAY,CAAClB,KAAD,CAAZ;AACD,WAND,MAMO,IAAI,OAAOG,IAAP,KAAgB,QAAhB,IAA4Bc,SAAS,CAACK,GAAV,KAAkB,CAAlD,EAAqD;AAC1Dd,YAAAA,qBAAqB,CAAC,IAAD,CAArB;AACAU,YAAAA,YAAY,CAAClB,KAAD,CAAZ;AACD;AACF;AACF;AACF;AACF,GA9BD,EA8BG,CAACA,KAAD,EAAQiB,SAAR,EAAmBC,YAAnB,EAAiCX,kBAAjC,CA9BH;AAgCA,SACE,8BAAC,0BAAD,eACMH,IADN;AAEE,IAAA,GAAG,EAAEC,GAFP;AAGE,IAAA,YAAY,EAAEkB,aAHhB;AAIE,IAAA,KAAK,EAAEJ,MAJT;AAKE,IAAA,WAAW,EAAEpB,WALf;AAME,IAAA,oBAAoB,EAAEU,iBANxB;AAOE,IAAA,QAAQ,EAAER,QAPZ;AAQE,IAAA,QAAQ,EAAE,CAACA;AARb,KADF;AAYD,CAnGyC,CAA5C;;AAsGAN,YAAY,CAAC6B,WAAb,GAA2B,cAA3B;eAEe7B,Y","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 useState<string | number>(value ?? '');\n }\n };\n\n const [maskValue, setMaskValue] = getInputHook();\n\n const _value =\n typeof maskValue === 'object'\n ? maskValue?.formatted ?? ''\n : maskValue?.toString();\n\n useEffect(() => {\n if (onChange) {\n if (typeof maskValue === 'object') onChange(maskValue?.raw);\n else onChange(maskValue);\n }\n }, [maskValue]);\n\n const onChangeValue = useCallback(\n (value: string | number) => {\n setMaskValue(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 || maskValue === '') &&\n value !== undefined\n ) {\n /** Case there is not a mask **/\n setMaskValue(value);\n setValueReinitialized(true);\n } else if (\n maskValue !== undefined &&\n value !== undefined &&\n typeof maskValue === 'object'\n ) {\n /** Case there is a mask **/\n if (maskValue.raw !== value) {\n if (\n (Array.isArray(mask) || typeof mask === 'function') &&\n (maskValue.raw === undefined || maskValue.raw === '')\n ) {\n setValueReinitialized(true);\n setMaskValue(value);\n } else if (typeof mask === 'object' && maskValue.raw === 0) {\n setValueReinitialized(true);\n setMaskValue(value);\n }\n }\n }\n }\n }, [value, maskValue, setMaskValue, 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"}
@@ -0,0 +1,8 @@
1
+ import currency from 'currency.js';
2
+ import { MaskValue } from './useStringMask';
3
+ export declare type CurrencyOptions = currency.Options;
4
+ export declare const getInternalNumberAndMask: (value: string | number, options?: currency.Options | undefined) => {
5
+ internalNumber: number;
6
+ mergedOptions: CurrencyOptions;
7
+ };
8
+ export declare const useNumberMask: (options?: currency.Options | undefined, defaultValue?: string | number | undefined) => [MaskValue, (value: string | number) => void];
@@ -0,0 +1,98 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.useNumberMask = exports.getInternalNumberAndMask = void 0;
7
+
8
+ var _currency = _interopRequireDefault(require("currency.js"));
9
+
10
+ var _react = require("react");
11
+
12
+ var _utils = require("../../../../utils");
13
+
14
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
+
16
+ const DEFAULT_OPTIONS = {
17
+ symbol: 'R$ ',
18
+ separator: '.',
19
+ decimal: ',',
20
+ precision: 2
21
+ };
22
+
23
+ const getRegex = precision => new RegExp(`\\B(?=(\\d{${precision}})(?!\\d))`, 'g');
24
+
25
+ const getInternalNumberAndMask = (value, options) => {
26
+ const mergedOptions = { ...DEFAULT_OPTIONS,
27
+ ...options
28
+ };
29
+ const {
30
+ precision = -1
31
+ } = mergedOptions;
32
+ let internalNumber;
33
+
34
+ if (typeof value === 'number') {
35
+ if (precision) {
36
+ let stringValue = String(value);
37
+ const decimalIndex = stringValue.indexOf('.');
38
+ const currentPrecision = decimalIndex + precision;
39
+
40
+ if (decimalIndex !== -1 && currentPrecision <= stringValue.length) {
41
+ const zeros = stringValue.length + 1 - currentPrecision;
42
+
43
+ for (let i = 0; i < zeros; i++) stringValue = stringValue + `0`;
44
+ }
45
+
46
+ internalNumber = Number(stringValue);
47
+ } else {
48
+ internalNumber = value;
49
+ }
50
+ } else {
51
+ const onlyNumbers = String((0, _utils.extractNumbersFromString)(value));
52
+ const padZeros = String(onlyNumbers).padStart(precision + 1, '0');
53
+ internalNumber = Number(padZeros.replace(getRegex(precision), '.'));
54
+ }
55
+
56
+ if (internalNumber > Number.MAX_SAFE_INTEGER) {
57
+ internalNumber = Number.MAX_SAFE_INTEGER;
58
+ }
59
+
60
+ if (internalNumber < Number.MIN_SAFE_INTEGER) {
61
+ internalNumber = Number.MIN_SAFE_INTEGER;
62
+ }
63
+
64
+ return {
65
+ internalNumber,
66
+ mergedOptions
67
+ };
68
+ };
69
+
70
+ exports.getInternalNumberAndMask = getInternalNumberAndMask;
71
+
72
+ const useNumberMask = (options, defaultValue) => {
73
+ const applyMask = (0, _react.useCallback)((value = 0) => {
74
+ const {
75
+ internalNumber,
76
+ mergedOptions
77
+ } = getInternalNumberAndMask(value, options);
78
+ return {
79
+ raw: internalNumber,
80
+ formatted: (0, _currency.default)(internalNumber).format(mergedOptions)
81
+ };
82
+ }, [options, getRegex]);
83
+ const [value, setValue] = (0, _react.useState)(applyMask(defaultValue));
84
+ const handleChangeValue = (0, _react.useCallback)(formattedValue => {
85
+ const {
86
+ raw,
87
+ formatted
88
+ } = applyMask(formattedValue);
89
+ setValue({
90
+ raw,
91
+ formatted
92
+ });
93
+ }, [applyMask, setValue]);
94
+ return [value, handleChangeValue];
95
+ };
96
+
97
+ exports.useNumberMask = useNumberMask;
98
+ //# sourceMappingURL=useNumberMask.js.map
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,8 @@
1
+ export interface MaskValue {
2
+ formatted?: string;
3
+ raw?: string | number;
4
+ }
5
+ export declare type MaskType = string | RegExp | Array<RegExp>;
6
+ export declare const mergeMask: (value: string | undefined, mask: MaskType[]) => MaskValue;
7
+ export declare const getMask: (mask: MaskType[] | ((value: string) => MaskType[]), newValue: string) => MaskType[];
8
+ export declare const useStringMask: (mask: MaskType[] | ((value: string) => MaskType[]), defaultValue?: string | number | undefined) => [MaskValue, (text: string | number) => void];
@@ -0,0 +1,109 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.useStringMask = exports.getMask = exports.mergeMask = void 0;
7
+
8
+ var _react = require("react");
9
+
10
+ const mergeMask = (value = '', mask) => {
11
+ let formatted = '';
12
+ let raw = '';
13
+ let iMask = 0;
14
+ let iChars = 0;
15
+
16
+ while (!(iMask === mask.length || iChars === value.length)) {
17
+ const maskChar = mask[iMask];
18
+ const valueChar = value[iChars];
19
+
20
+ if (maskChar === valueChar) {
21
+ formatted += maskChar;
22
+ iChars++;
23
+ iMask++;
24
+ continue;
25
+ }
26
+
27
+ const rawValueChar = value[iChars];
28
+
29
+ if (typeof maskChar === 'object') {
30
+ iChars++;
31
+ const maskCharRegex = Array.isArray(maskChar) ? maskChar[0] : maskChar;
32
+ const matchRegex = RegExp(maskCharRegex).test(valueChar);
33
+
34
+ if (matchRegex) {
35
+ formatted += valueChar;
36
+ raw += rawValueChar;
37
+ iMask++;
38
+ }
39
+ } else {
40
+ formatted += maskChar;
41
+ iMask++;
42
+ }
43
+ }
44
+
45
+ return {
46
+ raw,
47
+ formatted
48
+ };
49
+ };
50
+
51
+ exports.mergeMask = mergeMask;
52
+
53
+ const getMask = (mask, newValue) => {
54
+ let maskArray;
55
+ const regexArray = [];
56
+
57
+ if (typeof mask === 'function') {
58
+ maskArray = mask(newValue);
59
+ } else {
60
+ maskArray = mask;
61
+ }
62
+
63
+ maskArray.forEach(exp => {
64
+ if (typeof exp !== 'string') {
65
+ if (Array.isArray(exp)) regexArray.push(exp);else regexArray.push(exp);
66
+ } else {
67
+ for (let i = 0; i < exp.length; i++) {
68
+ if (exp[i] === '\\') {
69
+ regexArray.push(exp[i + 1]);
70
+ i++;
71
+ } else {
72
+ if (exp[i] === '9') regexArray.push(/\d/);else if (exp[i] === 'a') regexArray.push(/[a-zA-Z]/);else regexArray.push(exp[i]);
73
+ }
74
+ }
75
+ }
76
+ });
77
+ return regexArray;
78
+ };
79
+
80
+ exports.getMask = getMask;
81
+
82
+ const useStringMask = (mask, defaultValue) => {
83
+ const applyMask = (0, _react.useCallback)((value = '') => {
84
+ const selectedMask = getMask(mask, value);
85
+ const {
86
+ formatted,
87
+ raw
88
+ } = mergeMask(value, selectedMask);
89
+ return {
90
+ raw,
91
+ formatted
92
+ };
93
+ }, [mask]);
94
+ const [value, setValue] = (0, _react.useState)(applyMask(String(defaultValue)));
95
+ const handleChangeValue = (0, _react.useCallback)(formattedValue => {
96
+ const {
97
+ raw,
98
+ formatted
99
+ } = applyMask(formattedValue);
100
+ setValue({
101
+ raw,
102
+ formatted
103
+ });
104
+ }, [applyMask, setValue]);
105
+ return [value, handleChangeValue];
106
+ };
107
+
108
+ exports.useStringMask = useStringMask;
109
+ //# sourceMappingURL=useStringMask.js.map
@@ -0,0 +1 @@
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","String","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(String(defaultValue))\n );\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":"useStringMask.js"}
@@ -1,9 +1,8 @@
1
1
  export { default as Hint } from './Hint';
2
- export * from './hooks/useCurrencyMask';
3
2
  export * from './hooks/useInputFocus';
4
- export * from './hooks/useMask';
3
+ export * from './hooks/useNumberMask';
4
+ export * from './hooks/useStringMask';
5
5
  export { default as InputContainer, InputContainerProps, InputVariantType, } from './InputContainer/InputContainer';
6
6
  export { default as InputElement, InputElementProps, } from './InputElement/InputElement';
7
- export * from './masks';
8
7
  export { PressableInputContainer, PressableInputContainerProps, } from './PressableInputContainer';
9
8
  export { StyledBorderKeeper, disabledInputStyles } from './styled';
@@ -78,20 +78,6 @@ Object.defineProperty(exports, "disabledInputStyles", {
78
78
 
79
79
  var _Hint = _interopRequireDefault(require("./Hint"));
80
80
 
81
- var _useCurrencyMask = require("./hooks/useCurrencyMask");
82
-
83
- Object.keys(_useCurrencyMask).forEach(function (key) {
84
- if (key === "default" || key === "__esModule") return;
85
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
86
- if (key in exports && exports[key] === _useCurrencyMask[key]) return;
87
- Object.defineProperty(exports, key, {
88
- enumerable: true,
89
- get: function () {
90
- return _useCurrencyMask[key];
91
- }
92
- });
93
- });
94
-
95
81
  var _useInputFocus = require("./hooks/useInputFocus");
96
82
 
97
83
  Object.keys(_useInputFocus).forEach(function (key) {
@@ -106,38 +92,38 @@ Object.keys(_useInputFocus).forEach(function (key) {
106
92
  });
107
93
  });
108
94
 
109
- var _useMask = require("./hooks/useMask");
95
+ var _useNumberMask = require("./hooks/useNumberMask");
110
96
 
111
- Object.keys(_useMask).forEach(function (key) {
97
+ Object.keys(_useNumberMask).forEach(function (key) {
112
98
  if (key === "default" || key === "__esModule") return;
113
99
  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
114
- if (key in exports && exports[key] === _useMask[key]) return;
100
+ if (key in exports && exports[key] === _useNumberMask[key]) return;
115
101
  Object.defineProperty(exports, key, {
116
102
  enumerable: true,
117
103
  get: function () {
118
- return _useMask[key];
104
+ return _useNumberMask[key];
119
105
  }
120
106
  });
121
107
  });
122
108
 
123
- var _InputContainer = _interopRequireWildcard(require("./InputContainer/InputContainer"));
124
-
125
- var _InputElement = _interopRequireWildcard(require("./InputElement/InputElement"));
126
-
127
- var _masks = require("./masks");
109
+ var _useStringMask = require("./hooks/useStringMask");
128
110
 
129
- Object.keys(_masks).forEach(function (key) {
111
+ Object.keys(_useStringMask).forEach(function (key) {
130
112
  if (key === "default" || key === "__esModule") return;
131
113
  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
132
- if (key in exports && exports[key] === _masks[key]) return;
114
+ if (key in exports && exports[key] === _useStringMask[key]) return;
133
115
  Object.defineProperty(exports, key, {
134
116
  enumerable: true,
135
117
  get: function () {
136
- return _masks[key];
118
+ return _useStringMask[key];
137
119
  }
138
120
  });
139
121
  });
140
122
 
123
+ var _InputContainer = _interopRequireWildcard(require("./InputContainer/InputContainer"));
124
+
125
+ var _InputElement = _interopRequireWildcard(require("./InputElement/InputElement"));
126
+
141
127
  var _PressableInputContainer = require("./PressableInputContainer");
142
128
 
143
129
  var _styled = require("./styled");
@@ -1 +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"}
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;;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"}
@@ -62,7 +62,7 @@ const MonthWeek = ({
62
62
  if ((0, _dateFns.compareAsc)(date, lowest) === -1) {
63
63
  newValue = {
64
64
  lowest: date,
65
- highest: lowest
65
+ highest: undefined
66
66
  };
67
67
  } else if ((0, _dateFns.compareAsc)(date, lowest) === 0) {
68
68
  newValue = undefined;
@@ -76,20 +76,15 @@ const MonthWeek = ({
76
76
  if ((0, _dateFns.compareAsc)(date, lowest) === -1) {
77
77
  newValue = {
78
78
  lowest: date,
79
- highest: highest
80
- };
81
- } else if ((0, _dateFns.compareAsc)(date, lowest) === 0) {
82
- newValue = {
83
- lowest: highest,
84
79
  highest: undefined
85
80
  };
81
+ } else if ((0, _dateFns.compareAsc)(date, lowest) === 0) {
82
+ newValue = undefined;
86
83
  } else {
87
84
  if ((0, _dateFns.compareAsc)(date, highest) === -1) {
88
- const lowestDiff = Math.abs((0, _dateFns.differenceInDays)(date, lowest));
89
- const highestDiff = Math.abs((0, _dateFns.differenceInDays)(date, highest));
90
85
  newValue = {
91
- lowest: lowestDiff < highestDiff ? date : lowest,
92
- highest: highestDiff <= lowestDiff ? date : highest
86
+ lowest: lowest,
87
+ highest: date
93
88
  };
94
89
  } else if ((0, _dateFns.compareAsc)(date, highest) === 0) {
95
90
  newValue = {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../src/components/molecules/Calendar/components/MonthWeek.tsx"],"names":["MonthWeek","week","referenceDate","type","value","TextComponent","onChange","checkIfIsBetween","React","useCallback","date","_value","lowest","highest","checkIfIsSelected","handlePressCell","newValue","undefined","lowestDiff","Math","abs","highestDiff","map","index","isSelected","isBetween","isRangeStart","isRangeEnd","colorTone","getMonth","getDate","memo"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { compareAsc as compare, differenceInDays, isSameDay } from 'date-fns';\nimport { Cell, Selected, Week } from '../styled';\nimport { Value, DateRange, SelectionType } from '../Calendar';\nimport { TextProps } from '@tecsinapse/react-core';\n\ninterface IMonthWeek<T extends SelectionType> {\n TextComponent: React.FC<TextProps>;\n /** any as workaround for TS type mismatching */\n onChange?: (value?: any) => void | never;\n type?: T;\n value?: Value<T>;\n week: Date[];\n referenceDate: Date;\n}\n\nconst MonthWeek = <T extends SelectionType>({\n week,\n referenceDate,\n type,\n value,\n TextComponent,\n onChange,\n}: IMonthWeek<T>) => {\n const checkIfIsBetween = React.useCallback(\n (date: Date, _value?: Value<T>) => {\n if (type !== 'range' || !_value) return false;\n else {\n const { lowest, highest } = _value as DateRange;\n if (!highest) return false;\n return compare(lowest, date) <= 0 && compare(highest, date) >= 0;\n }\n },\n [type]\n );\n\n const checkIfIsSelected = React.useCallback(\n (date: Date, _value?: Value<T>) => {\n if (!_value) return false;\n else if (type === 'range' && _value) {\n const { lowest, highest } = _value as DateRange;\n return (\n isSameDay(lowest, date) ||\n (highest ? isSameDay(highest, date) : false)\n );\n } else {\n return isSameDay(_value as Date, date);\n }\n },\n [type]\n );\n\n const handlePressCell = React.useCallback(\n (date: Date, _value?: Value<T>) => () => {\n if (type === 'day') {\n onChange?.(date as never);\n } else if (!_value) {\n onChange?.({ lowest: date } as never);\n } else {\n let newValue;\n const { lowest, highest } = _value as DateRange;\n\n if (!highest) {\n if (compare(date, lowest) === -1) {\n newValue = { lowest: date, highest: lowest };\n } else if (compare(date, lowest) === 0) {\n newValue = undefined;\n } else {\n newValue = { lowest: lowest, highest: date };\n }\n } else {\n if (compare(date, lowest) === -1) {\n newValue = { lowest: date, highest: highest };\n } else if (compare(date, lowest) === 0) {\n newValue = { lowest: highest, highest: undefined };\n } else {\n if (compare(date, highest) === -1) {\n const lowestDiff = Math.abs(differenceInDays(date, lowest));\n const highestDiff = Math.abs(differenceInDays(date, highest));\n newValue = {\n lowest: lowestDiff < highestDiff ? date : lowest,\n highest: highestDiff <= lowestDiff ? date : highest,\n };\n } else if (compare(date, highest) === 0) {\n newValue = { lowest: lowest, highest: undefined };\n } else {\n newValue = { lowest: lowest, highest: date };\n }\n }\n }\n\n onChange?.(newValue as never);\n }\n },\n [onChange, type]\n );\n\n return (\n <Week>\n {week.map((date, index) => {\n const isSelected = checkIfIsSelected(date, value);\n const isBetween = checkIfIsBetween(date, value);\n\n let isRangeStart, isRangeEnd;\n\n if (type === 'range' && value) {\n const { lowest, highest } = value as DateRange;\n isRangeStart = highest && isSameDay(lowest, date);\n isRangeEnd = !!highest && isSameDay(highest, date);\n } else {\n isRangeStart = false;\n isRangeEnd = false;\n }\n\n const colorTone = isSelected\n ? 'xlight'\n : date.getMonth() === referenceDate.getMonth()\n ? 'xdark'\n : 'light';\n\n return (\n <Cell\n key={date.getDate()}\n selected={isSelected}\n highlighted={isBetween}\n isLineEnd={index === 6}\n isLineStart={index === 0}\n isRangeStart={isRangeStart}\n isRangeEnd={isRangeEnd}\n onPress={handlePressCell(date, value)}\n >\n <Selected selected={isSelected} pointerEvents={'none'}>\n <TextComponent colorVariant={'secondary'} colorTone={colorTone}>\n {date.getDate()}\n </TextComponent>\n </Selected>\n </Cell>\n );\n })}\n </Week>\n );\n};\n\nexport default React.memo(MonthWeek);\n"],"file":"MonthWeek.js"}
1
+ {"version":3,"sources":["../../../../../src/components/molecules/Calendar/components/MonthWeek.tsx"],"names":["MonthWeek","week","referenceDate","type","value","TextComponent","onChange","checkIfIsBetween","React","useCallback","date","_value","lowest","highest","checkIfIsSelected","handlePressCell","newValue","undefined","map","index","isSelected","isBetween","isRangeStart","isRangeEnd","colorTone","getMonth","getDate","memo"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAcA,MAAMA,SAAS,GAAG,CAA0B;AAC1CC,EAAAA,IAD0C;AAE1CC,EAAAA,aAF0C;AAG1CC,EAAAA,IAH0C;AAI1CC,EAAAA,KAJ0C;AAK1CC,EAAAA,aAL0C;AAM1CC,EAAAA;AAN0C,CAA1B,KAOG;AACnB,QAAMC,gBAAgB,GAAGC,eAAMC,WAAN,CACvB,CAACC,IAAD,EAAaC,MAAb,KAAmC;AACjC,QAAIR,IAAI,KAAK,OAAT,IAAoB,CAACQ,MAAzB,EAAiC,OAAO,KAAP,CAAjC,KACK;AACH,YAAM;AAAEC,QAAAA,MAAF;AAAUC,QAAAA;AAAV,UAAsBF,MAA5B;AACA,UAAI,CAACE,OAAL,EAAc,OAAO,KAAP;AACd,aAAO,yBAAQD,MAAR,EAAgBF,IAAhB,KAAyB,CAAzB,IAA8B,yBAAQG,OAAR,EAAiBH,IAAjB,KAA0B,CAA/D;AACD;AACF,GARsB,EASvB,CAACP,IAAD,CATuB,CAAzB;;AAYA,QAAMW,iBAAiB,GAAGN,eAAMC,WAAN,CACxB,CAACC,IAAD,EAAaC,MAAb,KAAmC;AACjC,QAAI,CAACA,MAAL,EAAa,OAAO,KAAP,CAAb,KACK,IAAIR,IAAI,KAAK,OAAT,IAAoBQ,MAAxB,EAAgC;AACnC,YAAM;AAAEC,QAAAA,MAAF;AAAUC,QAAAA;AAAV,UAAsBF,MAA5B;AACA,aACE,wBAAUC,MAAV,EAAkBF,IAAlB,MACCG,OAAO,GAAG,wBAAUA,OAAV,EAAmBH,IAAnB,CAAH,GAA8B,KADtC,CADF;AAID,KANI,MAME;AACL,aAAO,wBAAUC,MAAV,EAA0BD,IAA1B,CAAP;AACD;AACF,GAZuB,EAaxB,CAACP,IAAD,CAbwB,CAA1B;;AAgBA,QAAMY,eAAe,GAAGP,eAAMC,WAAN,CACtB,CAACC,IAAD,EAAaC,MAAb,KAAmC,MAAM;AACvC,QAAIR,IAAI,KAAK,KAAb,EAAoB;AAClBG,MAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGI,IAAH,CAAR;AACD,KAFD,MAEO,IAAI,CAACC,MAAL,EAAa;AAClBL,MAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAG;AAAEM,QAAAA,MAAM,EAAEF;AAAV,OAAH,CAAR;AACD,KAFM,MAEA;AACL,UAAIM,QAAJ;AACA,YAAM;AAAEJ,QAAAA,MAAF;AAAUC,QAAAA;AAAV,UAAsBF,MAA5B;;AAEA,UAAI,CAACE,OAAL,EAAc;AACZ,YAAI,yBAAQH,IAAR,EAAcE,MAAd,MAA0B,CAAC,CAA/B,EAAkC;AAChCI,UAAAA,QAAQ,GAAG;AAAEJ,YAAAA,MAAM,EAAEF,IAAV;AAAgBG,YAAAA,OAAO,EAAEI;AAAzB,WAAX;AACD,SAFD,MAEO,IAAI,yBAAQP,IAAR,EAAcE,MAAd,MAA0B,CAA9B,EAAiC;AACtCI,UAAAA,QAAQ,GAAGC,SAAX;AACD,SAFM,MAEA;AACLD,UAAAA,QAAQ,GAAG;AAAEJ,YAAAA,MAAM,EAAEA,MAAV;AAAkBC,YAAAA,OAAO,EAAEH;AAA3B,WAAX;AACD;AACF,OARD,MAQO;AACL,YAAI,yBAAQA,IAAR,EAAcE,MAAd,MAA0B,CAAC,CAA/B,EAAkC;AAChCI,UAAAA,QAAQ,GAAG;AAAEJ,YAAAA,MAAM,EAAEF,IAAV;AAAgBG,YAAAA,OAAO,EAAEI;AAAzB,WAAX;AACD,SAFD,MAEO,IAAI,yBAAQP,IAAR,EAAcE,MAAd,MAA0B,CAA9B,EAAiC;AACtCI,UAAAA,QAAQ,GAAGC,SAAX;AACD,SAFM,MAEA;AACL,cAAI,yBAAQP,IAAR,EAAcG,OAAd,MAA2B,CAAC,CAAhC,EAAmC;AACjCG,YAAAA,QAAQ,GAAG;AAAEJ,cAAAA,MAAM,EAAEA,MAAV;AAAkBC,cAAAA,OAAO,EAAEH;AAA3B,aAAX;AACD,WAFD,MAEO,IAAI,yBAAQA,IAAR,EAAcG,OAAd,MAA2B,CAA/B,EAAkC;AACvCG,YAAAA,QAAQ,GAAG;AAAEJ,cAAAA,MAAM,EAAEA,MAAV;AAAkBC,cAAAA,OAAO,EAAEI;AAA3B,aAAX;AACD,WAFM,MAEA;AACLD,YAAAA,QAAQ,GAAG;AAAEJ,cAAAA,MAAM,EAAEA,MAAV;AAAkBC,cAAAA,OAAO,EAAEH;AAA3B,aAAX;AACD;AACF;AACF;;AAEDJ,MAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGU,QAAH,CAAR;AACD;AACF,GApCqB,EAqCtB,CAACV,QAAD,EAAWH,IAAX,CArCsB,CAAxB;;AAwCA,SACE,6BAAC,YAAD,QACGF,IAAI,CAACiB,GAAL,CAAS,CAACR,IAAD,EAAOS,KAAP,KAAiB;AACzB,UAAMC,UAAU,GAAGN,iBAAiB,CAACJ,IAAD,EAAON,KAAP,CAApC;AACA,UAAMiB,SAAS,GAAGd,gBAAgB,CAACG,IAAD,EAAON,KAAP,CAAlC;AAEA,QAAIkB,YAAJ,EAAkBC,UAAlB;;AAEA,QAAIpB,IAAI,KAAK,OAAT,IAAoBC,KAAxB,EAA+B;AAC7B,YAAM;AAAEQ,QAAAA,MAAF;AAAUC,QAAAA;AAAV,UAAsBT,KAA5B;AACAkB,MAAAA,YAAY,GAAGT,OAAO,IAAI,wBAAUD,MAAV,EAAkBF,IAAlB,CAA1B;AACAa,MAAAA,UAAU,GAAG,CAAC,CAACV,OAAF,IAAa,wBAAUA,OAAV,EAAmBH,IAAnB,CAA1B;AACD,KAJD,MAIO;AACLY,MAAAA,YAAY,GAAG,KAAf;AACAC,MAAAA,UAAU,GAAG,KAAb;AACD;;AAED,UAAMC,SAAS,GAAGJ,UAAU,GACxB,QADwB,GAExBV,IAAI,CAACe,QAAL,OAAoBvB,aAAa,CAACuB,QAAd,EAApB,GACA,OADA,GAEA,OAJJ;AAMA,WACE,6BAAC,YAAD;AACE,MAAA,GAAG,EAAEf,IAAI,CAACgB,OAAL,EADP;AAEE,MAAA,QAAQ,EAAEN,UAFZ;AAGE,MAAA,WAAW,EAAEC,SAHf;AAIE,MAAA,SAAS,EAAEF,KAAK,KAAK,CAJvB;AAKE,MAAA,WAAW,EAAEA,KAAK,KAAK,CALzB;AAME,MAAA,YAAY,EAAEG,YANhB;AAOE,MAAA,UAAU,EAAEC,UAPd;AAQE,MAAA,OAAO,EAAER,eAAe,CAACL,IAAD,EAAON,KAAP;AAR1B,OAUE,6BAAC,gBAAD;AAAU,MAAA,QAAQ,EAAEgB,UAApB;AAAgC,MAAA,aAAa,EAAE;AAA/C,OACE,6BAAC,aAAD;AAAe,MAAA,YAAY,EAAE,WAA7B;AAA0C,MAAA,SAAS,EAAEI;AAArD,OACGd,IAAI,CAACgB,OAAL,EADH,CADF,CAVF,CADF;AAkBD,GAvCA,CADH,CADF;AA4CD,CAxHD;;eA0HelB,eAAMmB,IAAN,CAAW3B,SAAX,C","sourcesContent":["import React from 'react';\nimport { compareAsc as compare, isSameDay } from 'date-fns';\nimport { Cell, Selected, Week } from '../styled';\nimport { Value, DateRange, SelectionType } from '../Calendar';\nimport { TextProps } from '@tecsinapse/react-core';\n\ninterface IMonthWeek<T extends SelectionType> {\n TextComponent: React.FC<TextProps>;\n /** any as workaround for TS type mismatching */\n onChange?: (value?: any) => void | never;\n type?: T;\n value?: Value<T>;\n week: Date[];\n referenceDate: Date;\n}\n\nconst MonthWeek = <T extends SelectionType>({\n week,\n referenceDate,\n type,\n value,\n TextComponent,\n onChange,\n}: IMonthWeek<T>) => {\n const checkIfIsBetween = React.useCallback(\n (date: Date, _value?: Value<T>) => {\n if (type !== 'range' || !_value) return false;\n else {\n const { lowest, highest } = _value as DateRange;\n if (!highest) return false;\n return compare(lowest, date) <= 0 && compare(highest, date) >= 0;\n }\n },\n [type]\n );\n\n const checkIfIsSelected = React.useCallback(\n (date: Date, _value?: Value<T>) => {\n if (!_value) return false;\n else if (type === 'range' && _value) {\n const { lowest, highest } = _value as DateRange;\n return (\n isSameDay(lowest, date) ||\n (highest ? isSameDay(highest, date) : false)\n );\n } else {\n return isSameDay(_value as Date, date);\n }\n },\n [type]\n );\n\n const handlePressCell = React.useCallback(\n (date: Date, _value?: Value<T>) => () => {\n if (type === 'day') {\n onChange?.(date as never);\n } else if (!_value) {\n onChange?.({ lowest: date } as never);\n } else {\n let newValue;\n const { lowest, highest } = _value as DateRange;\n\n if (!highest) {\n if (compare(date, lowest) === -1) {\n newValue = { lowest: date, highest: undefined };\n } else if (compare(date, lowest) === 0) {\n newValue = undefined;\n } else {\n newValue = { lowest: lowest, highest: date };\n }\n } else {\n if (compare(date, lowest) === -1) {\n newValue = { lowest: date, highest: undefined };\n } else if (compare(date, lowest) === 0) {\n newValue = undefined;\n } else {\n if (compare(date, highest) === -1) {\n newValue = { lowest: lowest, highest: date };\n } else if (compare(date, highest) === 0) {\n newValue = { lowest: lowest, highest: undefined };\n } else {\n newValue = { lowest: lowest, highest: date };\n }\n }\n }\n\n onChange?.(newValue as never);\n }\n },\n [onChange, type]\n );\n\n return (\n <Week>\n {week.map((date, index) => {\n const isSelected = checkIfIsSelected(date, value);\n const isBetween = checkIfIsBetween(date, value);\n\n let isRangeStart, isRangeEnd;\n\n if (type === 'range' && value) {\n const { lowest, highest } = value as DateRange;\n isRangeStart = highest && isSameDay(lowest, date);\n isRangeEnd = !!highest && isSameDay(highest, date);\n } else {\n isRangeStart = false;\n isRangeEnd = false;\n }\n\n const colorTone = isSelected\n ? 'xlight'\n : date.getMonth() === referenceDate.getMonth()\n ? 'xdark'\n : 'light';\n\n return (\n <Cell\n key={date.getDate()}\n selected={isSelected}\n highlighted={isBetween}\n isLineEnd={index === 6}\n isLineStart={index === 0}\n isRangeStart={isRangeStart}\n isRangeEnd={isRangeEnd}\n onPress={handlePressCell(date, value)}\n >\n <Selected selected={isSelected} pointerEvents={'none'}>\n <TextComponent colorVariant={'secondary'} colorTone={colorTone}>\n {date.getDate()}\n </TextComponent>\n </Selected>\n </Cell>\n );\n })}\n </Week>\n );\n};\n\nexport default React.memo(MonthWeek);\n"],"file":"MonthWeek.js"}
package/dist/index.d.ts CHANGED
@@ -9,7 +9,7 @@ export { Checkbox, CheckboxProps } from './components/atoms/Checkbox';
9
9
  export { Divider, DividerProps } from './components/atoms/Divider';
10
10
  export { GroupButton, GroupButtonOption, GroupButtonOptionProps, GroupButtonProps, GroupButtonValue, } from './components/atoms/GroupButton';
11
11
  export { Icon, IconProps } from './components/atoms/Icon';
12
- export { Hint, InputContainer, InputContainerProps, InputElement, InputElementProps, InputVariantType, Masks, PressableInputContainer, PressableInputContainerProps, StyledBorderKeeper, useCurrencyMask, useInputFocus, useMask, disabledInputStyles, IMask, IMaskValue, } from './components/atoms/Input';
12
+ export { Hint, InputContainer, InputContainerProps, InputElement, InputElementProps, InputVariantType, PressableInputContainer, PressableInputContainerProps, StyledBorderKeeper, useInputFocus, useNumberMask, useStringMask, disabledInputStyles, } from './components/atoms/Input';
13
13
  export { Paper, PaperProps } from './components/atoms/Paper';
14
14
  export { PressableSurface, PressableSurfaceProps, } from './components/atoms/PressableSurface';
15
15
  export { ProgressBar, ProgressBarProps } from './components/atoms/ProgressBar';
@@ -17,7 +17,7 @@ export { RadioButton, RadioButtonProps } from './components/atoms/RadioButton';
17
17
  export { Switch, SwitchProps } from './components/atoms/Switch';
18
18
  export { Tag, TagProps } from './components/atoms/Tag';
19
19
  export { Text, TextProps } from './components/atoms/Text';
20
- export { Calendar, CalendarProps, DateRange, SelectionType, Value } from './components/molecules/Calendar';
20
+ export { Calendar, CalendarProps, DateRange, SelectionType, Value, } from './components/molecules/Calendar';
21
21
  export { DatePicker, DatePickerProps } from './components/molecules/DatePicker';
22
22
  export { DateTimePicker, DateTimePickerProps, } from './components/molecules/DateTimePicker';
23
23
  export { DateTimeSelector, DateTimeSelectorMode, DateTimeSelectorProps, } from './components/molecules/DateTimeSelector';