@helpscout/hsds-react/components/Table/stories/TableWithSorting.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 TablePlayground = /*#__PURE__*/function (_Component) {
  (0, _inheritsLoose2.default)(TablePlayground, _Component);

  function TablePlayground(props) {
    var _this;

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

    _this.sortAlphabetically = function (columnKey) {
      var _this$state = _this.state,
          data = _this$state.data,
          sortedInfo = _this$state.sortedInfo;

      _this.setState({
        isLoading: true
      }); // simulate sortData as an API call


      return (0, _Table.sortData)(data, columnKey, sortedInfo.order).then(function (sortedData) {
        _this.setState({
          data: sortedData,
          sortedInfo: {
            columnKey: columnKey,
            order: sortedInfo.order === 'descending' ? 'ascending' : 'descending'
          },
          isLoading: false
        });
      });
    };

    _this.state = {
      data: (0, _Table.createFakeCustomers)({
        amount: 10
      }),
      columns: [{
        title: 'Not sortable',
        columnKey: ['name'],
        width: '25%'
      }, {
        title: 'Customer (sorts by name)',
        columnKey: ['name', 'companyName'],
        width: '25%',
        sortKey: 'name',
        sorter: _this.sortAlphabetically,
        renderCell: function renderCell(_ref) {
          var name = _ref.name,
              companyName = _ref.companyName;
          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
              children: name
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
              children: companyName
            })]
          });
        }
      }, {
        title: 'Customer (sorts by company)',
        columnKey: ['name', 'companyName'],
        width: '25%',
        sortKey: 'companyName',
        sorter: _this.sortAlphabetically,
        renderCell: function renderCell(_ref2) {
          var name = _ref2.name,
              companyName = _ref2.companyName;
          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
              children: name
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
              children: companyName
            })]
          });
        }
      }, {
        title: 'Company',
        columnKey: 'companyName',
        align: 'center',
        width: '25%',
        renderHeaderCell: {
          iconName: 'chat'
        },
        sorter: _this.sortAlphabetically
      }],
      sortedInfo: {
        columnKey: null,
        order: null
      },
      isLoading: false,
      activePage: 1
    };
    return _this;
  }

  var _proto = TablePlayground.prototype;

  _proto.render = function render() {
    var _this$state2 = this.state,
        data = _this$state2.data,
        columns = _this$state2.columns,
        sortedInfo = _this$state2.sortedInfo,
        isLoading = _this$state2.isLoading;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      style: {
        marginBottom: '50px'
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
        columns: columns,
        data: data,
        isLoading: isLoading,
        sortedInfo: sortedInfo,
        tableRole: "presentation",
        tableDescription: "Example table with sorting"
      })
    });
  };

  return TablePlayground;
}(_react.Component);

exports.default = TablePlayground;