@helpscout/hsds-react/components/Table/stories/TableWithAnimatedRows.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 _Table = require("../Table.testUtils");

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 originalData = (0, _Table.createFakeCustomers)({
  amount: 5
});

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

  function TableWithPagination(props) {
    var _this;

    _this = _Component.call(this, props) || this;
    _this.timer = undefined;
    _this.state = {
      data: originalData,
      columns: [{
        title: 'Name',
        columnKey: 'name',
        width: '50%'
      }, {
        title: 'Company',
        columnKey: 'companyName',
        width: '50%'
      }],
      loadingData: false,
      tableWidth: {
        min: '400px'
      },
      containerWidth: '400px',
      activePage: 1,
      removedRows: []
    };
    return _this;
  }

  var _proto = TableWithPagination.prototype;

  _proto.render = function render() {
    var _this2 = this;

    var _this$state = this.state,
        data = _this$state.data,
        columns = _this$state.columns,
        tableWidth = _this$state.tableWidth,
        containerWidth = _this$state.containerWidth;
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      style: {
        marginBottom: '50px'
      },
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        style: {
          marginBottom: '20px'
        },
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
          style: {
            marginRight: '10px'
          },
          onClick: function onClick() {
            if (_this2.state.data.length > 0) {
              _this2.timer = setInterval(function () {
                _this2.setState({
                  data: _this2.state.data.slice(0, _this2.state.data.length - 1)
                }, function () {
                  if (_this2.state.data.length === 0) {
                    clearInterval(_this2.timer);
                  }
                });
              }, 600);
            }
          },
          children: "Vanish them"
        }), this.state.removedRows.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
          onClick: function onClick() {
            clearInterval(_this2.timer);
            var removed = originalData.find(function (row) {
              return row.id === _this2.state.removedRows[_this2.state.removedRows.length - 1];
            });

            _this2.setState({
              data: _this2.state.data.concat(removed),
              removedRows: _this2.state.removedRows.filter(function (row) {
                return row !== removed.id;
              })
            });
          },
          children: "Restore (one by one)"
        }) : null]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
        animateRows: {
          onExit: function onExit(node) {
            _this2.setState({
              removedRows: _this2.state.removedRows.concat(node.dataset.rowId)
            });
          }
        },
        columns: columns,
        data: data,
        "data-testid": "Table",
        tableDescription: "Example table with pagination",
        tableWidth: tableWidth,
        containerWidth: containerWidth,
        onRowClick: function onRowClick(e, clickedRow) {
          clearInterval(_this2.timer);

          _this2.setState({
            data: _this2.state.data.filter(function (row) {
              return row.id !== clickedRow.id;
            })
          });
        }
      }), this.state.removedRows.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        style: {
          marginTop: '20px'
        },
        children: ["Removed rows:", /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
          children: this.state.removedRows.map(function (row) {
            return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
              children: row
            }, row);
          })
        })]
      }) : null]
    });
  };

  return TableWithPagination;
}(_react.Component);

exports.default = TableWithPagination;