@sap-ux/ui-components
Version:
SAP UI Components Library
220 lines • 10.1 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.renderTitleRow = renderTitleRow;
exports.UIFlexibleTableRow = UIFlexibleTableRow;
const react_1 = __importDefault(require("react"));
const __1 = require("..");
const types_1 = require("./types");
const utils_1 = require("./utils");
/**
* Render row title.
*
* @param {UIFlexibleTableProps<T>} props
* @param {UIFlexibleTableRowType<T>} row
* @param {number | undefined} rowIndex
* @param {React.ReactElement} rowActions
* @returns {React.ReactNode}
*/
function renderRowTitle(props, row, rowIndex, rowActions) {
return (react_1.default.createElement("div", { className: "flexible-table-content-table-row-header" },
react_1.default.createElement("div", { className: "flexible-table-content-table-row-header-text-content", title: row.tooltip }, row.title || react_1.default.createElement("span", null)),
props.layout === types_1.UIFlexibleTableLayout.Wrapping &&
getActionsContainer(false, rowIndex, rowActions, 'flexible-table-content-table-row-header-actions')));
}
/**
*
* @param {boolean} useFocusZone
* @param {number | undefined} rowIndex
* @param {React.ReactElement} rowActions
* @param {string} className
* @returns {JSX.Element}
*/
function getActionsContainer(useFocusZone, rowIndex, rowActions, className) {
return useFocusZone ? (react_1.default.createElement(__1.UIFocusZone, { as: "div", key: `cell-actions-${rowIndex ?? 'unknown'}`, className: className, direction: __1.UIFocusZoneDirection.horizontal, isCircularNavigation: true, shouldEnterInnerZone: (ev) => ev.key === 'Enter' }, rowActions)) : (react_1.default.createElement("div", { className: className }, rowActions));
}
/**
* On render title row.
*
* @param {UIFlexibleTableProps<T>} props
* @param {number} paddingRight
* @returns {React.ReactNode}
*/
function renderTitleRow(props, paddingRight) {
const rowCells = [];
if (props.showIndexColumn) {
if (props.onRenderTitleColumnCell) {
const { content, cellClassNames, tooltip } = props.onRenderTitleColumnCell({
isIndexColumn: true
});
const className = (0, utils_1.composeClassNames)('flexible-table-content-table-title-row-item-index', [cellClassNames]);
rowCells.push(react_1.default.createElement("div", { key: "title-cell-index", className: className, title: tooltip }, content));
}
else {
rowCells.push(react_1.default.createElement("div", { key: "title-cell-index", className: "flexible-table-content-table-title-row-item-index" },
react_1.default.createElement("span", { className: "flexible-table-content-table-title-row-item-index-value" }, "#")));
}
}
const rowCellsData = [];
const tableId = props.id;
for (let i = 0; i < props.columns.length; i++) {
const column = props.columns[i];
if (column.hidden) {
continue;
}
const key = column.key;
if (props.onRenderTitleColumnCell) {
const { content, isSpan, cellClassNames, tooltip } = props.onRenderTitleColumnCell({
colIndex: i,
colKey: key
});
const className = (0, utils_1.composeClassNames)('flexible-table-content-table-title-row-item-data-cells-value', [
cellClassNames,
column.className
]);
if (isSpan) {
rowCellsData.push(react_1.default.createElement("div", { key: `title-cell-unknown`, className: className, title: tooltip || column.tooltip, id: `${tableId}-header-column-${key}` }, content));
break;
}
else {
rowCellsData.push(react_1.default.createElement("div", { key: `cell-${key}-${i}`, className: className, title: tooltip || column.tooltip, id: `${tableId}-header-column-${key}` }, content));
}
}
else {
const className = (0, utils_1.composeClassNames)('flexible-table-content-table-title-row-item-data-cells-value', [
column.className
]);
rowCellsData.push(react_1.default.createElement("div", { key: `title-cell-${key}-${i}`, className: className, title: column.tooltip, id: `${tableId}-header-column-${key}` }, column.title));
}
}
// Add data cells titles
rowCells.push(react_1.default.createElement("div", { key: `flexible-table-content-table-title-row-item-data-cells}`, className: `flexible-table-content-table-title-row-item-data-cells in-row` }, rowCellsData));
// Add actions title
if (props.onRenderTitleColumnCell) {
const { content, cellClassNames, tooltip } = props.onRenderTitleColumnCell({
isActionsColumn: true
});
const className = (0, utils_1.composeClassNames)('flexible-table-content-table-title-row-item-actions', [cellClassNames]);
rowCells.push(react_1.default.createElement("div", { key: "title-row", className: className, title: tooltip }, content));
}
else {
rowCells.push(react_1.default.createElement("div", { key: `title-cell-actions`, className: "flexible-table-content-table-title-row-item-actions" }));
}
return (react_1.default.createElement("div", { className: "flexible-table-content-table-title-row", key: "title-row", style: { paddingRight }, tabIndex: -1 },
react_1.default.createElement("div", { className: "flexible-table-content-table-title-row-wrapper" },
react_1.default.createElement("div", { className: "flexible-table-content-table-title-row-wrapper-cells" }, rowCells))));
}
/**
* Method checks if passed row is disabled for drag.
*
* @param value Row item value.
* @returns {boolean} Is row disabled for drag.
*/
function isRowDisabled(value) {
let disabled = false;
if (value && typeof value === 'object' && 'disabled' in value) {
disabled = !!value.disabled;
}
return disabled;
}
/**
* Method returns CSS styles for row item element.
*
* @param isDragDisabled Is row disabled for drag.
* @param isDragged True if row is currently dragging.
* @param isTouchDragDisabled Is drag disabled by touch events.
* @returns {string} CSS styles for row item element.
*/
function getRowStyles(isDragDisabled, isDragged, isTouchDragDisabled) {
const style = {
pointerEvents: 'all',
cursor: isDragged ? 'grabbing' : 'inherit',
touchAction: 'none'
};
if (isDragDisabled) {
style.cursor = 'default';
}
if (isDragDisabled || isTouchDragDisabled) {
style.touchAction = 'auto';
}
return style;
}
/**
* Method returns class name for row index parity.
*
* @param rowIndex Row index.
* @returns {string} Class name string.
*/
function getParityClassName(rowIndex) {
let className = '';
if (rowIndex !== undefined) {
// Index is zero based - odd/even opposite
className = rowIndex % 2 === 0 ? 'odd' : 'even';
}
return className;
}
/**
* UIFlexibleTableRow component.
*
* @exports
* @param {UIFlexibleTableRowProps} props
* @returns {JSX.Element}
*/
function UIFlexibleTableRow(props) {
const { dragAndDropParams: params, rowData, rowActions, rowRef, tableProps, className: dynamicClassName } = props;
const row = params.value;
const rowIndex = params.index;
const rowCells = [];
const { isDragged, isSelected, isOutOfBounds, value } = params;
const isRow = row && rowIndex !== undefined;
const isDragDisabled = isRowDisabled(value);
if (isRow) {
rowCells.push(rowData);
if (tableProps.layout === types_1.UIFlexibleTableLayout.InlineFlex) {
// Add row actions
rowCells.push(getActionsContainer(true, rowIndex, rowActions, 'flexible-table-content-table-row-item-actions'));
}
}
const rowClassName = (0, utils_1.composeClassNames)('flexible-table-content-table-row', [
tableProps.noRowBackground ? 'no-background' : '',
isDragged ? 'dragged' : '',
isSelected ? 'selected' : '',
isOutOfBounds ? 'out-of-bounds' : '',
row.className ?? '',
tableProps.lockVertically ? 'locked-axis' : 'unlocked-axis',
getParityClassName(rowIndex),
tableProps.reverseBackground && !tableProps.noRowBackground ? 'reverse-background' : '',
dynamicClassName
]);
const rowWrapperClassNames = [
'flexible-table-content-table-row-wrapper',
tableProps.layout === types_1.UIFlexibleTableLayout.InlineFlex ? 'inline-layout' : 'wrapping-layout'
].join(' ');
const showRowTitle = isRow && (tableProps.showRowTitles || tableProps.layout === types_1.UIFlexibleTableLayout.Wrapping);
const style = {
...params.props.style,
...getRowStyles(isDragDisabled, isDragged, !!tableProps.isTouchDragDisabled)
};
if (tableProps.isContentLoading) {
style.pointerEvents = 'none';
style.cursor = 'none';
}
let onTouchStart;
let onTouchEnd;
// Disable drag using touch events
if (!isDragDisabled && tableProps.isTouchDragDisabled) {
onTouchStart = (event) => {
event.nativeEvent.stopImmediatePropagation();
};
onTouchEnd = (event) => {
event.nativeEvent.stopImmediatePropagation();
};
}
return (react_1.default.createElement("li", { ...params.props, className: rowClassName, "data-movable-handle": true, key: `row-${rowIndex}`, id: `row-${rowIndex}`, style: style, onTouchStart: onTouchStart, onTouchEnd: onTouchEnd },
react_1.default.createElement("div", { className: rowWrapperClassNames, ref: rowRef },
showRowTitle && renderRowTitle(tableProps, row, rowIndex, rowActions),
react_1.default.createElement("div", { className: "flexible-table-content-table-row-wrapper-cells" }, rowCells))));
}
//# sourceMappingURL=UIFlexibleTableRow.js.map