feat(FileUpload): Add border to selected files and status icon

leemonade · Jan 17, 2024 · eb2a3d6 · eb2a3d6
1 parent cf4e93b
commit eb2a3d6
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 11 deletions.
diff --git a/packages/components/src/form/FileUpload/FileUpload.js b/packages/components/src/form/FileUpload/FileUpload.js
@@ -1,15 +1,21 @@
-import React, { useMemo, useRef } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { Group, Text } from '@mantine/core';
 import { Dropzone as MantineDropzone } from '@mantine/dropzone';
-import { DeleteBinIcon, SynchronizeArrowIcon } from '@bubbles-ui/icons/outline/';
+import {
+  DeleteBinIcon,
+  SynchronizeArrowIcon,
+  RemoveCircleIcon,
+  CheckCircleIcon,
+} from '@bubbles-ui/icons/outline/';
 import { isEmpty, isFunction, isString } from 'lodash';
 import { FileUploadStyles } from './FileUpload.styles';
 import { Stack, Box } from '../../layout';
 import { FileItemDisplay } from '../../informative/FileItemDisplay';
 import { Alert } from '../../feedback/Alert';
 import { InputWrapper, INPUT_WRAPPER_PROP_TYPES } from '../InputWrapper';
 import { Button } from '../Button';
+import { Loader } from '../../../lib/feedback/Loader/Loader';
 
 export const FILE_UPLOAD_DEFAULT_PROPS = {
   disabled: false,
@@ -94,7 +100,7 @@ const FileUpload = ({
     }
   }, [initialFiles]);
 
-  const { classes, cx } = FileUploadStyles(
+  const { classes, theme } = FileUploadStyles(
     { disabled, single, files, hasError },
     { name: 'FileUpload' },
   );
@@ -151,10 +157,55 @@ const FileUpload = ({
         </Alert>
       )}
       {files.length > 0 && (
-        <Stack className={classes.fileList} direction={'column'}>
+        <Stack spacing={4} className={classes.fileList} direction={'column'}>
           {files.map((file, index) => (
-            <Stack key={index} alignItems="center" spacing={8} className={classes.droppedFile}>
-              <FileItemDisplay iconSize={30} filename={file.name} thumbnailUrl={getFileUrl(file)} />
+            <Stack key={index} alignItems="center" spacing={4} className={classes.droppedFile}>
+              <Stack
+                className={classes.fileItemDisplay}
+                spacing={4}
+                justifyContent="space-between"
+                alignItems="center"
+              >
+                <FileItemDisplay
+                  iconSize={20}
+                  filename={file.name}
+                  thumbnailUrl={getFileUrl(file)}
+                />
+                {file.status === 'loading' && (
+                  <Box sx={{ position: 'relative', width: 20, height: 20, minWidth: 20 }}>
+                    <Box
+                      sx={{
+                        position: 'absolute',
+                        left: -1,
+                        top: -7.5,
+                        width: 45,
+
+                        height: 40,
+                      }}
+                    >
+                      <Loader />
+                    </Box>
+                  </Box>
+                )}
+                {file.status === 'success' && (
+                  <Box sx={{ width: 20, height: 20 }}>
+                    <CheckCircleIcon
+                      color={theme.other.core.color.success['500']}
+                      width={20}
+                      height={20}
+                    />
+                  </Box>
+                )}
+                {file.status === 'error' && (
+                  <Box sx={{ width: 20, height: 20 }}>
+                    <RemoveCircleIcon
+                      color={theme.other.core.color.danger['500']}
+                      width={20}
+                      height={20}
+                    />
+                  </Box>
+                )}
+              </Stack>
               <Box noFlex>
                 <Button
                   onClick={() => removeFile(index)}

diff --git a/packages/components/src/form/FileUpload/FileUpload.stories.js b/packages/components/src/form/FileUpload/FileUpload.stories.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import { Box } from '@mantine/core';
-import { FileUpload, FILE_UPLOAD_DEFAULT_PROPS } from './FileUpload';
-import mdx from './FileUpload.mdx';
 import { MIME_TYPES } from '@mantine/dropzone';
 import { CloudUploadIcon } from '@bubbles-ui/icons/outline';
+import { FileUpload, FILE_UPLOAD_DEFAULT_PROPS } from './FileUpload';
+import mdx from './FileUpload.mdx';
 
 export default {
   title: 'Molecules/Form/FileUpload',
@@ -20,12 +20,11 @@ export default {
   argTypes: {
     onChange: { action: 'File dropped' },
     accept: { options: MIME_TYPES, control: { type: 'multi-select' } },
+    status: { options: ['error', 'loading', 'success'], control: { type: 'select' } },
   },
 };
 
-const Template = ({ children, ...props }) => {
-  return <FileUpload {...props}>{children}</FileUpload>;
-};
+const Template = ({ children, ...props }) => <FileUpload {...props}>{children}</FileUpload>;
 
 export const Playground = Template.bind({});
 
@@ -36,3 +35,27 @@ Playground.args = {
   subtitle: 'or drop here a file from your computer',
   errorMessage: { title: 'Error', message: 'File was rejected' },
 };
+
+export const WithLoaders = Template.bind({});
+
+WithLoaders.args = {
+  ...FILE_UPLOAD_DEFAULT_PROPS,
+  initialFiles: [
+    {
+      name: 'My document.docx',
+      status: 'success',
+    },
+    {
+      name: 'My awesome image.svg',
+      status: 'loading',
+    },
+    {
+      name: 'My boring pdf.pdf',
+      status: 'error',
+    },
+  ],
+  icon: <CloudUploadIcon height={32} width={32} />,
+  title: 'Click to browse your file',
+  subtitle: 'or drop here a file from your computer',
+  errorMessage: { title: 'Error', message: 'File was rejected' },
+};
diff --git a/packages/components/src/form/FileUpload/FileUpload.styles.js b/packages/components/src/form/FileUpload/FileUpload.styles.js
@@ -72,6 +72,7 @@ const FileUploadStyles = createStyles((theme, { disabled, single, files, hasErro
       color: dropzoneTheme.content.color['default--subtle'],
     },
     droppedFile: {
+      minWidth: 500,
       // padding: `${pxToRem(28)} ${pxToRem(16)} ${pxToRem(28)} ${pxToRem(28)}`,
     },
     fileList: {
@@ -85,6 +86,15 @@ const FileUploadStyles = createStyles((theme, { disabled, single, files, hasErro
     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%',
+    },
   };
 });