@atlaskit/dynamic-table
Version:
A dynamic table displays rows of data with built-in pagination, sorting, and re-ordering functionality.
109 lines (108 loc) • 6.13 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
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";
var _excluded = ["cells", "testId", "key", "isHighlighted"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
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';
// Allowing existing usage of non Pragmatic drag and drop solution
import { Draggable } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration';
import withDimensions from '../../hoc/with-dimensions';
import { inlineStylesIfRanking } from '../../internal/inline-styles-if-ranking';
import { RankableTableBodyRow } from '../../styled/rankable/table-row';
import TableCell from './table-cell';
// eslint-disable-next-line @repo/internal/react/no-class-components
var RankableTableRow = /*#__PURE__*/function (_React$Component) {
function RankableTableRow() {
var _this;
_classCallCheck(this, RankableTableRow);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, RankableTableRow, [].concat(args));
_defineProperty(_this, "innerRef", function (innerRefFn) {
return function (ref) {
innerRefFn(ref);
if (typeof _this.props.innerRef === 'function') {
_this.props.innerRef(ref);
}
};
});
return _this;
}
_inherits(RankableTableRow, _React$Component);
return _createClass(RankableTableRow, [{
key: "render",
value: function render() {
var _this2 = this;
var _this$props = this.props,
row = _this$props.row,
head = _this$props.head,
isFixedSize = _this$props.isFixedSize,
isRanking = _this$props.isRanking,
refWidth = _this$props.refWidth,
rowIndex = _this$props.rowIndex,
isRankingDisabled = _this$props.isRankingDisabled,
isHighlighted = _this$props.isHighlighted,
testId = _this$props.testId;
var cells = row.cells,
rowTestId = row.testId,
key = row.key,
isRowHighlighted = row.isHighlighted,
restRowProps = _objectWithoutProperties(row, _excluded);
var inlineStyles = inlineStylesIfRanking(isRanking, refWidth);
if (typeof key !== 'string' && !isRankingDisabled) {
throw new Error('dynamic-table: ranking is not possible because table row does not have a key. Add the key to the row or disable ranking.');
}
return /*#__PURE__*/React.createElement(Draggable, {
draggableId: key || rowIndex.toString(),
index: rowIndex,
isDragDisabled: isRankingDisabled
}, function (provided, snapshot) {
var _provided$dragHandleP;
return /*#__PURE__*/React.createElement(RankableTableBodyRow, _extends({}, restRowProps, provided.dragHandleProps, provided.draggableProps, {
/**
* `provided.dragHandleProps` provides `role="button"` which we don't want to apply to table rows.
*
* Providing `role="button"` is the RBD 13 behavior which the migration layer emulates.
* Previously we used RBD 12 which did not provide a role to the drag handle.
*/
role: undefined
// It is necessary to prevent the passing of aria-labelledby
,
"aria-labelledby": undefined,
"aria-describedby": (_provided$dragHandleP = provided.dragHandleProps) === null || _provided$dragHandleP === void 0 ? void 0 : _provided$dragHandleP['aria-describedby'],
ref: _this2.innerRef(provided.innerRef)
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
,
style: _objectSpread(_objectSpread({}, provided.draggableProps.style), inlineStyles),
isHighlighted: isHighlighted || isRowHighlighted,
isRanking: isRanking,
isRankingItem: snapshot.isDragging,
testId: rowTestId || testId && "".concat(testId, "--rankable--table--body--row")
}), cells.map(function (cell, cellIndex) {
var headCell = (head || {
cells: []
}).cells[cellIndex];
return /*#__PURE__*/React.createElement(TableCell, {
head: headCell,
cell: cell,
isRanking: isRanking,
key: cell.key || cellIndex,
isFixedSize: isFixedSize,
testId: testId
});
}));
});
}
}]);
}(React.Component); // eslint-disable-next-line import/no-anonymous-default-export
var _default_1 = withDimensions(RankableTableRow);
export default _default_1;