mod-arch-shared
Version:
Shared UI components and utilities for modular architecture micro-frontend projects
26 lines • 3.1 kB
JavaScript
import * as React from 'react';
import { ActionList, ActionListItem, Button, DescriptionListDescription, DescriptionListGroup, DescriptionListTerm, Flex, FlexItem, Popover, Split, SplitItem, } from '@patternfly/react-core';
import text from '@patternfly/react-styles/css/utilities/Text/text';
import { CheckIcon, PencilAltIcon, TimesIcon, OutlinedQuestionCircleIcon, } from '@patternfly/react-icons';
import './DashboardDescriptionListGroup.scss';
import DashboardPopupIconButton from '../components/dashboard/DashboardPopupIconButton';
const DashboardDescriptionListGroup = (props) => {
const { title, popover, action, isEmpty, contentWhenEmpty, isEditable = false, isEditing, contentWhenEditing, isSavingEdits = false, onEditClick, onSaveEditsClick, onDiscardEditsClick, children, groupTestId, editButtonTestId, saveButtonTestId, cancelButtonTestId, isSaveDisabled, } = props;
return (React.createElement(DescriptionListGroup, { "data-testid": groupTestId },
action || isEditable ? (React.createElement(DescriptionListTerm, { className: "kubeflow-custom-description-list-term-with-action" },
React.createElement(Split, null,
React.createElement(SplitItem, { isFilled: true }, title),
React.createElement(SplitItem, null, action ||
(isEditing ? (React.createElement(ActionList, { isIconList: true },
React.createElement(ActionListItem, null,
React.createElement(Button, { "data-testid": saveButtonTestId, icon: React.createElement(CheckIcon, null), "aria-label": `Save edits to ${title}`, variant: "link", onClick: onSaveEditsClick, isDisabled: isSavingEdits || isSaveDisabled })),
React.createElement(ActionListItem, null,
React.createElement(Button, { "data-testid": cancelButtonTestId, icon: React.createElement(TimesIcon, null), "aria-label": `Discard edits to ${title} `, variant: "plain", onClick: onDiscardEditsClick, isDisabled: isSavingEdits })))) : (React.createElement(Button, { "data-testid": editButtonTestId, "aria-label": `Edit ${title}`, variant: "link", icon: React.createElement(PencilAltIcon, null), iconPosition: "start", onClick: onEditClick }, "Edit"))))))) : (React.createElement(DescriptionListTerm, null,
React.createElement(Flex, { spaceItems: { default: 'spaceItemsNone' }, alignItems: { default: 'alignItemsCenter' } },
React.createElement(FlexItem, null, title),
popover && (React.createElement(Popover, { bodyContent: popover },
React.createElement(DashboardPopupIconButton, { icon: React.createElement(OutlinedQuestionCircleIcon, null), "aria-label": "More info" })))))),
React.createElement(DescriptionListDescription, { className: isEmpty && !isEditing ? text.textColorDisabled : '', "aria-disabled": !!(isEmpty && !isEditing) }, isEditing ? contentWhenEditing : isEmpty ? contentWhenEmpty : children)));
};
export default DashboardDescriptionListGroup;
//# sourceMappingURL=DashboardDescriptionListGroup.js.map