@tecsinapse/cortex-react 1.9.10 → 1.9.11
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/dist/cjs/components/Calendar/CalendarHeader.js +4 -2
- package/dist/cjs/hooks/useNumberMask.js +15 -15
- package/dist/cjs/hooks/useStringMask.js +8 -14
- package/dist/cjs/index.js +2 -0
- package/dist/esm/components/Calendar/CalendarHeader.js +4 -2
- package/dist/esm/hooks/useNumberMask.js +16 -17
- package/dist/esm/hooks/useStringMask.js +9 -16
- package/dist/esm/index.js +2 -2
- package/dist/types/hooks/useNumberMask.d.ts +4 -0
- package/dist/types/hooks/useStringMask.d.ts +1 -0
- package/package.json +2 -2
|
@@ -20,7 +20,8 @@ const CalendarHeader = ({
|
|
|
20
20
|
{
|
|
21
21
|
onClick: onClickPrevButton,
|
|
22
22
|
variants: { variant: "text", intent: "secondary", size: "small" },
|
|
23
|
-
"data-testid": "calendar-header-prev-button"
|
|
23
|
+
"data-testid": "calendar-header-prev-button",
|
|
24
|
+
type: "button"
|
|
24
25
|
},
|
|
25
26
|
/* @__PURE__ */ React.createElement(fa.FaChevronLeft, null)
|
|
26
27
|
),
|
|
@@ -30,7 +31,8 @@ const CalendarHeader = ({
|
|
|
30
31
|
{
|
|
31
32
|
onClick: onClickNextButton,
|
|
32
33
|
variants: { variant: "text", intent: "secondary", size: "small" },
|
|
33
|
-
"data-testid": "calendar-header-next-button"
|
|
34
|
+
"data-testid": "calendar-header-next-button",
|
|
35
|
+
type: "button"
|
|
34
36
|
},
|
|
35
37
|
/* @__PURE__ */ React.createElement(fa.FaChevronRight, null)
|
|
36
38
|
)
|
|
@@ -39,33 +39,33 @@ const getInternalNumberAndMask = (value, options) => {
|
|
|
39
39
|
mergedOptions
|
|
40
40
|
};
|
|
41
41
|
};
|
|
42
|
+
const applyNumberMask = (value, options) => {
|
|
43
|
+
const { internalNumber, mergedOptions } = getInternalNumberAndMask(
|
|
44
|
+
value ?? 0,
|
|
45
|
+
options
|
|
46
|
+
);
|
|
47
|
+
return {
|
|
48
|
+
raw: internalNumber,
|
|
49
|
+
formatted: currency(internalNumber, mergedOptions).format()
|
|
50
|
+
};
|
|
51
|
+
};
|
|
42
52
|
const useNumberMask = (options, defaultValue) => {
|
|
43
|
-
const
|
|
44
|
-
(
|
|
45
|
-
const { internalNumber, mergedOptions } = getInternalNumberAndMask(
|
|
46
|
-
value2,
|
|
47
|
-
options
|
|
48
|
-
);
|
|
49
|
-
return {
|
|
50
|
-
raw: internalNumber,
|
|
51
|
-
formatted: currency(internalNumber, mergedOptions).format()
|
|
52
|
-
};
|
|
53
|
-
},
|
|
54
|
-
[options, getRegex]
|
|
53
|
+
const [value, setValue] = React.useState(
|
|
54
|
+
applyNumberMask(defaultValue, options)
|
|
55
55
|
);
|
|
56
|
-
const [value, setValue] = React.useState(applyMask(defaultValue));
|
|
57
56
|
const handleChangeValue = React.useCallback(
|
|
58
57
|
(formattedValue) => {
|
|
59
|
-
const { raw, formatted } =
|
|
58
|
+
const { raw, formatted } = applyNumberMask(formattedValue, options);
|
|
60
59
|
setValue({
|
|
61
60
|
raw,
|
|
62
61
|
formatted
|
|
63
62
|
});
|
|
64
63
|
},
|
|
65
|
-
[
|
|
64
|
+
[setValue]
|
|
66
65
|
);
|
|
67
66
|
return [value, handleChangeValue];
|
|
68
67
|
};
|
|
69
68
|
|
|
69
|
+
exports.applyNumberMask = applyNumberMask;
|
|
70
70
|
exports.getInternalNumberAndMask = getInternalNumberAndMask;
|
|
71
71
|
exports.useNumberMask = useNumberMask;
|
|
@@ -60,34 +60,28 @@ const getMask = (mask, newValue) => {
|
|
|
60
60
|
});
|
|
61
61
|
return regexArray;
|
|
62
62
|
};
|
|
63
|
+
const applyStringMask = (value, mask) => {
|
|
64
|
+
const selectedMask = getMask(mask, value);
|
|
65
|
+
return mergeMask(value, selectedMask);
|
|
66
|
+
};
|
|
63
67
|
const useStringMask = (mask, defaultValue) => {
|
|
64
|
-
const applyMask = React.useCallback(
|
|
65
|
-
(value2 = "") => {
|
|
66
|
-
const selectedMask = getMask(mask, value2);
|
|
67
|
-
const { formatted, raw } = mergeMask(value2, selectedMask);
|
|
68
|
-
return {
|
|
69
|
-
raw,
|
|
70
|
-
formatted
|
|
71
|
-
};
|
|
72
|
-
},
|
|
73
|
-
[mask]
|
|
74
|
-
);
|
|
75
68
|
const [value, setValue] = React.useState(
|
|
76
|
-
|
|
69
|
+
applyStringMask(String(defaultValue ?? ""), mask)
|
|
77
70
|
);
|
|
78
71
|
const handleChangeValue = React.useCallback(
|
|
79
72
|
(formattedValue) => {
|
|
80
|
-
const { raw, formatted } =
|
|
73
|
+
const { raw, formatted } = applyStringMask(String(formattedValue), mask);
|
|
81
74
|
setValue({
|
|
82
75
|
raw,
|
|
83
76
|
formatted
|
|
84
77
|
});
|
|
85
78
|
},
|
|
86
|
-
[
|
|
79
|
+
[setValue]
|
|
87
80
|
);
|
|
88
81
|
return [value, handleChangeValue];
|
|
89
82
|
};
|
|
90
83
|
|
|
84
|
+
exports.applyStringMask = applyStringMask;
|
|
91
85
|
exports.getMask = getMask;
|
|
92
86
|
exports.mergeMask = mergeMask;
|
|
93
87
|
exports.useStringMask = useStringMask;
|
package/dist/cjs/index.js
CHANGED
|
@@ -124,12 +124,14 @@ exports.useDatePickerInput = useDatePickerInput.useDatePickerInput;
|
|
|
124
124
|
exports.useDateRangePickerInput = useDateRangePickerInput.useDateRangePickerInput;
|
|
125
125
|
exports.useDebouncedState = useDebouncedState.useDebouncedState;
|
|
126
126
|
exports.useFloatingElement = useFloatingElement.useFloatingElement;
|
|
127
|
+
exports.applyNumberMask = useNumberMask.applyNumberMask;
|
|
127
128
|
exports.getInternalNumberAndMask = useNumberMask.getInternalNumberAndMask;
|
|
128
129
|
exports.useNumberMask = useNumberMask.useNumberMask;
|
|
129
130
|
exports.useOutsideClickListener = useOutsideClickListener.useOutsideClickListener;
|
|
130
131
|
exports.useRangeCalendar = useRangeCalendar.useRangeCalendar;
|
|
131
132
|
exports.useSelectGroupedOptions = useSelectGroupedOptions.useSelectGroupedOptions;
|
|
132
133
|
exports.useSelectOptions = useSelectOptions.useSelectOptions;
|
|
134
|
+
exports.applyStringMask = useStringMask.applyStringMask;
|
|
133
135
|
exports.getMask = useStringMask.getMask;
|
|
134
136
|
exports.mergeMask = useStringMask.mergeMask;
|
|
135
137
|
exports.useStringMask = useStringMask.useStringMask;
|
|
@@ -18,7 +18,8 @@ const CalendarHeader = ({
|
|
|
18
18
|
{
|
|
19
19
|
onClick: onClickPrevButton,
|
|
20
20
|
variants: { variant: "text", intent: "secondary", size: "small" },
|
|
21
|
-
"data-testid": "calendar-header-prev-button"
|
|
21
|
+
"data-testid": "calendar-header-prev-button",
|
|
22
|
+
type: "button"
|
|
22
23
|
},
|
|
23
24
|
/* @__PURE__ */ React__default.createElement(FaChevronLeft, null)
|
|
24
25
|
),
|
|
@@ -28,7 +29,8 @@ const CalendarHeader = ({
|
|
|
28
29
|
{
|
|
29
30
|
onClick: onClickNextButton,
|
|
30
31
|
variants: { variant: "text", intent: "secondary", size: "small" },
|
|
31
|
-
"data-testid": "calendar-header-next-button"
|
|
32
|
+
"data-testid": "calendar-header-next-button",
|
|
33
|
+
type: "button"
|
|
32
34
|
},
|
|
33
35
|
/* @__PURE__ */ React__default.createElement(FaChevronRight, null)
|
|
34
36
|
)
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import currency from 'currency.js';
|
|
2
|
-
import {
|
|
2
|
+
import { useState, useCallback } from 'react';
|
|
3
3
|
import '@internationalized/date';
|
|
4
4
|
import { extractNumbersFromString } from '../utils/extractors.js';
|
|
5
5
|
|
|
@@ -37,32 +37,31 @@ const getInternalNumberAndMask = (value, options) => {
|
|
|
37
37
|
mergedOptions
|
|
38
38
|
};
|
|
39
39
|
};
|
|
40
|
+
const applyNumberMask = (value, options) => {
|
|
41
|
+
const { internalNumber, mergedOptions } = getInternalNumberAndMask(
|
|
42
|
+
value ?? 0,
|
|
43
|
+
options
|
|
44
|
+
);
|
|
45
|
+
return {
|
|
46
|
+
raw: internalNumber,
|
|
47
|
+
formatted: currency(internalNumber, mergedOptions).format()
|
|
48
|
+
};
|
|
49
|
+
};
|
|
40
50
|
const useNumberMask = (options, defaultValue) => {
|
|
41
|
-
const
|
|
42
|
-
(
|
|
43
|
-
const { internalNumber, mergedOptions } = getInternalNumberAndMask(
|
|
44
|
-
value2,
|
|
45
|
-
options
|
|
46
|
-
);
|
|
47
|
-
return {
|
|
48
|
-
raw: internalNumber,
|
|
49
|
-
formatted: currency(internalNumber, mergedOptions).format()
|
|
50
|
-
};
|
|
51
|
-
},
|
|
52
|
-
[options, getRegex]
|
|
51
|
+
const [value, setValue] = useState(
|
|
52
|
+
applyNumberMask(defaultValue, options)
|
|
53
53
|
);
|
|
54
|
-
const [value, setValue] = useState(applyMask(defaultValue));
|
|
55
54
|
const handleChangeValue = useCallback(
|
|
56
55
|
(formattedValue) => {
|
|
57
|
-
const { raw, formatted } =
|
|
56
|
+
const { raw, formatted } = applyNumberMask(formattedValue, options);
|
|
58
57
|
setValue({
|
|
59
58
|
raw,
|
|
60
59
|
formatted
|
|
61
60
|
});
|
|
62
61
|
},
|
|
63
|
-
[
|
|
62
|
+
[setValue]
|
|
64
63
|
);
|
|
65
64
|
return [value, handleChangeValue];
|
|
66
65
|
};
|
|
67
66
|
|
|
68
|
-
export { getInternalNumberAndMask, useNumberMask };
|
|
67
|
+
export { applyNumberMask, getInternalNumberAndMask, useNumberMask };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { useState, useCallback } from 'react';
|
|
2
2
|
|
|
3
3
|
const mergeMask = (value = "", mask) => {
|
|
4
4
|
let formatted = "";
|
|
@@ -58,32 +58,25 @@ const getMask = (mask, newValue) => {
|
|
|
58
58
|
});
|
|
59
59
|
return regexArray;
|
|
60
60
|
};
|
|
61
|
+
const applyStringMask = (value, mask) => {
|
|
62
|
+
const selectedMask = getMask(mask, value);
|
|
63
|
+
return mergeMask(value, selectedMask);
|
|
64
|
+
};
|
|
61
65
|
const useStringMask = (mask, defaultValue) => {
|
|
62
|
-
const applyMask = useCallback(
|
|
63
|
-
(value2 = "") => {
|
|
64
|
-
const selectedMask = getMask(mask, value2);
|
|
65
|
-
const { formatted, raw } = mergeMask(value2, selectedMask);
|
|
66
|
-
return {
|
|
67
|
-
raw,
|
|
68
|
-
formatted
|
|
69
|
-
};
|
|
70
|
-
},
|
|
71
|
-
[mask]
|
|
72
|
-
);
|
|
73
66
|
const [value, setValue] = useState(
|
|
74
|
-
|
|
67
|
+
applyStringMask(String(defaultValue ?? ""), mask)
|
|
75
68
|
);
|
|
76
69
|
const handleChangeValue = useCallback(
|
|
77
70
|
(formattedValue) => {
|
|
78
|
-
const { raw, formatted } =
|
|
71
|
+
const { raw, formatted } = applyStringMask(String(formattedValue), mask);
|
|
79
72
|
setValue({
|
|
80
73
|
raw,
|
|
81
74
|
formatted
|
|
82
75
|
});
|
|
83
76
|
},
|
|
84
|
-
[
|
|
77
|
+
[setValue]
|
|
85
78
|
);
|
|
86
79
|
return [value, handleChangeValue];
|
|
87
80
|
};
|
|
88
81
|
|
|
89
|
-
export { getMask, mergeMask, useStringMask };
|
|
82
|
+
export { applyStringMask, getMask, mergeMask, useStringMask };
|
package/dist/esm/index.js
CHANGED
|
@@ -46,12 +46,12 @@ export { useDatePickerInput } from './hooks/useDatePickerInput.js';
|
|
|
46
46
|
export { useDateRangePickerInput } from './hooks/useDateRangePickerInput.js';
|
|
47
47
|
export { useDebouncedState } from './hooks/useDebouncedState.js';
|
|
48
48
|
export { useFloatingElement } from './hooks/useFloatingElement.js';
|
|
49
|
-
export { getInternalNumberAndMask, useNumberMask } from './hooks/useNumberMask.js';
|
|
49
|
+
export { applyNumberMask, getInternalNumberAndMask, useNumberMask } from './hooks/useNumberMask.js';
|
|
50
50
|
export { useOutsideClickListener } from './hooks/useOutsideClickListener.js';
|
|
51
51
|
export { useRangeCalendar } from './hooks/useRangeCalendar.js';
|
|
52
52
|
export { useSelectGroupedOptions } from './hooks/useSelectGroupedOptions.js';
|
|
53
53
|
export { useSelectOptions } from './hooks/useSelectOptions.js';
|
|
54
|
-
export { getMask, mergeMask, useStringMask } from './hooks/useStringMask.js';
|
|
54
|
+
export { applyStringMask, getMask, mergeMask, useStringMask } from './hooks/useStringMask.js';
|
|
55
55
|
export { useFileUpload } from './hooks/useFileUpload.js';
|
|
56
56
|
export { useDimensions } from './hooks/useDimensions.js';
|
|
57
57
|
export { SnackbarSonner } from './service/SnackbarSonner.js';
|
|
@@ -5,4 +5,8 @@ export declare const getInternalNumberAndMask: (value: string | number, options?
|
|
|
5
5
|
internalNumber: number;
|
|
6
6
|
mergedOptions: CurrencyOptions;
|
|
7
7
|
};
|
|
8
|
+
export declare const applyNumberMask: (value?: string | number, options?: CurrencyOptions) => {
|
|
9
|
+
raw: number;
|
|
10
|
+
formatted: string;
|
|
11
|
+
};
|
|
8
12
|
export declare const useNumberMask: (options?: CurrencyOptions, defaultValue?: string | number) => [MaskValue, (value: string | number) => void];
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { MaskType, MaskValue } from '../components';
|
|
2
2
|
export declare const mergeMask: (value: string | undefined, mask: MaskType[]) => MaskValue;
|
|
3
3
|
export declare const getMask: (mask: MaskType[] | ((value: string) => MaskType[]), newValue: string) => MaskType[];
|
|
4
|
+
export declare const applyStringMask: (value: string, mask: MaskType[] | ((value: string) => MaskType[])) => MaskValue;
|
|
4
5
|
export declare const useStringMask: (mask: MaskType[] | ((value: string) => MaskType[]), defaultValue?: string | number) => [MaskValue, (text: string | number) => void];
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tecsinapse/cortex-react",
|
|
3
|
-
"version": "1.9.
|
|
3
|
+
"version": "1.9.11",
|
|
4
4
|
"description": "React components based in @tecsinapse/cortex-core",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/esm/index.js",
|
|
@@ -48,5 +48,5 @@
|
|
|
48
48
|
"react-dom": ">=18.0.0",
|
|
49
49
|
"tailwind": ">=3.3.0"
|
|
50
50
|
},
|
|
51
|
-
"gitHead": "
|
|
51
|
+
"gitHead": "7c9d454d984a5b09a0ce7f5d07465f4e59a957f0"
|
|
52
52
|
}
|