@sap-ux/ui-components
Version:
SAP UI Components Library
111 lines • 4.42 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.RowDataCells = RowDataCells;
const react_1 = __importDefault(require("react"));
const types_1 = require("./types");
const utils_1 = require("./utils");
/**
* Get cell title element.
*
* @param {UIFlexibleTableProps<T>} tableProps
* @param {React.ReactNode} title
* @param {boolean} inRowLayout
* @param {string} tooltip
* @returns {React.ReactNode}
*/
function getCellTitleElement(tableProps, title, inRowLayout, tooltip) {
const wrappingLayout = tableProps.layout === types_1.UIFlexibleTableLayout.Wrapping;
const isFlexContent = wrappingLayout || !inRowLayout || tableProps.showColumnTitlesInCells;
if (tableProps.showColumnTitles && isFlexContent) {
return (react_1.default.createElement("div", { className: "flexible-table-content-table-row-item-title", title: tooltip }, title));
}
else {
return react_1.default.createElement(react_1.default.Fragment, null);
}
}
/**
* Gets row data cells.
*
* @param {RowDataCellsProps<T>} props
* @returns {Array<React.ReactNode>}
*/
function getRowDataCells(props) {
const { isInRowLayout, row, rowIndex, tableProps } = props;
const result = [];
for (let i = 0; i < tableProps.columns.length; i++) {
const column = tableProps.columns[i];
if (column.hidden) {
continue;
}
const colKey = column.key;
const { content, isSpan, cellClassNames, title, tooltip } = tableProps.onRenderCell({
cells: row.cells,
colIndex: i,
colKey,
readonly: !!tableProps.readonly,
rowIndex,
rowKey: row.key,
value: row.cells[colKey],
isInRowLayout
});
if (tableProps.layout === types_1.UIFlexibleTableLayout.InlineFlex || content) {
const classNameStr = (0, utils_1.composeClassNames)('flexible-table-content-table-row-item-data-cells-wrapper', [
cellClassNames,
column.className
]);
const cellId = `cell-${colKey}`;
result.push(react_1.default.createElement("div", { key: isSpan ? `cell-unknown` : `cell-${colKey}-${i}`, className: classNameStr, id: cellId },
getCellTitleElement(tableProps, title || column.title, isInRowLayout, tooltip || column.tooltip),
react_1.default.createElement("div", { className: "flexible-table-content-table-row-item-data-cells-value" }, content)));
}
if (isSpan) {
break;
}
}
return result;
}
/**
* RowDataCells component.
*
* @param {RowDataCellsProps<T>} props
* @returns {React.ReactElement}
*/
function RowDataCells(props) {
const { isInRowLayout, row, rowIndex, tableProps } = props;
const rowCells = [];
const rowCellsData = [];
let alternativeContent;
if (tableProps.onRenderRowDataContent) {
alternativeContent = tableProps.onRenderRowDataContent({
cells: row.cells,
readonly: !!tableProps.readonly,
rowIndex,
rowKey: row.key
});
}
if (tableProps.showIndexColumn) {
// Add index cell
rowCells.push(react_1.default.createElement("div", { key: `cell-index-${rowIndex}`, className: "flexible-table-content-table-row-item-index" },
react_1.default.createElement("span", { className: "flexible-table-content-table-row-item-index-value" }, row.key)));
}
if (!alternativeContent) {
rowCellsData.push(...getRowDataCells(props));
}
else {
rowCellsData.push(alternativeContent);
}
// Add data cells
const classNames = ['flexible-table-content-table-row-item-data-cells'];
if (tableProps.layout === types_1.UIFlexibleTableLayout.Wrapping) {
classNames.push('dynamic');
}
else {
classNames.push(isInRowLayout ? 'in-row' : 'in-column');
}
rowCells.push(react_1.default.createElement("div", { key: `flexible-table-content-table-row-item-${rowIndex}`, className: classNames.join(' ') }, rowCellsData));
return react_1.default.createElement("div", { className: "flexible-table-content-table-row-item-wrapper" }, rowCells);
}
//# sourceMappingURL=RowData.js.map