wix-style-react
Version:
wix-style-react
322 lines (321 loc) • 12.8 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _Toggle = _interopRequireDefault(require("../../../Transition/Toggle"));
var _constants = require("../../../Transition/constants");
var _defaultTo = _interopRequireDefault(require("lodash/defaultTo"));
var _DataTableSt = require("../DataTable.st.css");
var _classnames = _interopRequireDefault(require("classnames"));
var _DataTable = require("../DataTable.utils");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/Table/DataTable/components/DataTableRow.js";
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 DataTableRow = props => {
var getCellClasses = _ref => {
var {
column,
colNum
} = _ref;
var {
rowData,
stickyColumns,
rowDetails,
showDetails
} = props;
return (0, _classnames.default)({
[_DataTableSt.classes.important]: column.important,
[_DataTableSt.classes.alignStart]: column.align === 'start',
[_DataTableSt.classes.alignCenter]: column.align === 'center',
[_DataTableSt.classes.alignEnd]: column.align === 'end',
[_DataTableSt.classes.sticky]: colNum < stickyColumns,
[_DataTableSt.classes.lastSticky]: colNum === stickyColumns - 1,
[_DataTableSt.classes.stickyActionCell]: column.stickyActionCell,
[_DataTableSt.classes.hasRowDetails]: rowDetails,
[_DataTableSt.classes.rowDetailsExtended]: showDetails && rowDetails(rowData)
});
};
var renderCell = _ref2 => {
var _column$key;
var {
column,
colNum
} = _ref2;
var {
rowData,
rowNum,
maskingClassNames,
isDragOverlay,
virtualized,
stickyColumns,
columns,
hideHeader,
hideHeaderAccessible,
isApplyColumnWidthStyle
} = props;
var width = isDragOverlay || (virtualized || rowNum === 0) && (hideHeader || hideHeaderAccessible) ? column.width : undefined;
var widthStyle = isApplyColumnWidthStyle ? column.width ? {
width: column.width
} : {
flex: 1
} : {};
var style = typeof column.style === 'function' ? column.style(column, rowData, rowNum) : column.style;
var stickyColumnStyle = colNum < stickyColumns ? (0, _DataTable.getStickyColumnStyle)(columns, column) : undefined;
var cellClasses = getCellClasses({
column,
colNum
});
return /*#__PURE__*/_react.default.createElement("td", {
key: (_column$key = column.key) !== null && _column$key !== void 0 ? _column$key : colNum,
"data-mask": !!maskingClassNames,
"data-hook": column.dataHook,
style: _objectSpread(_objectSpread(_objectSpread({}, style), stickyColumnStyle), widthStyle),
width: width,
className: (0, _DataTableSt.st)(cellClasses, {}, maskingClassNames),
onClick: column.onCellClick ? event => column.onCellClick(column, rowData, rowNum, event) : undefined,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 71,
columnNumber: 7
}
}, column.render && column.render(rowData, rowNum));
};
var onClickRow = () => {
var {
toggleRowDetails,
rowData,
rowNum,
onRowClick,
rowDetails,
isRowDisabled
} = props;
onRowClick && !isRowDisabled(rowData) && onRowClick(rowData, rowNum);
rowDetails && rowDetails(rowData, rowNum) && toggleRowDetails(rowData);
};
var renderRow = () => {
var {
rowData,
rowNum,
style,
className,
isDragOverlay,
onRowClick,
onMouseEnterRow,
onMouseLeaveRow,
rowDataHook,
dynamicRowClass,
isRowHighlight,
rowDetails,
rowClass,
columns,
selectedRowsIds,
isRowSelected,
isRowDisabled,
dragAndDrop,
isDragAndDropDisabled,
showDetails,
virtualized,
TrElementType = 'tr',
rowProps = {}
} = props;
var rowClasses = [rowClass, className];
var key = (0, _defaultTo.default)(rowData.id, rowNum);
var optionalRowProps = _objectSpread({}, rowProps);
var isRowHighlighted = isRowHighlight && isRowHighlight(rowData, rowNum);
var handlers = [{
rowEventHandler: onClickRow,
eventHandler: 'onClick'
}, {
rowEventHandler: onMouseEnterRow,
eventHandler: 'onMouseEnter'
}, {
rowEventHandler: onMouseLeaveRow,
eventHandler: 'onMouseLeave'
}];
handlers.forEach(_ref3 => {
var {
rowEventHandler,
eventHandler
} = _ref3;
if (rowEventHandler) {
optionalRowProps[eventHandler] = event => {
if (event.isDefaultPrevented()) {
return;
}
rowEventHandler(rowData, rowNum);
};
}
});
if (onRowClick && !isRowDisabled(rowData)) {
rowClasses.push(_DataTableSt.classes.clickableDataRow);
}
if (rowDetails) {
rowClasses.push(_DataTableSt.classes.animatedDataRow);
}
if (rowDataHook) {
if (typeof rowDataHook === 'string') {
optionalRowProps['data-hook'] = rowDataHook;
} else {
optionalRowProps['data-hook'] = rowDataHook(rowData, rowNum);
}
}
if (typeof TrElementType !== 'string') {
optionalRowProps.rowData = rowData;
}
if (dynamicRowClass) {
rowClasses.push(dynamicRowClass(rowData, rowNum));
}
if (isRowHighlighted) {
rowClasses.push(_DataTableSt.classes.highlight);
}
if (isRowSelected ? isRowSelected(rowData, rowNum) : selectedRowsIds && selectedRowsIds.includes(key)) {
rowClasses.push(_DataTableSt.classes.selected);
}
optionalRowProps.className = (0, _classnames.default)(rowClasses);
var tr = /*#__PURE__*/_react.default.createElement(TrElementType, (0, _extends2.default)({
"data-table-row": "dataTableRow",
"data-key": key,
"data-index": "index-".concat(rowNum),
style: style,
key: key,
"data-highlighted": isRowHighlighted ? true : null
}, optionalRowProps, {
"data-animated": !!rowDetails ? true : null,
"data-clickable": onRowClick && !isRowDisabled(rowData) ? true : null,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 194,
columnNumber: 7
}
}), columns.map((column, colNum) => renderCell({
column,
colNum
})));
if (dragAndDrop) {
var {
DraggableTableRow
} = dragAndDrop;
tr = /*#__PURE__*/_react.default.createElement(DraggableTableRow, {
id: rowData.id,
key: tr.key,
index: rowNum,
isDragOverlay: isDragOverlay,
isDragAndDropDisabled: isDragAndDropDisabled,
forwardedRef: rowProps.ref,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 218,
columnNumber: 9
}
}, tr);
}
var rowsToRender = [tr];
if (rowDetails) {
rowsToRender.push(/*#__PURE__*/_react.default.createElement("tr", {
key: "".concat(key, "_details"),
className: _DataTableSt.classes.rowDetails,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 235,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement("td", {
"data-hook": "".concat(rowNum, "_details"),
className: (0, _classnames.default)(_DataTableSt.classes.details, showDetails ? _DataTableSt.classes.active : ''),
colSpan: columns.length,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 236,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement(_Toggle.default, {
timeout: _constants.timingMap['medium01'],
show: showDetails,
unmountOnExit: true,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 244,
columnNumber: 13
}
}, rowDetails(rowData, rowNum)))));
}
return virtualized ? rowsToRender[0] : rowsToRender;
};
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 259,
columnNumber: 10
}
}, renderRow());
};
DataTableRow.propTypes = {
/** Row properties */
/** Element from the data array */
rowData: _propTypes.default.any,
/** Row index */
rowNum: _propTypes.default.number,
/** Styles to be applied to the row */
style: _propTypes.default.object,
/** Class to be applied to the row */
className: _propTypes.default.string,
maskingClassNames: _propTypes.default.any,
isDragOverlay: _propTypes.default.bool,
toggleRowDetails: _propTypes.default.func,
showDetails: _propTypes.default.bool,
rowProps: _propTypes.default.object,
/* DataTable properties */
/** A callback method to be called on row click. Signature: `onRowClick(rowData, rowNum)` */
onRowClick: _propTypes.default.func,
/** A callback method to be called on row mouse enter. Signature: `onMouseEnterRow(rowData, rowNum)` */
onMouseEnterRow: _propTypes.default.func,
/** A callback method to be called on row mouse leave. Signature: `onMouseLeaveRow(rowData, rowNum)` */
onMouseLeaveRow: _propTypes.default.func,
/** A string data-hook to apply to all table body rows. or a func which calculates the data-hook for each row - Signature: `(rowData, rowNum) => string` */
rowDataHook: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
/** A func that gets row data and returns a class(es) to apply to that specific row */
dynamicRowClass: _propTypes.default.func,
/** A func that gets row data and returns boolean if row is highlighted or not */
isRowHighlight: _propTypes.default.func,
/** Function that returns React component that will be rendered in row details section. Example: `rowDetails={(row, rowNum) => <MyRowDetailsComponent {...row} />}` */
rowDetails: _propTypes.default.func,
/** A class to apply to all table body rows */
rowClass: _propTypes.default.string,
/** A class to apply to the header table row */
headerRowClass: _propTypes.default.string,
/** A class to apply to the table header */
headerClass: _propTypes.default.string,
/** Configuration of the table's columns. See table below */
columns: _propTypes.default.array,
/** array of selected ids in the table. Note that `isRowSelected` prop provides greater selection logic flexibility and is recommended to use instead. */
selectedRowsIds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])),
/** A func that gets row data and returns boolean if row is selected or not */
isRowSelected: _propTypes.default.func,
/** a function which will be called for every row in `data` to specify if it should appear as disabled. Example: `isRowDisabled={(rowData) => !rowData.isEnabled}` */
isRowDisabled: _propTypes.default.func,
dragAndDrop: _propTypes.default.object,
isDragAndDropDisabled: _propTypes.default.bool,
/** ++EXPERIMENTAL++ virtualize the table scrolling for long list items */
virtualized: _propTypes.default.bool,
stickyColumns: _propTypes.default.number,
/** Should we remove the header of the table from DOM. */
hideHeader: _propTypes.default.bool,
/** Should we hide the header of the table with display: none. */
hideHeaderAccessible: _propTypes.default.bool,
/** A flag specifying weather to apply column width style to table cells */
isApplyColumnWidthStyle: _propTypes.default.bool
};
DataTableRow.displayName = 'Table.DataTableRow';
var _default = exports.default = DataTableRow;
//# sourceMappingURL=DataTableRow.js.map