react-virtuoso 2.2.6-beta.2 → 2.2.6

package/dist/grouped-endless-scrolling.24985a0f.js

@@ -1,301 +0,0 @@
-// 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-endless-scrolling.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 Array.from({
-      length: count
-    }, 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 = (0, React.useCallback)(function () {
-    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 === count) {
-          setEndReached(true);
-        }
-      }, 30);
-    }
-  }, [allUsers, endReached, count]);
-  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: '300px'
-};
-
-function App() {
-  var _useGroupedUsers = useGroupedUsers(12500),
-      loadMore = _useGroupedUsers.loadMore,
-      groupCounts = _useGroupedUsers.groupCounts,
-      users = _useGroupedUsers.users,
-      groups = _useGroupedUsers.groups;
-
-  console.log(groupCounts);
-  (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(_) {
-      loadMore();
-    },
-    itemContent: function itemContent(index) {
-      return React.createElement("div", null, React.createElement("div", null, React.createElement("strong", null, users[index].name)), React.createElement("div", null, users[index].description, 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"}]},{},[], null)

package/dist/grouped-endless-scrolling.24985a0f.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["grouped-endless-scrolling.tsx"],"names":[],"mappings":"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","file":"grouped-endless-scrolling.24985a0f.js","sourceRoot":"../e2e","sourcesContent":["import * as React from 'react'\nimport { Components, GroupedVirtuoso } from '../src'\nimport { useMemo, useRef, useState, useEffect, useCallback } 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(() => Array.from({ length: count }, 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 = useCallback(() => {\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 === count) {\n          setEndReached(true)\n        }\n      }, 30)\n    }\n  }, [allUsers, endReached, count])\n\n  return {\n    loadMore,\n    endReached,\n    groupCounts,\n    users: loadedUsers.current,\n    groups: groups.current,\n  }\n}\n\nconst components: Partial<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: '300px' }\n\nexport default function App() {\n  const { loadMore, groupCounts, users, groups } = useGroupedUsers(12500)\n  console.log(groupCounts)\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={(_) => {\n        loadMore()\n      }}\n      itemContent={(index) => (\n        <div>\n          <div>\n            <strong>{users[index].name}</strong>\n          </div>\n          <div>\n            {users[index].description}\n            {users[index].description}\n          </div>\n        </div>\n      )}\n    />\n  )\n}\n"]}

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

@@ -1,300 +0,0 @@
-// 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"}]},{},[], null)

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

@@ -1 +0,0 @@
-{"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"]}