alicia-design-system 1.44.2 → 1.44.3
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/alicia/common/DatePicker/DatePicker.js +11 -5
- package/dist/cjs/alicia/common/DatePicker/DatePicker.js.map +1 -1
- package/dist/cjs/alicia/common/DatePicker/DatePicker.stories.js +3 -1
- package/dist/cjs/alicia/common/DatePicker/DatePicker.stories.js.map +1 -1
- package/dist/cjs/hooks/useAutoDateFormatter.js +1 -1
- package/dist/cjs/hooks/useAutoDateFormatter.js.map +1 -1
- package/dist/esm/alicia/common/DatePicker/DatePicker.js +11 -5
- package/dist/esm/alicia/common/DatePicker/DatePicker.js.map +1 -1
- package/dist/esm/alicia/common/DatePicker/DatePicker.stories.js +3 -1
- package/dist/esm/alicia/common/DatePicker/DatePicker.stories.js.map +1 -1
- package/dist/esm/hooks/useAutoDateFormatter.js +1 -1
- package/dist/esm/hooks/useAutoDateFormatter.js.map +1 -1
- package/package.json +1 -1
|
@@ -35,10 +35,8 @@ const DatePicker = (_a) => {
|
|
|
35
35
|
};
|
|
36
36
|
(0, react_2.useEffect)(() => {
|
|
37
37
|
if (dateString && dateString.length === 10) {
|
|
38
|
-
const formattedDate = (0, moment_1.default)(dateString,
|
|
38
|
+
const formattedDate = (0, moment_1.default)(dateString, "YYYY-MM-DD").format(dateFormat);
|
|
39
39
|
handleInputDate(formattedDate, dateFormat);
|
|
40
|
-
setValue(formattedInput);
|
|
41
|
-
setShowDate(formattedInput);
|
|
42
40
|
}
|
|
43
41
|
}, [dateString, dateFormat]);
|
|
44
42
|
const handleClick = () => {
|
|
@@ -47,12 +45,20 @@ const DatePicker = (_a) => {
|
|
|
47
45
|
myRefname.current.showPicker();
|
|
48
46
|
}
|
|
49
47
|
};
|
|
48
|
+
const onUserInputChange = (item) => {
|
|
49
|
+
handleInputDate(item.target.value, dateFormat);
|
|
50
|
+
};
|
|
50
51
|
(0, react_2.useEffect)(() => {
|
|
51
|
-
|
|
52
|
+
setValue(formattedInput);
|
|
53
|
+
setShowDate(formattedInput);
|
|
54
|
+
if (formattedInput.length === 10) {
|
|
55
|
+
const formattedDate = (0, moment_1.default)(formattedInput, dateFormat).format("YYYY-MM-DD");
|
|
56
|
+
onDateChange(formattedDate);
|
|
57
|
+
}
|
|
52
58
|
}, [formattedInput]);
|
|
53
59
|
// icon component
|
|
54
60
|
const Calendar = (0, icons_1.CalendarIcon)({ isError });
|
|
55
|
-
return ((0, jsx_runtime_1.jsxs)(react_1.InputGroup, { children: [(0, jsx_runtime_1.jsx)(react_1.Input, Object.assign({}, props, { placeholder: dateFormat, value: formattedInput !== null && formattedInput !== void 0 ? formattedInput : showDate, variant: 'flushed', color: isError ? 'error' : 'text', id: `${controlName}-view`, name: `${controlName}-view`, isInvalid: isError, onChange: (e) =>
|
|
61
|
+
return ((0, jsx_runtime_1.jsxs)(react_1.InputGroup, { children: [(0, jsx_runtime_1.jsx)(react_1.Input, Object.assign({}, props, { placeholder: dateFormat, value: formattedInput !== null && formattedInput !== void 0 ? formattedInput : showDate, variant: 'flushed', color: isError ? 'error' : 'text', id: `${controlName}-view`, name: `${controlName}-view`, isInvalid: isError, onChange: (e) => onUserInputChange(e) })), (0, jsx_runtime_1.jsx)(react_1.VisuallyHiddenInput, { id: controlName, name: controlName, ref: myRefname, value: value, type: "date", onChange: onChange }), (0, jsx_runtime_1.jsx)(react_1.InputRightElement, { children: (0, jsx_runtime_1.jsx)(Calendar, { stroke: iconColor !== null && iconColor !== void 0 ? iconColor : "text", onClick: handleClick }) })] }));
|
|
56
62
|
};
|
|
57
63
|
exports.DatePicker = DatePicker;
|
|
58
64
|
//# sourceMappingURL=DatePicker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../../../src/alicia/common/DatePicker/DatePicker.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,4CAA0G;AAC1G,iCAAqE;AACrE,oDAA4B;AAC5B,oCAAwC;AACxC,8EAA2E;AAEpE,MAAM,UAAU,GAAwB,CAAC,EAAkG,EAAE,EAAE;QAAtG,EAAE,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,YAAY,EAAE,UAAU,GAAG,YAAY,OAAY,EAAP,KAAK,cAAhG,mFAAkG,CAAF;IAC9I,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAqB,EAAE,CAAC,CAAC;IAC3D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAqB,EAAE,CAAC,CAAC;IACjE,MAAM,SAAS,GAAG,IAAA,cAAM,EAAM,IAAI,CAAC,CAAC;IACpC,MAAM,CAAC,eAAe,EAAE,cAAc,CAAC,GAAG,IAAA,2CAAoB,EAAC,UAAU,CAAC,CAAC;IAE3E,MAAM,QAAQ,GAAG,CAAC,IAAmC,EAAE,EAAE;QACvD,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC5B,MAAM,aAAa,GAAG,IAAA,gBAAM,EAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QACjF,eAAe,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC;QAC3C,WAAW,CAAC,aAAa,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,UAAU,IAAI,UAAU,CAAC,MAAM,KAAK,EAAE,EAAE;YAE1C,MAAM,aAAa,GAAG,IAAA,gBAAM,EAAC,UAAU,EAAE,
|
|
1
|
+
{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../../../src/alicia/common/DatePicker/DatePicker.tsx"],"names":[],"mappings":"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"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.Secondary = exports.Primary = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const react_1 = require("react");
|
|
5
6
|
const DatePicker_1 = require("./DatePicker");
|
|
6
7
|
exports.default = {
|
|
7
8
|
title: "Alicia/Common/DatePicker",
|
|
@@ -14,7 +15,8 @@ exports.default = {
|
|
|
14
15
|
},
|
|
15
16
|
};
|
|
16
17
|
const Template = (args) => {
|
|
17
|
-
|
|
18
|
+
const [val, setVal] = (0, react_1.useState)("2004-12-23");
|
|
19
|
+
return (0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, Object.assign({}, args, { dateString: val, onDateChange: (e) => [setVal(e), console.log(e)] }));
|
|
18
20
|
};
|
|
19
21
|
exports.Primary = Template.bind({});
|
|
20
22
|
exports.Secondary = Template.bind({});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.stories.js","sourceRoot":"","sources":["../../../../../src/alicia/common/DatePicker/DatePicker.stories.tsx"],"names":[],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"DatePicker.stories.js","sourceRoot":"","sources":["../../../../../src/alicia/common/DatePicker/DatePicker.stories.tsx"],"names":[],"mappings":";;;;AACA,iCAAiC;AAEjC,6CAA0C;AAE1C,kBAAe;IACX,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,uBAAU;IACrB,QAAQ,EAAE;QACN,UAAU,EAAE;YACR,OAAO,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC;YACrC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC7B;KACJ;CACgC,CAAC;AAEtC,MAAM,QAAQ,GAAsC,CAAC,IAAI,EAAE,EAAE;IACzD,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,IAAA,gBAAQ,EAAC,YAAY,CAAC,CAAC;IAC7C,OAAO,uBAAC,uBAAU,oBAAK,IAAI,IAAE,UAAU,EAAE,GAAG,EAAE,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;AACvG,CAAC,CAAC;AAEW,QAAA,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5B,QAAA,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,eAAO,CAAC,IAAI,GAAG;IACX,UAAU,EAAE,EAAE;IACd,OAAO,EAAE,KAAK;IACd,WAAW,EAAE,WAAW;IACxB,UAAU,EAAE,YAAY;CAC3B,CAAC;AAEF,iBAAS,CAAC,IAAI,GAAG;IACb,UAAU,EAAE,YAAY;IACxB,OAAO,EAAE,KAAK;IACd,WAAW,EAAE,WAAW;IACxB,UAAU,EAAE,YAAY;CAC3B,CAAC"}
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.useAutoDateFormatter = void 0;
|
|
4
4
|
const react_1 = require("react");
|
|
5
5
|
const useAutoDateFormatter = (initialDate) => {
|
|
6
|
-
const [formattedInput, setFormattedInput] = (0, react_1.useState)(
|
|
6
|
+
const [formattedInput, setFormattedInput] = (0, react_1.useState)('');
|
|
7
7
|
const handleInputDate = (value, formatType) => {
|
|
8
8
|
// Length of full date is 10 characters
|
|
9
9
|
if (value.length > 10)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAutoDateFormatter.js","sourceRoot":"","sources":["../../../src/hooks/useAutoDateFormatter.ts"],"names":[],"mappings":";;;AAAA,iCAAiC;AAI1B,MAAM,oBAAoB,GAAG,CAAC,WAAoB,EAA8B,EAAE;IACvF,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,IAAA,gBAAQ,EAAC,
|
|
1
|
+
{"version":3,"file":"useAutoDateFormatter.js","sourceRoot":"","sources":["../../../src/hooks/useAutoDateFormatter.ts"],"names":[],"mappings":";;;AAAA,iCAAiC;AAI1B,MAAM,oBAAoB,GAAG,CAAC,WAAoB,EAA8B,EAAE;IACvF,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,IAAA,gBAAQ,EAAC,EAAE,CAAC,CAAC;IAEzD,MAAM,eAAe,GAAG,CAAC,KAAa,EAAE,UAAuC,EAAE,EAAE;QACjF,uCAAuC;QACvC,IAAI,KAAK,CAAC,MAAM,GAAG,EAAE;YAAE,OAAO;QAE9B,mEAAmE;QACnE,IAAI,KAAK,CAAC,MAAM,GAAG,cAAc,CAAC,MAAM,EAAE;YACxC,iBAAiB,CAAC,KAAK,CAAC,CAAC;YACzB,OAAO;SACR;QAED,qBAAqB;QACrB,MAAM,aAAa,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAC9C,IAAI,KAAK,CAAC,QAAQ,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;YAAE,OAAO;QAE/C,oGAAoG;QACpG,MAAM,SAAS,GAAG,UAAU,KAAK,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;QAC9M,iBAAiB,CAAC,SAAS,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,OAAO,CAAC,eAAe,EAAE,cAAc,CAAC,CAAC;AAC3C,CAAC,CAAC;AAvBW,QAAA,oBAAoB,wBAuB/B"}
|
|
@@ -29,10 +29,8 @@ export const DatePicker = (_a) => {
|
|
|
29
29
|
};
|
|
30
30
|
useEffect(() => {
|
|
31
31
|
if (dateString && dateString.length === 10) {
|
|
32
|
-
const formattedDate = moment(dateString,
|
|
32
|
+
const formattedDate = moment(dateString, "YYYY-MM-DD").format(dateFormat);
|
|
33
33
|
handleInputDate(formattedDate, dateFormat);
|
|
34
|
-
setValue(formattedInput);
|
|
35
|
-
setShowDate(formattedInput);
|
|
36
34
|
}
|
|
37
35
|
}, [dateString, dateFormat]);
|
|
38
36
|
const handleClick = () => {
|
|
@@ -41,11 +39,19 @@ export const DatePicker = (_a) => {
|
|
|
41
39
|
myRefname.current.showPicker();
|
|
42
40
|
}
|
|
43
41
|
};
|
|
42
|
+
const onUserInputChange = (item) => {
|
|
43
|
+
handleInputDate(item.target.value, dateFormat);
|
|
44
|
+
};
|
|
44
45
|
useEffect(() => {
|
|
45
|
-
|
|
46
|
+
setValue(formattedInput);
|
|
47
|
+
setShowDate(formattedInput);
|
|
48
|
+
if (formattedInput.length === 10) {
|
|
49
|
+
const formattedDate = moment(formattedInput, dateFormat).format("YYYY-MM-DD");
|
|
50
|
+
onDateChange(formattedDate);
|
|
51
|
+
}
|
|
46
52
|
}, [formattedInput]);
|
|
47
53
|
// icon component
|
|
48
54
|
const Calendar = CalendarIcon({ isError });
|
|
49
|
-
return (_jsxs(InputGroup, { children: [_jsx(Input, Object.assign({}, props, { placeholder: dateFormat, value: formattedInput !== null && formattedInput !== void 0 ? formattedInput : showDate, variant: 'flushed', color: isError ? 'error' : 'text', id: `${controlName}-view`, name: `${controlName}-view`, isInvalid: isError, onChange: (e) =>
|
|
55
|
+
return (_jsxs(InputGroup, { children: [_jsx(Input, Object.assign({}, props, { placeholder: dateFormat, value: formattedInput !== null && formattedInput !== void 0 ? formattedInput : showDate, variant: 'flushed', color: isError ? 'error' : 'text', id: `${controlName}-view`, name: `${controlName}-view`, isInvalid: isError, onChange: (e) => onUserInputChange(e) })), _jsx(VisuallyHiddenInput, { id: controlName, name: controlName, ref: myRefname, value: value, type: "date", onChange: onChange }), _jsx(InputRightElement, { children: _jsx(Calendar, { stroke: iconColor !== null && iconColor !== void 0 ? iconColor : "text", onClick: handleClick }) })] }));
|
|
50
56
|
};
|
|
51
57
|
//# sourceMappingURL=DatePicker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../../../src/alicia/common/DatePicker/DatePicker.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,KAAK,EAAe,UAAU,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC1G,OAAO,EAAM,QAAQ,EAAE,SAAS,EAAe,MAAM,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,MAAM,MAAM,QAAQ,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAE3E,MAAM,CAAC,MAAM,UAAU,GAAwB,CAAC,EAAkG,EAAE,EAAE;QAAtG,EAAE,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,YAAY,EAAE,UAAU,GAAG,YAAY,OAAY,EAAP,KAAK,cAAhG,mFAAkG,CAAF;IAC9I,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAqB,EAAE,CAAC,CAAC;IAC3D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAqB,EAAE,CAAC,CAAC;IACjE,MAAM,SAAS,GAAG,MAAM,CAAM,IAAI,CAAC,CAAC;IACpC,MAAM,CAAC,eAAe,EAAE,cAAc,CAAC,GAAG,oBAAoB,CAAC,UAAU,CAAC,CAAC;IAE3E,MAAM,QAAQ,GAAG,CAAC,IAAmC,EAAE,EAAE;QACvD,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC5B,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QACjF,eAAe,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC;QAC3C,WAAW,CAAC,aAAa,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,IAAI,UAAU,CAAC,MAAM,KAAK,EAAE,EAAE;YAE1C,MAAM,aAAa,GAAG,MAAM,CAAC,UAAU,EAAE,
|
|
1
|
+
{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../../../src/alicia/common/DatePicker/DatePicker.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from 'react';
|
|
2
3
|
import { DatePicker } from "./DatePicker";
|
|
3
4
|
export default {
|
|
4
5
|
title: "Alicia/Common/DatePicker",
|
|
@@ -11,7 +12,8 @@ export default {
|
|
|
11
12
|
},
|
|
12
13
|
};
|
|
13
14
|
const Template = (args) => {
|
|
14
|
-
|
|
15
|
+
const [val, setVal] = useState("2004-12-23");
|
|
16
|
+
return _jsx(DatePicker, Object.assign({}, args, { dateString: val, onDateChange: (e) => [setVal(e), console.log(e)] }));
|
|
15
17
|
};
|
|
16
18
|
export const Primary = Template.bind({});
|
|
17
19
|
export const Secondary = Template.bind({});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.stories.js","sourceRoot":"","sources":["../../../../../src/alicia/common/DatePicker/DatePicker.stories.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"DatePicker.stories.js","sourceRoot":"","sources":["../../../../../src/alicia/common/DatePicker/DatePicker.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,eAAe;IACX,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE;QACN,UAAU,EAAE;YACR,OAAO,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC;YACrC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC7B;KACJ;CACgC,CAAC;AAEtC,MAAM,QAAQ,GAAsC,CAAC,IAAI,EAAE,EAAE;IACzD,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IAC7C,OAAO,KAAC,UAAU,oBAAK,IAAI,IAAE,UAAU,EAAE,GAAG,EAAE,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;AACvG,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,OAAO,CAAC,IAAI,GAAG;IACX,UAAU,EAAE,EAAE;IACd,OAAO,EAAE,KAAK;IACd,WAAW,EAAE,WAAW;IACxB,UAAU,EAAE,YAAY;CAC3B,CAAC;AAEF,SAAS,CAAC,IAAI,GAAG;IACb,UAAU,EAAE,YAAY;IACxB,OAAO,EAAE,KAAK;IACd,WAAW,EAAE,WAAW;IACxB,UAAU,EAAE,YAAY;CAC3B,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useState } from 'react';
|
|
2
2
|
export const useAutoDateFormatter = (initialDate) => {
|
|
3
|
-
const [formattedInput, setFormattedInput] = useState(
|
|
3
|
+
const [formattedInput, setFormattedInput] = useState('');
|
|
4
4
|
const handleInputDate = (value, formatType) => {
|
|
5
5
|
// Length of full date is 10 characters
|
|
6
6
|
if (value.length > 10)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAutoDateFormatter.js","sourceRoot":"","sources":["../../../src/hooks/useAutoDateFormatter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAIjC,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,WAAoB,EAA8B,EAAE;IACvF,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,
|
|
1
|
+
{"version":3,"file":"useAutoDateFormatter.js","sourceRoot":"","sources":["../../../src/hooks/useAutoDateFormatter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAIjC,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,WAAoB,EAA8B,EAAE;IACvF,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEzD,MAAM,eAAe,GAAG,CAAC,KAAa,EAAE,UAAuC,EAAE,EAAE;QACjF,uCAAuC;QACvC,IAAI,KAAK,CAAC,MAAM,GAAG,EAAE;YAAE,OAAO;QAE9B,mEAAmE;QACnE,IAAI,KAAK,CAAC,MAAM,GAAG,cAAc,CAAC,MAAM,EAAE;YACxC,iBAAiB,CAAC,KAAK,CAAC,CAAC;YACzB,OAAO;SACR;QAED,qBAAqB;QACrB,MAAM,aAAa,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAC9C,IAAI,KAAK,CAAC,QAAQ,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;YAAE,OAAO;QAE/C,oGAAoG;QACpG,MAAM,SAAS,GAAG,UAAU,KAAK,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;QAC9M,iBAAiB,CAAC,SAAS,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,OAAO,CAAC,eAAe,EAAE,cAAc,CAAC,CAAC;AAC3C,CAAC,CAAC"}
|