mod-arch-shared
Version:
Shared library for modular architecture micro-frontend projects
30 lines • 2.65 kB
JavaScript
import * as React from 'react';
import { ExpandableSection, TextArea, TextInput } from '@patternfly/react-core';
import DashboardDescriptionListGroup from '../components/DashboardDescriptionListGroup';
import FormFieldset from '../components/FormFieldset';
const EditableTextDescriptionListGroup = ({ title, contentWhenEmpty, value, isArchive, saveEditedValue, baseTestId, editableVariant, }) => {
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 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(FormFieldset, { component: editableTextArea }), onEditClick: () => {
setUnsavedValue(value);
setIsEditing(true);
}, onSaveEditsClick: async () => {
setIsSavingEdits(true);
try {
await saveEditedValue(unsavedValue);
}
finally {
setIsSavingEdits(false);
}
setIsEditing(false);
}, onDiscardEditsClick: () => {
setUnsavedValue(value);
setIsEditing(false);
} },
React.createElement(ExpandableSection, { "data-testid": baseTestId, variant: "truncate", truncateMaxLines: 12, toggleText: isTextExpanded ? 'Show less' : 'Show more', onToggle: (_event, isExpanded) => setIsTextExpanded(isExpanded), isExpanded: isTextExpanded }, value)));
};
export default EditableTextDescriptionListGroup;
//# sourceMappingURL=EditableTextDescriptionListGroup.js.map