@deephaven/components 0.22.3-embed-pandas.11 → 0.23.1-beta.0

package/dist/ItemList.js

@@ -1,7 +1,6 @@
 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 react/no-unstable-nested-components */
 import React, { PureComponent } from 'react';
 import memoize from 'memoizee';
 import { FixedSizeList as List } from 'react-window';
@@ -12,16 +11,15 @@ import ItemListItem from "./ItemListItem.js";
 import { ContextActionUtils } from "./context-actions/index.js";
 import "./ItemList.css";
 var log = Log.module('ItemList');
-
 /**
  * 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;
@@ -29,18 +27,13 @@ export class ItemList extends PureComponent {
       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,
@@ -67,7 +60,6 @@ export class ItemList extends PureComponent {
     }, {
       max: ItemList.CACHE_SIZE
     }));
-
     _defineProperty(this, "getOuterElement", memoize(onKeyDown => {
       var component = /*#__PURE__*/React.forwardRef((props, ref) =>
       /*#__PURE__*/
@@ -76,29 +68,26 @@ export class ItemList extends PureComponent {
         ref: ref,
         tabIndex: -1,
         onKeyDown: onKeyDown,
-        role: "presentation" // eslint-disable-next-line react/jsx-props-no-spreading
-
+        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
-
+        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);
@@ -130,7 +119,6 @@ export class ItemList extends PureComponent {
       scrollOffset: null
     };
   }
-
   componentDidUpdate(prevProps, prevState) {
     var {
       selectedRanges: propSelectedRanges,
@@ -143,63 +131,49 @@ export class ItemList extends PureComponent {
       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;
@@ -210,7 +184,6 @@ export class ItemList extends PureComponent {
     var elementIndex = itemIndex - overscanStartIndex;
     return elements[elementIndex];
   }
-
   focusItem(itemIndex) {
     var {
       disableSelect
@@ -220,39 +193,34 @@ export class ItemList extends PureComponent {
       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 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 {
@@ -266,37 +234,33 @@ export class ItemList extends PureComponent {
       });
     }
   }
-
   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
     });
-    window.addEventListener('mouseup', this.handleWindowMouseUp); // Leave selection until mouse up, to allow for dragging behaviour
+    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({
@@ -304,24 +268,20 @@ export class ItemList extends PureComponent {
       });
     }
   }
-
   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,
@@ -336,23 +296,19 @@ export class ItemList extends PureComponent {
     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,
@@ -363,25 +319,20 @@ export class ItemList extends PureComponent {
       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
@@ -390,7 +341,6 @@ export class ItemList extends PureComponent {
       overscanStartIndex
     });
   }
-
   handleResize(_ref5) {
     var {
       height
@@ -399,18 +349,15 @@ export class ItemList extends PureComponent {
       height
     });
   }
-
   handleMouseLeave() {
     this.setState({
       mouseDownIndex: null
     });
   }
-
   handleWindowMouseUp() {
     this.resetMouseState();
     window.removeEventListener('mouseup', this.handleWindowMouseUp);
   }
-
   handleKeyDown(e) {
     var {
       isMultiSelect,
@@ -421,7 +368,6 @@ export class ItemList extends PureComponent {
       focusIndex: oldFocus
     } = this.state;
     var newFocus = oldFocus;
-
     if (e.key === 'Enter' || e.key === ' ') {
       if (!isMultiSelect && newFocus != null) {
         this.setState({
@@ -432,10 +378,8 @@ export class ItemList extends PureComponent {
           }
         });
       }
-
       return;
     }
-
     if (e.key === 'ArrowUp') {
       if (newFocus != null && newFocus >= 0) {
         newFocus = Math.max(0, newFocus - 1);
@@ -451,7 +395,6 @@ export class ItemList extends PureComponent {
     } else {
       return;
     }
-
     if (oldFocus !== newFocus) {
       e.stopPropagation();
       e.preventDefault();
@@ -459,26 +402,21 @@ export class ItemList extends PureComponent {
       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,
@@ -492,7 +430,6 @@ export class ItemList extends PureComponent {
           scrollOffset
         };
       }
-
       var {
         isStickyBottom
       } = this.props;
@@ -509,37 +446,32 @@ export class ItemList extends PureComponent {
       };
     });
   }
-
   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 {
@@ -548,7 +480,6 @@ export class ItemList extends PureComponent {
     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])]);
@@ -569,18 +500,15 @@ export class ItemList extends PureComponent {
       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 => {
@@ -592,7 +520,6 @@ export class ItemList extends PureComponent {
       };
     });
   }
-
   selectItem(index) {
     var {
       disableSelect
@@ -600,7 +527,6 @@ export class ItemList extends PureComponent {
     if (disableSelect) return;
     this.selectRange([index, index]);
   }
-
   selectRange(range) {
     RangeUtils.validateRange(range);
     this.setState(_ref8 => {
@@ -612,50 +538,40 @@ export class ItemList extends PureComponent {
       };
     });
   }
-
   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,
@@ -671,15 +587,12 @@ export class ItemList extends PureComponent {
       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,
@@ -707,7 +620,8 @@ export class ItemList extends PureComponent {
         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
+        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
         ,
@@ -723,15 +637,10 @@ export class ItemList extends PureComponent {
       }, this.renderInnerElement);
     });
   }
-
 }
-
 _defineProperty(ItemList, "CACHE_SIZE", 1000);
-
 _defineProperty(ItemList, "DEFAULT_ROW_HEIGHT", 20);
-
 _defineProperty(ItemList, "DEFAULT_OVERSCAN", 10);
-
 _defineProperty(ItemList, "defaultProps", {
   offset: 0,
   items: [],
@@ -742,25 +651,23 @@ _defineProperty(ItemList, "defaultProps", {
   isMultiSelect: false,
   isStickyBottom: false,
   disableSelect: false,
-
-  onFocusChange() {// no-op
+  onFocusChange() {
+    // no-op
   },
-
-  onSelect() {// no-op
+  onSelect() {
+    // no-op
   },
-
-  onSelectionChange() {// no-op
+  onSelectionChange() {
+    // no-op
   },
-
-  onViewportChange() {// 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