@atlaskit/dynamic-table/dist/es2019/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 _defineProperty from "@babel/runtime/helpers/defineProperty";
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
const computeRankDestination = (result, pageRows) => {
  const {
    source: {
      index: sourceIndex
    },
    destination
  } = result;
  if (destination) {
    const {
      index
    } = destination;
    const keyIndex = index < sourceIndex ? index - 1 : index;
    const afterKey = keyIndex !== -1 ? pageRows[keyIndex].key : undefined;
    const beforeIndex = keyIndex === -1 ? 0 : keyIndex + 1;
    const beforeKey = beforeIndex < pageRows.length ? pageRows[beforeIndex].key : undefined;
    return {
      index,
      afterKey,
      beforeKey
    };
  }
  return undefined;
};
// eslint-disable-next-line @repo/internal/react/no-class-components
export class RankableBody extends React.Component {
  constructor(...args) {
    super(...args);
    _defineProperty(this, "onBeforeDragStart", dragStart => {
      const {
        draggableId: key,
        source: {
          index
        }
      } = dragStart;
      const rankStartProps = {
        index,
        key
      };
      this.props.onRankStart(rankStartProps);
    });
    _defineProperty(this, "onDragEnd", result => {
      const {
        pageRows,
        onRankEnd
      } = this.props;
      const {
        draggableId: sourceKey,
        source: {
          index: sourceIndex
        }
      } = result;
      const destination = computeRankDestination(result, pageRows);
      const rankEndProps = {
        sourceIndex,
        sourceKey,
        destination
      };
      onRankEnd(rankEndProps);
    });
  }
  render() {
    const {
      highlightedRowIndex,
      pageRows,
      head,
      isFixedSize,
      isRanking,
      isRankingDisabled,
      testId,
      forwardedRef
    } = this.props;
    return /*#__PURE__*/React.createElement(DragDropContext, {
      onBeforeDragStart: this.onBeforeDragStart,
      onDragEnd: this.onDragEnd
    }, /*#__PURE__*/React.createElement(Droppable, {
      droppableId: "dynamic-table-droppable",
      isDropDisabled: isRankingDisabled
    }, provided => /*#__PURE__*/React.createElement("tbody", _extends({
      "data-testid": testId,
      ref: ref => {
        if (provided && typeof provided.innerRef === 'function') {
          provided.innerRef(ref);
        }
        if (forwardedRef) {
          forwardedRef.current = ref;
        }
      }
    }, provided.droppableProps), pageRows.map((row, rowIndex) => /*#__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 && `${testId}--${row.key}--rankable--table--row`
    })), provided.placeholder)));
  }
}