@tecsinapse/react-core 1.12.10 → 1.14.2
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.
- package/CHANGELOG.md +42 -0
- package/dist/components/atoms/Input/InputElement/InputElement.d.ts +5 -3
- package/dist/components/atoms/Input/InputElement/InputElement.js +51 -7
- package/dist/components/atoms/Input/InputElement/InputElement.js.map +1 -1
- package/dist/components/atoms/Input/hooks/useNumberMask.d.ts +8 -0
- package/dist/components/atoms/Input/hooks/useNumberMask.js +98 -0
- package/dist/components/atoms/Input/hooks/useNumberMask.js.map +1 -0
- package/dist/components/atoms/Input/hooks/useStringMask.d.ts +8 -0
- package/dist/components/atoms/Input/hooks/useStringMask.js +109 -0
- package/dist/components/atoms/Input/hooks/useStringMask.js.map +1 -0
- package/dist/components/atoms/Input/index.d.ts +2 -3
- package/dist/components/atoms/Input/index.js +12 -26
- package/dist/components/atoms/Input/index.js.map +1 -1
- package/dist/components/molecules/Calendar/components/MonthWeek.js +5 -10
- package/dist/components/molecules/Calendar/components/MonthWeek.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.js +8 -29
- package/dist/index.js.map +1 -1
- package/dist/utils/formatWithMask.d.ts +3 -0
- package/dist/utils/formatWithMask.js +31 -0
- package/dist/utils/formatWithMask.js.map +1 -0
- package/dist/utils/index.d.ts +2 -0
- package/dist/utils/index.js +28 -0
- package/dist/utils/index.js.map +1 -1
- package/dist/utils/masks.d.ts +11 -0
- package/dist/utils/masks.js +19 -0
- package/dist/utils/masks.js.map +1 -0
- package/package.json +2 -2
- package/src/components/atoms/Input/InputElement/InputElement.tsx +88 -10
- package/src/components/atoms/Input/hooks/useNumberMask.ts +99 -0
- package/src/components/atoms/Input/hooks/useStringMask.ts +128 -0
- package/src/components/atoms/Input/index.ts +2 -3
- package/src/components/molecules/Calendar/components/MonthWeek.tsx +5 -10
- package/src/index.ts +3 -6
- package/src/utils/formatWithMask.ts +25 -0
- package/src/utils/index.ts +4 -2
- package/src/utils/masks.ts +15 -0
- package/dist/components/atoms/Input/hooks/useCurrencyMask.d.ts +0 -3
- package/dist/components/atoms/Input/hooks/useCurrencyMask.js +0 -69
- package/dist/components/atoms/Input/hooks/useCurrencyMask.js.map +0 -1
- package/dist/components/atoms/Input/hooks/useMask.d.ts +0 -9
- package/dist/components/atoms/Input/hooks/useMask.js +0 -61
- package/dist/components/atoms/Input/hooks/useMask.js.map +0 -1
- package/dist/components/atoms/Input/masks/index.d.ts +0 -10
- package/dist/components/atoms/Input/masks/index.js +0 -18
- package/dist/components/atoms/Input/masks/index.js.map +0 -1
- package/src/components/atoms/Input/hooks/useCurrencyMask.ts +0 -74
- package/src/components/atoms/Input/hooks/useMask.ts +0 -92
- package/src/components/atoms/Input/masks/index.ts +0 -12
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,48 @@
|
|
|
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.2](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.14.1...@tecsinapse/react-core@1.14.2) (2022-02-15)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* Input initializan for string and no mask. ([78353ef](https://github.com/tecsinapse/design-system/commit/78353ef7b4d24216a1b99eab800f8d448ff21a34))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## [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)
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Bug Fixes
|
|
21
|
+
|
|
22
|
+
* Input initialization. ([a48c2d6](https://github.com/tecsinapse/design-system/commit/a48c2d6d8d1ee8d1282fa5082af40c6a1bce3e4b))
|
|
23
|
+
* Input initialization. ([b0be51f](https://github.com/tecsinapse/design-system/commit/b0be51f7699a3936b7d3d193437a2636bad7abc7))
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
# [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)
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
### Bug Fixes
|
|
33
|
+
|
|
34
|
+
* formatWithMask util. Refactoring on useNumberMask and useStringMask hooks. ([76920f6](https://github.com/tecsinapse/design-system/commit/76920f62fb8cf9070b9b2e477dc720e9b7b24077))
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
# [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)
|
|
41
|
+
|
|
42
|
+
**Note:** Version bump only for package @tecsinapse/react-core
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
|
|
6
48
|
## [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)
|
|
7
49
|
|
|
8
50
|
**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 {
|
|
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
|
|
7
|
+
value: string | number;
|
|
7
8
|
placeholder?: string;
|
|
8
9
|
disabled?: boolean;
|
|
9
|
-
onChange?: (value:
|
|
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 =
|
|
10
|
+
var _react2 = _interopRequireWildcard(require("react"));
|
|
11
11
|
|
|
12
12
|
var _styled = require("../styled");
|
|
13
13
|
|
|
14
|
-
|
|
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 && value !== '') {
|
|
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:
|
|
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","
|
|
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,SADV,IAEAd,KAAK,KAAK,EAHZ,EAIE;AAEAkB,QAAAA,YAAY,CAAClB,KAAD,CAAZ;AACAQ,QAAAA,qBAAqB,CAAC,IAAD,CAArB;AACD,OARD,MAQO,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,GA/BD,EA+BG,CAACA,KAAD,EAAQiB,SAAR,EAAmBC,YAAnB,EAAiCX,kBAAjC,CA/BH;AAiCA,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,CApGyC,CAA5C;;AAuGAN,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 value !== ''\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/
|
|
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
|
|
95
|
+
var _useNumberMask = require("./hooks/useNumberMask");
|
|
110
96
|
|
|
111
|
-
Object.keys(
|
|
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] ===
|
|
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
|
|
104
|
+
return _useNumberMask[key];
|
|
119
105
|
}
|
|
120
106
|
});
|
|
121
107
|
});
|
|
122
108
|
|
|
123
|
-
var
|
|
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(
|
|
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] ===
|
|
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
|
|
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;;
|
|
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:
|
|
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:
|
|
92
|
-
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","
|
|
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":"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","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,
|
|
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';
|