@atlaskit/dynamic-table/dist/esm/components/rankable/rankable-body.js

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

import _extends from "@babel/runtime/helpers/extends";
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 { DragDropContext, Droppable } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration';
import TableRow from './table-row';

// computes destination of ranking
// - if drag was cancelled returns undefined
// - if drag was finished, returns new position and after/before key
var computeRankDestination = function computeRankDestination(result, pageRows) {
  var sourceIndex = result.source.index,
    destination = result.destination;
  if (destination) {
    var index = destination.index;
    var keyIndex = index < sourceIndex ? index - 1 : index;
    var afterKey = keyIndex !== -1 ? pageRows[keyIndex].key : undefined;
    var beforeIndex = keyIndex === -1 ? 0 : keyIndex + 1;
    var beforeKey = beforeIndex < pageRows.length ? pageRows[beforeIndex].key : undefined;
    return {
      index: index,
      afterKey: afterKey,
      beforeKey: beforeKey
    };
  }
  return undefined;
};
// eslint-disable-next-line @repo/internal/react/no-class-components
export var RankableBody = /*#__PURE__*/function (_React$Component) {
  function RankableBody() {
    var _this;
    _classCallCheck(this, RankableBody);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _callSuper(this, RankableBody, [].concat(args));
    _defineProperty(_this, "onBeforeDragStart", function (dragStart) {
      var key = dragStart.draggableId,
        index = dragStart.source.index;
      var rankStartProps = {
        index: index,
        key: key
      };
      _this.props.onRankStart(rankStartProps);
    });
    _defineProperty(_this, "onDragEnd", function (result) {
      var _this$props = _this.props,
        pageRows = _this$props.pageRows,
        onRankEnd = _this$props.onRankEnd;
      var sourceKey = result.draggableId,
        sourceIndex = result.source.index;
      var destination = computeRankDestination(result, pageRows);
      var rankEndProps = {
        sourceIndex: sourceIndex,
        sourceKey: sourceKey,
        destination: destination
      };
      onRankEnd(rankEndProps);
    });
    return _this;
  }
  _inherits(RankableBody, _React$Component);
  return _createClass(RankableBody, [{
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
        highlightedRowIndex = _this$props2.highlightedRowIndex,
        pageRows = _this$props2.pageRows,
        head = _this$props2.head,
        isFixedSize = _this$props2.isFixedSize,
        isRanking = _this$props2.isRanking,
        isRankingDisabled = _this$props2.isRankingDisabled,
        testId = _this$props2.testId,
        forwardedRef = _this$props2.forwardedRef;
      return /*#__PURE__*/React.createElement(DragDropContext, {
        onBeforeDragStart: this.onBeforeDragStart,
        onDragEnd: this.onDragEnd
      }, /*#__PURE__*/React.createElement(Droppable, {
        droppableId: "dynamic-table-droppable",
        isDropDisabled: isRankingDisabled
      }, function (provided) {
        return /*#__PURE__*/React.createElement("tbody", _extends({
          "data-testid": testId,
          ref: function ref(_ref) {
            if (provided && typeof provided.innerRef === 'function') {
              provided.innerRef(_ref);
            }
            if (forwardedRef) {
              forwardedRef.current = _ref;
            }
          }
        }, provided.droppableProps), pageRows.map(function (row, rowIndex) {
          return /*#__PURE__*/React.createElement(TableRow, {
            head: head,
            isRanking: isRanking,
            isFixedSize: isFixedSize,
            key: row.key,
            rowIndex: rowIndex,
            row: row,
            isRankingDisabled: isRankingDisabled,
            isHighlighted: highlightedRowIndex !== undefined && (typeof highlightedRowIndex === 'number' ? highlightedRowIndex === rowIndex : highlightedRowIndex.indexOf(rowIndex) > -1),
            testId: testId && "".concat(testId, "--").concat(row.key, "--rankable--table--row")
          });
        }), provided.placeholder);
      }));
    }
  }]);
}(React.Component);