@depup/react-virtualized 9.22.6-depup.0

package/dist/commonjs/WindowScroller/WindowScroller.e2e.js

@@ -0,0 +1,298 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+/**
+ * @jest-environment jest-environment-puppeteer
+ */
+
+var bootstrap = /*#__PURE__*/function () {
+  var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var page, scripts, _i, _scripts, path;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.next = 2;
+          return global.browser.newPage();
+        case 2:
+          page = _context.sent;
+          scripts = ['./node_modules/react/umd/react.development.js', './node_modules/react-dom/umd/react-dom.development.js', './dist/umd/react-virtualized.js'];
+          _i = 0, _scripts = scripts;
+        case 5:
+          if (!(_i < _scripts.length)) {
+            _context.next = 12;
+            break;
+          }
+          path = _scripts[_i];
+          _context.next = 9;
+          return page.addScriptTag({
+            path: path
+          });
+        case 9:
+          _i++;
+          _context.next = 5;
+          break;
+        case 12:
+          return _context.abrupt("return", page);
+        case 13:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function bootstrap() {
+    return _ref.apply(this, arguments);
+  };
+}();
+var renderWindowScroller = function renderWindowScroller(_ref2) {
+  var scrollElement = _ref2.scrollElement;
+  var render = window.ReactDOM.render;
+  var createElement = window.React.createElement;
+  var WindowScroller = window.ReactVirtualized.WindowScroller;
+  var container = document.createElement('div');
+  container.id = 'container';
+  container.style.margin = '100px';
+  container.style.padding = '50px';
+  document.body.appendChild(container);
+  document.body.style.margin = 0;
+  if (scrollElement === 'container') {
+    container.style.width = '100%';
+    container.style.height = '100%';
+    container.style.overflow = 'auto';
+  }
+  render(createElement(WindowScroller, {
+    scrollElement: scrollElement === 'container' ? container : window,
+    onScroll: window.scrollFn,
+    onResize: window.resizeFn
+  }, function () {
+    return createElement('div', {
+      style: {
+        width: 2000,
+        height: 3000
+      }
+    });
+  }), container);
+};
+var delay = function delay(time) {
+  return new Promise(function (resolve) {
+    return setTimeout(resolve, time);
+  });
+};
+test('save position after resize and then scroll in window', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+  var page, scrollFn, resizeFn;
+  return _regenerator["default"].wrap(function _callee2$(_context2) {
+    while (1) switch (_context2.prev = _context2.next) {
+      case 0:
+        _context2.next = 2;
+        return bootstrap();
+      case 2:
+        page = _context2.sent;
+        scrollFn = jest.fn();
+        resizeFn = jest.fn();
+        _context2.next = 7;
+        return page.exposeFunction('scrollFn', scrollFn);
+      case 7:
+        _context2.next = 9;
+        return page.exposeFunction('resizeFn', resizeFn);
+      case 9:
+        _context2.next = 11;
+        return page.setViewport({
+          width: 400,
+          height: 600
+        });
+      case 11:
+        _context2.next = 13;
+        return page.evaluate(renderWindowScroller, {
+          scrollElement: 'window'
+        });
+      case 13:
+        _context2.next = 15;
+        return page.evaluate(function () {
+          return window.scrollTo(610, 830);
+        });
+      case 15:
+        _context2.next = 17;
+        return delay(100);
+      case 17:
+        _context2.next = 19;
+        return page.setViewport({
+          width: 300,
+          height: 500
+        });
+      case 19:
+        _context2.next = 21;
+        return delay(100);
+      case 21:
+        _context2.next = 23;
+        return page.evaluate(function () {
+          return window.scrollTo(620, 840);
+        });
+      case 23:
+        _context2.next = 25;
+        return delay(100);
+      case 25:
+        _context2.next = 27;
+        return page.close();
+      case 27:
+        expect(scrollFn.mock.calls).toEqual([[{
+          scrollLeft: 610 - 150,
+          scrollTop: 830 - 150
+        }], [{
+          scrollLeft: 620 - 150,
+          scrollTop: 840 - 150
+        }]]);
+        expect(resizeFn.mock.calls).toEqual([[{
+          width: 300,
+          height: 500
+        }]]);
+      case 29:
+      case "end":
+        return _context2.stop();
+    }
+  }, _callee2);
+})));
+test('save position after resize and then scroll in container', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+  var page, scrollFn, resizeFn;
+  return _regenerator["default"].wrap(function _callee3$(_context3) {
+    while (1) switch (_context3.prev = _context3.next) {
+      case 0:
+        _context3.next = 2;
+        return bootstrap();
+      case 2:
+        page = _context3.sent;
+        scrollFn = jest.fn();
+        resizeFn = jest.fn();
+        _context3.next = 7;
+        return page.exposeFunction('scrollFn', scrollFn);
+      case 7:
+        _context3.next = 9;
+        return page.exposeFunction('resizeFn', resizeFn);
+      case 9:
+        _context3.next = 11;
+        return page.setViewport({
+          width: 400,
+          height: 600
+        });
+      case 11:
+        _context3.next = 13;
+        return page.evaluate(renderWindowScroller, {
+          scrollElement: 'container'
+        });
+      case 13:
+        _context3.next = 15;
+        return page.$eval('#container', function (el) {
+          return el.scrollTo(610, 830);
+        });
+      case 15:
+        _context3.next = 17;
+        return delay(100);
+      case 17:
+        _context3.next = 19;
+        return page.setViewport({
+          width: 300,
+          height: 500
+        });
+      case 19:
+        _context3.next = 21;
+        return delay(100);
+      case 21:
+        _context3.next = 23;
+        return page.$eval('#container', function (el) {
+          return el.scrollTo(620, 840);
+        });
+      case 23:
+        _context3.next = 25;
+        return delay(100);
+      case 25:
+        _context3.next = 27;
+        return page.close();
+      case 27:
+        expect(scrollFn.mock.calls).toEqual([[{
+          scrollLeft: 610 - 50,
+          scrollTop: 830 - 50
+        }], [{
+          scrollLeft: 620 - 50,
+          scrollTop: 840 - 50
+        }]]);
+        expect(resizeFn.mock.calls).toEqual([[{
+          width: 500,
+          height: 700
+        }], [{
+          width: 400,
+          height: 600
+        }]]);
+      case 29:
+      case "end":
+        return _context3.stop();
+    }
+  }, _callee3);
+})));
+test('react on container resize without window changing', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+  var page, resizeFn;
+  return _regenerator["default"].wrap(function _callee4$(_context4) {
+    while (1) switch (_context4.prev = _context4.next) {
+      case 0:
+        _context4.next = 2;
+        return bootstrap();
+      case 2:
+        page = _context4.sent;
+        resizeFn = jest.fn();
+        _context4.next = 6;
+        return page.exposeFunction('resizeFn', resizeFn);
+      case 6:
+        _context4.next = 8;
+        return page.evaluate(function () {
+          var render = window.ReactDOM.render;
+          var createElement = window.React.createElement;
+          var WindowScroller = window.ReactVirtualized.WindowScroller;
+          var wrapper = document.createElement('div');
+          wrapper.id = 'wrapper';
+          Object.assign(wrapper.style, {
+            width: '1000px',
+            height: '800px',
+            display: 'flex'
+          });
+          var container = document.createElement('div');
+          Object.assign(container.style, {
+            flex: '1'
+          });
+          wrapper.appendChild(container);
+          document.body.style.margin = 0;
+          document.body.appendChild(wrapper);
+          render(createElement(WindowScroller, {
+            scrollElement: container,
+            onResize: window.resizeFn
+          }, function () {
+            return null;
+          }), container);
+        });
+      case 8:
+        _context4.next = 10;
+        return delay(100);
+      case 10:
+        _context4.next = 12;
+        return page.$eval('#wrapper', function (el) {
+          el.style.width = '500px';
+          el.style.height = '700px';
+        });
+      case 12:
+        _context4.next = 14;
+        return delay(100);
+      case 14:
+        _context4.next = 16;
+        return page.close();
+      case 16:
+        expect(resizeFn.mock.calls).toEqual([[{
+          width: 1000,
+          height: 800
+        }], [{
+          width: 500,
+          height: 700
+        }]]);
+      case 17:
+      case "end":
+        return _context4.stop();
+    }
+  }, _callee4);
+})));

package/dist/commonjs/WindowScroller/WindowScroller.example.js

@@ -0,0 +1,167 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _clsx2 = _interopRequireDefault(require("clsx"));
+var _immutable = _interopRequireDefault(require("immutable"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var React = _interopRequireWildcard(require("react"));
+var _ContentBox = require("../demo/ContentBox");
+var _LabeledInput = require("../demo/LabeledInput");
+var _WindowScroller = _interopRequireDefault(require("./WindowScroller"));
+var _List = _interopRequireDefault(require("../List"));
+var _AutoSizer = _interopRequireDefault(require("../AutoSizer"));
+var _WindowScrollerExample2 = _interopRequireDefault(require("./WindowScroller.example.css"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(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; })(); }
+/*:: type State = {
+  scrollToIndex: number,
+  showHeaderText: boolean,
+};*/
+var WindowScrollerExample = exports["default"] = /*#__PURE__*/function (_React$PureComponent) {
+  function WindowScrollerExample() {
+    var _this;
+    (0, _classCallCheck2["default"])(this, WindowScrollerExample);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, WindowScrollerExample, [].concat(args));
+    (0, _defineProperty2["default"])(_this, "state", {
+      scrollToIndex: -1,
+      showHeaderText: true
+    });
+    (0, _defineProperty2["default"])(_this, "_windowScroller", void 0);
+    (0, _defineProperty2["default"])(_this, "_hideHeader", function () {
+      var showHeaderText = _this.state.showHeaderText;
+      _this.setState({
+        showHeaderText: !showHeaderText
+      }, function () {
+        if (_this._windowScroller) {
+          _this._windowScroller.updatePosition();
+        }
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "_rowRenderer", function (_ref) {
+      var index = _ref.index,
+        isScrolling = _ref.isScrolling,
+        isVisible = _ref.isVisible,
+        key = _ref.key,
+        style = _ref.style;
+      var list = _this.context.list;
+      var row = list.get(index);
+      var className = (0, _clsx2["default"])(_WindowScrollerExample2["default"].row, (0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _WindowScrollerExample2["default"].rowScrolling, isScrolling), "isVisible", isVisible));
+      return /*#__PURE__*/React.createElement("div", {
+        key: key,
+        className: className,
+        style: style
+      }, row.name);
+    });
+    (0, _defineProperty2["default"])(_this, "_setRef", function (windowScroller) {
+      _this._windowScroller = windowScroller;
+    });
+    (0, _defineProperty2["default"])(_this, "_onCheckboxChange", function (event) {
+      _this.context.setScrollingCustomElement(event.target.checked);
+    });
+    (0, _defineProperty2["default"])(_this, "_onScrollToRowChange", function (event) {
+      var list = _this.context.list;
+      var scrollToIndex = Math.min(list.size - 1, parseInt(event.target.value, 10));
+      if (isNaN(scrollToIndex)) {
+        scrollToIndex = undefined;
+      }
+      setTimeout(function () {
+        _this.setState({
+          scrollToIndex: scrollToIndex
+        });
+      }, 0);
+    });
+    return _this;
+  }
+  (0, _inherits2["default"])(WindowScrollerExample, _React$PureComponent);
+  return (0, _createClass2["default"])(WindowScrollerExample, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$context = this.context,
+        customElement = _this$context.customElement,
+        isScrollingCustomElement = _this$context.isScrollingCustomElement,
+        list = _this$context.list;
+      var _this$state = this.state,
+        scrollToIndex = _this$state.scrollToIndex,
+        showHeaderText = _this$state.showHeaderText;
+      return /*#__PURE__*/React.createElement(_ContentBox.ContentBox, null, /*#__PURE__*/React.createElement(_ContentBox.ContentBoxHeader, {
+        text: "WindowScroller",
+        sourceLink: "https://github.com/bvaughn/react-virtualized/blob/master/source/WindowScroller/WindowScroller.example.js",
+        docsLink: "https://github.com/bvaughn/react-virtualized/blob/master/docs/WindowScroller.md"
+      }), showHeaderText && /*#__PURE__*/React.createElement(_ContentBox.ContentBoxParagraph, null, "This component decorates ", /*#__PURE__*/React.createElement("code", null, "List"), ", ", /*#__PURE__*/React.createElement("code", null, "Table"), ", or any other component and manages the window scroll to scroll through the list"), showHeaderText && /*#__PURE__*/React.createElement(_ContentBox.ContentBoxParagraph, null, /*#__PURE__*/React.createElement("button", {
+        onClick: this._hideHeader
+      }, "Hide header text")), /*#__PURE__*/React.createElement(_ContentBox.ContentBoxParagraph, null, /*#__PURE__*/React.createElement("label", {
+        className: _WindowScrollerExample2["default"].checkboxLabel
+      }, /*#__PURE__*/React.createElement("input", {
+        "aria-label": "Use custom element for scrolling",
+        className: _WindowScrollerExample2["default"].checkbox,
+        type: "checkbox",
+        checked: isScrollingCustomElement,
+        onChange: this._onCheckboxChange
+      }), "Use custom element for scrolling")), /*#__PURE__*/React.createElement(_LabeledInput.InputRow, null, /*#__PURE__*/React.createElement(_LabeledInput.LabeledInput, {
+        label: "Scroll to",
+        name: "onScrollToRow",
+        placeholder: "Index...",
+        onChange: this._onScrollToRowChange,
+        value: scrollToIndex || ''
+      })), /*#__PURE__*/React.createElement(_WindowScroller["default"], {
+        ref: this._setRef,
+        scrollElement: isScrollingCustomElement ? customElement : window
+      }, function (_ref2) {
+        var height = _ref2.height,
+          isScrolling = _ref2.isScrolling,
+          registerChild = _ref2.registerChild,
+          onChildScroll = _ref2.onChildScroll,
+          scrollTop = _ref2.scrollTop;
+        return /*#__PURE__*/React.createElement("div", {
+          className: _WindowScrollerExample2["default"].WindowScrollerWrapper
+        }, /*#__PURE__*/React.createElement(_AutoSizer["default"], {
+          disableHeight: true
+        }, function (_ref3) {
+          var width = _ref3.width;
+          return /*#__PURE__*/React.createElement("div", {
+            ref: registerChild
+          }, /*#__PURE__*/React.createElement(_List["default"], {
+            ref: function ref(el) {
+              window.listEl = el;
+            },
+            autoHeight: true,
+            className: _WindowScrollerExample2["default"].List,
+            height: height,
+            isScrolling: isScrolling,
+            onScroll: onChildScroll,
+            overscanRowCount: 2,
+            rowCount: list.size,
+            rowHeight: 30,
+            rowRenderer: _this2._rowRenderer,
+            scrollToIndex: scrollToIndex,
+            scrollTop: scrollTop,
+            width: width
+          }));
+        }));
+      }));
+    }
+  }]);
+}(React.PureComponent);
+(0, _defineProperty2["default"])(WindowScrollerExample, "contextTypes", {
+  customElement: _propTypes["default"].any,
+  isScrollingCustomElement: _propTypes["default"].bool.isRequired,
+  list: _propTypes["default"].instanceOf(_immutable["default"].List).isRequired,
+  setScrollingCustomElement: _propTypes["default"].func
+});