@deephaven/components 1.22.1 → 1.22.2-alpha-pivot-builder.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 +41 -79
- package/dist/AutoCompleteInput.js.map +1 -1
- package/dist/AutoResizeTextarea.js +29 -13
- package/dist/AutoResizeTextarea.js.map +1 -1
- package/dist/BasicModal.js +17 -15
- package/dist/BasicModal.js.map +1 -1
- package/dist/BulkActionBar.js +3 -5
- package/dist/BulkActionBar.js.map +1 -1
- package/dist/Button.js +24 -25
- package/dist/Button.js.map +1 -1
- package/dist/CardFlip.js +4 -6
- package/dist/CardFlip.js.map +1 -1
- package/dist/Checkbox.js +22 -13
- package/dist/Checkbox.js.map +1 -1
- package/dist/Collapse.js +6 -9
- package/dist/Collapse.js.map +1 -1
- package/dist/CopyButton.js +14 -6
- package/dist/CopyButton.js.map +1 -1
- package/dist/CustomTimeSelect.js +49 -88
- package/dist/CustomTimeSelect.js.map +1 -1
- package/dist/DateInput.js +25 -10
- package/dist/DateInput.js.map +1 -1
- package/dist/DateInputUtils.js +1 -3
- package/dist/DateInputUtils.js.map +1 -1
- package/dist/DateTimeInput.js +28 -12
- package/dist/DateTimeInput.js.map +1 -1
- package/dist/DebouncedSearchInput.js +10 -19
- package/dist/DebouncedSearchInput.js.map +1 -1
- package/dist/DragUtils.js +15 -6
- package/dist/DragUtils.js.map +1 -1
- package/dist/DraggableItemList.js +42 -57
- package/dist/DraggableItemList.js.map +1 -1
- package/dist/EditableItemList.js +28 -13
- package/dist/EditableItemList.js.map +1 -1
- package/dist/ErrorBoundary.js +6 -11
- package/dist/ErrorBoundary.js.map +1 -1
- package/dist/ErrorView.js +20 -8
- package/dist/ErrorView.js.map +1 -1
- package/dist/HierarchicalCheckboxMenu.js +30 -28
- package/dist/HierarchicalCheckboxMenu.js.map +1 -1
- package/dist/ItemList.js +96 -168
- package/dist/ItemList.js.map +1 -1
- package/dist/ItemListItem.js +46 -60
- package/dist/ItemListItem.js.map +1 -1
- package/dist/LoadingOverlay.js +13 -9
- package/dist/LoadingOverlay.js.map +1 -1
- package/dist/LoadingSpinner.js +3 -4
- package/dist/LoadingSpinner.js.map +1 -1
- package/dist/MaskedInput.js +44 -41
- package/dist/MaskedInput.js.map +1 -1
- package/dist/MaskedInputUtils.js +1 -3
- package/dist/MaskedInputUtils.js.map +1 -1
- package/dist/Option.js +1 -3
- package/dist/Option.js.map +1 -1
- package/dist/RadioGroup.js +17 -9
- package/dist/RadioGroup.js.map +1 -1
- package/dist/RadioItem.js +25 -14
- package/dist/RadioItem.js.map +1 -1
- package/dist/RandomAreaPlotAnimation.js +17 -13
- package/dist/RandomAreaPlotAnimation.js.map +1 -1
- package/dist/SearchInput.js +13 -14
- package/dist/SearchInput.js.map +1 -1
- package/dist/SearchableCombobox.js +3 -5
- package/dist/SearchableCombobox.js.map +1 -1
- package/dist/Select.js +5 -7
- package/dist/Select.js.map +1 -1
- package/dist/SelectValueList.js +21 -30
- package/dist/SelectValueList.js.map +1 -1
- package/dist/SocketedButton.js +18 -17
- package/dist/SocketedButton.js.map +1 -1
- package/dist/SplitButtonGroup.js +4 -6
- package/dist/SplitButtonGroup.js.map +1 -1
- package/dist/TableViewEmptyState.js +14 -6
- package/dist/TableViewEmptyState.js.map +1 -1
- package/dist/TextWithTooltip.js +3 -4
- package/dist/TextWithTooltip.js.map +1 -1
- package/dist/TimeInput.js +29 -12
- package/dist/TimeInput.js.map +1 -1
- package/dist/TimeSlider.js +46 -38
- package/dist/TimeSlider.js.map +1 -1
- package/dist/ToastNotification.js +9 -10
- package/dist/ToastNotification.js.map +1 -1
- package/dist/UISwitch.js +8 -9
- package/dist/UISwitch.js.map +1 -1
- package/dist/actions/ConfirmActionButton.js +7 -9
- package/dist/actions/ConfirmActionButton.js.map +1 -1
- package/dist/actions/IconActionButton.js +3 -5
- package/dist/actions/IconActionButton.js.map +1 -1
- package/dist/context-actions/ContextActionUtils.js +1 -3
- package/dist/context-actions/ContextActionUtils.js.map +1 -1
- package/dist/context-actions/ContextActions.js +8 -18
- package/dist/context-actions/ContextActions.js.map +1 -1
- package/dist/context-actions/ContextMenu.js +53 -89
- package/dist/context-actions/ContextMenu.js.map +1 -1
- package/dist/context-actions/ContextMenuItem.js +11 -11
- package/dist/context-actions/ContextMenuItem.js.map +1 -1
- package/dist/context-actions/ContextMenuRoot.js +6 -11
- package/dist/context-actions/ContextMenuRoot.js.map +1 -1
- package/dist/context-actions/GlobalContextAction.js +2 -6
- package/dist/context-actions/GlobalContextAction.js.map +1 -1
- package/dist/context-actions/GlobalContextActions.js +4 -7
- package/dist/context-actions/GlobalContextActions.js.map +1 -1
- package/dist/dialogs/ActionButtonDialogTrigger.js +7 -9
- package/dist/dialogs/ActionButtonDialogTrigger.js.map +1 -1
- package/dist/dialogs/ConfirmationDialog.js +8 -11
- package/dist/dialogs/ConfirmationDialog.js.map +1 -1
- package/dist/menu-actions/DropdownMenu.js +12 -22
- package/dist/menu-actions/DropdownMenu.js.map +1 -1
- package/dist/menu-actions/Menu.js +19 -45
- package/dist/menu-actions/Menu.js.map +1 -1
- package/dist/modal/DebouncedModal.js +8 -9
- package/dist/modal/DebouncedModal.js.map +1 -1
- package/dist/modal/InfoModal.js +6 -7
- package/dist/modal/InfoModal.js.map +1 -1
- package/dist/modal/Modal.js +27 -15
- package/dist/modal/Modal.js.map +1 -1
- package/dist/modal/ModalBody.js +4 -6
- package/dist/modal/ModalBody.js.map +1 -1
- package/dist/modal/ModalFooter.js +3 -5
- package/dist/modal/ModalFooter.js.map +1 -1
- package/dist/modal/ModalHeader.js +7 -8
- package/dist/modal/ModalHeader.js.map +1 -1
- package/dist/navigation/DashboardList.js +17 -6
- package/dist/navigation/DashboardList.js.map +1 -1
- package/dist/navigation/Menu.js +4 -5
- package/dist/navigation/Menu.js.map +1 -1
- package/dist/navigation/MenuItem.js +7 -10
- package/dist/navigation/MenuItem.js.map +1 -1
- package/dist/navigation/NavTab.js +14 -17
- package/dist/navigation/NavTab.js.map +1 -1
- package/dist/navigation/NavTabList.js +39 -33
- package/dist/navigation/NavTabList.js.map +1 -1
- package/dist/navigation/Page.js +5 -7
- package/dist/navigation/Page.js.map +1 -1
- package/dist/navigation/Stack.js +20 -7
- package/dist/navigation/Stack.js.map +1 -1
- package/dist/popper/Popper.js +30 -57
- package/dist/popper/Popper.js.map +1 -1
- package/dist/popper/Tooltip.js +24 -54
- package/dist/popper/Tooltip.js.map +1 -1
- package/dist/shortcuts/Shortcut.js +10 -15
- package/dist/shortcuts/Shortcut.js.map +1 -1
- package/dist/shortcuts/ShortcutRegistry.js +1 -3
- package/dist/shortcuts/ShortcutRegistry.js.map +1 -1
- package/dist/spectrum/ActionGroup.js +7 -9
- package/dist/spectrum/ActionGroup.js.map +1 -1
- package/dist/spectrum/ActionMenu.js +3 -5
- package/dist/spectrum/ActionMenu.js.map +1 -1
- package/dist/spectrum/CheckboxGroup.js +1 -3
- package/dist/spectrum/CheckboxGroup.js.map +1 -1
- package/dist/spectrum/Heading.js +2 -4
- package/dist/spectrum/Heading.js.map +1 -1
- package/dist/spectrum/ItemContent.js +16 -10
- package/dist/spectrum/ItemContent.js.map +1 -1
- package/dist/spectrum/ItemTooltip.js +2 -4
- package/dist/spectrum/ItemTooltip.js.map +1 -1
- package/dist/spectrum/TabPanels.js +3 -4
- package/dist/spectrum/TabPanels.js.map +1 -1
- package/dist/spectrum/Text.js +2 -4
- package/dist/spectrum/Text.js.map +1 -1
- package/dist/spectrum/View.js +11 -14
- package/dist/spectrum/View.js.map +1 -1
- package/dist/spectrum/comboBox/ComboBox.js +5 -9
- package/dist/spectrum/comboBox/ComboBox.js.map +1 -1
- package/dist/spectrum/comboBox/ComboBoxNormalized.js +3 -7
- package/dist/spectrum/comboBox/ComboBoxNormalized.js.map +1 -1
- package/dist/spectrum/listView/ListView.js +11 -11
- package/dist/spectrum/listView/ListView.js.map +1 -1
- package/dist/spectrum/listView/ListViewNormalized.js +22 -24
- package/dist/spectrum/listView/ListViewNormalized.js.map +1 -1
- package/dist/spectrum/listView/ListViewWrapper.js +11 -15
- package/dist/spectrum/listView/ListViewWrapper.js.map +1 -1
- package/dist/spectrum/multiSelect/MultiSelect.js +113 -100
- package/dist/spectrum/multiSelect/MultiSelect.js.map +1 -1
- package/dist/spectrum/multiSelect/MultiSelectListBox.js +9 -11
- package/dist/spectrum/multiSelect/MultiSelectListBox.js.map +1 -1
- package/dist/spectrum/multiSelect/MultiSelectNormalized.js +3 -7
- package/dist/spectrum/multiSelect/MultiSelectNormalized.js.map +1 -1
- package/dist/spectrum/multiSelect/MultiSelectTag.js +5 -7
- package/dist/spectrum/multiSelect/MultiSelectTag.js.map +1 -1
- package/dist/spectrum/multiSelect/useMultiSelectFilter.js +20 -14
- package/dist/spectrum/multiSelect/useMultiSelectFilter.js.map +1 -1
- package/dist/spectrum/multiSelect/useMultiSelectKeyboard.js +27 -20
- package/dist/spectrum/multiSelect/useMultiSelectKeyboard.js.map +1 -1
- package/dist/spectrum/multiSelect/useMultiSelectLoadingSpinner.js +14 -7
- package/dist/spectrum/multiSelect/useMultiSelectLoadingSpinner.js.map +1 -1
- package/dist/spectrum/multiSelect/useMultiSelectNormalizedProps.js +20 -22
- package/dist/spectrum/multiSelect/useMultiSelectNormalizedProps.js.map +1 -1
- package/dist/spectrum/multiSelect/useMultiSelectScrollListener.js +13 -6
- package/dist/spectrum/multiSelect/useMultiSelectScrollListener.js.map +1 -1
- package/dist/spectrum/multiSelect/useMultiSelectState.js +16 -9
- package/dist/spectrum/multiSelect/useMultiSelectState.js.map +1 -1
- package/dist/spectrum/picker/Picker.js +5 -9
- package/dist/spectrum/picker/Picker.js.map +1 -1
- package/dist/spectrum/picker/PickerNormalized.js +2 -6
- package/dist/spectrum/picker/PickerNormalized.js.map +1 -1
- package/dist/spectrum/picker/usePickerItemScale.js +2 -3
- package/dist/spectrum/picker/usePickerItemScale.js.map +1 -1
- package/dist/spectrum/picker/usePickerNormalizedProps.js +31 -33
- package/dist/spectrum/picker/usePickerNormalizedProps.js.map +1 -1
- package/dist/spectrum/picker/usePickerProps.js +26 -29
- package/dist/spectrum/picker/usePickerProps.js.map +1 -1
- package/dist/spectrum/picker/usePickerScrollOnOpen.js +6 -9
- package/dist/spectrum/picker/usePickerScrollOnOpen.js.map +1 -1
- package/dist/spectrum/utils/itemUtils.js +4 -6
- package/dist/spectrum/utils/itemUtils.js.map +1 -1
- package/dist/spectrum/utils/propsUtils.js +35 -37
- package/dist/spectrum/utils/propsUtils.js.map +1 -1
- package/dist/spectrum/utils/themeUtils.js +5 -7
- package/dist/spectrum/utils/themeUtils.js.map +1 -1
- package/dist/spectrum/utils/useOnChangeTrackUncontrolled.js +13 -6
- package/dist/spectrum/utils/useOnChangeTrackUncontrolled.js.map +1 -1
- package/dist/spectrum/utils/useRenderNormalizedItem.js +5 -7
- package/dist/spectrum/utils/useRenderNormalizedItem.js.map +1 -1
- package/dist/spectrum/utils/useStaticItemInitialScrollPosition.js +4 -6
- package/dist/spectrum/utils/useStaticItemInitialScrollPosition.js.map +1 -1
- package/dist/spectrum/utils/useStringifiedMultiSelection.js +5 -7
- package/dist/spectrum/utils/useStringifiedMultiSelection.js.map +1 -1
- package/dist/spectrum/utils/useStringifiedSelection.js +5 -7
- package/dist/spectrum/utils/useStringifiedSelection.js.map +1 -1
- package/dist/theme/FontBootstrap.js +13 -5
- package/dist/theme/FontBootstrap.js.map +1 -1
- package/dist/theme/FontsLoaded.js +1 -3
- package/dist/theme/FontsLoaded.js.map +1 -1
- package/dist/theme/Logo.js +2 -4
- package/dist/theme/Logo.js.map +1 -1
- package/dist/theme/SpectrumThemeProvider.js +17 -9
- package/dist/theme/SpectrumThemeProvider.js.map +1 -1
- package/dist/theme/ThemePicker.js +4 -5
- package/dist/theme/ThemePicker.js.map +1 -1
- package/dist/theme/ThemeProvider.js +20 -8
- package/dist/theme/ThemeProvider.js.map +1 -1
- package/dist/theme/ThemeUtils.js +35 -19
- package/dist/theme/ThemeUtils.js.map +1 -1
- package/dist/theme/useExternalTheme.js +16 -7
- package/dist/theme/useExternalTheme.js.map +1 -1
- package/dist/transitions/FadeTransition.js +5 -6
- package/dist/transitions/FadeTransition.js.map +1 -1
- package/dist/transitions/SlideTransition.js +6 -7
- package/dist/transitions/SlideTransition.js.map +1 -1
- package/package.json +8 -8
|
@@ -33,20 +33,18 @@ class DraggableItemList extends PureComponent {
|
|
|
33
33
|
});
|
|
34
34
|
}
|
|
35
35
|
static renderBadge(_ref) {
|
|
36
|
-
var
|
|
37
|
-
text
|
|
38
|
-
} = _ref;
|
|
36
|
+
var text = _ref.text;
|
|
39
37
|
return text != null && text.length > 0 ? /*#__PURE__*/_jsx("span", {
|
|
40
38
|
className: "number-badge",
|
|
41
39
|
children: text
|
|
42
40
|
}) : null;
|
|
43
41
|
}
|
|
44
42
|
static renderTextItem(_ref2) {
|
|
45
|
-
var
|
|
46
|
-
|
|
47
|
-
badgeText = '',
|
|
48
|
-
className =
|
|
49
|
-
|
|
43
|
+
var text = _ref2.text,
|
|
44
|
+
_ref2$badgeText = _ref2.badgeText,
|
|
45
|
+
badgeText = _ref2$badgeText === void 0 ? '' : _ref2$badgeText,
|
|
46
|
+
_ref2$className = _ref2.className,
|
|
47
|
+
className = _ref2$className === void 0 ? '' : _ref2$className;
|
|
50
48
|
return /*#__PURE__*/_jsxs("div", {
|
|
51
49
|
className: classNames('item-list-item-content', 'draggable-item-list-item-content', className),
|
|
52
50
|
children: [/*#__PURE__*/_jsx("span", {
|
|
@@ -59,11 +57,9 @@ class DraggableItemList extends PureComponent {
|
|
|
59
57
|
}
|
|
60
58
|
static renderItem(_ref3) {
|
|
61
59
|
var _ref4, _item$displayValue;
|
|
62
|
-
var
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
selectedCount
|
|
66
|
-
} = _ref3;
|
|
60
|
+
var item = _ref3.item,
|
|
61
|
+
isClone = _ref3.isClone,
|
|
62
|
+
selectedCount = _ref3.selectedCount;
|
|
67
63
|
var text = item != null ? (_ref4 = (_item$displayValue = item.displayValue) !== null && _item$displayValue !== void 0 ? _item$displayValue : item.value) !== null && _ref4 !== void 0 ? _ref4 : "".concat(item) : '';
|
|
68
64
|
var badgeText = isClone !== undefined && isClone ? "".concat(selectedCount) : '';
|
|
69
65
|
var className = isClone !== undefined && isClone ? 'item-list-item-clone' : '';
|
|
@@ -107,13 +103,11 @@ class DraggableItemList extends PureComponent {
|
|
|
107
103
|
max: ItemList.CACHE_SIZE
|
|
108
104
|
}));
|
|
109
105
|
_defineProperty(this, "getCachedRenderDraggableItem", memoize((draggablePrefix, isDragDisabled, renderItem) => _ref5 => {
|
|
110
|
-
var
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
style
|
|
116
|
-
} = _ref5;
|
|
106
|
+
var item = _ref5.item,
|
|
107
|
+
itemIndex = _ref5.itemIndex,
|
|
108
|
+
isFocused = _ref5.isFocused,
|
|
109
|
+
isSelected = _ref5.isSelected,
|
|
110
|
+
style = _ref5.style;
|
|
117
111
|
return this.getCachedDraggableItem(draggablePrefix, renderItem, item, itemIndex, isFocused, isSelected, isDragDisabled, style);
|
|
118
112
|
}, {
|
|
119
113
|
max: 1
|
|
@@ -122,17 +116,11 @@ class DraggableItemList extends PureComponent {
|
|
|
122
116
|
// eslint-disable-next-line react/no-unstable-nested-components, react/display-name, react/function-component-definition
|
|
123
117
|
(provided, snapshot, rubric) => {
|
|
124
118
|
// eslint-disable-next-line react/no-this-in-sfc
|
|
125
|
-
var
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
dragHandleProps,
|
|
131
|
-
innerRef
|
|
132
|
-
} = provided;
|
|
133
|
-
var {
|
|
134
|
-
index: itemIndex
|
|
135
|
-
} = rubric.source;
|
|
119
|
+
var selectedCount = this.state.selectedCount;
|
|
120
|
+
var draggableProps = provided.draggableProps,
|
|
121
|
+
dragHandleProps = provided.dragHandleProps,
|
|
122
|
+
innerRef = provided.innerRef;
|
|
123
|
+
var itemIndex = rubric.source.index;
|
|
136
124
|
var item = items[itemIndex - offset];
|
|
137
125
|
return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread(_objectSpread({
|
|
138
126
|
className: classNames('draggable-item-list-dragging-item-container', draggingItemClassName)
|
|
@@ -181,35 +169,32 @@ class DraggableItemList extends PureComponent {
|
|
|
181
169
|
this.setState({
|
|
182
170
|
selectedCount: RangeUtils.count(selectedRanges)
|
|
183
171
|
});
|
|
184
|
-
var
|
|
185
|
-
onSelectionChange
|
|
186
|
-
} = this.props;
|
|
172
|
+
var onSelectionChange = this.props.onSelectionChange;
|
|
187
173
|
onSelectionChange(selectedRanges);
|
|
188
174
|
}
|
|
189
175
|
render() {
|
|
190
|
-
var
|
|
191
|
-
className,
|
|
192
|
-
draggablePrefix,
|
|
193
|
-
draggingItemClassName,
|
|
194
|
-
droppableId,
|
|
195
|
-
isDoubleClickSelect,
|
|
196
|
-
isDragDisabled,
|
|
197
|
-
isDropDisabled,
|
|
198
|
-
hasPlaceholder,
|
|
199
|
-
isMultiSelect,
|
|
200
|
-
isStickyBottom,
|
|
201
|
-
itemCount,
|
|
202
|
-
items,
|
|
203
|
-
offset,
|
|
204
|
-
onFocusChange,
|
|
205
|
-
onSelect,
|
|
206
|
-
onViewportChange,
|
|
207
|
-
renderItem,
|
|
208
|
-
rowHeight,
|
|
209
|
-
selectedRanges,
|
|
210
|
-
style,
|
|
211
|
-
'data-testid'
|
|
212
|
-
} = this.props;
|
|
176
|
+
var _this$props = this.props,
|
|
177
|
+
className = _this$props.className,
|
|
178
|
+
draggablePrefix = _this$props.draggablePrefix,
|
|
179
|
+
draggingItemClassName = _this$props.draggingItemClassName,
|
|
180
|
+
droppableId = _this$props.droppableId,
|
|
181
|
+
isDoubleClickSelect = _this$props.isDoubleClickSelect,
|
|
182
|
+
isDragDisabled = _this$props.isDragDisabled,
|
|
183
|
+
isDropDisabled = _this$props.isDropDisabled,
|
|
184
|
+
hasPlaceholder = _this$props.hasPlaceholder,
|
|
185
|
+
isMultiSelect = _this$props.isMultiSelect,
|
|
186
|
+
isStickyBottom = _this$props.isStickyBottom,
|
|
187
|
+
itemCount = _this$props.itemCount,
|
|
188
|
+
items = _this$props.items,
|
|
189
|
+
offset = _this$props.offset,
|
|
190
|
+
onFocusChange = _this$props.onFocusChange,
|
|
191
|
+
onSelect = _this$props.onSelect,
|
|
192
|
+
onViewportChange = _this$props.onViewportChange,
|
|
193
|
+
renderItem = _this$props.renderItem,
|
|
194
|
+
rowHeight = _this$props.rowHeight,
|
|
195
|
+
selectedRanges = _this$props.selectedRanges,
|
|
196
|
+
style = _this$props.style,
|
|
197
|
+
dataTestId = _this$props['data-testid'];
|
|
213
198
|
return /*#__PURE__*/_jsx(Droppable, {
|
|
214
199
|
isDropDisabled: isDropDisabled,
|
|
215
200
|
droppableId: droppableId,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DraggableItemList.js","names":["React","PureComponent","classNames","memoize","Draggable","Droppable","FontAwesomeIcon","vsGripper","RangeUtils","ItemList","Tooltip","jsx","_jsx","jsxs","_jsxs","DraggableItemList","renderHandle","children","icon","renderBadge","_ref","text","length","className","renderTextItem","_ref2","badgeText","renderItem","_ref3","_ref4","_item$displayValue","item","isClone","selectedCount","displayValue","value","concat","undefined","getDraggableId","draggablePrefix","itemIndex","getDraggableIndex","draggableId","num","split","pop","parseInt","constructor","props","_defineProperty","isFocused","isSelected","isDragDisabled","style","index","provided","_objectSpread","role","ref","innerRef","tabIndex","draggableProps","dragHandleProps","max","CACHE_SIZE","_ref5","getCachedDraggableItem","draggingItemClassName","items","offset","snapshot","rubric","state","source","handleSelectionChange","bind","itemList","createRef","selectItem","_this$itemList$curren","current","focusItem","_this$itemList$curren2","scrollToItem","_this$itemList$curren3","selectedRanges","setState","count","onSelectionChange","render","droppableId","isDoubleClickSelect","isDropDisabled","hasPlaceholder","isMultiSelect","isStickyBottom","itemCount","onFocusChange","onSelect","onViewportChange","rowHeight","dataTestId","mode","renderClone","getCachedRenderClone","draggingFromThisWith","isDraggingOver","draggingOverWith","droppableProps","focusSelector","isDragSelect","getCachedRenderDraggableItem","placeholder","_DraggableItemList","DEFAULT_ROW_HEIGHT","isDeselectOnClick","disableSelect"],"sources":["../src/DraggableItemList.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport classNames from 'classnames';\nimport memoize from 'memoizee';\nimport {\n Draggable,\n Droppable,\n type DraggableChildrenFn,\n} from '@hello-pangea/dnd';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { vsGripper } from '@deephaven/icons';\nimport { RangeUtils, type Range } from '@deephaven/utils';\nimport ItemList, {\n type RenderItemProps,\n type DefaultListItem,\n type ItemListProps,\n} from './ItemList';\nimport { Tooltip } from './popper';\nimport './DraggableItemList.scss';\n\nexport type DraggableRenderItemProps<T> = RenderItemProps<T> & {\n isClone?: boolean;\n selectedCount?: number;\n};\n\ntype DraggableRenderItemFn<T> = (\n props: DraggableRenderItemProps<T>\n) => React.ReactNode;\n\ntype DraggableItemListProps<T> = Omit<\n ItemListProps<T>,\n 'overscanCount' | 'focusSelector' | 'isDragSelect'\n> & {\n className: string;\n draggingItemClassName: string;\n isDropDisabled: boolean;\n // Whether to include the droppable provided.placeholder in the DOM\n hasPlaceholder: boolean;\n // Whether to allow dragging items from this list\n isDragDisabled: boolean;\n\n renderItem: DraggableRenderItemFn<T>;\n style: React.CSSProperties;\n\n // The prefix to add to all draggable item IDs\n draggablePrefix: string;\n // The ID to give the droppable list\n droppableId: string;\n\n 'data-testid'?: string;\n};\n\ntype DraggableItemListState = {\n selectedCount: number;\n};\n\n/**\n * Show a draggable item list. It _must_ be used within a `DragDropContext`.\n * This implementation uses @hello-pangea/dnd for handling dragging and dropping of items.\n * We use ItemList to handle selection for multi drag and drop (not built in to @hello-pangea/dnd).\n * One caveat with the use of @hello-pangea/dnd is that it doesn't allow a drag to be initiated while\n * using a modifier key: https://github.com/atlassian/@hello-pangea/dnd/issues/1678\n */\nclass DraggableItemList<T> extends PureComponent<\n DraggableItemListProps<T>,\n DraggableItemListState\n> {\n static DEFAULT_ROW_HEIGHT = 30;\n\n static defaultProps = {\n className: '',\n draggingItemClassName: '',\n offset: 0,\n items: [],\n rowHeight: DraggableItemList.DEFAULT_ROW_HEIGHT,\n isDeselectOnClick: true,\n isDoubleClickSelect: true,\n isDropDisabled: false,\n hasPlaceholder: false,\n isDragDisabled: false,\n isMultiSelect: false,\n isStickyBottom: false,\n disableSelect: false,\n style: null,\n onFocusChange(): void {\n // no-op\n },\n onSelect(): void {\n // no-op\n },\n onSelectionChange(): void {\n // no-op\n },\n onViewportChange(): void {\n // no-op\n },\n renderItem: DraggableItemList.renderItem,\n selectedRanges: [],\n draggablePrefix: 'draggable-item',\n droppableId: 'droppable-item-list',\n 'data-testid': undefined,\n };\n\n static renderHandle(): JSX.Element {\n return (\n <div>\n <Tooltip>Drag to re-order</Tooltip>\n <FontAwesomeIcon icon={vsGripper} />\n </div>\n );\n }\n\n static renderBadge({ text }: { text?: string }): React.ReactNode {\n return text != null && text.length > 0 ? (\n <span className=\"number-badge\">{text}</span>\n ) : null;\n }\n\n static renderTextItem({\n text,\n badgeText = '',\n className = '',\n }: {\n text?: string;\n badgeText?: string;\n className: string;\n }): JSX.Element {\n return (\n <div\n className={classNames(\n 'item-list-item-content',\n 'draggable-item-list-item-content',\n className\n )}\n >\n <span className=\"title\">{text}</span>\n {DraggableItemList.renderBadge({ text: badgeText })}\n {DraggableItemList.renderHandle()}\n </div>\n );\n }\n\n static renderItem<P extends DefaultListItem>({\n item,\n isClone,\n selectedCount,\n }: DraggableRenderItemProps<P>): JSX.Element {\n const text =\n item != null ? item.displayValue ?? item.value ?? `${item}` : '';\n const badgeText =\n isClone !== undefined && isClone ? `${selectedCount}` : '';\n const className =\n isClone !== undefined && isClone ? 'item-list-item-clone' : '';\n return DraggableItemList.renderTextItem({ text, badgeText, className });\n }\n\n static getDraggableId(draggablePrefix: string, itemIndex: number): string {\n return `${draggablePrefix}/${itemIndex}`;\n }\n\n static getDraggableIndex(draggableId: string): number {\n const num = draggableId.split('/').pop();\n return parseInt(num !== undefined ? num : '', 10);\n }\n\n constructor(props: DraggableItemListProps<T>) {\n super(props);\n\n this.handleSelectionChange = this.handleSelectionChange.bind(this);\n\n this.itemList = React.createRef();\n\n this.state = {\n selectedCount: 0,\n };\n }\n\n itemList: React.RefObject<ItemList<T>>;\n\n selectItem(itemIndex: number): void {\n this.itemList.current?.selectItem(itemIndex);\n }\n\n focusItem(itemIndex: number): void {\n this.itemList.current?.focusItem(itemIndex);\n }\n\n scrollToItem(itemIndex: number): void {\n this.itemList.current?.scrollToItem(itemIndex);\n }\n\n getCachedDraggableItem = memoize(\n (\n draggablePrefix: string,\n renderItem: DraggableRenderItemFn<T>,\n item: T,\n itemIndex: number,\n isFocused: boolean,\n isSelected: boolean,\n isDragDisabled: boolean,\n style: React.CSSProperties\n ) => (\n <Draggable\n key={itemIndex}\n draggableId={DraggableItemList.getDraggableId(\n draggablePrefix,\n itemIndex\n )}\n index={itemIndex}\n isDragDisabled={isDragDisabled}\n >\n {provided => (\n <div\n role=\"menuitem\"\n className=\"draggable-item-list-item\"\n ref={provided.innerRef}\n tabIndex={-1}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...provided.draggableProps}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...provided.dragHandleProps}\n >\n {renderItem({\n item,\n itemIndex,\n isFocused,\n isSelected,\n style,\n isClone: false,\n })}\n </div>\n )}\n </Draggable>\n ),\n { max: ItemList.CACHE_SIZE }\n );\n\n handleSelectionChange(selectedRanges: readonly Range[]): void {\n this.setState({ selectedCount: RangeUtils.count(selectedRanges) });\n\n const { onSelectionChange } = this.props;\n onSelectionChange(selectedRanges);\n }\n\n getCachedRenderDraggableItem = memoize(\n (\n draggablePrefix: string,\n isDragDisabled: boolean,\n renderItem: DraggableRenderItemFn<T>\n ) =>\n ({ item, itemIndex, isFocused, isSelected, style }: RenderItemProps<T>) =>\n this.getCachedDraggableItem(\n draggablePrefix,\n renderItem,\n item,\n itemIndex,\n isFocused,\n isSelected,\n isDragDisabled,\n style\n ),\n { max: 1 }\n );\n\n getCachedRenderClone = memoize(\n (\n draggingItemClassName: string,\n items: readonly T[],\n offset: number,\n renderItem: DraggableRenderItemFn<T>\n ): DraggableChildrenFn =>\n // eslint-disable-next-line react/no-unstable-nested-components, react/display-name, react/function-component-definition\n (provided, snapshot, rubric) => {\n // eslint-disable-next-line react/no-this-in-sfc\n const { selectedCount } = this.state;\n const { draggableProps, dragHandleProps, innerRef } = provided;\n const { index: itemIndex } = rubric.source;\n const item = items[itemIndex - offset];\n return (\n <div\n className={classNames(\n 'draggable-item-list-dragging-item-container',\n draggingItemClassName\n )}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...draggableProps}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...dragHandleProps}\n ref={innerRef}\n >\n <div\n className={classNames(\n 'draggable-item-list-dragging-item',\n { 'two-dragged': selectedCount === 2 },\n { 'multiple-dragged': selectedCount > 2 }\n )}\n >\n {renderItem({\n item,\n itemIndex,\n isFocused: false,\n isSelected: true,\n style: {},\n isClone: true,\n selectedCount,\n })}\n </div>\n </div>\n );\n },\n { max: 1 }\n );\n\n render(): JSX.Element {\n const {\n className,\n draggablePrefix,\n draggingItemClassName,\n droppableId,\n isDoubleClickSelect,\n isDragDisabled,\n isDropDisabled,\n hasPlaceholder,\n isMultiSelect,\n isStickyBottom,\n itemCount,\n items,\n offset,\n onFocusChange,\n onSelect,\n onViewportChange,\n renderItem,\n rowHeight,\n selectedRanges,\n style,\n 'data-testid': dataTestId,\n } = this.props;\n return (\n <Droppable\n isDropDisabled={isDropDisabled}\n droppableId={droppableId}\n mode=\"virtual\"\n renderClone={this.getCachedRenderClone(\n draggingItemClassName,\n items,\n offset,\n renderItem\n )}\n data-testid={dataTestId}\n >\n {(provided, snapshot) => (\n <div\n role=\"menu\"\n className={classNames('draggable-item-list', className, {\n 'is-drop-disabled': isDropDisabled,\n 'is-drag-disabled': isDragDisabled,\n 'is-dragging-from-this': snapshot.draggingFromThisWith,\n 'is-dragging-over': snapshot.isDraggingOver,\n 'is-dropping': snapshot.draggingOverWith,\n })}\n style={style}\n ref={provided.innerRef}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...provided.droppableProps}\n >\n <ItemList\n focusSelector=\".draggable-item-list-item\"\n isDoubleClickSelect={isDoubleClickSelect}\n isDragSelect={false}\n isMultiSelect={isMultiSelect}\n isStickyBottom={isStickyBottom}\n itemCount={itemCount}\n items={items}\n onFocusChange={onFocusChange}\n onSelect={onSelect}\n onSelectionChange={this.handleSelectionChange}\n onViewportChange={onViewportChange}\n offset={offset}\n ref={this.itemList}\n renderItem={this.getCachedRenderDraggableItem(\n draggablePrefix,\n isDragDisabled,\n renderItem\n )}\n rowHeight={rowHeight}\n selectedRanges={selectedRanges}\n />\n {hasPlaceholder && provided.placeholder}\n </div>\n )}\n </Droppable>\n );\n }\n}\n\nexport default DraggableItemList;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"DraggableItemList.js","names":["React","PureComponent","classNames","memoize","Draggable","Droppable","FontAwesomeIcon","vsGripper","RangeUtils","ItemList","Tooltip","jsx","_jsx","jsxs","_jsxs","DraggableItemList","renderHandle","children","icon","renderBadge","_ref","text","length","className","renderTextItem","_ref2","_ref2$badgeText","badgeText","_ref2$className","renderItem","_ref3","_ref4","_item$displayValue","item","isClone","selectedCount","displayValue","value","concat","undefined","getDraggableId","draggablePrefix","itemIndex","getDraggableIndex","draggableId","num","split","pop","parseInt","constructor","props","_defineProperty","isFocused","isSelected","isDragDisabled","style","index","provided","_objectSpread","role","ref","innerRef","tabIndex","draggableProps","dragHandleProps","max","CACHE_SIZE","_ref5","getCachedDraggableItem","draggingItemClassName","items","offset","snapshot","rubric","state","source","handleSelectionChange","bind","itemList","createRef","selectItem","_this$itemList$curren","current","focusItem","_this$itemList$curren2","scrollToItem","_this$itemList$curren3","selectedRanges","setState","count","onSelectionChange","render","_this$props","droppableId","isDoubleClickSelect","isDropDisabled","hasPlaceholder","isMultiSelect","isStickyBottom","itemCount","onFocusChange","onSelect","onViewportChange","rowHeight","dataTestId","mode","renderClone","getCachedRenderClone","draggingFromThisWith","isDraggingOver","draggingOverWith","droppableProps","focusSelector","isDragSelect","getCachedRenderDraggableItem","placeholder","_DraggableItemList","DEFAULT_ROW_HEIGHT","isDeselectOnClick","disableSelect"],"sources":["../src/DraggableItemList.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport classNames from 'classnames';\nimport memoize from 'memoizee';\nimport {\n Draggable,\n Droppable,\n type DraggableChildrenFn,\n} from '@hello-pangea/dnd';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { vsGripper } from '@deephaven/icons';\nimport { RangeUtils, type Range } from '@deephaven/utils';\nimport ItemList, {\n type RenderItemProps,\n type DefaultListItem,\n type ItemListProps,\n} from './ItemList';\nimport { Tooltip } from './popper';\nimport './DraggableItemList.scss';\n\nexport type DraggableRenderItemProps<T> = RenderItemProps<T> & {\n isClone?: boolean;\n selectedCount?: number;\n};\n\ntype DraggableRenderItemFn<T> = (\n props: DraggableRenderItemProps<T>\n) => React.ReactNode;\n\ntype DraggableItemListProps<T> = Omit<\n ItemListProps<T>,\n 'overscanCount' | 'focusSelector' | 'isDragSelect'\n> & {\n className: string;\n draggingItemClassName: string;\n isDropDisabled: boolean;\n // Whether to include the droppable provided.placeholder in the DOM\n hasPlaceholder: boolean;\n // Whether to allow dragging items from this list\n isDragDisabled: boolean;\n\n renderItem: DraggableRenderItemFn<T>;\n style: React.CSSProperties;\n\n // The prefix to add to all draggable item IDs\n draggablePrefix: string;\n // The ID to give the droppable list\n droppableId: string;\n\n 'data-testid'?: string;\n};\n\ntype DraggableItemListState = {\n selectedCount: number;\n};\n\n/**\n * Show a draggable item list. It _must_ be used within a `DragDropContext`.\n * This implementation uses @hello-pangea/dnd for handling dragging and dropping of items.\n * We use ItemList to handle selection for multi drag and drop (not built in to @hello-pangea/dnd).\n * One caveat with the use of @hello-pangea/dnd is that it doesn't allow a drag to be initiated while\n * using a modifier key: https://github.com/atlassian/@hello-pangea/dnd/issues/1678\n */\nclass DraggableItemList<T> extends PureComponent<\n DraggableItemListProps<T>,\n DraggableItemListState\n> {\n static DEFAULT_ROW_HEIGHT = 30;\n\n static defaultProps = {\n className: '',\n draggingItemClassName: '',\n offset: 0,\n items: [],\n rowHeight: DraggableItemList.DEFAULT_ROW_HEIGHT,\n isDeselectOnClick: true,\n isDoubleClickSelect: true,\n isDropDisabled: false,\n hasPlaceholder: false,\n isDragDisabled: false,\n isMultiSelect: false,\n isStickyBottom: false,\n disableSelect: false,\n style: null,\n onFocusChange(): void {\n // no-op\n },\n onSelect(): void {\n // no-op\n },\n onSelectionChange(): void {\n // no-op\n },\n onViewportChange(): void {\n // no-op\n },\n renderItem: DraggableItemList.renderItem,\n selectedRanges: [],\n draggablePrefix: 'draggable-item',\n droppableId: 'droppable-item-list',\n 'data-testid': undefined,\n };\n\n static renderHandle(): JSX.Element {\n return (\n <div>\n <Tooltip>Drag to re-order</Tooltip>\n <FontAwesomeIcon icon={vsGripper} />\n </div>\n );\n }\n\n static renderBadge({ text }: { text?: string }): React.ReactNode {\n return text != null && text.length > 0 ? (\n <span className=\"number-badge\">{text}</span>\n ) : null;\n }\n\n static renderTextItem({\n text,\n badgeText = '',\n className = '',\n }: {\n text?: string;\n badgeText?: string;\n className: string;\n }): JSX.Element {\n return (\n <div\n className={classNames(\n 'item-list-item-content',\n 'draggable-item-list-item-content',\n className\n )}\n >\n <span className=\"title\">{text}</span>\n {DraggableItemList.renderBadge({ text: badgeText })}\n {DraggableItemList.renderHandle()}\n </div>\n );\n }\n\n static renderItem<P extends DefaultListItem>({\n item,\n isClone,\n selectedCount,\n }: DraggableRenderItemProps<P>): JSX.Element {\n const text =\n item != null ? item.displayValue ?? item.value ?? `${item}` : '';\n const badgeText =\n isClone !== undefined && isClone ? `${selectedCount}` : '';\n const className =\n isClone !== undefined && isClone ? 'item-list-item-clone' : '';\n return DraggableItemList.renderTextItem({ text, badgeText, className });\n }\n\n static getDraggableId(draggablePrefix: string, itemIndex: number): string {\n return `${draggablePrefix}/${itemIndex}`;\n }\n\n static getDraggableIndex(draggableId: string): number {\n const num = draggableId.split('/').pop();\n return parseInt(num !== undefined ? num : '', 10);\n }\n\n constructor(props: DraggableItemListProps<T>) {\n super(props);\n\n this.handleSelectionChange = this.handleSelectionChange.bind(this);\n\n this.itemList = React.createRef();\n\n this.state = {\n selectedCount: 0,\n };\n }\n\n itemList: React.RefObject<ItemList<T>>;\n\n selectItem(itemIndex: number): void {\n this.itemList.current?.selectItem(itemIndex);\n }\n\n focusItem(itemIndex: number): void {\n this.itemList.current?.focusItem(itemIndex);\n }\n\n scrollToItem(itemIndex: number): void {\n this.itemList.current?.scrollToItem(itemIndex);\n }\n\n getCachedDraggableItem = memoize(\n (\n draggablePrefix: string,\n renderItem: DraggableRenderItemFn<T>,\n item: T,\n itemIndex: number,\n isFocused: boolean,\n isSelected: boolean,\n isDragDisabled: boolean,\n style: React.CSSProperties\n ) => (\n <Draggable\n key={itemIndex}\n draggableId={DraggableItemList.getDraggableId(\n draggablePrefix,\n itemIndex\n )}\n index={itemIndex}\n isDragDisabled={isDragDisabled}\n >\n {provided => (\n <div\n role=\"menuitem\"\n className=\"draggable-item-list-item\"\n ref={provided.innerRef}\n tabIndex={-1}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...provided.draggableProps}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...provided.dragHandleProps}\n >\n {renderItem({\n item,\n itemIndex,\n isFocused,\n isSelected,\n style,\n isClone: false,\n })}\n </div>\n )}\n </Draggable>\n ),\n { max: ItemList.CACHE_SIZE }\n );\n\n handleSelectionChange(selectedRanges: readonly Range[]): void {\n this.setState({ selectedCount: RangeUtils.count(selectedRanges) });\n\n const { onSelectionChange } = this.props;\n onSelectionChange(selectedRanges);\n }\n\n getCachedRenderDraggableItem = memoize(\n (\n draggablePrefix: string,\n isDragDisabled: boolean,\n renderItem: DraggableRenderItemFn<T>\n ) =>\n ({ item, itemIndex, isFocused, isSelected, style }: RenderItemProps<T>) =>\n this.getCachedDraggableItem(\n draggablePrefix,\n renderItem,\n item,\n itemIndex,\n isFocused,\n isSelected,\n isDragDisabled,\n style\n ),\n { max: 1 }\n );\n\n getCachedRenderClone = memoize(\n (\n draggingItemClassName: string,\n items: readonly T[],\n offset: number,\n renderItem: DraggableRenderItemFn<T>\n ): DraggableChildrenFn =>\n // eslint-disable-next-line react/no-unstable-nested-components, react/display-name, react/function-component-definition\n (provided, snapshot, rubric) => {\n // eslint-disable-next-line react/no-this-in-sfc\n const { selectedCount } = this.state;\n const { draggableProps, dragHandleProps, innerRef } = provided;\n const { index: itemIndex } = rubric.source;\n const item = items[itemIndex - offset];\n return (\n <div\n className={classNames(\n 'draggable-item-list-dragging-item-container',\n draggingItemClassName\n )}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...draggableProps}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...dragHandleProps}\n ref={innerRef}\n >\n <div\n className={classNames(\n 'draggable-item-list-dragging-item',\n { 'two-dragged': selectedCount === 2 },\n { 'multiple-dragged': selectedCount > 2 }\n )}\n >\n {renderItem({\n item,\n itemIndex,\n isFocused: false,\n isSelected: true,\n style: {},\n isClone: true,\n selectedCount,\n })}\n </div>\n </div>\n );\n },\n { max: 1 }\n );\n\n render(): JSX.Element {\n const {\n className,\n draggablePrefix,\n draggingItemClassName,\n droppableId,\n isDoubleClickSelect,\n isDragDisabled,\n isDropDisabled,\n hasPlaceholder,\n isMultiSelect,\n isStickyBottom,\n itemCount,\n items,\n offset,\n onFocusChange,\n onSelect,\n onViewportChange,\n renderItem,\n rowHeight,\n selectedRanges,\n style,\n 'data-testid': dataTestId,\n } = this.props;\n return (\n <Droppable\n isDropDisabled={isDropDisabled}\n droppableId={droppableId}\n mode=\"virtual\"\n renderClone={this.getCachedRenderClone(\n draggingItemClassName,\n items,\n offset,\n renderItem\n )}\n data-testid={dataTestId}\n >\n {(provided, snapshot) => (\n <div\n role=\"menu\"\n className={classNames('draggable-item-list', className, {\n 'is-drop-disabled': isDropDisabled,\n 'is-drag-disabled': isDragDisabled,\n 'is-dragging-from-this': snapshot.draggingFromThisWith,\n 'is-dragging-over': snapshot.isDraggingOver,\n 'is-dropping': snapshot.draggingOverWith,\n })}\n style={style}\n ref={provided.innerRef}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...provided.droppableProps}\n >\n <ItemList\n focusSelector=\".draggable-item-list-item\"\n isDoubleClickSelect={isDoubleClickSelect}\n isDragSelect={false}\n isMultiSelect={isMultiSelect}\n isStickyBottom={isStickyBottom}\n itemCount={itemCount}\n items={items}\n onFocusChange={onFocusChange}\n onSelect={onSelect}\n onSelectionChange={this.handleSelectionChange}\n onViewportChange={onViewportChange}\n offset={offset}\n ref={this.itemList}\n renderItem={this.getCachedRenderDraggableItem(\n draggablePrefix,\n isDragDisabled,\n renderItem\n )}\n rowHeight={rowHeight}\n selectedRanges={selectedRanges}\n />\n {hasPlaceholder && provided.placeholder}\n </div>\n )}\n </Droppable>\n );\n }\n}\n\nexport default DraggableItemList;\n"],"mappings":"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","ignoreList":[]}
|
package/dist/EditableItemList.js
CHANGED
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
2
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
3
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
4
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
5
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
6
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
1
7
|
import React, { useCallback, useMemo, useState } from 'react';
|
|
2
8
|
import classNames from 'classnames';
|
|
3
9
|
import clamp from 'lodash.clamp';
|
|
@@ -8,16 +14,27 @@ import ItemList from "./ItemList.js";
|
|
|
8
14
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
15
|
// Display a list of items with an input for adding new items, and Add/Delete buttons
|
|
10
16
|
function EditableItemList(props) {
|
|
11
|
-
var
|
|
12
|
-
isInvalid = false,
|
|
13
|
-
items,
|
|
14
|
-
onAdd =
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
var
|
|
17
|
+
var _props$isInvalid = props.isInvalid,
|
|
18
|
+
isInvalid = _props$isInvalid === void 0 ? false : _props$isInvalid,
|
|
19
|
+
items = props.items,
|
|
20
|
+
_props$onAdd = props.onAdd,
|
|
21
|
+
onAdd = _props$onAdd === void 0 ? () => undefined : _props$onAdd,
|
|
22
|
+
_props$onDelete = props.onDelete,
|
|
23
|
+
onDelete = _props$onDelete === void 0 ? () => undefined : _props$onDelete,
|
|
24
|
+
_props$validate = props.validate,
|
|
25
|
+
validate = _props$validate === void 0 ? () => null : _props$validate;
|
|
26
|
+
var _useState = useState(null),
|
|
27
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
28
|
+
inputError = _useState2[0],
|
|
29
|
+
setInputError = _useState2[1];
|
|
30
|
+
var _useState3 = useState([]),
|
|
31
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
32
|
+
selectedRanges = _useState4[0],
|
|
33
|
+
setSelectedRanges = _useState4[1];
|
|
34
|
+
var _useState5 = useState(''),
|
|
35
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
36
|
+
value = _useState6[0],
|
|
37
|
+
setValue = _useState6[1];
|
|
21
38
|
var handleSelectionChange = useCallback(ranges => {
|
|
22
39
|
setSelectedRanges(ranges);
|
|
23
40
|
}, []);
|
|
@@ -38,9 +55,7 @@ function EditableItemList(props) {
|
|
|
38
55
|
}
|
|
39
56
|
}, [value, onAdd, validate]);
|
|
40
57
|
var handleInputChange = useCallback(event => {
|
|
41
|
-
var
|
|
42
|
-
value: inputValue
|
|
43
|
-
} = event.target;
|
|
58
|
+
var inputValue = event.target.value;
|
|
44
59
|
setValue(inputValue);
|
|
45
60
|
setInputError(inputValue === '' ? null : validate(inputValue));
|
|
46
61
|
}, [validate]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditableItemList.js","names":["React","useCallback","useMemo","useState","classNames","clamp","vsAdd","vsTrash","RangeUtils","Button","ItemList","jsx","_jsx","jsxs","_jsxs","EditableItemList","props","isInvalid","items","onAdd","undefined","onDelete","validate","inputError","setInputError","selectedRanges","setSelectedRanges","value","setValue","handleSelectionChange","ranges","handleDelete","getItemsInRanges","handleAdd","validationError","handleInputChange","event","inputValue","target","handleInputFocus","handleInputKeyDown","key","containerHeight","length","DEFAULT_ROW_HEIGHT","className","children","style","height","itemCount","map","item","index","isSelected","offset","onSelectionChange","isMultiSelect","placeholder","type","onChange","onFocus","onKeyDown","kind","onClick","disabled","icon","tooltip"],"sources":["../src/EditableItemList.tsx"],"sourcesContent":["import React, {\n type ChangeEvent,\n type KeyboardEvent,\n useCallback,\n useMemo,\n useState,\n} from 'react';\nimport classNames from 'classnames';\nimport clamp from 'lodash.clamp';\nimport { vsAdd, vsTrash } from '@deephaven/icons';\nimport { type Range, RangeUtils } from '@deephaven/utils';\nimport Button from './Button';\nimport ItemList from './ItemList';\n\nexport interface EditableItemListProps {\n isInvalid?: boolean;\n items: string[];\n onDelete: (items: string[]) => void;\n onAdd: (item: string) => void;\n validate?: (item: string) => Error | null;\n}\n\n// Display a list of items with an input for adding new items, and Add/Delete buttons\nfunction EditableItemList(props: EditableItemListProps): React.ReactElement {\n const {\n isInvalid = false,\n items,\n onAdd = () => undefined,\n onDelete = () => undefined,\n validate = () => null,\n } = props;\n const [inputError, setInputError] = useState<Error | null>(null);\n const [selectedRanges, setSelectedRanges] = useState<readonly Range[]>([]);\n const [value, setValue] = useState('');\n\n const handleSelectionChange = useCallback((ranges: readonly Range[]) => {\n setSelectedRanges(ranges);\n }, []);\n\n const handleDelete = useCallback(() => {\n onDelete(RangeUtils.getItemsInRanges(items, selectedRanges));\n setSelectedRanges([]);\n }, [items, selectedRanges, onDelete]);\n\n const handleAdd = useCallback(() => {\n if (value === '') {\n return;\n }\n const validationError = validate(value);\n if (validationError == null) {\n onAdd(value);\n setValue('');\n } else {\n setInputError(validationError);\n }\n }, [value, onAdd, validate]);\n\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const { value: inputValue } = event.target;\n setValue(inputValue);\n setInputError(inputValue === '' ? null : validate(inputValue));\n },\n [validate]\n );\n\n const handleInputFocus = useCallback(() => {\n setSelectedRanges([]);\n }, []);\n\n const handleInputKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (event.key === 'Enter') {\n handleAdd();\n }\n },\n [handleAdd]\n );\n\n const containerHeight = useMemo(\n (): number => 14 + clamp(items.length, 1, 6) * ItemList.DEFAULT_ROW_HEIGHT,\n [items.length]\n );\n\n return (\n <div\n className={classNames('editable-item-list-container', {\n 'is-invalid': isInvalid,\n })}\n >\n <div style={{ height: containerHeight }}>\n <ItemList\n itemCount={items.length}\n items={items.map((item, index) => ({\n value: item,\n isSelected: RangeUtils.isSelected(selectedRanges, index),\n }))}\n offset={0}\n selectedRanges={selectedRanges}\n onSelectionChange={handleSelectionChange}\n isMultiSelect\n />\n </div>\n <div className=\"d-flex flex-row pt-2\">\n <div className=\"d-flex flex-grow-1\">\n <input\n className={classNames('form-control', {\n 'is-invalid': inputError != null,\n })}\n placeholder=\"Enter value\"\n type=\"text\"\n value={value}\n onChange={handleInputChange}\n onFocus={handleInputFocus}\n onKeyDown={handleInputKeyDown}\n />\n </div>\n <div className=\"d-flex align-items-start mt-1 ml-2\">\n <Button\n kind=\"ghost\"\n onClick={handleAdd}\n disabled={inputError != null || value === ''}\n icon={vsAdd}\n tooltip=\"Add new item\"\n data-testid=\"add-item-button\"\n />\n <Button\n kind=\"ghost\"\n onClick={handleDelete}\n disabled={selectedRanges.length === 0}\n icon={vsTrash}\n tooltip=\"Delete selected items\"\n data-testid=\"delete-item-button\"\n />\n </div>\n </div>\n </div>\n );\n}\n\nexport default EditableItemList;\n"],"mappings":"AAAA,OAAOA,KAAK,IAGVC,WAAW,EACXC,OAAO,EACPC,QAAQ,QACH,OAAO;AACd,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,MAAM,cAAc;AAChC,SAASC,KAAK,EAAEC,OAAO,QAAQ,kBAAkB;AACjD,SAAqBC,UAAU,QAAQ,kBAAkB;AAAC,OACnDC,MAAM;AAAA,OACNC,QAAQ;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAUf;AACA,SAASC,gBAAgBA,CAACC,KAA4B,EAAsB;EAC1E,
|
|
1
|
+
{"version":3,"file":"EditableItemList.js","names":["React","useCallback","useMemo","useState","classNames","clamp","vsAdd","vsTrash","RangeUtils","Button","ItemList","jsx","_jsx","jsxs","_jsxs","EditableItemList","props","_props$isInvalid","isInvalid","items","_props$onAdd","onAdd","undefined","_props$onDelete","onDelete","_props$validate","validate","_useState","_useState2","_slicedToArray","inputError","setInputError","_useState3","_useState4","selectedRanges","setSelectedRanges","_useState5","_useState6","value","setValue","handleSelectionChange","ranges","handleDelete","getItemsInRanges","handleAdd","validationError","handleInputChange","event","inputValue","target","handleInputFocus","handleInputKeyDown","key","containerHeight","length","DEFAULT_ROW_HEIGHT","className","children","style","height","itemCount","map","item","index","isSelected","offset","onSelectionChange","isMultiSelect","placeholder","type","onChange","onFocus","onKeyDown","kind","onClick","disabled","icon","tooltip"],"sources":["../src/EditableItemList.tsx"],"sourcesContent":["import React, {\n type ChangeEvent,\n type KeyboardEvent,\n useCallback,\n useMemo,\n useState,\n} from 'react';\nimport classNames from 'classnames';\nimport clamp from 'lodash.clamp';\nimport { vsAdd, vsTrash } from '@deephaven/icons';\nimport { type Range, RangeUtils } from '@deephaven/utils';\nimport Button from './Button';\nimport ItemList from './ItemList';\n\nexport interface EditableItemListProps {\n isInvalid?: boolean;\n items: string[];\n onDelete: (items: string[]) => void;\n onAdd: (item: string) => void;\n validate?: (item: string) => Error | null;\n}\n\n// Display a list of items with an input for adding new items, and Add/Delete buttons\nfunction EditableItemList(props: EditableItemListProps): React.ReactElement {\n const {\n isInvalid = false,\n items,\n onAdd = () => undefined,\n onDelete = () => undefined,\n validate = () => null,\n } = props;\n const [inputError, setInputError] = useState<Error | null>(null);\n const [selectedRanges, setSelectedRanges] = useState<readonly Range[]>([]);\n const [value, setValue] = useState('');\n\n const handleSelectionChange = useCallback((ranges: readonly Range[]) => {\n setSelectedRanges(ranges);\n }, []);\n\n const handleDelete = useCallback(() => {\n onDelete(RangeUtils.getItemsInRanges(items, selectedRanges));\n setSelectedRanges([]);\n }, [items, selectedRanges, onDelete]);\n\n const handleAdd = useCallback(() => {\n if (value === '') {\n return;\n }\n const validationError = validate(value);\n if (validationError == null) {\n onAdd(value);\n setValue('');\n } else {\n setInputError(validationError);\n }\n }, [value, onAdd, validate]);\n\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const { value: inputValue } = event.target;\n setValue(inputValue);\n setInputError(inputValue === '' ? null : validate(inputValue));\n },\n [validate]\n );\n\n const handleInputFocus = useCallback(() => {\n setSelectedRanges([]);\n }, []);\n\n const handleInputKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (event.key === 'Enter') {\n handleAdd();\n }\n },\n [handleAdd]\n );\n\n const containerHeight = useMemo(\n (): number => 14 + clamp(items.length, 1, 6) * ItemList.DEFAULT_ROW_HEIGHT,\n [items.length]\n );\n\n return (\n <div\n className={classNames('editable-item-list-container', {\n 'is-invalid': isInvalid,\n })}\n >\n <div style={{ height: containerHeight }}>\n <ItemList\n itemCount={items.length}\n items={items.map((item, index) => ({\n value: item,\n isSelected: RangeUtils.isSelected(selectedRanges, index),\n }))}\n offset={0}\n selectedRanges={selectedRanges}\n onSelectionChange={handleSelectionChange}\n isMultiSelect\n />\n </div>\n <div className=\"d-flex flex-row pt-2\">\n <div className=\"d-flex flex-grow-1\">\n <input\n className={classNames('form-control', {\n 'is-invalid': inputError != null,\n })}\n placeholder=\"Enter value\"\n type=\"text\"\n value={value}\n onChange={handleInputChange}\n onFocus={handleInputFocus}\n onKeyDown={handleInputKeyDown}\n />\n </div>\n <div className=\"d-flex align-items-start mt-1 ml-2\">\n <Button\n kind=\"ghost\"\n onClick={handleAdd}\n disabled={inputError != null || value === ''}\n icon={vsAdd}\n tooltip=\"Add new item\"\n data-testid=\"add-item-button\"\n />\n <Button\n kind=\"ghost\"\n onClick={handleDelete}\n disabled={selectedRanges.length === 0}\n icon={vsTrash}\n tooltip=\"Delete selected items\"\n data-testid=\"delete-item-button\"\n />\n </div>\n </div>\n </div>\n );\n}\n\nexport default EditableItemList;\n"],"mappings":"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","ignoreList":[]}
|
package/dist/ErrorBoundary.js
CHANGED
|
@@ -20,21 +20,16 @@ export class ErrorBoundary extends Component {
|
|
|
20
20
|
};
|
|
21
21
|
}
|
|
22
22
|
componentDidCatch(error, errorInfo) {
|
|
23
|
-
var
|
|
24
|
-
onError
|
|
25
|
-
} = this.props;
|
|
23
|
+
var onError = this.props.onError;
|
|
26
24
|
log.error('Error caught by ErrorBoundary', error, errorInfo);
|
|
27
25
|
onError === null || onError === void 0 || onError(error, errorInfo);
|
|
28
26
|
}
|
|
29
27
|
render() {
|
|
30
|
-
var
|
|
31
|
-
children,
|
|
32
|
-
className,
|
|
33
|
-
fallback
|
|
34
|
-
|
|
35
|
-
var {
|
|
36
|
-
error
|
|
37
|
-
} = this.state;
|
|
28
|
+
var _this$props = this.props,
|
|
29
|
+
children = _this$props.children,
|
|
30
|
+
className = _this$props.className,
|
|
31
|
+
fallback = _this$props.fallback;
|
|
32
|
+
var error = this.state.error;
|
|
38
33
|
if (error != null) {
|
|
39
34
|
if (fallback != null) {
|
|
40
35
|
return fallback;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ErrorBoundary.js","names":["Log","React","Component","LoadingOverlay","jsx","_jsx","log","module","ErrorBoundary","getDerivedStateFromError","error","constructor","props","state","undefined","componentDidCatch","errorInfo","onError","render","children","className","fallback","errorMessage","concat","isLoading","isLoaded"],"sources":["../src/ErrorBoundary.tsx"],"sourcesContent":["import Log from '@deephaven/log';\nimport React, { Component, type ReactNode } from 'react';\nimport LoadingOverlay from './LoadingOverlay';\n\nconst log = Log.module('ErrorBoundary');\n\nexport interface ErrorBoundaryProps {\n /** Children to catch errors from */\n children: ReactNode;\n\n /** Classname to wrap the error message with */\n className?: string;\n\n /** Callback for when an error occurs */\n onError?: (error: Error, errorInfo: React.ErrorInfo) => void;\n\n /** Custom fallback element */\n fallback?: ReactNode;\n}\n\nexport interface ErrorBoundaryState {\n error?: Error;\n}\n\n/**\n * Error boundary for catching render errors in React. Displays an error message if an error is caught by default, or you can specify a fallback component to render.\n * https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary\n */\nexport class ErrorBoundary extends Component<\n ErrorBoundaryProps,\n ErrorBoundaryState\n> {\n static getDerivedStateFromError(error: Error): ErrorBoundaryState {\n return { error };\n }\n\n constructor(props: ErrorBoundaryProps) {\n super(props);\n this.state = { error: undefined };\n }\n\n componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {\n const { onError } = this.props;\n log.error('Error caught by ErrorBoundary', error, errorInfo);\n onError?.(error, errorInfo);\n }\n\n render(): ReactNode {\n const { children, className, fallback } = this.props;\n const { error } = this.state;\n if (error != null) {\n if (fallback != null) {\n return fallback;\n }\n\n return (\n <div className={className}>\n <LoadingOverlay\n errorMessage={`${error}`}\n isLoading={false}\n isLoaded={false}\n data-testid=\"error-boundary-loading\"\n />\n </div>\n );\n }\n\n // We need to check for undefined children because React will throw an error if we return undefined from a render method\n // Note this behaviour was changed in React 18: https://github.com/reactwg/react-18/discussions/75\n return children ?? null;\n }\n}\n\nexport default ErrorBoundary;\n"],"mappings":"AAAA,OAAOA,GAAG,MAAM,gBAAgB;AAChC,OAAOC,KAAK,IAAIC,SAAS,QAAwB,OAAO;AAAC,OAClDC,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAErB,IAAMC,GAAG,GAAGN,GAAG,CAACO,MAAM,CAAC,eAAe,CAAC;AAoBvC;AACA;AACA;AACA;AACA,OAAO,MAAMC,aAAa,SAASN,SAAS,CAG1C;EACA,OAAOO,wBAAwBA,CAACC,KAAY,EAAsB;IAChE,OAAO;MAAEA;IAAM,CAAC;EAClB;EAEAC,WAAWA,CAACC,KAAyB,EAAE;IACrC,KAAK,CAACA,KAAK,CAAC;IACZ,IAAI,CAACC,KAAK,GAAG;MAAEH,KAAK,EAAEI;IAAU,CAAC;EACnC;EAEAC,iBAAiBA,CAACL,KAAY,EAAEM,SAA0B,EAAQ;IAChE,
|
|
1
|
+
{"version":3,"file":"ErrorBoundary.js","names":["Log","React","Component","LoadingOverlay","jsx","_jsx","log","module","ErrorBoundary","getDerivedStateFromError","error","constructor","props","state","undefined","componentDidCatch","errorInfo","onError","render","_this$props","children","className","fallback","errorMessage","concat","isLoading","isLoaded"],"sources":["../src/ErrorBoundary.tsx"],"sourcesContent":["import Log from '@deephaven/log';\nimport React, { Component, type ReactNode } from 'react';\nimport LoadingOverlay from './LoadingOverlay';\n\nconst log = Log.module('ErrorBoundary');\n\nexport interface ErrorBoundaryProps {\n /** Children to catch errors from */\n children: ReactNode;\n\n /** Classname to wrap the error message with */\n className?: string;\n\n /** Callback for when an error occurs */\n onError?: (error: Error, errorInfo: React.ErrorInfo) => void;\n\n /** Custom fallback element */\n fallback?: ReactNode;\n}\n\nexport interface ErrorBoundaryState {\n error?: Error;\n}\n\n/**\n * Error boundary for catching render errors in React. Displays an error message if an error is caught by default, or you can specify a fallback component to render.\n * https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary\n */\nexport class ErrorBoundary extends Component<\n ErrorBoundaryProps,\n ErrorBoundaryState\n> {\n static getDerivedStateFromError(error: Error): ErrorBoundaryState {\n return { error };\n }\n\n constructor(props: ErrorBoundaryProps) {\n super(props);\n this.state = { error: undefined };\n }\n\n componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {\n const { onError } = this.props;\n log.error('Error caught by ErrorBoundary', error, errorInfo);\n onError?.(error, errorInfo);\n }\n\n render(): ReactNode {\n const { children, className, fallback } = this.props;\n const { error } = this.state;\n if (error != null) {\n if (fallback != null) {\n return fallback;\n }\n\n return (\n <div className={className}>\n <LoadingOverlay\n errorMessage={`${error}`}\n isLoading={false}\n isLoaded={false}\n data-testid=\"error-boundary-loading\"\n />\n </div>\n );\n }\n\n // We need to check for undefined children because React will throw an error if we return undefined from a render method\n // Note this behaviour was changed in React 18: https://github.com/reactwg/react-18/discussions/75\n return children ?? null;\n }\n}\n\nexport default ErrorBoundary;\n"],"mappings":"AAAA,OAAOA,GAAG,MAAM,gBAAgB;AAChC,OAAOC,KAAK,IAAIC,SAAS,QAAwB,OAAO;AAAC,OAClDC,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAErB,IAAMC,GAAG,GAAGN,GAAG,CAACO,MAAM,CAAC,eAAe,CAAC;AAoBvC;AACA;AACA;AACA;AACA,OAAO,MAAMC,aAAa,SAASN,SAAS,CAG1C;EACA,OAAOO,wBAAwBA,CAACC,KAAY,EAAsB;IAChE,OAAO;MAAEA;IAAM,CAAC;EAClB;EAEAC,WAAWA,CAACC,KAAyB,EAAE;IACrC,KAAK,CAACA,KAAK,CAAC;IACZ,IAAI,CAACC,KAAK,GAAG;MAAEH,KAAK,EAAEI;IAAU,CAAC;EACnC;EAEAC,iBAAiBA,CAACL,KAAY,EAAEM,SAA0B,EAAQ;IAChE,IAAQC,OAAO,GAAK,IAAI,CAACL,KAAK,CAAtBK,OAAO;IACfX,GAAG,CAACI,KAAK,CAAC,+BAA+B,EAAEA,KAAK,EAAEM,SAAS,CAAC;IAC5DC,OAAO,aAAPA,OAAO,eAAPA,OAAO,CAAGP,KAAK,EAAEM,SAAS,CAAC;EAC7B;EAEAE,MAAMA,CAAA,EAAc;IAClB,IAAAC,WAAA,GAA0C,IAAI,CAACP,KAAK;MAA5CQ,QAAQ,GAAAD,WAAA,CAARC,QAAQ;MAAEC,SAAS,GAAAF,WAAA,CAATE,SAAS;MAAEC,QAAQ,GAAAH,WAAA,CAARG,QAAQ;IACrC,IAAQZ,KAAK,GAAK,IAAI,CAACG,KAAK,CAApBH,KAAK;IACb,IAAIA,KAAK,IAAI,IAAI,EAAE;MACjB,IAAIY,QAAQ,IAAI,IAAI,EAAE;QACpB,OAAOA,QAAQ;MACjB;MAEA,oBACEjB,IAAA;QAAKgB,SAAS,EAAEA,SAAU;QAAAD,QAAA,eACxBf,IAAA,CAACF,cAAc;UACboB,YAAY,KAAAC,MAAA,CAAKd,KAAK,CAAG;UACzBe,SAAS,EAAE,KAAM;UACjBC,QAAQ,EAAE,KAAM;UAChB,eAAY;QAAwB,CACrC;MAAC,CACC,CAAC;IAEV;;IAEA;IACA;IACA,OAAON,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAI,IAAI;EACzB;AACF;AAEA,eAAeZ,aAAa","ignoreList":[]}
|
package/dist/ErrorView.js
CHANGED
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
2
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
3
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
4
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
5
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
6
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
1
7
|
import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
|
|
2
8
|
import classNames from 'classnames';
|
|
3
9
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
@@ -11,14 +17,20 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
11
17
|
* Component that displays an error message in a textarea so user can scroll and a copy button.
|
|
12
18
|
*/
|
|
13
19
|
function ErrorView(_ref) {
|
|
14
|
-
var
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
type =
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
var
|
|
21
|
-
|
|
20
|
+
var message = _ref.message,
|
|
21
|
+
_ref$isExpanded = _ref.isExpanded,
|
|
22
|
+
isExpandedProp = _ref$isExpanded === void 0 ? false : _ref$isExpanded,
|
|
23
|
+
_ref$type = _ref.type,
|
|
24
|
+
type = _ref$type === void 0 ? 'Error' : _ref$type,
|
|
25
|
+
onDismiss = _ref.onDismiss;
|
|
26
|
+
var _useState = useState(false),
|
|
27
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
28
|
+
isExpandable = _useState2[0],
|
|
29
|
+
setIsExpandable = _useState2[1];
|
|
30
|
+
var _useState3 = useState(false),
|
|
31
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
32
|
+
isExpanded = _useState4[0],
|
|
33
|
+
setIsExpanded = _useState4[1];
|
|
22
34
|
var viewRef = useRef(null);
|
|
23
35
|
var textRef = useRef(null);
|
|
24
36
|
var handleResize = useCallback(() => {
|
package/dist/ErrorView.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ErrorView.js","names":["React","useCallback","useLayoutEffect","useRef","useState","classNames","FontAwesomeIcon","vsClose","vsDiffAdded","vsDiffRemoved","vsWarning","useDebouncedCallback","useResizeObserver","CopyButton","Button","jsx","_jsx","jsxs","_jsxs","ErrorView","_ref","message","isExpanded","isExpandedProp","type","onDismiss","isExpandable","setIsExpandable","setIsExpanded","viewRef","textRef","handleResize","current","newIsExpandable","scrollHeight","clientHeight","debouncedHandleResize","className","expanded","ref","children","icon","UNSAFE_className","tooltip","copy","concat","trim","kind","onClick"],"sources":["../src/ErrorView.tsx"],"sourcesContent":["import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport {\n vsClose,\n vsDiffAdded,\n vsDiffRemoved,\n vsWarning,\n} from '@deephaven/icons';\nimport {\n useDebouncedCallback,\n useResizeObserver,\n} from '@deephaven/react-hooks';\nimport CopyButton from './CopyButton';\nimport Button from './Button';\nimport './ErrorView.scss';\n\nexport type ErrorViewerProps = {\n /** The message to display in the error view */\n message: string;\n\n /** Set to true if you want the error view to display expanded. Will not show the Show More/Less buttons if true. Defaults to false. */\n isExpanded?: boolean;\n\n /** The type of error message to display in the header. Defaults to Error. */\n type?: string;\n\n /** Optional callback to dismiss the error. If provided, a Dismiss button will be displayed. It is up to the parent to implement the logic to dismiss the error. */\n onDismiss?: () => void;\n};\n\n/**\n * Component that displays an error message in a textarea so user can scroll and a copy button.\n */\nfunction ErrorView({\n message,\n isExpanded: isExpandedProp = false,\n type = 'Error',\n onDismiss,\n}: ErrorViewerProps): JSX.Element {\n const [isExpandable, setIsExpandable] = useState(false);\n const [isExpanded, setIsExpanded] = useState(false);\n const viewRef = useRef<HTMLDivElement>(null);\n const textRef = useRef<HTMLPreElement>(null);\n\n const handleResize = useCallback(() => {\n if (isExpanded || isExpandedProp || textRef.current == null) {\n return;\n }\n const newIsExpandable =\n textRef.current.scrollHeight > textRef.current.clientHeight;\n setIsExpandable(newIsExpandable);\n }, [isExpanded, isExpandedProp]);\n\n const debouncedHandleResize = useDebouncedCallback(handleResize, 100);\n\n useResizeObserver(viewRef.current, debouncedHandleResize);\n\n useLayoutEffect(debouncedHandleResize, [debouncedHandleResize]);\n\n return (\n <div\n className={classNames('error-view', {\n expanded: isExpanded || isExpandedProp,\n })}\n ref={viewRef}\n >\n <div className=\"error-view-header\">\n <div className=\"error-view-header-text\">\n <FontAwesomeIcon icon={vsWarning} />\n <span>{type}</span>\n </div>\n <div className=\"error-view-buttons\">\n <CopyButton\n UNSAFE_className=\"error-view-copy-button\"\n tooltip=\"Copy error contents\"\n copy={`${type}: ${message}`.trim()}\n />\n {(isExpandable || isExpanded) && !isExpandedProp && (\n <Button\n kind=\"danger\"\n className=\"error-view-expand-button\"\n onClick={() => {\n setIsExpanded(!isExpanded);\n }}\n icon={isExpanded ? vsDiffRemoved : vsDiffAdded}\n >\n {isExpanded ? 'Show Less' : 'Show More'}\n </Button>\n )}\n {onDismiss != null && (\n <Button\n kind=\"danger\"\n className=\"error-view-dismiss-button\"\n onClick={onDismiss}\n icon={vsClose}\n >\n Dismiss\n </Button>\n )}\n </div>\n </div>\n <pre className=\"error-view-text\" ref={textRef}>\n {message}\n </pre>\n </div>\n );\n}\n\nexport default ErrorView;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,eAAe,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAC7E,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,eAAe,QAAQ,gCAAgC;AAChE,SACEC,OAAO,EACPC,WAAW,EACXC,aAAa,EACbC,SAAS,QACJ,kBAAkB;AACzB,SACEC,oBAAoB,EACpBC,iBAAiB,QACZ,wBAAwB;AAAC,OACzBC,UAAU;AAAA,OACVC,MAAM;AAAA;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAiBb;AACA;AACA;AACA,SAASC,SAASA,CAAAC,IAAA,EAKgB;EAAA,
|
|
1
|
+
{"version":3,"file":"ErrorView.js","names":["React","useCallback","useLayoutEffect","useRef","useState","classNames","FontAwesomeIcon","vsClose","vsDiffAdded","vsDiffRemoved","vsWarning","useDebouncedCallback","useResizeObserver","CopyButton","Button","jsx","_jsx","jsxs","_jsxs","ErrorView","_ref","message","_ref$isExpanded","isExpanded","isExpandedProp","_ref$type","type","onDismiss","_useState","_useState2","_slicedToArray","isExpandable","setIsExpandable","_useState3","_useState4","setIsExpanded","viewRef","textRef","handleResize","current","newIsExpandable","scrollHeight","clientHeight","debouncedHandleResize","className","expanded","ref","children","icon","UNSAFE_className","tooltip","copy","concat","trim","kind","onClick"],"sources":["../src/ErrorView.tsx"],"sourcesContent":["import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport {\n vsClose,\n vsDiffAdded,\n vsDiffRemoved,\n vsWarning,\n} from '@deephaven/icons';\nimport {\n useDebouncedCallback,\n useResizeObserver,\n} from '@deephaven/react-hooks';\nimport CopyButton from './CopyButton';\nimport Button from './Button';\nimport './ErrorView.scss';\n\nexport type ErrorViewerProps = {\n /** The message to display in the error view */\n message: string;\n\n /** Set to true if you want the error view to display expanded. Will not show the Show More/Less buttons if true. Defaults to false. */\n isExpanded?: boolean;\n\n /** The type of error message to display in the header. Defaults to Error. */\n type?: string;\n\n /** Optional callback to dismiss the error. If provided, a Dismiss button will be displayed. It is up to the parent to implement the logic to dismiss the error. */\n onDismiss?: () => void;\n};\n\n/**\n * Component that displays an error message in a textarea so user can scroll and a copy button.\n */\nfunction ErrorView({\n message,\n isExpanded: isExpandedProp = false,\n type = 'Error',\n onDismiss,\n}: ErrorViewerProps): JSX.Element {\n const [isExpandable, setIsExpandable] = useState(false);\n const [isExpanded, setIsExpanded] = useState(false);\n const viewRef = useRef<HTMLDivElement>(null);\n const textRef = useRef<HTMLPreElement>(null);\n\n const handleResize = useCallback(() => {\n if (isExpanded || isExpandedProp || textRef.current == null) {\n return;\n }\n const newIsExpandable =\n textRef.current.scrollHeight > textRef.current.clientHeight;\n setIsExpandable(newIsExpandable);\n }, [isExpanded, isExpandedProp]);\n\n const debouncedHandleResize = useDebouncedCallback(handleResize, 100);\n\n useResizeObserver(viewRef.current, debouncedHandleResize);\n\n useLayoutEffect(debouncedHandleResize, [debouncedHandleResize]);\n\n return (\n <div\n className={classNames('error-view', {\n expanded: isExpanded || isExpandedProp,\n })}\n ref={viewRef}\n >\n <div className=\"error-view-header\">\n <div className=\"error-view-header-text\">\n <FontAwesomeIcon icon={vsWarning} />\n <span>{type}</span>\n </div>\n <div className=\"error-view-buttons\">\n <CopyButton\n UNSAFE_className=\"error-view-copy-button\"\n tooltip=\"Copy error contents\"\n copy={`${type}: ${message}`.trim()}\n />\n {(isExpandable || isExpanded) && !isExpandedProp && (\n <Button\n kind=\"danger\"\n className=\"error-view-expand-button\"\n onClick={() => {\n setIsExpanded(!isExpanded);\n }}\n icon={isExpanded ? vsDiffRemoved : vsDiffAdded}\n >\n {isExpanded ? 'Show Less' : 'Show More'}\n </Button>\n )}\n {onDismiss != null && (\n <Button\n kind=\"danger\"\n className=\"error-view-dismiss-button\"\n onClick={onDismiss}\n icon={vsClose}\n >\n Dismiss\n </Button>\n )}\n </div>\n </div>\n <pre className=\"error-view-text\" ref={textRef}>\n {message}\n </pre>\n </div>\n );\n}\n\nexport default ErrorView;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
2
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
3
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
4
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
5
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
6
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
1
7
|
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
2
8
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
3
9
|
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
@@ -67,19 +73,16 @@ class HierarchicalCheckboxMenu extends Component {
|
|
|
67
73
|
event.stopPropagation();
|
|
68
74
|
event.preventDefault();
|
|
69
75
|
this.setState(state => {
|
|
70
|
-
var
|
|
71
|
-
menuIsOpen
|
|
72
|
-
} = state;
|
|
76
|
+
var menuIsOpen = state.menuIsOpen;
|
|
73
77
|
return {
|
|
74
78
|
menuIsOpen: !menuIsOpen
|
|
75
79
|
};
|
|
76
80
|
});
|
|
77
81
|
}
|
|
78
82
|
toggleValueFor(parent, child) {
|
|
79
|
-
var
|
|
80
|
-
valueMap,
|
|
81
|
-
onUpdateValueMap
|
|
82
|
-
} = this.props;
|
|
83
|
+
var _this$props = this.props,
|
|
84
|
+
valueMap = _this$props.valueMap,
|
|
85
|
+
onUpdateValueMap = _this$props.onUpdateValueMap;
|
|
83
86
|
|
|
84
87
|
// Make a deep copy of the Map and toggle the boolean for parent / child
|
|
85
88
|
var map = new Map(valueMap);
|
|
@@ -112,10 +115,9 @@ class HierarchicalCheckboxMenu extends Component {
|
|
|
112
115
|
onUpdateValueMap(map);
|
|
113
116
|
}
|
|
114
117
|
setAllValues(value) {
|
|
115
|
-
var
|
|
116
|
-
valueMap,
|
|
117
|
-
onUpdateValueMap
|
|
118
|
-
} = this.props;
|
|
118
|
+
var _this$props2 = this.props,
|
|
119
|
+
valueMap = _this$props2.valueMap,
|
|
120
|
+
onUpdateValueMap = _this$props2.onUpdateValueMap;
|
|
119
121
|
|
|
120
122
|
// Make a deep copy of the Map and set everything
|
|
121
123
|
var copy = new Map();
|
|
@@ -137,22 +139,25 @@ class HierarchicalCheckboxMenu extends Component {
|
|
|
137
139
|
this.setAllValues(false);
|
|
138
140
|
}
|
|
139
141
|
renderMenuElement() {
|
|
140
|
-
var
|
|
141
|
-
valueMap,
|
|
142
|
-
'data-testid'
|
|
143
|
-
} = this.props;
|
|
142
|
+
var _this$props3 = this.props,
|
|
143
|
+
valueMap = _this$props3.valueMap,
|
|
144
|
+
dataTestId = _this$props3['data-testid'];
|
|
144
145
|
return /*#__PURE__*/_jsxs("div", {
|
|
145
146
|
className: "hcm-menu-container",
|
|
146
147
|
children: [Array.from(valueMap.entries()).map(_ref => {
|
|
147
|
-
var
|
|
148
|
+
var _ref2 = _slicedToArray(_ref, 2),
|
|
149
|
+
parent = _ref2[0],
|
|
150
|
+
children = _ref2[1];
|
|
148
151
|
return /*#__PURE__*/_jsxs("div", {
|
|
149
152
|
children: [/*#__PURE__*/_jsx(Checkbox, {
|
|
150
153
|
className: "hcm-parent",
|
|
151
154
|
checked: HierarchicalCheckboxMenu.isParentSelected(parent, valueMap),
|
|
152
155
|
onChange: () => this.toggleValueFor(parent),
|
|
153
156
|
children: parent
|
|
154
|
-
}), children !== undefined && typeof children !== 'boolean' && Array.from(children.entries()).map(
|
|
155
|
-
var
|
|
157
|
+
}), children !== undefined && typeof children !== 'boolean' && Array.from(children.entries()).map(_ref3 => {
|
|
158
|
+
var _ref4 = _slicedToArray(_ref3, 2),
|
|
159
|
+
child = _ref4[0],
|
|
160
|
+
value = _ref4[1];
|
|
156
161
|
return /*#__PURE__*/_jsx(Checkbox, {
|
|
157
162
|
className: "hcm-child",
|
|
158
163
|
checked: value,
|
|
@@ -175,16 +180,13 @@ class HierarchicalCheckboxMenu extends Component {
|
|
|
175
180
|
});
|
|
176
181
|
}
|
|
177
182
|
render() {
|
|
178
|
-
var
|
|
179
|
-
menuText,
|
|
180
|
-
className,
|
|
181
|
-
icon,
|
|
182
|
-
id,
|
|
183
|
-
'data-testid'
|
|
184
|
-
|
|
185
|
-
var {
|
|
186
|
-
menuIsOpen
|
|
187
|
-
} = this.state;
|
|
183
|
+
var _this$props4 = this.props,
|
|
184
|
+
menuText = _this$props4.menuText,
|
|
185
|
+
className = _this$props4.className,
|
|
186
|
+
icon = _this$props4.icon,
|
|
187
|
+
id = _this$props4.id,
|
|
188
|
+
dataTestId = _this$props4['data-testid'];
|
|
189
|
+
var menuIsOpen = this.state.menuIsOpen;
|
|
188
190
|
return /*#__PURE__*/_jsxs("button", {
|
|
189
191
|
type: "button",
|
|
190
192
|
className: classNames('btn hcm-btn', className),
|