@wix/design-system
Version:
@wix/design-system
272 lines (271 loc) • 12 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.js");
var _classnames = _interopRequireDefault(require("classnames"));
var _ColumnResize = require("../../ColumnResize");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Table/DataTable/components/DataTableRow.jsx",
_this = void 0;
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 = function DataTableRow(props) {
var getCellClasses = function getCellClasses(_ref) {
var column = _ref.column,
colNum = _ref.colNum;
var rowData = props.rowData,
stickyColumns = props.stickyColumns,
rowDetails = props.rowDetails,
showDetails = props.showDetails;
return (0, _classnames["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["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 = function renderCell(_ref2) {
var _column$key;
var column = _ref2.column,
colNum = _ref2.colNum,
currentWidth = _ref2.currentWidth,
getStickyColumnStyle = _ref2.getStickyColumnStyle;
var rowData = props.rowData,
rowNum = props.rowNum,
maskingClassNames = props.maskingClassNames,
isDragOverlay = props.isDragOverlay,
virtualized = props.virtualized,
stickyColumns = props.stickyColumns,
columns = props.columns,
hideHeader = props.hideHeader,
hideHeaderAccessible = props.hideHeaderAccessible,
isApplyColumnWidthStyle = props.isApplyColumnWidthStyle;
var width = isDragOverlay || (virtualized || rowNum === 0) && (hideHeader || hideHeaderAccessible) ? currentWidth : undefined;
var widthStyle = isApplyColumnWidthStyle ? currentWidth ? {
width: currentWidth
} : {} : {};
var style = typeof column.style === 'function' ? column.style(column, rowData, rowNum) : column.style;
var stickyColumnStyle = colNum < stickyColumns ? getStickyColumnStyle(columns, column) : undefined;
var cellClasses = getCellClasses({
column: column,
colNum: 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 ? function (event) {
return column.onCellClick(column, rowData, rowNum, event);
} : undefined,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 75,
columnNumber: 7
}
}, column.render && column.render(rowData, rowNum));
};
var onClickRow = function onClickRow() {
var toggleRowDetails = props.toggleRowDetails,
rowData = props.rowData,
rowNum = props.rowNum,
onRowClick = props.onRowClick,
rowDetails = props.rowDetails,
isRowDisabled = props.isRowDisabled;
onRowClick && !isRowDisabled(rowData) && onRowClick(rowData, rowNum);
rowDetails && rowDetails(rowData, rowNum) && toggleRowDetails(rowData);
};
var onKeyDownRow = function onKeyDownRow(event) {
// Trigger row click on Enter or Space key
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
onClickRow();
}
};
var renderRow = function renderRow(getEffectiveColumnWidth, getStickyColumnStyle) {
var rowData = props.rowData,
rowNum = props.rowNum,
style = props.style,
className = props.className,
isDragOverlay = props.isDragOverlay,
onRowClick = props.onRowClick,
onMouseEnterRow = props.onMouseEnterRow,
onMouseLeaveRow = props.onMouseLeaveRow,
rowDataHook = props.rowDataHook,
dynamicRowClass = props.dynamicRowClass,
isRowHighlight = props.isRowHighlight,
isRowActive = props.isRowActive,
rowDetails = props.rowDetails,
rowClass = props.rowClass,
columns = props.columns,
selectedRowsIds = props.selectedRowsIds,
isRowSelected = props.isRowSelected,
isRowDisabled = props.isRowDisabled,
dragAndDrop = props.dragAndDrop,
isDragAndDropDisabled = props.isDragAndDropDisabled,
showDetails = props.showDetails,
virtualized = props.virtualized,
_props$TrElementType = props.TrElementType,
TrElementType = _props$TrElementType === void 0 ? 'tr' : _props$TrElementType,
_props$rowProps = props.rowProps,
rowProps = _props$rowProps === void 0 ? {} : _props$rowProps;
var rowClasses = [rowClass, className];
var key = (0, _defaultTo["default"])(rowData.id, rowNum);
var optionalRowProps = _objectSpread({}, rowProps);
var isRowHighlighted = isRowHighlight && isRowHighlight(rowData, rowNum);
var isActive = isRowActive && isRowActive(rowData, rowNum);
var handlers = [{
rowEventHandler: onClickRow,
eventHandler: 'onClick'
}, {
rowEventHandler: onMouseEnterRow,
eventHandler: 'onMouseEnter'
}, {
rowEventHandler: onMouseLeaveRow,
eventHandler: 'onMouseLeave'
}];
handlers.forEach(function (_ref3) {
var rowEventHandler = _ref3.rowEventHandler,
eventHandler = _ref3.eventHandler;
if (rowEventHandler) {
optionalRowProps[eventHandler] = function (event) {
if (event.isDefaultPrevented()) {
return;
}
rowEventHandler(rowData, rowNum);
};
}
});
if (onRowClick && !isRowDisabled(rowData)) {
rowClasses.push(_DataTableSt.classes.clickableDataRow);
optionalRowProps.tabIndex = 0;
optionalRowProps.onKeyDown = onKeyDownRow;
}
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 (isActive) {
rowClasses.push(_DataTableSt.classes.activeRow);
}
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: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 214,
columnNumber: 7
}
}), columns.map(function (column, colNum) {
return renderCell({
column: column,
colNum: colNum,
currentWidth: getEffectiveColumnWidth(column),
getStickyColumnStyle: getStickyColumnStyle
});
}));
if (dragAndDrop) {
var DraggableTableRow = dragAndDrop.DraggableTableRow;
tr = /*#__PURE__*/_react["default"].createElement(DraggableTableRow, {
id: rowData.id,
key: tr.key,
index: rowNum,
isDragOverlay: isDragOverlay,
isDragAndDropDisabled: isDragAndDropDisabled,
forwardedRef: rowProps.ref,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 240,
columnNumber: 9
}
}, tr);
}
var rowsToRender = [tr];
if (rowDetails) {
rowsToRender.push(/*#__PURE__*/_react["default"].createElement("tr", {
key: "".concat(key, "_details"),
className: _DataTableSt.classes.rowDetails,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 257,
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: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 258,
columnNumber: 11
}
}, /*#__PURE__*/_react["default"].createElement(_Toggle["default"], {
timeout: _constants.timingMap['medium01'],
show: showDetails,
unmountOnExit: true,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 266,
columnNumber: 13
}
}, rowDetails(rowData, rowNum)))));
}
return virtualized ? rowsToRender[0] : rowsToRender;
};
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 282,
columnNumber: 5
}
}, /*#__PURE__*/_react["default"].createElement(_ColumnResize.ColumnResizeConsumer, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 284,
columnNumber: 9
}
}, function (_ref4) {
var getEffectiveColumnWidth = _ref4.getEffectiveColumnWidth,
getStickyColumnStyle = _ref4.getStickyColumnStyle;
return renderRow(getEffectiveColumnWidth, getStickyColumnStyle);
}));
};
DataTableRow.displayName = 'Table.DataTableRow';
var _default = exports["default"] = DataTableRow;