@deephaven/iris-grid 0.24.1-hierarchical-table.0 → 0.25.1-beta.0

package/dist/sidebar/VisibilityOrderingBuilder.js

@@ -1,753 +0,0 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-import React, { Component } from 'react';
-import classNames from 'classnames';
-import { GridUtils } from '@deephaven/grid';
-import { TextUtils, assertNotNull } from '@deephaven/utils';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { dhEye, dhEyeSlash, dhSortAlphaDown, dhSortAlphaUp, dhArrowToTop, dhArrowToBottom, vsChevronUp, vsChevronDown, vsGripper } from '@deephaven/icons';
-import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
-import memoize from 'memoizee';
-import debounce from 'lodash.debounce';
-import { Button, SearchInput, Tooltip } from '@deephaven/components';
-import Log from '@deephaven/log';
-import "./VisibilityOrderingBuilder.css";
-var log = Log.module('VisibilityOrderingBuilder');
-var DEBOUNCE_SEARCH_COLUMN = 150;
-class VisibilityOrderingBuilder extends Component {
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "list", void 0);
-    _defineProperty(this, "debouncedSearchColumns", debounce(this.searchColumns, DEBOUNCE_SEARCH_COLUMN));
-    _defineProperty(this, "getFirstMovableIndex", memoize((model, columns) => {
-      for (var i = 0; i < columns.length; i += 1) {
-        if (model.isColumnMovable(i)) {
-          return i;
-        }
-      }
-      return null;
-    }));
-    _defineProperty(this, "getLastMovableIndex", memoize((model, columns) => {
-      for (var i = columns.length - 1; i >= 0; i -= 1) {
-        if (model.isColumnMovable(i)) {
-          return i;
-        }
-      }
-      return null;
-    }));
-    _defineProperty(this, "renderImmovableItem", memoize(columnName => /*#__PURE__*/React.createElement("div", {
-      className: "visibility-ordering-list-item immovable",
-      key: columnName
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "column-item"
-    }, /*#__PURE__*/React.createElement("span", {
-      className: "column-name"
-    }, columnName)))));
-    _defineProperty(this, "renderVisibilityOrderingItem", memoize((columnName, modelIndex, visibleIndex, isHidden, isSelected, isDragging, isDragged, columnsDragged) => /*#__PURE__*/React.createElement(Draggable, {
-      draggableId: "".concat(modelIndex) // draggableId requires string input
-      ,
-      index: visibleIndex,
-      key: columnName,
-      disableInteractiveElementBlocking: true
-    }, provided => /*#__PURE__*/React.createElement("div", _extends({
-      className: "visibility-ordering-list-item",
-      ref: provided.innerRef
-      // eslint-disable-next-line react/jsx-props-no-spreading
-    }, provided.draggableProps), /*#__PURE__*/React.createElement(Button, {
-      kind: "ghost",
-      className: "btn-link-icon visibility",
-      onMouseDown: event => {
-        this.handleVisibilityDraggingStart(modelIndex, isHidden ? VisibilityOrderingBuilder.VISIBILITY_OPTIONS.SHOW : VisibilityOrderingBuilder.VISIBILITY_OPTIONS.HIDE, event);
-      },
-      onMouseEnter: event => {
-        this.handleMouseEnter(modelIndex, event);
-      },
-      onMouseUp: event => {
-        this.handleVisibilityDraggingEnd(event);
-      },
-      onClick: event => {
-        this.handleItemClick(modelIndex, event, false);
-      },
-      onKeyDown: event => {
-        // trigger on keyboard enter or space keys
-        if (event.key === 'Enter' || event.key === ' ') {
-          this.handleVisibilityKeyDown(modelIndex, isHidden ? VisibilityOrderingBuilder.VISIBILITY_OPTIONS.SHOW : VisibilityOrderingBuilder.VISIBILITY_OPTIONS.HIDE);
-          event.stopPropagation();
-          event.preventDefault();
-        }
-      },
-      tooltip: isHidden ? 'Show' : 'Hide'
-    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      icon: isHidden ? dhEyeSlash : dhEye
-    })), /*#__PURE__*/React.createElement("div", _extends({
-      role: "menuitem",
-      tabIndex: 0,
-      className: classNames('ordering column-item', {
-        isSelected
-      }, {
-        isDragging
-      }, {
-        isDragged
-      }, {
-        'two-dragged': columnsDragged === 2
-      }, {
-        'multiple-dragged': columnsDragged != null && columnsDragged > 2
-      }),
-      onClick: event => {
-        this.handleItemClick(modelIndex, event);
-      }
-      // eslint-disable-next-line react/jsx-props-no-spreading
-    }, provided.dragHandleProps), /*#__PURE__*/React.createElement("span", {
-      className: "column-name"
-    }, columnName), /*#__PURE__*/React.createElement("div", null, columnsDragged != null && columnsDragged !== 0 && /*#__PURE__*/React.createElement("span", {
-      className: "number-badge"
-    }, columnsDragged), /*#__PURE__*/React.createElement(Tooltip, null, "Drag to re-order"), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      icon: vsGripper
-    })))))));
-    this.handleSearchInputChange = this.handleSearchInputChange.bind(this);
-    this.searchColumns = this.searchColumns.bind(this);
-    this.handleOrderDraggingStart = this.handleOrderDraggingStart.bind(this);
-    this.handleOrderDraggingEnd = this.handleOrderDraggingEnd.bind(this);
-    this.state = {
-      selectedColumns: [],
-      // model index of selected column(s)
-      lastSelectedColumns: [],
-      isDraggingVisibility: false,
-      visibilityDraggingOption: undefined,
-      visibilityDraggingStartColumn: null,
-      isDraggingOrder: false,
-      orderDraggingColumn: null,
-      searchFilter: ''
-    };
-    this.list = null;
-  }
-  componentWillUnmount() {
-    this.debouncedSearchColumns.cancel();
-  }
-  resetVisibilityOrdering() {
-    var {
-      model,
-      onColumnVisibilityChanged,
-      onMovedColumnsChanged
-    } = this.props;
-    var {
-      columns
-    } = model;
-    onColumnVisibilityChanged(columns.map(column => {
-      var index = model.getColumnIndexByName(column.name);
-      assertNotNull(index);
-      return index;
-    }), VisibilityOrderingBuilder.VISIBILITY_OPTIONS.SHOW);
-    this.setState({
-      selectedColumns: [],
-      lastSelectedColumns: [],
-      searchFilter: ''
-    });
-    onMovedColumnsChanged([]);
-  }
-  resetSelection() {
-    var {
-      isDraggingOrder
-    } = this.state;
-    // don't reset selection if user is dragging column(s)
-    if (isDraggingOrder) {
-      return;
-    }
-    this.setState({
-      selectedColumns: [],
-      lastSelectedColumns: []
-    });
-  }
-  handleSearchInputChange(event) {
-    var searchFilter = event.target.value;
-    this.setState({
-      searchFilter
-    });
-    if (!searchFilter) {
-      this.debouncedSearchColumns.cancel();
-      this.resetSelection();
-      return;
-    }
-    this.debouncedSearchColumns(searchFilter);
-  }
-  searchColumns(searchFilter) {
-    var {
-      model,
-      movedColumns
-    } = this.props;
-    var {
-      columns
-    } = model;
-    var columnsMatch = [];
-    var visibleIndexToFocus = columns.length;
-    columns.forEach((column, index) => {
-      var columnName = column.name.toLowerCase();
-      if (model.isColumnMovable(index) && columnName.includes(searchFilter.toLowerCase())) {
-        columnsMatch.push(index);
-        visibleIndexToFocus = Math.min(visibleIndexToFocus, GridUtils.getVisibleIndex(index, movedColumns));
-      }
-    });
-    this.addColumnToSelected(columnsMatch, false);
-    if (columnsMatch.length > 0) {
-      var _this$list;
-      var columnItemToFocus = (_this$list = this.list) === null || _this$list === void 0 ? void 0 : _this$list.querySelectorAll('.column-item')[visibleIndexToFocus];
-      columnItemToFocus === null || columnItemToFocus === void 0 ? void 0 : columnItemToFocus.scrollIntoView({
-        block: 'center'
-      });
-    }
-  }
-  handleVisibilityKeyDown(modelIndex, visibilityOption) {
-    var {
-      onColumnVisibilityChanged
-    } = this.props;
-    onColumnVisibilityChanged([modelIndex], visibilityOption);
-  }
-  handleVisibilityDraggingStart(modelIndex, visibilityOption, event) {
-    var {
-      onColumnVisibilityChanged,
-      movedColumns
-    } = this.props;
-    var isModifierKeyDown = GridUtils.isModifierKeyDown(event);
-    var isShiftKeyDown = event.shiftKey;
-    if (isModifierKeyDown || isShiftKeyDown) return;
-    onColumnVisibilityChanged([modelIndex], visibilityOption);
-    var visibleIndex = GridUtils.getVisibleIndex(modelIndex, movedColumns);
-    this.setState({
-      isDraggingVisibility: true,
-      visibilityDraggingOption: visibilityOption,
-      visibilityDraggingStartColumn: visibleIndex
-    });
-    this.addColumnToSelected([modelIndex]);
-  }
-  handleVisibilityDraggingEnd() {
-    var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    if (event) event.target.focus();
-    var {
-      isDraggingVisibility
-    } = this.state;
-    if (isDraggingVisibility) {
-      this.setState({
-        isDraggingVisibility: false,
-        visibilityDraggingOption: undefined,
-        visibilityDraggingStartColumn: null
-      });
-    }
-  }
-  handleOrderDraggingStart(start) {
-    var _this$list2;
-    document.documentElement.classList.add('drag-pointer-events-none');
-    var {
-      selectedColumns
-    } = this.state;
-    var {
-      draggableId,
-      source: {
-        index: startIndex
-      }
-    } = start;
-    var orderDraggingColumn = parseInt(draggableId, 10);
-
-    // we want to clear focus from any eye toggles
-    // however to maintain react-beautiful-dnd keyboard functionality the only valid
-    // focus target is the drag target itself, so we set it there instead of blurring
-    ((_this$list2 = this.list) === null || _this$list2 === void 0 ? void 0 : _this$list2.querySelectorAll('.column-item')[startIndex]).focus();
-    if (!selectedColumns.includes(orderDraggingColumn)) {
-      this.setState({
-        isDraggingOrder: true,
-        orderDraggingColumn,
-        selectedColumns: [orderDraggingColumn]
-      });
-      return;
-    }
-    this.setState({
-      isDraggingOrder: true,
-      orderDraggingColumn
-    });
-  }
-  handleOrderDraggingEnd(result) {
-    document.documentElement.classList.remove('drag-pointer-events-none');
-    var {
-      movedColumns,
-      onMovedColumnsChanged
-    } = this.props;
-    var {
-      selectedColumns,
-      orderDraggingColumn
-    } = this.state;
-
-    // reset dragging state
-    this.setState({
-      isDraggingOrder: false,
-      orderDraggingColumn: null
-    });
-
-    // if dropped outside the list, re-focus on the dragged item if necessary
-    if (!result.destination) {
-      return;
-    }
-    var {
-      index: destinationIndex
-    } = result.destination;
-    var selectedColumnsSortByVisibleIndex = [...selectedColumns].sort((columnA, columnB) => GridUtils.getVisibleIndex(columnA, movedColumns) - GridUtils.getVisibleIndex(columnB, movedColumns));
-    var newMoves = [...movedColumns];
-    assertNotNull(orderDraggingColumn);
-    var draggingVisibleIndex = GridUtils.getVisibleIndex(orderDraggingColumn, newMoves);
-    var upper = [];
-    var lower = [];
-
-    // move the dragged column to destination first,
-    newMoves = GridUtils.moveItem(draggingVisibleIndex, destinationIndex, newMoves);
-
-    // split selected columns into two parts on drop destination index: top & bottom
-    selectedColumnsSortByVisibleIndex.forEach(column => {
-      var columnVisibleIndex = GridUtils.getVisibleIndex(column, newMoves);
-      if (column === orderDraggingColumn) {
-        return;
-      }
-      if (columnVisibleIndex < destinationIndex) {
-        upper.push(column);
-      } else {
-        lower.push(column);
-      }
-    });
-
-    // for the top part, move column(s) to the destination index
-    upper.forEach(column => {
-      var visibleIndex = GridUtils.getVisibleIndex(column, newMoves);
-      newMoves = GridUtils.moveItem(visibleIndex, destinationIndex, newMoves);
-    });
-
-    // for the bottom part, in reverse order, move column(s) to the drop destination index if there's no top column(s) or the dragged column is not dropped upside
-    // otherwise, move column(s) under the dropping destination index
-    var bottomDestinationIndex = upper.length > 0 || draggingVisibleIndex > destinationIndex ? destinationIndex + 1 : destinationIndex;
-    lower.reverse().forEach(column => {
-      var visibleIndex = GridUtils.getVisibleIndex(column, newMoves);
-      newMoves = GridUtils.moveItem(visibleIndex, bottomDestinationIndex, newMoves);
-    });
-    onMovedColumnsChanged(newMoves);
-    log.debug('move column order by drag & drop', newMoves);
-  }
-  handleMouseEnter(targetModelIndex, event) {
-    var {
-      onColumnVisibilityChanged,
-      movedColumns,
-      userColumnWidths
-    } = this.props;
-    var {
-      isDraggingVisibility,
-      visibilityDraggingOption,
-      visibilityDraggingStartColumn: draggingStartVisibleIndex
-    } = this.state;
-    var targetVisibleIndex = GridUtils.getVisibleIndex(targetModelIndex, movedColumns);
-    var isModifierKeyDown = GridUtils.isModifierKeyDown(event);
-    var isShiftKeyDown = event.shiftKey;
-    if (!isDraggingVisibility || isModifierKeyDown || isShiftKeyDown) {
-      return;
-    }
-    event.target.focus();
-
-    // browser can skip mouseEnter / mouseMove event if user moves the mouse too fast
-    // try to check columns between dragging start index to current index to compensate missing event,
-    var columnsToChangeVisibility = [targetModelIndex];
-    assertNotNull(draggingStartVisibleIndex);
-    var checkDownward = targetVisibleIndex > draggingStartVisibleIndex;
-    for (var visibleIndexToCheck = draggingStartVisibleIndex; checkDownward ? visibleIndexToCheck < targetVisibleIndex : visibleIndexToCheck > targetVisibleIndex; checkDownward ? visibleIndexToCheck += 1 : visibleIndexToCheck -= 1) {
-      var modelIndexToCheck = GridUtils.getModelIndex(visibleIndexToCheck, movedColumns);
-      var isHidden = GridUtils.checkColumnHidden(modelIndexToCheck, userColumnWidths);
-      if (isHidden && visibilityDraggingOption === VisibilityOrderingBuilder.VISIBILITY_OPTIONS.SHOW) {
-        columnsToChangeVisibility.push(modelIndexToCheck);
-      } else if (!isHidden && visibilityDraggingOption === VisibilityOrderingBuilder.VISIBILITY_OPTIONS.HIDE) {
-        columnsToChangeVisibility.push(modelIndexToCheck);
-      }
-    }
-    this.addColumnToSelected(columnsToChangeVisibility, true);
-    onColumnVisibilityChanged(columnsToChangeVisibility, visibilityDraggingOption);
-  }
-  handleMoveColumns(option) {
-    var {
-      movedColumns,
-      onMovedColumnsChanged,
-      model
-    } = this.props;
-    var {
-      columns
-    } = model;
-    var {
-      selectedColumns
-    } = this.state;
-    if (selectedColumns.length === 0) {
-      return;
-    }
-    var firstMovableIndex = this.getFirstMovableIndex(model, columns);
-    var lastMovableIndex = this.getLastMovableIndex(model, columns);
-    if (firstMovableIndex == null || lastMovableIndex == null) {
-      return;
-    }
-
-    // for moving up and to the top, move column(s) in visibility index order
-    // for moving down and to the bottom, move column(s) in reverse visibility index order
-    var sortedSelectedColumns = [...selectedColumns].sort((columnA, columnB) => option === VisibilityOrderingBuilder.MOVE_OPTIONS.TOP || option === VisibilityOrderingBuilder.MOVE_OPTIONS.UP ? GridUtils.getVisibleIndex(columnA, movedColumns) - GridUtils.getVisibleIndex(columnB, movedColumns) : GridUtils.getVisibleIndex(columnB, movedColumns) - GridUtils.getVisibleIndex(columnA, movedColumns));
-    var newMoves = [];
-    var scrollListAfterMove = () => undefined;
-    switch (option) {
-      case VisibilityOrderingBuilder.MOVE_OPTIONS.TOP:
-        sortedSelectedColumns.forEach((columnModelIndex, index) => {
-          var visibleIndex = GridUtils.getVisibleIndex(columnModelIndex, movedColumns);
-          newMoves = GridUtils.moveItem(visibleIndex, firstMovableIndex + index, newMoves);
-        });
-        scrollListAfterMove = () => {
-          assertNotNull(this.list);
-          this.list.scrollTop = 0;
-        };
-        break;
-      case VisibilityOrderingBuilder.MOVE_OPTIONS.BOTTOM:
-        sortedSelectedColumns.forEach((columnModelIndex, index) => {
-          var visibleIndex = GridUtils.getVisibleIndex(columnModelIndex, movedColumns);
-          newMoves = GridUtils.moveItem(visibleIndex, lastMovableIndex - index, newMoves);
-        });
-        scrollListAfterMove = () => {
-          assertNotNull(this.list);
-          this.list.scrollTop = this.list.scrollHeight;
-        };
-        break;
-      case VisibilityOrderingBuilder.MOVE_OPTIONS.UP:
-        if (GridUtils.getVisibleIndex(sortedSelectedColumns[0], movedColumns) !== firstMovableIndex // check if the first visible column has reached top
-        ) {
-          sortedSelectedColumns.forEach(columnModelIndex => {
-            var visibleIndex = GridUtils.getVisibleIndex(columnModelIndex, movedColumns);
-            newMoves = GridUtils.moveItem(visibleIndex, visibleIndex - 1, newMoves);
-          });
-        }
-        break;
-      case VisibilityOrderingBuilder.MOVE_OPTIONS.DOWN:
-        if (GridUtils.getVisibleIndex(sortedSelectedColumns[0], movedColumns) !== lastMovableIndex // check if the last visible column has reached bottom
-        ) {
-          sortedSelectedColumns.forEach(columnModelIndex => {
-            var visibleIndex = GridUtils.getVisibleIndex(columnModelIndex, movedColumns);
-            newMoves = GridUtils.moveItem(visibleIndex, visibleIndex + 1, newMoves);
-          });
-        }
-        break;
-      default:
-        break;
-    }
-    if (newMoves.length > 0) {
-      onMovedColumnsChanged(movedColumns.concat(newMoves), scrollListAfterMove);
-    }
-  }
-  handleSortColumns(option) {
-    var {
-      model,
-      onMovedColumnsChanged
-    } = this.props;
-    var {
-      columns
-    } = model;
-
-    // We can't move the immovable columns when sorting, so separate them out first
-    var movableColumns = [];
-    var immovableColumns = [];
-    for (var modelIndex = 0; modelIndex < columns.length; modelIndex += 1) {
-      if (model.isColumnMovable(modelIndex)) {
-        movableColumns.push(modelIndex);
-      } else {
-        immovableColumns.push(modelIndex);
-      }
-    }
-
-    // Sort all the movable columns
-    var movableColumnsSorted = movableColumns.sort((a, b) => {
-      var isAscending = option === VisibilityOrderingBuilder.SORTING_OPTIONS.ASC;
-      var aName = columns[a].name.toUpperCase();
-      var bName = columns[b].name.toUpperCase();
-      return TextUtils.sort(aName, bName, isAscending);
-    });
-
-    // Place all the immovable columns where they need to be
-    var modelIndexAlphaSorted = [];
-    for (var i = 0; i < immovableColumns.length; i += 1) {
-      var _modelIndex = immovableColumns[i];
-      modelIndexAlphaSorted[_modelIndex] = _modelIndex;
-    }
-
-    // Then the rest of the sorted columns can be put in the empty spaces
-    var insertIndex = 0;
-    for (var _i = 0; _i < movableColumnsSorted.length; _i += 1) {
-      while (modelIndexAlphaSorted[insertIndex] != null) {
-        insertIndex += 1;
-      }
-      modelIndexAlphaSorted[insertIndex] = movableColumnsSorted[_i];
-    }
-    var newMoves = [];
-    modelIndexAlphaSorted.forEach((modelIndex, index) => {
-      var visibleIndex = GridUtils.getVisibleIndex(modelIndex, newMoves);
-      newMoves = GridUtils.moveItem(visibleIndex, index, newMoves);
-    });
-    onMovedColumnsChanged(newMoves);
-  }
-  handleItemClick(modelIndexClicked, event) {
-    var removeSelectionOnClick = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-    event.stopPropagation();
-    event.currentTarget.focus();
-    var {
-      selectedColumns,
-      lastSelectedColumns
-    } = this.state;
-    var isModifierKeyDown = GridUtils.isModifierKeyDown(event);
-    var isShiftKeyDown = event.shiftKey;
-    var isSelected = selectedColumns.includes(modelIndexClicked);
-    var columnsToBeAdded = [modelIndexClicked];
-    if (isSelected && isModifierKeyDown) {
-      this.removeColumnFromSelected(modelIndexClicked);
-      return;
-    }
-    if (isSelected && selectedColumns.length === 1 && removeSelectionOnClick) {
-      this.removeColumnFromSelected(modelIndexClicked);
-      return;
-    }
-    if (isShiftKeyDown) {
-      var {
-        movedColumns
-      } = this.props;
-      var lastSelectedColumn = lastSelectedColumns[lastSelectedColumns.length - 1];
-      var lastSelectedColumnVisibleIndex = GridUtils.getVisibleIndex(lastSelectedColumn, movedColumns);
-      var visibleIndexToBeSelected = GridUtils.getVisibleIndex(modelIndexClicked, movedColumns);
-      var checkDownward = visibleIndexToBeSelected > lastSelectedColumnVisibleIndex;
-      var columnsInBetween = [];
-      for (var i = lastSelectedColumnVisibleIndex; checkDownward ? i < visibleIndexToBeSelected : i > visibleIndexToBeSelected; checkDownward ? i += 1 : i -= 1) {
-        columnsInBetween.push(GridUtils.getModelIndex(i, movedColumns));
-      }
-      columnsInBetween.forEach(column => {
-        if (!selectedColumns.includes(column)) {
-          columnsToBeAdded.push(column);
-        }
-      });
-    }
-    this.addColumnToSelected(columnsToBeAdded, isModifierKeyDown || isShiftKeyDown);
-  }
-  addColumnToSelected(columnsToBeAdded) {
-    var addToExisting = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    var {
-      selectedColumns,
-      lastSelectedColumns
-    } = this.state;
-    var newSelectedColumns = addToExisting ? selectedColumns.concat(columnsToBeAdded) : columnsToBeAdded;
-    var newLastSelectedColumns = addToExisting ? lastSelectedColumns.concat(columnsToBeAdded) : columnsToBeAdded;
-    this.setState({
-      selectedColumns: newSelectedColumns,
-      lastSelectedColumns: newLastSelectedColumns
-    });
-  }
-  removeColumnFromSelected(modelIndex) {
-    var {
-      selectedColumns,
-      lastSelectedColumns
-    } = this.state;
-    var newSelectedColumns = [...selectedColumns];
-    newSelectedColumns.splice(newSelectedColumns.findIndex(selected => selected === modelIndex), 1);
-    var lastSelectedColumn = lastSelectedColumns[lastSelectedColumns.length - 1];
-    var newLastSelectedColumns = [...lastSelectedColumns];
-    if (lastSelectedColumn === modelIndex) {
-      newLastSelectedColumns.pop();
-    }
-    this.setState({
-      selectedColumns: newSelectedColumns,
-      lastSelectedColumns: newLastSelectedColumns
-    });
-  }
-  makeVisibilityOrderingList() {
-    var {
-      model,
-      userColumnWidths,
-      movedColumns
-    } = this.props;
-    var {
-      columns
-    } = model;
-    var {
-      selectedColumns,
-      isDraggingOrder,
-      orderDraggingColumn
-    } = this.state;
-    var elements = [];
-    var wasMovable = false;
-    for (var visibleIndex = 0; visibleIndex < columns.length; visibleIndex += 1) {
-      var modelIndex = GridUtils.getModelIndex(visibleIndex, movedColumns);
-      var column = columns[modelIndex];
-      var isMovable = model.isColumnMovable(modelIndex);
-      if (visibleIndex > 0 && isMovable !== wasMovable) {
-        elements.push( /*#__PURE__*/React.createElement("hr", null));
-      }
-      if (isMovable) {
-        var isHidden = userColumnWidths.get(modelIndex) === 0;
-        var isSelected = selectedColumns.includes(modelIndex);
-        var isDragged = orderDraggingColumn === modelIndex;
-        var columnsDragged = isDraggingOrder && isDragged && selectedColumns.length > 1 ? selectedColumns.length : null;
-        elements.push(this.renderVisibilityOrderingItem(column.name, modelIndex, visibleIndex, isHidden, isSelected, isDraggingOrder, isDragged, columnsDragged));
-      } else {
-        elements.push(this.renderImmovableItem(column.name));
-      }
-      wasMovable = isMovable;
-    }
-    return elements;
-  }
-  render() {
-    var {
-      model,
-      userColumnWidths,
-      onColumnVisibilityChanged
-    } = this.props;
-    var {
-      selectedColumns,
-      searchFilter
-    } = this.state;
-    var {
-      columns
-    } = model;
-    var noSelection = selectedColumns.length === 0;
-    var columnsToToggle = noSelection ? columns.map((c, i) => i).filter(i => model.isColumnMovable(i)) : [...selectedColumns];
-    var toggleToShow = GridUtils.checkAllColumnsHidden(columnsToToggle, userColumnWidths);
-    var selectedToggleText = toggleToShow ? 'Show Selected' : 'Hide Selected';
-    var columnItems = this.makeVisibilityOrderingList();
-    return /*#__PURE__*/React.createElement("div", {
-      role: "menu",
-      className: "visibility-ordering-builder",
-      tabIndex: 0,
-      onMouseUp: () => {
-        this.handleVisibilityDraggingEnd();
-      },
-      onMouseLeave: () => {
-        this.handleVisibilityDraggingEnd();
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "top-menu"
-    }, /*#__PURE__*/React.createElement(Button, {
-      kind: "ghost",
-      onClick: () => {
-        onColumnVisibilityChanged(columnsToToggle, toggleToShow ? VisibilityOrderingBuilder.VISIBILITY_OPTIONS.SHOW : VisibilityOrderingBuilder.VISIBILITY_OPTIONS.HIDE);
-      },
-      icon: toggleToShow ? dhEyeSlash : dhEye,
-      tooltip: "Toggle column visibility"
-    }, noSelection ? 'Toggle All' : selectedToggleText), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
-      kind: "ghost",
-      className: "text-muted",
-      onClick: () => {
-        this.resetVisibilityOrdering();
-      },
-      tooltip: "Reset to default"
-    }, "Reset"), /*#__PURE__*/React.createElement(Button, {
-      kind: "ghost",
-      className: "btn-link-icon",
-      onClick: () => {
-        this.handleSortColumns(VisibilityOrderingBuilder.SORTING_OPTIONS.ASC);
-      },
-      tooltip: "Sort ascending"
-    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      icon: dhSortAlphaDown
-    })), /*#__PURE__*/React.createElement(Button, {
-      kind: "ghost",
-      className: "btn-link-icon",
-      onClick: () => {
-        this.handleSortColumns(VisibilityOrderingBuilder.SORTING_OPTIONS.DSC);
-      },
-      tooltip: "Sort descending"
-    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      icon: dhSortAlphaUp
-    })), /*#__PURE__*/React.createElement("span", {
-      className: "vertical-divider"
-    }), /*#__PURE__*/React.createElement(Button, {
-      kind: "ghost",
-      className: "btn-link-icon",
-      onClick: () => {
-        this.handleMoveColumns(VisibilityOrderingBuilder.MOVE_OPTIONS.UP);
-      },
-      disabled: noSelection,
-      tooltip: "Move selection up"
-    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      icon: vsChevronUp
-    })), /*#__PURE__*/React.createElement(Button, {
-      kind: "ghost",
-      className: "btn-link-icon",
-      onClick: () => {
-        this.handleMoveColumns(VisibilityOrderingBuilder.MOVE_OPTIONS.DOWN);
-      },
-      disabled: noSelection,
-      tooltip: "Move selection down"
-    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      icon: vsChevronDown
-    })), /*#__PURE__*/React.createElement(Button, {
-      kind: "ghost",
-      className: "btn-link-icon",
-      onClick: () => {
-        this.handleMoveColumns(VisibilityOrderingBuilder.MOVE_OPTIONS.TOP);
-      },
-      disabled: noSelection,
-      tooltip: "Move selection to top"
-    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      icon: dhArrowToTop
-    })), /*#__PURE__*/React.createElement(Button, {
-      kind: "ghost",
-      className: "btn-link-icon",
-      onClick: () => {
-        this.handleMoveColumns(VisibilityOrderingBuilder.MOVE_OPTIONS.BOTTOM);
-      },
-      disabled: noSelection,
-      tooltip: "Move selection to bottom"
-    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      icon: dhArrowToBottom
-    })))), /*#__PURE__*/React.createElement("div", {
-      className: "top-menu"
-    }, /*#__PURE__*/React.createElement(SearchInput, {
-      className: "w-100",
-      value: searchFilter,
-      matchCount: searchFilter ? selectedColumns.length : undefined,
-      onChange: this.handleSearchInputChange
-    })), /*#__PURE__*/React.createElement(DragDropContext, {
-      onDragStart: this.handleOrderDraggingStart,
-      onDragEnd: this.handleOrderDraggingEnd
-    }, /*#__PURE__*/React.createElement(Droppable, {
-      droppableId: "droppable-visibility-order-list"
-    }, (provided, snapshot) =>
-    /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/interactive-supports-focus
-    React.createElement("div", _extends({
-      role: "menu",
-      className: classNames('visibility-ordering-list', {
-        isDragging: snapshot.draggingFromThisWith
-      }),
-      ref: provided.innerRef
-      // eslint-disable-next-line react/jsx-props-no-spreading
-    }, provided.droppableProps), /*#__PURE__*/React.createElement("div", {
-      className: "column-list",
-      ref: list => {
-        this.list = list;
-      }
-    }, columnItems, provided.placeholder)))));
-  }
-}
-_defineProperty(VisibilityOrderingBuilder, "VISIBILITY_OPTIONS", {
-  SHOW: 'SHOW',
-  HIDE: 'HIDE'
-});
-_defineProperty(VisibilityOrderingBuilder, "SORTING_OPTIONS", {
-  DSC: 'DSC',
-  ASC: 'ASC'
-});
-_defineProperty(VisibilityOrderingBuilder, "MOVE_OPTIONS", {
-  TOP: 'TOP',
-  BOTTOM: 'BOTTOM',
-  UP: 'UP',
-  DOWN: 'DOWN'
-});
-_defineProperty(VisibilityOrderingBuilder, "COLUMN_CHANGE_OPTIONS", {
-  ALL: 'ALL',
-  SELECTION: 'SELECTION'
-});
-_defineProperty(VisibilityOrderingBuilder, "defaultProps", {
-  movedColumns: [],
-  onColumnVisibilityChanged: () => undefined,
-  onMovedColumnsChanged: () => undefined
-});
-export default VisibilityOrderingBuilder;
-//# sourceMappingURL=VisibilityOrderingBuilder.js.map