@deephaven/iris-grid 0.55.0 → 0.55.1-alpha-theming-bootstrap.77

package/dist/sidebar/visibility-ordering-builder/VisibilityOrderingBuilder.js

@@ -3,7 +3,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import { GridUtils } from '@deephaven/grid';
 import { TextUtils, assertNotNull, DbNameValidator } from '@deephaven/utils';
@@ -23,7 +23,7 @@ import { moveItemsFromDrop, moveToGroup } from "./VisibilityOrderingBuilderUtils
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var DEBOUNCE_SEARCH_COLUMN = 150;
-class VisibilityOrderingBuilder extends Component {
+class VisibilityOrderingBuilder extends PureComponent {
   constructor(props) {
     super(props);
     _defineProperty(this, "list", void 0);
@@ -183,11 +183,25 @@ class VisibilityOrderingBuilder extends Component {
     this.handleDragStart = this.handleDragStart.bind(this);
     this.state = {
       selectedColumns: new Set(),
+      queriedColumnIndex: undefined,
+      queriedColumnRange: undefined,
+      prevQueriedColumns: undefined,
       lastSelectedColumn: '',
       searchFilter: ''
     };
     this.list = null;
   }
+  componentDidUpdate(prevProps) {
+    var {
+      movedColumns
+    } = this.props;
+    if (movedColumns !== prevProps.movedColumns) {
+      var {
+        searchFilter
+      } = this.state;
+      this.searchColumns(searchFilter, false);
+    }
+  }
   componentWillUnmount() {
     this.debouncedSearchColumns.cancel();
   }
@@ -200,6 +214,9 @@ class VisibilityOrderingBuilder extends Component {
     } = this.props;
     this.setState({
       selectedColumns: new Set(),
+      queriedColumnIndex: undefined,
+      queriedColumnRange: undefined,
+      prevQueriedColumns: undefined,
       lastSelectedColumn: '',
       searchFilter: ''
     });
@@ -226,6 +243,7 @@ class VisibilityOrderingBuilder extends Component {
     this.debouncedSearchColumns(searchFilter);
   }
   searchColumns(searchFilter) {
+    var updateQuery = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     var flattenedItems = flattenTree(this.getTreeItems());
     var itemsMatch = flattenedItems.filter(_ref6 => {
       var _data$group$isNew, _data$group;
@@ -235,26 +253,140 @@ class VisibilityOrderingBuilder extends Component {
       } = _ref6;
       return !((_data$group$isNew = (_data$group = data.group) === null || _data$group === void 0 ? void 0 : _data$group.isNew) !== null && _data$group$isNew !== void 0 ? _data$group$isNew : false) && id.toLowerCase().includes(searchFilter.toLowerCase());
     });
-    var columnsMatch = itemsMatch.map(_ref7 => {
+    var columnsMatchMap = itemsMatch.reduce((acc, _ref7) => {
       var {
         id
       } = _ref7;
-      return id;
-    });
-    var visibleIndexToFocus = flattenedItems.findIndex(_ref8 => {
+      var originalIndex = flattenedItems.findIndex(item => item.id === id);
+      return _objectSpread(_objectSpread({}, acc), {}, {
+        [originalIndex]: id
+      });
+    }, {});
+    if (!updateQuery) {
+      this.setState({
+        prevQueriedColumns: columnsMatchMap
+      });
+      return;
+    }
+    var columnIds = itemsMatch.map(_ref8 => {
       var {
         id
       } = _ref8;
-      return id.toLowerCase().includes(searchFilter.toLowerCase());
+      return id;
     });
-    this.addColumnToSelected(columnsMatch, false);
-    if (columnsMatch.length > 0) {
+    this.addColumnToSelected(columnIds, false);
+    if (columnIds.length > 0) {
       var _this$list;
+      var visibleIndexToFocus = flattenedItems.findIndex(_ref9 => {
+        var {
+          id
+        } = _ref9;
+        return id.toLowerCase().includes(searchFilter.toLowerCase());
+      });
       var columnItemToFocus = (_this$list = this.list) === null || _this$list === void 0 ? void 0 : _this$list.querySelectorAll('.item-wrapper')[visibleIndexToFocus];
       columnItemToFocus === null || columnItemToFocus === void 0 ? void 0 : columnItemToFocus.scrollIntoView({
         block: 'center'
       });
     }
+    this.setState({
+      prevQueriedColumns: columnsMatchMap,
+      queriedColumnIndex: undefined
+    });
+  }
+
+  /**
+   * Change the selected column to the next or previous column that matches the search criteria.
+   *
+   * queriedColumnRange stores the closes options in the case that the user clicks on an option that didn't fulfill the search criteria.
+   * On click of the forward/back button, queriedColumnIndex is updated to either the upper or lower index in queriedColumnRange
+   *
+   * queriedColumnIndex is the current index within prevQueriedColumns. Not their actual index in the tree.
+   *
+   * @param direction The direction to move the selection
+   */
+
+  changeSelectedColumn(direction) {
+    var _this$list2;
+    var {
+      queriedColumnIndex,
+      queriedColumnRange,
+      prevQueriedColumns
+    } = this.state;
+    var newQueriedColumnIndex = queriedColumnIndex;
+    if (prevQueriedColumns === undefined) return;
+    var queriedColumnsLength = Object.keys(prevQueriedColumns).length;
+    if (direction === 'forward') {
+      if (queriedColumnRange !== undefined) {
+        newQueriedColumnIndex = queriedColumnRange.nextIndex;
+      } else if (newQueriedColumnIndex === undefined || newQueriedColumnIndex >= queriedColumnsLength - 1) {
+        newQueriedColumnIndex = 0;
+      } else {
+        newQueriedColumnIndex += 1;
+      }
+    } else if (direction === 'back') {
+      if (queriedColumnRange !== undefined) {
+        newQueriedColumnIndex = queriedColumnRange.prevIndex;
+      } else if (newQueriedColumnIndex === undefined || newQueriedColumnIndex <= 0) {
+        newQueriedColumnIndex = queriedColumnsLength - 1;
+      } else {
+        newQueriedColumnIndex -= 1;
+      }
+    }
+    this.addColumnToSelected([Object.values(prevQueriedColumns)[newQueriedColumnIndex]], false);
+    var actualColumnIndex = parseInt(Object.keys(prevQueriedColumns)[newQueriedColumnIndex], 10);
+    var columnItemToFocus = (_this$list2 = this.list) === null || _this$list2 === void 0 ? void 0 : _this$list2.querySelectorAll('.item-wrapper')[actualColumnIndex];
+    columnItemToFocus === null || columnItemToFocus === void 0 ? void 0 : columnItemToFocus.scrollIntoView({
+      block: 'center'
+    });
+    this.setState({
+      queriedColumnIndex: newQueriedColumnIndex,
+      queriedColumnRange: undefined
+    });
+  }
+
+  /**
+   * Handles changing the queriedColumnIndex on user click.
+   *
+   * If the option clicked matches the search criteria the index is updated immediately.
+   *
+   * If the option clicked doesn't meet the search criteria, the two closest options that fulfill the criteria are stored.
+   * On click of the forward/back button the selection will change to one of those options. (Think of VS Code search functionality)
+   *
+   * @param name the name of the clicked column
+   */
+  adjustQueriedIndex(name) {
+    var {
+      prevQueriedColumns
+    } = this.state;
+    if (prevQueriedColumns === undefined) return;
+    if (name in Object.values(prevQueriedColumns)) {
+      var newQueriedColumnIndex = Object.values(prevQueriedColumns).indexOf(name);
+      this.setState({
+        queriedColumnIndex: newQueriedColumnIndex,
+        queriedColumnRange: undefined
+      });
+      return;
+    }
+    var flattenedItems = flattenTree(this.getTreeItems());
+    var clickedIndex = flattenedItems.findIndex(item => item.id === name);
+    var queriedColumnsIndexes = Object.keys(prevQueriedColumns).map(idx => parseInt(idx, 10));
+    var prevIndex = queriedColumnsIndexes.length - 1;
+    var nextIndex = 0;
+    for (var i = 0; i < queriedColumnsIndexes.length; i += 1) {
+      var index = queriedColumnsIndexes[i];
+      if (index < clickedIndex) {
+        prevIndex = i;
+      } else if (index > clickedIndex) {
+        nextIndex = i;
+        break;
+      }
+    }
+    this.setState({
+      queriedColumnRange: {
+        prevIndex,
+        nextIndex
+      }
+    });
   }
 
   /**
@@ -411,16 +543,16 @@ class VisibilityOrderingBuilder extends Component {
     var scrollListAfterMove;
     if (option === VisibilityOrderingBuilder.MOVE_OPTIONS.TOP) {
       scrollListAfterMove = () => {
-        var _this$list2, _this$list2$parentEle;
-        (_this$list2 = this.list) === null || _this$list2 === void 0 ? void 0 : (_this$list2$parentEle = _this$list2.parentElement) === null || _this$list2$parentEle === void 0 ? void 0 : _this$list2$parentEle.scroll({
+        var _this$list3, _this$list3$parentEle;
+        (_this$list3 = this.list) === null || _this$list3 === void 0 ? void 0 : (_this$list3$parentEle = _this$list3.parentElement) === null || _this$list3$parentEle === void 0 ? void 0 : _this$list3$parentEle.scroll({
           top: 0
         });
       };
     }
     if (option === VisibilityOrderingBuilder.MOVE_OPTIONS.BOTTOM) {
       scrollListAfterMove = () => {
-        var _this$list3, _this$list3$parentEle;
-        (_this$list3 = this.list) === null || _this$list3 === void 0 ? void 0 : (_this$list3$parentEle = _this$list3.parentElement) === null || _this$list3$parentEle === void 0 ? void 0 : _this$list3$parentEle.scroll({
+        var _this$list4, _this$list4$parentEle;
+        (_this$list4 = this.list) === null || _this$list4 === void 0 ? void 0 : (_this$list4$parentEle = _this$list4.parentElement) === null || _this$list4$parentEle === void 0 ? void 0 : _this$list4$parentEle.scroll({
           top: this.list.parentElement.scrollHeight
         });
       };
@@ -504,10 +636,10 @@ class VisibilityOrderingBuilder extends Component {
     }
     var movableItems = flattenTree(this.getTreeItems());
     if (isSelected && !isShiftKeyDown && lastSelectedColumn === name) {
-      var selectedItem = movableItems.find(_ref9 => {
+      var selectedItem = movableItems.find(_ref10 => {
         var {
           id
-        } = _ref9;
+        } = _ref10;
         return id === name;
       });
       assertNotNull(selectedItem);
@@ -524,6 +656,7 @@ class VisibilityOrderingBuilder extends Component {
       columnsToBeAdded.push(...movableItems.slice(Math.min(lastSelectedIndex, selectedIndex), Math.max(lastSelectedIndex, selectedIndex) + 1).map(item => item.id));
     }
     this.addColumnToSelected(columnsToBeAdded, isModifierKeyDown || isShiftKeyDown);
+    this.adjustQueriedIndex(name);
     this.setState({
       lastSelectedColumn: name
     });
@@ -547,11 +680,11 @@ class VisibilityOrderingBuilder extends Component {
     // The treeItems array will always be parent -> child in the order
     // We don't need to recursively iterate because of this
     // The parent will always be added before any children for nested selections
-    flattenedItems.forEach(_ref10 => {
+    flattenedItems.forEach(_ref11 => {
       var {
         id,
         children
-      } = _ref10;
+      } = _ref11;
       if (newSelectedColumns.has(id)) {
         children.forEach(child => newSelectedColumns.add(child.id));
       }
@@ -576,17 +709,17 @@ class VisibilityOrderingBuilder extends Component {
       selectedColumns
     } = this.state;
     var flattenedItems = flattenTree(this.getTreeItems());
-    var item = flattenedItems.find(_ref11 => {
+    var item = flattenedItems.find(_ref12 => {
       var {
         id
-      } = _ref11;
+      } = _ref12;
       return id === name;
     });
     assertNotNull(item);
-    var parentItem = flattenedItems.find(_ref12 => {
+    var parentItem = flattenedItems.find(_ref13 => {
       var {
         id
-      } = _ref12;
+      } = _ref13;
       return id === item.parentId;
     });
 
@@ -597,10 +730,10 @@ class VisibilityOrderingBuilder extends Component {
     var _loop2 = function _loop2() {
       selectedColumns.delete(parentItem.id);
       var newParentId = parentItem.parentId;
-      parentItem = flattenedItems.find(_ref13 => {
+      parentItem = flattenedItems.find(_ref14 => {
         var {
           id
-        } = _ref13;
+        } = _ref14;
         return id === newParentId;
       });
     };
@@ -649,10 +782,10 @@ class VisibilityOrderingBuilder extends Component {
     } = this.props;
     var newGroups = [...columnHeaderGroups];
     var oldName = group.name;
-    var groupIndex = newGroups.findIndex(_ref14 => {
+    var groupIndex = newGroups.findIndex(_ref15 => {
       var {
         name
-      } = _ref14;
+      } = _ref15;
       return name === oldName;
     });
     var oldGroup = newGroups[groupIndex];
@@ -661,10 +794,10 @@ class VisibilityOrderingBuilder extends Component {
     var newGroup = new ColumnHeaderGroup(oldGroup);
     newGroup.name = newName;
     newGroups.splice(groupIndex, 1, newGroup);
-    var parentIndex = newGroups.findIndex(_ref15 => {
+    var parentIndex = newGroups.findIndex(_ref16 => {
       var {
         name
-      } = _ref15;
+      } = _ref16;
       return name === newGroup.parent;
     });
     if (parentIndex >= 0) {
@@ -709,10 +842,10 @@ class VisibilityOrderingBuilder extends Component {
     var name = "".concat(ColumnHeaderGroup.NEW_GROUP_PREFIX, "-").concat(Date.now());
     var newGroup = new ColumnHeaderGroup({
       name,
-      children: selectedItems.map(_ref16 => {
+      children: selectedItems.map(_ref17 => {
         var {
           id
-        } = _ref16;
+        } = _ref17;
         return id;
       }),
       depth: 0,
@@ -720,8 +853,8 @@ class VisibilityOrderingBuilder extends Component {
     });
 
     onMovedColumnsChanged(movedColumns.concat(newMoves), () => {
-      var _this$list4, _this$list4$parentEle;
-      (_this$list4 = this.list) === null || _this$list4 === void 0 ? void 0 : (_this$list4$parentEle = _this$list4.parentElement) === null || _this$list4$parentEle === void 0 ? void 0 : _this$list4$parentEle.scroll({
+      var _this$list5, _this$list5$parentEle;
+      (_this$list5 = this.list) === null || _this$list5 === void 0 ? void 0 : (_this$list5$parentEle = _this$list5.parentElement) === null || _this$list5$parentEle === void 0 ? void 0 : _this$list5$parentEle.scroll({
         top: 0
       });
     });
@@ -745,15 +878,15 @@ class VisibilityOrderingBuilder extends Component {
     if (!DbNameValidator.isValidColumnName(groupName)) {
       return 'Invalid name';
     }
-    if (columns.some(_ref17 => {
+    if (columns.some(_ref18 => {
       var {
         name
-      } = _ref17;
+      } = _ref18;
       return name === groupName;
-    }) || columnHeaderGroups.some(_ref18 => {
+    }) || columnHeaderGroups.some(_ref19 => {
       var {
         name
-      } = _ref18;
+      } = _ref19;
       return name === groupName;
     })) {
       return 'Duplicate name';
@@ -809,11 +942,11 @@ class VisibilityOrderingBuilder extends Component {
       selectedColumns
     } = this.state;
     var treeItems = flattenTree(this.getTreeItems());
-    return treeItems.filter(_ref19 => {
+    return treeItems.filter(_ref20 => {
       var {
         id,
         parentId
-      } = _ref19;
+      } = _ref20;
       return (
         // All items whose parents are not selected
         selectedColumns.has(id) && !selectedColumns.has(parentId !== null && parentId !== void 0 ? parentId : '')
@@ -828,7 +961,9 @@ class VisibilityOrderingBuilder extends Component {
     } = this.props;
     var {
       selectedColumns,
-      searchFilter
+      searchFilter,
+      prevQueriedColumns,
+      queriedColumnIndex
     } = this.state;
     var hasSelection = selectedColumns.size > 0;
     var treeItems = this.getTreeItems();
@@ -841,6 +976,11 @@ class VisibilityOrderingBuilder extends Component {
     var allToggleText = areSomeVisible ? 'Hide All' : 'Show All';
     var selectedToggleText = areSomeVisible ? 'Hide Selected' : 'Show Selected';
     var visibilityOrderingList = this.makeVisibilityOrderingList(model.columns, treeItems);
+    var cursor = {
+      index: queriedColumnIndex,
+      next: direction => this.changeSelectedColumn(direction)
+    };
+    var matchCount = Object.keys(prevQueriedColumns !== null && prevQueriedColumns !== void 0 ? prevQueriedColumns : {}).length;
     return /*#__PURE__*/_jsxs("div", {
       role: "menu",
       className: "visibility-ordering-builder",
@@ -859,8 +999,9 @@ class VisibilityOrderingBuilder extends Component {
         }), /*#__PURE__*/_jsx(SearchInput, {
           className: "visibility-search",
           value: searchFilter,
-          matchCount: searchFilter ? selectedColumns.size : undefined,
-          onChange: this.handleSearchInputChange
+          matchCount: searchFilter ? matchCount : undefined,
+          onChange: this.handleSearchInputChange,
+          cursor: cursor
         })]
       }), /*#__PURE__*/_jsxs("div", {
         className: "top-menu",