diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/MessageWithAttachment.tsx b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/MessageWithAttachment.tsx index e3a11f503..0ec1fa582 100644 --- a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/MessageWithAttachment.tsx +++ b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/MessageWithAttachment.tsx @@ -5,11 +5,27 @@ import PreviewAttachment from '@patternfly/virtual-assistant/dist/dynamic/Previe import AttachmentEdit from '@patternfly/virtual-assistant/dist/dynamic/AttachmentEdit'; import userAvatar from './user_avatar.jpg'; +interface ModalData { + code: string; + fileName: string; +} + export const AttachmentMenuExample: React.FunctionComponent = () => { const [isPreviewModalOpen, setIsPreviewModalOpen] = React.useState(false); const [isEditModalOpen, setIsEditModalOpen] = React.useState(false); const [currentModalData, setCurrentModalData] = React.useState(); + const onClick = (event: React.MouseEvent, name: string) => { + setCurrentModalData({ fileName: name, code: 'test' }); + setIsEditModalOpen(false); + setIsPreviewModalOpen(true); + }; + + const onClose = (event: React.MouseEvent, name: string, id: number | string | undefined) => { + // eslint-disable-next-line no-console + console.log(`Closed attachment with name: ${name} and id: ${id}`); + }; + return ( <> { role="user" avatar={userAvatar} content="Here is an uploaded file" - attachmentName="auth-operator.yml" - attachmentId="1" - onAttachmentClick={() => { - setCurrentModalData({ fileName: 'auth-operator.yml', code: 'test' }); - setIsEditModalOpen(false); - setIsPreviewModalOpen(true); - }} - onAttachmentClose={(id: string) => { - // eslint-disable-next-line no-console - console.log(`Closed attachment id ${id}`); - }} + attachments={[{ name: 'auth-operator.yml', id: '1', onClick, onClose }]} + /> + {currentModalData && ( ` or ``, ``` -We are using [react-dropzone](https://react-dropzone.js.org) for opening the file dialog and handling drag and drop. It does not process files or provide any way to make HTTP requests to a server. If you need this, [react-dropzone](https://react-dropzone.js.org) suggests [filepond](https://pqina.nl/filepond/) or [uppy.io.](https://uppy.io/) +We are using [react-dropzone](https://react-dropzone.js.org) for opening the file dialog and handling drag and drop. It does not process files or provide any way to make HTTP requests to a server. If you need this, [react-dropzone](https://react-dropzone.js.org) suggests [filepond](https://pqina.nl/filepond/) or [uppy.io.](https://uppy.io/). To handle edge cases, like restricting the number or size of files, you can pass a function to the `handleAttach` prop on `MessageBar` or `onFileDrop` prop in `FileDropZone.` ### Attachment label diff --git a/packages/module/src/FileDetailsLabel/FileDetailsLabel.tsx b/packages/module/src/FileDetailsLabel/FileDetailsLabel.tsx index b4d5f86a2..461364f07 100644 --- a/packages/module/src/FileDetailsLabel/FileDetailsLabel.tsx +++ b/packages/module/src/FileDetailsLabel/FileDetailsLabel.tsx @@ -7,12 +7,14 @@ import { TimesIcon } from '@patternfly/react-icons'; interface FileDetailsLabelProps { /** Name of file, including extension */ fileName: string; + /** Unique id of file */ + fileId?: string | number; /** Whether to display loading icon */ isLoading?: boolean; /** Callback function for when label is clicked */ - onClick?: (event: React.MouseEvent) => void; + onClick?: (event: React.MouseEvent, fileName: string, fileId?: string | number) => void; /** Callback function for when close button is clicked */ - onClose?: (event: React.MouseEvent) => void; + onClose?: (event: React.MouseEvent, fileName: string, fileId?: string | number) => void; /** Aria label for close button */ closeButtonAriaLabel?: string; /** Custom test id for the component-generated language */ @@ -23,36 +25,42 @@ interface FileDetailsLabelProps { export const FileDetailsLabel = ({ fileName, + fileId, isLoading, - onClick = undefined, - onClose = undefined, + onClick, + onClose, closeButtonAriaLabel, languageTestId, spinnerTestId -}: PropsWithChildren) => ( - -); +}: PropsWithChildren) => { + const handleClose = (event) => { + onClose && onClose(event, fileName, fileId); + }; + return ( +