@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
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateInputUtils.js","names":["getNextNumberSegmentValue","delta","segmentValue","lowerBound","upperBound","length","modValue","newSegmentValue","parseInt","padStart","getNextSegmentValue","range","selectionStart"],"sources":["../src/DateInputUtils.ts"],"sourcesContent":["import { SelectionSegment } from './MaskedInput';\n\nexport function getNextNumberSegmentValue(\n delta: number,\n segmentValue: string,\n lowerBound: number,\n upperBound: number,\n length: number\n): string {\n const modValue = upperBound - lowerBound + 1;\n const newSegmentValue =\n ((((parseInt(segmentValue, 10) - delta - lowerBound) % modValue) +\n modValue) %\n modValue) +\n lowerBound;\n return `${newSegmentValue}`.padStart(length, '0');\n}\n\nexport function getNextSegmentValue(\n range: SelectionSegment,\n delta: number,\n segmentValue: string\n): string {\n const { selectionStart } = range;\n if (selectionStart === 0) {\n return getNextNumberSegmentValue(delta, segmentValue, 1900, 2099, 4);\n }\n if (selectionStart === 5) {\n return getNextNumberSegmentValue(delta, segmentValue, 1, 12, 2);\n }\n if (selectionStart === 8) {\n return getNextNumberSegmentValue(delta, segmentValue, 1, 31, 2);\n }\n if (selectionStart === 11) {\n // Hours input\n return getNextNumberSegmentValue(delta, segmentValue, 0, 23, 2);\n }\n if (selectionStart === 17 || selectionStart === 14) {\n // Minutes/seconds input\n return getNextNumberSegmentValue(delta, segmentValue, 0, 59, 2);\n }\n if (selectionStart === 20 || selectionStart === 24 || selectionStart === 28) {\n // Milli, micro, and nanosecond input\n return getNextNumberSegmentValue(delta, segmentValue, 0, 999, 3);\n }\n\n return segmentValue;\n}\n"],"mappings":"AAEA,OAAO,SAASA,
|
|
1
|
+
{"version":3,"file":"DateInputUtils.js","names":["getNextNumberSegmentValue","delta","segmentValue","lowerBound","upperBound","length","modValue","newSegmentValue","parseInt","padStart","getNextSegmentValue","range","selectionStart"],"sources":["../src/DateInputUtils.ts"],"sourcesContent":["import { SelectionSegment } from './MaskedInput';\n\nexport function getNextNumberSegmentValue(\n delta: number,\n segmentValue: string,\n lowerBound: number,\n upperBound: number,\n length: number\n): string {\n const modValue = upperBound - lowerBound + 1;\n const newSegmentValue =\n ((((parseInt(segmentValue, 10) - delta - lowerBound) % modValue) +\n modValue) %\n modValue) +\n lowerBound;\n return `${newSegmentValue}`.padStart(length, '0');\n}\n\nexport function getNextSegmentValue(\n range: SelectionSegment,\n delta: number,\n segmentValue: string\n): string {\n const { selectionStart } = range;\n if (selectionStart === 0) {\n return getNextNumberSegmentValue(delta, segmentValue, 1900, 2099, 4);\n }\n if (selectionStart === 5) {\n return getNextNumberSegmentValue(delta, segmentValue, 1, 12, 2);\n }\n if (selectionStart === 8) {\n return getNextNumberSegmentValue(delta, segmentValue, 1, 31, 2);\n }\n if (selectionStart === 11) {\n // Hours input\n return getNextNumberSegmentValue(delta, segmentValue, 0, 23, 2);\n }\n if (selectionStart === 17 || selectionStart === 14) {\n // Minutes/seconds input\n return getNextNumberSegmentValue(delta, segmentValue, 0, 59, 2);\n }\n if (selectionStart === 20 || selectionStart === 24 || selectionStart === 28) {\n // Milli, micro, and nanosecond input\n return getNextNumberSegmentValue(delta, segmentValue, 0, 999, 3);\n }\n\n return segmentValue;\n}\n"],"mappings":"AAEA,OAAO,SAASA,yBAAyB,CACvCC,KAAa,EACbC,YAAoB,EACpBC,UAAkB,EAClBC,UAAkB,EAClBC,MAAc,EACN;EACR,IAAMC,QAAQ,GAAGF,UAAU,GAAGD,UAAU,GAAG,CAAC;EAC5C,IAAMI,eAAe,GAClB,CAAE,CAACC,QAAQ,CAACN,YAAY,EAAE,EAAE,CAAC,GAAGD,KAAK,GAAGE,UAAU,IAAIG,QAAQ,GAC7DA,QAAQ,IACRA,QAAQ,GACVH,UAAU;EACZ,OAAO,UAAGI,eAAe,EAAGE,QAAQ,CAACJ,MAAM,EAAE,GAAG,CAAC;AACnD;AAEA,OAAO,SAASK,mBAAmB,CACjCC,KAAuB,EACvBV,KAAa,EACbC,YAAoB,EACZ;EACR,IAAM;IAAEU;EAAe,CAAC,GAAGD,KAAK;EAChC,IAAIC,cAAc,KAAK,CAAC,EAAE;IACxB,OAAOZ,yBAAyB,CAACC,KAAK,EAAEC,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;EACtE;EACA,IAAIU,cAAc,KAAK,CAAC,EAAE;IACxB,OAAOZ,yBAAyB,CAACC,KAAK,EAAEC,YAAY,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;EACjE;EACA,IAAIU,cAAc,KAAK,CAAC,EAAE;IACxB,OAAOZ,yBAAyB,CAACC,KAAK,EAAEC,YAAY,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;EACjE;EACA,IAAIU,cAAc,KAAK,EAAE,EAAE;IACzB;IACA,OAAOZ,yBAAyB,CAACC,KAAK,EAAEC,YAAY,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;EACjE;EACA,IAAIU,cAAc,KAAK,EAAE,IAAIA,cAAc,KAAK,EAAE,EAAE;IAClD;IACA,OAAOZ,yBAAyB,CAACC,KAAK,EAAEC,YAAY,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;EACjE;EACA,IAAIU,cAAc,KAAK,EAAE,IAAIA,cAAc,KAAK,EAAE,IAAIA,cAAc,KAAK,EAAE,EAAE;IAC3E;IACA,OAAOZ,yBAAyB,CAACC,KAAK,EAAEC,YAAY,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;EAClE;EAEA,OAAOA,YAAY;AACrB"}
|
package/dist/DateTimeInput.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../src/DateTimeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAmBrD,
|
|
1
|
+
{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../src/DateTimeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAmBrD,KAAK,kBAAkB,GAAG;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,MAAM,CAAC,IAAI,IAAI,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAOxD;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAKnD;AAMD,QAAA,MAAM,aAAa,6FAuDlB,CAAC;AAaF,eAAe,aAAa,CAAC"}
|
package/dist/DateTimeInput.js
CHANGED
|
@@ -3,11 +3,12 @@ import classNames from 'classnames';
|
|
|
3
3
|
import Log from '@deephaven/log';
|
|
4
4
|
import MaskedInput from "./MaskedInput.js";
|
|
5
5
|
import { getNextSegmentValue } from "./DateInputUtils.js";
|
|
6
|
-
var log = Log.module('DateTimeInput');
|
|
7
|
-
// But then gotta take leap year into account and everything.
|
|
8
|
-
|
|
9
|
-
var DATE_PATTERN = '[12][0-9]{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])'; // Put zero width spaces in the nanosecond part of the date to allow jumping between segments
|
|
6
|
+
var log = Log.module('DateTimeInput');
|
|
10
7
|
|
|
8
|
+
// This could be more restrictive and restrict days to the number of days in the month...
|
|
9
|
+
// But then gotta take leap year into account and everything.
|
|
10
|
+
var DATE_PATTERN = '[12][0-9]{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])';
|
|
11
|
+
// Put zero width spaces in the nanosecond part of the date to allow jumping between segments
|
|
11
12
|
var TIME_PATTERN = '([01][0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]\\.[0-9]{3}\u200B[0-9]{3}\u200B[0-9]{3}';
|
|
12
13
|
var FULL_DATE_PATTERN = "".concat(DATE_PATTERN, " ").concat(TIME_PATTERN);
|
|
13
14
|
var DATE_VALUE_STRING = '2022-01-01';
|
|
@@ -17,7 +18,6 @@ export function fixIncompleteValue(value) {
|
|
|
17
18
|
if (value != null && value.length >= DATE_VALUE_STRING.length) {
|
|
18
19
|
return "".concat(value.substring(0, DATE_VALUE_STRING.length)).concat(value.substring(DATE_VALUE_STRING.length).replace(/\u2007/g, '0')).concat(DEFAULT_VALUE_STRING.substring(value.length));
|
|
19
20
|
}
|
|
20
|
-
|
|
21
21
|
return value;
|
|
22
22
|
}
|
|
23
23
|
export function addSeparators(value) {
|
|
@@ -26,9 +26,7 @@ export function addSeparators(value) {
|
|
|
26
26
|
var nanos = value.substring(26);
|
|
27
27
|
return [dateTimeMillis, micros, nanos].filter(v => v !== '').join('\u200B');
|
|
28
28
|
}
|
|
29
|
-
|
|
30
29
|
var removeSeparators = value => value.replace(/\u200B/g, '');
|
|
31
|
-
|
|
32
30
|
var EXAMPLES = [addSeparators(DEFAULT_VALUE_STRING)];
|
|
33
31
|
var DateTimeInput = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
34
32
|
var {
|
|
@@ -48,13 +46,12 @@ var DateTimeInput = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
48
46
|
}, [onChange]);
|
|
49
47
|
var handleBlur = useCallback(() => {
|
|
50
48
|
var prevValue = removeSeparators(value);
|
|
51
|
-
var fixedValue = fixIncompleteValue(prevValue);
|
|
49
|
+
var fixedValue = fixIncompleteValue(prevValue);
|
|
50
|
+
// Update the value displayed in the input
|
|
52
51
|
// onChange with the fixed value already triggered in handleChange
|
|
53
|
-
|
|
54
52
|
if (fixedValue !== prevValue) {
|
|
55
53
|
setValue(addSeparators(fixedValue));
|
|
56
54
|
}
|
|
57
|
-
|
|
58
55
|
onBlur();
|
|
59
56
|
}, [value, onBlur]);
|
|
60
57
|
return /*#__PURE__*/React.createElement("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTimeInput.js","names":["React","useCallback","useState","classNames","Log","MaskedInput","getNextSegmentValue","log","module","DATE_PATTERN","TIME_PATTERN","FULL_DATE_PATTERN","DATE_VALUE_STRING","DEFAULT_VALUE_STRING","FULL_DATE_FORMAT","fixIncompleteValue","value","length","substring","replace","addSeparators","dateTimeMillis","micros","nanos","filter","v","join","removeSeparators","EXAMPLES","DateTimeInput","forwardRef","props","ref","className","onChange","undefined","defaultValue","onFocus","onBlur","dataTestId","setValue","selection","setSelection","handleChange","newValue","debug","handleBlur","prevValue","fixedValue","displayName","defaultProps"],"sources":["../src/DateTimeInput.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport classNames from 'classnames';\nimport Log from '@deephaven/log';\nimport MaskedInput, { SelectionSegment } from './MaskedInput';\nimport { getNextSegmentValue } from './DateInputUtils';\n\nconst log = Log.module('DateTimeInput');\n\n// This could be more restrictive and restrict days to the number of days in the month...\n// But then gotta take leap year into account and everything.\nconst DATE_PATTERN = '[12][0-9]{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])';\n// Put zero width spaces in the nanosecond part of the date to allow jumping between segments\nconst TIME_PATTERN =\n '([01][0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]\\\\.[0-9]{3}\\u200B[0-9]{3}\\u200B[0-9]{3}';\nconst FULL_DATE_PATTERN = `${DATE_PATTERN} ${TIME_PATTERN}`;\nconst DATE_VALUE_STRING = '2022-01-01';\nconst DEFAULT_VALUE_STRING = `${DATE_VALUE_STRING} 00:00:00.000000000`;\nconst FULL_DATE_FORMAT = 'YYYY-MM-DD HH:MM:SS.SSSSSSSSS';\n\ntype DateTimeInputProps = {\n className?: string;\n onChange?(value?: string): void;\n defaultValue?: string;\n onFocus?(): void;\n onBlur?(): void;\n 'data-testid'?: string;\n};\n\nexport function fixIncompleteValue(value: string): string {\n if (value != null && value.length >= DATE_VALUE_STRING.length) {\n return `${value.substring(0, DATE_VALUE_STRING.length)}${value\n .substring(DATE_VALUE_STRING.length)\n .replace(/\\u2007/g, '0')}${DEFAULT_VALUE_STRING.substring(value.length)}`;\n }\n return value;\n}\n\nexport function addSeparators(value: string): string {\n const dateTimeMillis = value.substring(0, 23);\n const micros = value.substring(23, 26);\n const nanos = value.substring(26);\n return [dateTimeMillis, micros, nanos].filter(v => v !== '').join('\\u200B');\n}\n\nconst removeSeparators = (value: string) => value.replace(/\\u200B/g, '');\n\nconst EXAMPLES = [addSeparators(DEFAULT_VALUE_STRING)];\n\nconst DateTimeInput = React.forwardRef<HTMLInputElement, DateTimeInputProps>(\n (props: DateTimeInputProps, ref) => {\n const {\n className = '',\n onChange = () => undefined,\n defaultValue = '',\n onFocus = () => undefined,\n onBlur = () => undefined,\n 'data-testid': dataTestId,\n } = props;\n const [value, setValue] = useState(\n defaultValue.length > 0 ? addSeparators(defaultValue) : ''\n );\n const [selection, setSelection] = useState<SelectionSegment>();\n\n const handleChange = useCallback(\n (newValue: string): void => {\n log.debug('handleChange', newValue);\n setValue(newValue);\n onChange(fixIncompleteValue(removeSeparators(newValue)));\n },\n [onChange]\n );\n\n const handleBlur = useCallback((): void => {\n const prevValue = removeSeparators(value);\n const fixedValue = fixIncompleteValue(prevValue);\n // Update the value displayed in the input\n // onChange with the fixed value already triggered in handleChange\n if (fixedValue !== prevValue) {\n setValue(addSeparators(fixedValue));\n }\n onBlur();\n }, [value, onBlur]);\n\n return (\n <div className=\"d-flex flex-row align-items-center\">\n <MaskedInput\n ref={ref}\n className={classNames(className)}\n example={EXAMPLES}\n getNextSegmentValue={getNextSegmentValue}\n onChange={handleChange}\n onSelect={setSelection}\n pattern={FULL_DATE_PATTERN}\n placeholder={FULL_DATE_FORMAT}\n selection={selection}\n value={value}\n onFocus={onFocus}\n onBlur={handleBlur}\n data-testid={dataTestId}\n />\n </div>\n );\n }\n);\n\nDateTimeInput.displayName = 'DateTimeInput';\n\nDateTimeInput.defaultProps = {\n className: '',\n onChange: () => undefined,\n defaultValue: '',\n onFocus: () => undefined,\n onBlur: () => undefined,\n 'data-testid': undefined,\n};\n\nexport default DateTimeInput;\n"],"mappings":"AAAA,OAAOA,
|
|
1
|
+
{"version":3,"file":"DateTimeInput.js","names":["React","useCallback","useState","classNames","Log","MaskedInput","getNextSegmentValue","log","module","DATE_PATTERN","TIME_PATTERN","FULL_DATE_PATTERN","DATE_VALUE_STRING","DEFAULT_VALUE_STRING","FULL_DATE_FORMAT","fixIncompleteValue","value","length","substring","replace","addSeparators","dateTimeMillis","micros","nanos","filter","v","join","removeSeparators","EXAMPLES","DateTimeInput","forwardRef","props","ref","className","onChange","undefined","defaultValue","onFocus","onBlur","dataTestId","setValue","selection","setSelection","handleChange","newValue","debug","handleBlur","prevValue","fixedValue","displayName","defaultProps"],"sources":["../src/DateTimeInput.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport classNames from 'classnames';\nimport Log from '@deephaven/log';\nimport MaskedInput, { SelectionSegment } from './MaskedInput';\nimport { getNextSegmentValue } from './DateInputUtils';\n\nconst log = Log.module('DateTimeInput');\n\n// This could be more restrictive and restrict days to the number of days in the month...\n// But then gotta take leap year into account and everything.\nconst DATE_PATTERN = '[12][0-9]{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])';\n// Put zero width spaces in the nanosecond part of the date to allow jumping between segments\nconst TIME_PATTERN =\n '([01][0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]\\\\.[0-9]{3}\\u200B[0-9]{3}\\u200B[0-9]{3}';\nconst FULL_DATE_PATTERN = `${DATE_PATTERN} ${TIME_PATTERN}`;\nconst DATE_VALUE_STRING = '2022-01-01';\nconst DEFAULT_VALUE_STRING = `${DATE_VALUE_STRING} 00:00:00.000000000`;\nconst FULL_DATE_FORMAT = 'YYYY-MM-DD HH:MM:SS.SSSSSSSSS';\n\ntype DateTimeInputProps = {\n className?: string;\n onChange?(value?: string): void;\n defaultValue?: string;\n onFocus?(): void;\n onBlur?(): void;\n 'data-testid'?: string;\n};\n\nexport function fixIncompleteValue(value: string): string {\n if (value != null && value.length >= DATE_VALUE_STRING.length) {\n return `${value.substring(0, DATE_VALUE_STRING.length)}${value\n .substring(DATE_VALUE_STRING.length)\n .replace(/\\u2007/g, '0')}${DEFAULT_VALUE_STRING.substring(value.length)}`;\n }\n return value;\n}\n\nexport function addSeparators(value: string): string {\n const dateTimeMillis = value.substring(0, 23);\n const micros = value.substring(23, 26);\n const nanos = value.substring(26);\n return [dateTimeMillis, micros, nanos].filter(v => v !== '').join('\\u200B');\n}\n\nconst removeSeparators = (value: string) => value.replace(/\\u200B/g, '');\n\nconst EXAMPLES = [addSeparators(DEFAULT_VALUE_STRING)];\n\nconst DateTimeInput = React.forwardRef<HTMLInputElement, DateTimeInputProps>(\n (props: DateTimeInputProps, ref) => {\n const {\n className = '',\n onChange = () => undefined,\n defaultValue = '',\n onFocus = () => undefined,\n onBlur = () => undefined,\n 'data-testid': dataTestId,\n } = props;\n const [value, setValue] = useState(\n defaultValue.length > 0 ? addSeparators(defaultValue) : ''\n );\n const [selection, setSelection] = useState<SelectionSegment>();\n\n const handleChange = useCallback(\n (newValue: string): void => {\n log.debug('handleChange', newValue);\n setValue(newValue);\n onChange(fixIncompleteValue(removeSeparators(newValue)));\n },\n [onChange]\n );\n\n const handleBlur = useCallback((): void => {\n const prevValue = removeSeparators(value);\n const fixedValue = fixIncompleteValue(prevValue);\n // Update the value displayed in the input\n // onChange with the fixed value already triggered in handleChange\n if (fixedValue !== prevValue) {\n setValue(addSeparators(fixedValue));\n }\n onBlur();\n }, [value, onBlur]);\n\n return (\n <div className=\"d-flex flex-row align-items-center\">\n <MaskedInput\n ref={ref}\n className={classNames(className)}\n example={EXAMPLES}\n getNextSegmentValue={getNextSegmentValue}\n onChange={handleChange}\n onSelect={setSelection}\n pattern={FULL_DATE_PATTERN}\n placeholder={FULL_DATE_FORMAT}\n selection={selection}\n value={value}\n onFocus={onFocus}\n onBlur={handleBlur}\n data-testid={dataTestId}\n />\n </div>\n );\n }\n);\n\nDateTimeInput.displayName = 'DateTimeInput';\n\nDateTimeInput.defaultProps = {\n className: '',\n onChange: () => undefined,\n defaultValue: '',\n onFocus: () => undefined,\n onBlur: () => undefined,\n 'data-testid': undefined,\n};\n\nexport default DateTimeInput;\n"],"mappings":"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"}
|
|
@@ -1,15 +1,11 @@
|
|
|
1
1
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
2
|
-
|
|
3
2
|
import React, { PureComponent } from 'react';
|
|
4
3
|
import debounce from 'lodash.debounce';
|
|
5
4
|
import SearchInput from "./SearchInput.js";
|
|
6
|
-
|
|
7
5
|
class DebouncedSearchInput extends PureComponent {
|
|
8
6
|
constructor(props) {
|
|
9
7
|
super(props);
|
|
10
|
-
|
|
11
8
|
_defineProperty(this, "searchInput", void 0);
|
|
12
|
-
|
|
13
9
|
this.searchInput = /*#__PURE__*/React.createRef();
|
|
14
10
|
this.handleChange = this.handleChange.bind(this);
|
|
15
11
|
this.sendUpdate = debounce(this.sendUpdate.bind(this), props.debounceMs);
|
|
@@ -17,12 +13,10 @@ class DebouncedSearchInput extends PureComponent {
|
|
|
17
13
|
value: props.value
|
|
18
14
|
};
|
|
19
15
|
}
|
|
20
|
-
|
|
21
16
|
componentDidUpdate(prevProps) {
|
|
22
17
|
var {
|
|
23
18
|
value
|
|
24
19
|
} = this.props;
|
|
25
|
-
|
|
26
20
|
if (prevProps.value !== value) {
|
|
27
21
|
// eslint-disable-next-line react/no-did-update-set-state
|
|
28
22
|
this.setState({
|
|
@@ -30,19 +24,15 @@ class DebouncedSearchInput extends PureComponent {
|
|
|
30
24
|
});
|
|
31
25
|
}
|
|
32
26
|
}
|
|
33
|
-
|
|
34
27
|
focus() {
|
|
35
28
|
var _this$searchInput$cur;
|
|
36
|
-
|
|
37
29
|
(_this$searchInput$cur = this.searchInput.current) === null || _this$searchInput$cur === void 0 ? void 0 : _this$searchInput$cur.focus();
|
|
38
30
|
}
|
|
39
|
-
|
|
40
31
|
handleChange(event) {
|
|
41
32
|
this.setState({
|
|
42
33
|
value: event.target.value
|
|
43
34
|
}, this.sendUpdate);
|
|
44
35
|
}
|
|
45
|
-
|
|
46
36
|
sendUpdate() {
|
|
47
37
|
var {
|
|
48
38
|
onChange
|
|
@@ -52,7 +42,6 @@ class DebouncedSearchInput extends PureComponent {
|
|
|
52
42
|
} = this.state;
|
|
53
43
|
onChange(value);
|
|
54
44
|
}
|
|
55
|
-
|
|
56
45
|
render() {
|
|
57
46
|
var {
|
|
58
47
|
placeholder,
|
|
@@ -75,9 +64,7 @@ class DebouncedSearchInput extends PureComponent {
|
|
|
75
64
|
"data-testid": dataTestId
|
|
76
65
|
});
|
|
77
66
|
}
|
|
78
|
-
|
|
79
67
|
}
|
|
80
|
-
|
|
81
68
|
_defineProperty(DebouncedSearchInput, "defaultProps", {
|
|
82
69
|
placeholder: 'Search',
|
|
83
70
|
className: '',
|
|
@@ -86,6 +73,5 @@ _defineProperty(DebouncedSearchInput, "defaultProps", {
|
|
|
86
73
|
id: '',
|
|
87
74
|
'data-testid': undefined
|
|
88
75
|
});
|
|
89
|
-
|
|
90
76
|
export default DebouncedSearchInput;
|
|
91
77
|
//# sourceMappingURL=DebouncedSearchInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DebouncedSearchInput.js","names":["React","PureComponent","debounce","SearchInput","DebouncedSearchInput","constructor","props","searchInput","createRef","handleChange","bind","sendUpdate","debounceMs","state","value","componentDidUpdate","prevProps","setState","focus","current","event","target","onChange","render","placeholder","className","matchCount","id","dataTestId","undefined"],"sources":["../src/DebouncedSearchInput.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport debounce from 'lodash.debounce';\nimport SearchInput from './SearchInput';\n\ninterface DebouncedSearchInputProps {\n value: string;\n placeholder: string;\n onChange(value: string): void;\n className: string;\n matchCount: number;\n debounceMs: number;\n id: string;\n 'data-testid'?: string;\n}\n\ninterface DebouncedSearchInputState {\n value: string;\n}\n\nclass DebouncedSearchInput extends PureComponent<\n DebouncedSearchInputProps,\n DebouncedSearchInputState\n> {\n static defaultProps = {\n placeholder: 'Search',\n className: '',\n matchCount: null,\n debounceMs: 250,\n id: '',\n 'data-testid': undefined,\n };\n\n constructor(props: DebouncedSearchInputProps) {\n super(props);\n this.searchInput = React.createRef();\n this.handleChange = this.handleChange.bind(this);\n this.sendUpdate = debounce(this.sendUpdate.bind(this), props.debounceMs);\n\n this.state = {\n value: props.value,\n };\n }\n\n componentDidUpdate(prevProps: DebouncedSearchInputProps): void {\n const { value } = this.props;\n if (prevProps.value !== value) {\n // eslint-disable-next-line react/no-did-update-set-state\n this.setState({ value });\n }\n }\n\n searchInput: React.RefObject<SearchInput>;\n\n focus(): void {\n this.searchInput.current?.focus();\n }\n\n handleChange(event: React.ChangeEvent<HTMLInputElement>): void {\n this.setState({ value: event.target.value }, this.sendUpdate);\n }\n\n sendUpdate(): void {\n const { onChange } = this.props;\n const { value } = this.state;\n onChange(value);\n }\n\n render(): JSX.Element {\n const {\n placeholder,\n className,\n matchCount,\n id,\n 'data-testid': dataTestId,\n } = this.props;\n const { value } = this.state;\n return (\n <SearchInput\n value={value}\n placeholder={placeholder}\n onChange={this.handleChange}\n className={className}\n matchCount={matchCount}\n ref={this.searchInput}\n id={id}\n data-testid={dataTestId}\n />\n );\n }\n}\n\nexport default DebouncedSearchInput;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"DebouncedSearchInput.js","names":["React","PureComponent","debounce","SearchInput","DebouncedSearchInput","constructor","props","searchInput","createRef","handleChange","bind","sendUpdate","debounceMs","state","value","componentDidUpdate","prevProps","setState","focus","current","event","target","onChange","render","placeholder","className","matchCount","id","dataTestId","undefined"],"sources":["../src/DebouncedSearchInput.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport debounce from 'lodash.debounce';\nimport SearchInput from './SearchInput';\n\ninterface DebouncedSearchInputProps {\n value: string;\n placeholder: string;\n onChange(value: string): void;\n className: string;\n matchCount: number;\n debounceMs: number;\n id: string;\n 'data-testid'?: string;\n}\n\ninterface DebouncedSearchInputState {\n value: string;\n}\n\nclass DebouncedSearchInput extends PureComponent<\n DebouncedSearchInputProps,\n DebouncedSearchInputState\n> {\n static defaultProps = {\n placeholder: 'Search',\n className: '',\n matchCount: null,\n debounceMs: 250,\n id: '',\n 'data-testid': undefined,\n };\n\n constructor(props: DebouncedSearchInputProps) {\n super(props);\n this.searchInput = React.createRef();\n this.handleChange = this.handleChange.bind(this);\n this.sendUpdate = debounce(this.sendUpdate.bind(this), props.debounceMs);\n\n this.state = {\n value: props.value,\n };\n }\n\n componentDidUpdate(prevProps: DebouncedSearchInputProps): void {\n const { value } = this.props;\n if (prevProps.value !== value) {\n // eslint-disable-next-line react/no-did-update-set-state\n this.setState({ value });\n }\n }\n\n searchInput: React.RefObject<SearchInput>;\n\n focus(): void {\n this.searchInput.current?.focus();\n }\n\n handleChange(event: React.ChangeEvent<HTMLInputElement>): void {\n this.setState({ value: event.target.value }, this.sendUpdate);\n }\n\n sendUpdate(): void {\n const { onChange } = this.props;\n const { value } = this.state;\n onChange(value);\n }\n\n render(): JSX.Element {\n const {\n placeholder,\n className,\n matchCount,\n id,\n 'data-testid': dataTestId,\n } = this.props;\n const { value } = this.state;\n return (\n <SearchInput\n value={value}\n placeholder={placeholder}\n onChange={this.handleChange}\n className={className}\n matchCount={matchCount}\n ref={this.searchInput}\n id={id}\n data-testid={dataTestId}\n />\n );\n }\n}\n\nexport default DebouncedSearchInput;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,aAAa,QAAQ,OAAO;AAC5C,OAAOC,QAAQ,MAAM,iBAAiB;AAAC,OAChCC,WAAW;AAiBlB,MAAMC,oBAAoB,SAASH,aAAa,CAG9C;EAUAI,WAAW,CAACC,KAAgC,EAAE;IAC5C,KAAK,CAACA,KAAK,CAAC;IAAC;IACb,IAAI,CAACC,WAAW,gBAAGP,KAAK,CAACQ,SAAS,EAAE;IACpC,IAAI,CAACC,YAAY,GAAG,IAAI,CAACA,YAAY,CAACC,IAAI,CAAC,IAAI,CAAC;IAChD,IAAI,CAACC,UAAU,GAAGT,QAAQ,CAAC,IAAI,CAACS,UAAU,CAACD,IAAI,CAAC,IAAI,CAAC,EAAEJ,KAAK,CAACM,UAAU,CAAC;IAExE,IAAI,CAACC,KAAK,GAAG;MACXC,KAAK,EAAER,KAAK,CAACQ;IACf,CAAC;EACH;EAEAC,kBAAkB,CAACC,SAAoC,EAAQ;IAC7D,IAAM;MAAEF;IAAM,CAAC,GAAG,IAAI,CAACR,KAAK;IAC5B,IAAIU,SAAS,CAACF,KAAK,KAAKA,KAAK,EAAE;MAC7B;MACA,IAAI,CAACG,QAAQ,CAAC;QAAEH;MAAM,CAAC,CAAC;IAC1B;EACF;EAIAI,KAAK,GAAS;IAAA;IACZ,6BAAI,CAACX,WAAW,CAACY,OAAO,0DAAxB,sBAA0BD,KAAK,EAAE;EACnC;EAEAT,YAAY,CAACW,KAA0C,EAAQ;IAC7D,IAAI,CAACH,QAAQ,CAAC;MAAEH,KAAK,EAAEM,KAAK,CAACC,MAAM,CAACP;IAAM,CAAC,EAAE,IAAI,CAACH,UAAU,CAAC;EAC/D;EAEAA,UAAU,GAAS;IACjB,IAAM;MAAEW;IAAS,CAAC,GAAG,IAAI,CAAChB,KAAK;IAC/B,IAAM;MAAEQ;IAAM,CAAC,GAAG,IAAI,CAACD,KAAK;IAC5BS,QAAQ,CAACR,KAAK,CAAC;EACjB;EAEAS,MAAM,GAAgB;IACpB,IAAM;MACJC,WAAW;MACXC,SAAS;MACTC,UAAU;MACVC,EAAE;MACF,aAAa,EAAEC;IACjB,CAAC,GAAG,IAAI,CAACtB,KAAK;IACd,IAAM;MAAEQ;IAAM,CAAC,GAAG,IAAI,CAACD,KAAK;IAC5B,oBACE,oBAAC,WAAW;MACV,KAAK,EAAEC,KAAM;MACb,WAAW,EAAEU,WAAY;MACzB,QAAQ,EAAE,IAAI,CAACf,YAAa;MAC5B,SAAS,EAAEgB,SAAU;MACrB,UAAU,EAAEC,UAAW;MACvB,GAAG,EAAE,IAAI,CAACnB,WAAY;MACtB,EAAE,EAAEoB,EAAG;MACP,eAAaC;IAAW,EACxB;EAEN;AACF;AAAC,gBAtEKxB,oBAAoB,kBAIF;EACpBoB,WAAW,EAAE,QAAQ;EACrBC,SAAS,EAAE,EAAE;EACbC,UAAU,EAAE,IAAI;EAChBd,UAAU,EAAE,GAAG;EACfe,EAAE,EAAE,EAAE;EACN,aAAa,EAAEE;AACjB,CAAC;AA6DH,eAAezB,oBAAoB"}
|
package/dist/DragUtils.d.ts
CHANGED
package/dist/DragUtils.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DragUtils.d.ts","sourceRoot":"","sources":["../src/DragUtils.ts"],"names":[],"mappings":"AAEA,
|
|
1
|
+
{"version":3,"file":"DragUtils.d.ts","sourceRoot":"","sources":["../src/DragUtils.ts"],"names":[],"mappings":"AAEA,KAAK,KAAK,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAE9B,cAAM,SAAS;IACb;;;;;;;OAOG;IACH,MAAM,CAAC,OAAO,CAAC,CAAC,EACd,UAAU,EAAE,CAAC,EAAE,EACf,cAAc,EAAE,KAAK,EAAE,EACvB,eAAe,EAAE,CAAC,EAAE,EACpB,gBAAgB,EAAE,MAAM,GACvB,CAAC,EAAE;IAUN;;;;;OAKG;IACH,MAAM,CAAC,WAAW,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,CAAC,EAAE;IAgBtD;;;;;OAKG;IACH,MAAM,CAAC,sBAAsB,CAC3B,gBAAgB,EAAE,MAAM,EACxB,MAAM,EAAE,KAAK,EAAE,GACd,MAAM;IAaT,MAAM,CAAC,aAAa,IAAI,IAAI;IAI5B,MAAM,CAAC,YAAY,IAAI,IAAI;CAG5B;AAED,eAAe,SAAS,CAAC"}
|
package/dist/DragUtils.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import flatten from 'lodash.flatten';
|
|
2
|
-
|
|
3
2
|
class DragUtils {
|
|
4
3
|
/**
|
|
5
4
|
* Re-orders the provided item lists in place based on the selectedRanges and destinationIndex provided
|
|
@@ -15,22 +14,21 @@ class DragUtils {
|
|
|
15
14
|
destinationList.splice(insertIndex, 0, ...draggedItems);
|
|
16
15
|
return draggedItems;
|
|
17
16
|
}
|
|
17
|
+
|
|
18
18
|
/**
|
|
19
19
|
* Removes the provided ranges from the list in place
|
|
20
20
|
* @param list Array of items to remove the ranges.
|
|
21
21
|
* @param ranges Array of the ranges to remove.
|
|
22
22
|
* @returns The removed items, in the order of the ranges removed.
|
|
23
23
|
*/
|
|
24
|
-
|
|
25
|
-
|
|
26
24
|
static removeItems(list, ranges) {
|
|
27
|
-
var items = [];
|
|
25
|
+
var items = [];
|
|
28
26
|
|
|
27
|
+
// Sort them in reverse, so we don't screw up the range indexes
|
|
29
28
|
var sortedRanges = ranges.map((range, index) => ({
|
|
30
29
|
range,
|
|
31
30
|
index
|
|
32
31
|
})).sort((a, b) => b.range[0] - a.range[0]);
|
|
33
|
-
|
|
34
32
|
for (var i = 0; i < sortedRanges.length; i += 1) {
|
|
35
33
|
var {
|
|
36
34
|
range,
|
|
@@ -39,42 +37,32 @@ class DragUtils {
|
|
|
39
37
|
var [start, end] = range;
|
|
40
38
|
items[index] = list.splice(start, end - start + 1);
|
|
41
39
|
}
|
|
42
|
-
|
|
43
40
|
return flatten(items);
|
|
44
41
|
}
|
|
42
|
+
|
|
45
43
|
/**
|
|
46
44
|
* Adjusts the destination index for when dropping into the same list you're dragging from.
|
|
47
45
|
* @param destinationIndex The original destination index
|
|
48
46
|
* @param ranges The ranges that are moving
|
|
49
47
|
* @returns Index where item should be inserted after all ranges are removed
|
|
50
48
|
*/
|
|
51
|
-
|
|
52
|
-
|
|
53
49
|
static adjustDestinationIndex(destinationIndex, ranges) {
|
|
54
50
|
var adjustedIndex = destinationIndex;
|
|
55
|
-
|
|
56
51
|
for (var i = 0; i < ranges.length; i += 1) {
|
|
57
52
|
var [start, end] = ranges[i];
|
|
58
|
-
|
|
59
53
|
if (start > destinationIndex) {
|
|
60
54
|
break;
|
|
61
55
|
}
|
|
62
|
-
|
|
63
56
|
adjustedIndex -= Math.min(end, destinationIndex - 1) - start + 1;
|
|
64
57
|
}
|
|
65
|
-
|
|
66
58
|
return adjustedIndex;
|
|
67
59
|
}
|
|
68
|
-
|
|
69
60
|
static startDragging() {
|
|
70
61
|
document.documentElement.classList.add('drag-pointer-events-none');
|
|
71
62
|
}
|
|
72
|
-
|
|
73
63
|
static stopDragging() {
|
|
74
64
|
document.documentElement.classList.remove('drag-pointer-events-none');
|
|
75
65
|
}
|
|
76
|
-
|
|
77
66
|
}
|
|
78
|
-
|
|
79
67
|
export default DragUtils;
|
|
80
68
|
//# sourceMappingURL=DragUtils.js.map
|
package/dist/DragUtils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DragUtils.js","names":["flatten","DragUtils","reorder","sourceList","selectedRanges","destinationList","destinationIndex","insertIndex","adjustDestinationIndex","draggedItems","removeItems","splice","list","ranges","items","sortedRanges","map","range","index","sort","a","b","i","length","start","end","adjustedIndex","Math","min","startDragging","document","documentElement","classList","add","stopDragging","remove"],"sources":["../src/DragUtils.ts"],"sourcesContent":["import flatten from 'lodash.flatten';\n\ntype Range = [number, number];\n\nclass DragUtils {\n /**\n * Re-orders the provided item lists in place based on the selectedRanges and destinationIndex provided\n * @param sourceList Array of the source items\n * @param selectedRanges Array of the selected ranges in the source list\n * @param destinationList Destination items. If dragging within the same list, set it to sourceItems\n * @param destinationIndex The index items are being dropped in the destinationList, adjusted for the removed items\n * @returns The items that were dragged\n */\n static reorder<T>(\n sourceList: T[],\n selectedRanges: Range[],\n destinationList: T[],\n destinationIndex: number\n ): T[] {\n const insertIndex =\n sourceList === destinationList\n ? DragUtils.adjustDestinationIndex(destinationIndex, selectedRanges)\n : destinationIndex;\n const draggedItems = DragUtils.removeItems(sourceList, selectedRanges);\n destinationList.splice(insertIndex, 0, ...draggedItems);\n return draggedItems;\n }\n\n /**\n * Removes the provided ranges from the list in place\n * @param list Array of items to remove the ranges.\n * @param ranges Array of the ranges to remove.\n * @returns The removed items, in the order of the ranges removed.\n */\n static removeItems<T>(list: T[], ranges: Range[]): T[] {\n const items = [];\n\n // Sort them in reverse, so we don't screw up the range indexes\n const sortedRanges = ranges\n .map((range, index) => ({ range, index }))\n .sort((a, b) => b.range[0] - a.range[0]);\n for (let i = 0; i < sortedRanges.length; i += 1) {\n const { range, index } = sortedRanges[i];\n const [start, end] = range;\n items[index] = list.splice(start, end - start + 1);\n }\n\n return flatten(items);\n }\n\n /**\n * Adjusts the destination index for when dropping into the same list you're dragging from.\n * @param destinationIndex The original destination index\n * @param ranges The ranges that are moving\n * @returns Index where item should be inserted after all ranges are removed\n */\n static adjustDestinationIndex(\n destinationIndex: number,\n ranges: Range[]\n ): number {\n let adjustedIndex = destinationIndex;\n for (let i = 0; i < ranges.length; i += 1) {\n const [start, end] = ranges[i];\n if (start > destinationIndex) {\n break;\n }\n\n adjustedIndex -= Math.min(end, destinationIndex - 1) - start + 1;\n }\n return adjustedIndex;\n }\n\n static startDragging(): void {\n document.documentElement.classList.add('drag-pointer-events-none');\n }\n\n static stopDragging(): void {\n document.documentElement.classList.remove('drag-pointer-events-none');\n }\n}\n\nexport default DragUtils;\n"],"mappings":"AAAA,OAAOA,
|
|
1
|
+
{"version":3,"file":"DragUtils.js","names":["flatten","DragUtils","reorder","sourceList","selectedRanges","destinationList","destinationIndex","insertIndex","adjustDestinationIndex","draggedItems","removeItems","splice","list","ranges","items","sortedRanges","map","range","index","sort","a","b","i","length","start","end","adjustedIndex","Math","min","startDragging","document","documentElement","classList","add","stopDragging","remove"],"sources":["../src/DragUtils.ts"],"sourcesContent":["import flatten from 'lodash.flatten';\n\ntype Range = [number, number];\n\nclass DragUtils {\n /**\n * Re-orders the provided item lists in place based on the selectedRanges and destinationIndex provided\n * @param sourceList Array of the source items\n * @param selectedRanges Array of the selected ranges in the source list\n * @param destinationList Destination items. If dragging within the same list, set it to sourceItems\n * @param destinationIndex The index items are being dropped in the destinationList, adjusted for the removed items\n * @returns The items that were dragged\n */\n static reorder<T>(\n sourceList: T[],\n selectedRanges: Range[],\n destinationList: T[],\n destinationIndex: number\n ): T[] {\n const insertIndex =\n sourceList === destinationList\n ? DragUtils.adjustDestinationIndex(destinationIndex, selectedRanges)\n : destinationIndex;\n const draggedItems = DragUtils.removeItems(sourceList, selectedRanges);\n destinationList.splice(insertIndex, 0, ...draggedItems);\n return draggedItems;\n }\n\n /**\n * Removes the provided ranges from the list in place\n * @param list Array of items to remove the ranges.\n * @param ranges Array of the ranges to remove.\n * @returns The removed items, in the order of the ranges removed.\n */\n static removeItems<T>(list: T[], ranges: Range[]): T[] {\n const items = [];\n\n // Sort them in reverse, so we don't screw up the range indexes\n const sortedRanges = ranges\n .map((range, index) => ({ range, index }))\n .sort((a, b) => b.range[0] - a.range[0]);\n for (let i = 0; i < sortedRanges.length; i += 1) {\n const { range, index } = sortedRanges[i];\n const [start, end] = range;\n items[index] = list.splice(start, end - start + 1);\n }\n\n return flatten(items);\n }\n\n /**\n * Adjusts the destination index for when dropping into the same list you're dragging from.\n * @param destinationIndex The original destination index\n * @param ranges The ranges that are moving\n * @returns Index where item should be inserted after all ranges are removed\n */\n static adjustDestinationIndex(\n destinationIndex: number,\n ranges: Range[]\n ): number {\n let adjustedIndex = destinationIndex;\n for (let i = 0; i < ranges.length; i += 1) {\n const [start, end] = ranges[i];\n if (start > destinationIndex) {\n break;\n }\n\n adjustedIndex -= Math.min(end, destinationIndex - 1) - start + 1;\n }\n return adjustedIndex;\n }\n\n static startDragging(): void {\n document.documentElement.classList.add('drag-pointer-events-none');\n }\n\n static stopDragging(): void {\n document.documentElement.classList.remove('drag-pointer-events-none');\n }\n}\n\nexport default DragUtils;\n"],"mappings":"AAAA,OAAOA,OAAO,MAAM,gBAAgB;AAIpC,MAAMC,SAAS,CAAC;EACd;AACF;AACA;AACA;AACA;AACA;AACA;AACA;EACE,OAAOC,OAAO,CACZC,UAAe,EACfC,cAAuB,EACvBC,eAAoB,EACpBC,gBAAwB,EACnB;IACL,IAAMC,WAAW,GACfJ,UAAU,KAAKE,eAAe,GAC1BJ,SAAS,CAACO,sBAAsB,CAACF,gBAAgB,EAAEF,cAAc,CAAC,GAClEE,gBAAgB;IACtB,IAAMG,YAAY,GAAGR,SAAS,CAACS,WAAW,CAACP,UAAU,EAAEC,cAAc,CAAC;IACtEC,eAAe,CAACM,MAAM,CAACJ,WAAW,EAAE,CAAC,EAAE,GAAGE,YAAY,CAAC;IACvD,OAAOA,YAAY;EACrB;;EAEA;AACF;AACA;AACA;AACA;AACA;EACE,OAAOC,WAAW,CAAIE,IAAS,EAAEC,MAAe,EAAO;IACrD,IAAMC,KAAK,GAAG,EAAE;;IAEhB;IACA,IAAMC,YAAY,GAAGF,MAAM,CACxBG,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,MAAM;MAAED,KAAK;MAAEC;IAAM,CAAC,CAAC,CAAC,CACzCC,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC,KAAKA,CAAC,CAACJ,KAAK,CAAC,CAAC,CAAC,GAAGG,CAAC,CAACH,KAAK,CAAC,CAAC,CAAC,CAAC;IAC1C,KAAK,IAAIK,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGP,YAAY,CAACQ,MAAM,EAAED,CAAC,IAAI,CAAC,EAAE;MAC/C,IAAM;QAAEL,KAAK;QAAEC;MAAM,CAAC,GAAGH,YAAY,CAACO,CAAC,CAAC;MACxC,IAAM,CAACE,KAAK,EAAEC,GAAG,CAAC,GAAGR,KAAK;MAC1BH,KAAK,CAACI,KAAK,CAAC,GAAGN,IAAI,CAACD,MAAM,CAACa,KAAK,EAAEC,GAAG,GAAGD,KAAK,GAAG,CAAC,CAAC;IACpD;IAEA,OAAOxB,OAAO,CAACc,KAAK,CAAC;EACvB;;EAEA;AACF;AACA;AACA;AACA;AACA;EACE,OAAON,sBAAsB,CAC3BF,gBAAwB,EACxBO,MAAe,EACP;IACR,IAAIa,aAAa,GAAGpB,gBAAgB;IACpC,KAAK,IAAIgB,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGT,MAAM,CAACU,MAAM,EAAED,CAAC,IAAI,CAAC,EAAE;MACzC,IAAM,CAACE,KAAK,EAAEC,GAAG,CAAC,GAAGZ,MAAM,CAACS,CAAC,CAAC;MAC9B,IAAIE,KAAK,GAAGlB,gBAAgB,EAAE;QAC5B;MACF;MAEAoB,aAAa,IAAIC,IAAI,CAACC,GAAG,CAACH,GAAG,EAAEnB,gBAAgB,GAAG,CAAC,CAAC,GAAGkB,KAAK,GAAG,CAAC;IAClE;IACA,OAAOE,aAAa;EACtB;EAEA,OAAOG,aAAa,GAAS;IAC3BC,QAAQ,CAACC,eAAe,CAACC,SAAS,CAACC,GAAG,CAAC,0BAA0B,CAAC;EACpE;EAEA,OAAOC,YAAY,GAAS;IAC1BJ,QAAQ,CAACC,eAAe,CAACC,SAAS,CAACG,MAAM,CAAC,0BAA0B,CAAC;EACvE;AACF;AAEA,eAAelC,SAAS"}
|
|
@@ -4,12 +4,12 @@ import { DraggableChildrenFn } from 'react-beautiful-dnd';
|
|
|
4
4
|
import { Range } from '@deephaven/utils';
|
|
5
5
|
import ItemList, { RenderItemProps, DefaultListItem, ItemListProps } from './ItemList';
|
|
6
6
|
import './DraggableItemList.scss';
|
|
7
|
-
export
|
|
7
|
+
export type DraggableRenderItemProps<T> = RenderItemProps<T> & {
|
|
8
8
|
isClone?: boolean;
|
|
9
9
|
selectedCount?: number;
|
|
10
10
|
};
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
type DraggableRenderItemFn<T> = (props: DraggableRenderItemProps<T>) => React.ReactNode;
|
|
12
|
+
type DraggableItemListProps<T> = Omit<ItemListProps<T>, 'overscanCount' | 'focusSelector' | 'isDragSelect'> & {
|
|
13
13
|
className: string;
|
|
14
14
|
draggingItemClassName: string;
|
|
15
15
|
isDropDisabled: boolean;
|
|
@@ -20,7 +20,7 @@ declare type DraggableItemListProps<T> = Omit<ItemListProps<T>, 'overscanCount'
|
|
|
20
20
|
droppableId: string;
|
|
21
21
|
'data-testid'?: string;
|
|
22
22
|
};
|
|
23
|
-
|
|
23
|
+
type DraggableItemListState = {
|
|
24
24
|
selectedCount: number;
|
|
25
25
|
};
|
|
26
26
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DraggableItemList.d.ts","sourceRoot":"","sources":["../src/DraggableItemList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,OAAO,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAwB,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAGhF,OAAO,EAAc,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,QAAQ,EAAE,EACf,eAAe,EACf,eAAe,EACf,aAAa,EACd,MAAM,YAAY,CAAC;AAEpB,OAAO,0BAA0B,CAAC;AAElC,
|
|
1
|
+
{"version":3,"file":"DraggableItemList.d.ts","sourceRoot":"","sources":["../src/DraggableItemList.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
|
|
3
2
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
4
|
-
|
|
5
3
|
import React, { PureComponent } from 'react';
|
|
6
4
|
import classNames from 'classnames';
|
|
7
5
|
import memoize from 'memoizee';
|
|
@@ -12,7 +10,6 @@ import { RangeUtils } from '@deephaven/utils';
|
|
|
12
10
|
import ItemList from "./ItemList.js";
|
|
13
11
|
import { Tooltip } from "./popper/index.js";
|
|
14
12
|
import "./DraggableItemList.css";
|
|
15
|
-
|
|
16
13
|
/**
|
|
17
14
|
* Show a draggable item list. It _must_ be used within a `DragDropContext`.
|
|
18
15
|
* This implementation uses react-beautiful-dnd for handling dragging and dropping of items.
|
|
@@ -26,7 +23,6 @@ class DraggableItemList extends PureComponent {
|
|
|
26
23
|
icon: vsGripper
|
|
27
24
|
}));
|
|
28
25
|
}
|
|
29
|
-
|
|
30
26
|
static renderBadge(_ref) {
|
|
31
27
|
var {
|
|
32
28
|
text
|
|
@@ -35,7 +31,6 @@ class DraggableItemList extends PureComponent {
|
|
|
35
31
|
className: "number-badge"
|
|
36
32
|
}, text) : null;
|
|
37
33
|
}
|
|
38
|
-
|
|
39
34
|
static renderTextItem(_ref2) {
|
|
40
35
|
var {
|
|
41
36
|
text,
|
|
@@ -50,10 +45,8 @@ class DraggableItemList extends PureComponent {
|
|
|
50
45
|
text: badgeText
|
|
51
46
|
}), DraggableItemList.renderHandle());
|
|
52
47
|
}
|
|
53
|
-
|
|
54
48
|
static renderItem(_ref3) {
|
|
55
49
|
var _ref4, _item$displayValue;
|
|
56
|
-
|
|
57
50
|
var {
|
|
58
51
|
item,
|
|
59
52
|
isClone,
|
|
@@ -68,21 +61,16 @@ class DraggableItemList extends PureComponent {
|
|
|
68
61
|
className
|
|
69
62
|
});
|
|
70
63
|
}
|
|
71
|
-
|
|
72
64
|
static getDraggableId(draggablePrefix, itemIndex) {
|
|
73
65
|
return "".concat(draggablePrefix, "/").concat(itemIndex);
|
|
74
66
|
}
|
|
75
|
-
|
|
76
67
|
static getDraggableIndex(draggableId) {
|
|
77
68
|
var num = draggableId.split('/').pop();
|
|
78
69
|
return parseInt(num !== undefined ? num : '', 10);
|
|
79
70
|
}
|
|
80
|
-
|
|
81
71
|
constructor(props) {
|
|
82
72
|
super(props);
|
|
83
|
-
|
|
84
73
|
_defineProperty(this, "itemList", void 0);
|
|
85
|
-
|
|
86
74
|
_defineProperty(this, "getCachedDraggableItem", memoize((draggablePrefix, renderItem, item, itemIndex, isFocused, isSelected, isDragDisabled, style) => /*#__PURE__*/React.createElement(Draggable, {
|
|
87
75
|
key: itemIndex,
|
|
88
76
|
draggableId: DraggableItemList.getDraggableId(draggablePrefix, itemIndex),
|
|
@@ -92,8 +80,8 @@ class DraggableItemList extends PureComponent {
|
|
|
92
80
|
role: "menuitem",
|
|
93
81
|
className: "draggable-item-list-item",
|
|
94
82
|
ref: provided.innerRef,
|
|
95
|
-
tabIndex: -1
|
|
96
|
-
|
|
83
|
+
tabIndex: -1
|
|
84
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
97
85
|
}, provided.draggableProps, provided.dragHandleProps), renderItem({
|
|
98
86
|
item,
|
|
99
87
|
itemIndex,
|
|
@@ -104,7 +92,6 @@ class DraggableItemList extends PureComponent {
|
|
|
104
92
|
}))), {
|
|
105
93
|
max: ItemList.CACHE_SIZE
|
|
106
94
|
}));
|
|
107
|
-
|
|
108
95
|
_defineProperty(this, "getCachedRenderDraggableItem", memoize((draggablePrefix, isDragDisabled, renderItem) => _ref5 => {
|
|
109
96
|
var {
|
|
110
97
|
item,
|
|
@@ -117,20 +104,25 @@ class DraggableItemList extends PureComponent {
|
|
|
117
104
|
}, {
|
|
118
105
|
max: 1
|
|
119
106
|
}));
|
|
120
|
-
|
|
121
107
|
_defineProperty(this, "getCachedRenderClone", memoize((draggingItemClassName, items, offset, renderItem) => (provided, snapshot, rubric) => {
|
|
108
|
+
// eslint-disable-next-line react/no-this-in-sfc
|
|
122
109
|
var {
|
|
123
110
|
selectedCount
|
|
124
111
|
} = this.state;
|
|
112
|
+
var {
|
|
113
|
+
draggableProps,
|
|
114
|
+
dragHandleProps,
|
|
115
|
+
innerRef
|
|
116
|
+
} = provided;
|
|
125
117
|
var {
|
|
126
118
|
index: itemIndex
|
|
127
119
|
} = rubric.source;
|
|
128
120
|
var item = items[itemIndex - offset];
|
|
129
121
|
return /*#__PURE__*/React.createElement("div", _extends({
|
|
130
|
-
className: classNames('draggable-item-list-dragging-item-container', draggingItemClassName)
|
|
131
|
-
|
|
132
|
-
},
|
|
133
|
-
ref:
|
|
122
|
+
className: classNames('draggable-item-list-dragging-item-container', draggingItemClassName)
|
|
123
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
124
|
+
}, draggableProps, dragHandleProps, {
|
|
125
|
+
ref: innerRef
|
|
134
126
|
}), /*#__PURE__*/React.createElement("div", {
|
|
135
127
|
className: classNames('draggable-item-list-dragging-item', {
|
|
136
128
|
'two-dragged': selectedCount === 2
|
|
@@ -149,32 +141,24 @@ class DraggableItemList extends PureComponent {
|
|
|
149
141
|
}, {
|
|
150
142
|
max: 1
|
|
151
143
|
}));
|
|
152
|
-
|
|
153
144
|
this.handleSelectionChange = this.handleSelectionChange.bind(this);
|
|
154
145
|
this.itemList = /*#__PURE__*/React.createRef();
|
|
155
146
|
this.state = {
|
|
156
147
|
selectedCount: 0
|
|
157
148
|
};
|
|
158
149
|
}
|
|
159
|
-
|
|
160
150
|
selectItem(itemIndex) {
|
|
161
151
|
var _this$itemList$curren;
|
|
162
|
-
|
|
163
152
|
(_this$itemList$curren = this.itemList.current) === null || _this$itemList$curren === void 0 ? void 0 : _this$itemList$curren.selectItem(itemIndex);
|
|
164
153
|
}
|
|
165
|
-
|
|
166
154
|
focusItem(itemIndex) {
|
|
167
155
|
var _this$itemList$curren2;
|
|
168
|
-
|
|
169
156
|
(_this$itemList$curren2 = this.itemList.current) === null || _this$itemList$curren2 === void 0 ? void 0 : _this$itemList$curren2.focusItem(itemIndex);
|
|
170
157
|
}
|
|
171
|
-
|
|
172
158
|
scrollToItem(itemIndex) {
|
|
173
159
|
var _this$itemList$curren3;
|
|
174
|
-
|
|
175
160
|
(_this$itemList$curren3 = this.itemList.current) === null || _this$itemList$curren3 === void 0 ? void 0 : _this$itemList$curren3.scrollToItem(itemIndex);
|
|
176
161
|
}
|
|
177
|
-
|
|
178
162
|
handleSelectionChange(selectedRanges) {
|
|
179
163
|
this.setState({
|
|
180
164
|
selectedCount: RangeUtils.count(selectedRanges)
|
|
@@ -184,7 +168,6 @@ class DraggableItemList extends PureComponent {
|
|
|
184
168
|
} = this.props;
|
|
185
169
|
onSelectionChange(selectedRanges);
|
|
186
170
|
}
|
|
187
|
-
|
|
188
171
|
render() {
|
|
189
172
|
var {
|
|
190
173
|
className,
|
|
@@ -224,8 +207,8 @@ class DraggableItemList extends PureComponent {
|
|
|
224
207
|
'is-dropping': snapshot.draggingOverWith
|
|
225
208
|
}),
|
|
226
209
|
style: style,
|
|
227
|
-
ref: provided.innerRef
|
|
228
|
-
|
|
210
|
+
ref: provided.innerRef
|
|
211
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
229
212
|
}, provided.droppableProps), /*#__PURE__*/React.createElement(ItemList, {
|
|
230
213
|
focusSelector: ".draggable-item-list-item",
|
|
231
214
|
isDoubleClickSelect: isDoubleClickSelect,
|
|
@@ -245,11 +228,8 @@ class DraggableItemList extends PureComponent {
|
|
|
245
228
|
selectedRanges: selectedRanges
|
|
246
229
|
})));
|
|
247
230
|
}
|
|
248
|
-
|
|
249
231
|
}
|
|
250
|
-
|
|
251
232
|
_defineProperty(DraggableItemList, "DEFAULT_ROW_HEIGHT", 30);
|
|
252
|
-
|
|
253
233
|
_defineProperty(DraggableItemList, "defaultProps", {
|
|
254
234
|
className: '',
|
|
255
235
|
draggingItemClassName: '',
|
|
@@ -264,25 +244,23 @@ _defineProperty(DraggableItemList, "defaultProps", {
|
|
|
264
244
|
isStickyBottom: false,
|
|
265
245
|
disableSelect: false,
|
|
266
246
|
style: null,
|
|
267
|
-
|
|
268
|
-
|
|
247
|
+
onFocusChange() {
|
|
248
|
+
// no-op
|
|
269
249
|
},
|
|
270
|
-
|
|
271
|
-
|
|
250
|
+
onSelect() {
|
|
251
|
+
// no-op
|
|
272
252
|
},
|
|
273
|
-
|
|
274
|
-
|
|
253
|
+
onSelectionChange() {
|
|
254
|
+
// no-op
|
|
275
255
|
},
|
|
276
|
-
|
|
277
|
-
|
|
256
|
+
onViewportChange() {
|
|
257
|
+
// no-op
|
|
278
258
|
},
|
|
279
|
-
|
|
280
259
|
renderItem: DraggableItemList.renderItem,
|
|
281
260
|
selectedRanges: [],
|
|
282
261
|
draggablePrefix: 'draggable-item',
|
|
283
262
|
droppableId: 'droppable-item-list',
|
|
284
263
|
'data-testid': undefined
|
|
285
264
|
});
|
|
286
|
-
|
|
287
265
|
export default DraggableItemList;
|
|
288
266
|
//# sourceMappingURL=DraggableItemList.js.map
|