@sap-ux/ui-components
Version:
SAP UI Components Library
73 lines • 4.43 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.RowActions = RowActions;
const react_1 = __importDefault(require("react"));
const UIFlexibleTableRowActionButton_1 = require("./UIFlexibleTableRowActionButton");
const __1 = require("..");
/**
* RowActions component.
*
* @param {RowActionsProps<T>} props
* @returns {React.ReactElement}
*/
function RowActions(props) {
const { rowIndex, tableProps } = props;
const rows = props.tableProps.rows;
const rowKey = rows[rowIndex].key;
const cells = rows[rowIndex].cells;
const isTableTop = rowIndex <= 0;
const isTableBottom = rowIndex >= rows.length - 1;
const isShowReorderButtons = !tableProps.readonly && tableProps.onTableReorder;
const additionalActions = [];
const isShowDeleteAction = tableProps.onDeleteRow && !tableProps.readonly;
const divider = react_1.default.createElement(__1.UIVerticalDivider, { className: "flexible-table-content-table-row-item-actions-divider" });
if (tableProps.onRenderActions) {
const customActions = tableProps.onRenderActions({ rowIndex, rowKey, cells, readonly: !!tableProps.readonly });
additionalActions.push(...customActions.map((actionElement, idx) => {
return (react_1.default.createElement(react_1.default.Fragment, { key: `action-${actionElement.key}` },
react_1.default.createElement("div", { className: "flexible-table-content-table-row-item-actions-item-wrapper" }, actionElement),
idx < customActions.length - 1 && divider));
}));
}
const { up, down } = isShowReorderButtons && tableProps.onRenderReorderActions
? tableProps.onRenderReorderActions({ rowIndex, rowKey, cells, readonly: !!tableProps.readonly }) || {}
: {
up: undefined,
down: undefined
};
const reorderButtons = isShowReorderButtons && (react_1.default.createElement("div", { className: "flexible-table-content-table-row-item-actions-item-wrapper" },
react_1.default.createElement(UIFlexibleTableRowActionButton_1.UIFlexibleTableRowActionButton, { key: "up-action", actionName: "up", disabled: isTableTop || tableProps.isContentLoading || up?.disabled, iconName: __1.UiIcons.ArrowUp, rowNumber: rowIndex, tableId: tableProps.id, onClick: props.onMoveUpClick, onFocus: () => {
props.onFocusRowAction('up');
}, title: up?.tooltip }),
react_1.default.createElement(UIFlexibleTableRowActionButton_1.UIFlexibleTableRowActionButton, { key: "down-action", actionName: "down", disabled: isTableBottom || tableProps.isContentLoading || down?.disabled, iconName: __1.UiIcons.ArrowDown, rowNumber: rowIndex, tableId: tableProps.id, onClick: props.onMoveDownClick, onFocus: () => {
props.onFocusRowAction('down');
}, title: down?.tooltip })));
const deleteRowAction = isShowDeleteAction && (react_1.default.createElement("div", { className: "flexible-table-content-table-row-item-actions-item-wrapper" }, getDeleteRowAction(tableProps, { rowIndex, rowKey, cells, readonly: false })));
return (react_1.default.createElement(react_1.default.Fragment, null,
additionalActions,
additionalActions.length > 0 && (isShowReorderButtons || isShowDeleteAction) && divider,
reorderButtons,
isShowReorderButtons && isShowDeleteAction && divider,
deleteRowAction));
}
/**
* Get delete row action.
*
* @param {UIFlexibleTableProps<T>} props
* @param {TableRowEventHandlerParameters<T>} params
* @returns {React.ReactNode}
*/
function getDeleteRowAction(props, params) {
const { isDeleteDisabled, tooltip } = props.onRenderDeleteAction
? props.onRenderDeleteAction(params)
: { isDeleteDisabled: false, tooltip: undefined };
return (react_1.default.createElement(UIFlexibleTableRowActionButton_1.UIFlexibleTableRowActionButton, { key: "delete-action", actionName: "delete", iconName: __1.UiIcons.TrashCan, disabled: !!isDeleteDisabled || props.isContentLoading, rowNumber: params.rowIndex, onClick: () => {
if (props.onDeleteRow) {
props.onDeleteRow(params);
}
}, tableId: props.id, title: tooltip }));
}
//# sourceMappingURL=RowActions.js.map