@helpscout/hsds-react/components/InfiniteScroller/InfiniteScroller.storiesHelpers.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.StoryComponent = void 0;

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

var _react = _interopRequireWildcard(require("react"));

var _index = require("../index");

var _jsxRuntime = require("react/jsx-runtime");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }

var makeStoryItems = function makeStoryItems(count, start) {
  if (start === void 0) {
    start = 0;
  }

  var collection = [];

  var badHash = function badHash() {
    return Math.random() * (100 - 1) + 1;
  };

  var uniq = function uniq() {
    return Math.round(new Date().getTime() / 1000) + "-" + badHash();
  };

  for (var i = 0, len = count; i < len; i++) {
    var index = start + i;
    collection.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Animate, {
      sequence: "fade",
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index.Card, {
        style: {
          margin: 8
        },
        children: ["Item ", index + 1]
      }, "item-" + uniq() + "-" + i)
    }));
  }

  return collection;
};

var StoryComponent = /*#__PURE__*/function (_Component) {
  (0, _inheritsLoose2.default)(StoryComponent, _Component);

  function StoryComponent() {
    var _this;

    _this = _Component.call(this) || this;
    _this.state = {
      isLoading: false,
      items: makeStoryItems(15)
    };
    _this.onLoading = _this.onLoading.bind((0, _assertThisInitialized2.default)(_this));
    _this.onLoaded = _this.onLoaded.bind((0, _assertThisInitialized2.default)(_this));
    return _this;
  }

  var _proto = StoryComponent.prototype;

  _proto.onLoading = function onLoading(onLoaded) {
    var _this2 = this;

    this.setState({
      isLoading: true
    });
    console.log('Loading!');
    setTimeout(function () {
      _this2.setState({
        isLoading: false
      });

      onLoaded();
    }, 500);
  };

  _proto.onLoaded = function onLoaded() {
    var items = this.state.items;
    this.setState({
      items: items.concat(makeStoryItems(5, items.length))
    });
    console.log('Loaded!');
  };

  _proto.render = function render() {
    var _this$state = this.state,
        isLoading = _this$state.isLoading,
        items = _this$state.items;
    var onLoaded = this.onLoaded;
    var onLoading = this.onLoading;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Card, {
      style: {
        minWidth: 600,
        height: 320,
        margin: 'auto'
      },
      seamless: true,
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index.Scrollable, {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.AnimateGroup, {
          children: items
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.InfiniteScroller, {
          onLoading: onLoading,
          onLoaded: onLoaded,
          isLoading: isLoading,
          style: {
            padding: 16
          },
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
            children: "Load More"
          })
        })]
      })
    });
  };

  return StoryComponent;
}(_react.PureComponent);

exports.StoryComponent = StoryComponent;