@deephaven/components 0.43.0 → 0.44.0

package/dist/ItemList.js

@@ -0,0 +1,686 @@
+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) { 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); }
+/* eslint-disable react/no-unstable-nested-components */
+import React, { PureComponent } from 'react';
+import memoize from 'memoizee';
+import { FixedSizeList as List } from 'react-window';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import Log from '@deephaven/log';
+import { RangeUtils } from '@deephaven/utils';
+import ItemListItem from "./ItemListItem.js";
+import { ContextActionUtils } from "./context-actions/index.js";
+import "./ItemList.css";
+var log = Log.module('ItemList');
+var MIN_DRAG_DELTA = 5;
+/**
+ * Show items in a long scrollable list.
+ * Can be navigated via keyboard or mouse.
+ */
+export class ItemList extends PureComponent {
+  // By drawing an additional 10 items on each side, tab/keyboard navigation works better (as the next element exists)
+
+  static renderItem(_ref) {
+    var _ref2, _item$displayValue;
+    var {
+      item
+    } = _ref;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "item-list-item-content"
+    }, item != null && ((_ref2 = (_item$displayValue = item.displayValue) !== null && _item$displayValue !== void 0 ? _item$displayValue : item.value) !== null && _ref2 !== void 0 ? _ref2 : "".concat(item)));
+  }
+  constructor(_props) {
+    super(_props);
+    _defineProperty(this, "list", void 0);
+    _defineProperty(this, "listContainer", void 0);
+    _defineProperty(this, "getItemSelected", memoize((index, selectedRanges) => RangeUtils.isSelected(selectedRanges, index), {
+      max: ItemList.CACHE_SIZE
+    }));
+    _defineProperty(this, "getCachedItem", memoize((itemIndex, key, item, isFocused, isSelected, renderItem, style, disableSelect) => {
+      var content = renderItem({
+        item,
+        itemIndex,
+        isFocused,
+        isSelected,
+        style
+      });
+      return /*#__PURE__*/React.createElement(ItemListItem, {
+        onContextMenu: this.handleItemContextMenu,
+        onDoubleClick: this.handleItemDoubleClick,
+        onMouseDown: this.handleItemMouseDown,
+        onFocus: this.handleItemFocus,
+        onBlur: this.handleItemBlur,
+        disableSelect: disableSelect,
+        onMouseMove: this.handleItemMouseMove,
+        onMouseUp: this.handleItemMouseUp,
+        isFocused: isFocused,
+        isSelected: isSelected,
+        itemIndex: itemIndex,
+        style: style,
+        key: key
+      }, content);
+    }, {
+      max: ItemList.CACHE_SIZE
+    }));
+    _defineProperty(this, "getOuterElement", memoize(onKeyDown => {
+      var component = /*#__PURE__*/React.forwardRef((props, ref) =>
+      /*#__PURE__*/
+      // We need to add the tabIndex to make sure it is focusable, otherwise we can't get key events
+      React.createElement("div", _extends({
+        ref: ref,
+        tabIndex: -1,
+        onKeyDown: onKeyDown,
+        role: "presentation"
+        // eslint-disable-next-line react/jsx-props-no-spreading
+      }, props)));
+      component.displayName = 'ItemListOuterElement';
+      return component;
+    }));
+    _defineProperty(this, "getInnerElement", memoize(() => {
+      var component = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("div", _extends({
+        className: "item-list-inner-element",
+        ref: ref
+        // eslint-disable-next-line react/jsx-props-no-spreading
+      }, props)));
+      component.displayName = 'ItemListInnerElement';
+      return component;
+    }));
+    _defineProperty(this, "getItemData", memoize((items, selectedRanges, renderItem) => ({
+      items,
+      selectedRanges,
+      renderItem
+    })));
+    this.handleItemBlur = this.handleItemBlur.bind(this);
+    this.handleItemContextMenu = this.handleItemContextMenu.bind(this);
+    this.handleItemFocus = this.handleItemFocus.bind(this);
+    this.handleItemDoubleClick = this.handleItemDoubleClick.bind(this);
+    this.handleItemMouseDown = this.handleItemMouseDown.bind(this);
+    this.handleItemMouseMove = this.handleItemMouseMove.bind(this);
+    this.handleItemMouseUp = this.handleItemMouseUp.bind(this);
+    this.handleItemsRendered = this.handleItemsRendered.bind(this);
+    this.handleWindowMouseUp = this.handleWindowMouseUp.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleMouseLeave = this.handleMouseLeave.bind(this);
+    this.handleScroll = this.handleScroll.bind(this);
+    this.handleResize = this.handleResize.bind(this);
+    this.renderInnerElement = this.renderInnerElement.bind(this);
+    this.list = /*#__PURE__*/React.createRef();
+    this.listContainer = /*#__PURE__*/React.createRef();
+    var {
+      isStickyBottom,
+      selectedRanges: _selectedRanges
+    } = _props;
+    this.state = {
+      focusIndex: null,
+      mouseDownIndex: null,
+      selectedRanges: _selectedRanges,
+      overscanStartIndex: 0,
+      height: null,
+      isDragging: false,
+      isStuckToBottom: isStickyBottom,
+      scrollOffset: null,
+      mouseX: null,
+      mouseY: null
+    };
+  }
+  componentDidUpdate(prevProps, prevState) {
+    var {
+      selectedRanges: propSelectedRanges,
+      itemCount
+    } = this.props;
+    var {
+      focusIndex,
+      isStuckToBottom,
+      scrollOffset,
+      height,
+      selectedRanges
+    } = this.state;
+    if (isStuckToBottom && !this.isListAtBottom() && itemCount > 0) {
+      this.scrollToBottom();
+    }
+    if (scrollOffset !== prevState.scrollOffset || height !== prevState.height) {
+      this.sendViewportUpdate();
+    }
+    if (propSelectedRanges !== prevProps.selectedRanges && propSelectedRanges !== selectedRanges) {
+      this.setSelectedRanges(propSelectedRanges);
+    } else if (selectedRanges !== prevState.selectedRanges) {
+      var {
+        onSelectionChange: _onSelectionChange
+      } = this.props;
+      _onSelectionChange(selectedRanges);
+    }
+    if (focusIndex !== prevState.focusIndex) {
+      var {
+        onFocusChange: _onFocusChange
+      } = this.props;
+      _onFocusChange(focusIndex);
+    }
+  }
+  componentWillUnmount() {
+    window.removeEventListener('mouseup', this.handleWindowMouseUp);
+  }
+  focus() {
+    var _this$listContainer$c;
+    (_this$listContainer$c = this.listContainer.current) === null || _this$listContainer$c === void 0 ? void 0 : _this$listContainer$c.focus();
+  }
+  restoreScrollPosition() {
+    var {
+      scrollOffset
+    } = this.state;
+    if (scrollOffset != null) {
+      var _this$listContainer$c2;
+      // manually restore the scroll containers offset
+      // virtual list doesn't restore scrolloffset in a re-render if it's the same
+      (_this$listContainer$c2 = this.listContainer.current) === null || _this$listContainer$c2 === void 0 ? void 0 : _this$listContainer$c2.scrollTo(0, scrollOffset);
+    }
+  }
+  getElement(itemIndex) {
+    if (this.listContainer.current == null) {
+      return null;
+    }
+    var {
+      focusSelector
+    } = this.props;
+    var {
+      overscanStartIndex
+    } = this.state;
+    var elements = this.listContainer.current.querySelectorAll(focusSelector);
+    var elementIndex = itemIndex - overscanStartIndex;
+    return elements[elementIndex];
+  }
+  focusItem(itemIndex) {
+    var {
+      disableSelect
+    } = this.props;
+    if (disableSelect) return;
+    this.setState({
+      focusIndex: itemIndex
+    });
+    var element = this.getElement(itemIndex);
+    if (element instanceof HTMLElement) {
+      element.focus();
+    }
+  }
+  scrollToItem(itemIndex) {
+    var element = this.getElement(itemIndex);
+    if (element != null) {
+      element.scrollIntoView({
+        block: 'center'
+      });
+    }
+  }
+  handleItemContextMenu(itemIndex, e) {
+    // Update the selection, but don't consume the mouse event - it will trigger the context menu
+    var {
+      selectedRanges
+    } = this.state;
+    var isSelected = RangeUtils.isSelected(selectedRanges, itemIndex);
+
+    // When right-clicking, we want to maintain the current selection if the right click happened within the selection even if the modifier key isn't down
+    var isModifierDown = isSelected || ContextActionUtils.isModifierKeyDown(e);
+    this.toggleSelect(itemIndex, e.shiftKey, isModifierDown, false);
+  }
+  handleItemDoubleClick(itemIndex, e) {
+    var {
+      isDoubleClickSelect,
+      onSelect
+    } = this.props;
+    if (isDoubleClickSelect) {
+      this.setState(_ref3 => {
+        var {
+          selectedRanges
+        } = _ref3;
+        return {
+          selectedRanges: RangeUtils.selectRange(selectedRanges, [itemIndex, itemIndex])
+        };
+      }, () => {
+        onSelect(itemIndex, e);
+      });
+    }
+  }
+  handleItemMouseDown(index, e) {
+    var {
+      selectedRanges
+    } = this.state;
+    if (e.target instanceof HTMLElement && ['button', 'select', 'input', 'textarea'].indexOf(e.target.tagName.toLowerCase()) !== -1) {
+      // allow these elements to do their own behaviours
+      return;
+    }
+    if (e.button === 2 && selectedRanges.length === 0) {
+      // allow right click to act as a selection if selection is empty
+      this.focusItem(index);
+      this.selectItem(index);
+      return;
+    }
+    if (e.button != null && e.button !== 0) {
+      return;
+    }
+    this.setState({
+      mouseDownIndex: index,
+      mouseX: e.clientX,
+      mouseY: e.clientY
+    });
+    window.addEventListener('mouseup', this.handleWindowMouseUp);
+
+    // Leave selection until mouse up, to allow for dragging behaviour
+  }
+
+  handleItemBlur(itemIndex, e) {
+    log.debug2('item blur', itemIndex, e.currentTarget, e.relatedTarget);
+    if (!e.relatedTarget || this.listContainer.current && e.relatedTarget instanceof HTMLElement && !this.listContainer.current.contains(e.relatedTarget)) {
+      // Next focused element is outside of the ItemList
+      this.setState({
+        focusIndex: null
+      });
+    }
+  }
+  handleItemFocus(itemIndex, e) {
+    log.debug2('item focus', itemIndex, e.target);
+    this.setState(state => {
+      var {
+        focusIndex
+      } = state;
+      if (focusIndex !== itemIndex) {
+        return {
+          focusIndex: itemIndex
+        };
+      }
+      return null;
+    });
+  }
+  handleItemMouseMove(itemIndex, e) {
+    var {
+      isDragSelect,
+      isMultiSelect,
+      disableSelect
+    } = this.props;
+    var {
+      mouseDownIndex,
+      selectedRanges,
+      mouseX,
+      mouseY
+    } = this.state;
+    if (mouseDownIndex == null || disableSelect) return;
+    var mouseMoveX = Math.abs(e.clientX - (mouseX !== null && mouseX !== void 0 ? mouseX : 0));
+    var mouseMoveY = Math.abs(e.clientY - (mouseY !== null && mouseY !== void 0 ? mouseY : 0));
+    if (mouseMoveX > MIN_DRAG_DELTA && mouseMoveY > MIN_DRAG_DELTA) {
+      this.setState({
+        isDragging: true
+      });
+    }
+    if (isDragSelect || mouseDownIndex === itemIndex) {
+      this.focusItem(itemIndex);
+      if (isMultiSelect) {
+        if (!isDragSelect && !this.getItemSelected(itemIndex, selectedRanges) && !ContextActionUtils.isModifierKeyDown(e)) {
+          // If there's already a selection and they select outside of that range while dragging without a modifier key, start a new selection with just the new item
+          this.deselectAll();
+        }
+        this.selectRange([Math.min(mouseDownIndex, itemIndex), Math.max(mouseDownIndex, itemIndex)]);
+      } else {
+        this.toggleSelect(itemIndex, e.shiftKey, ContextActionUtils.isModifierKeyDown(e), false);
+      }
+    }
+  }
+  handleItemMouseUp(index, e) {
+    var {
+      isDeselectOnClick,
+      isDoubleClickSelect,
+      onSelect
+    } = this.props;
+    var {
+      mouseDownIndex,
+      isDragging
+    } = this.state;
+    if (e.target instanceof HTMLElement && ['button', 'select', 'input', 'textarea'].indexOf(e.target.tagName.toLowerCase()) !== -1) {
+      return;
+    }
+    if (mouseDownIndex === index && !isDragging) {
+      var isShiftDown = e.shiftKey;
+      var isModifierDown = ContextActionUtils.isModifierKeyDown(e);
+      this.focusItem(index);
+      this.toggleSelect(index, isShiftDown, isModifierDown, isDeselectOnClick);
+      if (!isDoubleClickSelect && !isShiftDown && !isModifierDown) {
+        onSelect(index, e);
+      }
+    }
+    this.resetMouseState();
+  }
+  handleItemsRendered(_ref4) {
+    var {
+      overscanStartIndex
+    } = _ref4;
+    this.setState({
+      overscanStartIndex
+    });
+  }
+  handleResize(_ref5) {
+    var {
+      height
+    } = _ref5;
+    this.setState({
+      height
+    });
+  }
+  handleMouseLeave() {
+    this.setState({
+      mouseDownIndex: null
+    });
+  }
+  handleWindowMouseUp() {
+    this.resetMouseState();
+    window.removeEventListener('mouseup', this.handleWindowMouseUp);
+  }
+  handleKeyDown(e) {
+    var {
+      isMultiSelect,
+      itemCount,
+      onSelect
+    } = this.props;
+    var {
+      focusIndex: oldFocus
+    } = this.state;
+    var newFocus = oldFocus;
+    if (e.key === 'Enter' || e.key === ' ') {
+      if (!isMultiSelect && newFocus != null) {
+        this.setState({
+          selectedRanges: [[newFocus, newFocus]]
+        }, () => {
+          if (newFocus != null) {
+            onSelect(newFocus, e);
+          }
+        });
+      }
+      return;
+    }
+    if (e.key === 'ArrowUp') {
+      if (newFocus != null && newFocus >= 0) {
+        newFocus = Math.max(0, newFocus - 1);
+      } else {
+        newFocus = itemCount - 1;
+      }
+    } else if (e.key === 'ArrowDown') {
+      if (newFocus != null && newFocus >= 0) {
+        newFocus = Math.min(newFocus + 1, itemCount - 1);
+      } else {
+        newFocus = 0;
+      }
+    } else {
+      return;
+    }
+    if (oldFocus !== newFocus) {
+      e.stopPropagation();
+      e.preventDefault();
+      this.focusItem(newFocus);
+      var {
+        selectedRanges
+      } = this.state;
+      if (e.shiftKey && selectedRanges.length > 0) {
+        var lastRange = selectedRanges[selectedRanges.length - 1];
+        this.selectRange([Math.min(newFocus, lastRange[0]), Math.max(newFocus, lastRange[1])]);
+      } else {
+        this.deselectAll();
+        if (newFocus !== null) {
+          this.selectItem(newFocus);
+        } else {
+          var _this$listContainer$c3;
+          (_this$listContainer$c3 = this.listContainer.current) === null || _this$listContainer$c3 === void 0 ? void 0 : _this$listContainer$c3.focus();
+        }
+      }
+      this.scrollIntoView(newFocus);
+    }
+  }
+  handleScroll(_ref6) {
+    var {
+      scrollUpdateWasRequested,
+      scrollOffset
+    } = _ref6;
+    this.setState(state => {
+      if (scrollUpdateWasRequested) {
+        // The scroll was caused by scrollTo() or scrollToItem()
+        // Don't re-calc isStuckToBottom
+        return {
+          scrollOffset
+        };
+      }
+      var {
+        isStickyBottom
+      } = this.props;
+      var {
+        height
+      } = state;
+      var isStuckToBottom = isStickyBottom && this.isListAtBottom({
+        scrollOffset,
+        height
+      });
+      return {
+        isStuckToBottom,
+        scrollOffset
+      };
+    });
+  }
+  resetMouseState() {
+    this.setState({
+      mouseDownIndex: null,
+      isDragging: false
+    });
+  }
+  scrollToBottom() {
+    var {
+      itemCount
+    } = this.props;
+    if (this.list.current) {
+      this.list.current.scrollToItem(itemCount);
+    }
+  }
+  scrollIntoView(itemIndex) {
+    if (this.list.current) {
+      this.list.current.scrollToItem(itemIndex);
+    }
+  }
+
+  /**
+   * @param index The index to toggle selection for
+   * @param isShiftDown True if the shift modifier key is down
+   * @param isModifierDown True if the meta modifier key is down
+   * @param isDeselectable True if item should be deselected if already selected
+   */
+  toggleSelect(index, isShiftDown, isModifierDown) {
+    var isDeselectable = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
+    var {
+      isMultiSelect
+    } = this.props;
+    var {
+      selectedRanges
+    } = this.state;
+    if (isMultiSelect && isShiftDown && selectedRanges.length > 0) {
+      var lastRange = selectedRanges[selectedRanges.length - 1];
+      this.selectRange([Math.min(lastRange[0], index), Math.max(index, lastRange[1])]);
+    } else if (isMultiSelect && selectedRanges.length === 1 && selectedRanges[0][0] === index && selectedRanges[0][1] === index) {
+      if (isDeselectable) {
+        this.deselectItem(index);
+      }
+    } else if (isMultiSelect && isModifierDown) {
+      if (this.getItemSelected(index, selectedRanges)) {
+        if (isDeselectable) {
+          this.deselectItem(index);
+        }
+      } else {
+        this.selectItem(index);
+      }
+    } else {
+      this.deselectAll();
+      this.selectItem(index);
+    }
+  }
+  deselectAll() {
+    var {
+      itemCount
+    } = this.props;
+    this.deselectRange([0, itemCount]);
+  }
+  deselectItem(index) {
+    this.deselectRange([index, index]);
+  }
+  deselectRange(range) {
+    RangeUtils.validateRange(range);
+    this.setState(_ref7 => {
+      var {
+        selectedRanges
+      } = _ref7;
+      return {
+        selectedRanges: RangeUtils.deselectRange(selectedRanges, range)
+      };
+    });
+  }
+  selectItem(index) {
+    var {
+      disableSelect
+    } = this.props;
+    if (disableSelect) return;
+    this.selectRange([index, index]);
+  }
+  selectRange(range) {
+    RangeUtils.validateRange(range);
+    this.setState(_ref8 => {
+      var {
+        selectedRanges
+      } = _ref8;
+      return {
+        selectedRanges: RangeUtils.selectRange(selectedRanges, range)
+      };
+    });
+  }
+  setSelectedRanges(selectedRanges) {
+    this.setState({
+      selectedRanges
+    });
+  }
+  sendViewportUpdate() {
+    var {
+      scrollOffset,
+      height
+    } = this.state;
+    if (scrollOffset != null && height != null) {
+      var {
+        onViewportChange: _onViewportChange,
+        rowHeight
+      } = this.props;
+      var _topRow = Math.floor(scrollOffset / rowHeight);
+      var _bottomRow = _topRow + Math.ceil(height / rowHeight);
+      _onViewportChange(_topRow, _bottomRow);
+    }
+  }
+  isListAtBottom() {
+    var {
+      scrollOffset,
+      height
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.state;
+    if (height == null || scrollOffset == null) {
+      return false;
+    }
+    var {
+      itemCount,
+      rowHeight
+    } = this.props;
+    return scrollOffset + height >= itemCount * rowHeight;
+  }
+  renderInnerElement(_ref9) {
+    var {
+      index: itemIndex,
+      style
+    } = _ref9;
+    var {
+      items,
+      offset,
+      renderItem,
+      disableSelect
+    } = this.props;
+    var {
+      focusIndex,
+      selectedRanges
+    } = this.state;
+    if (itemIndex < offset || itemIndex >= offset + items.length) {
+      return null;
+    }
+    var item = items[itemIndex - offset];
+    return this.getCachedItem(itemIndex, itemIndex, item, itemIndex === focusIndex && !disableSelect, this.getItemSelected(itemIndex, selectedRanges), renderItem, style, disableSelect);
+  }
+  render() {
+    var {
+      items,
+      itemCount,
+      overscanCount,
+      renderItem,
+      rowHeight,
+      'data-testid': dataTestId
+    } = this.props;
+    var {
+      selectedRanges,
+      isStuckToBottom
+    } = this.state;
+    return /*#__PURE__*/React.createElement(AutoSizer, {
+      className: "item-list-auto-sizer",
+      onResize: this.handleResize
+    }, _ref10 => {
+      var {
+        width,
+        height
+      } = _ref10;
+      return /*#__PURE__*/React.createElement(List, {
+        className: "item-list-scroll-pane",
+        height: height,
+        width: width,
+        initialScrollOffset: isStuckToBottom ? itemCount * rowHeight : 0,
+        itemCount: itemCount,
+        itemSize: rowHeight
+        // This prop isn't actually used by us, it is passed to the render function by react-window
+        // Used here to force a re-render of the List component.
+        // Otherwise it doesn't know to call the render again when selection or renderItem changes
+        ,
+        itemData: this.getItemData(items, selectedRanges, renderItem),
+        onScroll: this.handleScroll,
+        onItemsRendered: this.handleItemsRendered,
+        ref: this.list,
+        outerElementType: this.getOuterElement(this.handleKeyDown),
+        outerRef: this.listContainer,
+        innerElementType: this.getInnerElement(),
+        overscanCount: overscanCount,
+        "data-testid": dataTestId
+      }, this.renderInnerElement);
+    });
+  }
+}
+_defineProperty(ItemList, "CACHE_SIZE", 1000);
+_defineProperty(ItemList, "DEFAULT_ROW_HEIGHT", 20);
+_defineProperty(ItemList, "DEFAULT_OVERSCAN", 10);
+_defineProperty(ItemList, "defaultProps", {
+  offset: 0,
+  items: [],
+  rowHeight: ItemList.DEFAULT_ROW_HEIGHT,
+  isDeselectOnClick: true,
+  isDoubleClickSelect: false,
+  isDragSelect: true,
+  isMultiSelect: false,
+  isStickyBottom: false,
+  disableSelect: false,
+  onFocusChange() {
+    // no-op
+  },
+  onSelect() {
+    // no-op
+  },
+  onSelectionChange() {
+    // no-op
+  },
+  onViewportChange() {
+    // no-op
+  },
+  overscanCount: ItemList.DEFAULT_OVERSCAN,
+  renderItem: ItemList.renderItem,
+  selectedRanges: [],
+  focusSelector: '.item-list-item',
+  'data-testid': undefined
+});
+export default ItemList;
+//# sourceMappingURL=ItemList.js.map