@helpscout/hsds-react/components/Table/stories/TableWithPagination.js

React component library for Help Scout's Design System

"use strict";

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

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

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

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

var _addonKnobs = require("@storybook/addon-knobs");

var _Table = require("../Table.testUtils");

var _Pagination = _interopRequireDefault(require("../../Pagination"));

var _Button = _interopRequireDefault(require("../../Button"));

var _ = _interopRequireDefault(require("../"));

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 TableWithPagination = /*#__PURE__*/function (_Component) {
  (0, _inheritsLoose2.default)(TableWithPagination, _Component);

  function TableWithPagination(props) {
    var _this;

    _this = _Component.call(this, props) || this;

    _this.handlePageChange = function (nextPage) {
      var data = _this.state.data;

      _this.setState({
        isLoading: true
      });

      (0, _Table.getCurrentPageData)(data, nextPage).then(function (page) {
        _this.setState({
          activePage: nextPage,
          paginatedData: page,
          isLoading: false
        });
      });
    };

    var _data = (0, _Table.createFakeCustomers)({
      amount: 100
    });

    var paginatedData = _data.slice(0, 10);

    _this.state = {
      data: _data,
      paginatedData: paginatedData,
      columns: [{
        title: 'Name',
        columnKey: 'name',
        width: '33%',
        clearCellPadding: true,
        renderCell: function renderCell(_ref) {
          var name = _ref.name;
          return /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
            className: "fill-table-cell",
            href: "#top",
            tabIndex: "-1",
            children: name
          });
        }
      }, {
        title: 'Company',
        columnKey: 'companyName',
        width: '33%'
      }, {
        title: 'Email',
        columnKey: 'emails',
        align: 'center',
        renderCell: function renderCell(cellData) {
          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
            style: {
              width: '120px'
            },
            size: "xxs",
            onClick: function onClick(e) {
              console.log('button activated:click');
            },
            children: ["Email ", cellData.row.firstName]
          });
        },
        width: '34%'
      }],
      loadingData: false,
      tableWidth: {
        min: '700px'
      },
      containerWidth: '100%',
      activePage: 1
    };
    return _this;
  }

  var _proto = TableWithPagination.prototype;

  _proto.render = function render() {
    var _this$state = this.state,
        data = _this$state.data,
        columns = _this$state.columns,
        isLoading = _this$state.isLoading,
        tableWidth = _this$state.tableWidth,
        containerWidth = _this$state.containerWidth,
        activePage = _this$state.activePage,
        paginatedData = _this$state.paginatedData;
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      style: {
        marginBottom: '50px'
      },
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
        columns: columns,
        data: paginatedData,
        "data-testid": "Table",
        isLoading: isLoading,
        tableDescription: "Example table with pagination",
        tableWidth: tableWidth,
        containerWidth: containerWidth,
        onRowClick: function onRowClick(e, row) {
          console.log('🚀 ~ Row click / enter');
        },
        withFocusableRows: true,
        withTallRows: (0, _addonKnobs.boolean)('withTallRows', false),
        skin: (0, _addonKnobs.select)('Skin', {
          default: 'default',
          alternative: 'alternative'
        }, 'default')
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pagination.default, {
        subject: "Customer",
        activePage: activePage,
        showNavigation: true,
        rangePerPage: 10,
        totalItems: data.length,
        onChange: this.handlePageChange
      })]
    });
  };

  return TableWithPagination;
}(_react.Component);

exports.default = TableWithPagination;