Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Allow setting readOnly on FileSelect #2335

Merged
merged 2 commits into from
Jul 25, 2024
Merged

Allow setting readOnly on FileSelect #2335

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
490a895
Allow setting `readOnly` on `FileSelect`
jamesricky Jul 24, 2024
c587461
Make `onDrop` and `onRemove` optional as they are not needed when `re…
jamesricky Jul 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 64 additions & 44 deletions packages/admin/admin/src/form/file/FileSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -36,10 +36,11 @@ type ThemeProps = ThemedComponentBaseProps<{

export type FileSelectProps<AdditionalValidFileValues = Record<string, unknown>> = {
files: FileSelectItem<AdditionalValidFileValues>[];
onDrop: DropzoneOptions["onDrop"];
onRemove: (file: FileSelectItem<AdditionalValidFileValues>) => void;
onDrop?: DropzoneOptions["onDrop"];
onRemove?: (file: FileSelectItem<AdditionalValidFileValues>) => void;
onDownload?: (file: FileSelectItem<AdditionalValidFileValues>) => void;
disabled?: boolean;
readOnly?: boolean;
accept?: Accept;
maxFileSize?: number;
maxFiles?: number;
Expand All @@ -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,
Expand All @@ -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;
Expand All @@ -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 || !onRemove ? undefined : () => onRemove(file)}
{...slotProps?.fileListItem}
/>
))}
</>
) : (
<FileListItem
file={{
name: intl.formatMessage({
id: "comet.fileSelect.noAttachments",
defaultMessage: "There are no attachments",
}),
}}
{...slotProps?.fileListItem}
/>
)}
</FileList>
)}
{Boolean(error) && (
Expand All @@ -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>}
johnnyomair marked this conversation as resolved.
Show resolved Hide resolved
</Root>
);
};
Expand Down
2 changes: 1 addition & 1 deletion packages/admin/admin/src/form/file/fileSelectItemTypes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { ReactNode } from "react";

export type ValidFileSelectItem<AdditionalFileValues = Record<string, unknown>> = {
name: string;
size: number;
size?: number;
johnnyomair marked this conversation as resolved.
Show resolved Hide resolved
} & AdditionalFileValues;

export type ErrorFileSelectItem = {
Expand Down
2 changes: 2 additions & 0 deletions storybook/src/admin/form/file/FileSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -80,6 +81,7 @@ storiesOf("@comet/admin/form/File", module)
}}
files={filesMapping[filesSelection]}
disabled={disabled}
readOnly={readOnly}
multiple={multiple}
maxFileSize={
hasMaxFileSize
Expand Down
6 changes: 6 additions & 0 deletions storybook/src/docs/components/FileSelect/FileSelect.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
22 changes: 22 additions & 0 deletions storybook/src/docs/components/FileSelect/FileSelect.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,4 +46,26 @@ 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
onDownload={(file) => {
// Handle download
}}
files={value}
readOnly
/>
);
});
Loading