react-virtuoso 2.2.5 → 2.2.6-beta.0

package/dist/grouped-load-more.bce8f6e4.js

@@ -0,0 +1,505 @@
+// modules are defined as an array
+// [ module function, map of requires ]
+//
+// map of requires is short require name -> numeric require
+//
+// anything defined in a previous bundle is accessed via the
+// orig method which is the require for previous bundles
+parcelRequire = (function (modules, cache, entry, globalName) {
+  // Save the require from previous bundle to this closure if any
+  var previousRequire = typeof parcelRequire === 'function' && parcelRequire;
+  var nodeRequire = typeof require === 'function' && require;
+
+  function newRequire(name, jumped) {
+    if (!cache[name]) {
+      if (!modules[name]) {
+        // if we cannot find the module within our internal map or
+        // cache jump to the current global require ie. the last bundle
+        // that was added to the page.
+        var currentRequire = typeof parcelRequire === 'function' && parcelRequire;
+        if (!jumped && currentRequire) {
+          return currentRequire(name, true);
+        }
+
+        // If there are other bundles on this page the require from the
+        // previous one is saved to 'previousRequire'. Repeat this as
+        // many times as there are bundles until the module is found or
+        // we exhaust the require chain.
+        if (previousRequire) {
+          return previousRequire(name, true);
+        }
+
+        // Try the node require function if it exists.
+        if (nodeRequire && typeof name === 'string') {
+          return nodeRequire(name);
+        }
+
+        var err = new Error('Cannot find module \'' + name + '\'');
+        err.code = 'MODULE_NOT_FOUND';
+        throw err;
+      }
+
+      localRequire.resolve = resolve;
+      localRequire.cache = {};
+
+      var module = cache[name] = new newRequire.Module(name);
+
+      modules[name][0].call(module.exports, localRequire, module, module.exports, this);
+    }
+
+    return cache[name].exports;
+
+    function localRequire(x){
+      return newRequire(localRequire.resolve(x));
+    }
+
+    function resolve(x){
+      return modules[name][1][x] || x;
+    }
+  }
+
+  function Module(moduleName) {
+    this.id = moduleName;
+    this.bundle = newRequire;
+    this.exports = {};
+  }
+
+  newRequire.isParcelRequire = true;
+  newRequire.Module = Module;
+  newRequire.modules = modules;
+  newRequire.cache = cache;
+  newRequire.parent = previousRequire;
+  newRequire.register = function (id, exports) {
+    modules[id] = [function (require, module) {
+      module.exports = exports;
+    }, {}];
+  };
+
+  var error;
+  for (var i = 0; i < entry.length; i++) {
+    try {
+      newRequire(entry[i]);
+    } catch (e) {
+      // Save first error but execute all entries
+      if (!error) {
+        error = e;
+      }
+    }
+  }
+
+  if (entry.length) {
+    // Expose entry point to Node, AMD or browser globals
+    // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
+    var mainExports = newRequire(entry[entry.length - 1]);
+
+    // CommonJS
+    if (typeof exports === "object" && typeof module !== "undefined") {
+      module.exports = mainExports;
+
+    // RequireJS
+    } else if (typeof define === "function" && define.amd) {
+     define(function () {
+       return mainExports;
+     });
+
+    // <script>
+    } else if (globalName) {
+      this[globalName] = mainExports;
+    }
+  }
+
+  // Override the current require with this new one
+  parcelRequire = newRequire;
+
+  if (error) {
+    // throw error from earlier, _after updating parcelRequire_
+    throw error;
+  }
+
+  return newRequire;
+})({"grouped-load-more.tsx":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = App;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _src = require("../src");
+
+var _faker = _interopRequireDefault(require("faker"));
+
+var _lodash = require("lodash");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+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; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var getUser = function getUser() {
+  var firstName = _faker.default.name.firstName();
+
+  var lastName = _faker.default.name.lastName();
+
+  return {
+    name: "".concat(firstName, " ").concat(lastName),
+    initials: "".concat(firstName.substr(0, 1)).concat(lastName.substr(0, 1)),
+    description: _faker.default.company.catchPhrase(),
+    avatar: _faker.default.internet.avatar()
+  };
+};
+
+var sortUser = function sortUser(a, b) {
+  if (a.name < b.name) {
+    return -1;
+  }
+
+  if (a.name > b.name) {
+    return 1;
+  }
+
+  return 0;
+};
+
+var useGroupedUsers = function useGroupedUsers(count) {
+  var allUsers = (0, React.useMemo)(function () {
+    return new Array(count).fill(true).map(getUser).sort(sortUser);
+  }, [count]);
+  var loadedCount = (0, React.useRef)(0);
+  var loadedUsers = (0, React.useRef)([]);
+  var groups = (0, React.useRef)([]);
+
+  var _useState = (0, React.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      endReached = _useState2[0],
+      setEndReached = _useState2[1];
+
+  var _useState3 = (0, React.useState)([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      groupCounts = _useState4[0],
+      setGroupCounts = _useState4[1];
+
+  var loadMore = function loadMore() {
+    if (!endReached) {
+      setTimeout(function () {
+        loadedCount.current += 50; // in a real world scenario, you would fetch the next
+        // slice and append it to the existing records
+
+        loadedUsers.current = allUsers.slice(0, loadedCount.current); // the code below calculates the group counts
+        // for the users loaded so far;
+        // this should be performed on the server too
+
+        var groupedUsers = (0, _lodash.groupBy)(loadedUsers.current, function (user) {
+          return user.name[0];
+        });
+        groups.current = Object.keys(groupedUsers);
+        setGroupCounts(Object.values(groupedUsers).map(function (users) {
+          return users.length;
+        }));
+
+        if (loadedCount.current === 500) {
+          setEndReached(true);
+        }
+      }, 1500);
+    }
+  };
+
+  return {
+    loadMore: loadMore,
+    endReached: endReached,
+    groupCounts: groupCounts,
+    users: loadedUsers.current,
+    groups: groups.current
+  };
+};
+
+var components = {
+  Footer: function Footer() {
+    return React.createElement("div", null, "Footer");
+  },
+  List: React.forwardRef(function (_ref, listRef) {
+    var style = _ref.style,
+        children = _ref.children;
+    return React.createElement("div", {
+      ref: listRef,
+      style: style
+    }, children);
+  }),
+  Item: function Item(_ref2) {
+    var children = _ref2.children,
+        props = _objectWithoutProperties(_ref2, ["children"]);
+
+    return React.createElement("div", _objectSpread(_objectSpread({}, props), {}, {
+      style: {
+        margin: 0
+      }
+    }), children);
+  },
+  Group: function Group(_ref3) {
+    var children = _ref3.children,
+        props = _objectWithoutProperties(_ref3, ["children"]);
+
+    return React.createElement("div", _objectSpread({}, props), children);
+  }
+};
+var Style = {
+  height: '350px',
+  width: '400px'
+};
+
+function App() {
+  var _useGroupedUsers = useGroupedUsers(500),
+      loadMore = _useGroupedUsers.loadMore,
+      groupCounts = _useGroupedUsers.groupCounts,
+      users = _useGroupedUsers.users,
+      groups = _useGroupedUsers.groups;
+
+  (0, React.useEffect)(loadMore, [loadMore]);
+  return React.createElement(_src.GroupedVirtuoso, {
+    components: components,
+    style: Style,
+    groupCounts: groupCounts,
+    groupContent: function groupContent(index) {
+      return React.createElement("div", null, "Group ", groups[index]);
+    },
+    overscan: 400,
+    endReached: function endReached(value) {
+      console.log(value);
+      loadMore();
+    },
+    itemContent: function itemContent(index) {
+      return React.createElement("div", null, React.createElement("div", null, users[index].initials), React.createElement("div", null, React.createElement("strong", null, users[index].name)), React.createElement("div", null, users[index].description));
+    }
+  });
+}
+},{"react":"../node_modules/react/index.js","../src":"../src/index.tsx","faker":"../node_modules/faker/index.js","lodash":"../node_modules/lodash/lodash.js"}],"../node_modules/parcel-bundler/src/builtins/hmr-runtime.js":[function(require,module,exports) {
+var global = arguments[3];
+var OVERLAY_ID = '__parcel__error__overlay__';
+var OldModule = module.bundle.Module;
+
+function Module(moduleName) {
+  OldModule.call(this, moduleName);
+  this.hot = {
+    data: module.bundle.hotData,
+    _acceptCallbacks: [],
+    _disposeCallbacks: [],
+    accept: function (fn) {
+      this._acceptCallbacks.push(fn || function () {});
+    },
+    dispose: function (fn) {
+      this._disposeCallbacks.push(fn);
+    }
+  };
+  module.bundle.hotData = null;
+}
+
+module.bundle.Module = Module;
+var checkedAssets, assetsToAccept;
+var parent = module.bundle.parent;
+
+if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
+  var hostname = "" || location.hostname;
+  var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
+  var ws = new WebSocket(protocol + '://' + hostname + ':' + "61208" + '/');
+
+  ws.onmessage = function (event) {
+    checkedAssets = {};
+    assetsToAccept = [];
+    var data = JSON.parse(event.data);
+
+    if (data.type === 'update') {
+      var handled = false;
+      data.assets.forEach(function (asset) {
+        if (!asset.isNew) {
+          var didAccept = hmrAcceptCheck(global.parcelRequire, asset.id);
+
+          if (didAccept) {
+            handled = true;
+          }
+        }
+      }); // Enable HMR for CSS by default.
+
+      handled = handled || data.assets.every(function (asset) {
+        return asset.type === 'css' && asset.generated.js;
+      });
+
+      if (handled) {
+        console.clear();
+        data.assets.forEach(function (asset) {
+          hmrApply(global.parcelRequire, asset);
+        });
+        assetsToAccept.forEach(function (v) {
+          hmrAcceptRun(v[0], v[1]);
+        });
+      } else if (location.reload) {
+        // `location` global exists in a web worker context but lacks `.reload()` function.
+        location.reload();
+      }
+    }
+
+    if (data.type === 'reload') {
+      ws.close();
+
+      ws.onclose = function () {
+        location.reload();
+      };
+    }
+
+    if (data.type === 'error-resolved') {
+      console.log('[parcel] ✨ Error resolved');
+      removeErrorOverlay();
+    }
+
+    if (data.type === 'error') {
+      console.error('[parcel] 🚨  ' + data.error.message + '\n' + data.error.stack);
+      removeErrorOverlay();
+      var overlay = createErrorOverlay(data);
+      document.body.appendChild(overlay);
+    }
+  };
+}
+
+function removeErrorOverlay() {
+  var overlay = document.getElementById(OVERLAY_ID);
+
+  if (overlay) {
+    overlay.remove();
+  }
+}
+
+function createErrorOverlay(data) {
+  var overlay = document.createElement('div');
+  overlay.id = OVERLAY_ID; // html encode message and stack trace
+
+  var message = document.createElement('div');
+  var stackTrace = document.createElement('pre');
+  message.innerText = data.error.message;
+  stackTrace.innerText = data.error.stack;
+  overlay.innerHTML = '<div style="background: black; font-size: 16px; color: white; position: fixed; height: 100%; width: 100%; top: 0px; left: 0px; padding: 30px; opacity: 0.85; font-family: Menlo, Consolas, monospace; z-index: 9999;">' + '<span style="background: red; padding: 2px 4px; border-radius: 2px;">ERROR</span>' + '<span style="top: 2px; margin-left: 5px; position: relative;">🚨</span>' + '<div style="font-size: 18px; font-weight: bold; margin-top: 20px;">' + message.innerHTML + '</div>' + '<pre>' + stackTrace.innerHTML + '</pre>' + '</div>';
+  return overlay;
+}
+
+function getParents(bundle, id) {
+  var modules = bundle.modules;
+
+  if (!modules) {
+    return [];
+  }
+
+  var parents = [];
+  var k, d, dep;
+
+  for (k in modules) {
+    for (d in modules[k][1]) {
+      dep = modules[k][1][d];
+
+      if (dep === id || Array.isArray(dep) && dep[dep.length - 1] === id) {
+        parents.push(k);
+      }
+    }
+  }
+
+  if (bundle.parent) {
+    parents = parents.concat(getParents(bundle.parent, id));
+  }
+
+  return parents;
+}
+
+function hmrApply(bundle, asset) {
+  var modules = bundle.modules;
+
+  if (!modules) {
+    return;
+  }
+
+  if (modules[asset.id] || !bundle.parent) {
+    var fn = new Function('require', 'module', 'exports', asset.generated.js);
+    asset.isNew = !modules[asset.id];
+    modules[asset.id] = [fn, asset.deps];
+  } else if (bundle.parent) {
+    hmrApply(bundle.parent, asset);
+  }
+}
+
+function hmrAcceptCheck(bundle, id) {
+  var modules = bundle.modules;
+
+  if (!modules) {
+    return;
+  }
+
+  if (!modules[id] && bundle.parent) {
+    return hmrAcceptCheck(bundle.parent, id);
+  }
+
+  if (checkedAssets[id]) {
+    return;
+  }
+
+  checkedAssets[id] = true;
+  var cached = bundle.cache[id];
+  assetsToAccept.push([bundle, id]);
+
+  if (cached && cached.hot && cached.hot._acceptCallbacks.length) {
+    return true;
+  }
+
+  return getParents(global.parcelRequire, id).some(function (id) {
+    return hmrAcceptCheck(global.parcelRequire, id);
+  });
+}
+
+function hmrAcceptRun(bundle, id) {
+  var cached = bundle.cache[id];
+  bundle.hotData = {};
+
+  if (cached) {
+    cached.hot.data = bundle.hotData;
+  }
+
+  if (cached && cached.hot && cached.hot._disposeCallbacks.length) {
+    cached.hot._disposeCallbacks.forEach(function (cb) {
+      cb(bundle.hotData);
+    });
+  }
+
+  delete bundle.cache[id];
+  bundle(id);
+  cached = bundle.cache[id];
+
+  if (cached && cached.hot && cached.hot._acceptCallbacks.length) {
+    cached.hot._acceptCallbacks.forEach(function (cb) {
+      cb();
+    });
+
+    return true;
+  }
+}
+},{}]},{},["../node_modules/parcel-bundler/src/builtins/hmr-runtime.js"], null)
+//# sourceMappingURL=/grouped-load-more.bce8f6e4.js.map

package/dist/grouped-load-more.bce8f6e4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["grouped-load-more.tsx"],"names":[],"mappings":"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","file":"grouped-load-more.bce8f6e4.js","sourceRoot":"../e2e","sourcesContent":["import * as React from 'react'\nimport { Components, GroupedVirtuoso } from '../src'\nimport { useMemo, useRef, useState, useEffect } from 'react'\nimport faker from 'faker'\nimport { groupBy } from 'lodash'\n\nconst getUser = () => {\n  const firstName = faker.name.firstName()\n  const lastName = faker.name.lastName()\n  return {\n    name: `${firstName} ${lastName}`,\n    initials: `${firstName.substr(0, 1)}${lastName.substr(0, 1)}`,\n    description: faker.company.catchPhrase(),\n    avatar: faker.internet.avatar(),\n  }\n}\n\ntype User = ReturnType<typeof getUser>\n\nconst sortUser = (a: User, b: User) => {\n  if (a.name < b.name) {\n    return -1\n  }\n  if (a.name > b.name) {\n    return 1\n  }\n  return 0\n}\n\nconst useGroupedUsers = (count: number) => {\n  const allUsers = useMemo(() => new Array(count).fill(true).map(getUser).sort(sortUser), [count])\n\n  const loadedCount = useRef(0)\n  const loadedUsers = useRef<User[]>([])\n  const groups = useRef<string[]>([])\n  const [endReached, setEndReached] = useState(false)\n  const [groupCounts, setGroupCounts] = useState<number[]>([])\n\n  const loadMore = () => {\n    if (!endReached) {\n      setTimeout(() => {\n        loadedCount.current += 50\n\n        // in a real world scenario, you would fetch the next\n        // slice and append it to the existing records\n        loadedUsers.current = allUsers.slice(0, loadedCount.current)\n\n        // the code below calculates the group counts\n        // for the users loaded so far;\n        // this should be performed on the server too\n        const groupedUsers = groupBy(loadedUsers.current, (user) => user.name[0])\n        groups.current = Object.keys(groupedUsers)\n        setGroupCounts(Object.values(groupedUsers).map((users) => users.length))\n\n        if (loadedCount.current === 500) {\n          setEndReached(true)\n        }\n      }, 1500)\n    }\n  }\n\n  return {\n    loadMore,\n    endReached,\n    groupCounts,\n    users: loadedUsers.current,\n    groups: groups.current,\n  }\n}\n\nconst components: Components = {\n  Footer: () => <div>Footer</div>,\n\n  List: React.forwardRef(({ style, children }, listRef) => {\n    return (\n      <div ref={listRef} style={style}>\n        {children}\n      </div>\n    )\n  }),\n\n  Item: ({ children, ...props }) => {\n    return (\n      <div {...props} style={{ margin: 0 }}>\n        {children}\n      </div>\n    )\n  },\n\n  Group: ({ children, ...props }) => {\n    return <div {...props}>{children}</div>\n  },\n}\nconst Style = { height: '350px', width: '400px' }\n\nexport default function App() {\n  const { loadMore, groupCounts, users, groups } = useGroupedUsers(500)\n\n  useEffect(loadMore, [loadMore])\n\n  return (\n    <GroupedVirtuoso\n      components={components}\n      style={Style}\n      groupCounts={groupCounts}\n      groupContent={(index) => <div>Group {groups[index]}</div>}\n      overscan={400}\n      endReached={(value) => {\n        console.log(value)\n        loadMore()\n      }}\n      itemContent={(index) => (\n        <div>\n          <div>{users[index].initials}</div>\n          <div>\n            <strong>{users[index].name}</strong>\n          </div>\n          <div>{users[index].description}</div>\n        </div>\n      )}\n    />\n  )\n}\n"]}