Allow setting readOnly on FileSelect

vivid-planet · Jul 24, 2024 · 5a96f36 · 5a96f36
1 parent 70cc4ea
commit 5a96f36
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 43 deletions.
diff --git a/packages/admin/admin/src/form/file/FileSelect.tsx b/packages/admin/admin/src/form/file/FileSelect.tsx
@@ -3,7 +3,7 @@ import { ComponentsOverrides, FormHelperText, Typography } from "@mui/material";
 import { css, Theme, useThemeProps } from "@mui/material/styles";
 import * as React from "react";
 import { Accept, DropzoneOptions } from "react-dropzone";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import { Alert } from "../../alert/Alert";
 import { createComponentSlot } from "../../helpers/createComponentSlot";
@@ -40,6 +40,7 @@ export type FileSelectProps<AdditionalValidFileValues = Record<string, unknown>>
     onRemove: (file: FileSelectItem<AdditionalValidFileValues>) => void;
     onDownload?: (file: FileSelectItem<AdditionalValidFileValues>) => void;
     disabled?: boolean;
+    readOnly?: boolean;
     accept?: Accept;
     maxFileSize?: number;
     maxFiles?: number;
@@ -53,6 +54,7 @@ export type FileSelectProps<AdditionalValidFileValues = Record<string, unknown>>
 export const FileSelect = <AdditionalValidFileValues = Record<string, unknown>,>(inProps: FileSelectProps<AdditionalValidFileValues>) => {
     const {
         slotProps,
+        readOnly,
         disabled,
         accept,
         maxFileSize,
@@ -71,6 +73,7 @@ export const FileSelect = <AdditionalValidFileValues = Record<string, unknown>,>
     });
 
     const { error: errorIcon = <ErrorIcon color="error" /> } = iconMapping;
+    const intl = useIntl();
 
     const multiple = passedMultiple || (typeof passedMaxFiles !== "undefined" && passedMaxFiles > 1);
     const maxFiles = typeof passedMaxFiles === "undefined" ? (multiple ? undefined : 1) : passedMaxFiles;
@@ -79,51 +82,68 @@ export const FileSelect = <AdditionalValidFileValues = Record<string, unknown>,>
     const maxAmountOfFilesSelected = typeof maxFiles !== "undefined" && multiple && numberOfValidFiles >= maxFiles;
     const maxNumberOfFilesToBeAdded = maxFiles ? maxFiles - numberOfValidFiles : undefined;
     const filesInfoText = getFilesInfoText(maxFiles, maxFileSize);
+    const showFileList = files.length > 0 || readOnly;
 
     return (
         <Root {...slotProps?.root} {...restProps}>
-            {maxAmountOfFilesSelected ? (
-                <MaxFilesReachedInfo
-                    title={<FormattedMessage id="comet.fileSelect.maximumReached" defaultMessage="Maximum reached" />}
-                    severity="info"
-                    {...slotProps?.maxFilesReachedInfo}
-                >
-                    <FormattedMessage
-                        id="comet.fileSelect.maximumFilesAmount"
-                        defaultMessage="The maximum number of uploads has been reached. Please delete files from the list before uploading new files."
-                    />
-                </MaxFilesReachedInfo>
-            ) : (
-                <Dropzone
-                    disabled={disabled}
-                    hasError={Boolean(error)}
-                    onDrop={onDrop}
-                    accept={accept}
-                    multiple={multiple}
-                    maxSize={maxFileSize === null ? undefined : maxFileSize}
-                    maxFiles={maxNumberOfFilesToBeAdded}
-                    {...slotProps?.dropzone}
-                />
+            {!readOnly && (
+                <>
+                    {maxAmountOfFilesSelected ? (
+                        <MaxFilesReachedInfo
+                            title={<FormattedMessage id="comet.fileSelect.maximumReached" defaultMessage="Maximum reached" />}
+                            severity="info"
+                            {...slotProps?.maxFilesReachedInfo}
+                        >
+                            <FormattedMessage
+                                id="comet.fileSelect.maximumFilesAmount"
+                                defaultMessage="The maximum number of uploads has been reached. Please delete files from the list before uploading new files."
+                            />
+                        </MaxFilesReachedInfo>
+                    ) : (
+                        <Dropzone
+                            disabled={disabled}
+                            hasError={Boolean(error)}
+                            onDrop={onDrop}
+                            accept={accept}
+                            multiple={multiple}
+                            maxSize={maxFileSize === null ? undefined : maxFileSize}
+                            maxFiles={maxNumberOfFilesToBeAdded}
+                            {...slotProps?.dropzone}
+                        />
+                    )}
+                </>
             )}
-            {files.length > 0 && (
+            {showFileList && (
                 <FileList {...slotProps?.fileList}>
-                    {files.map((file, index) => {
-                        return (
-                            <FileListItem
-                                key={index}
-                                file={file}
-                                onClickDownload={
-                                    "error" in file || !onDownload
-                                        ? undefined
-                                        : () => {
-                                              onDownload(file);
-                                          }
-                                }
-                                onClickDelete={() => onRemove(file)}
-                                {...slotProps?.fileListItem}
-                            />
-                        );
-                    })}
+                    {files.length > 0 ? (
+                        <>
+                            {files.map((file, index) => (
+                                <FileListItem
+                                    key={index}
+                                    file={file}
+                                    onClickDownload={
+                                        "error" in file || !onDownload
+                                            ? undefined
+                                            : () => {
+                                                  onDownload(file);
+                                              }
+                                    }
+                                    onClickDelete={readOnly ? undefined : () => onRemove(file)}
+                                    {...slotProps?.fileListItem}
+                                />
+                            ))}
+                        </>
+                    ) : (
+                        <FileListItem
+                            file={{
+                                name: intl.formatMessage({
+                                    id: "comet.fileSelect.noAttachments",
+                                    defaultMessage: "There are no attachments",
+                                }),
+                            }}
+                            {...slotProps?.fileListItem}
+                        />
+                    )}
                 </FileList>
             )}
             {Boolean(error) && (
@@ -134,7 +154,7 @@ export const FileSelect = <AdditionalValidFileValues = Record<string, unknown>,>
                     </ErrorMessage>
                 </Error>
             )}
-            {Boolean(filesInfoText) && <FilesInfoText {...slotProps?.filesInfoText}>{filesInfoText}</FilesInfoText>}
+            {Boolean(filesInfoText && !readOnly) && <FilesInfoText {...slotProps?.filesInfoText}>{filesInfoText}</FilesInfoText>}
         </Root>
     );
 };

diff --git a/packages/admin/admin/src/form/file/fileSelectItemTypes.ts b/packages/admin/admin/src/form/file/fileSelectItemTypes.ts
@@ -2,7 +2,7 @@ import { ReactNode } from "react";
 
 export type ValidFileSelectItem<AdditionalFileValues = Record<string, unknown>> = {
     name: string;
-    size: number;
+    size?: number;
 } & AdditionalFileValues;
 
 export type ErrorFileSelectItem = {

diff --git a/storybook/src/admin/form/file/FileSelect.tsx b/storybook/src/admin/form/file/FileSelect.tsx
@@ -56,6 +56,7 @@ storiesOf("@comet/admin/form/File", module)
         };
 
         const disabled = boolean("Disabled", false);
+        const readOnly = boolean("ReadOnly", false);
         const multiple = boolean("Multiple", false);
         const hasError = boolean("Has Error", false);
         const hasMaxFileSize = boolean("Limit file size (5 MB)", false);
@@ -80,6 +81,7 @@ storiesOf("@comet/admin/form/File", module)
                 }}
                 files={filesMapping[filesSelection]}
                 disabled={disabled}
+                readOnly={readOnly}
                 multiple={multiple}
                 maxFileSize={
                     hasMaxFileSize

diff --git a/storybook/src/docs/components/FileSelect/FileSelect.stories.mdx b/storybook/src/docs/components/FileSelect/FileSelect.stories.mdx
@@ -17,3 +17,9 @@ Used to combine `FileDropzone` and `FileSelectListItem` to handle the user's sel
 <Canvas>
     <Story id="stories-components-fileselect--fileselect" />
 </Canvas>
+
+### ReadOnly FileSelect
+
+<Canvas>
+    <Story id="stories-components-fileselect--readonly-fileselect" />
+</Canvas>
diff --git a/storybook/src/docs/components/FileSelect/FileSelect.stories.tsx b/storybook/src/docs/components/FileSelect/FileSelect.stories.tsx
@@ -46,4 +46,32 @@ storiesOf("stories/components/FileSelect", module)
                 maxFiles={5}
             />
         );
+    })
+    .add("ReadOnly FileSelect", () => {
+        const value: FileSelectItem[] = [
+            {
+                name: "Filename.xyz",
+                size: 4.3 * 1024 * 1024, // 4.3 MB
+            },
+            {
+                name: "Another file.png",
+                size: 568 * 1024, // 568 KB
+            },
+        ];
+
+        return (
+            <FileSelect
+                onDrop={(acceptedFiles, fileRejections) => {
+                    // Handle what happens with the dropped files
+                }}
+                onRemove={(file) => {
+                    // Handle remove
+                }}
+                onDownload={(file) => {
+                    // Handle download
+                }}
+                files={value}
+                readOnly
+            />
+        );
     });