@economic/taco 2.49.3 → 2.49.4
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/esm/packages/taco/src/components/Datepicker/useDatepicker.js +0 -7
- package/dist/esm/packages/taco/src/components/Datepicker/useDatepicker.js.map +1 -1
- package/dist/taco.cjs.development.js +0 -6
- package/dist/taco.cjs.development.js.map +1 -1
- package/dist/taco.cjs.production.min.js +1 -1
- package/dist/taco.cjs.production.min.js.map +1 -1
- package/package.json +2 -2
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { useState, useEffect } from 'react';
|
|
2
2
|
import { useMergedRef } from '../../hooks/useMergedRef.js';
|
|
3
3
|
import { useLocalization } from '../Provider/Localization.js';
|
|
4
|
-
import { isMatch } from 'react-day-picker';
|
|
5
4
|
import { setInputValueByRef } from '../../utils/input.js';
|
|
6
5
|
import { format, parse, parseFromCustomString } from '../../utils/date.js';
|
|
7
6
|
|
|
@@ -20,7 +19,6 @@ const useDatepicker = ({
|
|
|
20
19
|
} = useLocalization();
|
|
21
20
|
const [internalValue, setInternalValue] = useState((_format = format(value, formatting.date)) !== null && _format !== void 0 ? _format : '');
|
|
22
21
|
const originalValueAsDate = parse(value);
|
|
23
|
-
const [invalid, setInvalid] = useState(false);
|
|
24
22
|
// update internal value if it changed 'externally'
|
|
25
23
|
useEffect(() => {
|
|
26
24
|
const formattedValue = format(value, formatting.date);
|
|
@@ -34,10 +32,6 @@ const useDatepicker = ({
|
|
|
34
32
|
const valueAsDate = parseFromCustomString(event.target.value, 'dd.mm.yy', originalValueAsDate === null || originalValueAsDate === void 0 ? void 0 : originalValueAsDate.getMonth(), originalValueAsDate === null || originalValueAsDate === void 0 ? void 0 : originalValueAsDate.getFullYear());
|
|
35
33
|
const formattedValue = valueAsDate ? format(valueAsDate) || '' : '';
|
|
36
34
|
event.target.value = formattedValue;
|
|
37
|
-
if (valueAsDate && calendar !== null && calendar !== void 0 && calendar.disabledDays) {
|
|
38
|
-
// setting invalid state if user manually write a disabled date.
|
|
39
|
-
setInvalid(isMatch(valueAsDate, calendar === null || calendar === void 0 ? void 0 : calendar.disabledDays));
|
|
40
|
-
}
|
|
41
35
|
if (onChange) {
|
|
42
36
|
event.detail = valueAsDate;
|
|
43
37
|
onChange(event);
|
|
@@ -68,7 +62,6 @@ const useDatepicker = ({
|
|
|
68
62
|
const inputProps = {
|
|
69
63
|
...props,
|
|
70
64
|
autoComplete: 'off',
|
|
71
|
-
invalid,
|
|
72
65
|
onBlur: handleInputBlur,
|
|
73
66
|
onChange: handleInputChange,
|
|
74
67
|
onKeyDown: handleKeyDown,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDatepicker.js","sources":["../../../../../../../src/components/Datepicker/useDatepicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"file":"useDatepicker.js","sources":["../../../../../../../src/components/Datepicker/useDatepicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { parseFromCustomString, format, parse } from '../../utils/date';\nimport { useLocalization } from '../Provider/Localization';\nimport { setInputValueByRef } from '../../utils/input';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { DatepickerProps } from './Datepicker';\nimport { CalendarProps } from '../Calendar/Calendar';\nimport { InputProps as BaseInputProps } from '../Input/Input';\n\ntype InputProps = BaseInputProps & { ref: React.RefObject<HTMLInputElement> };\ntype useDatepicker = React.HTMLAttributes<HTMLDivElement> & {\n calendar: CalendarProps;\n input: InputProps;\n};\n\nexport const useDatepicker = (\n { defaultValue: _, calendar, onBlur, onChange, value, ...props }: DatepickerProps,\n ref: React.Ref<HTMLInputElement>\n): useDatepicker => {\n const inputRef = useMergedRef<HTMLInputElement>(ref);\n const { formatting } = useLocalization();\n const [internalValue, setInternalValue] = React.useState(format(value, formatting.date) ?? '');\n const originalValueAsDate = parse(value);\n\n // update internal value if it changed 'externally'\n React.useEffect(() => {\n const formattedValue = format(value, formatting.date);\n\n if (formattedValue !== internalValue) {\n setInternalValue(formattedValue ?? '');\n }\n }, [value]);\n\n // event handlers\n const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n event.persist();\n\n const valueAsDate = parseFromCustomString(\n event.target.value,\n 'dd.mm.yy',\n originalValueAsDate?.getMonth(),\n originalValueAsDate?.getFullYear()\n );\n const formattedValue = valueAsDate ? format(valueAsDate) || '' : '';\n\n event.target.value = formattedValue;\n\n if (onChange) {\n (event as any).detail = valueAsDate;\n onChange(event);\n } else {\n // update the internal value to use the formatted date\n setInternalValue(formattedValue);\n }\n\n if (onBlur) {\n onBlur(event);\n }\n };\n\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n setInternalValue(event.target.value);\n };\n\n const handleChange = date => {\n setInputValueByRef(inputRef.current, format(date, formatting.date), 'focusout');\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (props.onKeyDown) {\n props.onKeyDown(event);\n }\n\n if (event.key === 'Enter') {\n event.target.dispatchEvent(new Event('focusout', { bubbles: true }));\n }\n };\n\n const inputProps: InputProps = {\n ...props,\n autoComplete: 'off',\n onBlur: handleInputBlur,\n onChange: handleInputChange,\n onKeyDown: handleKeyDown,\n ref: inputRef,\n type: 'text',\n value: internalValue,\n };\n\n const calendarProps: CalendarProps = {\n ...calendar,\n onChange: handleChange,\n value: originalValueAsDate,\n };\n\n return {\n input: inputProps,\n calendar: calendarProps,\n };\n};\n"],"names":["useDatepicker","defaultValue","_","calendar","onBlur","onChange","value","props","ref","inputRef","useMergedRef","formatting","useLocalization","internalValue","setInternalValue","React","_format","format","date","originalValueAsDate","parse","formattedValue","handleInputBlur","event","persist","valueAsDate","parseFromCustomString","target","getMonth","getFullYear","detail","handleInputChange","handleChange","setInputValueByRef","current","handleKeyDown","onKeyDown","key","dispatchEvent","Event","bubbles","inputProps","autoComplete","type","calendarProps","input"],"mappings":"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"}
|
|
@@ -6392,7 +6392,6 @@ const useDatepicker = ({
|
|
|
6392
6392
|
} = useLocalization();
|
|
6393
6393
|
const [internalValue, setInternalValue] = React.useState((_format = format(value, formatting.date)) !== null && _format !== void 0 ? _format : '');
|
|
6394
6394
|
const originalValueAsDate = parse(value);
|
|
6395
|
-
const [invalid, setInvalid] = React.useState(false);
|
|
6396
6395
|
// update internal value if it changed 'externally'
|
|
6397
6396
|
React.useEffect(() => {
|
|
6398
6397
|
const formattedValue = format(value, formatting.date);
|
|
@@ -6406,10 +6405,6 @@ const useDatepicker = ({
|
|
|
6406
6405
|
const valueAsDate = parseFromCustomString(event.target.value, 'dd.mm.yy', originalValueAsDate === null || originalValueAsDate === void 0 ? void 0 : originalValueAsDate.getMonth(), originalValueAsDate === null || originalValueAsDate === void 0 ? void 0 : originalValueAsDate.getFullYear());
|
|
6407
6406
|
const formattedValue = valueAsDate ? format(valueAsDate) || '' : '';
|
|
6408
6407
|
event.target.value = formattedValue;
|
|
6409
|
-
if (valueAsDate && calendar !== null && calendar !== void 0 && calendar.disabledDays) {
|
|
6410
|
-
// setting invalid state if user manually write a disabled date.
|
|
6411
|
-
setInvalid(reactDayPicker.isMatch(valueAsDate, calendar === null || calendar === void 0 ? void 0 : calendar.disabledDays));
|
|
6412
|
-
}
|
|
6413
6408
|
if (onChange) {
|
|
6414
6409
|
event.detail = valueAsDate;
|
|
6415
6410
|
onChange(event);
|
|
@@ -6440,7 +6435,6 @@ const useDatepicker = ({
|
|
|
6440
6435
|
const inputProps = {
|
|
6441
6436
|
...props,
|
|
6442
6437
|
autoComplete: 'off',
|
|
6443
|
-
invalid,
|
|
6444
6438
|
onBlur: handleInputBlur,
|
|
6445
6439
|
onChange: handleInputChange,
|
|
6446
6440
|
onKeyDown: handleKeyDown,
|