@depup/react-virtualized 9.22.6-depup.0

package/dist/es/ArrowKeyStepper/ArrowKeyStepper.example.js

@@ -0,0 +1,176 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+import * as React from 'react';
+import { ContentBox, ContentBoxHeader, ContentBoxParagraph } from '../demo/ContentBox';
+import ArrowKeyStepper from './';
+/*:: import { type ScrollIndices } from './';*/
+import AutoSizer from '../AutoSizer';
+import Grid from '../Grid';
+import clsx from 'clsx';
+import styles from './ArrowKeyStepper.example.css';
+/*:: type State = {
+  mode: 'edges' | 'cells',
+  isClickable: boolean,
+  scrollToColumn: number,
+  scrollToRow: number,
+};*/
+var ArrowKeyStepperExample = /*#__PURE__*/function (_React$PureComponent) {
+  function ArrowKeyStepperExample() {
+    var _this;
+    _classCallCheck(this, ArrowKeyStepperExample);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, ArrowKeyStepperExample, [].concat(args));
+    _defineProperty(_this, "state", {
+      mode: 'edges',
+      isClickable: true,
+      scrollToColumn: 0,
+      scrollToRow: 0
+    });
+    _defineProperty(_this, "_getColumnWidth", function (_ref /*:: */) {
+      var index = _ref /*:: */.index;
+      return (1 + index % 3) * 60;
+    });
+    _defineProperty(_this, "_getRowHeight", function (_ref2 /*:: */) {
+      var index = _ref2 /*:: */.index;
+      return (1 + index % 3) * 30;
+    });
+    _defineProperty(_this, "_cellRenderer", function (_ref3 /*:: */) {
+      var columnIndex = _ref3 /*:: */.columnIndex,
+        key = _ref3 /*:: */.key,
+        rowIndex = _ref3 /*:: */.rowIndex,
+        scrollToColumn = _ref3 /*:: */.scrollToColumn,
+        scrollToRow = _ref3 /*:: */.scrollToRow,
+        style = _ref3 /*:: */.style;
+      var className = clsx(styles.Cell, _defineProperty({}, styles.FocusedCell, columnIndex === scrollToColumn && rowIndex === scrollToRow));
+      return /*#__PURE__*/React.createElement("span", {
+        role: "none",
+        className: className,
+        key: key,
+        onClick: _this.state.isClickable && function () {
+          return _this._selectCell({
+            scrollToColumn: columnIndex,
+            scrollToRow: rowIndex
+          });
+        },
+        style: style
+      }, "r:".concat(rowIndex, ", c:").concat(columnIndex));
+    });
+    _defineProperty(_this, "_selectCell", function (_ref4 /*:: */) {
+      var scrollToColumn = _ref4 /*:: */.scrollToColumn,
+        scrollToRow = _ref4 /*:: */.scrollToRow;
+      _this.setState({
+        scrollToColumn: scrollToColumn,
+        scrollToRow: scrollToRow
+      });
+    });
+    _defineProperty(_this, "_onClickableChange", function (event /*: Event*/) {
+      if (event.target instanceof HTMLInputElement) {
+        _this.setState({
+          isClickable: event.target.checked,
+          scrollToColumn: 0,
+          scrollToRow: 0
+        });
+      }
+    });
+    return _this;
+  }
+  _inherits(ArrowKeyStepperExample, _React$PureComponent);
+  return _createClass(ArrowKeyStepperExample, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$state = this.state,
+        mode = _this$state.mode,
+        isClickable = _this$state.isClickable,
+        scrollToColumn = _this$state.scrollToColumn,
+        scrollToRow = _this$state.scrollToRow;
+      return /*#__PURE__*/React.createElement(ContentBox, null, /*#__PURE__*/React.createElement(ContentBoxHeader, {
+        text: "ArrowKeyStepper",
+        sourceLink: "https://github.com/bvaughn/react-virtualized/blob/master/source/ArrowKeyStepper/ArrowKeyStepper.example.js",
+        docsLink: "https://github.com/bvaughn/react-virtualized/blob/master/docs/ArrowKeyStepper.md"
+      }), /*#__PURE__*/React.createElement(ContentBoxParagraph, null, "This high-order component decorates a ", /*#__PURE__*/React.createElement("code", null, "List"), ",", ' ', /*#__PURE__*/React.createElement("code", null, "Table"), ", or ", /*#__PURE__*/React.createElement("code", null, "Grid"), " and responds to arrow-key events by scrolling one row or column at a time. Focus in the `Grid` below and use the left, right, up, or down arrow keys to move around within the grid."), /*#__PURE__*/React.createElement(ContentBoxParagraph, null, "Note that unlike the other HOCs in react-virtualized, the", ' ', /*#__PURE__*/React.createElement("code", null, "ArrowKeyStepper"), " adds a ", /*#__PURE__*/React.createElement("code", null, "<div>"), " element around its children in order to attach a key-down event handler."), /*#__PURE__*/React.createElement(ContentBoxParagraph, null, /*#__PURE__*/React.createElement("strong", null, "mode"), ":", /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+        "aria-label": "Set mode equal to \"cells\"",
+        checked: mode === 'cells',
+        className: styles.Radio,
+        type: "radio",
+        onChange: function onChange(event) {
+          return event.target.checked && _this2.setState({
+            mode: 'cells'
+          });
+        },
+        value: "cells"
+      }), "cells"), /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+        "aria-label": "Set mode equal to \"edges\"",
+        checked: mode === 'edges',
+        className: styles.Radio,
+        type: "radio",
+        onChange: function onChange(event) {
+          return event.target.checked && _this2.setState({
+            mode: 'edges'
+          });
+        },
+        value: "edges"
+      }), "edges (default)")), /*#__PURE__*/React.createElement(ContentBoxParagraph, null, /*#__PURE__*/React.createElement("label", {
+        className: styles.checkboxLabel
+      }, /*#__PURE__*/React.createElement("input", {
+        "aria-label": "Enable click selection? (resets selection)",
+        className: styles.checkbox,
+        type: "checkbox",
+        checked: isClickable,
+        onChange: this._onClickableChange
+      }), "Enable click selection? (resets selection)")), /*#__PURE__*/React.createElement(ArrowKeyStepper, {
+        columnCount: 100,
+        isControlled: isClickable,
+        onScrollToChange: isClickable ? this._selectCell : undefined,
+        mode: mode,
+        rowCount: 100,
+        scrollToColumn: scrollToColumn,
+        scrollToRow: scrollToRow
+      }, function (_ref5) {
+        var onSectionRendered = _ref5.onSectionRendered,
+          scrollToColumn = _ref5.scrollToColumn,
+          scrollToRow = _ref5.scrollToRow;
+        return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ContentBoxParagraph, null, "Most-recently-stepped column: ".concat(scrollToColumn, ", row: ").concat(scrollToRow)), /*#__PURE__*/React.createElement(AutoSizer, {
+          disableHeight: true
+        }, function (_ref6) {
+          var width = _ref6.width;
+          return /*#__PURE__*/React.createElement(Grid, {
+            className: styles.Grid,
+            columnWidth: _this2._getColumnWidth,
+            columnCount: 100,
+            height: 200,
+            onSectionRendered: onSectionRendered,
+            cellRenderer: function cellRenderer(_ref7) {
+              var columnIndex = _ref7.columnIndex,
+                key = _ref7.key,
+                rowIndex = _ref7.rowIndex,
+                style = _ref7.style;
+              return _this2._cellRenderer({
+                columnIndex: columnIndex,
+                key: key,
+                rowIndex: rowIndex,
+                scrollToColumn: scrollToColumn,
+                scrollToRow: scrollToRow,
+                style: style
+              });
+            },
+            rowHeight: _this2._getRowHeight,
+            rowCount: 100,
+            scrollToColumn: scrollToColumn,
+            scrollToRow: scrollToRow,
+            width: width
+          });
+        }));
+      }));
+    }
+  }]);
+}(React.PureComponent);
+export { ArrowKeyStepperExample as default };

package/dist/es/ArrowKeyStepper/ArrowKeyStepper.jest.js

@@ -0,0 +1,332 @@
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import { findDOMNode } from 'react-dom';
+import { render } from '../TestUtils';
+import ArrowKeyStepper from './ArrowKeyStepper';
+import { Simulate } from 'react-dom/test-utils';
+function renderTextContent(scrollToColumn, scrollToRow) {
+  return "scrollToColumn:".concat(scrollToColumn, ", scrollToRow:").concat(scrollToRow);
+}
+function ChildComponent(_ref) {
+  var scrollToColumn = _ref.scrollToColumn,
+    scrollToRow = _ref.scrollToRow;
+  return /*#__PURE__*/React.createElement("div", null, renderTextContent(scrollToColumn, scrollToRow));
+}
+describe('ArrowKeyStepper', function () {
+  function renderHelper() {
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var onSectionRenderedCallback;
+    var component = render(/*#__PURE__*/React.createElement(ArrowKeyStepper, _extends({
+      columnCount: 10,
+      mode: "edges",
+      rowCount: 10
+    }, props), function (_ref2) {
+      var onSectionRendered = _ref2.onSectionRendered,
+        scrollToColumn = _ref2.scrollToColumn,
+        scrollToRow = _ref2.scrollToRow;
+      onSectionRenderedCallback = onSectionRendered;
+      return /*#__PURE__*/React.createElement(ChildComponent, {
+        scrollToColumn: scrollToColumn,
+        scrollToRow: scrollToRow
+      });
+    }));
+    var node = findDOMNode(component);
+    return {
+      component: component,
+      node: node,
+      onSectionRendered: onSectionRenderedCallback
+    };
+  }
+  function assertCurrentScrollTo(node, scrollToColumn, scrollToRow) {
+    expect(node.textContent).toEqual(renderTextContent(scrollToColumn, scrollToRow));
+  }
+  it('should use a custom :className if one is specified', function () {
+    var _renderHelper = renderHelper({
+        className: 'foo'
+      }),
+      node = _renderHelper.node;
+    expect(node.className).toEqual('foo');
+  });
+  it('should update :scrollToColumn and :scrollToRow in response to arrow keys', function () {
+    var _renderHelper2 = renderHelper(),
+      node = _renderHelper2.node;
+    assertCurrentScrollTo(node, 0, 0);
+    Simulate.keyDown(node, {
+      key: 'ArrowDown'
+    });
+    assertCurrentScrollTo(node, 0, 1);
+    Simulate.keyDown(node, {
+      key: 'ArrowRight'
+    });
+    assertCurrentScrollTo(node, 1, 1);
+    Simulate.keyDown(node, {
+      key: 'ArrowUp'
+    });
+    assertCurrentScrollTo(node, 1, 0);
+    Simulate.keyDown(node, {
+      key: 'ArrowLeft'
+    });
+    assertCurrentScrollTo(node, 0, 0);
+  });
+  it('should not scroll past the row and column boundaries provided', function () {
+    var _renderHelper3 = renderHelper({
+        columnCount: 2,
+        rowCount: 2
+      }),
+      node = _renderHelper3.node;
+    Simulate.keyDown(node, {
+      key: 'ArrowDown'
+    });
+    Simulate.keyDown(node, {
+      key: 'ArrowDown'
+    });
+    Simulate.keyDown(node, {
+      key: 'ArrowDown'
+    });
+    assertCurrentScrollTo(node, 0, 1);
+    Simulate.keyDown(node, {
+      key: 'ArrowUp'
+    });
+    Simulate.keyDown(node, {
+      key: 'ArrowUp'
+    });
+    Simulate.keyDown(node, {
+      key: 'ArrowUp'
+    });
+    assertCurrentScrollTo(node, 0, 0);
+    Simulate.keyDown(node, {
+      key: 'ArrowRight'
+    });
+    Simulate.keyDown(node, {
+      key: 'ArrowRight'
+    });
+    Simulate.keyDown(node, {
+      key: 'ArrowRight'
+    });
+    assertCurrentScrollTo(node, 1, 0);
+    Simulate.keyDown(node, {
+      key: 'ArrowLeft'
+    });
+    Simulate.keyDown(node, {
+      key: 'ArrowLeft'
+    });
+    Simulate.keyDown(node, {
+      key: 'ArrowLeft'
+    });
+    assertCurrentScrollTo(node, 0, 0);
+  });
+  it('should accept initial :scrollToColumn and :scrollToRow values via props', function () {
+    var _renderHelper4 = renderHelper({
+        mode: 'cells',
+        scrollToColumn: 2,
+        scrollToRow: 4
+      }),
+      node = _renderHelper4.node;
+    assertCurrentScrollTo(node, 2, 4);
+    Simulate.keyDown(node, {
+      key: 'ArrowDown'
+    });
+    assertCurrentScrollTo(node, 2, 5);
+    Simulate.keyDown(node, {
+      key: 'ArrowRight'
+    });
+    assertCurrentScrollTo(node, 3, 5);
+  });
+  it('should accept updated :scrollToColumn and :scrollToRow values via props', function () {
+    var _renderHelper5 = renderHelper({
+        mode: 'cells',
+        scrollToColumn: 2,
+        scrollToRow: 4
+      }),
+      node = _renderHelper5.node;
+    Simulate.keyDown(node, {
+      key: 'ArrowDown'
+    });
+    assertCurrentScrollTo(node, 2, 5);
+    renderHelper({
+      mode: 'cells',
+      scrollToColumn: 1,
+      scrollToRow: 1
+    });
+    Simulate.keyDown(node, {
+      key: 'ArrowRight'
+    });
+    assertCurrentScrollTo(node, 2, 1);
+    Simulate.keyDown(node, {
+      key: 'ArrowDown'
+    });
+    assertCurrentScrollTo(node, 2, 2);
+  });
+  it('should accept updated :scrollToColumn and :scrollToRow values via setScrollIndexes()', function () {
+    var _renderHelper6 = renderHelper({
+        mode: 'cells',
+        scrollToColumn: 2,
+        scrollToRow: 4
+      }),
+      component = _renderHelper6.component,
+      node = _renderHelper6.node;
+    Simulate.keyDown(node, {
+      key: 'ArrowDown'
+    });
+    assertCurrentScrollTo(node, 2, 5);
+    component.setScrollIndexes({
+      scrollToColumn: 1,
+      scrollToRow: 1
+    });
+    Simulate.keyDown(node, {
+      key: 'ArrowRight'
+    });
+    assertCurrentScrollTo(node, 2, 1);
+    Simulate.keyDown(node, {
+      key: 'ArrowDown'
+    });
+    assertCurrentScrollTo(node, 2, 2);
+  });
+  it('should not update :scrollToColumn or :scrollToRow when :disabled', function () {
+    var _renderHelper7 = renderHelper({
+        disabled: true
+      }),
+      node = _renderHelper7.node;
+    assertCurrentScrollTo(node, 0, 0);
+    Simulate.keyDown(node, {
+      key: 'ArrowDown'
+    });
+    assertCurrentScrollTo(node, 0, 0);
+    Simulate.keyDown(node, {
+      key: 'ArrowRight'
+    });
+    assertCurrentScrollTo(node, 0, 0);
+  });
+  it('should call :onScrollToChange for key down', function () {
+    [true, false].forEach(function () {
+      var onScrollToChange = jest.fn();
+      var _renderHelper8 = renderHelper({
+          isControlled: true,
+          onScrollToChange: onScrollToChange
+        }),
+        node = _renderHelper8.node;
+      expect(onScrollToChange.mock.calls).toHaveLength(0);
+      Simulate.keyDown(node, {
+        key: 'ArrowDown'
+      });
+      expect(onScrollToChange.mock.calls).toHaveLength(1);
+      var _onScrollToChange$moc = onScrollToChange.mock.calls[0][0],
+        scrollToColumn = _onScrollToChange$moc.scrollToColumn,
+        scrollToRow = _onScrollToChange$moc.scrollToRow;
+      expect(scrollToColumn).toEqual(0);
+      expect(scrollToRow).toEqual(1);
+    });
+  });
+  it('should not call :onScrollToChange for prop update', function () {
+    var numCalls = 0;
+    var onScrollToChange = function onScrollToChange() {
+      numCalls++;
+    };
+    var _renderHelper9 = renderHelper({
+        onScrollToChange: onScrollToChange,
+        scrollToColumn: 0,
+        scrollToRow: 0
+      }),
+      node = _renderHelper9.node;
+    renderHelper({
+      isControlled: true,
+      onScrollToChange: onScrollToChange,
+      node: node,
+      scrollToColumn: 0,
+      scrollToRow: 1
+    });
+    expect(numCalls).toEqual(0);
+  });
+  describe('mode === "edges"', function () {
+    it('should update :scrollToColumn and :scrollToRow relative to the most recent :onSectionRendered event', function () {
+      var _renderHelper10 = renderHelper(),
+        node = _renderHelper10.node,
+        onSectionRendered = _renderHelper10.onSectionRendered;
+      onSectionRendered({
+        // Simulate a scroll
+        columnStartIndex: 0,
+        columnStopIndex: 4,
+        rowStartIndex: 4,
+        rowStopIndex: 6
+      });
+      Simulate.keyDown(node, {
+        key: 'ArrowDown'
+      });
+      assertCurrentScrollTo(node, 0, 7);
+      onSectionRendered({
+        // Simulate a scroll
+        columnStartIndex: 5,
+        columnStopIndex: 10,
+        rowStartIndex: 2,
+        rowStopIndex: 4
+      });
+      Simulate.keyDown(node, {
+        key: 'ArrowUp'
+      });
+      assertCurrentScrollTo(node, 0, 1);
+      onSectionRendered({
+        // Simulate a scroll
+        columnStartIndex: 4,
+        columnStopIndex: 8,
+        rowStartIndex: 5,
+        rowStopIndex: 10
+      });
+      Simulate.keyDown(node, {
+        key: 'ArrowRight'
+      });
+      assertCurrentScrollTo(node, 9, 1);
+      onSectionRendered({
+        // Simulate a scroll
+        columnStartIndex: 2,
+        columnStopIndex: 4,
+        rowStartIndex: 2,
+        rowStopIndex: 4
+      });
+      Simulate.keyDown(node, {
+        key: 'ArrowLeft'
+      });
+      assertCurrentScrollTo(node, 1, 1);
+    });
+  });
+  describe('mode === "cells"', function () {
+    it('should update :scrollToColumn and :scrollToRow relative to the most recent :onSectionRendered event', function () {
+      var _renderHelper11 = renderHelper({
+          mode: 'cells',
+          scrollToColumn: 5,
+          scrollToRow: 5
+        }),
+        node = _renderHelper11.node,
+        onSectionRendered = _renderHelper11.onSectionRendered;
+      onSectionRendered({
+        // Simulate a scroll
+        columnStartIndex: 10,
+        columnStopIndex: 10,
+        rowStartIndex: 15,
+        rowStopIndex: 15
+      });
+      Simulate.keyDown(node, {
+        key: 'ArrowUp'
+      });
+      assertCurrentScrollTo(node, 5, 4);
+      Simulate.keyDown(node, {
+        key: 'ArrowDown'
+      });
+      assertCurrentScrollTo(node, 5, 5);
+      onSectionRendered({
+        // Simulate a scroll
+        columnStartIndex: 10,
+        columnStopIndex: 10,
+        rowStartIndex: 15,
+        rowStopIndex: 15
+      });
+      Simulate.keyDown(node, {
+        key: 'ArrowRight'
+      });
+      assertCurrentScrollTo(node, 6, 5);
+      Simulate.keyDown(node, {
+        key: 'ArrowLeft'
+      });
+      assertCurrentScrollTo(node, 5, 5);
+    });
+  });
+});