@wix/design-system
Version:
@wix/design-system
874 lines (873 loc) • 37.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
exports.__esModule = true;
exports["default"] = exports.DataTableHeader = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _system = require("@wix/wix-ui-icons-common/system");
var _classnames = _interopRequireDefault(require("classnames"));
var _reactWindow = require("react-window");
var _reactScrollSync = require("react-scroll-sync");
var _DataTableSt = require("./DataTable.st.css.js");
var _InfiniteScroll = _interopRequireDefault(require("../../utils/InfiniteScroll"));
var _InfoIcon = _interopRequireDefault(require("../../InfoIcon"));
var _Text = _interopRequireDefault(require("../../Text"));
var _DataTable2 = require("./DataTable.utils");
var _context = require("../../WixStyleReactMaskingProvider/context");
var _DataTableRow = _interopRequireDefault(require("./components/DataTableRow"));
var _TableFloatingScrollBarInitializer = require("./TableFloatingScrollBarInitializer");
var _TableResizeHandle = _interopRequireDefault(require("../components/TableResizeHandle"));
var _ColumnResize = require("../ColumnResize");
var _excluded = ["children"],
_excluded2 = ["content"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Table/DataTable/DataTable.jsx",
_this = void 0;
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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) { (0, _defineProperty2["default"])(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 = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(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; })(); }
var DataTableHeader = exports.DataTableHeader = function DataTableHeader(props) {
var dataHook = props.dataHook,
horizontalScroll = props.horizontalScroll,
leftShadowVisible = props.leftShadowVisible,
rightShadowVisible = props.rightShadowVisible,
stickyColumns = props.stickyColumns,
rowVerticalPadding = props.rowVerticalPadding;
var headerContainerRef = _react["default"].useRef(null);
var wrapWithHorizontalScroll = function wrapWithHorizontalScroll(table) {
return /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _classnames["default"])(_DataTableSt.classes.scrollWrapper, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _DataTableSt.classes.leftShadowVisible, !!leftShadowVisible), _DataTableSt.classes.rightShadowVisible, !!rightShadowVisible), _DataTableSt.classes.withStickyColumns, !!stickyColumns)),
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 33,
columnNumber: 5
}
}, /*#__PURE__*/_react["default"].createElement(_reactScrollSync.ScrollSyncPane, {
attachTo: headerContainerRef,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 40,
columnNumber: 7
}
}, table));
};
var table = /*#__PURE__*/_react["default"].createElement(_ColumnResize.ColumnResizeConsumer, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 45,
columnNumber: 5
}
}, function (_ref) {
var getTableWidth = _ref.getTableWidth;
return /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": dataHook,
ref: headerContainerRef,
className: (0, _classnames["default"])((0, _defineProperty2["default"])({}, _DataTableSt.classes.tableHeaderScrollContent, horizontalScroll)),
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 47,
columnNumber: 9
}
}, /*#__PURE__*/_react["default"].createElement("table", {
style: {
width: getTableWidth(props.width)
},
className: (0, _DataTableSt.st)(_DataTableSt.classes.table, {
rowVerticalPadding: rowVerticalPadding
}),
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 54,
columnNumber: 11
}
}, /*#__PURE__*/_react["default"].createElement(TableHeader, (0, _extends2["default"])({}, props, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 60,
columnNumber: 13
}
}))));
});
return horizontalScroll ? wrapWithHorizontalScroll(table) : table;
};
var DataTable = /*#__PURE__*/function (_React$Component) {
function DataTable(_props) {
var _this2;
(0, _classCallCheck2["default"])(this, DataTable);
_this2 = _callSuper(this, DataTable, [_props]);
_this2._updateScrollShadows = function () {
var onUpdateScrollShadows = _this2.props.onUpdateScrollShadows;
if (!onUpdateScrollShadows) {
return;
}
var _this2$contentRef$cur = _this2.contentRef.current,
scrollLeft = _this2$contentRef$cur.scrollLeft,
scrollWidth = _this2$contentRef$cur.scrollWidth,
clientWidth = _this2$contentRef$cur.clientWidth;
var leftShadowVisible = scrollLeft > 0;
var rightShadowVisible = scrollWidth - scrollLeft > clientWidth;
onUpdateScrollShadows(leftShadowVisible, rightShadowVisible);
};
_this2.wrapWithInfiniteScroll = function (table) {
return /*#__PURE__*/_react["default"].createElement(_InfiniteScroll["default"], {
ref: _this2.props.infiniteScrollRef,
pageStart: 0,
loadMore: _this2.loadMore,
data: _this2.props.data,
hasMore: !_this2.props.controlled ? _this2.state.currentPage < _this2.state.lastPage || _this2.props.hasMore : _this2.props.hasMore,
loader: _this2.props.loader,
useWindow: _this2.props.useWindow,
scrollElement: _this2.props.scrollElement,
initialLoad: _this2.props.initialLoad,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 182,
columnNumber: 7
}
}, table);
};
_this2.wrapWithHorizontalScroll = function (table, attachTo) {
var _this2$props = _this2.props,
leftShadowVisible = _this2$props.leftShadowVisible,
rightShadowVisible = _this2$props.rightShadowVisible,
stickyColumns = _this2$props.stickyColumns;
return /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _classnames["default"])(_this2.style.scrollWrapper, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _this2.style.leftShadowVisible, !!leftShadowVisible), _this2.style.rightShadowVisible, !!rightShadowVisible), _this2.style.withStickyColumns, !!stickyColumns)),
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 205,
columnNumber: 7
}
}, /*#__PURE__*/_react["default"].createElement(_reactScrollSync.ScrollSyncPane, {
attachTo: attachTo,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 212,
columnNumber: 9
}
}, table));
};
_this2.renderTableWithWidthContext = function (rowsToRender) {
return /*#__PURE__*/_react["default"].createElement(_ColumnResize.ColumnResizeConsumer, {
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 219,
columnNumber: 7
}
}, function (_ref2) {
var getTableWidth = _ref2.getTableWidth;
return _this2.renderTable(rowsToRender, getTableWidth);
});
};
_this2.renderTable = function (rowsToRender, getTableWidth) {
var _this2$props2 = _this2.props,
dataHook = _this2$props2.dataHook,
showLastRowDivider = _this2$props2.showLastRowDivider,
horizontalScroll = _this2$props2.horizontalScroll,
rowVerticalPadding = _this2$props2.rowVerticalPadding,
removeRowDetailsPadding = _this2$props2.removeRowDetailsPadding,
dragAndDrop = _this2$props2.dragAndDrop,
onDragStart = _this2$props2.onDragStart,
onDragEnd = _this2$props2.onDragEnd,
onDragCancel = _this2$props2.onDragCancel,
isDragAndDropDisabled = _this2$props2.isDragAndDropDisabled,
data = _this2$props2.data,
tableRef = _this2$props2.tableRef,
resizable = _this2$props2.resizable,
columns = _this2$props2.columns;
var style = {
width: getTableWidth(_this2.props.width)
};
var className = (0, _DataTableSt.st)(_DataTableSt.classes.table, {
removeRowDetailsPadding: removeRowDetailsPadding,
showLastRowDivider: showLastRowDivider,
rowVerticalPadding: rowVerticalPadding
});
var table = /*#__PURE__*/_react["default"].createElement("table", {
id: _this2.props.id,
style: style,
className: className,
ref: tableRef,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 251,
columnNumber: 7
}
}, !_this2.props.hideHeader && /*#__PURE__*/_react["default"].createElement(TableHeader, (0, _extends2["default"])({}, _this2.props, {
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 257,
columnNumber: 36
}
})), _this2.renderBody(rowsToRender));
if (dragAndDrop) {
var DroppableTableContext = dragAndDrop.DroppableTableContext;
table = /*#__PURE__*/_react["default"].createElement(DroppableTableContext, {
items: data,
onDragStart: onDragStart,
onDragEnd: onDragEnd,
onDragCancel: onDragCancel,
isDragAndDropDisabled: isDragAndDropDisabled,
horizontalScroll: horizontalScroll,
className: className,
style: style,
renderRow: _this2.renderRowWithMaskingClassNames,
renderTableContainer: function renderTableContainer(table) {
var child = /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _classnames["default"])((0, _defineProperty2["default"])({}, _DataTableSt.classes.tableHeaderScrollContent, horizontalScroll)),
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 278,
columnNumber: 15
}
}, table);
if (horizontalScroll) {
child = _this2.wrapWithHorizontalScroll(child);
}
return child;
},
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 266,
columnNumber: 9
}
}, table);
}
table = horizontalScroll ? /*#__PURE__*/_react["default"].createElement(_TableFloatingScrollBarInitializer.TableFloatingScrollBarInitializer, {
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 300,
columnNumber: 7
}
}, table) : table;
table = /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
"data-hook": dataHook
}, horizontalScroll ? {
className: _DataTableSt.classes.tableBodyScrollContent,
ref: _this2.contentRef,
onScroll: _this2._updateScrollShadows
} : undefined, {
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 308,
columnNumber: 7
}
}), table);
return table;
};
_this2.renderBody = function (rows) {
var _this2$props$BodyElem = _this2.props.BodyElementType,
BodyElementType = _this2$props$BodyElem === void 0 ? 'tbody' : _this2$props$BodyElem;
return /*#__PURE__*/_react["default"].createElement(_context.WixStyleReactMaskingContext.Consumer, {
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 328,
columnNumber: 7
}
}, function (_ref3) {
var maskingClassNames = _ref3.maskingClassNames;
return /*#__PURE__*/_react["default"].createElement(BodyElementType, {
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 330,
columnNumber: 11
}
}, rows.map(function (rowData, index) {
return _this2.renderRow({
rowData: rowData,
rowNum: index,
maskingClassNames: maskingClassNames
});
}));
});
};
_this2.renderRowWithMaskingClassNames = function (_ref4) {
var rowData = _ref4.rowData,
rowNum = _ref4.rowNum,
style = _ref4.style,
isDragOverlay = _ref4.isDragOverlay;
return /*#__PURE__*/_react["default"].createElement(_context.WixStyleReactMaskingContext.Consumer, {
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 346,
columnNumber: 5
}
}, function (_ref5) {
var maskingClassNames = _ref5.maskingClassNames;
return _this2.renderRow({
rowData: rowData,
rowNum: rowNum,
style: style,
maskingClassNames: maskingClassNames,
isDragOverlay: isDragOverlay
});
});
};
_this2.renderRow = function (rowProps) {
return /*#__PURE__*/_react["default"].createElement(_DataTableRow["default"], (0, _extends2["default"])({
key: rowProps.rowNum
}, rowProps, _this2.props, {
toggleRowDetails: _this2.toggleRowDetails,
showDetails: !!_this2.state.selectedRows.get(rowProps.rowData),
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 361,
columnNumber: 7
}
}));
};
_this2.calcLastPage = function (_ref6) {
var data = _ref6.data,
itemsPerPage = _ref6.itemsPerPage;
return Math.ceil(data.length / itemsPerPage) - 1;
};
_this2.loadMore = function () {
if (!_this2.props.controlled && _this2.state.currentPage < _this2.state.lastPage) {
_this2.setState({
currentPage: _this2.state.currentPage + 1
});
} else {
_this2.props.loadMore && _this2.props.loadMore();
}
};
_this2.toggleRowDetails = function (selectedRow) {
var selectedRows = _this2.state.selectedRows;
var allowMultipleRowDetails = _this2.props.allowMultiDetailsExpansion && !_this2.props.virtualized;
var newSelectedRows = new Map([].concat((0, _toConsumableArray2["default"])(allowMultipleRowDetails ? (0, _toConsumableArray2["default"])(selectedRows) : []), [[selectedRow, !selectedRows.get(selectedRow)]]));
_this2.setState({
selectedRows: newSelectedRows
});
};
_this2.renderVirtualizedRow = function (_ref7) {
var data = _ref7.data,
index = _ref7.index,
style = _ref7.style;
return _this2.renderRow({
rowData: data.data[index],
rowNum: index,
style: style
});
};
_this2.renderVirtualizedMemoizedRow = /*#__PURE__*/(0, _react.memo)(_this2.renderVirtualizedRow, _DataTable2.virtualRowsAreEqual);
_this2.getVirtualRowHeight = function () {
return _this2.props.virtualizedLineHeight;
};
_this2.virtualizedTableElementWithRefForward = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
return /*#__PURE__*/_react["default"].createElement(_ColumnResize.ColumnResizeConsumer, {
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 410,
columnNumber: 5
}
}, function (_ref8) {
var getTableWidth = _ref8.getTableWidth;
return _this2.renderVirtualizedTableElement(_objectSpread(_objectSpread({}, props), {}, {
ref: ref
}), getTableWidth);
});
});
_this2.renderVirtualizedTableElement = function (_ref9, getTableWidth) {
var _rest$style;
var children = _ref9.children,
rest = (0, _objectWithoutProperties2["default"])(_ref9, _excluded);
var _this2$props3 = _this2.props,
dragAndDrop = _this2$props3.dragAndDrop,
data = _this2$props3.data,
onDragStart = _this2$props3.onDragStart,
onDragEnd = _this2$props3.onDragEnd,
onDragCancel = _this2$props3.onDragCancel,
isDragAndDropDisabled = _this2$props3.isDragAndDropDisabled,
horizontalScroll = _this2$props3.horizontalScroll,
resizable = _this2$props3.resizable,
columns = _this2$props3.columns;
var tableStyle = _objectSpread(_objectSpread({}, rest.style), {}, {
width: getTableWidth(((_rest$style = rest.style) == null ? void 0 : _rest$style.width) || '100%')
});
var table = /*#__PURE__*/_react["default"].createElement("table", (0, _extends2["default"])({}, rest, {
style: tableStyle,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 436,
columnNumber: 7
}
}), /*#__PURE__*/_react["default"].createElement(TableHeader, (0, _extends2["default"])({}, _this2.props, {
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 437,
columnNumber: 9
}
})), children);
if (dragAndDrop) {
var DroppableTableContext = dragAndDrop.DroppableTableContext;
table = /*#__PURE__*/_react["default"].createElement(DroppableTableContext, {
items: data,
onDragStart: onDragStart,
onDragEnd: onDragEnd,
onDragCancel: onDragCancel,
isDragAndDropDisabled: isDragAndDropDisabled,
horizontalScroll: horizontalScroll,
className: (0, _classnames["default"])(_this2.style.table, _this2.style.virtualized),
renderRow: _this2.renderRow,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 446,
columnNumber: 9
}
}, table);
}
return table;
};
_this2.renderVirtualizedTable = function () {
var _this2$props4 = _this2.props,
dataHook = _this2$props4.dataHook,
data = _this2$props4.data,
virtualizedTableHeight = _this2$props4.virtualizedTableHeight,
virtualizedListRef = _this2$props4.virtualizedListRef;
return /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": dataHook,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 469,
columnNumber: 7
}
}, /*#__PURE__*/_react["default"].createElement(_reactWindow.VariableSizeList, {
ref: virtualizedListRef,
className: (0, _classnames["default"])(_this2.style.table, _this2.style.virtualized),
height: virtualizedTableHeight,
itemCount: data.length,
itemData: _this2.props,
width: "100%",
itemSize: _this2.getVirtualRowHeight,
outerElementType: _this2.virtualizedTableElementWithRefForward,
innerElementType: "tbody",
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 470,
columnNumber: 9
}
}, _this2.renderVirtualizedMemoizedRow));
};
var state = {
selectedRows: new Map()
};
if (!_props.controlled && _props.infiniteScroll) {
state = _objectSpread(_objectSpread({}, state), _this2.createInitialScrollingState(_props));
}
_this2.state = state;
_this2.contentRef = /*#__PURE__*/_react["default"].createRef();
if (_props.horizontalScroll && 'ResizeObserver' in window) {
_this2.contentResizeObserver = new ResizeObserver(_this2._updateScrollShadows);
}
return _this2;
}
(0, _inherits2["default"])(DataTable, _React$Component);
return (0, _createClass2["default"])(DataTable, [{
key: "componentDidMount",
value: function componentDidMount() {
var contentResizeObserver = this.contentResizeObserver,
contentRef = this.contentRef;
if (contentResizeObserver && contentRef.current) {
contentResizeObserver.observe(contentRef.current);
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
var contentResizeObserver = this.contentResizeObserver,
contentRef = this.contentRef;
if (contentResizeObserver && contentRef.current) {
contentResizeObserver.unobserve(contentRef.current);
}
}
}, {
key: "style",
get: function get() {
return _DataTableSt.classes;
}
}, {
key: "UNSAFE_componentWillReceiveProps",
value: function UNSAFE_componentWillReceiveProps(nextProps) {
var isLoadingMore = false;
if (!this.props.controlled && this.props.infiniteScroll && nextProps.data !== this.props.data) {
if (nextProps.data instanceof Array && this.props.data instanceof Array) {
isLoadingMore = true;
var lastPage = this.calcLastPage(nextProps);
var currentPage = this.state.currentPage < lastPage ? this.state.currentPage + 1 : this.state.currentPage;
this.setState({
lastPage: lastPage,
currentPage: currentPage
});
}
if (!isLoadingMore) {
this.setState(this.createInitialScrollingState(nextProps));
}
}
}
}, {
key: "createInitialScrollingState",
value: function createInitialScrollingState(props) {
return {
currentPage: 0,
lastPage: this.calcLastPage(props)
};
}
}, {
key: "render",
value: function render() {
var _this$props = this.props,
virtualized = _this$props.virtualized,
data = _this$props.data,
showHeaderWhenEmpty = _this$props.showHeaderWhenEmpty,
horizontalScroll = _this$props.horizontalScroll,
infiniteScroll = _this$props.infiniteScroll,
itemsPerPage = _this$props.itemsPerPage,
controlled = _this$props.controlled;
if (!data.length && !showHeaderWhenEmpty) {
return null;
}
if (virtualized) {
return this.renderVirtualizedTable(data);
}
var rowsToRender = !controlled && infiniteScroll ? data.slice(0, (this.state.currentPage + 1) * itemsPerPage) : data;
var table = this.renderTableWithWidthContext(rowsToRender);
if (horizontalScroll) {
table = this.wrapWithHorizontalScroll(table, this.contentRef);
}
if (infiniteScroll) {
table = this.wrapWithInfiniteScroll(table);
}
return table;
}
}]);
}(_react["default"].Component);
var TableHeader = /*#__PURE__*/function (_Component) {
function TableHeader() {
var _this3;
(0, _classCallCheck2["default"])(this, TableHeader);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this3 = _callSuper(this, TableHeader, [].concat(args));
_this3.renderSortingArrow = function (sortDescending, colNum) {
if (sortDescending === undefined) {
return null;
}
var Arrow = sortDescending ? _system.SortByArrowDown : _system.SortByArrowUp;
return /*#__PURE__*/_react["default"].createElement("span", {
"data-hook": "".concat(colNum, "_title"),
className: _this3.style.sortArrow,
__self: _this3,
__source: {
fileName: _jsxFileName,
lineNumber: 501,
columnNumber: 7
}
}, /*#__PURE__*/_react["default"].createElement(Arrow, {
height: 12,
"data-hook": sortDescending ? 'sort_arrow_dec' : 'sort_arrow_asc',
__self: _this3,
__source: {
fileName: _jsxFileName,
lineNumber: 502,
columnNumber: 9
}
}));
};
_this3.renderInfoTooltip = function (tooltipProps, colNum) {
if (tooltipProps === undefined) {
return null;
}
var content = tooltipProps.content,
otherTooltipProps = (0, _objectWithoutProperties2["default"])(tooltipProps, _excluded2);
return /*#__PURE__*/_react["default"].createElement(_InfoIcon["default"], {
content: content,
tooltipProps: otherTooltipProps,
dataHook: "".concat(colNum, "_info_tooltip"),
className: _this3.style.infoTooltipWrapper,
__self: _this3,
__source: {
fileName: _jsxFileName,
lineNumber: 517,
columnNumber: 7
}
});
};
_this3.renderTitleSuffix = function (titleSuffix, colNum) {
if (!titleSuffix) {
return null;
}
return /*#__PURE__*/_react["default"].createElement("span", {
"data-hook": "".concat(colNum, "_title_suffix"),
className: _this3.style.titleSuffix,
onClick: function onClick(e) {
return e.stopPropagation();
},
onKeyDown: function onKeyDown(e) {
return e.stopPropagation();
},
role: "presentation",
__self: _this3,
__source: {
fileName: _jsxFileName,
lineNumber: 532,
columnNumber: 7
}
}, titleSuffix);
};
_this3.renderHeaderCell = function (column, colNum, resizeHelpers) {
var _column$resizeProps, _column$key;
var _this3$props = _this3.props,
stickyColumns = _this3$props.stickyColumns,
columns = _this3$props.columns,
isApplyColumnWidthStyle = _this3$props.isApplyColumnWidthStyle,
isTableResizable = _this3$props.resizable;
var resizeColumn = resizeHelpers.resizeColumn,
startColumnResize = resizeHelpers.startColumnResize,
endColumnResize = resizeHelpers.endColumnResize,
getEffectiveColumnWidth = resizeHelpers.getEffectiveColumnWidth,
getStickyColumnStyle = resizeHelpers.getStickyColumnStyle;
var _ref0 = (_column$resizeProps = column.resizeProps) !== null && _column$resizeProps !== void 0 ? _column$resizeProps : {},
id = _ref0.id,
disabled = _ref0.disabled,
hideDisabledResizeHandle = _ref0.hideDisabledResizeHandle;
var isSticky = colNum < stickyColumns;
var isColumnResizable = isTableResizable && id !== undefined;
var isLastColumn = colNum === columns.length - 1;
var shouldShowHandle = isColumnResizable && !(disabled && hideDisabledResizeHandle) && !isLastColumn;
var stickyColumnStyle = isSticky ? getStickyColumnStyle(columns, column) : undefined;
var currentWidth = getEffectiveColumnWidth(column);
var widthStyle = isApplyColumnWidthStyle ? currentWidth ? {
width: currentWidth
} : {} : {
width: currentWidth
};
var style = _objectSpread(_objectSpread(_objectSpread({}, isApplyColumnWidthStyle && typeof column.style !== 'function' ? column.style : undefined), widthStyle), {}, {
padding: _this3.props.thPadding,
height: _this3.props.thHeight,
fontSize: _this3.props.thFontSize,
border: _this3.props.thBorder,
boxShadow: _this3.props.thBoxShadow,
color: _this3.props.thColor,
opacity: _this3.props.thOpacity,
letterSpacing: _this3.props.thLetterSpacing,
cursor: column.sortable === undefined ? 'auto' : 'pointer',
position: isColumnResizable && !isSticky ? 'relative' : undefined
}, stickyColumnStyle);
var optionalHeaderCellProps = {};
var hasTitleSuffix = !!column.titleSuffix;
var Element = column.sortable && !hasTitleSuffix ? 'button' : 'div';
if (column.sortable) {
optionalHeaderCellProps.onClick = function () {
return _this3.props.onSortClick && _this3.props.onSortClick(column, colNum);
};
}
var elementProps = column.sortable ? hasTitleSuffix ? {
role: 'button',
tabIndex: 0,
onKeyDown: function onKeyDown(e) {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
_this3.props.onSortClick == null || _this3.props.onSortClick(column, colNum);
}
}
} : {
type: 'button'
} : undefined;
return /*#__PURE__*/_react["default"].createElement("th", (0, _extends2["default"])({
key: (_column$key = column.key) !== null && _column$key !== void 0 ? _column$key : colNum,
"data-hook": column.dataHook,
style: style,
"data-sticky": isSticky,
"aria-sort": column.sortable ? column.sortDescending === true ? 'descending' : column.sortDescending === false ? 'ascending' : 'none' : undefined,
className: (0, _classnames["default"])(_this3.style.thText, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _this3.style.thSkinStandard, !_this3.props.skin || _this3.props.skin === 'standard'), _this3.style.thSkinNeutral, _this3.props.skin === 'neutral'), _this3.style.sticky, isSticky), _this3.style.lastSticky, colNum === stickyColumns - 1), _this3.style.stickyActionCell, column.stickyActionCell))
}, optionalHeaderCellProps, {
__self: _this3,
__source: {
fileName: _jsxFileName,
lineNumber: 624,
columnNumber: 7
}
}), /*#__PURE__*/_react["default"].createElement(Element, (0, _extends2["default"])({}, elementProps, {
className: (0, _classnames["default"])(_this3.style.thContainer, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _this3.style.alignStart, !column.align || column.align === 'start'), _this3.style.alignCenter, column.align === 'center'), _this3.style.alignEnd, column.align === 'end')),
__self: _this3,
__source: {
fileName: _jsxFileName,
lineNumber: 648,
columnNumber: 9
}
}), typeof column.title === 'string' && column.key !== 'bulk-selection-cell' ? /*#__PURE__*/_react["default"].createElement(_Text["default"], {
className: _this3.style.titleText,
ellipsis: true,
showTooltip: true,
size: "small",
weight: "thin",
__self: _this3,
__source: {
fileName: _jsxFileName,
lineNumber: 658,
columnNumber: 13
}
}, column.title) : column.title, _this3.renderSortingArrow(column.sortDescending, colNum), _this3.renderInfoTooltip(column.infoTooltipProps, colNum), _this3.renderTitleSuffix(column.titleSuffix, colNum)), shouldShowHandle && /*#__PURE__*/_react["default"].createElement(_TableResizeHandle["default"], {
columnId: id,
currentWidth: currentWidth,
onResize: resizeColumn,
onResizeStart: startColumnResize,
onResizeEnd: endColumnResize,
dataHook: "table-resize-handle",
disabled: disabled,
skin: _this3.props.skin,
__self: _this3,
__source: {
fileName: _jsxFileName,
lineNumber: 675,
columnNumber: 11
}
}));
};
return _this3;
}
(0, _inherits2["default"])(TableHeader, _Component);
return (0, _createClass2["default"])(TableHeader, [{
key: "style",
get: function get() {
return _DataTableSt.classes;
}
}, {
key: "render",
value: function render() {
var _this4 = this;
var _this$props2 = this.props,
columns = _this$props2.columns,
dragAndDrop = _this$props2.dragAndDrop,
isDragAndDropDisabled = _this$props2.isDragAndDropDisabled,
headerRowClass = _this$props2.headerRowClass,
headerClass = _this$props2.headerClass;
return /*#__PURE__*/_react["default"].createElement(_ColumnResize.ColumnResizeConsumer, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 700,
columnNumber: 7
}
}, function (_ref1) {
var getEffectiveColumnWidth = _ref1.getEffectiveColumnWidth,
resizeColumn = _ref1.resizeColumn,
startColumnResize = _ref1.startColumnResize,
endColumnResize = _ref1.endColumnResize,
getStickyColumnStyle = _ref1.getStickyColumnStyle;
return /*#__PURE__*/_react["default"].createElement("thead", {
style: {
display: _this4.props.hideHeaderAccessible ? 'none' : undefined
},
className: (0, _classnames["default"])(headerClass),
__self: _this4,
__source: {
fileName: _jsxFileName,
lineNumber: 708,
columnNumber: 11
}
}, /*#__PURE__*/_react["default"].createElement("tr", {
className: (0, _classnames["default"])(headerRowClass),
__self: _this4,
__source: {
fileName: _jsxFileName,
lineNumber: 714,
columnNumber: 13
}
}, columns.map(function (column, colNum) {
var resizeHelpers = {
getEffectiveColumnWidth: getEffectiveColumnWidth,
resizeColumn: resizeColumn,
startColumnResize: startColumnResize,
endColumnResize: endColumnResize,
getStickyColumnStyle: getStickyColumnStyle
};
return _this4.renderHeaderCell(column, colNum, resizeHelpers);
})));
});
}
}]);
}(_react.Component);
function validateData(props, propName) {
if (props[propName]) {
if (props[propName].constructor && props[propName].constructor.name && props[propName].constructor.name.toLowerCase().indexOf('array') > -1) {
return null;
} else {
return Error('Data element must be an array type');
}
}
return null;
}
DataTable.defaultProps = {
data: [],
columns: [],
selectedRowsIds: [],
isRowSelected: null,
showHeaderWhenEmpty: false,
infiniteScroll: false,
itemsPerPage: 20,
width: '100%',
loadMore: null,
hasMore: false,
initialLoad: true,
loader: /*#__PURE__*/_react["default"].createElement("div", {
className: "loader",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 760,
columnNumber: 11
}
}, "Loading ..."),
scrollElement: null,
useWindow: true,
showLastRowDivider: true,
virtualizedLineHeight: 60,
skin: 'standard',
horizontalScroll: false,
stickyColumns: 0,
isRowDisabled: function isRowDisabled() {
return false;
},
rowVerticalPadding: 'small',
removeRowDetailsPadding: false,
dragAndDrop: null
};
DataTable.displayName = 'DataTable';
var _default = exports["default"] = DataTable;