@depup/react-virtualized 9.22.6-depup.0

package/dist/es/WindowScroller/WindowScroller.e2e.js

@@ -0,0 +1,295 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+/**
+ * @jest-environment jest-environment-puppeteer
+ */
+
+var bootstrap = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var page, scripts, _i, _scripts, path;
+    return _regeneratorRuntime.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__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+  var page, scrollFn, resizeFn;
+  return _regeneratorRuntime.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__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+  var page, scrollFn, resizeFn;
+  return _regeneratorRuntime.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__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+  var page, resizeFn;
+  return _regeneratorRuntime.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/es/WindowScroller/WindowScroller.example.js

@@ -0,0 +1,158 @@
+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 clsx from 'clsx';
+import Immutable from 'immutable';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { ContentBox, ContentBoxHeader, ContentBoxParagraph } from '../demo/ContentBox';
+import { LabeledInput, InputRow } from '../demo/LabeledInput';
+import WindowScroller from './WindowScroller';
+import List from '../List';
+import AutoSizer from '../AutoSizer';
+import styles from './WindowScroller.example.css';
+/*:: type State = {
+  scrollToIndex: number,
+  showHeaderText: boolean,
+};*/
+var WindowScrollerExample = /*#__PURE__*/function (_React$PureComponent) {
+  function WindowScrollerExample() {
+    var _this;
+    _classCallCheck(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));
+    _defineProperty(_this, "state", {
+      scrollToIndex: -1,
+      showHeaderText: true
+    });
+    _defineProperty(_this, "_windowScroller", void 0);
+    _defineProperty(_this, "_hideHeader", function () {
+      var showHeaderText = _this.state.showHeaderText;
+      _this.setState({
+        showHeaderText: !showHeaderText
+      }, function () {
+        if (_this._windowScroller) {
+          _this._windowScroller.updatePosition();
+        }
+      });
+    });
+    _defineProperty(_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 = clsx(styles.row, _defineProperty(_defineProperty({}, styles.rowScrolling, isScrolling), "isVisible", isVisible));
+      return /*#__PURE__*/React.createElement("div", {
+        key: key,
+        className: className,
+        style: style
+      }, row.name);
+    });
+    _defineProperty(_this, "_setRef", function (windowScroller) {
+      _this._windowScroller = windowScroller;
+    });
+    _defineProperty(_this, "_onCheckboxChange", function (event) {
+      _this.context.setScrollingCustomElement(event.target.checked);
+    });
+    _defineProperty(_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;
+  }
+  _inherits(WindowScrollerExample, _React$PureComponent);
+  return _createClass(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, null, /*#__PURE__*/React.createElement(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(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(ContentBoxParagraph, null, /*#__PURE__*/React.createElement("button", {
+        onClick: this._hideHeader
+      }, "Hide header text")), /*#__PURE__*/React.createElement(ContentBoxParagraph, null, /*#__PURE__*/React.createElement("label", {
+        className: styles.checkboxLabel
+      }, /*#__PURE__*/React.createElement("input", {
+        "aria-label": "Use custom element for scrolling",
+        className: styles.checkbox,
+        type: "checkbox",
+        checked: isScrollingCustomElement,
+        onChange: this._onCheckboxChange
+      }), "Use custom element for scrolling")), /*#__PURE__*/React.createElement(InputRow, null, /*#__PURE__*/React.createElement(LabeledInput, {
+        label: "Scroll to",
+        name: "onScrollToRow",
+        placeholder: "Index...",
+        onChange: this._onScrollToRowChange,
+        value: scrollToIndex || ''
+      })), /*#__PURE__*/React.createElement(WindowScroller, {
+        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: styles.WindowScrollerWrapper
+        }, /*#__PURE__*/React.createElement(AutoSizer, {
+          disableHeight: true
+        }, function (_ref3) {
+          var width = _ref3.width;
+          return /*#__PURE__*/React.createElement("div", {
+            ref: registerChild
+          }, /*#__PURE__*/React.createElement(List, {
+            ref: function ref(el) {
+              window.listEl = el;
+            },
+            autoHeight: true,
+            className: styles.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);
+_defineProperty(WindowScrollerExample, "contextTypes", {
+  customElement: PropTypes.any,
+  isScrollingCustomElement: PropTypes.bool.isRequired,
+  list: PropTypes.instanceOf(Immutable.List).isRequired,
+  setScrollingCustomElement: PropTypes.func
+});
+export { WindowScrollerExample as default };