@deephaven/components 0.22.3-embed-pandas.11 → 0.23.1-beta.0
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/AutoCompleteInput.js +12 -85
- package/dist/AutoCompleteInput.js.map +1 -1
- package/dist/AutoResizeTextarea.d.ts +5 -5
- package/dist/AutoResizeTextarea.d.ts.map +1 -1
- package/dist/AutoResizeTextarea.js +8 -23
- package/dist/AutoResizeTextarea.js.map +1 -1
- package/dist/BasicModal.d.ts +28 -1
- package/dist/BasicModal.d.ts.map +1 -1
- package/dist/BasicModal.js +2 -8
- package/dist/BasicModal.js.map +1 -1
- package/dist/Button.d.ts +9 -9
- package/dist/Button.d.ts.map +1 -1
- package/dist/Button.js +8 -34
- package/dist/Button.js.map +1 -1
- package/dist/ButtonGroup.d.ts +7 -7
- package/dist/ButtonGroup.d.ts.map +1 -1
- package/dist/ButtonGroup.js +2 -4
- package/dist/ButtonGroup.js.map +1 -1
- package/dist/ButtonOld.js.map +1 -1
- package/dist/CardFlip.d.ts +2 -2
- package/dist/CardFlip.d.ts.map +1 -1
- package/dist/CardFlip.js +2 -7
- package/dist/CardFlip.js.map +1 -1
- package/dist/Checkbox.js +3 -14
- package/dist/Checkbox.js.map +1 -1
- package/dist/Collapse.d.ts +1 -1
- package/dist/Collapse.js +0 -15
- package/dist/Collapse.js.map +1 -1
- package/dist/ComboBox.js +4 -83
- package/dist/ComboBox.js.map +1 -1
- package/dist/CopyButton.d.ts +22 -0
- package/dist/CopyButton.d.ts.map +1 -0
- package/dist/CopyButton.js +30 -0
- package/dist/CopyButton.js.map +1 -0
- package/dist/CustomTimeSelect.d.ts +3 -3
- package/dist/CustomTimeSelect.d.ts.map +1 -1
- package/dist/CustomTimeSelect.js +2 -86
- package/dist/CustomTimeSelect.js.map +1 -1
- package/dist/DateInput.d.ts +1 -1
- package/dist/DateInput.d.ts.map +1 -1
- package/dist/DateInput.js.map +1 -1
- package/dist/DateInputUtils.js +0 -7
- package/dist/DateInputUtils.js.map +1 -1
- package/dist/DateTimeInput.d.ts +1 -1
- package/dist/DateTimeInput.d.ts.map +1 -1
- package/dist/DateTimeInput.js +7 -10
- package/dist/DateTimeInput.js.map +1 -1
- package/dist/DebouncedSearchInput.js +0 -14
- package/dist/DebouncedSearchInput.js.map +1 -1
- package/dist/DragUtils.d.ts +1 -1
- package/dist/DragUtils.d.ts.map +1 -1
- package/dist/DragUtils.js +4 -16
- package/dist/DragUtils.js.map +1 -1
- package/dist/DraggableItemList.d.ts +4 -4
- package/dist/DraggableItemList.d.ts.map +1 -1
- package/dist/DraggableItemList.js +22 -44
- package/dist/DraggableItemList.js.map +1 -1
- package/dist/EditableItemList.d.ts +1 -1
- package/dist/EditableItemList.d.ts.map +1 -1
- package/dist/EditableItemList.js +2 -6
- package/dist/EditableItemList.js.map +1 -1
- package/dist/HierarchicalCheckboxMenu.d.ts +3 -3
- package/dist/HierarchicalCheckboxMenu.d.ts.map +1 -1
- package/dist/HierarchicalCheckboxMenu.js +6 -28
- package/dist/HierarchicalCheckboxMenu.js.map +1 -1
- package/dist/ItemList.d.ts +5 -5
- package/dist/ItemList.d.ts.map +1 -1
- package/dist/ItemList.js +22 -115
- package/dist/ItemList.js.map +1 -1
- package/dist/ItemListItem.d.ts +0 -1
- package/dist/ItemListItem.d.ts.map +1 -1
- package/dist/ItemListItem.js +26 -50
- package/dist/ItemListItem.js.map +1 -1
- package/dist/LoadingOverlay.d.ts +2 -2
- package/dist/LoadingOverlay.d.ts.map +1 -1
- package/dist/LoadingOverlay.js +3 -5
- package/dist/LoadingOverlay.js.map +1 -1
- package/dist/LoadingSpinner.d.ts +2 -2
- package/dist/LoadingSpinner.d.ts.map +1 -1
- package/dist/LoadingSpinner.js +2 -4
- package/dist/LoadingSpinner.js.map +1 -1
- package/dist/MaskedInput.d.ts +2 -2
- package/dist/MaskedInput.d.ts.map +1 -1
- package/dist/MaskedInput.js +26 -85
- package/dist/MaskedInput.js.map +1 -1
- package/dist/Option.d.ts +2 -2
- package/dist/Option.d.ts.map +1 -1
- package/dist/Option.js +2 -4
- package/dist/Option.js.map +1 -1
- package/dist/RadioGroup.d.ts +2 -2
- package/dist/RadioGroup.d.ts.map +1 -1
- package/dist/RadioGroup.js +4 -6
- package/dist/RadioGroup.js.map +1 -1
- package/dist/RadioItem.d.ts +1 -1
- package/dist/RadioItem.d.ts.map +1 -1
- package/dist/RadioItem.js +0 -1
- package/dist/RadioItem.js.map +1 -1
- package/dist/SearchInput.js +2 -13
- package/dist/SearchInput.js.map +1 -1
- package/dist/Select.d.ts +2 -2
- package/dist/Select.d.ts.map +1 -1
- package/dist/Select.js +2 -4
- package/dist/Select.js.map +1 -1
- package/dist/SelectValueList.d.ts +1 -1
- package/dist/SelectValueList.d.ts.map +1 -1
- package/dist/SelectValueList.js +0 -28
- package/dist/SelectValueList.js.map +1 -1
- package/dist/SocketedButton.d.ts +1 -1
- package/dist/SocketedButton.d.ts.map +1 -1
- package/dist/SocketedButton.js.map +1 -1
- package/dist/ThemeExport.d.ts +4 -4
- package/dist/ThemeExport.js +0 -4
- package/dist/ThemeExport.js.map +1 -1
- package/dist/TimeInput.d.ts +2 -2
- package/dist/TimeInput.d.ts.map +1 -1
- package/dist/TimeInput.js +2 -12
- package/dist/TimeInput.js.map +1 -1
- package/dist/TimeSlider.d.ts +2 -2
- package/dist/TimeSlider.d.ts.map +1 -1
- package/dist/TimeSlider.js +19 -33
- package/dist/TimeSlider.js.map +1 -1
- package/dist/ToastNotification.d.ts +6 -6
- package/dist/ToastNotification.d.ts.map +1 -1
- package/dist/ToastNotification.js +2 -4
- package/dist/ToastNotification.js.map +1 -1
- package/dist/UISwitch.d.ts +2 -2
- package/dist/UISwitch.d.ts.map +1 -1
- package/dist/UISwitch.js +2 -4
- package/dist/UISwitch.js.map +1 -1
- package/dist/ValidateLabelInput.d.ts +1 -1
- package/dist/ValidateLabelInput.d.ts.map +1 -1
- package/dist/ValidateLabelInput.js +3 -3
- package/dist/ValidateLabelInput.js.map +1 -1
- package/dist/context-actions/ContextActionUtils.d.ts +3 -15
- package/dist/context-actions/ContextActionUtils.d.ts.map +1 -1
- package/dist/context-actions/ContextActionUtils.js +8 -85
- package/dist/context-actions/ContextActionUtils.js.map +1 -1
- package/dist/context-actions/ContextActions.js +1 -34
- package/dist/context-actions/ContextActions.js.map +1 -1
- package/dist/context-actions/ContextMenu.js +29 -110
- package/dist/context-actions/ContextMenu.js.map +1 -1
- package/dist/context-actions/ContextMenuItem.d.ts.map +1 -1
- package/dist/context-actions/ContextMenuItem.js +3 -19
- package/dist/context-actions/ContextMenuItem.js.map +1 -1
- package/dist/context-actions/ContextMenuRoot.d.ts +1 -1
- package/dist/context-actions/ContextMenuRoot.d.ts.map +1 -1
- package/dist/context-actions/ContextMenuRoot.js +7 -26
- package/dist/context-actions/ContextMenuRoot.js.map +1 -1
- package/dist/context-actions/GlobalContextAction.js +0 -15
- package/dist/context-actions/GlobalContextAction.js.map +1 -1
- package/dist/context-actions/GlobalContextActions.js +0 -6
- package/dist/context-actions/GlobalContextActions.js.map +1 -1
- package/dist/context-actions/index.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/menu-actions/DropdownMenu.d.ts +3 -3
- package/dist/menu-actions/DropdownMenu.d.ts.map +1 -1
- package/dist/menu-actions/DropdownMenu.js +4 -32
- package/dist/menu-actions/DropdownMenu.js.map +1 -1
- package/dist/menu-actions/Menu.d.ts +3 -3
- package/dist/menu-actions/Menu.d.ts.map +1 -1
- package/dist/menu-actions/Menu.js +7 -52
- package/dist/menu-actions/Menu.js.map +1 -1
- package/dist/menu-actions/index.d.ts +2 -1
- package/dist/menu-actions/index.d.ts.map +1 -1
- package/dist/menu-actions/index.js +2 -2
- package/dist/menu-actions/index.js.map +1 -1
- package/dist/modal/Modal.d.ts +2 -2
- package/dist/modal/Modal.d.ts.map +1 -1
- package/dist/modal/Modal.js +3 -9
- package/dist/modal/Modal.js.map +1 -1
- package/dist/modal/ModalBody.d.ts +1 -1
- package/dist/modal/ModalBody.d.ts.map +1 -1
- package/dist/modal/ModalBody.js +2 -4
- package/dist/modal/ModalBody.js.map +1 -1
- package/dist/modal/ModalFooter.d.ts +1 -1
- package/dist/modal/ModalFooter.d.ts.map +1 -1
- package/dist/modal/ModalFooter.js +2 -4
- package/dist/modal/ModalFooter.js.map +1 -1
- package/dist/modal/ModalHeader.d.ts +1 -1
- package/dist/modal/ModalHeader.d.ts.map +1 -1
- package/dist/modal/ModalHeader.js +2 -4
- package/dist/modal/ModalHeader.js.map +1 -1
- package/dist/modal/index.js.map +1 -1
- package/dist/navigation/Menu.d.ts +3 -3
- package/dist/navigation/Menu.d.ts.map +1 -1
- package/dist/navigation/Menu.js +2 -2
- package/dist/navigation/Menu.js.map +1 -1
- package/dist/navigation/MenuItem.d.ts +4 -4
- package/dist/navigation/MenuItem.d.ts.map +1 -1
- package/dist/navigation/MenuItem.js +4 -7
- package/dist/navigation/MenuItem.js.map +1 -1
- package/dist/navigation/Page.d.ts +2 -2
- package/dist/navigation/Page.d.ts.map +1 -1
- package/dist/navigation/Page.js +2 -3
- package/dist/navigation/Page.js.map +1 -1
- package/dist/navigation/Stack.d.ts +2 -2
- package/dist/navigation/Stack.d.ts.map +1 -1
- package/dist/navigation/Stack.js +3 -6
- package/dist/navigation/Stack.js.map +1 -1
- package/dist/navigation/index.js.map +1 -1
- package/dist/popper/Popper.d.ts +2 -2
- package/dist/popper/Popper.d.ts.map +1 -1
- package/dist/popper/Popper.js +13 -46
- package/dist/popper/Popper.js.map +1 -1
- package/dist/popper/Tooltip.d.ts +1 -1
- package/dist/popper/Tooltip.d.ts.map +1 -1
- package/dist/popper/Tooltip.js +0 -56
- package/dist/popper/Tooltip.js.map +1 -1
- package/dist/popper/index.js.map +1 -1
- package/dist/shortcuts/GlobalShortcuts.js.map +1 -1
- package/dist/shortcuts/Shortcut.d.ts +2 -2
- package/dist/shortcuts/Shortcut.d.ts.map +1 -1
- package/dist/shortcuts/Shortcut.js +19 -76
- package/dist/shortcuts/Shortcut.js.map +1 -1
- package/dist/shortcuts/ShortcutRegistry.d.ts +1 -1
- package/dist/shortcuts/ShortcutRegistry.d.ts.map +1 -1
- package/dist/shortcuts/ShortcutRegistry.js +3 -18
- package/dist/shortcuts/ShortcutRegistry.js.map +1 -1
- package/dist/shortcuts/index.js.map +1 -1
- package/package.json +8 -8
package/dist/TimeInput.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { SelectionSegment } from './MaskedInput';
|
|
3
3
|
export type { SelectionSegment } from './MaskedInput';
|
|
4
|
-
|
|
4
|
+
type TimeInputProps = {
|
|
5
5
|
allowValueWrapping?: boolean;
|
|
6
6
|
className?: string;
|
|
7
7
|
onChange?(timeInSec: number): void;
|
|
@@ -11,7 +11,7 @@ declare type TimeInputProps = {
|
|
|
11
11
|
onBlur?(): void;
|
|
12
12
|
'data-testid'?: string;
|
|
13
13
|
};
|
|
14
|
-
export
|
|
14
|
+
export type TimeInputElement = {
|
|
15
15
|
focus: () => void;
|
|
16
16
|
setSelection: (newSelection: SelectionSegment) => void;
|
|
17
17
|
};
|
package/dist/TimeInput.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimeInput.d.ts","sourceRoot":"","sources":["../src/TimeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAGf,OAAoB,EAElB,gBAAgB,EACjB,MAAM,eAAe,CAAC;AAEvB,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAOtD,
|
|
1
|
+
{"version":3,"file":"TimeInput.d.ts","sourceRoot":"","sources":["../src/TimeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAGf,OAAoB,EAElB,gBAAgB,EACjB,MAAM,eAAe,CAAC;AAEvB,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAOtD,KAAK,cAAc,GAAG;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,QAAQ,CAAC,CAAC,SAAS,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,MAAM,CAAC,IAAI,IAAI,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,YAAY,EAAE,CAAC,YAAY,EAAE,gBAAgB,KAAK,IAAI,CAAC;CACxD,CAAC;AAKF,QAAA,MAAM,SAAS,yFAmHd,CAAC;AAaF,eAAe,SAAS,CAAC"}
|
package/dist/TimeInput.js
CHANGED
|
@@ -25,26 +25,21 @@ var TimeInput = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
25
25
|
useImperativeHandle(ref, () => ({
|
|
26
26
|
focus: () => {
|
|
27
27
|
var _inputRef$current;
|
|
28
|
-
|
|
29
28
|
(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
|
|
30
29
|
},
|
|
31
30
|
setSelection: newSelection => {
|
|
32
31
|
var _inputRef$current2;
|
|
33
|
-
|
|
34
32
|
(_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
|
|
35
|
-
|
|
36
33
|
_setSelection(newSelection);
|
|
37
34
|
}
|
|
38
35
|
}), []);
|
|
39
36
|
useEffect(function setFormattedTime() {
|
|
40
37
|
setValue(TimeUtils.formatTime(propsValue));
|
|
41
38
|
}, [propsValue]);
|
|
42
|
-
|
|
43
39
|
function getNextSegmentValue(range, delta, segmentValue) {
|
|
44
40
|
// Delta is backward because negative Y is up
|
|
45
41
|
var maxValue = range.selectionStart === 0 ? 24 : 60;
|
|
46
42
|
var newSegmentValue = parseInt(segmentValue, 10) - delta;
|
|
47
|
-
|
|
48
43
|
if (Number.isNaN(newSegmentValue)) {
|
|
49
44
|
newSegmentValue = 0;
|
|
50
45
|
} else if (allowValueWrapping) {
|
|
@@ -53,31 +48,26 @@ var TimeInput = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
53
48
|
} else {
|
|
54
49
|
newSegmentValue = Math.min(Math.max(0, newSegmentValue), maxValue - 1);
|
|
55
50
|
}
|
|
56
|
-
|
|
57
51
|
return "".concat(newSegmentValue).padStart(2, '0');
|
|
58
52
|
}
|
|
59
|
-
|
|
60
53
|
function getPreferredReplacementString(replaceValue, replaceIndex, newChar, selectionStart, selectionEnd) {
|
|
61
54
|
if (selectionStart === 0 && selectionEnd === 2 && replaceIndex === 1 && parseInt(newChar, 10) > 1) {
|
|
62
55
|
// DH-10082 Special case for when typing `3` when it's already 12
|
|
63
56
|
return "0".concat(newChar).concat(replaceValue.substring(2));
|
|
64
57
|
}
|
|
65
|
-
|
|
66
58
|
return DEFAULT_GET_PREFERRED_REPLACEMENT_STRING(replaceValue, replaceIndex, newChar);
|
|
67
59
|
}
|
|
68
|
-
|
|
69
60
|
function handleChange(newValue) {
|
|
70
61
|
log.debug('handleChange', newValue);
|
|
71
|
-
setValue(newValue);
|
|
62
|
+
setValue(newValue);
|
|
72
63
|
|
|
64
|
+
// Only send a change if the value is actually valid
|
|
73
65
|
if (TimeUtils.isTimeString(newValue)) {
|
|
74
66
|
onChange(TimeUtils.parseTime(newValue));
|
|
75
67
|
}
|
|
76
68
|
}
|
|
77
|
-
|
|
78
69
|
var handleSelect = useCallback(newSelection => {
|
|
79
70
|
_setSelection(newSelection);
|
|
80
|
-
|
|
81
71
|
onSelect(newSelection);
|
|
82
72
|
}, [onSelect]);
|
|
83
73
|
return /*#__PURE__*/React.createElement(MaskedInput, {
|
package/dist/TimeInput.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimeInput.js","names":["React","useCallback","useEffect","useImperativeHandle","useRef","useState","Log","TimeUtils","MaskedInput","DEFAULT_GET_PREFERRED_REPLACEMENT_STRING","log","module","TIME_PATTERN","EXAMPLES","TimeInput","forwardRef","props","ref","allowValueWrapping","className","onChange","value","propsValue","onFocus","onBlur","onSelect","dataTestId","setValue","formatTime","selection","setSelection","inputRef","focus","current","newSelection","setFormattedTime","getNextSegmentValue","range","delta","segmentValue","maxValue","selectionStart","newSegmentValue","parseInt","Number","isNaN","Math","min","max","padStart","getPreferredReplacementString","replaceValue","replaceIndex","newChar","selectionEnd","substring","handleChange","newValue","debug","isTimeString","parseTime","handleSelect","defaultProps","undefined"],"sources":["../src/TimeInput.tsx"],"sourcesContent":["import React, {\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport Log from '@deephaven/log';\nimport { TimeUtils } from '@deephaven/utils';\nimport MaskedInput, {\n DEFAULT_GET_PREFERRED_REPLACEMENT_STRING,\n SelectionSegment,\n} from './MaskedInput';\n\nexport type { SelectionSegment } from './MaskedInput';\n\nconst log = Log.module('TimeInput');\n\nconst TIME_PATTERN = '([01][0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]';\nconst EXAMPLES = ['00:00:00', '12:34:56', '23:59:59'];\n\ntype TimeInputProps = {\n allowValueWrapping?: boolean;\n className?: string;\n onChange?(timeInSec: number): void;\n onSelect?(selection: SelectionSegment): void;\n value?: number;\n onFocus?(): void;\n onBlur?(): void;\n 'data-testid'?: string;\n};\n\nexport type TimeInputElement = {\n focus: () => void;\n setSelection: (newSelection: SelectionSegment) => void;\n};\n\n// Forward ref causes a false positive for display-name in eslint:\n// https://github.com/yannickcr/eslint-plugin-react/issues/2269\n// eslint-disable-next-line react/display-name\nconst TimeInput = React.forwardRef<TimeInputElement, TimeInputProps>(\n (props: TimeInputProps, ref) => {\n const {\n allowValueWrapping = true,\n className = '',\n onChange = () => false,\n value: propsValue = 0,\n onFocus = () => false,\n onBlur = () => false,\n onSelect = () => false,\n 'data-testid': dataTestId,\n } = props;\n const [value, setValue] = useState(TimeUtils.formatTime(propsValue));\n const [selection, setSelection] = useState<SelectionSegment>();\n const inputRef = useRef<HTMLInputElement>(null);\n\n useImperativeHandle(\n ref,\n () => ({\n focus: () => {\n inputRef.current?.focus();\n },\n setSelection: newSelection => {\n inputRef.current?.focus();\n setSelection(newSelection);\n },\n }),\n []\n );\n\n useEffect(\n function setFormattedTime() {\n setValue(TimeUtils.formatTime(propsValue));\n },\n [propsValue]\n );\n\n function getNextSegmentValue(\n range: SelectionSegment,\n delta: number,\n segmentValue: string\n ): string {\n // Delta is backward because negative Y is up\n const maxValue = range.selectionStart === 0 ? 24 : 60;\n let newSegmentValue = parseInt(segmentValue, 10) - delta;\n if (Number.isNaN(newSegmentValue)) {\n newSegmentValue = 0;\n } else if (allowValueWrapping) {\n // Add max value and re-mod so we don't get negative values after mod\n newSegmentValue = ((newSegmentValue % maxValue) + maxValue) % maxValue;\n } else {\n newSegmentValue = Math.min(Math.max(0, newSegmentValue), maxValue - 1);\n }\n return `${newSegmentValue}`.padStart(2, '0');\n }\n\n function getPreferredReplacementString(\n replaceValue: string,\n replaceIndex: number,\n newChar: string,\n selectionStart: number,\n selectionEnd: number\n ) {\n if (\n selectionStart === 0 &&\n selectionEnd === 2 &&\n replaceIndex === 1 &&\n parseInt(newChar, 10) > 1\n ) {\n // DH-10082 Special case for when typing `3` when it's already 12\n return `0${newChar}${replaceValue.substring(2)}`;\n }\n return DEFAULT_GET_PREFERRED_REPLACEMENT_STRING(\n replaceValue,\n replaceIndex,\n newChar\n );\n }\n\n function handleChange(newValue: string): void {\n log.debug('handleChange', newValue);\n setValue(newValue);\n\n // Only send a change if the value is actually valid\n if (TimeUtils.isTimeString(newValue)) {\n onChange(TimeUtils.parseTime(newValue));\n }\n }\n\n const handleSelect = useCallback(\n (newSelection: SelectionSegment) => {\n setSelection(newSelection);\n onSelect(newSelection);\n },\n [onSelect]\n );\n\n return (\n <MaskedInput\n ref={inputRef}\n className={className}\n example={EXAMPLES}\n getNextSegmentValue={getNextSegmentValue}\n getPreferredReplacementString={getPreferredReplacementString}\n onChange={handleChange}\n onSelect={handleSelect}\n pattern={TIME_PATTERN}\n selection={selection}\n value={value}\n onFocus={onFocus}\n onBlur={onBlur}\n data-testid={dataTestId}\n />\n );\n }\n);\n\nTimeInput.defaultProps = {\n allowValueWrapping: true,\n className: '',\n onChange: () => false,\n onSelect: () => false,\n value: 0,\n onFocus: () => false,\n onBlur: () => false,\n 'data-testid': undefined,\n};\n\nexport default TimeInput;\n"],"mappings":"AAAA,OAAOA,
|
|
1
|
+
{"version":3,"file":"TimeInput.js","names":["React","useCallback","useEffect","useImperativeHandle","useRef","useState","Log","TimeUtils","MaskedInput","DEFAULT_GET_PREFERRED_REPLACEMENT_STRING","log","module","TIME_PATTERN","EXAMPLES","TimeInput","forwardRef","props","ref","allowValueWrapping","className","onChange","value","propsValue","onFocus","onBlur","onSelect","dataTestId","setValue","formatTime","selection","setSelection","inputRef","focus","current","newSelection","setFormattedTime","getNextSegmentValue","range","delta","segmentValue","maxValue","selectionStart","newSegmentValue","parseInt","Number","isNaN","Math","min","max","padStart","getPreferredReplacementString","replaceValue","replaceIndex","newChar","selectionEnd","substring","handleChange","newValue","debug","isTimeString","parseTime","handleSelect","defaultProps","undefined"],"sources":["../src/TimeInput.tsx"],"sourcesContent":["import React, {\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport Log from '@deephaven/log';\nimport { TimeUtils } from '@deephaven/utils';\nimport MaskedInput, {\n DEFAULT_GET_PREFERRED_REPLACEMENT_STRING,\n SelectionSegment,\n} from './MaskedInput';\n\nexport type { SelectionSegment } from './MaskedInput';\n\nconst log = Log.module('TimeInput');\n\nconst TIME_PATTERN = '([01][0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]';\nconst EXAMPLES = ['00:00:00', '12:34:56', '23:59:59'];\n\ntype TimeInputProps = {\n allowValueWrapping?: boolean;\n className?: string;\n onChange?(timeInSec: number): void;\n onSelect?(selection: SelectionSegment): void;\n value?: number;\n onFocus?(): void;\n onBlur?(): void;\n 'data-testid'?: string;\n};\n\nexport type TimeInputElement = {\n focus: () => void;\n setSelection: (newSelection: SelectionSegment) => void;\n};\n\n// Forward ref causes a false positive for display-name in eslint:\n// https://github.com/yannickcr/eslint-plugin-react/issues/2269\n// eslint-disable-next-line react/display-name\nconst TimeInput = React.forwardRef<TimeInputElement, TimeInputProps>(\n (props: TimeInputProps, ref) => {\n const {\n allowValueWrapping = true,\n className = '',\n onChange = () => false,\n value: propsValue = 0,\n onFocus = () => false,\n onBlur = () => false,\n onSelect = () => false,\n 'data-testid': dataTestId,\n } = props;\n const [value, setValue] = useState(TimeUtils.formatTime(propsValue));\n const [selection, setSelection] = useState<SelectionSegment>();\n const inputRef = useRef<HTMLInputElement>(null);\n\n useImperativeHandle(\n ref,\n () => ({\n focus: () => {\n inputRef.current?.focus();\n },\n setSelection: newSelection => {\n inputRef.current?.focus();\n setSelection(newSelection);\n },\n }),\n []\n );\n\n useEffect(\n function setFormattedTime() {\n setValue(TimeUtils.formatTime(propsValue));\n },\n [propsValue]\n );\n\n function getNextSegmentValue(\n range: SelectionSegment,\n delta: number,\n segmentValue: string\n ): string {\n // Delta is backward because negative Y is up\n const maxValue = range.selectionStart === 0 ? 24 : 60;\n let newSegmentValue = parseInt(segmentValue, 10) - delta;\n if (Number.isNaN(newSegmentValue)) {\n newSegmentValue = 0;\n } else if (allowValueWrapping) {\n // Add max value and re-mod so we don't get negative values after mod\n newSegmentValue = ((newSegmentValue % maxValue) + maxValue) % maxValue;\n } else {\n newSegmentValue = Math.min(Math.max(0, newSegmentValue), maxValue - 1);\n }\n return `${newSegmentValue}`.padStart(2, '0');\n }\n\n function getPreferredReplacementString(\n replaceValue: string,\n replaceIndex: number,\n newChar: string,\n selectionStart: number,\n selectionEnd: number\n ) {\n if (\n selectionStart === 0 &&\n selectionEnd === 2 &&\n replaceIndex === 1 &&\n parseInt(newChar, 10) > 1\n ) {\n // DH-10082 Special case for when typing `3` when it's already 12\n return `0${newChar}${replaceValue.substring(2)}`;\n }\n return DEFAULT_GET_PREFERRED_REPLACEMENT_STRING(\n replaceValue,\n replaceIndex,\n newChar\n );\n }\n\n function handleChange(newValue: string): void {\n log.debug('handleChange', newValue);\n setValue(newValue);\n\n // Only send a change if the value is actually valid\n if (TimeUtils.isTimeString(newValue)) {\n onChange(TimeUtils.parseTime(newValue));\n }\n }\n\n const handleSelect = useCallback(\n (newSelection: SelectionSegment) => {\n setSelection(newSelection);\n onSelect(newSelection);\n },\n [onSelect]\n );\n\n return (\n <MaskedInput\n ref={inputRef}\n className={className}\n example={EXAMPLES}\n getNextSegmentValue={getNextSegmentValue}\n getPreferredReplacementString={getPreferredReplacementString}\n onChange={handleChange}\n onSelect={handleSelect}\n pattern={TIME_PATTERN}\n selection={selection}\n value={value}\n onFocus={onFocus}\n onBlur={onBlur}\n data-testid={dataTestId}\n />\n );\n }\n);\n\nTimeInput.defaultProps = {\n allowValueWrapping: true,\n className: '',\n onChange: () => false,\n onSelect: () => false,\n value: 0,\n onFocus: () => false,\n onBlur: () => false,\n 'data-testid': undefined,\n};\n\nexport default TimeInput;\n"],"mappings":"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"}
|
package/dist/TimeSlider.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import './TimeSlider.scss';
|
|
3
|
-
|
|
3
|
+
type TimeSliderProps = {
|
|
4
4
|
startTime: number;
|
|
5
5
|
endTime: number;
|
|
6
6
|
onChange(value: {
|
|
@@ -15,6 +15,6 @@ declare type TimeSliderProps = {
|
|
|
15
15
|
* Creates a time slider for setting a start and end time, that can also run overnight
|
|
16
16
|
* @param props takes times in seconds 0 - 86399 and a callback
|
|
17
17
|
*/
|
|
18
|
-
declare
|
|
18
|
+
declare function TimeSlider({ startTime: propStartTime, endTime: propEndTime, onChange, isStartModified, isEndModified, 'data-testid': dataTestId, }: TimeSliderProps): JSX.Element;
|
|
19
19
|
export default TimeSlider;
|
|
20
20
|
//# sourceMappingURL=TimeSlider.d.ts.map
|
package/dist/TimeSlider.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimeSlider.d.ts","sourceRoot":"","sources":["../src/TimeSlider.tsx"],"names":[],"mappings":";AAaA,OAAO,mBAAmB,CAAC;AAO3B,
|
|
1
|
+
{"version":3,"file":"TimeSlider.d.ts","sourceRoot":"","sources":["../src/TimeSlider.tsx"],"names":[],"mappings":";AAaA,OAAO,mBAAmB,CAAC;AAO3B,KAAK,eAAe,GAAG;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,KAAK,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAC9D,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;;GAGG;AACH,iBAAS,UAAU,CAAC,EAClB,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,eAAuB,EACvB,aAAqB,EACrB,aAAa,EAAE,UAAU,GAC1B,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,CAuF/B;AAwSD,eAAe,UAAU,CAAC"}
|
package/dist/TimeSlider.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
/* eslint-disable react/no-array-index-key */
|
|
2
2
|
// array maps being used are static, this is fine.
|
|
3
|
+
|
|
3
4
|
import React, { useCallback, useMemo, useRef, useState, useEffect } from 'react';
|
|
4
5
|
import classNames from 'classnames';
|
|
5
6
|
import TimeInput from "./TimeInput.js";
|
|
@@ -8,14 +9,13 @@ import "./TimeSlider.css";
|
|
|
8
9
|
var HANDLE_SIZE = parseInt(StyleExports['handle-size'], 10);
|
|
9
10
|
var POPOVER_WIDTH = parseInt(StyleExports['popover-width'], 10);
|
|
10
11
|
var SECONDS_IN_DAY = 24 * 60 * 60 - 1; // Max is actually 23:59:59
|
|
11
|
-
|
|
12
12
|
var SNAP_NEAREST_MINUTES = 5 * 60; // rounds in 5 minute intervals
|
|
13
13
|
|
|
14
14
|
/**
|
|
15
15
|
* Creates a time slider for setting a start and end time, that can also run overnight
|
|
16
16
|
* @param props takes times in seconds 0 - 86399 and a callback
|
|
17
17
|
*/
|
|
18
|
-
|
|
18
|
+
function TimeSlider(_ref) {
|
|
19
19
|
var {
|
|
20
20
|
startTime: propStartTime,
|
|
21
21
|
endTime: propEndTime,
|
|
@@ -27,8 +27,8 @@ var TimeSlider = _ref => {
|
|
|
27
27
|
var [startTime, setStartTime] = useState(propStartTime);
|
|
28
28
|
var [endTime, setEndTime] = useState(propEndTime);
|
|
29
29
|
var track = useRef(null); // we need the track width while calulculating time from handle drag
|
|
30
|
-
// updates state if props change
|
|
31
30
|
|
|
31
|
+
// updates state if props change
|
|
32
32
|
useEffect(function setTimeOnPropTimeChange() {
|
|
33
33
|
setStartTime(propStartTime);
|
|
34
34
|
setEndTime(propEndTime);
|
|
@@ -36,7 +36,6 @@ var TimeSlider = _ref => {
|
|
|
36
36
|
var updateTime = useCallback((newStartTime, newEndTime) => {
|
|
37
37
|
var start = newStartTime;
|
|
38
38
|
var end = newEndTime;
|
|
39
|
-
|
|
40
39
|
if (start === end) {
|
|
41
40
|
if (end < SECONDS_IN_DAY) {
|
|
42
41
|
end += 1;
|
|
@@ -44,7 +43,6 @@ var TimeSlider = _ref => {
|
|
|
44
43
|
start -= 1;
|
|
45
44
|
}
|
|
46
45
|
}
|
|
47
|
-
|
|
48
46
|
setStartTime(start);
|
|
49
47
|
setEndTime(end);
|
|
50
48
|
onChange({
|
|
@@ -97,9 +95,8 @@ var TimeSlider = _ref => {
|
|
|
97
95
|
className: "tick-label",
|
|
98
96
|
key: index
|
|
99
97
|
}, "".concat(index + 1, ":00"))))));
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
var PopOvers = props => {
|
|
98
|
+
}
|
|
99
|
+
function PopOvers(props) {
|
|
103
100
|
var {
|
|
104
101
|
startTime,
|
|
105
102
|
endTime,
|
|
@@ -113,8 +110,8 @@ var PopOvers = props => {
|
|
|
113
110
|
var [firstTime, setFirstTime] = useState(swapTimes ? endTime : startTime);
|
|
114
111
|
var [secondTime, setSecondTime] = useState(swapTimes ? startTime : endTime);
|
|
115
112
|
var firstTimeRef = useRef(null);
|
|
116
|
-
var secondTimeRef = useRef(null);
|
|
117
|
-
|
|
113
|
+
var secondTimeRef = useRef(null);
|
|
114
|
+
// Keep track of selection in both time inputs
|
|
118
115
|
var firstTimeSelectionRef = useRef(null);
|
|
119
116
|
var secondTimeSelectionRef = useRef(null);
|
|
120
117
|
useEffect(function setTimeOnPropTimeChange() {
|
|
@@ -124,17 +121,13 @@ var PopOvers = props => {
|
|
|
124
121
|
useEffect(function setFocusOnSwapTimesChange() {
|
|
125
122
|
if (firstTimeSelectionRef.current !== null) {
|
|
126
123
|
var _secondTimeRef$curren;
|
|
127
|
-
|
|
128
124
|
(_secondTimeRef$curren = secondTimeRef.current) === null || _secondTimeRef$curren === void 0 ? void 0 : _secondTimeRef$curren.setSelection(firstTimeSelectionRef.current);
|
|
129
125
|
}
|
|
130
|
-
|
|
131
126
|
if (secondTimeSelectionRef.current !== null) {
|
|
132
127
|
var _firstTimeRef$current;
|
|
133
|
-
|
|
134
128
|
(_firstTimeRef$current = firstTimeRef.current) === null || _firstTimeRef$current === void 0 ? void 0 : _firstTimeRef$current.setSelection(secondTimeSelectionRef.current);
|
|
135
129
|
}
|
|
136
130
|
}, [swapTimes]);
|
|
137
|
-
|
|
138
131
|
function onFirstTimeChange(value) {
|
|
139
132
|
if (startTime <= endTime) {
|
|
140
133
|
onStartTimeChange(value);
|
|
@@ -142,7 +135,6 @@ var PopOvers = props => {
|
|
|
142
135
|
onEndTimeChange(value);
|
|
143
136
|
}
|
|
144
137
|
}
|
|
145
|
-
|
|
146
138
|
function onSecondTimeChange(value) {
|
|
147
139
|
if (startTime <= endTime) {
|
|
148
140
|
onEndTimeChange(value);
|
|
@@ -150,7 +142,6 @@ var PopOvers = props => {
|
|
|
150
142
|
onStartTimeChange(value);
|
|
151
143
|
}
|
|
152
144
|
}
|
|
153
|
-
|
|
154
145
|
var onFirstTimeSelect = useCallback(selection => {
|
|
155
146
|
firstTimeSelectionRef.current = selection;
|
|
156
147
|
secondTimeSelectionRef.current = null;
|
|
@@ -200,12 +191,11 @@ var PopOvers = props => {
|
|
|
200
191
|
flexBasis: "calc(".concat((SECONDS_IN_DAY - secondTime) / SECONDS_IN_DAY * 100, "% - ").concat(POPOVER_WIDTH / 2, "px)")
|
|
201
192
|
}
|
|
202
193
|
}));
|
|
203
|
-
}
|
|
204
|
-
|
|
194
|
+
}
|
|
205
195
|
/**
|
|
206
196
|
* Shades the area between or outside of handles according to if start or endtime is greater.
|
|
207
197
|
*/
|
|
208
|
-
|
|
198
|
+
function TrackFills(props) {
|
|
209
199
|
var {
|
|
210
200
|
startTime,
|
|
211
201
|
endTime,
|
|
@@ -230,18 +220,18 @@ var TrackFills = props => {
|
|
|
230
220
|
transform: "translateX(".concat(startTime / SECONDS_IN_DAY * 100, "%) scaleX(").concat((endTime - startTime) / SECONDS_IN_DAY, ")")
|
|
231
221
|
}
|
|
232
222
|
}));
|
|
233
|
-
}
|
|
234
|
-
|
|
223
|
+
}
|
|
235
224
|
/**
|
|
236
225
|
* Creates a draggable handle the sets the time
|
|
237
226
|
*/
|
|
238
|
-
|
|
227
|
+
function Handle(props) {
|
|
239
228
|
var {
|
|
240
229
|
track,
|
|
241
230
|
time,
|
|
242
231
|
setTime,
|
|
243
232
|
'data-testid': dataTestId
|
|
244
233
|
} = props;
|
|
234
|
+
|
|
245
235
|
/**
|
|
246
236
|
* Takes the time and generate our translation string taking into account handle offset.
|
|
247
237
|
* The handle offset changes for the first and last tick range dynmaically. Normally,
|
|
@@ -249,11 +239,9 @@ var Handle = props => {
|
|
|
249
239
|
* end of the handle, requireing a relative offset range of 0 - 0.5, and 0.5 - 1 of handle size.
|
|
250
240
|
* @param t time in seconds
|
|
251
241
|
*/
|
|
252
|
-
|
|
253
242
|
var transform = useMemo(() => {
|
|
254
243
|
var ONE_HOUR = 60 * 60;
|
|
255
244
|
var handleOffset = HANDLE_SIZE / 2;
|
|
256
|
-
|
|
257
245
|
if (time < ONE_HOUR) {
|
|
258
246
|
handleOffset = time / ONE_HOUR * (HANDLE_SIZE / 2); // 0 - 0.5 Handle size
|
|
259
247
|
} else if (time > 23 * ONE_HOUR) {
|
|
@@ -266,14 +254,13 @@ var Handle = props => {
|
|
|
266
254
|
if (!track.current) {
|
|
267
255
|
return 0;
|
|
268
256
|
}
|
|
269
|
-
|
|
270
257
|
var trackRect = track.current.getBoundingClientRect();
|
|
271
|
-
var leftEdge = Math.max(clientX - trackRect.left, 0);
|
|
272
|
-
|
|
273
|
-
var preciseTime = SECONDS_IN_DAY * Math.min(1, leftEdge / trackRect.width);
|
|
274
|
-
|
|
275
|
-
var roundedTime = SNAP_NEAREST_MINUTES * Math.round(preciseTime / SNAP_NEAREST_MINUTES);
|
|
276
|
-
|
|
258
|
+
var leftEdge = Math.max(clientX - trackRect.left, 0);
|
|
259
|
+
// get position as 0-1 on slider and mulitply by seconds in a day to convert to time
|
|
260
|
+
var preciseTime = SECONDS_IN_DAY * Math.min(1, leftEdge / trackRect.width);
|
|
261
|
+
// snap to nearest N(5) minute interval
|
|
262
|
+
var roundedTime = SNAP_NEAREST_MINUTES * Math.round(preciseTime / SNAP_NEAREST_MINUTES);
|
|
263
|
+
// prevent over-rounding to 24:00:00
|
|
277
264
|
var limitMax = Math.min(SECONDS_IN_DAY, roundedTime);
|
|
278
265
|
return limitMax;
|
|
279
266
|
}, [track]);
|
|
@@ -322,7 +309,6 @@ var Handle = props => {
|
|
|
322
309
|
onMouseDown: handleMouseDown,
|
|
323
310
|
"data-testid": dataTestId
|
|
324
311
|
}));
|
|
325
|
-
}
|
|
326
|
-
|
|
312
|
+
}
|
|
327
313
|
export default TimeSlider;
|
|
328
314
|
//# sourceMappingURL=TimeSlider.js.map
|
package/dist/TimeSlider.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimeSlider.js","names":["React","useCallback","useMemo","useRef","useState","useEffect","classNames","TimeInput","StyleExports","HANDLE_SIZE","parseInt","POPOVER_WIDTH","SECONDS_IN_DAY","SNAP_NEAREST_MINUTES","TimeSlider","startTime","propStartTime","endTime","propEndTime","onChange","isStartModified","isEndModified","dataTestId","setStartTime","setEndTime","track","setTimeOnPropTimeChange","updateTime","newStartTime","newEndTime","start","end","handleStartTimeChange","handleEndTimeChange","Array","fill","map","value","index","PopOvers","props","onStartTimeChange","onEndTimeChange","swapTimes","firstTime","setFirstTime","secondTime","setSecondTime","firstTimeRef","secondTimeRef","firstTimeSelectionRef","secondTimeSelectionRef","setFocusOnSwapTimesChange","current","setSelection","onFirstTimeChange","onSecondTimeChange","onFirstTimeSelect","selection","onSecondTimeSelect","flexBasis","modified","undefined","TrackFills","transform","Handle","time","setTime","ONE_HOUR","handleOffset","calculatePositionAsTime","clientX","trackRect","getBoundingClientRect","leftEdge","Math","max","left","preciseTime","min","width","roundedTime","round","limitMax","handleMouseMove","handleMouseUp","window","removeEventListener","document","documentElement","classList","remove","startDragListening","addEventListener","add","stopDragListening","handleMouseDown","removeListenersOnUnmount"],"sources":["../src/TimeSlider.tsx"],"sourcesContent":["/* eslint-disable react/no-array-index-key */\n// array maps being used are static, this is fine.\n\nimport React, {\n useCallback,\n useMemo,\n useRef,\n useState,\n useEffect,\n} from 'react';\nimport classNames from 'classnames';\nimport TimeInput, { SelectionSegment, TimeInputElement } from './TimeInput';\nimport StyleExports from './TimeSlider.module.scss';\nimport './TimeSlider.scss';\n\nconst HANDLE_SIZE = parseInt(StyleExports['handle-size'], 10);\nconst POPOVER_WIDTH = parseInt(StyleExports['popover-width'], 10);\nconst SECONDS_IN_DAY = 24 * 60 * 60 - 1; // Max is actually 23:59:59\nconst SNAP_NEAREST_MINUTES = 5 * 60; // rounds in 5 minute intervals\n\ntype TimeSliderProps = {\n startTime: number;\n endTime: number;\n onChange(value: { startTime: number; endTime: number }): void;\n isStartModified?: boolean;\n isEndModified?: boolean;\n 'data-testid'?: string;\n};\n\n/**\n * Creates a time slider for setting a start and end time, that can also run overnight\n * @param props takes times in seconds 0 - 86399 and a callback\n */\nconst TimeSlider = ({\n startTime: propStartTime,\n endTime: propEndTime,\n onChange,\n isStartModified = false,\n isEndModified = false,\n 'data-testid': dataTestId,\n}: TimeSliderProps): JSX.Element => {\n const [startTime, setStartTime] = useState(propStartTime);\n const [endTime, setEndTime] = useState(propEndTime);\n\n const track = useRef<HTMLDivElement>(null); // we need the track width while calulculating time from handle drag\n\n // updates state if props change\n useEffect(\n function setTimeOnPropTimeChange() {\n setStartTime(propStartTime);\n setEndTime(propEndTime);\n },\n [propStartTime, propEndTime]\n );\n\n const updateTime = useCallback(\n (newStartTime: number, newEndTime: number) => {\n let start = newStartTime;\n let end = newEndTime;\n if (start === end) {\n if (end < SECONDS_IN_DAY) {\n end += 1;\n } else {\n start -= 1;\n }\n }\n\n setStartTime(start);\n setEndTime(end);\n onChange({ startTime: start, endTime: end });\n },\n [setStartTime, setEndTime, onChange]\n );\n\n const handleStartTimeChange = useCallback(\n (newStartTime: number) => {\n updateTime(newStartTime, endTime);\n },\n [updateTime, endTime]\n );\n\n const handleEndTimeChange = useCallback(\n (newEndTime: number) => {\n updateTime(startTime, newEndTime);\n },\n [updateTime, startTime]\n );\n\n return (\n <div className=\"time-slider\" data-testid={dataTestId}>\n <PopOvers\n startTime={startTime}\n endTime={endTime}\n onStartTimeChange={handleStartTimeChange}\n onEndTimeChange={handleEndTimeChange}\n isStartModified={isStartModified}\n isEndModified={isEndModified}\n />\n <div className=\"track\" ref={track}>\n <TrackFills startTime={startTime} endTime={endTime} />\n <div className=\"ticks\">\n {Array(24)\n .fill(null)\n .map((value, index) => (\n <div className=\"tick\" key={index} />\n ))}\n </div>\n <Handle\n track={track}\n time={startTime}\n setTime={handleStartTimeChange}\n />\n <Handle track={track} time={endTime} setTime={handleEndTimeChange} />\n </div>\n\n <div className=\"tick-labels\">\n <div className=\"tick-label\">0:00</div>\n <div className=\"tick-label-wrapper\">\n {Array(24)\n .fill(null)\n .map((value, index) => (\n <div className=\"tick-label\" key={index}>{`${index + 1}:00`}</div>\n ))}\n </div>\n </div>\n </div>\n );\n};\n\ntype PopOversProps = {\n startTime: number;\n endTime: number;\n onStartTimeChange(time: number): void;\n onEndTimeChange(time: number): void;\n isStartModified: boolean;\n isEndModified: boolean;\n 'data-testid'?: string;\n};\n\nconst PopOvers = (props: PopOversProps): JSX.Element => {\n const {\n startTime,\n endTime,\n onStartTimeChange,\n onEndTimeChange,\n isStartModified,\n isEndModified,\n 'data-testid': dataTestId,\n } = props;\n\n const swapTimes = startTime > endTime;\n\n const [firstTime, setFirstTime] = useState(swapTimes ? endTime : startTime);\n const [secondTime, setSecondTime] = useState(swapTimes ? startTime : endTime);\n const firstTimeRef = useRef<TimeInputElement>(null);\n const secondTimeRef = useRef<TimeInputElement>(null);\n // Keep track of selection in both time inputs\n const firstTimeSelectionRef = useRef<SelectionSegment | null>(null);\n const secondTimeSelectionRef = useRef<SelectionSegment | null>(null);\n\n useEffect(\n function setTimeOnPropTimeChange() {\n setFirstTime(startTime > endTime ? endTime : startTime);\n setSecondTime(startTime > endTime ? startTime : endTime);\n },\n [startTime, endTime]\n );\n\n useEffect(\n function setFocusOnSwapTimesChange() {\n if (firstTimeSelectionRef.current !== null) {\n secondTimeRef.current?.setSelection(firstTimeSelectionRef.current);\n }\n if (secondTimeSelectionRef.current !== null) {\n firstTimeRef.current?.setSelection(secondTimeSelectionRef.current);\n }\n },\n [swapTimes]\n );\n\n function onFirstTimeChange(value: number) {\n if (startTime <= endTime) {\n onStartTimeChange(value);\n } else {\n onEndTimeChange(value);\n }\n }\n\n function onSecondTimeChange(value: number) {\n if (startTime <= endTime) {\n onEndTimeChange(value);\n } else {\n onStartTimeChange(value);\n }\n }\n\n const onFirstTimeSelect = useCallback(selection => {\n firstTimeSelectionRef.current = selection;\n secondTimeSelectionRef.current = null;\n }, []);\n\n const onSecondTimeSelect = useCallback(selection => {\n firstTimeSelectionRef.current = null;\n secondTimeSelectionRef.current = selection;\n }, []);\n\n return (\n <div className=\"time-slider-popovers\">\n <div\n className=\"flex\"\n style={{\n flexBasis: `calc(${(firstTime / SECONDS_IN_DAY) * 100}% - ${\n POPOVER_WIDTH / 2\n }px)`,\n }}\n />\n <div className=\"handle-popper\">\n <label\n className={classNames({\n modified: swapTimes ? isEndModified : isStartModified,\n })}\n >\n {swapTimes ? 'End Time' : 'Start Time'}\n </label>\n <TimeInput\n ref={firstTimeRef}\n allowValueWrapping={false}\n value={firstTime}\n onChange={onFirstTimeChange}\n onSelect={onFirstTimeSelect}\n data-testid={\n dataTestId !== undefined ? `${dataTestId}-input-1` : undefined\n }\n />\n </div>\n <div className=\"flex-spacer\" />\n <div className=\"handle-popper\">\n <label\n className={classNames({\n modified: swapTimes ? isStartModified : isEndModified,\n })}\n >\n {swapTimes ? 'Start Time' : 'End Time'}\n </label>\n <TimeInput\n ref={secondTimeRef}\n allowValueWrapping={false}\n value={secondTime}\n onChange={onSecondTimeChange}\n onSelect={onSecondTimeSelect}\n data-testid={\n dataTestId !== undefined ? `${dataTestId}-input-2` : undefined\n }\n />\n </div>\n <div\n className=\"flex\"\n style={{\n flexBasis: `calc(${\n ((SECONDS_IN_DAY - secondTime) / SECONDS_IN_DAY) * 100\n }% - ${POPOVER_WIDTH / 2}px)`,\n }}\n />\n </div>\n );\n};\n\ntype TrackFillsProps = {\n startTime: number;\n endTime: number;\n 'data-testid'?: string;\n};\n\n/**\n * Shades the area between or outside of handles according to if start or endtime is greater.\n */\nconst TrackFills = (props: TrackFillsProps): JSX.Element => {\n const { startTime, endTime, 'data-testid': dataTestId } = props;\n return (\n <div className=\"track-fills\" data-testid={dataTestId}>\n {startTime > endTime && (\n <>\n <div\n className=\"track-fill track-fill-start\"\n style={{ transform: `scaleX(${endTime / SECONDS_IN_DAY})` }}\n />\n <div\n className=\"track-fill track-fill-end\"\n style={{\n transform: `scaleX(${\n (SECONDS_IN_DAY - startTime) / SECONDS_IN_DAY\n })`,\n }}\n />\n </>\n )}\n {startTime < endTime && (\n <div\n className=\"track-fill track-fill-middle\"\n style={{\n transform: `translateX(${\n (startTime / SECONDS_IN_DAY) * 100\n }%) scaleX(${(endTime - startTime) / SECONDS_IN_DAY})`,\n }}\n />\n )}\n </div>\n );\n};\n\ntype HandleProps = {\n track: React.RefObject<HTMLDivElement>;\n time: number;\n setTime(time: number): void;\n 'data-testid'?: string;\n};\n\n/**\n * Creates a draggable handle the sets the time\n */\nconst Handle = (props: HandleProps): JSX.Element => {\n const { track, time, setTime, 'data-testid': dataTestId } = props;\n\n /**\n * Takes the time and generate our translation string taking into account handle offset.\n * The handle offset changes for the first and last tick range dynmaically. Normally,\n * the center of the handle (size/2) is the selection origin, but at edges, it becomes either\n * end of the handle, requireing a relative offset range of 0 - 0.5, and 0.5 - 1 of handle size.\n * @param t time in seconds\n */\n const transform = useMemo(() => {\n const ONE_HOUR = 60 * 60;\n let handleOffset = HANDLE_SIZE / 2;\n if (time < ONE_HOUR) {\n handleOffset = (time / ONE_HOUR) * (HANDLE_SIZE / 2); // 0 - 0.5 Handle size\n } else if (time > 23 * ONE_HOUR) {\n handleOffset =\n HANDLE_SIZE / 2 +\n (1 / (SECONDS_IN_DAY - 23 * ONE_HOUR)) *\n (time - 23 * ONE_HOUR) *\n (HANDLE_SIZE / 2); // 0.5 - 1 Handle size\n }\n return `translateX(calc(${\n (time / SECONDS_IN_DAY) * 100\n }% - ${handleOffset}px))`;\n }, [time]);\n\n const calculatePositionAsTime = useCallback(\n (clientX: number) => {\n if (!track.current) {\n return 0;\n }\n const trackRect = track.current.getBoundingClientRect();\n const leftEdge = Math.max(clientX - trackRect.left, 0);\n // get position as 0-1 on slider and mulitply by seconds in a day to convert to time\n const preciseTime =\n SECONDS_IN_DAY * Math.min(1, leftEdge / trackRect.width);\n // snap to nearest N(5) minute interval\n const roundedTime =\n SNAP_NEAREST_MINUTES * Math.round(preciseTime / SNAP_NEAREST_MINUTES);\n // prevent over-rounding to 24:00:00\n const limitMax = Math.min(SECONDS_IN_DAY, roundedTime);\n return limitMax;\n },\n [track]\n );\n\n const handleMouseMove = useCallback(\n ({ clientX }: MouseEvent) => {\n setTime(calculatePositionAsTime(clientX));\n },\n [setTime, calculatePositionAsTime]\n );\n\n const handleMouseUp = useCallback(\n ({ clientX }: MouseEvent) => {\n setTime(calculatePositionAsTime(clientX));\n\n window.removeEventListener('mousemove', handleMouseMove);\n window.removeEventListener('mouseup', handleMouseUp);\n document.documentElement.classList.remove('drag-pointer-events-none');\n },\n [setTime, calculatePositionAsTime, handleMouseMove]\n );\n\n const startDragListening = useCallback(() => {\n window.addEventListener('mousemove', handleMouseMove);\n window.addEventListener('mouseup', handleMouseUp);\n document.documentElement.classList.add('drag-pointer-events-none');\n }, [handleMouseMove, handleMouseUp]);\n\n const stopDragListening = useCallback(() => {\n window.removeEventListener('mousemove', handleMouseMove);\n window.removeEventListener('mouseup', handleMouseUp);\n document.documentElement.classList.remove('drag-pointer-events-none');\n }, [handleMouseMove, handleMouseUp]);\n\n const handleMouseDown = useCallback(() => {\n startDragListening();\n }, [startDragListening]);\n\n useEffect(\n function removeListenersOnUnmount() {\n return () => {\n stopDragListening();\n };\n },\n [stopDragListening]\n );\n\n return (\n <div className=\"handle-track\" style={{ transform }}>\n <button\n className=\"handle\"\n type=\"button\"\n aria-label=\"Change time\"\n onMouseDown={handleMouseDown}\n data-testid={dataTestId}\n />\n </div>\n );\n};\n\nexport default TimeSlider;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TimeSlider.js","names":["React","useCallback","useMemo","useRef","useState","useEffect","classNames","TimeInput","StyleExports","HANDLE_SIZE","parseInt","POPOVER_WIDTH","SECONDS_IN_DAY","SNAP_NEAREST_MINUTES","TimeSlider","startTime","propStartTime","endTime","propEndTime","onChange","isStartModified","isEndModified","dataTestId","setStartTime","setEndTime","track","setTimeOnPropTimeChange","updateTime","newStartTime","newEndTime","start","end","handleStartTimeChange","handleEndTimeChange","Array","fill","map","value","index","PopOvers","props","onStartTimeChange","onEndTimeChange","swapTimes","firstTime","setFirstTime","secondTime","setSecondTime","firstTimeRef","secondTimeRef","firstTimeSelectionRef","secondTimeSelectionRef","setFocusOnSwapTimesChange","current","setSelection","onFirstTimeChange","onSecondTimeChange","onFirstTimeSelect","selection","onSecondTimeSelect","flexBasis","modified","undefined","TrackFills","transform","Handle","time","setTime","ONE_HOUR","handleOffset","calculatePositionAsTime","clientX","trackRect","getBoundingClientRect","leftEdge","Math","max","left","preciseTime","min","width","roundedTime","round","limitMax","handleMouseMove","handleMouseUp","window","removeEventListener","document","documentElement","classList","remove","startDragListening","addEventListener","add","stopDragListening","handleMouseDown","removeListenersOnUnmount"],"sources":["../src/TimeSlider.tsx"],"sourcesContent":["/* eslint-disable react/no-array-index-key */\n// array maps being used are static, this is fine.\n\nimport React, {\n useCallback,\n useMemo,\n useRef,\n useState,\n useEffect,\n} from 'react';\nimport classNames from 'classnames';\nimport TimeInput, { SelectionSegment, TimeInputElement } from './TimeInput';\nimport StyleExports from './TimeSlider.module.scss';\nimport './TimeSlider.scss';\n\nconst HANDLE_SIZE = parseInt(StyleExports['handle-size'], 10);\nconst POPOVER_WIDTH = parseInt(StyleExports['popover-width'], 10);\nconst SECONDS_IN_DAY = 24 * 60 * 60 - 1; // Max is actually 23:59:59\nconst SNAP_NEAREST_MINUTES = 5 * 60; // rounds in 5 minute intervals\n\ntype TimeSliderProps = {\n startTime: number;\n endTime: number;\n onChange(value: { startTime: number; endTime: number }): void;\n isStartModified?: boolean;\n isEndModified?: boolean;\n 'data-testid'?: string;\n};\n\n/**\n * Creates a time slider for setting a start and end time, that can also run overnight\n * @param props takes times in seconds 0 - 86399 and a callback\n */\nfunction TimeSlider({\n startTime: propStartTime,\n endTime: propEndTime,\n onChange,\n isStartModified = false,\n isEndModified = false,\n 'data-testid': dataTestId,\n}: TimeSliderProps): JSX.Element {\n const [startTime, setStartTime] = useState(propStartTime);\n const [endTime, setEndTime] = useState(propEndTime);\n\n const track = useRef<HTMLDivElement>(null); // we need the track width while calulculating time from handle drag\n\n // updates state if props change\n useEffect(\n function setTimeOnPropTimeChange() {\n setStartTime(propStartTime);\n setEndTime(propEndTime);\n },\n [propStartTime, propEndTime]\n );\n\n const updateTime = useCallback(\n (newStartTime: number, newEndTime: number) => {\n let start = newStartTime;\n let end = newEndTime;\n if (start === end) {\n if (end < SECONDS_IN_DAY) {\n end += 1;\n } else {\n start -= 1;\n }\n }\n\n setStartTime(start);\n setEndTime(end);\n onChange({ startTime: start, endTime: end });\n },\n [setStartTime, setEndTime, onChange]\n );\n\n const handleStartTimeChange = useCallback(\n (newStartTime: number) => {\n updateTime(newStartTime, endTime);\n },\n [updateTime, endTime]\n );\n\n const handleEndTimeChange = useCallback(\n (newEndTime: number) => {\n updateTime(startTime, newEndTime);\n },\n [updateTime, startTime]\n );\n\n return (\n <div className=\"time-slider\" data-testid={dataTestId}>\n <PopOvers\n startTime={startTime}\n endTime={endTime}\n onStartTimeChange={handleStartTimeChange}\n onEndTimeChange={handleEndTimeChange}\n isStartModified={isStartModified}\n isEndModified={isEndModified}\n />\n <div className=\"track\" ref={track}>\n <TrackFills startTime={startTime} endTime={endTime} />\n <div className=\"ticks\">\n {Array(24)\n .fill(null)\n .map((value, index) => (\n <div className=\"tick\" key={index} />\n ))}\n </div>\n <Handle\n track={track}\n time={startTime}\n setTime={handleStartTimeChange}\n />\n <Handle track={track} time={endTime} setTime={handleEndTimeChange} />\n </div>\n\n <div className=\"tick-labels\">\n <div className=\"tick-label\">0:00</div>\n <div className=\"tick-label-wrapper\">\n {Array(24)\n .fill(null)\n .map((value, index) => (\n <div className=\"tick-label\" key={index}>{`${index + 1}:00`}</div>\n ))}\n </div>\n </div>\n </div>\n );\n}\n\ntype PopOversProps = {\n startTime: number;\n endTime: number;\n onStartTimeChange(time: number): void;\n onEndTimeChange(time: number): void;\n isStartModified: boolean;\n isEndModified: boolean;\n 'data-testid'?: string;\n};\n\nfunction PopOvers(props: PopOversProps): JSX.Element {\n const {\n startTime,\n endTime,\n onStartTimeChange,\n onEndTimeChange,\n isStartModified,\n isEndModified,\n 'data-testid': dataTestId,\n } = props;\n\n const swapTimes = startTime > endTime;\n\n const [firstTime, setFirstTime] = useState(swapTimes ? endTime : startTime);\n const [secondTime, setSecondTime] = useState(swapTimes ? startTime : endTime);\n const firstTimeRef = useRef<TimeInputElement>(null);\n const secondTimeRef = useRef<TimeInputElement>(null);\n // Keep track of selection in both time inputs\n const firstTimeSelectionRef = useRef<SelectionSegment | null>(null);\n const secondTimeSelectionRef = useRef<SelectionSegment | null>(null);\n\n useEffect(\n function setTimeOnPropTimeChange() {\n setFirstTime(startTime > endTime ? endTime : startTime);\n setSecondTime(startTime > endTime ? startTime : endTime);\n },\n [startTime, endTime]\n );\n\n useEffect(\n function setFocusOnSwapTimesChange() {\n if (firstTimeSelectionRef.current !== null) {\n secondTimeRef.current?.setSelection(firstTimeSelectionRef.current);\n }\n if (secondTimeSelectionRef.current !== null) {\n firstTimeRef.current?.setSelection(secondTimeSelectionRef.current);\n }\n },\n [swapTimes]\n );\n\n function onFirstTimeChange(value: number) {\n if (startTime <= endTime) {\n onStartTimeChange(value);\n } else {\n onEndTimeChange(value);\n }\n }\n\n function onSecondTimeChange(value: number) {\n if (startTime <= endTime) {\n onEndTimeChange(value);\n } else {\n onStartTimeChange(value);\n }\n }\n\n const onFirstTimeSelect = useCallback(selection => {\n firstTimeSelectionRef.current = selection;\n secondTimeSelectionRef.current = null;\n }, []);\n\n const onSecondTimeSelect = useCallback(selection => {\n firstTimeSelectionRef.current = null;\n secondTimeSelectionRef.current = selection;\n }, []);\n\n return (\n <div className=\"time-slider-popovers\">\n <div\n className=\"flex\"\n style={{\n flexBasis: `calc(${(firstTime / SECONDS_IN_DAY) * 100}% - ${\n POPOVER_WIDTH / 2\n }px)`,\n }}\n />\n <div className=\"handle-popper\">\n <label\n className={classNames({\n modified: swapTimes ? isEndModified : isStartModified,\n })}\n >\n {swapTimes ? 'End Time' : 'Start Time'}\n </label>\n <TimeInput\n ref={firstTimeRef}\n allowValueWrapping={false}\n value={firstTime}\n onChange={onFirstTimeChange}\n onSelect={onFirstTimeSelect}\n data-testid={\n dataTestId !== undefined ? `${dataTestId}-input-1` : undefined\n }\n />\n </div>\n <div className=\"flex-spacer\" />\n <div className=\"handle-popper\">\n <label\n className={classNames({\n modified: swapTimes ? isStartModified : isEndModified,\n })}\n >\n {swapTimes ? 'Start Time' : 'End Time'}\n </label>\n <TimeInput\n ref={secondTimeRef}\n allowValueWrapping={false}\n value={secondTime}\n onChange={onSecondTimeChange}\n onSelect={onSecondTimeSelect}\n data-testid={\n dataTestId !== undefined ? `${dataTestId}-input-2` : undefined\n }\n />\n </div>\n <div\n className=\"flex\"\n style={{\n flexBasis: `calc(${\n ((SECONDS_IN_DAY - secondTime) / SECONDS_IN_DAY) * 100\n }% - ${POPOVER_WIDTH / 2}px)`,\n }}\n />\n </div>\n );\n}\n\ntype TrackFillsProps = {\n startTime: number;\n endTime: number;\n 'data-testid'?: string;\n};\n\n/**\n * Shades the area between or outside of handles according to if start or endtime is greater.\n */\nfunction TrackFills(props: TrackFillsProps): JSX.Element {\n const { startTime, endTime, 'data-testid': dataTestId } = props;\n return (\n <div className=\"track-fills\" data-testid={dataTestId}>\n {startTime > endTime && (\n <>\n <div\n className=\"track-fill track-fill-start\"\n style={{ transform: `scaleX(${endTime / SECONDS_IN_DAY})` }}\n />\n <div\n className=\"track-fill track-fill-end\"\n style={{\n transform: `scaleX(${\n (SECONDS_IN_DAY - startTime) / SECONDS_IN_DAY\n })`,\n }}\n />\n </>\n )}\n {startTime < endTime && (\n <div\n className=\"track-fill track-fill-middle\"\n style={{\n transform: `translateX(${\n (startTime / SECONDS_IN_DAY) * 100\n }%) scaleX(${(endTime - startTime) / SECONDS_IN_DAY})`,\n }}\n />\n )}\n </div>\n );\n}\n\ntype HandleProps = {\n track: React.RefObject<HTMLDivElement>;\n time: number;\n setTime(time: number): void;\n 'data-testid'?: string;\n};\n\n/**\n * Creates a draggable handle the sets the time\n */\nfunction Handle(props: HandleProps): JSX.Element {\n const { track, time, setTime, 'data-testid': dataTestId } = props;\n\n /**\n * Takes the time and generate our translation string taking into account handle offset.\n * The handle offset changes for the first and last tick range dynmaically. Normally,\n * the center of the handle (size/2) is the selection origin, but at edges, it becomes either\n * end of the handle, requireing a relative offset range of 0 - 0.5, and 0.5 - 1 of handle size.\n * @param t time in seconds\n */\n const transform = useMemo(() => {\n const ONE_HOUR = 60 * 60;\n let handleOffset = HANDLE_SIZE / 2;\n if (time < ONE_HOUR) {\n handleOffset = (time / ONE_HOUR) * (HANDLE_SIZE / 2); // 0 - 0.5 Handle size\n } else if (time > 23 * ONE_HOUR) {\n handleOffset =\n HANDLE_SIZE / 2 +\n (1 / (SECONDS_IN_DAY - 23 * ONE_HOUR)) *\n (time - 23 * ONE_HOUR) *\n (HANDLE_SIZE / 2); // 0.5 - 1 Handle size\n }\n return `translateX(calc(${\n (time / SECONDS_IN_DAY) * 100\n }% - ${handleOffset}px))`;\n }, [time]);\n\n const calculatePositionAsTime = useCallback(\n (clientX: number) => {\n if (!track.current) {\n return 0;\n }\n const trackRect = track.current.getBoundingClientRect();\n const leftEdge = Math.max(clientX - trackRect.left, 0);\n // get position as 0-1 on slider and mulitply by seconds in a day to convert to time\n const preciseTime =\n SECONDS_IN_DAY * Math.min(1, leftEdge / trackRect.width);\n // snap to nearest N(5) minute interval\n const roundedTime =\n SNAP_NEAREST_MINUTES * Math.round(preciseTime / SNAP_NEAREST_MINUTES);\n // prevent over-rounding to 24:00:00\n const limitMax = Math.min(SECONDS_IN_DAY, roundedTime);\n return limitMax;\n },\n [track]\n );\n\n const handleMouseMove = useCallback(\n ({ clientX }: MouseEvent) => {\n setTime(calculatePositionAsTime(clientX));\n },\n [setTime, calculatePositionAsTime]\n );\n\n const handleMouseUp = useCallback(\n ({ clientX }: MouseEvent) => {\n setTime(calculatePositionAsTime(clientX));\n\n window.removeEventListener('mousemove', handleMouseMove);\n window.removeEventListener('mouseup', handleMouseUp);\n document.documentElement.classList.remove('drag-pointer-events-none');\n },\n [setTime, calculatePositionAsTime, handleMouseMove]\n );\n\n const startDragListening = useCallback(() => {\n window.addEventListener('mousemove', handleMouseMove);\n window.addEventListener('mouseup', handleMouseUp);\n document.documentElement.classList.add('drag-pointer-events-none');\n }, [handleMouseMove, handleMouseUp]);\n\n const stopDragListening = useCallback(() => {\n window.removeEventListener('mousemove', handleMouseMove);\n window.removeEventListener('mouseup', handleMouseUp);\n document.documentElement.classList.remove('drag-pointer-events-none');\n }, [handleMouseMove, handleMouseUp]);\n\n const handleMouseDown = useCallback(() => {\n startDragListening();\n }, [startDragListening]);\n\n useEffect(\n function removeListenersOnUnmount() {\n return () => {\n stopDragListening();\n };\n },\n [stopDragListening]\n );\n\n return (\n <div className=\"handle-track\" style={{ transform }}>\n <button\n className=\"handle\"\n type=\"button\"\n aria-label=\"Change time\"\n onMouseDown={handleMouseDown}\n data-testid={dataTestId}\n />\n </div>\n );\n}\n\nexport default TimeSlider;\n"],"mappings":"AAAA;AACA;;AAEA,OAAOA,KAAK,IACVC,WAAW,EACXC,OAAO,EACPC,MAAM,EACNC,QAAQ,EACRC,SAAS,QACJ,OAAO;AACd,OAAOC,UAAU,MAAM,YAAY;AAAC,OAC7BC,SAAS;AAAA,OACTC,YAAY;AAAA;AAGnB,IAAMC,WAAW,GAAGC,QAAQ,CAACF,YAAY,CAAC,aAAa,CAAC,EAAE,EAAE,CAAC;AAC7D,IAAMG,aAAa,GAAGD,QAAQ,CAACF,YAAY,CAAC,eAAe,CAAC,EAAE,EAAE,CAAC;AACjE,IAAMI,cAAc,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;AACzC,IAAMC,oBAAoB,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC;;AAWrC;AACA;AACA;AACA;AACA,SAASC,UAAU,OAOc;EAAA,IAPb;IAClBC,SAAS,EAAEC,aAAa;IACxBC,OAAO,EAAEC,WAAW;IACpBC,QAAQ;IACRC,eAAe,GAAG,KAAK;IACvBC,aAAa,GAAG,KAAK;IACrB,aAAa,EAAEC;EACA,CAAC;EAChB,IAAM,CAACP,SAAS,EAAEQ,YAAY,CAAC,GAAGnB,QAAQ,CAACY,aAAa,CAAC;EACzD,IAAM,CAACC,OAAO,EAAEO,UAAU,CAAC,GAAGpB,QAAQ,CAACc,WAAW,CAAC;EAEnD,IAAMO,KAAK,GAAGtB,MAAM,CAAiB,IAAI,CAAC,CAAC,CAAC;;EAE5C;EACAE,SAAS,CACP,SAASqB,uBAAuB,GAAG;IACjCH,YAAY,CAACP,aAAa,CAAC;IAC3BQ,UAAU,CAACN,WAAW,CAAC;EACzB,CAAC,EACD,CAACF,aAAa,EAAEE,WAAW,CAAC,CAC7B;EAED,IAAMS,UAAU,GAAG1B,WAAW,CAC5B,CAAC2B,YAAoB,EAAEC,UAAkB,KAAK;IAC5C,IAAIC,KAAK,GAAGF,YAAY;IACxB,IAAIG,GAAG,GAAGF,UAAU;IACpB,IAAIC,KAAK,KAAKC,GAAG,EAAE;MACjB,IAAIA,GAAG,GAAGnB,cAAc,EAAE;QACxBmB,GAAG,IAAI,CAAC;MACV,CAAC,MAAM;QACLD,KAAK,IAAI,CAAC;MACZ;IACF;IAEAP,YAAY,CAACO,KAAK,CAAC;IACnBN,UAAU,CAACO,GAAG,CAAC;IACfZ,QAAQ,CAAC;MAAEJ,SAAS,EAAEe,KAAK;MAAEb,OAAO,EAAEc;IAAI,CAAC,CAAC;EAC9C,CAAC,EACD,CAACR,YAAY,EAAEC,UAAU,EAAEL,QAAQ,CAAC,CACrC;EAED,IAAMa,qBAAqB,GAAG/B,WAAW,CACtC2B,YAAoB,IAAK;IACxBD,UAAU,CAACC,YAAY,EAAEX,OAAO,CAAC;EACnC,CAAC,EACD,CAACU,UAAU,EAAEV,OAAO,CAAC,CACtB;EAED,IAAMgB,mBAAmB,GAAGhC,WAAW,CACpC4B,UAAkB,IAAK;IACtBF,UAAU,CAACZ,SAAS,EAAEc,UAAU,CAAC;EACnC,CAAC,EACD,CAACF,UAAU,EAAEZ,SAAS,CAAC,CACxB;EAED,oBACE;IAAK,SAAS,EAAC,aAAa;IAAC,eAAaO;EAAW,gBACnD,oBAAC,QAAQ;IACP,SAAS,EAAEP,SAAU;IACrB,OAAO,EAAEE,OAAQ;IACjB,iBAAiB,EAAEe,qBAAsB;IACzC,eAAe,EAAEC,mBAAoB;IACrC,eAAe,EAAEb,eAAgB;IACjC,aAAa,EAAEC;EAAc,EAC7B,eACF;IAAK,SAAS,EAAC,OAAO;IAAC,GAAG,EAAEI;EAAM,gBAChC,oBAAC,UAAU;IAAC,SAAS,EAAEV,SAAU;IAAC,OAAO,EAAEE;EAAQ,EAAG,eACtD;IAAK,SAAS,EAAC;EAAO,GACnBiB,KAAK,CAAC,EAAE,CAAC,CACPC,IAAI,CAAC,IAAI,CAAC,CACVC,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,kBAChB;IAAK,SAAS,EAAC,MAAM;IAAC,GAAG,EAAEA;EAAM,EAClC,CAAC,CACA,eACN,oBAAC,MAAM;IACL,KAAK,EAAEb,KAAM;IACb,IAAI,EAAEV,SAAU;IAChB,OAAO,EAAEiB;EAAsB,EAC/B,eACF,oBAAC,MAAM;IAAC,KAAK,EAAEP,KAAM;IAAC,IAAI,EAAER,OAAQ;IAAC,OAAO,EAAEgB;EAAoB,EAAG,CACjE,eAEN;IAAK,SAAS,EAAC;EAAa,gBAC1B;IAAK,SAAS,EAAC;EAAY,UAAW,eACtC;IAAK,SAAS,EAAC;EAAoB,GAChCC,KAAK,CAAC,EAAE,CAAC,CACPC,IAAI,CAAC,IAAI,CAAC,CACVC,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,kBAChB;IAAK,SAAS,EAAC,YAAY;IAAC,GAAG,EAAEA;EAAM,aAAKA,KAAK,GAAG,CAAC,SACtD,CAAC,CACA,CACF,CACF;AAEV;AAYA,SAASC,QAAQ,CAACC,KAAoB,EAAe;EACnD,IAAM;IACJzB,SAAS;IACTE,OAAO;IACPwB,iBAAiB;IACjBC,eAAe;IACftB,eAAe;IACfC,aAAa;IACb,aAAa,EAAEC;EACjB,CAAC,GAAGkB,KAAK;EAET,IAAMG,SAAS,GAAG5B,SAAS,GAAGE,OAAO;EAErC,IAAM,CAAC2B,SAAS,EAAEC,YAAY,CAAC,GAAGzC,QAAQ,CAACuC,SAAS,GAAG1B,OAAO,GAAGF,SAAS,CAAC;EAC3E,IAAM,CAAC+B,UAAU,EAAEC,aAAa,CAAC,GAAG3C,QAAQ,CAACuC,SAAS,GAAG5B,SAAS,GAAGE,OAAO,CAAC;EAC7E,IAAM+B,YAAY,GAAG7C,MAAM,CAAmB,IAAI,CAAC;EACnD,IAAM8C,aAAa,GAAG9C,MAAM,CAAmB,IAAI,CAAC;EACpD;EACA,IAAM+C,qBAAqB,GAAG/C,MAAM,CAA0B,IAAI,CAAC;EACnE,IAAMgD,sBAAsB,GAAGhD,MAAM,CAA0B,IAAI,CAAC;EAEpEE,SAAS,CACP,SAASqB,uBAAuB,GAAG;IACjCmB,YAAY,CAAC9B,SAAS,GAAGE,OAAO,GAAGA,OAAO,GAAGF,SAAS,CAAC;IACvDgC,aAAa,CAAChC,SAAS,GAAGE,OAAO,GAAGF,SAAS,GAAGE,OAAO,CAAC;EAC1D,CAAC,EACD,CAACF,SAAS,EAAEE,OAAO,CAAC,CACrB;EAEDZ,SAAS,CACP,SAAS+C,yBAAyB,GAAG;IACnC,IAAIF,qBAAqB,CAACG,OAAO,KAAK,IAAI,EAAE;MAAA;MAC1C,yBAAAJ,aAAa,CAACI,OAAO,0DAArB,sBAAuBC,YAAY,CAACJ,qBAAqB,CAACG,OAAO,CAAC;IACpE;IACA,IAAIF,sBAAsB,CAACE,OAAO,KAAK,IAAI,EAAE;MAAA;MAC3C,yBAAAL,YAAY,CAACK,OAAO,0DAApB,sBAAsBC,YAAY,CAACH,sBAAsB,CAACE,OAAO,CAAC;IACpE;EACF,CAAC,EACD,CAACV,SAAS,CAAC,CACZ;EAED,SAASY,iBAAiB,CAAClB,KAAa,EAAE;IACxC,IAAItB,SAAS,IAAIE,OAAO,EAAE;MACxBwB,iBAAiB,CAACJ,KAAK,CAAC;IAC1B,CAAC,MAAM;MACLK,eAAe,CAACL,KAAK,CAAC;IACxB;EACF;EAEA,SAASmB,kBAAkB,CAACnB,KAAa,EAAE;IACzC,IAAItB,SAAS,IAAIE,OAAO,EAAE;MACxByB,eAAe,CAACL,KAAK,CAAC;IACxB,CAAC,MAAM;MACLI,iBAAiB,CAACJ,KAAK,CAAC;IAC1B;EACF;EAEA,IAAMoB,iBAAiB,GAAGxD,WAAW,CAACyD,SAAS,IAAI;IACjDR,qBAAqB,CAACG,OAAO,GAAGK,SAAS;IACzCP,sBAAsB,CAACE,OAAO,GAAG,IAAI;EACvC,CAAC,EAAE,EAAE,CAAC;EAEN,IAAMM,kBAAkB,GAAG1D,WAAW,CAACyD,SAAS,IAAI;IAClDR,qBAAqB,CAACG,OAAO,GAAG,IAAI;IACpCF,sBAAsB,CAACE,OAAO,GAAGK,SAAS;EAC5C,CAAC,EAAE,EAAE,CAAC;EAEN,oBACE;IAAK,SAAS,EAAC;EAAsB,gBACnC;IACE,SAAS,EAAC,MAAM;IAChB,KAAK,EAAE;MACLE,SAAS,iBAAWhB,SAAS,GAAGhC,cAAc,GAAI,GAAG,iBACnDD,aAAa,GAAG,CAAC;IAErB;EAAE,EACF,eACF;IAAK,SAAS,EAAC;EAAe,gBAC5B;IACE,SAAS,EAAEL,UAAU,CAAC;MACpBuD,QAAQ,EAAElB,SAAS,GAAGtB,aAAa,GAAGD;IACxC,CAAC;EAAE,GAEFuB,SAAS,GAAG,UAAU,GAAG,YAAY,CAChC,eACR,oBAAC,SAAS;IACR,GAAG,EAAEK,YAAa;IAClB,kBAAkB,EAAE,KAAM;IAC1B,KAAK,EAAEJ,SAAU;IACjB,QAAQ,EAAEW,iBAAkB;IAC5B,QAAQ,EAAEE,iBAAkB;IAC5B,eACEnC,UAAU,KAAKwC,SAAS,aAAMxC,UAAU,gBAAawC;EACtD,EACD,CACE,eACN;IAAK,SAAS,EAAC;EAAa,EAAG,eAC/B;IAAK,SAAS,EAAC;EAAe,gBAC5B;IACE,SAAS,EAAExD,UAAU,CAAC;MACpBuD,QAAQ,EAAElB,SAAS,GAAGvB,eAAe,GAAGC;IAC1C,CAAC;EAAE,GAEFsB,SAAS,GAAG,YAAY,GAAG,UAAU,CAChC,eACR,oBAAC,SAAS;IACR,GAAG,EAAEM,aAAc;IACnB,kBAAkB,EAAE,KAAM;IAC1B,KAAK,EAAEH,UAAW;IAClB,QAAQ,EAAEU,kBAAmB;IAC7B,QAAQ,EAAEG,kBAAmB;IAC7B,eACErC,UAAU,KAAKwC,SAAS,aAAMxC,UAAU,gBAAawC;EACtD,EACD,CACE,eACN;IACE,SAAS,EAAC,MAAM;IAChB,KAAK,EAAE;MACLF,SAAS,iBACN,CAAChD,cAAc,GAAGkC,UAAU,IAAIlC,cAAc,GAAI,GAAG,iBACjDD,aAAa,GAAG,CAAC;IAC1B;EAAE,EACF,CACE;AAEV;AAQA;AACA;AACA;AACA,SAASoD,UAAU,CAACvB,KAAsB,EAAe;EACvD,IAAM;IAAEzB,SAAS;IAAEE,OAAO;IAAE,aAAa,EAAEK;EAAW,CAAC,GAAGkB,KAAK;EAC/D,oBACE;IAAK,SAAS,EAAC,aAAa;IAAC,eAAalB;EAAW,GAClDP,SAAS,GAAGE,OAAO,iBAClB,uDACE;IACE,SAAS,EAAC,6BAA6B;IACvC,KAAK,EAAE;MAAE+C,SAAS,mBAAY/C,OAAO,GAAGL,cAAc;IAAI;EAAE,EAC5D,eACF;IACE,SAAS,EAAC,2BAA2B;IACrC,KAAK,EAAE;MACLoD,SAAS,mBACP,CAACpD,cAAc,GAAGG,SAAS,IAAIH,cAAc;IAEjD;EAAE,EACF,CAEL,EACAG,SAAS,GAAGE,OAAO,iBAClB;IACE,SAAS,EAAC,8BAA8B;IACxC,KAAK,EAAE;MACL+C,SAAS,uBACNjD,SAAS,GAAGH,cAAc,GAAI,GAAG,uBACvB,CAACK,OAAO,GAAGF,SAAS,IAAIH,cAAc;IACrD;EAAE,EAEL,CACG;AAEV;AASA;AACA;AACA;AACA,SAASqD,MAAM,CAACzB,KAAkB,EAAe;EAC/C,IAAM;IAAEf,KAAK;IAAEyC,IAAI;IAAEC,OAAO;IAAE,aAAa,EAAE7C;EAAW,CAAC,GAAGkB,KAAK;;EAEjE;AACF;AACA;AACA;AACA;AACA;AACA;EACE,IAAMwB,SAAS,GAAG9D,OAAO,CAAC,MAAM;IAC9B,IAAMkE,QAAQ,GAAG,EAAE,GAAG,EAAE;IACxB,IAAIC,YAAY,GAAG5D,WAAW,GAAG,CAAC;IAClC,IAAIyD,IAAI,GAAGE,QAAQ,EAAE;MACnBC,YAAY,GAAIH,IAAI,GAAGE,QAAQ,IAAK3D,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC;IACxD,CAAC,MAAM,IAAIyD,IAAI,GAAG,EAAE,GAAGE,QAAQ,EAAE;MAC/BC,YAAY,GACV5D,WAAW,GAAG,CAAC,GACd,CAAC,IAAIG,cAAc,GAAG,EAAE,GAAGwD,QAAQ,CAAC,IAClCF,IAAI,GAAG,EAAE,GAAGE,QAAQ,CAAC,IACrB3D,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC;IACzB;;IACA,iCACGyD,IAAI,GAAGtD,cAAc,GAAI,GAAG,iBACxByD,YAAY;EACrB,CAAC,EAAE,CAACH,IAAI,CAAC,CAAC;EAEV,IAAMI,uBAAuB,GAAGrE,WAAW,CACxCsE,OAAe,IAAK;IACnB,IAAI,CAAC9C,KAAK,CAAC4B,OAAO,EAAE;MAClB,OAAO,CAAC;IACV;IACA,IAAMmB,SAAS,GAAG/C,KAAK,CAAC4B,OAAO,CAACoB,qBAAqB,EAAE;IACvD,IAAMC,QAAQ,GAAGC,IAAI,CAACC,GAAG,CAACL,OAAO,GAAGC,SAAS,CAACK,IAAI,EAAE,CAAC,CAAC;IACtD;IACA,IAAMC,WAAW,GACflE,cAAc,GAAG+D,IAAI,CAACI,GAAG,CAAC,CAAC,EAAEL,QAAQ,GAAGF,SAAS,CAACQ,KAAK,CAAC;IAC1D;IACA,IAAMC,WAAW,GACfpE,oBAAoB,GAAG8D,IAAI,CAACO,KAAK,CAACJ,WAAW,GAAGjE,oBAAoB,CAAC;IACvE;IACA,IAAMsE,QAAQ,GAAGR,IAAI,CAACI,GAAG,CAACnE,cAAc,EAAEqE,WAAW,CAAC;IACtD,OAAOE,QAAQ;EACjB,CAAC,EACD,CAAC1D,KAAK,CAAC,CACR;EAED,IAAM2D,eAAe,GAAGnF,WAAW,CACjC,SAA6B;IAAA,IAA5B;MAAEsE;IAAoB,CAAC;IACtBJ,OAAO,CAACG,uBAAuB,CAACC,OAAO,CAAC,CAAC;EAC3C,CAAC,EACD,CAACJ,OAAO,EAAEG,uBAAuB,CAAC,CACnC;EAED,IAAMe,aAAa,GAAGpF,WAAW,CAC/B,SAA6B;IAAA,IAA5B;MAAEsE;IAAoB,CAAC;IACtBJ,OAAO,CAACG,uBAAuB,CAACC,OAAO,CAAC,CAAC;IAEzCe,MAAM,CAACC,mBAAmB,CAAC,WAAW,EAAEH,eAAe,CAAC;IACxDE,MAAM,CAACC,mBAAmB,CAAC,SAAS,EAAEF,aAAa,CAAC;IACpDG,QAAQ,CAACC,eAAe,CAACC,SAAS,CAACC,MAAM,CAAC,0BAA0B,CAAC;EACvE,CAAC,EACD,CAACxB,OAAO,EAAEG,uBAAuB,EAAEc,eAAe,CAAC,CACpD;EAED,IAAMQ,kBAAkB,GAAG3F,WAAW,CAAC,MAAM;IAC3CqF,MAAM,CAACO,gBAAgB,CAAC,WAAW,EAAET,eAAe,CAAC;IACrDE,MAAM,CAACO,gBAAgB,CAAC,SAAS,EAAER,aAAa,CAAC;IACjDG,QAAQ,CAACC,eAAe,CAACC,SAAS,CAACI,GAAG,CAAC,0BAA0B,CAAC;EACpE,CAAC,EAAE,CAACV,eAAe,EAAEC,aAAa,CAAC,CAAC;EAEpC,IAAMU,iBAAiB,GAAG9F,WAAW,CAAC,MAAM;IAC1CqF,MAAM,CAACC,mBAAmB,CAAC,WAAW,EAAEH,eAAe,CAAC;IACxDE,MAAM,CAACC,mBAAmB,CAAC,SAAS,EAAEF,aAAa,CAAC;IACpDG,QAAQ,CAACC,eAAe,CAACC,SAAS,CAACC,MAAM,CAAC,0BAA0B,CAAC;EACvE,CAAC,EAAE,CAACP,eAAe,EAAEC,aAAa,CAAC,CAAC;EAEpC,IAAMW,eAAe,GAAG/F,WAAW,CAAC,MAAM;IACxC2F,kBAAkB,EAAE;EACtB,CAAC,EAAE,CAACA,kBAAkB,CAAC,CAAC;EAExBvF,SAAS,CACP,SAAS4F,wBAAwB,GAAG;IAClC,OAAO,MAAM;MACXF,iBAAiB,EAAE;IACrB,CAAC;EACH,CAAC,EACD,CAACA,iBAAiB,CAAC,CACpB;EAED,oBACE;IAAK,SAAS,EAAC,cAAc;IAAC,KAAK,EAAE;MAAE/B;IAAU;EAAE,gBACjD;IACE,SAAS,EAAC,QAAQ;IAClB,IAAI,EAAC,QAAQ;IACb,cAAW,aAAa;IACxB,WAAW,EAAEgC,eAAgB;IAC7B,eAAa1E;EAAW,EACxB,CACE;AAEV;AAEA,eAAeR,UAAU"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import Button from './Button';
|
|
3
3
|
import './ToastNotification.scss';
|
|
4
|
-
|
|
4
|
+
type ToastNotificationProps = {
|
|
5
5
|
buttons?: typeof Button[];
|
|
6
6
|
classNames?: string;
|
|
7
7
|
isShown?: boolean;
|
|
@@ -11,11 +11,11 @@ declare type ToastNotificationProps = {
|
|
|
11
11
|
onClick?: React.EventHandler<React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>>;
|
|
12
12
|
onDismiss?: React.MouseEventHandler<HTMLButtonElement>;
|
|
13
13
|
};
|
|
14
|
-
declare
|
|
15
|
-
|
|
16
|
-
TYPE: Readonly<{
|
|
17
|
-
ERROR:
|
|
14
|
+
declare function ToastNotification({ buttons, isShown, classNames: classNamesProp, message, type, onClick, onDismiss, 'data-testid': dataTestId, }: ToastNotificationProps): JSX.Element;
|
|
15
|
+
declare namespace ToastNotification {
|
|
16
|
+
var TYPE: Readonly<{
|
|
17
|
+
ERROR: "error";
|
|
18
18
|
}>;
|
|
19
|
-
}
|
|
19
|
+
}
|
|
20
20
|
export default ToastNotification;
|
|
21
21
|
//# sourceMappingURL=ToastNotification.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToastNotification.d.ts","sourceRoot":"","sources":["../src/ToastNotification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,OAAO,0BAA0B,CAAC;AAElC,
|
|
1
|
+
{"version":3,"file":"ToastNotification.d.ts","sourceRoot":"","sources":["../src/ToastNotification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,OAAO,0BAA0B,CAAC;AAElC,KAAK,sBAAsB,GAAG;IAC5B,OAAO,CAAC,EAAE,OAAO,MAAM,EAAE,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,CAC1B,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CACvE,CAAC;IACF,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CACxD,CAAC;AAEF,iBAAS,iBAAiB,CAAC,EACzB,OAAO,EACP,OAAe,EACf,UAAU,EAAE,cAAc,EAC1B,OAAO,EACP,IAAI,EACJ,OAAO,EACP,SAAS,EACT,aAAa,EAAE,UAAU,GAC1B,EAAE,sBAAsB,GAAG,GAAG,CAAC,OAAO,CA0CtC;kBAnDQ,iBAAiB;;;;;AAyD1B,eAAe,iBAAiB,CAAC"}
|
|
@@ -5,8 +5,7 @@ import { vsClose } from '@deephaven/icons';
|
|
|
5
5
|
import Button from "./Button.js";
|
|
6
6
|
import ThemeExport from "./ThemeExport.js";
|
|
7
7
|
import "./ToastNotification.css";
|
|
8
|
-
|
|
9
|
-
var ToastNotification = _ref => {
|
|
8
|
+
function ToastNotification(_ref) {
|
|
10
9
|
var {
|
|
11
10
|
buttons,
|
|
12
11
|
isShown = false,
|
|
@@ -49,8 +48,7 @@ var ToastNotification = _ref => {
|
|
|
49
48
|
className: "my-2",
|
|
50
49
|
onClick: onDismiss
|
|
51
50
|
})));
|
|
52
|
-
}
|
|
53
|
-
|
|
51
|
+
}
|
|
54
52
|
ToastNotification.TYPE = Object.freeze({
|
|
55
53
|
ERROR: 'error'
|
|
56
54
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToastNotification.js","names":["React","classNames","CSSTransition","vsClose","Button","ThemeExport","ToastNotification","buttons","isShown","classNamesProp","message","type","onClick","onDismiss","dataTestId","hasButtons","length","transitionMs","transitionSlowMs","TYPE","Object","freeze","ERROR"],"sources":["../src/ToastNotification.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { CSSTransition } from 'react-transition-group';\nimport { vsClose } from '@deephaven/icons';\nimport Button from './Button';\nimport ThemeExport from './ThemeExport';\nimport './ToastNotification.scss';\n\ntype ToastNotificationProps = {\n buttons?: typeof Button[];\n classNames?: string;\n isShown?: boolean;\n message?: string;\n type?: string;\n 'data-testid'?: string;\n\n onClick?: React.EventHandler<\n React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>\n >;\n onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n};\n\
|
|
1
|
+
{"version":3,"file":"ToastNotification.js","names":["React","classNames","CSSTransition","vsClose","Button","ThemeExport","ToastNotification","buttons","isShown","classNamesProp","message","type","onClick","onDismiss","dataTestId","hasButtons","length","transitionMs","transitionSlowMs","TYPE","Object","freeze","ERROR"],"sources":["../src/ToastNotification.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { CSSTransition } from 'react-transition-group';\nimport { vsClose } from '@deephaven/icons';\nimport Button from './Button';\nimport ThemeExport from './ThemeExport';\nimport './ToastNotification.scss';\n\ntype ToastNotificationProps = {\n buttons?: typeof Button[];\n classNames?: string;\n isShown?: boolean;\n message?: string;\n type?: string;\n 'data-testid'?: string;\n\n onClick?: React.EventHandler<\n React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>\n >;\n onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n};\n\nfunction ToastNotification({\n buttons,\n isShown = false,\n classNames: classNamesProp,\n message,\n type,\n onClick,\n onDismiss,\n 'data-testid': dataTestId,\n}: ToastNotificationProps): JSX.Element {\n const hasButtons = buttons && buttons.length !== 0;\n\n return (\n <CSSTransition\n in={isShown}\n timeout={ThemeExport.transitionMs}\n classNames=\"toast-notification-slide-up\"\n mountOnEnter\n unmountOnExit\n >\n <div\n className={classNames('toast-notification', classNamesProp, type)}\n role=\"presentation\"\n onClick={onClick}\n onKeyPress={onClick}\n data-testid={dataTestId}\n >\n <div className=\"message-container\">\n <span className=\"message\">{message}</span>\n </div>\n <CSSTransition\n in={hasButtons}\n timeout={ThemeExport.transitionSlowMs}\n classNames=\"fade\"\n mountOnEnter\n unmountOnExit\n >\n <div className=\"buttons-container\">{buttons}</div>\n </CSSTransition>\n {onDismiss && (\n <Button\n kind=\"ghost\"\n icon={vsClose}\n tooltip=\"Close notification\"\n className=\"my-2\"\n onClick={onDismiss}\n />\n )}\n </div>\n </CSSTransition>\n );\n}\n\nToastNotification.TYPE = Object.freeze({\n ERROR: 'error',\n});\n\nexport default ToastNotification;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,aAAa,QAAQ,wBAAwB;AACtD,SAASC,OAAO,QAAQ,kBAAkB;AAAC,OACpCC,MAAM;AAAA,OACNC,WAAW;AAAA;AAiBlB,SAASC,iBAAiB,OASc;EAAA,IATb;IACzBC,OAAO;IACPC,OAAO,GAAG,KAAK;IACfP,UAAU,EAAEQ,cAAc;IAC1BC,OAAO;IACPC,IAAI;IACJC,OAAO;IACPC,SAAS;IACT,aAAa,EAAEC;EACO,CAAC;EACvB,IAAMC,UAAU,GAAGR,OAAO,IAAIA,OAAO,CAACS,MAAM,KAAK,CAAC;EAElD,oBACE,oBAAC,aAAa;IACZ,EAAE,EAAER,OAAQ;IACZ,OAAO,EAAEH,WAAW,CAACY,YAAa;IAClC,UAAU,EAAC,6BAA6B;IACxC,YAAY;IACZ,aAAa;EAAA,gBAEb;IACE,SAAS,EAAEhB,UAAU,CAAC,oBAAoB,EAAEQ,cAAc,EAAEE,IAAI,CAAE;IAClE,IAAI,EAAC,cAAc;IACnB,OAAO,EAAEC,OAAQ;IACjB,UAAU,EAAEA,OAAQ;IACpB,eAAaE;EAAW,gBAExB;IAAK,SAAS,EAAC;EAAmB,gBAChC;IAAM,SAAS,EAAC;EAAS,GAAEJ,OAAO,CAAQ,CACtC,eACN,oBAAC,aAAa;IACZ,EAAE,EAAEK,UAAW;IACf,OAAO,EAAEV,WAAW,CAACa,gBAAiB;IACtC,UAAU,EAAC,MAAM;IACjB,YAAY;IACZ,aAAa;EAAA,gBAEb;IAAK,SAAS,EAAC;EAAmB,GAAEX,OAAO,CAAO,CACpC,EACfM,SAAS,iBACR,oBAAC,MAAM;IACL,IAAI,EAAC,OAAO;IACZ,IAAI,EAAEV,OAAQ;IACd,OAAO,EAAC,oBAAoB;IAC5B,SAAS,EAAC,MAAM;IAChB,OAAO,EAAEU;EAAU,EAEtB,CACG,CACQ;AAEpB;AAEAP,iBAAiB,CAACa,IAAI,GAAGC,MAAM,CAACC,MAAM,CAAC;EACrCC,KAAK,EAAE;AACT,CAAC,CAAC;AAEF,eAAehB,iBAAiB"}
|
package/dist/UISwitch.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import './UISwitch.scss';
|
|
3
|
-
export
|
|
3
|
+
export type UISwitchProps = {
|
|
4
4
|
on: boolean;
|
|
5
5
|
onClick: React.MouseEventHandler<HTMLButtonElement>;
|
|
6
6
|
id?: string;
|
|
@@ -9,6 +9,6 @@ export declare type UISwitchProps = {
|
|
|
9
9
|
disabled?: boolean;
|
|
10
10
|
'data-testid'?: string;
|
|
11
11
|
};
|
|
12
|
-
declare
|
|
12
|
+
declare function UISwitch({ on, id, className, isInvalid, disabled, onClick, 'data-testid': dataTestId, }: UISwitchProps): JSX.Element;
|
|
13
13
|
export default UISwitch;
|
|
14
14
|
//# sourceMappingURL=UISwitch.d.ts.map
|
package/dist/UISwitch.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UISwitch.d.ts","sourceRoot":"","sources":["../src/UISwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,iBAAiB,CAAC;AAEzB,
|
|
1
|
+
{"version":3,"file":"UISwitch.d.ts","sourceRoot":"","sources":["../src/UISwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,iBAAiB,CAAC;AAEzB,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,OAAO,CAAC;IACZ,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACpD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,iBAAS,QAAQ,CAAC,EAChB,EAAE,EACF,EAAE,EACF,SAAS,EACT,SAAS,EACT,QAAgB,EAChB,OAAO,EACP,aAAa,EAAE,UAAU,GAC1B,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAmB7B;AAED,eAAe,QAAQ,CAAC"}
|
package/dist/UISwitch.js
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import classNames from 'classnames';
|
|
3
3
|
import "./UISwitch.css";
|
|
4
|
-
|
|
5
|
-
var UISwitch = _ref => {
|
|
4
|
+
function UISwitch(_ref) {
|
|
6
5
|
var {
|
|
7
6
|
on,
|
|
8
7
|
id,
|
|
@@ -26,7 +25,6 @@ var UISwitch = _ref => {
|
|
|
26
25
|
}, /*#__PURE__*/React.createElement("div", {
|
|
27
26
|
className: "handle"
|
|
28
27
|
}));
|
|
29
|
-
}
|
|
30
|
-
|
|
28
|
+
}
|
|
31
29
|
export default UISwitch;
|
|
32
30
|
//# sourceMappingURL=UISwitch.js.map
|
package/dist/UISwitch.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UISwitch.js","names":["React","classNames","UISwitch","on","id","className","isInvalid","disabled","onClick","dataTestId","active"],"sources":["../src/UISwitch.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport './UISwitch.scss';\n\nexport type UISwitchProps = {\n on: boolean;\n onClick: React.MouseEventHandler<HTMLButtonElement>;\n id?: string;\n className?: string;\n isInvalid?: boolean;\n disabled?: boolean;\n 'data-testid'?: string;\n};\n\
|
|
1
|
+
{"version":3,"file":"UISwitch.js","names":["React","classNames","UISwitch","on","id","className","isInvalid","disabled","onClick","dataTestId","active"],"sources":["../src/UISwitch.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport './UISwitch.scss';\n\nexport type UISwitchProps = {\n on: boolean;\n onClick: React.MouseEventHandler<HTMLButtonElement>;\n id?: string;\n className?: string;\n isInvalid?: boolean;\n disabled?: boolean;\n 'data-testid'?: string;\n};\n\nfunction UISwitch({\n on,\n id,\n className,\n isInvalid,\n disabled = false,\n onClick,\n 'data-testid': dataTestId,\n}: UISwitchProps): JSX.Element {\n return (\n <button\n type=\"button\"\n className={classNames(\n 'btn',\n 'btn-switch',\n className,\n { active: on },\n { 'is-invalid': isInvalid }\n )}\n id={id}\n onClick={onClick}\n disabled={disabled}\n data-testid={dataTestId}\n >\n <div className=\"handle\" />\n </button>\n );\n}\n\nexport default UISwitch;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AAAC;AAapC,SAASC,QAAQ,OAQc;EAAA,IARb;IAChBC,EAAE;IACFC,EAAE;IACFC,SAAS;IACTC,SAAS;IACTC,QAAQ,GAAG,KAAK;IAChBC,OAAO;IACP,aAAa,EAAEC;EACF,CAAC;EACd,oBACE;IACE,IAAI,EAAC,QAAQ;IACb,SAAS,EAAER,UAAU,CACnB,KAAK,EACL,YAAY,EACZI,SAAS,EACT;MAAEK,MAAM,EAAEP;IAAG,CAAC,EACd;MAAE,YAAY,EAAEG;IAAU,CAAC,CAC3B;IACF,EAAE,EAAEF,EAAG;IACP,OAAO,EAAEI,OAAQ;IACjB,QAAQ,EAAED,QAAS;IACnB,eAAaE;EAAW,gBAExB;IAAK,SAAS,EAAC;EAAQ,EAAG,CACnB;AAEb;AAEA,eAAeP,QAAQ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ValidateLabelInput.d.ts","sourceRoot":"","sources":["../src/ValidateLabelInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAGtC,OAAO,2BAA2B,CAAC;AAEnC,
|
|
1
|
+
{"version":3,"file":"ValidateLabelInput.d.ts","sourceRoot":"","sources":["../src/ValidateLabelInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAGtC,OAAO,2BAA2B,CAAC;AAEnC,MAAM,MAAM,uBAAuB,GAAG;IACpC,8BAA8B;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAE9B,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,gDAAgD;IAChD,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,yCAAyC;IACzC,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,+DAA+D;IAC/D,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B,gDAAgD;IAChD,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,wCAAwC;IACxC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;GAEG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,uBAAuB,GAC7B,KAAK,CAAC,YAAY,CA+CpB;AAED,eAAe,kBAAkB,CAAC"}
|