feat(components): Added hideDropzone prop to FileUpload

Ticket: epic/Users-16 Reviewed-by: @MIGUELez11 Refs: #178
leemonade · Jul 25, 2024 · cb0270c · cb0270c
1 parent 6719340
commit cb0270c
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 68 deletions.
diff --git a/packages/components/src/form/FileUpload/FileUpload.js b/packages/components/src/form/FileUpload/FileUpload.js
@@ -29,6 +29,7 @@ export const FILE_UPLOAD_DEFAULT_PROPS = {
   multipleUpload: true,
   showError: false,
   hideUploadButton: false,
+  hideDropzone: false,
   single: false,
   initialFiles: [],
   inputWrapperProps: {},
@@ -55,6 +56,7 @@ export const FILE_UPLOAD_PROP_TYPES = {
     uploadButton: PropTypes.string,
   }),
   hideUploadButton: PropTypes.bool,
+  hideDropzone: PropTypes.bool,
   single: PropTypes.bool,
   inputWrapperProps: PropTypes.shape(INPUT_WRAPPER_PROP_TYPES),
   initialFiles: PropTypes.arrayOf(PropTypes.object),
@@ -74,6 +76,7 @@ const FileUpload = ({
   showError,
   errorMessage,
   hideUploadButton,
+  hideDropzone,
   single,
   inputWrapperProps = {},
   initialFiles,
@@ -116,7 +119,7 @@ const FileUpload = ({
   }, [initialFiles]);
 
   const { classes, theme } = FileUploadStyles(
-    { disabled, single, files, hasError, fullWidth },
+    { disabled, single, files, hasError, hideDropzone },
     { name: 'FileUpload' },
   );
 
@@ -154,6 +157,7 @@ const FileUpload = ({
           </Group>
         </MantineDropzone>
       </InputWrapper>
+
       {showError && error && (
         <Alert
           className={classes.errorAlert}
@@ -243,7 +247,7 @@ const FileUpload = ({
           ))}
         </Stack>
       )}
-      {!hideUploadButton && (
+      {!hideUploadButton && !(single && files.length > 0) && (
         <Box className={classes.uploadButton}>
           <Button onClick={() => openRef.current()} disabled={disabled || loading}>
             {getUploadButtonLabel(labels?.uploadButton)}

diff --git a/packages/components/src/form/FileUpload/FileUpload.styles.js b/packages/components/src/form/FileUpload/FileUpload.styles.js
@@ -29,72 +29,73 @@ const getDisabledStyles = (disabled, theme) => {
   };
 };
 
-const FileUploadStyles = createStyles((theme, { disabled, single, files, hasError, fullWidth }) => {
-  const hideDropzone = single && files.length > 0;
-  const dropzoneTheme = theme.other.dropzone;
+const FileUploadStyles = createStyles(
+  (theme, { disabled, single, files, hasError, hideDropzone: _hideDropzone }) => {
+    const hideDropzone = _hideDropzone || (single && files.length > 0);
+    const dropzoneTheme = theme.other.dropzone;
 
-  return {
-    root: {
-      ...getFontExpressive(theme.fontSizes['2']),
-      display: hideDropzone ? 'none' : 'flex',
-      justifyContent: 'center',
-      padding: pxToRem(25),
-      border: hasError
-        ? `${dropzoneTheme.border.width} solid ${theme.colors.fatic01}`
-        : `${dropzoneTheme.border.width} solid ${dropzoneTheme.border.color.default}`,
-      borderRadius: dropzoneTheme.border.radius,
-      '&:hover': { ...getActive(dropzoneTheme) },
-      ...getDisabledStyles(disabled, theme),
-    },
-    active: {
-      ...getActive(dropzoneTheme),
-    },
-    groupContainer: {
-      pointerEvents: 'none',
-    },
-    container: {
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      textAlign: 'center',
-    },
-    icon: {
-      color: dropzoneTheme.content.color.icon,
-    },
-    title: {
-      ...(dropzoneTheme.content['text--medium'] ?? {}),
-      marginTop: pxToRem(9),
-      color: dropzoneTheme.content.color.default,
-    },
-    subtitle: {
-      ...(dropzoneTheme.content.text ?? {}),
-      marginTop: pxToRem(8),
-      color: dropzoneTheme.content.color['default--subtle'],
-    },
-    droppedFile: {
-      width: 468,
-      // padding: `${pxToRem(28)} ${pxToRem(16)} ${pxToRem(28)} ${pxToRem(28)}`,
-    },
-    fileList: {
-      marginTop: !hideDropzone && pxToRem(theme.spacing[4]),
-      width: 'min-content',
-    },
-    errorAlert: {
-      marginTop: pxToRem(theme.spacing[4]),
-    },
-    uploadButton: {
-      marginTop: pxToRem(theme.spacing[4]),
-    },
-    fileItemDisplay: {
-      ...theme.other.global.content.typo.body['sm--semiBold'],
-      padding: '18px 8px',
-      borderWidth: 1,
-      borderStyle: 'solid',
-      borderColor: theme.other.global.border.color.line.muted,
-      borderRadius: 4,
-      minWidth: '100%',
-    },
-  };
-});
+    return {
+      root: {
+        ...getFontExpressive(theme.fontSizes['2']),
+        display: hideDropzone ? 'none' : 'flex',
+        justifyContent: 'center',
+        padding: pxToRem(25),
+        border: hasError
+          ? `${dropzoneTheme.border.width} solid ${theme.colors.fatic01}`
+          : `${dropzoneTheme.border.width} solid ${dropzoneTheme.border.color.default}`,
+        borderRadius: dropzoneTheme.border.radius,
+        '&:hover': { ...getActive(dropzoneTheme) },
+        ...getDisabledStyles(disabled, theme),
+      },
+      active: {
+        ...getActive(dropzoneTheme),
+      },
+      groupContainer: {
+        pointerEvents: 'none',
+      },
+      container: {
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        textAlign: 'center',
+      },
+      icon: {
+        color: dropzoneTheme.content.color.icon,
+      },
+      title: {
+        ...(dropzoneTheme.content['text--medium'] ?? {}),
+        marginTop: pxToRem(9),
+        color: dropzoneTheme.content.color.default,
+      },
+      subtitle: {
+        ...(dropzoneTheme.content.text ?? {}),
+        marginTop: pxToRem(8),
+        color: dropzoneTheme.content.color['default--subtle'],
+      },
+      droppedFile: {
+        width: 468,
+      },
+      fileList: {
+        marginTop: !hideDropzone && pxToRem(theme.spacing[4]),
+        width: 'min-content',
+      },
+      errorAlert: {
+        marginTop: pxToRem(theme.spacing[4]),
+      },
+      uploadButton: {
+        marginTop: pxToRem(theme.spacing[4]),
+      },
+      fileItemDisplay: {
+        ...theme.other.global.content.typo.body['sm--semiBold'],
+        padding: '18px 8px',
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: theme.other.global.border.color.line.muted,
+        borderRadius: 4,
+        minWidth: '100%',
+      },
+    };
+  },
+);
 
 export { FileUploadStyles };