wix-style-react
Version:
wix-style-react
411 lines (407 loc) • 21.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.Table = void 0;
exports.createColumns = createColumns;
exports.getDataTableProps = getDataTableProps;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _defaultTo = _interopRequireDefault(require("lodash/defaultTo"));
var _classnames = _interopRequireDefault(require("classnames"));
var _reactScrollSync = require("react-scroll-sync");
var _TableSt = require("./Table.st.css");
var _DataTable = _interopRequireDefault(require("./DataTable"));
var _Checkbox = _interopRequireDefault(require("../Checkbox"));
var _TableContext = require("./TableContext");
var _BulkSelection = require("./BulkSelection");
var _TooltipCommon = require("../common/PropTypes/TooltipCommon");
var dataTableRowVirtualStyle = _interopRequireWildcard(require("./DataTable/components/DataTableRowVirtual.st.css"));
var _components = require("./components");
var _excluded = ["showSelection", "onSelectionChanged", "onSelectionStarted", "dataHook"];
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/Table/Table.js";
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; }
var hasUnselectablesSymbol = Symbol('hasUnselectables');
function createColumns(_ref2) {
var {
tableProps,
bulkSelectionContext
} = _ref2;
var {
dragAndDrop,
isDragAndDropDisabled
} = tableProps;
var includeDragHandleColumn = dragAndDrop != null && dragAndDrop.createDragHandleColumn != null && !isDragAndDropDisabled;
var createCheckboxColumn = _ref3 => {
var {
toggleSelectionById,
isSelected,
selectionDisabled
} = _ref3;
var isRowSelectionDisabled = rowData => selectionDisabled === true || typeof selectionDisabled === 'function' && selectionDisabled(rowData);
return {
key: 'bulk-selection-cell',
title: tableProps.hideBulkSelectionCheckbox ? '' : /*#__PURE__*/_react.default.createElement(_components.TableBulkSelectionCheckbox, {
dataHook: "table-select",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 48,
columnNumber: 9
}
}),
dataHook: 'bulk-selection-cell',
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: (row, rowNum) => {
var id = (0, _defaultTo.default)(row.id, rowNum);
var tooltipContent = row.checkboxTooltipContent;
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: 70,
columnNumber: 11
}
});
},
width: '12px',
style: (_, row) => row.unselectable ? undefined : {
cursor: 'pointer'
}
};
};
var checkboxColumn = tableProps.showSelection ? createCheckboxColumn(bulkSelectionContext) : null;
var columns = [...(includeDragHandleColumn ? [dragAndDrop.createDragHandleColumn(tableProps)] : []), ...(checkboxColumn ? [checkboxColumn] : []), ...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 && columns.indexOf(checkboxColumn) + 1 === tableProps.stickyColumns) {
checkboxColumn.width = '34px';
}
return columns;
}
function getDataTableProps(tableProps) {
/* eslint-disable no-unused-vars */
var {
showSelection,
onSelectionChanged,
onSelectionStarted,
dataHook
} = tableProps,
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.
*/
class Table extends _react.default.Component {
constructor() {
super(...arguments);
this.state = {
leftShadowVisible: false,
rightShadowVisible: false
};
this._handleUpdateScrollShadows = (leftShadowVisible, rightShadowVisible) => {
if (leftShadowVisible !== this.state.leftShadowVisible) {
this.setState({
leftShadowVisible
});
}
if (rightShadowVisible !== this.state.rightShadowVisible) {
this.setState({
rightShadowVisible
});
}
};
}
shouldComponentUpdate() {
// Table is not really a PureComponent
return true;
}
setSelectedIds(selectedIds) {
this.bulkSelection.setSelectedIds(selectedIds);
}
renderChildren() {
var {
children,
withWrapper,
dataHook
} = this.props;
return withWrapper ? /*#__PURE__*/_react.default.createElement("div", {
"data-hook": dataHook,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 160,
columnNumber: 26
}
}, children) : children;
}
render() {
var {
data,
selectedIds,
showSelection,
deselectRowsByDefault,
infiniteScroll,
totalSelectableCount,
onSelectionChanged,
onSelectionStarted,
hasMore,
horizontalScroll,
selectionDisabled,
dragAndDrop,
onDragEnd
} = this.props;
var hasUnselectables = null;
var allIds = data.map((rowData, rowIndex) => rowData.unselectable || typeof selectionDisabled === 'function' && selectionDisabled(rowData) ? hasUnselectables = hasUnselectablesSymbol : (0, _defaultTo.default)(rowData.id, rowIndex));
if (hasUnselectables === hasUnselectablesSymbol) {
allIds = allIds.filter(rowId => rowId !== hasUnselectablesSymbol);
}
var {
leftShadowVisible,
rightShadowVisible
} = this.state;
var contextValue = _objectSpread(_objectSpread({}, this.props), {}, {
leftShadowVisible,
rightShadowVisible,
onUpdateScrollShadows: this._handleUpdateScrollShadows
});
var table = /*#__PURE__*/_react.default.createElement(_TableContext.TableContext.Provider, {
value: contextValue,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 201,
columnNumber: 7
}
}, showSelection ? /*#__PURE__*/_react.default.createElement(_BulkSelection.BulkSelection, {
ref: _ref => this.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: 203,
columnNumber: 11
}
}, this.renderChildren()) : this.renderChildren());
table = horizontalScroll ? /*#__PURE__*/_react.default.createElement(_reactScrollSync.ScrollSync, {
proportional: false,
horizontal: true,
vertical: false,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 225,
columnNumber: 7
}
}, table) : table;
return table;
}
}
exports.Table = Table;
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.defaultProps = _objectSpread(_objectSpread({}, _DataTable.default.defaultProps), {}, {
showSelection: false,
hideBulkSelectionCheckbox: false,
children: [/*#__PURE__*/_react.default.createElement(Table.Content, {
key: "content",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 244,
columnNumber: 14
}
})],
withWrapper: true,
showLastRowDivider: false,
horizontalScroll: false,
stickyColumns: 0,
isRowDisabled: () => false,
deselectRowsByDefault: false
});
Table.propTypes = {
/** Accept any wrapper component as a child element. It must eventually include <Table.Content/>. */
children: _propTypes.default.any,
/** Applies a data-hook HTML attribute to be used in the tests */
dataHook: _propTypes.default.string,
/** Defines a callback function which is called when selection happens. <br />
* There are 3 types of selections:
* * `ALL` - bulk selection checkbox has been triggered to select all items
* * `SINGLE_TOGGLE` - a checkbox to select one item from the list has been triggered. The change object will also include an `id` prop with the unique item identifier and a `value` prop with the new boolean selection state of the item.
* * `NONE` - bulk selection has been triggered to unselect all items.
* */
onSelectionChanged: _propTypes.default.func,
/** Called when item selection triggered but not changed yet. */
onSelectionStarted: _propTypes.default.func,
/** Displays selection checkbox as a first column in each row. To hide the selection checkbox from a specific row, set its `row.unselectable` value to true in the data array. */
showSelection: _propTypes.default.bool,
/** Hides bulk selection checkbox in the table titlebar */
hideBulkSelectionCheckbox: _propTypes.default.bool,
/** Defines an array of selected rows */
selectedIds: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.arrayOf(_propTypes.default.number)]),
/** Specifies whether table row selection is restricted at a given moment. Can be defined as:
* * `bool` disables selection for all table rows
* * `function` that will be called for each row to check whether to disable selection or not depending on specified condition */
selectionDisabled: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.func]),
/** Controls bulk selection checkbox behaviour in indeterminate state. By default, first click on indeterminate state selects all items in the table. If set to `true`, first click will deselect all items instead. */
deselectRowsByDefault: _propTypes.default.bool,
/**
* When false then Table would not create a `<div/>` wrapper around it's children.
* Useful when using `<Table/>` to wrap a `<Page/>` component, in that case we use the `<Table/>` only as a context provider and it does not render anything to the DOM by itself.*/
withWrapper: _propTypes.default.bool,
/**
* Defines a callback function which is called on column title click
*/
onSortClick: _propTypes.default.func,
// The following props are derived directly from <DataTable/> component
/** Allows to expand multiple row details at once */
allowMultiDetailsExpansion: _propTypes.default.bool,
/** Defines any amount of data to be displayed in the table. Properties for each entry:<br>
* * `id`: should be provided and will be used as a React key internally
* * `unselectable`: specifies whether a row can be selected by a user when `showSelection` is enabled for the whole table
* * `checkboxTooltipContent`: defines tooltip content to show when user hovers selection checkbox
* * any number of records with unique identifiers for column rendering
* */
data: _propTypes.default.array,
// Not performing any shape validation to not hurt performance.
/** Configures table columns. Required properties for each column:<br />
* * `title`: specifies a text string or an element to display in the table titlebar
* * `render`: defines a function which will be called to display this row value for this column<br>
*
* Optional properties for each column:
* * `onCellClick`: defines a callback function which is called each time a cell in this column is clicked. Signature: `onCellClick(column, rowData, rowNum, event)`
* * `sortable`: specifies whether field is sortable. If true clicking the header will call `onSortClick`.
* * `sortDescending`: specifies what sort icon to display in the column header. `true` shows an up arrow, `false` shows a down arrow, `undefined' shows no icon.
* * `infoTooltipProps`: controls info [tooltip](/?path=/story/components-overlays--tooltip) appearance in titlebar. Note: `dataHook`, `moveBy` and `children` will not be passed to tooltip.
* * `style`: applies a custom CSS class to the component’s root element
* * `align`: controls the alignment of the column content
* * `width`: sets the width of a column. No value means column will try to contain its children, if possible.
* * `important`: increases text size of this column data across all rows, sets font color to D10
* * `stickyActionCell`: specifies whether `<TableActionCell/>` controls are fixed to the right side of the table
* */
columns: _propTypes.default.arrayOf(_propTypes.default.shape({
title: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.string]).isRequired,
render: _propTypes.default.func.isRequired,
onCellClick: _propTypes.default.func,
sortable: _propTypes.default.bool,
sortDescending: _propTypes.default.bool,
infoTooltipProps: _propTypes.default.shape(_TooltipCommon.TooltipCommonProps),
style: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func]),
align: _propTypes.default.oneOf(['start', 'center', 'end']),
width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
important: _propTypes.default.bool,
stickyActionCell: _propTypes.default.bool
})).isRequired,
/** Defines a function that gets row data and returns a class(es) to apply to that specific row */
dynamicRowClass: _propTypes.default.func,
/** Defines a function that gets row data and returns boolean value specifying whether row is highlighted or not */
isRowHighlight: _propTypes.default.func,
/** Indicates whether there is additional data to load from external sources though `loadMore` function. When set to true `loadMore` property will be called until false value is received. */
hasMore: _propTypes.default.bool,
/** Invokes `loadMore` on the initial table render */
initialLoad: _propTypes.default.bool,
/** Assigns an unique identifier for the table */
id: _propTypes.default.string,
/** Renders data gradually as user scrolls down the list */
infiniteScroll: _propTypes.default.bool,
/** Specifies the total number of selectable items in the table (including items not loaded yet).
* When ‘Select all’ is triggered in infinite scroll tables, newly loaded items will be selected automatically. In this case, `SelectionContext` holds not-selected items rather than the selected ones.
* SelectionContext.infiniteBulkSelected is true and SelectionContext.selectedCount is the value of totalSelectableCount minus the count of unselected items. */
totalSelectableCount: _propTypes.default.number,
/** Determines the number of rows to rendered on each load of an infinite scroll table */
itemsPerPage: _propTypes.default.number,
/** Pass a loader to show when loading more items in infinite scroll table. Most commonly pass <Loader/> or <Text/> components. */
loader: _propTypes.default.node,
/** Defines a callback function which is called each time user request to load more items */
loadMore: _propTypes.default.func,
/** Defines a callback function which is called each time user clicks on the row. This prop is required to enable row hover effect. */
onRowClick: _propTypes.default.func,
/** Defines a callback function which is called each time mouse enters the row */
onMouseEnterRow: _propTypes.default.func,
/** Defines a callback function which is called each time mouse leaves the row */
onMouseLeaveRow: _propTypes.default.func,
/** Add scroll listeners to the window, or else, the component's parentNode. */
useWindow: _propTypes.default.bool,
/** Adds scroll listeners to specified DOM object */
scrollElement: _propTypes.default.object,
/** Controls the amount of white space above and below row content:
* - `large`: 24px
* - `medium`: 18px
* - `small`: with the feature toggle: 15px, without the feature toggle: 12px
* - `tiny`: 12px
* */
rowVerticalPadding: _propTypes.default.oneOf(['tiny', 'small', 'medium', 'large']),
/** Defines a function that returns a component to render in the expanded row content area */
rowDetails: _propTypes.default.func,
/** Removes paddings from an expanded row content area */
removeRowDetailsPadding: _propTypes.default.bool,
/** Applies a data-hook HTML attribute or a function that calculates the data-hook for each row on the table */
rowDataHook: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
/** A class to apply to all table body rows */
rowClass: _propTypes.default.string,
/** Specifies whether to show table title bar when there’s no data in the table */
showHeaderWhenEmpty: _propTypes.default.bool,
/** Specifies whether last row in the table should have a bottom divider */
showLastRowDivider: _propTypes.default.bool,
/** A flag specifying weather to apply column width style to table cells */
isApplyColumnWidthStyle: _propTypes.default.bool,
/** ++EXPERIMENTAL++ Virtualize the table scrolling for long list items */
virtualized: _propTypes.default.bool,
/** ++EXPERIMENTAL++ Controls virtualized table height */
virtualizedTableHeight: _propTypes.default.number,
/** ++EXPERIMENTAL++ Set virtualized table row height */
virtualizedLineHeight: _propTypes.default.number,
/** ++EXPERIMENTAL++ Set ref on virtualized list containing table rows */
virtualizedListRef: _propTypes.default.any,
/** Defines the width of the table in percentages or pixels. */
width: _propTypes.default.string,
/** Controls the appearance of a table title bar */
skin: _propTypes.default.oneOf(['standard', 'neutral']),
/** Specifies whether table content can exceed the width of the table. If enabled, table can be scrolled horizontally. */
horizontalScroll: _propTypes.default.bool,
/** Specifies the number of columns to stick to the left side in tables that support horizontal scroll */
stickyColumns: _propTypes.default.number,
/** Defines a function to call for each row to check whether row should appear as disabled or not */
isRowDisabled: _propTypes.default.func,
dragAndDrop: _propTypes.default.object,
onDragEnd: _propTypes.default.func
};
// export default Table;
//# sourceMappingURL=Table.js.map