@deephaven/components 0.42.1-beta.4 → 0.43.0

package/dist/ItemList.js

@@ -1,686 +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) { 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