@wix/design-system
Version:
@wix/design-system
142 lines • 7.45 kB
JavaScript
import React from 'react';
import Toggle from '../../../Transition/Toggle';
import { timingMap } from '../../../Transition/constants';
import defaultTo from 'lodash/defaultTo';
import { classes, st } from '../DataTable.st.css.js';
import classNames from 'classnames';
import { ColumnResizeConsumer } from '../../ColumnResize';
const DataTableRow = props => {
const getCellClasses = ({ column, colNum }) => {
const { rowData, stickyColumns, rowDetails, showDetails } = props;
return classNames({
[classes.important]: column.important,
[classes.alignStart]: column.align === 'start',
[classes.alignCenter]: column.align === 'center',
[classes.alignEnd]: column.align === 'end',
[classes.sticky]: colNum < stickyColumns,
[classes.lastSticky]: colNum === stickyColumns - 1,
[classes.stickyActionCell]: column.stickyActionCell,
[classes.hasRowDetails]: rowDetails,
[classes.rowDetailsExtended]: showDetails && rowDetails(rowData),
});
};
const renderCell = ({ column, colNum, currentWidth, getStickyColumnStyle, }) => {
const { rowData, rowNum, maskingClassNames, isDragOverlay, virtualized, stickyColumns, columns, hideHeader, hideHeaderAccessible, isApplyColumnWidthStyle, } = props;
const width = isDragOverlay ||
((virtualized || rowNum === 0) && (hideHeader || hideHeaderAccessible))
? currentWidth
: undefined;
const widthStyle = isApplyColumnWidthStyle
? currentWidth
? { width: currentWidth }
: {}
: {};
const style = typeof column.style === 'function'
? column.style(column, rowData, rowNum)
: column.style;
const stickyColumnStyle = colNum < stickyColumns
? getStickyColumnStyle(columns, column)
: undefined;
const cellClasses = getCellClasses({
column,
colNum,
});
return (React.createElement("td", { key: column.key ?? colNum, "data-mask": !!maskingClassNames, "data-hook": column.dataHook, style: {
...style,
...stickyColumnStyle,
...widthStyle,
}, width: width, className: st(cellClasses, {}, maskingClassNames), onClick: column.onCellClick
? event => column.onCellClick(column, rowData, rowNum, event)
: undefined }, column.render && column.render(rowData, rowNum)));
};
const onClickRow = () => {
const { toggleRowDetails, rowData, rowNum, onRowClick, rowDetails, isRowDisabled, } = props;
onRowClick && !isRowDisabled(rowData) && onRowClick(rowData, rowNum);
rowDetails && rowDetails(rowData, rowNum) && toggleRowDetails(rowData);
};
const onKeyDownRow = event => {
// Trigger row click on Enter or Space key
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
onClickRow();
}
};
const renderRow = (getEffectiveColumnWidth, getStickyColumnStyle) => {
const { rowData, rowNum, style, className, isDragOverlay, onRowClick, onMouseEnterRow, onMouseLeaveRow, rowDataHook, dynamicRowClass, isRowHighlight, isRowActive, rowDetails, rowClass, columns, selectedRowsIds, isRowSelected, isRowDisabled, dragAndDrop, isDragAndDropDisabled, showDetails, virtualized, TrElementType = 'tr', rowProps = {}, } = props;
const rowClasses = [rowClass, className];
const key = defaultTo(rowData.id, rowNum);
const optionalRowProps = { ...rowProps };
const isRowHighlighted = isRowHighlight && isRowHighlight(rowData, rowNum);
const isActive = isRowActive && isRowActive(rowData, rowNum);
const handlers = [
{ rowEventHandler: onClickRow, eventHandler: 'onClick' },
{ rowEventHandler: onMouseEnterRow, eventHandler: 'onMouseEnter' },
{ rowEventHandler: onMouseLeaveRow, eventHandler: 'onMouseLeave' },
];
handlers.forEach(({ rowEventHandler, eventHandler }) => {
if (rowEventHandler) {
optionalRowProps[eventHandler] = event => {
if (event.isDefaultPrevented()) {
return;
}
rowEventHandler(rowData, rowNum);
};
}
});
if (onRowClick && !isRowDisabled(rowData)) {
rowClasses.push(classes.clickableDataRow);
optionalRowProps.tabIndex = 0;
optionalRowProps.onKeyDown = onKeyDownRow;
}
if (rowDetails) {
rowClasses.push(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(classes.highlight);
}
if (isActive) {
rowClasses.push(classes.activeRow);
}
if (isRowSelected
? isRowSelected(rowData, rowNum)
: selectedRowsIds && selectedRowsIds.includes(key)) {
rowClasses.push(classes.selected);
}
optionalRowProps.className = classNames(rowClasses);
let tr = (React.createElement(TrElementType, { "data-table-row": "dataTableRow", "data-key": key, "data-index": `index-${rowNum}`, style: style, key: key, "data-highlighted": isRowHighlighted ? true : null, ...optionalRowProps, "data-animated": !!rowDetails ? true : null, "data-clickable": onRowClick && !isRowDisabled(rowData) ? true : null }, columns.map((column, colNum) => renderCell({
column,
colNum,
currentWidth: getEffectiveColumnWidth(column),
getStickyColumnStyle,
}))));
if (dragAndDrop) {
const { DraggableTableRow } = dragAndDrop;
tr = (React.createElement(DraggableTableRow, { id: rowData.id, key: tr.key, index: rowNum, isDragOverlay: isDragOverlay, isDragAndDropDisabled: isDragAndDropDisabled, forwardedRef: rowProps.ref }, tr));
}
const rowsToRender = [tr];
if (rowDetails) {
rowsToRender.push(React.createElement("tr", { key: `${key}_details`, className: classes.rowDetails },
React.createElement("td", { "data-hook": `${rowNum}_details`, className: classNames(classes.details, showDetails ? classes.active : ''), colSpan: columns.length },
React.createElement(Toggle, { timeout: timingMap['medium01'], show: showDetails, unmountOnExit: true }, rowDetails(rowData, rowNum)))));
}
return virtualized ? rowsToRender[0] : rowsToRender;
};
return (React.createElement(React.Fragment, null, React.createElement(ColumnResizeConsumer, null, ({ getEffectiveColumnWidth, getStickyColumnStyle }) => renderRow(getEffectiveColumnWidth, getStickyColumnStyle))));
};
DataTableRow.displayName = 'Table.DataTableRow';
export default DataTableRow;
//# sourceMappingURL=DataTableRow.js.map