@wix/design-system
Version:
@wix/design-system
346 lines (342 loc) • 16.5 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
exports.__esModule = true;
exports.Table = void 0;
exports.createColumns = createColumns;
exports.getDataTableProps = getDataTableProps;
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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _react = _interopRequireDefault(require("react"));
var _defaultTo = _interopRequireDefault(require("lodash/defaultTo"));
var _classnames = _interopRequireDefault(require("classnames"));
var _reactScrollSync = require("react-scroll-sync");
var _TableSt = require("./Table.st.css.js");
var _DataTable = _interopRequireDefault(require("./DataTable"));
var dataTableRowStyle = _interopRequireWildcard(require("./DataTable/components/DataTableRow.st.css.js"));
var _Checkbox = _interopRequireDefault(require("../Checkbox"));
var _TableContext = require("./TableContext");
var _BulkSelection = require("./BulkSelection");
var _ColumnResize = require("./ColumnResize");
var dataTableRowVirtualStyle = _interopRequireWildcard(require("./DataTable/components/DataTableRowVirtual.st.css.js"));
var _components = require("./components");
var _RowNumberCell = require("./components/RowNumberCell");
var _FloatingScrollBarContext = require("./FloatingScrollBar/FloatingScrollBarContext");
var _excluded = ["showSelection", "onSelectionChanged", "onSelectionStarted", "dataHook"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Table/Table.jsx";
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 _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; })(); }
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; }
var hasUnselectablesSymbol = Symbol('hasUnselectables');
function createColumns(_ref2) {
var _this = this;
var tableProps = _ref2.tableProps,
bulkSelectionContext = _ref2.bulkSelectionContext;
var dragAndDrop = tableProps.dragAndDrop,
isDragAndDropDisabled = tableProps.isDragAndDropDisabled;
var includeDragHandleColumn = dragAndDrop != null && dragAndDrop.createDragHandleColumn != null && !isDragAndDropDisabled;
var createCheckboxColumn = function createCheckboxColumn(_ref3) {
var toggleSelectionById = _ref3.toggleSelectionById,
isSelected = _ref3.isSelected,
selectionDisabled = _ref3.selectionDisabled;
var isRowSelectionDisabled = function isRowSelectionDisabled(rowData) {
return selectionDisabled === true || typeof selectionDisabled === 'function' && selectionDisabled(rowData);
};
return {
key: 'bulk-selection-cell',
title: tableProps.hideBulkSelectionCheckbox ? '' : /*#__PURE__*/_react["default"].createElement(_components.TableBulkSelectionCheckbox, {
dataHook: "table-select",
ref: tableProps.bulkSelectionCheckboxRef,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 50,
columnNumber: 9
}
}),
dataHook: 'bulk-selection-cell',
onCellClick: function onCellClick(column, row, rowNum, event) {
if (row.unselectable) {
return;
}
event.stopPropagation();
if (isRowSelectionDisabled(row)) {
return;
}
var id = (0, _defaultTo["default"])(row.id, rowNum);
toggleSelectionById(id, 'Checkbox');
},
render: function render(row, rowNum) {
var id = (0, _defaultTo["default"])(row.id, rowNum);
var tooltipContent = row.checkboxTooltipContent;
var checked = !row.unselectable && isSelected(id);
var disabled = row.unselectable || isRowSelectionDisabled(row);
if (tableProps.showRowNumbers) {
return /*#__PURE__*/_react["default"].createElement(_RowNumberCell.RowNumberCell, {
rowNum: rowNum,
checked: checked,
disabled: disabled,
tooltipContent: tooltipContent,
dataHook: "row-select",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 78,
columnNumber: 13
}
});
}
return row.unselectable ? null : /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
disabled: isRowSelectionDisabled(row),
dataHook: "row-select",
checked: isSelected(id),
tooltipProps: {
disabled: !tooltipContent
},
tooltipContent: tooltipContent,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 89,
columnNumber: 11
}
});
},
width: '12px',
style: function style(_, row) {
return row.unselectable ? undefined : {
cursor: 'pointer'
};
}
};
};
var checkboxColumn = tableProps.showSelection ? createCheckboxColumn(bulkSelectionContext) : null;
var columns = [].concat((0, _toConsumableArray2["default"])(includeDragHandleColumn ? [dragAndDrop.createDragHandleColumn(tableProps)] : []), (0, _toConsumableArray2["default"])(checkboxColumn ? [checkboxColumn] : []), (0, _toConsumableArray2["default"])(tableProps.columns));
// Apply different column width when checkbox column is the last sticky column
// (looks weird otherwise when stickied with default 12px width).
if (checkboxColumn && !tableProps.showRowNumbers && columns.indexOf(checkboxColumn) + 1 === tableProps.stickyColumns) {
checkboxColumn.width = '34px';
}
return columns;
}
function getDataTableProps(tableProps) {
var showSelection = tableProps.showSelection,
onSelectionChanged = tableProps.onSelectionChanged,
onSelectionStarted = tableProps.onSelectionStarted,
dataHook = tableProps.dataHook,
props = (0, _objectWithoutProperties2["default"])(tableProps, _excluded);
return _objectSpread(_objectSpread({}, props), {}, {
rowClass: (0, _classnames["default"])(tableProps.rowClass, _TableSt.classes.tableRow)
});
}
/**
* Table is a composite component that allows adding SelectionColumn, Toolbar (on top of the TitleBar).
* It is a context provider, and thus the Table.Consumer, Table.TitleBar and Table.Content can be rendered separately.
*/
var Table = exports.Table = /*#__PURE__*/function (_React$Component) {
function Table() {
var _this2;
(0, _classCallCheck2["default"])(this, Table);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this2 = _callSuper(this, Table, [].concat(args));
_this2.state = {
leftShadowVisible: false,
rightShadowVisible: false
};
_this2.tableRef = /*#__PURE__*/_react["default"].createRef();
_this2.scrollElementRef = /*#__PURE__*/_react["default"].createRef();
_this2._handleUpdateScrollShadows = function (leftShadowVisible, rightShadowVisible) {
if (leftShadowVisible !== _this2.state.leftShadowVisible) {
_this2.setState({
leftShadowVisible: leftShadowVisible
});
}
if (rightShadowVisible !== _this2.state.rightShadowVisible) {
_this2.setState({
rightShadowVisible: rightShadowVisible
});
}
};
return _this2;
}
(0, _inherits2["default"])(Table, _React$Component);
return (0, _createClass2["default"])(Table, [{
key: "shouldComponentUpdate",
value: function shouldComponentUpdate() {
// Table is not really a PureComponent
return true;
}
}, {
key: "setSelectedIds",
value: function setSelectedIds(selectedIds) {
this.bulkSelection.setSelectedIds(selectedIds);
}
}, {
key: "renderChildren",
value: function renderChildren() {
var _this$props = this.props,
children = _this$props.children,
withWrapper = _this$props.withWrapper,
dataHook = _this$props.dataHook;
return withWrapper ? /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": dataHook,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 182,
columnNumber: 26
}
}, children) : children;
}
}, {
key: "render",
value: function render() {
var _this3 = this;
var _this$props2 = this.props,
data = _this$props2.data,
selectedIds = _this$props2.selectedIds,
showSelection = _this$props2.showSelection,
deselectRowsByDefault = _this$props2.deselectRowsByDefault,
infiniteScroll = _this$props2.infiniteScroll,
totalSelectableCount = _this$props2.totalSelectableCount,
onSelectionChanged = _this$props2.onSelectionChanged,
onSelectionStarted = _this$props2.onSelectionStarted,
hasMore = _this$props2.hasMore,
horizontalScroll = _this$props2.horizontalScroll,
resizable = _this$props2.resizable,
resizeProps = _this$props2.resizeProps,
selectionDisabled = _this$props2.selectionDisabled,
dragAndDrop = _this$props2.dragAndDrop,
onDragEnd = _this$props2.onDragEnd,
scrollElement = _this$props2.scrollElement;
this.scrollElementRef.current = typeof HTMLElement !== 'undefined' && scrollElement instanceof HTMLElement ? scrollElement : scrollElement == null ? void 0 : scrollElement.current;
var hasUnselectables = null;
var allIds = data.map(function (rowData, rowIndex) {
return rowData.unselectable || typeof selectionDisabled === 'function' && selectionDisabled(rowData) ? hasUnselectables = hasUnselectablesSymbol : (0, _defaultTo["default"])(rowData.id, rowIndex);
});
if (hasUnselectables === hasUnselectablesSymbol) {
allIds = allIds.filter(function (rowId) {
return rowId !== hasUnselectablesSymbol;
});
}
var _this$state = this.state,
leftShadowVisible = _this$state.leftShadowVisible,
rightShadowVisible = _this$state.rightShadowVisible;
var isTableResizable = resizable === true && horizontalScroll === true;
var contextValue = _objectSpread(_objectSpread({}, this.props), {}, {
leftShadowVisible: leftShadowVisible,
rightShadowVisible: rightShadowVisible,
onUpdateScrollShadows: this._handleUpdateScrollShadows,
tableRef: this.tableRef
});
var table = this.renderChildren();
table = horizontalScroll ? /*#__PURE__*/_react["default"].createElement(_FloatingScrollBarContext.FloatingScrollBarContextProvider, {
scrollableContentRef: this.tableRef,
viewportRef: this.props.viewportRef,
scrollElementRef: this.scrollElementRef,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 237,
columnNumber: 7
}
}, table) : table;
table = /*#__PURE__*/_react["default"].createElement(_TableContext.TableContext.Provider, {
value: contextValue,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 249,
columnNumber: 7
}
}, /*#__PURE__*/_react["default"].createElement(_ColumnResize.ColumnResize, {
columns: this.props.columns,
onColumnResize: resizeProps == null ? void 0 : resizeProps.onColumnResize,
onColumnResizeStart: resizeProps == null ? void 0 : resizeProps.onColumnResizeStart,
onColumnResizeEnd: resizeProps == null ? void 0 : resizeProps.onColumnResizeEnd,
isTableResizable: isTableResizable,
minColumnWidth: resizeProps == null ? void 0 : resizeProps.minColumnWidth,
maxColumnWidth: resizeProps == null ? void 0 : resizeProps.maxColumnWidth,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 250,
columnNumber: 9
}
}, showSelection ? /*#__PURE__*/_react["default"].createElement(_BulkSelection.BulkSelection, {
ref: function ref(_ref) {
_this3.bulkSelection = _ref;
},
selectedIds: selectedIds,
deselectRowsByDefault: deselectRowsByDefault,
selectionDisabled: selectionDisabled,
hasMoreInBulkSelection: infiniteScroll && Boolean(totalSelectableCount) && hasMore,
totalCount: totalSelectableCount,
allIds: allIds,
onSelectionChanged: onSelectionChanged,
onSelectionStarted: onSelectionStarted,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 260,
columnNumber: 13
}
}, table) : table));
table = horizontalScroll ? /*#__PURE__*/_react["default"].createElement(_reactScrollSync.ScrollSync, {
proportional: false,
horizontal: true,
vertical: false,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 285,
columnNumber: 7
}
}, table) : table;
return table;
}
}]);
}(_react["default"].Component);
Table.ToolbarContainer = _components.TableToolbarContainer;
Table.Titlebar = _components.TableTitleBar;
Table.Content = _components.TableContent;
Table.SubToolbar = _components.TableSubToolbar;
Table.EmptyState = _components.TableEmptyState;
Table.BulkSelectionCheckbox = _components.TableBulkSelectionCheckbox;
Table.displayName = 'Table';
Table.dataTableRowVirtualStyle = dataTableRowVirtualStyle;
Table.dataTableRowStyle = dataTableRowStyle;
Table.defaultProps = _objectSpread(_objectSpread({}, _DataTable["default"].defaultProps), {}, {
showSelection: false,
showRowNumbers: false,
hideBulkSelectionCheckbox: false,
children: [/*#__PURE__*/_react["default"].createElement(Table.Content, {
key: "content",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 306,
columnNumber: 14
}
})],
withWrapper: true,
showLastRowDivider: false,
horizontalScroll: false,
stickyColumns: 0,
isRowDisabled: function isRowDisabled() {
return false;
},
deselectRowsByDefault: false,
resizable: false
});
// export default Table;