@atlaskit/dynamic-table/dist/esm/components/stateful.js

A dynamic table displays rows of data with built-in pagination, sorting, and re-ordering functionality.

import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
import React from 'react';
import noop from '@atlaskit/ds-lib/noop';
import { reorderRows } from '../internal/reorder-rows';
import DynamicTableStateless from './stateless';
/**
 * __Dynamic Table__
 *
 * A table displays rows of data with built-in pagination, sorting, and re-ordering functionality.
 *
 * - [Examples](https://atlaskit.atlassian.com/packages/design-system/dynamic-table)
 * - [Code](https://bitbucket.org/atlassian/atlassian-frontend/packages/design-system/dynamic-table)
 *
 * @example
 * ```jsx
 * import DynamicTable from '@atlaskit/dynamic-table';
 *
 * export default function TableUncontrolled() {
 *  return (
 *   <DynamicTable
 *    head={head}
 *    rows={rows}
 *    rowsPerPage={10}
 *    defaultPage={1}
 *    loadingSpinnerSize="large"
 *    isLoading={false}
 *   />
 *  );
 * }
 * ```
 */
// eslint-disable-next-line @repo/internal/react/no-class-components
var DynamicTable = /*#__PURE__*/function (_React$Component) {
  function DynamicTable() {
    var _this;
    _classCallCheck(this, DynamicTable);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _callSuper(this, DynamicTable, [].concat(args));
    _defineProperty(_this, "state", {
      page: _this.props.defaultPage,
      sortKey: _this.props.defaultSortKey,
      sortOrder: _this.props.defaultSortOrder,
      rows: _this.props.rows
    });
    _defineProperty(_this, "onSetPageHandler", function (page, analyticsEvent) {
      var onSetPage = _this.props.onSetPage;
      if (onSetPage) {
        onSetPage(page, analyticsEvent);
        _this.setState({
          page: page
        });
      }
    });
    _defineProperty(_this, "onSortHandler", function (_ref, analyticsEvent) {
      var key = _ref.key,
        item = _ref.item,
        sortOrder = _ref.sortOrder;
      var onSort = _this.props.onSort;
      if (onSort) {
        onSort({
          key: key,
          item: item,
          sortOrder: sortOrder
        }, analyticsEvent);
        _this.setState({
          sortKey: key,
          sortOrder: sortOrder
        });
      }
    });
    _defineProperty(_this, "onRankEndIfExistsHandler", function (params) {
      if (_this.props.onRankEnd) {
        _this.props.onRankEnd(params);
      }
    });
    _defineProperty(_this, "onRankEndHandler", function (params) {
      var destination = params.destination;
      var _this$state = _this.state,
        rows = _this$state.rows,
        page = _this$state.page;
      var rowsPerPage = _this.props.rowsPerPage;
      if (!destination || !rows) {
        _this.onRankEndIfExistsHandler(params);
        return;
      }
      var reordered = reorderRows(params, rows, page, rowsPerPage);
      _this.setState({
        rows: reordered
      });
      _this.onRankEndIfExistsHandler(params);
    });
    return _this;
  }
  _inherits(DynamicTable, _React$Component);
  return _createClass(DynamicTable, [{
    key: "UNSAFE_componentWillReceiveProps",
    value: function UNSAFE_componentWillReceiveProps(newProps) {
      var sortKey = newProps.sortKey || this.state.sortKey;
      var sortOrder = newProps.sortOrder || this.state.sortOrder;
      var page = newProps.page || this.state.page;
      this.setState({
        page: page,
        sortKey: sortKey,
        sortOrder: sortOrder,
        rows: newProps.rows
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this$state2 = this.state,
        page = _this$state2.page,
        sortKey = _this$state2.sortKey,
        sortOrder = _this$state2.sortOrder,
        rows = _this$state2.rows;
      var _this$props = this.props,
        caption = _this$props.caption,
        emptyView = _this$props.emptyView,
        head = _this$props.head,
        highlightedRowIndex = _this$props.highlightedRowIndex,
        loadingSpinnerSize = _this$props.loadingSpinnerSize,
        isLoading = _this$props.isLoading,
        loadingLabel = _this$props.loadingLabel,
        isFixedSize = _this$props.isFixedSize,
        isRankable = _this$props.isRankable,
        isRankingDisabled = _this$props.isRankingDisabled,
        rowsPerPage = _this$props.rowsPerPage,
        paginationi18n = _this$props.paginationi18n,
        onRankStart = _this$props.onRankStart,
        onPageRowsUpdate = _this$props.onPageRowsUpdate,
        testId = _this$props.testId,
        label = _this$props.label;
      return /*#__PURE__*/React.createElement(DynamicTableStateless, {
        paginationi18n: paginationi18n,
        caption: caption,
        emptyView: emptyView,
        head: head,
        highlightedRowIndex: highlightedRowIndex,
        loadingSpinnerSize: loadingSpinnerSize,
        isLoading: isLoading,
        loadingLabel: loadingLabel,
        isFixedSize: isFixedSize,
        onSetPage: this.onSetPageHandler,
        onSort: this.onSortHandler,
        page: page,
        rows: rows,
        rowsPerPage: rowsPerPage,
        sortKey: sortKey,
        sortOrder: sortOrder,
        isRankable: isRankable,
        isRankingDisabled: isRankingDisabled,
        onRankEnd: this.onRankEndHandler,
        onRankStart: onRankStart,
        onPageRowsUpdate: onPageRowsUpdate,
        testId: testId,
        label: label
      });
    }
  }]);
}(React.Component);
_defineProperty(DynamicTable, "defaultProps", {
  defaultPage: 1,
  isLoading: false,
  isFixedSize: false,
  isRankable: false,
  onSetPage: noop,
  onSort: noop,
  rowsPerPage: Infinity
});
export { DynamicTable as default };