@economic/taco 2.42.1 → 2.43.1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/components/Datepicker/Datepicker.d.ts +2 -2
- package/dist/esm/packages/taco/src/components/Datepicker/Datepicker.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Datepicker/useDatepicker.js +10 -13
- package/dist/esm/packages/taco/src/components/Datepicker/useDatepicker.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/Columns/Cell/EditingControlCell.js +5 -4
- package/dist/esm/packages/taco/src/components/Table3/components/Columns/Cell/EditingControlCell.js.map +1 -1
- package/dist/esm/packages/taco/src/index.js +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/util/dataTypes.js +5 -15
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/util/dataTypes.js.map +1 -1
- package/dist/esm/packages/taco/src/utils/date.js +19 -7
- package/dist/esm/packages/taco/src/utils/date.js.map +1 -1
- package/dist/taco.cjs.development.js +35 -32
- 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/dist/utils/date.d.ts +2 -1
- package/package.json +2 -2
|
@@ -31,7 +31,7 @@ export declare type DatepickerProps = Omit<InputProps, 'value'> & {
|
|
|
31
31
|
* Date value of the calendar.
|
|
32
32
|
* This will be displayed in DatePicker's input in the format given to the [Provider](component:provider) component
|
|
33
33
|
*/
|
|
34
|
-
value?: Date;
|
|
34
|
+
value?: Date | string;
|
|
35
35
|
};
|
|
36
36
|
export declare const Datepicker: React.ForwardRefExoticComponent<Pick<InputProps, "prefix" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "enterKeyHint" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "required" | "size" | "src" | "step" | "type" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "highlighted" | "invalid" | "postfix" | "button" | "icon"> & {
|
|
37
37
|
/** [Calendar](component:calendar) component associated with the DatePicker */
|
|
@@ -46,5 +46,5 @@ export declare const Datepicker: React.ForwardRefExoticComponent<Pick<InputProps
|
|
|
46
46
|
* Date value of the calendar.
|
|
47
47
|
* This will be displayed in DatePicker's input in the format given to the [Provider](component:provider) component
|
|
48
48
|
*/
|
|
49
|
-
value?: Date | undefined;
|
|
49
|
+
value?: string | Date | undefined;
|
|
50
50
|
} & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Datepicker.js","sources":["../../../../../../../src/components/Datepicker/Datepicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Calendar, CalendarProps } from '../Calendar/Calendar';\nimport { Input, InputProps } from '../Input/Input';\nimport { useLocalization } from '../Provider/Localization';\nimport { useDatepicker } from './useDatepicker';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Popover } from '../Popover/Popover';\n\nexport type DatepickerTexts = {\n /** Aria-label for calendar */\n calendar: string;\n /** Clear button text */\n clear: string;\n /**\n * Aria-label for calendar icon button in the input.\n * Calendar will open when user clicks this icon button.\n */\n expand: string;\n /** Shortcut heading text */\n shortcuts: string;\n};\n\nexport type DatePickerShortcut = {\n onClick: (event: React.MouseEvent) => void;\n text: string;\n};\n\nexport type DatepickerProps = Omit<InputProps, 'value'> & {\n /** [Calendar](component:calendar) component associated with the DatePicker */\n calendar?: CalendarProps;\n /** List of shortcuts */\n shortcuts?: DatePickerShortcut[];\n /** Title for the shortcuts panel */\n shortcutsText?: string;\n /** Handler to be called when the clear button is clicked */\n onReset?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n /**\n * Date value of the calendar.\n * This will be displayed in DatePicker's input in the format given to the [Provider](component:provider) component\n */\n value?: Date;\n};\n\nexport const Datepicker = React.forwardRef(function Datepicker(props: DatepickerProps, ref: React.Ref<HTMLInputElement>) {\n const { className: externalClassName, onReset: handleReset, style, shortcuts, shortcutsText, ...otherProps } = props;\n const { calendar, input } = useDatepicker(otherProps, ref);\n const { texts } = useLocalization();\n const className = cn('inline-flex w-full text-black font-normal', externalClassName);\n\n const popoverContentRef = React.useRef<HTMLDivElement>(null);\n const handleOpenAutofocus = React.useCallback(\n (e: Event) => {\n e.preventDefault();\n\n const currentDay: HTMLButtonElement | null =\n popoverContentRef?.current?.querySelector('table button[name=\"day\"][aria-selected=\"true\"]') ?? null;\n currentDay?.focus();\n },\n [popoverContentRef]\n );\n\n return (\n <span className={className} data-taco=\"datepicker\" style={style}>\n <Input\n {...input}\n button={\n input.readOnly ? undefined : (\n <IconButton\n aria-label={texts.datepicker.expand}\n disabled={input.disabled || input.readOnly}\n icon=\"calendar\"\n tabIndex={-1}\n popover={props => (\n <Popover {...props}>\n <Popover.Content onOpenAutoFocus={handleOpenAutofocus}>\n {({ close }) => (\n <div\n className='[&_button[name=\"day\"]:focus]:yt-focus -m-3 flex'\n ref={popoverContentRef}>\n <Calendar\n {...calendar}\n onChange={(date: Date, event?: React.MouseEvent<Element>) => {\n calendar.onChange(date, event);\n close();\n }}\n />\n {shortcuts && (\n <div className=\"border-grey-300 flex flex-col border-l\">\n <span className=\"m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold\">\n {shortcutsText ?? texts.datepicker.shortcuts}\n </span>\n <ul>\n {shortcuts.map(shortcut => (\n <li key={shortcut.text}>\n <button\n type=\"button\"\n className=\"hover:wcag-grey-200 flex w-full items-start px-4 py-1 text-xs\"\n onClick={event => {\n event.persist();\n shortcut.onClick(event);\n close();\n }}>\n {shortcut.text}\n </button>\n </li>\n ))}\n </ul>\n {handleReset && (\n <button\n type=\"button\"\n className=\"mx-auto my-4 mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300\"\n onClick={event => {\n event.persist();\n handleReset(event);\n close();\n }}>\n {texts.datepicker.clear}\n </button>\n )}\n </div>\n )}\n </div>\n )}\n </Popover.Content>\n </Popover>\n )}\n tooltip={texts.datepicker.calendar}\n />\n )\n }\n />\n </span>\n );\n});\nDatepicker.displayName = 'Datepicker';\n"],"names":["Datepicker","React","props","ref","className","externalClassName","onReset","handleReset","style","shortcuts","shortcutsText","otherProps","calendar","input","useDatepicker","texts","useLocalization","cn","popoverContentRef","handleOpenAutofocus","e","preventDefault","currentDay","_popoverContentRef$cu","_popoverContentRef$cu2","current","querySelector","focus","Input","button","readOnly","undefined","IconButton","datepicker","expand","disabled","icon","tabIndex","popover","Popover","Content","onOpenAutoFocus","close","Calendar","onChange","date","event","map","shortcut","key","text","type","onClick","persist","clear","tooltip","displayName"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Datepicker.js","sources":["../../../../../../../src/components/Datepicker/Datepicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Calendar, CalendarProps } from '../Calendar/Calendar';\nimport { Input, InputProps } from '../Input/Input';\nimport { useLocalization } from '../Provider/Localization';\nimport { useDatepicker } from './useDatepicker';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Popover } from '../Popover/Popover';\n\nexport type DatepickerTexts = {\n /** Aria-label for calendar */\n calendar: string;\n /** Clear button text */\n clear: string;\n /**\n * Aria-label for calendar icon button in the input.\n * Calendar will open when user clicks this icon button.\n */\n expand: string;\n /** Shortcut heading text */\n shortcuts: string;\n};\n\nexport type DatePickerShortcut = {\n onClick: (event: React.MouseEvent) => void;\n text: string;\n};\n\nexport type DatepickerProps = Omit<InputProps, 'value'> & {\n /** [Calendar](component:calendar) component associated with the DatePicker */\n calendar?: CalendarProps;\n /** List of shortcuts */\n shortcuts?: DatePickerShortcut[];\n /** Title for the shortcuts panel */\n shortcutsText?: string;\n /** Handler to be called when the clear button is clicked */\n onReset?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n /**\n * Date value of the calendar.\n * This will be displayed in DatePicker's input in the format given to the [Provider](component:provider) component\n */\n value?: Date | string;\n};\n\nexport const Datepicker = React.forwardRef(function Datepicker(props: DatepickerProps, ref: React.Ref<HTMLInputElement>) {\n const { className: externalClassName, onReset: handleReset, style, shortcuts, shortcutsText, ...otherProps } = props;\n const { calendar, input } = useDatepicker(otherProps, ref);\n const { texts } = useLocalization();\n const className = cn('inline-flex w-full text-black font-normal', externalClassName);\n\n const popoverContentRef = React.useRef<HTMLDivElement>(null);\n const handleOpenAutofocus = React.useCallback(\n (e: Event) => {\n e.preventDefault();\n\n const currentDay: HTMLButtonElement | null =\n popoverContentRef?.current?.querySelector('table button[name=\"day\"][aria-selected=\"true\"]') ?? null;\n currentDay?.focus();\n },\n [popoverContentRef]\n );\n\n return (\n <span className={className} data-taco=\"datepicker\" style={style}>\n <Input\n {...input}\n button={\n input.readOnly ? undefined : (\n <IconButton\n aria-label={texts.datepicker.expand}\n disabled={input.disabled || input.readOnly}\n icon=\"calendar\"\n tabIndex={-1}\n popover={props => (\n <Popover {...props}>\n <Popover.Content onOpenAutoFocus={handleOpenAutofocus}>\n {({ close }) => (\n <div\n className='[&_button[name=\"day\"]:focus]:yt-focus -m-3 flex'\n ref={popoverContentRef}>\n <Calendar\n {...calendar}\n onChange={(date: Date, event?: React.MouseEvent<Element>) => {\n calendar.onChange(date, event);\n close();\n }}\n />\n {shortcuts && (\n <div className=\"border-grey-300 flex flex-col border-l\">\n <span className=\"m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold\">\n {shortcutsText ?? texts.datepicker.shortcuts}\n </span>\n <ul>\n {shortcuts.map(shortcut => (\n <li key={shortcut.text}>\n <button\n type=\"button\"\n className=\"hover:wcag-grey-200 flex w-full items-start px-4 py-1 text-xs\"\n onClick={event => {\n event.persist();\n shortcut.onClick(event);\n close();\n }}>\n {shortcut.text}\n </button>\n </li>\n ))}\n </ul>\n {handleReset && (\n <button\n type=\"button\"\n className=\"mx-auto my-4 mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300\"\n onClick={event => {\n event.persist();\n handleReset(event);\n close();\n }}>\n {texts.datepicker.clear}\n </button>\n )}\n </div>\n )}\n </div>\n )}\n </Popover.Content>\n </Popover>\n )}\n tooltip={texts.datepicker.calendar}\n />\n )\n }\n />\n </span>\n );\n});\nDatepicker.displayName = 'Datepicker';\n"],"names":["Datepicker","React","props","ref","className","externalClassName","onReset","handleReset","style","shortcuts","shortcutsText","otherProps","calendar","input","useDatepicker","texts","useLocalization","cn","popoverContentRef","handleOpenAutofocus","e","preventDefault","currentDay","_popoverContentRef$cu","_popoverContentRef$cu2","current","querySelector","focus","Input","button","readOnly","undefined","IconButton","datepicker","expand","disabled","icon","tabIndex","popover","Popover","Content","onOpenAutoFocus","close","Calendar","onChange","date","event","map","shortcut","key","text","type","onClick","persist","clear","tooltip","displayName"],"mappings":"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"}
|
|
@@ -2,8 +2,7 @@ import { useState, useEffect } from 'react';
|
|
|
2
2
|
import { useMergedRef } from '../../hooks/useMergedRef.js';
|
|
3
3
|
import { useLocalization } from '../Provider/Localization.js';
|
|
4
4
|
import { setInputValueByRef } from '../../utils/input.js';
|
|
5
|
-
import {
|
|
6
|
-
import { format, parseFromCustomString } from '../../utils/date.js';
|
|
5
|
+
import { format, parse, parseFromCustomString } from '../../utils/date.js';
|
|
7
6
|
|
|
8
7
|
const useDatepicker = ({
|
|
9
8
|
defaultValue: _,
|
|
@@ -13,26 +12,24 @@ const useDatepicker = ({
|
|
|
13
12
|
value,
|
|
14
13
|
...props
|
|
15
14
|
}, ref) => {
|
|
15
|
+
var _format;
|
|
16
16
|
const inputRef = useMergedRef(ref);
|
|
17
17
|
const {
|
|
18
18
|
formatting
|
|
19
19
|
} = useLocalization();
|
|
20
|
-
const [internalValue, setInternalValue] = useState(
|
|
20
|
+
const [internalValue, setInternalValue] = useState((_format = format(value, formatting.date)) !== null && _format !== void 0 ? _format : '');
|
|
21
|
+
const originalValueAsDate = parse(value);
|
|
21
22
|
// update internal value if it changed 'externally'
|
|
22
23
|
useEffect(() => {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
setInternalValue(formattedValue);
|
|
27
|
-
}
|
|
28
|
-
} else {
|
|
29
|
-
setInternalValue('');
|
|
24
|
+
const formattedValue = format(value, formatting.date);
|
|
25
|
+
if (formattedValue !== internalValue) {
|
|
26
|
+
setInternalValue(formattedValue !== null && formattedValue !== void 0 ? formattedValue : '');
|
|
30
27
|
}
|
|
31
28
|
}, [value]);
|
|
32
29
|
// event handlers
|
|
33
30
|
const handleInputBlur = event => {
|
|
34
31
|
event.persist();
|
|
35
|
-
const valueAsDate = parseFromCustomString(event.target.value, 'dd.mm.yy',
|
|
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());
|
|
36
33
|
const formattedValue = valueAsDate ? format(valueAsDate) || '' : '';
|
|
37
34
|
event.target.value = formattedValue;
|
|
38
35
|
if (onChange) {
|
|
@@ -56,7 +53,7 @@ const useDatepicker = ({
|
|
|
56
53
|
if (props.onKeyDown) {
|
|
57
54
|
props.onKeyDown(event);
|
|
58
55
|
}
|
|
59
|
-
if (
|
|
56
|
+
if (event.key === 'Enter') {
|
|
60
57
|
event.target.dispatchEvent(new Event('focusout', {
|
|
61
58
|
bubbles: true
|
|
62
59
|
}));
|
|
@@ -75,7 +72,7 @@ const useDatepicker = ({
|
|
|
75
72
|
const calendarProps = {
|
|
76
73
|
...calendar,
|
|
77
74
|
onChange: handleChange,
|
|
78
|
-
value
|
|
75
|
+
value: originalValueAsDate
|
|
79
76
|
};
|
|
80
77
|
return {
|
|
81
78
|
input: inputProps,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDatepicker.js","sources":["../../../../../../../src/components/Datepicker/useDatepicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { parseFromCustomString, format } 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';\
|
|
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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"}
|
package/dist/esm/packages/taco/src/components/Table3/components/Columns/Cell/EditingControlCell.js
CHANGED
|
@@ -3,7 +3,7 @@ import { isElementInsideOrTriggeredFromContainer } from '../../../../../utils/do
|
|
|
3
3
|
import { isPressingMetaKey } from '../../../../../utils/keyboard.js';
|
|
4
4
|
import { Input } from '../../../../Input/Input.js';
|
|
5
5
|
import { isDate } from 'date-fns';
|
|
6
|
-
import { isWeakEqual } from '../../../../../utils/date.js';
|
|
6
|
+
import { parse, isWeakEqual } from '../../../../../utils/date.js';
|
|
7
7
|
import { Datepicker } from '../../../../Datepicker/Datepicker.js';
|
|
8
8
|
import { Field } from '../../../../Field/Field.js';
|
|
9
9
|
import { Switch } from '../../../../Switch/Switch.js';
|
|
@@ -170,10 +170,11 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
|
|
|
170
170
|
}
|
|
171
171
|
};
|
|
172
172
|
if (type === 'datepicker') {
|
|
173
|
+
const valueAsDate = parse(value);
|
|
173
174
|
const handleChange = event => {
|
|
174
175
|
const newDate = event.detail;
|
|
175
|
-
if (!
|
|
176
|
-
props.onChange(
|
|
176
|
+
if (!valueAsDate || !newDate || isDate(valueAsDate) && isDate(newDate) && !isWeakEqual(valueAsDate, newDate)) {
|
|
177
|
+
props.onChange(newDate);
|
|
177
178
|
}
|
|
178
179
|
};
|
|
179
180
|
return /*#__PURE__*/React__default.createElement(Datepicker, Object.assign({}, commonProps, {
|
|
@@ -182,7 +183,7 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
|
|
|
182
183
|
onFocus: handleFocus,
|
|
183
184
|
onKeyDown: handleInputKeyDown,
|
|
184
185
|
ref: controlRef,
|
|
185
|
-
value:
|
|
186
|
+
value: valueAsDate
|
|
186
187
|
}));
|
|
187
188
|
}
|
|
188
189
|
if (type === 'textarea') {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditingControlCell.js","sources":["../../../../../../../../../../src/components/Table3/components/Columns/Cell/EditingControlCell.tsx"],"sourcesContent":["import React from 'react';\nimport { TableMeta as ReactTableMeta, ColumnMeta as ReactTableColumnMeta } from '@tanstack/react-table';\nimport { isDate } from 'date-fns';\nimport { Datepicker } from '../../../../Datepicker/Datepicker';\nimport { Switch } from '../../../../Switch/Switch';\nimport { Input } from '../../../../Input/Input';\nimport { TableColumnDataType, TableColumnRendererControl, TableFontSize } from '../../../../../primitives/Table/types';\nimport { isWeakEqual as isWeakEqualDate } from '../../../../../utils/date';\nimport { RowMoveIndicator } from './Editing/RowMoveIndicator';\nimport { TextareaWithAutosizing } from './Editing/TextareaWithAutosizing';\nimport { Field } from '../../../../Field/Field';\nimport { isElementInsideOrTriggeredFromContainer } from '../../../../../utils/dom';\nimport { TableCellRendererProps } from '../../../../../primitives/Table/Core/types';\nimport { RowContext } from '../../../../../primitives/Table/Core/components/Row/RowContext';\nimport { getCellAttributes } from '../../../../../primitives/Table/Core/components/Columns/Cell/util';\nimport { useEditingCellAutofocus } from './util';\nimport { isPressingMetaKey } from '../../../../../utils/keyboard';\n\nexport function EditingControlCell<TType = unknown>(props: TableCellRendererProps<TType>) {\n const { cell, cellRef, isHighlighted, index } = props;\n const { rowIndex } = React.useContext(RowContext);\n const tableMeta = cell.getContext().table.options.meta as ReactTableMeta<TType>;\n const columnMeta = cell.column.columnDef.meta as ReactTableColumnMeta<TType, unknown>;\n const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;\n\n const handleFocus = useEditingCellAutofocus<TType>(props);\n\n const handleBlur = () => {\n tableMeta.editing.toggleDetailedMode(false);\n tableMeta.editing.validateCell(cell);\n };\n\n // ensure that blur runs when the cell gets unmounted (when vertically arrow key navigating)\n React.useEffect(() => {\n const ref = cellRef.current;\n\n return () => {\n if (document.activeElement === ref || isElementInsideOrTriggeredFromContainer(document.activeElement, ref)) {\n handleBlur();\n }\n };\n }, []);\n\n const error = tableMeta.editing.getCellError<TType>(cell);\n\n const controlProps = {\n dataType: columnMeta.dataType,\n fontSize: tableMeta.fontSize.size,\n id: cell.column.id,\n invalid: !!error,\n isDetailedMode: tableMeta.editing.isDetailedMode,\n isTruncated: !!columnMeta.enableTruncate,\n onBlur: handleBlur,\n onChange: (value: unknown) => tableMeta.editing.setCellValue(cell, value, rowIndex),\n row: cell.row.original,\n tabIndex: isActiveRow ? 0 : -1,\n toggleEditing: tableMeta.editing.toggleEditing,\n toggleDetailedMode: tableMeta.editing.toggleDetailedMode,\n type: columnMeta.control ?? 'input',\n value: cell.getValue(),\n };\n\n const cellAttributes = {\n ...getCellAttributes(cell, index, isHighlighted),\n 'data-cell-editing-invalid': error ? true : undefined,\n 'data-taco': 'cell-control',\n onFocus: handleFocus,\n ref: cellRef,\n tabIndex: -1,\n };\n\n return (\n <td {...cellAttributes}>\n <Field invalid={!!error} message={error}>\n <MemoedEditingCell<TType> {...controlProps} />\n </Field>\n {\n // we show row move indicator here within the cell rather than the row because it is\n // an editing only feature, and we don't want to leak editing into the shared row component\n }\n <RowMoveIndicator cell={cell} cellRef={cellRef} isActiveRow={isActiveRow} />\n </td>\n );\n}\n\ntype MemoedEditingCellProps<TType = unknown, TValue = unknown> = {\n dataType?: TableColumnDataType;\n fontSize: TableFontSize;\n id: string;\n invalid: boolean;\n isDetailedMode: boolean;\n isTruncated: boolean;\n onBlur: () => void;\n onChange: (value: TValue) => void;\n row: TType;\n tabIndex?: number;\n toggleEditing: (editing: React.SetStateAction<boolean>) => void;\n toggleDetailedMode: (detailed: React.SetStateAction<boolean>) => void;\n type: TableColumnRendererControl<TType>;\n value: TValue;\n};\n\nconst MemoedEditingCell = React.memo(function MemoedEditingCell<TType = unknown>(props: MemoedEditingCellProps<TType>) {\n const {\n dataType,\n fontSize,\n id,\n invalid,\n isDetailedMode,\n isTruncated,\n onBlur,\n onChange,\n row,\n tabIndex = -1,\n toggleEditing,\n toggleDetailedMode,\n type = 'input',\n value,\n } = props;\n const controlRef = React.useRef<HTMLElement>(null);\n const currentValue = row[id];\n const commonProps = {\n onBlur,\n ref: controlRef,\n tabIndex,\n };\n\n if (typeof type === 'function') {\n const controlFnProps = {\n ...commonProps,\n invalid,\n setValue: onChange,\n value,\n };\n return type(controlFnProps, row);\n }\n\n if (type === 'switch') {\n return (\n <Switch\n {...commonProps}\n checked={Boolean(value)}\n onChange={onChange}\n ref={controlRef as React.RefObject<HTMLButtonElement>}\n />\n );\n }\n\n const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n const target = event.target as HTMLInputElement | HTMLTextAreaElement;\n\n if (target.readOnly) {\n return;\n }\n\n // prevent active row navigation while in detailed mode\n if (\n isDetailedMode &&\n (event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'ArrowLeft' || event.key === 'ArrowRight')\n ) {\n event.stopPropagation();\n }\n\n // enter or exit detail mode when pressing enter\n if (event.key === 'Enter') {\n // textareas support shift and enter, don't prevent default in that case\n if (event.shiftKey && isDetailedMode) {\n return;\n }\n\n event.preventDefault();\n\n if (isDetailedMode) {\n target.select?.();\n } else {\n target.setSelectionRange?.(target.value?.length, target.value?.length);\n }\n\n toggleDetailedMode(editing => !editing);\n return;\n }\n\n // reset the value, or exit edit mode when pressing escape\n if (event.key === 'Escape') {\n event.preventDefault();\n\n if (isDetailedMode) {\n toggleDetailedMode(false);\n\n if (value !== currentValue) {\n props.onChange(currentValue);\n }\n\n // have to let onChange run before selecting, otherwise the value changes\n requestAnimationFrame(() => target.select?.());\n } else {\n toggleEditing(false);\n }\n\n return;\n }\n\n // toggle into detailed mode when actually inputting something\n if (!isPressingMetaKey(event) && (/^[a-z0-9]$/i.test(event.key) || event.key === 'Backspace')) {\n toggleDetailedMode(true);\n }\n };\n\n const handleFocus = (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n if (!isDetailedMode) {\n event.target.select();\n }\n };\n\n if (type === 'datepicker') {\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n const newDate = (event as any).detail;\n\n if (!value || !newDate || (isDate(value) && isDate(newDate) && !isWeakEqualDate(value as Date, newDate as Date))) {\n props.onChange((event as any).detail);\n }\n };\n\n return (\n <Datepicker\n {...commonProps}\n invalid={invalid}\n onChange={handleChange}\n onFocus={handleFocus}\n onKeyDown={handleInputKeyDown}\n ref={controlRef as React.RefObject<HTMLInputElement>}\n value={value as Date}\n />\n );\n }\n\n if (type === 'textarea') {\n const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n onChange(event.target.value);\n };\n\n return (\n <TextareaWithAutosizing\n {...commonProps}\n fontSize={fontSize}\n invalid={invalid}\n isTruncated={isTruncated}\n onChange={handleChange}\n onFocus={handleFocus}\n onKeyDown={handleInputKeyDown}\n ref={controlRef as React.RefObject<HTMLTextAreaElement>}\n value={String(value ?? '')}\n />\n );\n }\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n onChange(dataType === 'number' && event.target.value ? Number.parseInt(event.target.value) : event.target.value);\n };\n\n return (\n <Input\n {...commonProps}\n invalid={invalid}\n onChange={handleChange}\n onFocus={handleFocus}\n onKeyDown={handleInputKeyDown}\n ref={controlRef as React.RefObject<HTMLInputElement>}\n type={dataType === 'number' ? 'number' : undefined}\n value={dataType === 'number' ? (value as number) : String(value ?? '')}\n />\n );\n}) as <TType = unknown>(props: MemoedEditingCellProps<TType>) => JSX.Element;\n"],"names":["EditingControlCell","props","cell","cellRef","isHighlighted","index","rowIndex","React","useContext","RowContext","tableMeta","getContext","table","options","meta","columnMeta","column","columnDef","isActiveRow","rowActive","rowActiveIndex","handleFocus","useEditingCellAutofocus","handleBlur","editing","toggleDetailedMode","validateCell","useEffect","ref","current","document","activeElement","isElementInsideOrTriggeredFromContainer","error","getCellError","controlProps","dataType","fontSize","size","id","invalid","isDetailedMode","isTruncated","enableTruncate","onBlur","onChange","value","setCellValue","row","original","tabIndex","toggleEditing","type","_columnMeta$control","control","getValue","cellAttributes","getCellAttributes","undefined","onFocus","Field","message","MemoedEditingCell","RowMoveIndicator","memo","controlRef","useRef","currentValue","commonProps","controlFnProps","setValue","Switch","checked","Boolean","handleInputKeyDown","event","target","readOnly","key","stopPropagation","shiftKey","preventDefault","_target$select","select","call","_target$setSelectionR","_target$value","_target$value2","setSelectionRange","length","requestAnimationFrame","_target$select2","isPressingMetaKey","test","handleChange","newDate","detail","isDate","isWeakEqualDate","Datepicker","onKeyDown","TextareaWithAutosizing","String","Number","parseInt","Input"],"mappings":";;;;;;;;;;;;;;;SAkBgBA,kBAAkBA,CAAkBC,KAAoC;;EACpF,MAAM;IAAEC,IAAI;IAAEC,OAAO;IAAEC,aAAa;IAAEC;GAAO,GAAGJ,KAAK;EACrD,MAAM;IAAEK;GAAU,GAAGC,cAAK,CAACC,UAAU,CAACC,UAAU,CAAC;EACjD,MAAMC,SAAS,GAAGR,IAAI,CAACS,UAAU,EAAE,CAACC,KAAK,CAACC,OAAO,CAACC,IAA6B;EAC/E,MAAMC,UAAU,GAAGb,IAAI,CAACc,MAAM,CAACC,SAAS,CAACH,IAA4C;EACrF,MAAMI,WAAW,GAAGR,SAAS,CAACS,SAAS,CAACC,cAAc,KAAKd,QAAQ;EAEnE,MAAMe,WAAW,GAAGC,uBAAuB,CAAQrB,KAAK,CAAC;EAEzD,MAAMsB,UAAU,GAAGA;IACfb,SAAS,CAACc,OAAO,CAACC,kBAAkB,CAAC,KAAK,CAAC;IAC3Cf,SAAS,CAACc,OAAO,CAACE,YAAY,CAACxB,IAAI,CAAC;GACvC;;EAGDK,cAAK,CAACoB,SAAS,CAAC;IACZ,MAAMC,GAAG,GAAGzB,OAAO,CAAC0B,OAAO;IAE3B,OAAO;MACH,IAAIC,QAAQ,CAACC,aAAa,KAAKH,GAAG,IAAII,uCAAuC,CAACF,QAAQ,CAACC,aAAa,EAAEH,GAAG,CAAC,EAAE;QACxGL,UAAU,EAAE;;KAEnB;GACJ,EAAE,EAAE,CAAC;EAEN,MAAMU,KAAK,GAAGvB,SAAS,CAACc,OAAO,CAACU,YAAY,CAAQhC,IAAI,CAAC;EAEzD,MAAMiC,YAAY,GAAG;IACjBC,QAAQ,EAAErB,UAAU,CAACqB,QAAQ;IAC7BC,QAAQ,EAAE3B,SAAS,CAAC2B,QAAQ,CAACC,IAAI;IACjCC,EAAE,EAAErC,IAAI,CAACc,MAAM,CAACuB,EAAE;IAClBC,OAAO,EAAE,CAAC,CAACP,KAAK;IAChBQ,cAAc,EAAE/B,SAAS,CAACc,OAAO,CAACiB,cAAc;IAChDC,WAAW,EAAE,CAAC,CAAC3B,UAAU,CAAC4B,cAAc;IACxCC,MAAM,EAAErB,UAAU;IAClBsB,QAAQ,EAAGC,KAAc,IAAKpC,SAAS,CAACc,OAAO,CAACuB,YAAY,CAAC7C,IAAI,EAAE4C,KAAK,EAAExC,QAAQ,CAAC;IACnF0C,GAAG,EAAE9C,IAAI,CAAC8C,GAAG,CAACC,QAAQ;IACtBC,QAAQ,EAAEhC,WAAW,GAAG,CAAC,GAAG,CAAC,CAAC;IAC9BiC,aAAa,EAAEzC,SAAS,CAACc,OAAO,CAAC2B,aAAa;IAC9C1B,kBAAkB,EAAEf,SAAS,CAACc,OAAO,CAACC,kBAAkB;IACxD2B,IAAI,GAAAC,mBAAA,GAAEtC,UAAU,CAACuC,OAAO,cAAAD,mBAAA,cAAAA,mBAAA,GAAI,OAAO;IACnCP,KAAK,EAAE5C,IAAI,CAACqD,QAAQ;GACvB;EAED,MAAMC,cAAc,GAAG;IACnB,GAAGC,iBAAiB,CAACvD,IAAI,EAAEG,KAAK,EAAED,aAAa,CAAC;IAChD,2BAA2B,EAAE6B,KAAK,GAAG,IAAI,GAAGyB,SAAS;IACrD,WAAW,EAAE,cAAc;IAC3BC,OAAO,EAAEtC,WAAW;IACpBO,GAAG,EAAEzB,OAAO;IACZ+C,QAAQ,EAAE,CAAC;GACd;EAED,oBACI3C,qDAAQiD,cAAc,gBAClBjD,6BAACqD,KAAK;IAACpB,OAAO,EAAE,CAAC,CAACP,KAAK;IAAE4B,OAAO,EAAE5B;kBAC9B1B,6BAACuD,iBAAiB,oBAAY3B,YAAY,EAAI,CAC1C,eAKR5B,6BAACwD,gBAAgB;IAAC7D,IAAI,EAAEA,IAAI;IAAEC,OAAO,EAAEA,OAAO;IAAEe,WAAW,EAAEA;IAAe,CAC3E;AAEb;AAmBA,MAAM4C,iBAAiB,gBAAGvD,cAAK,CAACyD,IAAI,CAAC,SAASF,iBAAiBA,CAAkB7D,KAAoC;EACjH,MAAM;IACFmC,QAAQ;IACRC,QAAQ;IACRE,EAAE;IACFC,OAAO;IACPC,cAAc;IACdC,WAAW;IACXE,MAAM;IACNC,QAAQ;IACRG,GAAG;IACHE,QAAQ,GAAG,CAAC,CAAC;IACbC,aAAa;IACb1B,kBAAkB;IAClB2B,IAAI,GAAG,OAAO;IACdN;GACH,GAAG7C,KAAK;EACT,MAAMgE,UAAU,GAAG1D,cAAK,CAAC2D,MAAM,CAAc,IAAI,CAAC;EAClD,MAAMC,YAAY,GAAGnB,GAAG,CAACT,EAAE,CAAC;EAC5B,MAAM6B,WAAW,GAAG;IAChBxB,MAAM;IACNhB,GAAG,EAAEqC,UAAU;IACff;GACH;EAED,IAAI,OAAOE,IAAI,KAAK,UAAU,EAAE;IAC5B,MAAMiB,cAAc,GAAG;MACnB,GAAGD,WAAW;MACd5B,OAAO;MACP8B,QAAQ,EAAEzB,QAAQ;MAClBC;KACH;IACD,OAAOM,IAAI,CAACiB,cAAc,EAAErB,GAAG,CAAC;;EAGpC,IAAII,IAAI,KAAK,QAAQ,EAAE;IACnB,oBACI7C,6BAACgE,MAAM,oBACCH,WAAW;MACfI,OAAO,EAAEC,OAAO,CAAC3B,KAAK,CAAC;MACvBD,QAAQ,EAAEA,QAAQ;MAClBjB,GAAG,EAAEqC;OACP;;EAIV,MAAMS,kBAAkB,GAAIC,KAAkE;IAC1F,MAAMC,MAAM,GAAGD,KAAK,CAACC,MAAgD;IAErE,IAAIA,MAAM,CAACC,QAAQ,EAAE;MACjB;;;IAIJ,IACIpC,cAAc,KACbkC,KAAK,CAACG,GAAG,KAAK,SAAS,IAAIH,KAAK,CAACG,GAAG,KAAK,WAAW,IAAIH,KAAK,CAACG,GAAG,KAAK,WAAW,IAAIH,KAAK,CAACG,GAAG,KAAK,YAAY,CAAC,EACnH;MACEH,KAAK,CAACI,eAAe,EAAE;;;IAI3B,IAAIJ,KAAK,CAACG,GAAG,KAAK,OAAO,EAAE;;MAEvB,IAAIH,KAAK,CAACK,QAAQ,IAAIvC,cAAc,EAAE;QAClC;;MAGJkC,KAAK,CAACM,cAAc,EAAE;MAEtB,IAAIxC,cAAc,EAAE;QAAA,IAAAyC,cAAA;QAChB,CAAAA,cAAA,GAAAN,MAAM,CAACO,MAAM,cAAAD,cAAA,uBAAbA,cAAA,CAAAE,IAAA,CAAAR,OAAiB;OACpB,MAAM;QAAA,IAAAS,qBAAA,EAAAC,aAAA,EAAAC,cAAA;QACH,CAAAF,qBAAA,GAAAT,MAAM,CAACY,iBAAiB,cAAAH,qBAAA,uBAAxBA,qBAAA,CAAAD,IAAA,CAAAR,MAAM,GAAAU,aAAA,GAAqBV,MAAM,CAAC9B,KAAK,cAAAwC,aAAA,uBAAZA,aAAA,CAAcG,MAAM,GAAAF,cAAA,GAAEX,MAAM,CAAC9B,KAAK,cAAAyC,cAAA,uBAAZA,cAAA,CAAcE,MAAM,CAAC;;MAG1EhE,kBAAkB,CAACD,OAAO,IAAI,CAACA,OAAO,CAAC;MACvC;;;IAIJ,IAAImD,KAAK,CAACG,GAAG,KAAK,QAAQ,EAAE;MACxBH,KAAK,CAACM,cAAc,EAAE;MAEtB,IAAIxC,cAAc,EAAE;QAChBhB,kBAAkB,CAAC,KAAK,CAAC;QAEzB,IAAIqB,KAAK,KAAKqB,YAAY,EAAE;UACxBlE,KAAK,CAAC4C,QAAQ,CAACsB,YAAY,CAAC;;;QAIhCuB,qBAAqB,CAAC;UAAA,IAAAC,eAAA;UAAA,QAAAA,eAAA,GAAMf,MAAM,CAACO,MAAM,cAAAQ,eAAA,uBAAbA,eAAA,CAAAP,IAAA,CAAAR,OAAiB;UAAC;OACjD,MAAM;QACHzB,aAAa,CAAC,KAAK,CAAC;;MAGxB;;;IAIJ,IAAI,CAACyC,iBAAiB,CAACjB,KAAK,CAAC,KAAK,aAAa,CAACkB,IAAI,CAAClB,KAAK,CAACG,GAAG,CAAC,IAAIH,KAAK,CAACG,GAAG,KAAK,WAAW,CAAC,EAAE;MAC3FrD,kBAAkB,CAAC,IAAI,CAAC;;GAE/B;EAED,MAAMJ,WAAW,GAAIsD,KAA+D;IAChF,IAAI,CAAClC,cAAc,EAAE;MACjBkC,KAAK,CAACC,MAAM,CAACO,MAAM,EAAE;;GAE5B;EAED,IAAI/B,IAAI,KAAK,YAAY,EAAE;IACvB,MAAM0C,YAAY,GAAInB,KAA0C;MAC5D,MAAMoB,OAAO,GAAIpB,KAAa,CAACqB,MAAM;MAErC,IAAI,CAAClD,KAAK,IAAI,CAACiD,OAAO,IAAKE,MAAM,CAACnD,KAAK,CAAC,IAAImD,MAAM,CAACF,OAAO,CAAC,IAAI,CAACG,WAAe,CAACpD,KAAa,EAAEiD,OAAe,CAAE,EAAE;QAC9G9F,KAAK,CAAC4C,QAAQ,CAAE8B,KAAa,CAACqB,MAAM,CAAC;;KAE5C;IAED,oBACIzF,6BAAC4F,UAAU,oBACH/B,WAAW;MACf5B,OAAO,EAAEA,OAAO;MAChBK,QAAQ,EAAEiD,YAAY;MACtBnC,OAAO,EAAEtC,WAAW;MACpB+E,SAAS,EAAE1B,kBAAkB;MAC7B9C,GAAG,EAAEqC,UAA+C;MACpDnB,KAAK,EAAEA;OACT;;EAIV,IAAIM,IAAI,KAAK,UAAU,EAAE;IACrB,MAAM0C,YAAY,GAAInB,KAA6C;MAC/D9B,QAAQ,CAAC8B,KAAK,CAACC,MAAM,CAAC9B,KAAK,CAAC;KAC/B;IAED,oBACIvC,6BAAC8F,sBAAsB,oBACfjC,WAAW;MACf/B,QAAQ,EAAEA,QAAQ;MAClBG,OAAO,EAAEA,OAAO;MAChBE,WAAW,EAAEA,WAAW;MACxBG,QAAQ,EAAEiD,YAAY;MACtBnC,OAAO,EAAEtC,WAAW;MACpB+E,SAAS,EAAE1B,kBAAkB;MAC7B9C,GAAG,EAAEqC,UAAkD;MACvDnB,KAAK,EAAEwD,MAAM,CAACxD,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,EAAE;OAC3B;;EAIV,MAAMgD,YAAY,GAAInB,KAA0C;IAC5D9B,QAAQ,CAACT,QAAQ,KAAK,QAAQ,IAAIuC,KAAK,CAACC,MAAM,CAAC9B,KAAK,GAAGyD,MAAM,CAACC,QAAQ,CAAC7B,KAAK,CAACC,MAAM,CAAC9B,KAAK,CAAC,GAAG6B,KAAK,CAACC,MAAM,CAAC9B,KAAK,CAAC;GACnH;EAED,oBACIvC,6BAACkG,KAAK,oBACErC,WAAW;IACf5B,OAAO,EAAEA,OAAO;IAChBK,QAAQ,EAAEiD,YAAY;IACtBnC,OAAO,EAAEtC,WAAW;IACpB+E,SAAS,EAAE1B,kBAAkB;IAC7B9C,GAAG,EAAEqC,UAA+C;IACpDb,IAAI,EAAEhB,QAAQ,KAAK,QAAQ,GAAG,QAAQ,GAAGsB,SAAS;IAClDZ,KAAK,EAAEV,QAAQ,KAAK,QAAQ,GAAIU,KAAgB,GAAGwD,MAAM,CAACxD,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,EAAE;KACvE;AAEV,CAAC,CAA2E;;;;"}
|
|
1
|
+
{"version":3,"file":"EditingControlCell.js","sources":["../../../../../../../../../../src/components/Table3/components/Columns/Cell/EditingControlCell.tsx"],"sourcesContent":["import React from 'react';\nimport { TableMeta as ReactTableMeta, ColumnMeta as ReactTableColumnMeta } from '@tanstack/react-table';\nimport { isDate } from 'date-fns';\nimport { Datepicker } from '../../../../Datepicker/Datepicker';\nimport { Switch } from '../../../../Switch/Switch';\nimport { Input } from '../../../../Input/Input';\nimport { TableColumnDataType, TableColumnRendererControl, TableFontSize } from '../../../../../primitives/Table/types';\nimport * as date from '../../../../../utils/date';\nimport { RowMoveIndicator } from './Editing/RowMoveIndicator';\nimport { TextareaWithAutosizing } from './Editing/TextareaWithAutosizing';\nimport { Field } from '../../../../Field/Field';\nimport { isElementInsideOrTriggeredFromContainer } from '../../../../../utils/dom';\nimport { TableCellRendererProps } from '../../../../../primitives/Table/Core/types';\nimport { RowContext } from '../../../../../primitives/Table/Core/components/Row/RowContext';\nimport { getCellAttributes } from '../../../../../primitives/Table/Core/components/Columns/Cell/util';\nimport { useEditingCellAutofocus } from './util';\nimport { isPressingMetaKey } from '../../../../../utils/keyboard';\n\nexport function EditingControlCell<TType = unknown>(props: TableCellRendererProps<TType>) {\n const { cell, cellRef, isHighlighted, index } = props;\n const { rowIndex } = React.useContext(RowContext);\n const tableMeta = cell.getContext().table.options.meta as ReactTableMeta<TType>;\n const columnMeta = cell.column.columnDef.meta as ReactTableColumnMeta<TType, unknown>;\n const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;\n\n const handleFocus = useEditingCellAutofocus<TType>(props);\n\n const handleBlur = () => {\n tableMeta.editing.toggleDetailedMode(false);\n tableMeta.editing.validateCell(cell);\n };\n\n // ensure that blur runs when the cell gets unmounted (when vertically arrow key navigating)\n React.useEffect(() => {\n const ref = cellRef.current;\n\n return () => {\n if (document.activeElement === ref || isElementInsideOrTriggeredFromContainer(document.activeElement, ref)) {\n handleBlur();\n }\n };\n }, []);\n\n const error = tableMeta.editing.getCellError<TType>(cell);\n\n const controlProps = {\n dataType: columnMeta.dataType,\n fontSize: tableMeta.fontSize.size,\n id: cell.column.id,\n invalid: !!error,\n isDetailedMode: tableMeta.editing.isDetailedMode,\n isTruncated: !!columnMeta.enableTruncate,\n onBlur: handleBlur,\n onChange: (value: unknown) => tableMeta.editing.setCellValue(cell, value, rowIndex),\n row: cell.row.original,\n tabIndex: isActiveRow ? 0 : -1,\n toggleEditing: tableMeta.editing.toggleEditing,\n toggleDetailedMode: tableMeta.editing.toggleDetailedMode,\n type: columnMeta.control ?? 'input',\n value: cell.getValue(),\n };\n\n const cellAttributes = {\n ...getCellAttributes(cell, index, isHighlighted),\n 'data-cell-editing-invalid': error ? true : undefined,\n 'data-taco': 'cell-control',\n onFocus: handleFocus,\n ref: cellRef,\n tabIndex: -1,\n };\n\n return (\n <td {...cellAttributes}>\n <Field invalid={!!error} message={error}>\n <MemoedEditingCell<TType> {...controlProps} />\n </Field>\n {\n // we show row move indicator here within the cell rather than the row because it is\n // an editing only feature, and we don't want to leak editing into the shared row component\n }\n <RowMoveIndicator cell={cell} cellRef={cellRef} isActiveRow={isActiveRow} />\n </td>\n );\n}\n\ntype MemoedEditingCellProps<TType = unknown, TValue = unknown> = {\n dataType?: TableColumnDataType;\n fontSize: TableFontSize;\n id: string;\n invalid: boolean;\n isDetailedMode: boolean;\n isTruncated: boolean;\n onBlur: () => void;\n onChange: (value: TValue) => void;\n row: TType;\n tabIndex?: number;\n toggleEditing: (editing: React.SetStateAction<boolean>) => void;\n toggleDetailedMode: (detailed: React.SetStateAction<boolean>) => void;\n type: TableColumnRendererControl<TType>;\n value: TValue;\n};\n\nconst MemoedEditingCell = React.memo(function MemoedEditingCell<TType = unknown>(props: MemoedEditingCellProps<TType>) {\n const {\n dataType,\n fontSize,\n id,\n invalid,\n isDetailedMode,\n isTruncated,\n onBlur,\n onChange,\n row,\n tabIndex = -1,\n toggleEditing,\n toggleDetailedMode,\n type = 'input',\n value,\n } = props;\n const controlRef = React.useRef<HTMLElement>(null);\n const currentValue = row[id];\n const commonProps = {\n onBlur,\n ref: controlRef,\n tabIndex,\n };\n\n if (typeof type === 'function') {\n const controlFnProps = {\n ...commonProps,\n invalid,\n setValue: onChange,\n value,\n };\n return type(controlFnProps, row);\n }\n\n if (type === 'switch') {\n return (\n <Switch\n {...commonProps}\n checked={Boolean(value)}\n onChange={onChange}\n ref={controlRef as React.RefObject<HTMLButtonElement>}\n />\n );\n }\n\n const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n const target = event.target as HTMLInputElement | HTMLTextAreaElement;\n\n if (target.readOnly) {\n return;\n }\n\n // prevent active row navigation while in detailed mode\n if (\n isDetailedMode &&\n (event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'ArrowLeft' || event.key === 'ArrowRight')\n ) {\n event.stopPropagation();\n }\n\n // enter or exit detail mode when pressing enter\n if (event.key === 'Enter') {\n // textareas support shift and enter, don't prevent default in that case\n if (event.shiftKey && isDetailedMode) {\n return;\n }\n\n event.preventDefault();\n\n if (isDetailedMode) {\n target.select?.();\n } else {\n target.setSelectionRange?.(target.value?.length, target.value?.length);\n }\n\n toggleDetailedMode(editing => !editing);\n return;\n }\n\n // reset the value, or exit edit mode when pressing escape\n if (event.key === 'Escape') {\n event.preventDefault();\n\n if (isDetailedMode) {\n toggleDetailedMode(false);\n\n if (value !== currentValue) {\n props.onChange(currentValue);\n }\n\n // have to let onChange run before selecting, otherwise the value changes\n requestAnimationFrame(() => target.select?.());\n } else {\n toggleEditing(false);\n }\n\n return;\n }\n\n // toggle into detailed mode when actually inputting something\n if (!isPressingMetaKey(event) && (/^[a-z0-9]$/i.test(event.key) || event.key === 'Backspace')) {\n toggleDetailedMode(true);\n }\n };\n\n const handleFocus = (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n if (!isDetailedMode) {\n event.target.select();\n }\n };\n\n if (type === 'datepicker') {\n const valueAsDate = date.parse(value as Date | string | undefined);\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n const newDate = (event as any).detail as Date;\n\n if (!valueAsDate || !newDate || (isDate(valueAsDate) && isDate(newDate) && !date.isWeakEqual(valueAsDate, newDate))) {\n props.onChange(newDate);\n }\n };\n\n return (\n <Datepicker\n {...commonProps}\n invalid={invalid}\n onChange={handleChange}\n onFocus={handleFocus}\n onKeyDown={handleInputKeyDown}\n ref={controlRef as React.RefObject<HTMLInputElement>}\n value={valueAsDate}\n />\n );\n }\n\n if (type === 'textarea') {\n const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n onChange(event.target.value);\n };\n\n return (\n <TextareaWithAutosizing\n {...commonProps}\n fontSize={fontSize}\n invalid={invalid}\n isTruncated={isTruncated}\n onChange={handleChange}\n onFocus={handleFocus}\n onKeyDown={handleInputKeyDown}\n ref={controlRef as React.RefObject<HTMLTextAreaElement>}\n value={String(value ?? '')}\n />\n );\n }\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n onChange(dataType === 'number' && event.target.value ? Number.parseInt(event.target.value) : event.target.value);\n };\n\n return (\n <Input\n {...commonProps}\n invalid={invalid}\n onChange={handleChange}\n onFocus={handleFocus}\n onKeyDown={handleInputKeyDown}\n ref={controlRef as React.RefObject<HTMLInputElement>}\n type={dataType === 'number' ? 'number' : undefined}\n value={dataType === 'number' ? (value as number) : String(value ?? '')}\n />\n );\n}) as <TType = unknown>(props: MemoedEditingCellProps<TType>) => JSX.Element;\n"],"names":["EditingControlCell","props","cell","cellRef","isHighlighted","index","rowIndex","React","useContext","RowContext","tableMeta","getContext","table","options","meta","columnMeta","column","columnDef","isActiveRow","rowActive","rowActiveIndex","handleFocus","useEditingCellAutofocus","handleBlur","editing","toggleDetailedMode","validateCell","useEffect","ref","current","document","activeElement","isElementInsideOrTriggeredFromContainer","error","getCellError","controlProps","dataType","fontSize","size","id","invalid","isDetailedMode","isTruncated","enableTruncate","onBlur","onChange","value","setCellValue","row","original","tabIndex","toggleEditing","type","_columnMeta$control","control","getValue","cellAttributes","getCellAttributes","undefined","onFocus","Field","message","MemoedEditingCell","RowMoveIndicator","memo","controlRef","useRef","currentValue","commonProps","controlFnProps","setValue","Switch","checked","Boolean","handleInputKeyDown","event","target","readOnly","key","stopPropagation","shiftKey","preventDefault","_target$select","select","call","_target$setSelectionR","_target$value","_target$value2","setSelectionRange","length","requestAnimationFrame","_target$select2","isPressingMetaKey","test","valueAsDate","date","handleChange","newDate","detail","isDate","Datepicker","onKeyDown","TextareaWithAutosizing","String","Number","parseInt","Input"],"mappings":"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"}
|
|
@@ -24,7 +24,7 @@ export { Input } from './components/Input/Input.js';
|
|
|
24
24
|
export { getNextIndexFromKey, useListKeyboardNavigation } from './utils/hooks/useListKeyboardNavigation.js';
|
|
25
25
|
export { useListScrollTo } from './utils/hooks/useListScrollTo.js';
|
|
26
26
|
export { Combobox } from './components/Combobox/Combobox.js';
|
|
27
|
-
export { format, isWeakEqual, parseFromCustomString, parseFromISOString } from './utils/date.js';
|
|
27
|
+
export { format, isWeakEqual, parse, parseFromCustomString, parseFromISOString } from './utils/date.js';
|
|
28
28
|
export { Popover } from './components/Popover/Popover.js';
|
|
29
29
|
export { Datepicker } from './components/Datepicker/Datepicker.js';
|
|
30
30
|
export { Dialog } from './components/Dialog/Dialog.js';
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { format, parseFromISOString } from '../../../../utils/date.js';
|
|
1
|
+
import { format } from '../../../../utils/date.js';
|
|
3
2
|
import { TableFilterComparator } from '../../types.js';
|
|
4
3
|
|
|
5
4
|
const dataTypes = {
|
|
@@ -20,17 +19,8 @@ const dataTypes = {
|
|
|
20
19
|
sortingFn: 'datetime',
|
|
21
20
|
filterComparators: [TableFilterComparator.IsEqualTo, TableFilterComparator.IsNotEqualTo, TableFilterComparator.IsGreaterThan, TableFilterComparator.IsLessThan, TableFilterComparator.IsGreaterThanOrEqualTo, TableFilterComparator.IsLessThanOrEqualTo, TableFilterComparator.IsBetween, TableFilterComparator.IsEmpty, TableFilterComparator.IsNotEmpty],
|
|
22
21
|
getDisplayValue: (value, options) => {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
}
|
|
26
|
-
if (isDate(value)) {
|
|
27
|
-
var _format, _options$localization;
|
|
28
|
-
return (_format = format(value, options === null || options === void 0 ? void 0 : (_options$localization = options.localization) === null || _options$localization === void 0 ? void 0 : _options$localization.formatting.date)) !== null && _format !== void 0 ? _format : '';
|
|
29
|
-
} else if (typeof value === 'string') {
|
|
30
|
-
var _format2, _options$localization2;
|
|
31
|
-
return (_format2 = format(parseFromISOString(value), options === null || options === void 0 ? void 0 : (_options$localization2 = options.localization) === null || _options$localization2 === void 0 ? void 0 : _options$localization2.formatting.date)) !== null && _format2 !== void 0 ? _format2 : '';
|
|
32
|
-
}
|
|
33
|
-
return String(value);
|
|
22
|
+
var _date$format, _options$localization;
|
|
23
|
+
return (_date$format = format(value, options === null || options === void 0 ? void 0 : (_options$localization = options.localization) === null || _options$localization === void 0 ? void 0 : _options$localization.formatting.date)) !== null && _date$format !== void 0 ? _date$format : '';
|
|
34
24
|
}
|
|
35
25
|
},
|
|
36
26
|
boolean: {
|
|
@@ -43,11 +33,11 @@ const dataTypes = {
|
|
|
43
33
|
sortingFn: 'basic',
|
|
44
34
|
filterComparators: [TableFilterComparator.IsEqualTo, TableFilterComparator.IsNotEqualTo, TableFilterComparator.IsGreaterThan, TableFilterComparator.IsLessThan, TableFilterComparator.IsGreaterThanOrEqualTo, TableFilterComparator.IsLessThanOrEqualTo, TableFilterComparator.IsBetween, TableFilterComparator.IsEmpty, TableFilterComparator.IsNotEmpty],
|
|
45
35
|
getDisplayValue: (value, options) => {
|
|
46
|
-
var _options$
|
|
36
|
+
var _options$localization2;
|
|
47
37
|
if (value === undefined) {
|
|
48
38
|
return '';
|
|
49
39
|
}
|
|
50
|
-
return new Intl.NumberFormat(options === null || options === void 0 ? void 0 : (_options$
|
|
40
|
+
return new Intl.NumberFormat(options === null || options === void 0 ? void 0 : (_options$localization2 = options.localization) === null || _options$localization2 === void 0 ? void 0 : _options$localization2.locale, {
|
|
51
41
|
minimumFractionDigits: 2
|
|
52
42
|
}).format(Number(value));
|
|
53
43
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dataTypes.js","sources":["../../../../../../../../../src/primitives/Table/useTableManager/util/dataTypes.ts"],"sourcesContent":["import { SortingFnOption as ReactTableSortingFnOption } from '@tanstack/react-table';\nimport
|
|
1
|
+
{"version":3,"file":"dataTypes.js","sources":["../../../../../../../../../src/primitives/Table/useTableManager/util/dataTypes.ts"],"sourcesContent":["import { SortingFnOption as ReactTableSortingFnOption } from '@tanstack/react-table';\nimport * as date from '../../../../utils/date';\nimport { TableColumnAlignment, TableColumnDataType, TableFilterComparator } from '../../types';\nimport { Localization } from '../../../../components/Provider/Localization';\n\nexport type TableDataType<TType = unknown> = {\n align?: TableColumnAlignment;\n sortingFn: ReactTableSortingFnOption<TType>;\n filterComparators: TableFilterComparator[];\n getDisplayValue?: (value: any, options?: { localization: Localization }) => string;\n};\n\nconst dataTypes: Record<TableColumnDataType | 'auto', TableDataType> = {\n auto: {\n sortingFn: 'auto',\n filterComparators: [\n TableFilterComparator.Contains,\n TableFilterComparator.DoesNotContain,\n TableFilterComparator.IsEqualTo,\n TableFilterComparator.IsNotEqualTo,\n TableFilterComparator.IsEmpty,\n TableFilterComparator.IsNotEmpty,\n ],\n },\n // base\n text: {\n sortingFn: 'alphanumeric',\n filterComparators: [\n TableFilterComparator.Contains,\n TableFilterComparator.DoesNotContain,\n TableFilterComparator.IsEqualTo,\n TableFilterComparator.IsNotEqualTo,\n TableFilterComparator.IsEmpty,\n TableFilterComparator.IsNotEmpty,\n ],\n },\n number: {\n sortingFn: 'basic',\n filterComparators: [\n TableFilterComparator.IsEqualTo,\n TableFilterComparator.IsNotEqualTo,\n TableFilterComparator.IsGreaterThan,\n TableFilterComparator.IsLessThan,\n TableFilterComparator.IsGreaterThanOrEqualTo,\n TableFilterComparator.IsLessThanOrEqualTo,\n TableFilterComparator.IsBetween,\n TableFilterComparator.IsEmpty,\n TableFilterComparator.IsNotEmpty,\n ],\n },\n datetime: {\n sortingFn: 'datetime',\n filterComparators: [\n TableFilterComparator.IsEqualTo,\n TableFilterComparator.IsNotEqualTo,\n TableFilterComparator.IsGreaterThan,\n TableFilterComparator.IsLessThan,\n TableFilterComparator.IsGreaterThanOrEqualTo,\n TableFilterComparator.IsLessThanOrEqualTo,\n TableFilterComparator.IsBetween,\n TableFilterComparator.IsEmpty,\n TableFilterComparator.IsNotEmpty,\n ],\n getDisplayValue: (value: string | Date, options) => {\n return date.format(value, options?.localization?.formatting.date) ?? '';\n },\n },\n boolean: {\n sortingFn: 'basic',\n filterComparators: [TableFilterComparator.IsEqualTo, TableFilterComparator.IsNotEqualTo],\n },\n // advanced\n amount: {\n align: 'right',\n sortingFn: 'basic',\n filterComparators: [\n TableFilterComparator.IsEqualTo,\n TableFilterComparator.IsNotEqualTo,\n TableFilterComparator.IsGreaterThan,\n TableFilterComparator.IsLessThan,\n TableFilterComparator.IsGreaterThanOrEqualTo,\n TableFilterComparator.IsLessThanOrEqualTo,\n TableFilterComparator.IsBetween,\n TableFilterComparator.IsEmpty,\n TableFilterComparator.IsNotEmpty,\n ],\n getDisplayValue: (value: number | bigint | string, options) => {\n if (value === undefined) {\n return '';\n }\n\n return new Intl.NumberFormat(options?.localization?.locale, { minimumFractionDigits: 2 }).format(Number(value));\n },\n },\n};\n\nexport function getDataTypeProperties<TType = unknown>(dataType: TableColumnDataType | undefined): TableDataType<TType> {\n return (dataTypes[dataType ?? 'text'] ?? dataTypes.text) as TableDataType<TType>;\n}\n"],"names":["dataTypes","auto","sortingFn","filterComparators","TableFilterComparator","Contains","DoesNotContain","IsEqualTo","IsNotEqualTo","IsEmpty","IsNotEmpty","text","number","IsGreaterThan","IsLessThan","IsGreaterThanOrEqualTo","IsLessThanOrEqualTo","IsBetween","datetime","getDisplayValue","value","options","_date$format","date","_options$localization","localization","formatting","boolean","amount","align","undefined","Intl","NumberFormat","_options$localization2","locale","minimumFractionDigits","format","Number","getDataTypeProperties","dataType","_dataTypes"],"mappings":"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"}
|
|
@@ -1,19 +1,31 @@
|
|
|
1
|
-
import { isDate,
|
|
1
|
+
import { isDate, isValid } from 'date-fns';
|
|
2
2
|
|
|
3
3
|
const isWeakEqual = (leftDate, rightDate) => {
|
|
4
4
|
return leftDate.getFullYear() === rightDate.getFullYear() && leftDate.getMonth() === rightDate.getMonth() && leftDate.getDate() === rightDate.getDate();
|
|
5
5
|
};
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
function parse(date) {
|
|
7
|
+
let value;
|
|
8
|
+
if (isDate(date)) {
|
|
9
|
+
value = date;
|
|
10
|
+
} else if (typeof date === 'string') {
|
|
11
|
+
value = parseFromISOString(date);
|
|
9
12
|
}
|
|
10
|
-
const value = isDate(date) ? date : toDate(date);
|
|
11
13
|
if (!isValid(value)) {
|
|
12
14
|
return undefined;
|
|
13
15
|
}
|
|
16
|
+
return value;
|
|
17
|
+
}
|
|
18
|
+
function format(date, mask = 'dd.mm.yy') {
|
|
19
|
+
if (date === undefined) {
|
|
20
|
+
return undefined;
|
|
21
|
+
}
|
|
22
|
+
const value = parse(date);
|
|
23
|
+
if (!isValid(value) || value === undefined) {
|
|
24
|
+
return undefined;
|
|
25
|
+
}
|
|
14
26
|
const pad = v => String(v).length === 1 ? `0${v}` : v.toString();
|
|
15
27
|
return mask.replace('dd', pad(value.getDate())).replace('mm', pad(value.getMonth() + 1)).replace('yy', String(value.getFullYear()).slice(2));
|
|
16
|
-
}
|
|
28
|
+
}
|
|
17
29
|
const parseFromCustomString = (date = '', mask = 'dd.mm.yy', defaultMonth = undefined, defaultYear = undefined) => {
|
|
18
30
|
if (!date || !date.length) {
|
|
19
31
|
return undefined;
|
|
@@ -59,5 +71,5 @@ const parseFromISOString = date => {
|
|
|
59
71
|
return isValid(tempDate) ? parseFromCustomString(format(new Date(date))) : undefined;
|
|
60
72
|
};
|
|
61
73
|
|
|
62
|
-
export { format, isWeakEqual, parseFromCustomString, parseFromISOString };
|
|
74
|
+
export { format, isWeakEqual, parse, parseFromCustomString, parseFromISOString };
|
|
63
75
|
//# sourceMappingURL=date.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date.js","sources":["../../../../../../src/utils/date.ts"],"sourcesContent":["import { isDate,
|
|
1
|
+
{"version":3,"file":"date.js","sources":["../../../../../../src/utils/date.ts"],"sourcesContent":["import { isDate, isValid } from 'date-fns';\n\nexport const isWeakEqual = (leftDate: Date, rightDate: Date) => {\n return (\n leftDate.getFullYear() === rightDate.getFullYear() &&\n leftDate.getMonth() === rightDate.getMonth() &&\n leftDate.getDate() === rightDate.getDate()\n );\n};\n\nexport function parse(date: string | Date | undefined) {\n let value: Date | undefined;\n\n if (isDate(date)) {\n value = date as Date;\n } else if (typeof date === 'string') {\n value = parseFromISOString(date as string);\n }\n\n if (!isValid(value)) {\n return undefined;\n }\n\n return value;\n}\n\nexport function format(date: string | Date | undefined, mask = 'dd.mm.yy'): string | undefined {\n if (date === undefined) {\n return undefined;\n }\n\n const value = parse(date);\n\n if (!isValid(value) || value === undefined) {\n return undefined;\n }\n\n const pad = (v: number): string => (String(v).length === 1 ? `0${v}` : v.toString());\n\n return mask\n .replace('dd', pad(value.getDate()))\n .replace('mm', pad(value.getMonth() + 1))\n .replace('yy', String(value.getFullYear()).slice(2));\n}\n\nexport const parseFromCustomString = (\n date = '',\n mask = 'dd.mm.yy',\n defaultMonth: number | undefined = undefined,\n defaultYear: number | undefined = undefined\n): Date | undefined => {\n if (!date || !date.length) {\n return undefined;\n }\n\n const sanitizedMask = mask.split(/[^dmy]/);\n const dd = sanitizedMask.findIndex(x => x === 'dd');\n const mm = sanitizedMask.findIndex(x => x === 'mm');\n const yy = sanitizedMask.findIndex(x => x === 'yy' || x === 'yyyy');\n\n let day;\n let month;\n let year;\n\n const getFullYear = (y: string): string => {\n if (y && y.length === 2) {\n const z = Number.parseInt(y, 10);\n\n return z > 50 ? `19${y}` : `20${y}`;\n }\n\n return y;\n };\n\n const inputParts = date.split(/\\D/);\n\n if (inputParts.length === 1) {\n const fullDate = inputParts[0];\n const unseparatedMask = mask.replace(/[^dmy]/g, '');\n\n day = fullDate.slice(unseparatedMask.indexOf('d'), unseparatedMask.lastIndexOf('d') + 1);\n month = fullDate.slice(unseparatedMask.indexOf('m'), unseparatedMask.lastIndexOf('m') + 1);\n year = getFullYear(fullDate.slice(unseparatedMask.indexOf('y'), unseparatedMask.lastIndexOf('y') + 3)); // account for full years\n } else {\n day = inputParts[dd];\n month = inputParts[mm];\n year = getFullYear(inputParts[yy]);\n }\n\n day = Number.parseInt(day, 10);\n month = Number.parseInt(month, 10);\n year = Number.parseInt(year, 10);\n\n const currentDate = new Date();\n\n return new Date(\n /* year */ Object.is(year, NaN) ? defaultYear ?? currentDate.getFullYear() : year,\n /* month */ Object.is(month, NaN) ? defaultMonth ?? currentDate.getMonth() : month - 1, // months are zero based in javascript, so subtract a day\n /* day */ Object.is(day, NaN) ? currentDate.getDate() : day,\n /* hours */ 12,\n /* minutes */ 0 // set to midday to avoid UTC offset causing dates to be mismatched server side\n );\n};\n\nexport const parseFromISOString = (date: string): Date | undefined => {\n const tempDate = new Date(date);\n return isValid(tempDate) ? parseFromCustomString(format(new Date(date))) : undefined;\n};\n"],"names":["isWeakEqual","leftDate","rightDate","getFullYear","getMonth","getDate","parse","date","value","isDate","parseFromISOString","isValid","undefined","format","mask","pad","v","String","length","toString","replace","slice","parseFromCustomString","defaultMonth","defaultYear","sanitizedMask","split","dd","findIndex","x","mm","yy","day","month","year","y","z","Number","parseInt","inputParts","fullDate","unseparatedMask","indexOf","lastIndexOf","currentDate","Date","Object","is","NaN","tempDate"],"mappings":"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"}
|