@sap-ux/ui-components
Version:
SAP UI Components Library
67 lines • 3.97 kB
JavaScript
import React from 'react';
import { UIFlexibleTableRowActionButton } from './UIFlexibleTableRowActionButton.js';
import { UiIcons, UIVerticalDivider } from '../index.js';
/**
* RowActions component.
*
* @param {RowActionsProps<T>} props
* @returns {React.ReactElement}
*/
export 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.createElement(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.createElement(React.Fragment, { key: `action-${actionElement.key}` },
React.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.createElement("div", { className: "flexible-table-content-table-row-item-actions-item-wrapper" },
React.createElement(UIFlexibleTableRowActionButton, { key: "up-action", actionName: "up", disabled: isTableTop || tableProps.isContentLoading || up?.disabled, iconName: UiIcons.ArrowUp, rowNumber: rowIndex, tableId: tableProps.id, onClick: props.onMoveUpClick, onFocus: () => {
props.onFocusRowAction('up');
}, title: up?.tooltip }),
React.createElement(UIFlexibleTableRowActionButton, { key: "down-action", actionName: "down", disabled: isTableBottom || tableProps.isContentLoading || down?.disabled, iconName: UiIcons.ArrowDown, rowNumber: rowIndex, tableId: tableProps.id, onClick: props.onMoveDownClick, onFocus: () => {
props.onFocusRowAction('down');
}, title: down?.tooltip })));
const deleteRowAction = isShowDeleteAction && (React.createElement("div", { className: "flexible-table-content-table-row-item-actions-item-wrapper" }, getDeleteRowAction(tableProps, { rowIndex, rowKey, cells, readonly: false })));
return (React.createElement(React.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.createElement(UIFlexibleTableRowActionButton, { key: "delete-action", actionName: "delete", iconName: 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