react-virtuoso 2.2.2 → 2.2.6-beta.0

package/dist/chat.d4f93b8b.js

@@ -0,0 +1,570 @@
+// 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;
+})({"chat.tsx":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = App;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _src = require("../src/");
+
+var _faker = _interopRequireDefault(require("faker"));
+
+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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+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; }
+
+function _templateObject4() {
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  height: 100%;\n  margin-top: 12px;\n"]);
+
+  _templateObject4 = function _templateObject4() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject3() {
+  var data = _taggedTemplateLiteral(["\n  padding: 12px 24px;\n"]);
+
+  _templateObject3 = function _templateObject3() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject2() {
+  var data = _taggedTemplateLiteral(["\n  background: ", ";\n  color: white;\n  width: 60%;\n  padding: 12px;\n  border-radius: 4px;\n  word-break: break-word;\n"]);
+
+  _templateObject2 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject() {
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: ", ";\n  width: 100%;\n  padding: 12px 0;\n"]);
+
+  _templateObject = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var BubbleWrap = _styled.default.div(_templateObject(), function (_ref) {
+  var fromUser = _ref.fromUser;
+  return fromUser && 'flex-end';
+});
+
+var Content = _styled.default.div(_templateObject2(), function (_ref2) {
+  var fromUser = _ref2.fromUser;
+  return fromUser ? 'orange' : 'red';
+});
+
+function Bubble(_ref3) {
+  var text = _ref3.text,
+      fromUser = _ref3.fromUser,
+      className = _ref3.className;
+  return React.createElement(BubbleWrap, {
+    fromUser: fromUser,
+    className: className
+  }, React.createElement(Content, {
+    fromUser: fromUser
+  }, text));
+}
+
+var Root = _styled.default.div(_templateObject3());
+
+var TextWrapper = _styled.default.div(_templateObject4());
+
+function ChatList(_ref4) {
+  var userId = _ref4.userId,
+      _ref4$messages = _ref4.messages,
+      messages = _ref4$messages === void 0 ? [] : _ref4$messages,
+      onSend = _ref4.onSend,
+      onReceive = _ref4.onReceive,
+      placeholder = _ref4.placeholder;
+
+  var _useState = (0, React.useState)(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      newMessage = _useState2[0],
+      setNewMessage = _useState2[1];
+
+  var ref = (0, React.useRef)(null);
+  var isMyOwnMessage = (0, React.useRef)(false);
+
+  var onSendMessage = function onSendMessage() {
+    isMyOwnMessage.current = true;
+    onSend(newMessage);
+    setNewMessage('');
+  };
+
+  var onReceiveMessage = function onReceiveMessage() {
+    isMyOwnMessage.current = false;
+    onReceive();
+  };
+
+  var row = React.useMemo(function () {
+    return function (i, _ref5) {
+      var message = _ref5.message,
+          id = _ref5.id;
+      var fromUser = id === userId;
+      return React.createElement(Bubble, {
+        key: i,
+        fromUser: fromUser,
+        text: message
+      });
+    };
+  }, [userId]);
+  return React.createElement(Root, {
+    style: {
+      flex: 1,
+      display: 'flex',
+      flexDirection: 'column',
+      border: '1px solid red'
+    }
+  }, React.createElement(_src.Virtuoso, {
+    ref: ref,
+    style: {
+      flex: 1
+    },
+    initialTopMostItemIndex: messages.length - 1,
+    followOutput: function followOutput(isAtBottom) {
+      if (isMyOwnMessage.current) {
+        // if the user has scrolled away and sends a message, bring him to the bottom instantly
+        return isAtBottom ? 'smooth' : 'auto';
+      } else {
+        // a message from another user has been received - don't pull to bottom unless already there
+        return isAtBottom ? 'smooth' : false;
+      }
+    },
+    itemContent: row,
+    data: messages
+  }), React.createElement(TextWrapper, {
+    style: {
+      flex: 0,
+      minHeight: 30
+    }
+  }, React.createElement("form", {
+    onSubmit: function onSubmit(e) {
+      e.preventDefault();
+      onSendMessage();
+    }
+  }, React.createElement("input", {
+    type: "text",
+    value: newMessage,
+    onChange: function onChange(e) {
+      return setNewMessage(e.target.value);
+    },
+    placeholder: placeholder
+  }), React.createElement("button", {
+    type: "submit"
+  }, "send"), " |", React.createElement("button", {
+    type: "button",
+    onClick: onReceiveMessage
+  }, "receive"))));
+}
+
+var data = Array.from({
+  length: 130
+}, function (_) {
+  return {
+    id: _faker.default.random.number({
+      min: 1,
+      max: 2
+    }).toString(),
+    message: _faker.default.lorem.sentences()
+  };
+});
+
+function App() {
+  var _React$useState = React.useState(data),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      messages = _React$useState2[0],
+      setMessages = _React$useState2[1];
+
+  var userId = '1';
+  return React.createElement("div", {
+    style: {
+      height: '500px',
+      display: 'flex',
+      flexDirection: 'column'
+    }
+  }, React.createElement(ChatList, {
+    messages: messages,
+    userId: "1",
+    placeholder: "Say hi!",
+    onSend: function onSend(message) {
+      return setMessages(function (x) {
+        return [].concat(_toConsumableArray(x), [{
+          id: userId,
+          message: message
+        }]);
+      });
+    },
+    onReceive: function onReceive() {
+      setMessages(function (x) {
+        return [].concat(_toConsumableArray(x), [{
+          id: '2',
+          message: _faker.default.lorem.sentences()
+        }]);
+      });
+    }
+  }));
+}
+},{"react":"../node_modules/react/index.js","@emotion/styled":"../node_modules/@emotion/styled/dist/styled.browser.esm.js","../src/":"../src/index.tsx","faker":"../node_modules/faker/index.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=/chat.d4f93b8b.js.map

package/dist/chat.d4f93b8b.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["chat.tsx"],"names":[],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,IAAM,UAAU,GAAG,gBAAO,GAAV,oBAEK;AAAA,MAAG,QAAH,QAAG,QAAH;AAAA,SAAkB,QAAQ,IAAI,UAA9B;AAAA,CAFL,CAAhB;;AAOA,IAAM,OAAO,GAAG,gBAAO,GAAV,qBACG;AAAA,MAAG,QAAH,SAAG,QAAH;AAAA,SAAmB,QAAQ,GAAG,QAAH,GAAc,KAAzC;AAAA,CADH,CAAb;;AASA,SAAS,MAAT,QAA0D;AAAA,MAAxC,IAAwC,SAAxC,IAAwC;AAAA,MAAlC,QAAkC,SAAlC,QAAkC;AAAA,MAAxB,SAAwB,SAAxB,SAAwB;AACxD,SACE,KAAA,CAAA,aAAA,CAAC,UAAD,EAAW;AAAC,IAAA,QAAQ,EAAE,QAAX;AAAqB,IAAA,SAAS,EAAE;AAAhC,GAAX,EACE,KAAA,CAAA,aAAA,CAAC,OAAD,EAAQ;AAAC,IAAA,QAAQ,EAAE;AAAX,GAAR,EAA8B,IAA9B,CADF,CADF;AAKD;;AAWD,IAAM,IAAI,GAAG,gBAAO,GAAV,oBAAV;;AAIA,IAAM,WAAW,GAAG,gBAAO,GAAV,oBAAjB;;AAQA,SAAS,QAAT,QAA0F;AAAA,MAAtE,MAAsE,SAAtE,MAAsE;AAAA,6BAA9D,QAA8D;AAAA,MAA9D,QAA8D,+BAAnD,EAAmD;AAAA,MAA/C,MAA+C,SAA/C,MAA+C;AAAA,MAAvC,SAAuC,SAAvC,SAAuC;AAAA,MAA5B,WAA4B,SAA5B,WAA4B;;AAAA,kBACpD,oBAAS,EAAT,CADoD;AAAA;AAAA,MACjF,UADiF;AAAA,MACrE,aADqE;;AAExF,MAAM,GAAG,GAAG,kBAAO,IAAP,CAAZ;AACA,MAAM,cAAc,GAAG,kBAAO,KAAP,CAAvB;;AACA,MAAM,aAAa,GAAG,SAAhB,aAAgB,GAAK;AACzB,IAAA,cAAc,CAAC,OAAf,GAAyB,IAAzB;AACA,IAAA,MAAM,CAAC,UAAD,CAAN;AACA,IAAA,aAAa,CAAC,EAAD,CAAb;AACD,GAJD;;AAMA,MAAM,gBAAgB,GAAG,SAAnB,gBAAmB,GAAK;AAC5B,IAAA,cAAc,CAAC,OAAf,GAAyB,KAAzB;AACA,IAAA,SAAS;AACV,GAHD;;AAKA,MAAM,GAAG,GAAG,KAAK,CAAC,OAAN,CACV;AAAA,WAAM,UAAC,CAAD,SAAgE;AAAA,UAAlD,OAAkD,SAAlD,OAAkD;AAAA,UAAzC,EAAyC,SAAzC,EAAyC;AACpE,UAAM,QAAQ,GAAG,EAAE,KAAK,MAAxB;AACA,aAAO,KAAA,CAAA,aAAA,CAAC,MAAD,EAAO;AAAC,QAAA,GAAG,EAAE,CAAN;AAAS,QAAA,QAAQ,EAAE,QAAnB;AAA6B,QAAA,IAAI,EAAE;AAAnC,OAAP,CAAP;AACD,KAHD;AAAA,GADU,EAKV,CAAC,MAAD,CALU,CAAZ;AAQA,SACE,KAAA,CAAA,aAAA,CAAC,IAAD,EAAK;AACH,IAAA,KAAK,EAAE;AACL,MAAA,IAAI,EAAE,CADD;AAEL,MAAA,OAAO,EAAE,MAFJ;AAGL,MAAA,aAAa,EAAE,QAHV;AAIL,MAAA,MAAM,EAAE;AAJH;AADJ,GAAL,EAQE,KAAA,CAAA,aAAA,CAAC,aAAD,EAAS;AACP,IAAA,GAAG,EAAE,GADE;AAEP,IAAA,KAAK,EAAE;AAAE,MAAA,IAAI,EAAE;AAAR,KAFA;AAGP,IAAA,uBAAuB,EAAE,QAAQ,CAAC,MAAT,GAAkB,CAHpC;AAIP,IAAA,YAAY,EAAE,sBAAC,UAAD,EAAe;AAC3B,UAAI,cAAc,CAAC,OAAnB,EAA4B;AAC1B;AACA,eAAO,UAAU,GAAG,QAAH,GAAc,MAA/B;AACD,OAHD,MAGO;AACL;AACA,eAAO,UAAU,GAAG,QAAH,GAAc,KAA/B;AACD;AACF,KAZM;AAaP,IAAA,WAAW,EAAE,GAbN;AAcP,IAAA,IAAI,EAAE;AAdC,GAAT,CARF,EAwBE,KAAA,CAAA,aAAA,CAAC,WAAD,EAAY;AAAC,IAAA,KAAK,EAAE;AAAE,MAAA,IAAI,EAAE,CAAR;AAAW,MAAA,SAAS,EAAE;AAAtB;AAAR,GAAZ,EACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AACE,IAAA,QAAQ,EAAE,kBAAC,CAAD,EAAM;AACd,MAAA,CAAC,CAAC,cAAF;AACA,MAAA,aAAa;AACd;AAJH,GAAA,EAME,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA;AACE,IAAA,IAAI,EAAC,MADP;AAEE,IAAA,KAAK,EAAE,UAFT;AAGE,IAAA,QAAQ,EAAE,kBAAC,CAAD;AAAA,aAAO,aAAa,CAAE,CAAC,CAAC,MAAF,CAA8B,KAAhC,CAApB;AAAA,KAHZ;AAIE,IAAA,WAAW,EAAE;AAJf,GAAA,CANF,EAYE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAQ,IAAA,IAAI,EAAC;AAAb,GAAA,EAAqB,MAArB,CAZF,MAAA,EAaE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAQ,IAAA,IAAI,EAAC,QAAb;AAAsB,IAAA,OAAO,EAAE;AAA/B,GAAA,EAA+C,SAA/C,CAbF,CADF,CAxBF,CADF;AA8CD;;AAED,IAAM,IAAI,GAAG,KAAK,CAAC,IAAN,CAAW;AAAE,EAAA,MAAM,EAAE;AAAV,CAAX,EAA4B,UAAC,CAAD;AAAA,SAAQ;AAC/C,IAAA,EAAE,EAAE,eAAM,MAAN,CAAa,MAAb,CAAoB;AAAE,MAAA,GAAG,EAAE,CAAP;AAAU,MAAA,GAAG,EAAE;AAAf,KAApB,EAAwC,QAAxC,EAD2C;AAE/C,IAAA,OAAO,EAAE,eAAM,KAAN,CAAY,SAAZ;AAFsC,GAAR;AAAA,CAA5B,CAAb;;AAKc,SAAU,GAAV,GAAa;AAAA,wBACO,KAAK,CAAC,QAAN,CAAe,IAAf,CADP;AAAA;AAAA,MAClB,QADkB;AAAA,MACR,WADQ;;AAEzB,MAAM,MAAM,GAAG,GAAf;AACA,SACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AACE,IAAA,KAAK,EAAE;AACL,MAAA,MAAM,EAAE,OADH;AAEL,MAAA,OAAO,EAAE,MAFJ;AAGL,MAAA,aAAa,EAAE;AAHV;AADT,GAAA,EAOE,KAAA,CAAA,aAAA,CAAC,QAAD,EAAS;AACP,IAAA,QAAQ,EAAE,QADH;AAEP,IAAA,MAAM,EAAC,GAFA;AAGP,IAAA,WAAW,EAAC,SAHL;AAIP,IAAA,MAAM,EAAE,gBAAC,OAAD;AAAA,aAAa,WAAW,CAAC,UAAC,CAAD;AAAA,4CAAW,CAAX,IAAc;AAAE,UAAA,EAAE,EAAE,MAAN;AAAc,UAAA,OAAO,EAAP;AAAd,SAAd;AAAA,OAAD,CAAxB;AAAA,KAJD;AAKP,IAAA,SAAS,EAAE,qBAAK;AACd,MAAA,WAAW,CAAC,UAAC,CAAD;AAAA,4CAAW,CAAX,IAAc;AAAE,UAAA,EAAE,EAAE,GAAN;AAAW,UAAA,OAAO,EAAE,eAAM,KAAN,CAAY,SAAZ;AAApB,SAAd;AAAA,OAAD,CAAX;AACD;AAPM,GAAT,CAPF,CADF;AAmBD","file":"chat.d4f93b8b.js","sourceRoot":"../e2e","sourcesContent":["import { useRef, useState } from 'react'\nimport * as React from 'react'\nimport styled from '@emotion/styled'\nimport { Virtuoso } from '../src/'\nimport faker from 'faker'\n\ninterface BubbleProps {\n  text: string\n  fromUser?: boolean\n  className?: string\n}\n\nconst BubbleWrap = styled.div<{ fromUser?: boolean }>`\n  display: flex;\n  justify-content: ${({ fromUser }) => fromUser && 'flex-end'};\n  width: 100%;\n  padding: 12px 0;\n`\n\nconst Content = styled.div<{ fromUser?: boolean }>`\n  background: ${({ fromUser }) => (fromUser ? 'orange' : 'red')};\n  color: white;\n  width: 60%;\n  padding: 12px;\n  border-radius: 4px;\n  word-break: break-word;\n`\n\nfunction Bubble({ text, fromUser, className }: BubbleProps) {\n  return (\n    <BubbleWrap fromUser={fromUser} className={className}>\n      <Content fromUser={fromUser}>{text}</Content>\n    </BubbleWrap>\n  )\n}\n\ninterface ChatListProps {\n  messages: { id: string; message: string }[]\n  userId: string\n  onSend: (message: string) => void\n  onReceive: () => void\n  height?: number\n  placeholder?: string\n}\n\nconst Root = styled.div<{ fromUser?: boolean }>`\n  padding: 12px 24px;\n`\n\nconst TextWrapper = styled.div`\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  height: 100%;\n  margin-top: 12px;\n`\n\nfunction ChatList({ userId, messages = [], onSend, onReceive, placeholder }: ChatListProps) {\n  const [newMessage, setNewMessage] = useState('')\n  const ref = useRef(null)\n  const isMyOwnMessage = useRef(false)\n  const onSendMessage = () => {\n    isMyOwnMessage.current = true\n    onSend(newMessage)\n    setNewMessage('')\n  }\n\n  const onReceiveMessage = () => {\n    isMyOwnMessage.current = false\n    onReceive()\n  }\n\n  const row = React.useMemo(\n    () => (i: number, { message, id }: { message: string; id: string }) => {\n      const fromUser = id === userId\n      return <Bubble key={i} fromUser={fromUser} text={message} />\n    },\n    [userId]\n  )\n\n  return (\n    <Root\n      style={{\n        flex: 1,\n        display: 'flex',\n        flexDirection: 'column',\n        border: '1px solid red',\n      }}\n    >\n      <Virtuoso\n        ref={ref}\n        style={{ flex: 1 }}\n        initialTopMostItemIndex={messages.length - 1}\n        followOutput={(isAtBottom) => {\n          if (isMyOwnMessage.current) {\n            // if the user has scrolled away and sends a message, bring him to the bottom instantly\n            return isAtBottom ? 'smooth' : 'auto'\n          } else {\n            // a message from another user has been received - don't pull to bottom unless already there\n            return isAtBottom ? 'smooth' : false\n          }\n        }}\n        itemContent={row}\n        data={messages}\n      />\n      <TextWrapper style={{ flex: 0, minHeight: 30 }}>\n        <form\n          onSubmit={(e) => {\n            e.preventDefault()\n            onSendMessage()\n          }}\n        >\n          <input\n            type=\"text\"\n            value={newMessage}\n            onChange={(e) => setNewMessage((e.target as HTMLInputElement).value)}\n            placeholder={placeholder}\n          />\n          <button type=\"submit\">send</button> |\n          <button type=\"button\" onClick={onReceiveMessage}>\n            receive\n          </button>\n        </form>\n      </TextWrapper>\n    </Root>\n  )\n}\n\nconst data = Array.from({ length: 130 }, (_) => ({\n  id: faker.random.number({ min: 1, max: 2 }).toString(),\n  message: faker.lorem.sentences(),\n}))\n\nexport default function App() {\n  const [messages, setMessages] = React.useState(data)\n  const userId = '1'\n  return (\n    <div\n      style={{\n        height: '500px',\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      <ChatList\n        messages={messages}\n        userId=\"1\"\n        placeholder=\"Say hi!\"\n        onSend={(message) => setMessages((x) => [...x, { id: userId, message }])}\n        onReceive={() => {\n          setMessages((x) => [...x, { id: '2', message: faker.lorem.sentences() }])\n        }}\n      />\n    </div>\n  )\n}\n"]}