mod-arch-shared
Version:
Shared UI components and utilities for modular architecture micro-frontend projects
37 lines • 3.33 kB
JavaScript
import * as React from 'react';
import { Alert, AlertVariant, ExpandableSection, TextArea, TextInput, } from '@patternfly/react-core';
import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
import DashboardDescriptionListGroup from '../components/DashboardDescriptionListGroup';
import FormFieldset from '../components/FormFieldset';
const EditableTextDescriptionListGroup = ({ title, contentWhenEmpty, value, isArchive, saveEditedValue, baseTestId, editableVariant, truncateMaxLines = 12, onEditingChange, }) => {
const [isEditing, setIsEditing] = React.useState(false);
const [unsavedValue, setUnsavedValue] = React.useState(value);
const [isSavingEdits, setIsSavingEdits] = React.useState(false);
const [isTextExpanded, setIsTextExpanded] = React.useState(false);
const handleEditingStateChange = (editingState) => {
setIsEditing(editingState);
onEditingChange?.(editingState);
};
const editableTextArea = editableVariant === 'TextInput' ? (React.createElement(TextInput, { autoFocus: true, "data-testid": baseTestId && `${baseTestId}-input`, "aria-label": `Text input for editing ${title}`, value: unsavedValue, onChange: (_event, v) => setUnsavedValue(v), isDisabled: isSavingEdits })) : (React.createElement(TextArea, { autoFocus: true, "data-testid": baseTestId && `${baseTestId}-input`, "aria-label": `Text box for editing ${title}`, value: unsavedValue, onChange: (_event, v) => setUnsavedValue(v), isDisabled: isSavingEdits, rows: 24, resizeOrientation: "vertical" }));
return (React.createElement(DashboardDescriptionListGroup, { title: title, isEmpty: !value, contentWhenEmpty: contentWhenEmpty, isEditable: !isArchive, isEditing: isEditing, isSavingEdits: isSavingEdits, groupTestId: baseTestId && `${baseTestId}-group`, editButtonTestId: baseTestId && `${baseTestId}-edit`, saveButtonTestId: baseTestId && `${baseTestId}-save`, cancelButtonTestId: baseTestId && `${baseTestId}-cancel`, contentWhenEditing: React.createElement(React.Fragment, null,
React.createElement(FormFieldset, { component: editableTextArea }),
onEditingChange && isEditing && (React.createElement(Alert, { "data-testid": "editing-description-alert", className: spacing.mtMd, variant: AlertVariant.info, isInline: true, title: "Changes affect all model versions", "aria-live": "polite", isPlain: true, tabIndex: -1 }))), onEditClick: () => {
setUnsavedValue(value);
handleEditingStateChange(true);
}, onSaveEditsClick: async () => {
setIsSavingEdits(true);
try {
await saveEditedValue(unsavedValue);
}
finally {
setIsSavingEdits(false);
}
handleEditingStateChange(false);
}, onDiscardEditsClick: () => {
setUnsavedValue(value);
handleEditingStateChange(false);
} },
React.createElement(ExpandableSection, { "data-testid": baseTestId, variant: "truncate", truncateMaxLines: truncateMaxLines, toggleText: isTextExpanded ? 'Show less' : 'Show more', onToggle: (_event, isExpanded) => setIsTextExpanded(isExpanded), isExpanded: isTextExpanded }, value)));
};
export default EditableTextDescriptionListGroup;
//# sourceMappingURL=EditableTextDescriptionListGroup.js.map