wix-style-react/dist/es/stories/Table/TableInfiniteScrollExample.js

wix-style-react

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

import { Table } from 'wix-style-react/Table';
import React from 'react';
import { TableToolbar, ItemGroup, Item, Label } from 'wix-style-react/TableToolbar';

import Loader from 'wix-style-react/Loader';

import Card from 'wix-style-react/Card';
import Page from 'wix-style-react/Page';

var baseDataSet = [{
  id: '1',
  name: 'Apple Towels',
  SKU: '111222',
  price: '$2.00',
  inventory: 'In stock',
  collectionId: 1
}, {
  id: '2',
  name: 'Cyan Towels',
  SKU: '222333',
  price: '$2.00',
  inventory: 'In stock',
  collectionId: 1,
  filterId: 2
}, {
  id: '3',
  name: 'Marble Slippers',
  SKU: '333444',
  price: '$14.00',
  inventory: 'In stock',
  collectionId: 2
}, {
  id: '4',
  name: 'Red Slippers',
  SKU: '444555',
  price: '$14.00',
  inventory: 'Out of stock',
  collectionId: 2,
  filterId: 1
}];

var generateData = function generateData(count) {
  var data = [];
  for (var i = 0; i < count; i++) {
    data = data.concat(baseDataSet);
  }
  return data;
};

export var TableInfiniteScrollExample = function (_React$Component) {
  _inherits(TableInfiniteScrollExample, _React$Component);

  function TableInfiniteScrollExample(props) {
    _classCallCheck(this, TableInfiniteScrollExample);

    var _this = _possibleConstructorReturn(this, (TableInfiniteScrollExample.__proto__ || Object.getPrototypeOf(TableInfiniteScrollExample)).call(this, props));

    _this.state = {
      scrollableContentRef: null,
      hasMore: true,
      count: 5
    };
    _this.loadMore = _this.loadMore.bind(_this);
    return _this;
  }

  _createClass(TableInfiniteScrollExample, [{
    key: 'renderMainToolbar',
    value: function renderMainToolbar() {
      return React.createElement(
        Card,
        null,
        React.createElement(
          TableToolbar,
          null,
          React.createElement(
            ItemGroup,
            { position: 'start' },
            React.createElement(
              Item,
              null,
              React.createElement(
                Label,
                null,
                'Product'
              )
            )
          )
        )
      );
    }
  }, {
    key: 'renderLoader',
    value: function renderLoader() {
      return React.createElement(
        'div',
        {
          style: {
            width: '100%',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            padding: '25px 0'
          }
        },
        React.createElement(Loader, null)
      );
    }
  }, {
    key: 'loadMore',
    value: function loadMore() {
      var _this2 = this;

      var loadMoreData = function loadMoreData() {
        _this2.setState({ count: _this2.state.count + 5 });
        if (_this2.state.count > 20) {
          _this2.setState({ hasMore: false });
        }
      };
      setTimeout(loadMoreData, 1000);
    }
  }, {
    key: 'render',
    value: function render() {
      var _this3 = this;

      return React.createElement(
        'div',
        {
          style: {
            height: '800px',
            paddingBottom: '16px',
            display: 'flex',
            flexFlow: 'column',
            minWidth: '966px'
          }
        },
        React.createElement(
          Table,
          {
            withWrapper: false,
            dataHook: 'story-table-infinite-example',
            data: generateData(this.state.count),
            itemsPerPage: 20,
            infiniteScroll: true,
            hasMore: this.state.hasMore,
            loadMore: this.loadMore,
            scrollElement: this.state.scrollableContentRef,
            loader: this.renderLoader(),
            columns: [{
              title: 'Name',
              render: function render(row) {
                return row.name;
              },
              width: '30%',
              minWidth: '150px'
            }, {
              title: 'SKU',
              render: function render(row) {
                return row.SKU;
              },
              width: '20%',
              minWidth: '100px'
            }, {
              title: 'Price',
              render: function render(row) {
                return row.price;
              },
              width: '20%',
              minWidth: '100px'
            }, {
              title: 'Inventory',
              render: function render(row) {
                return row.inventory;
              },
              width: '20%',
              minWidth: '100px'
            }],
            showLastRowDivider: true
          },
          React.createElement(
            Page,
            {
              scrollableContentRef: function scrollableContentRef(_scrollableContentRef) {
                return !_this3.state.scrollableContentRef && _this3.setState({ scrollableContentRef: _scrollableContentRef });
              }
            },
            React.createElement(Page.Header, { title: 'My Table Title' }),
            React.createElement(
              Page.Content,
              null,
              React.createElement(
                Card,
                null,
                React.createElement(Table.Content, { titleBarVisible: false })
              )
            )
          )
        )
      );
    }
  }]);

  return TableInfiniteScrollExample;
}(React.Component);