Add support for style with MUI Theme

docs/theming.md

@@ -0,0 +1,39 @@
+`material-ui-dropzone` components support theming through [`MaterialUI Theme`](https://material-ui.com/customization/theming/).
+
+#### DropzoneArea
+
+**Theme Namespace:** `MuiDropzoneArea`
+
+| Rule name     | Global class                   | Description                                                     |
+| ------------- | ------------------------------ | --------------------------------------------------------------- |
+| root          | .MuiDropzoneArea-root          | The class applied to DropzoneArea container.                    |
+| active        | .MuiDropzoneArea-active        | The class applied when the Dropzone is 'active'.                |
+| invalid       | .MuiDropzoneArea-invalid       | The class applied when the Dropzone is receiving invalid files. |
+| textContainer | .MuiDropzoneArea-textContainer | The class applied to the text container div.                    |
+| text          | .MuiDropzoneArea-text          | The class applied to the hint text.                             |
+| icon          | .MuiDropzoneArea-icon          | The class applied to the hint icon.                             |
+
+#### Preview list
+
+**Theme Namespace:** `MuiDropzonePreviewList`
+
+| Rule name      | Global class                           | Description                                              |
+| -------------- | -------------------------------------- | -------------------------------------------------------- |
+| root           | .MuiDropzonePreviewList-root           | The class applied to PreviewList container.              |
+| imageContainer | .MuiDropzonePreviewList-imageContainer | The class applied to the single preview image container. |
+| image          | .MuiDropzonePreviewList-image          | The class applied to the single preview image.           |
+| removeButton   | .MuiDropzonePreviewList-removeButton   | The class applied to the preview 'remove' FAB.           |
+
+#### Alert Snackbar
+
+**Theme Namespace:** `MuiDropzoneSnackbar`
+
+| Rule name   | Global class                     | Description                                                   |
+| ----------- | -------------------------------- | ------------------------------------------------------------- |
+| info        | .MuiDropzoneSnackbar-info        | The class applied to the alert snackbar in case of 'info'.    |
+| success     | .MuiDropzoneSnackbar-success     | The class applied to the alert snackbar in case of 'success'. |
+| warning     | .MuiDropzoneSnackbar-warning     | The class applied to the alert snackbar in case of 'warning'. |
+| error       | .MuiDropzoneSnackbar-error       | The class applied to the alert snackbar in case of 'error'.   |
+| message     | .MuiDropzoneSnackbar-message     | The class applied to the alert snackbar message.              |
+| icon        | .MuiDropzoneSnackbar-icon        | The class applied to the alert snackbar icon.                 |
+| closeButton | .MuiDropzoneSnackbar-closeButton | The class applied to the alert snackbar 'close' button.       |

src/components/DropzoneArea.js

@@ -12,7 +12,7 @@ import {convertBytesToMbsOrKbs, createFileFromUrl, isImage, readFile} from '../h
 import PreviewList from './PreviewList';
 import SnackbarContentWrapper from './SnackbarContentWrapper';
 
-const styles = {
+const styles = ({palette, shape, spacing}) => ({
     '@keyframes progress': {
         '0%': {
             backgroundPosition: '0 0',
@@ -21,39 +21,44 @@ const styles = {
             backgroundPosition: '-70px 0',
         },
     },
-    dropZone: {
+    root: {
         position: 'relative',
         width: '100%',
         minHeight: '250px',
-        backgroundColor: '#F0F0F0',
+        backgroundColor: palette.background.paper,
         border: 'dashed',
-        borderColor: '#C8C8C8',
-        cursor: 'pointer',
+        borderColor: palette.divider,
+        borderRadius: shape.borderRadius,
         boxSizing: 'border-box',
+        cursor: 'pointer',
         overflow: 'hidden',
     },
-    stripes: {
-        border: 'solid',
-        backgroundImage: 'repeating-linear-gradient(-45deg, #F0F0F0, #F0F0F0 25px, #C8C8C8 25px, #C8C8C8 50px)',
-        animation: 'progress 2s linear infinite !important',
+    active: {
+        animation: '$progress 2s linear infinite !important',
+        // eslint-disable-next-line max-len
+        backgroundImage: `repeating-linear-gradient(-45deg, ${palette.background.paper}, ${palette.background.paper} 25px, ${palette.divider} 25px, ${palette.divider} 50px)`,
         backgroundSize: '150% 100%',
+        border: 'solid',
+        borderColor: palette.primary.light,
     },
-    rejectStripes: {
-        backgroundImage: 'repeating-linear-gradient(-45deg, #fc8785, #fc8785 25px, #f4231f 25px, #f4231f 50px)',
+    invalid: {
+        // eslint-disable-next-line max-len
+        backgroundImage: `repeating-linear-gradient(-45deg, ${palette.error.light}, ${palette.error.light} 25px, ${palette.error.dark} 25px, ${palette.error.dark} 50px)`,
+        borderColor: palette.error.main,
     },
-    dropzoneTextStyle: {
+    textContainer: {
         textAlign: 'center',
     },
-    uploadIconSize: {
+    text: {
+        marginBottom: spacing(3),
+        marginTop: spacing(3),
+    },
+    icon: {
         width: 51,
         height: 51,
-        color: '#909090',
-    },
-    dropzoneParagraph: {
-        marginBottom: 20,
-        marginTop: 20,
+        color: palette.text.primary,
     },
-};
+});
 
 const defaultSnackbarAnchorOrigin = {
     horizontal: 'left',
@@ -63,13 +68,13 @@ const defaultSnackbarAnchorOrigin = {
 const defaultGetPreviewIcon = (fileObject, classes) => {
     if (isImage(fileObject.file)) {
         return (<img
-            className={classes.smallPreviewImg}
+            className={classes.image}
             role="presentation"
             src={fileObject.data}
         />);
     }
 
-    return <AttachFileIcon className={classes.smallPreviewImg} />;
+    return <AttachFileIcon className={classes.image} />;
 };
 
 /**
@@ -301,23 +306,23 @@ class DropzoneArea extends React.PureComponent {
                         <div
                             {...getRootProps()}
                             className={clsx(
-                                classes.dropZone,
+                                classes.root,
                                 dropzoneClass,
-                                isDragActive && classes.stripes,
-                                (!disableRejectionFeedback && isDragReject) && classes.rejectStripes,
+                                isDragActive && classes.active,
+                                (!disableRejectionFeedback && isDragReject) && classes.invalid,
                             )}
                         >
                             <input {...inputProps} {...getInputProps()} />
 
-                            <div className={classes.dropzoneTextStyle}>
+                            <div className={classes.textContainer}>
                                 <Typography
                                     variant="h5"
                                     component="p"
-                                    className={clsx(classes.dropzoneParagraph, dropzoneParagraphClass)}
+                                    className={clsx(classes.text, dropzoneParagraphClass)}
                                 >
                                     {dropzoneText}
                                 </Typography>
-                                <CloudUploadIcon className={classes.uploadIconSize} />
+                                <CloudUploadIcon className={classes.icon} />
                             </div>
 
                             {previewsInDropzoneVisible &&
@@ -528,7 +533,7 @@ DropzoneArea.propTypes = {
      * *Default*: If its an image then displays a preview the image, otherwise it will display an attachment icon
      *
      * @param {File} objectFile The file which the preview will belong to
-     * @param {Object} classes The classes for the file preview icon, in the default case we use the smallPreviewImg className.
+     * @param {Object} classes The classes for the file preview icon, in the default case we use the 'image' className.
      */
     getPreviewIcon: PropTypes.func,
     /**
@@ -557,4 +562,4 @@ DropzoneArea.propTypes = {
     onDelete: PropTypes.func,
 };
 
-export default withStyles(styles)(DropzoneArea);
+export default withStyles(styles, {name: 'MuiDropzoneArea'})(DropzoneArea);

src/components/DropzoneArea.md

@@ -24,35 +24,35 @@ import { DropzoneArea } from 'material-ui-dropzone';
 
 ### Custom Preview Icon
 
-Demonstration of how to customize the preview icon for: 
+Demonstration of how to customize the preview icon for:
+
 * PDF files
 * Video
 * Audio
 * Word Documents
 
-
 ```jsx
-import react from 'react'
+import * as React from 'react';
 import { AttachFile, AudioTrack, Description, PictureAsPdf, Theaters } from '@material-ui/icons';
 
-const handlePreviewIcon=(fileObject, classes) => {
-  const {type} = fileObject.file 
-  const iconProps = { className : classes.smallPreviewImg} 
+const handlePreviewIcon = (fileObject, classes) => {
+  const {type} = fileObject.file
+  const iconProps = {
+    className : classes.image,
+  }
 
   if (type.startsWith("video/")) return <Theaters {...iconProps} />
   if (type.startsWith("audio/")) return <AudioTrack {...iconProps} />
 
-  let component
   switch (type) {
-    case "application/msword": 
-    case "application/vnd.openxmlformats-officedocument.wordprocessingml.document": 
-      return <Description {...iconProps} />      
+    case "application/msword":
+    case "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
+      return <Description {...iconProps} />
     case "application/pdf":
-      return <PictureAsPdf {...iconProps} />  
+      return <PictureAsPdf {...iconProps} />
     default:
-      return <AttachFile {...iconProps} />  
+      return <AttachFile {...iconProps} />
   }
-
 }
 
 <DropzoneArea

src/components/PreviewList.js

@@ -8,42 +8,41 @@ import clsx from 'clsx';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 
-const styles = {
-    removeBtn: {
-        transition: '.5s ease',
-        position: 'absolute',
-        opacity: 0,
-        top: -5,
-        right: -5,
-        width: 40,
-        height: 40,
+const styles = ({palette, shape, spacing}) => ({
+    root: {},
+    imageContainer: {
+        position: 'relative',
+        zIndex: 10,
+        textAlign: 'center',
+        '&:hover $image': {
+            opacity: 0.3,
+        },
+        '&:hover $removeButton': {
+            opacity: 1,
+        },
     },
-    smallPreviewImg: {
+    image: {
         height: 100,
         width: 'initial',
         maxWidth: '100%',
-        marginTop: 5,
-        marginRight: 10,
-        color: 'rgba(0, 0, 0, 0.87)',
+        color: palette.text.primary,
         transition: 'all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms',
         boxSizing: 'border-box',
         boxShadow: 'rgba(0, 0, 0, 0.12) 0 1px 6px, rgba(0, 0, 0, 0.12) 0 1px 4px',
-        borderRadius: 2,
+        borderRadius: shape.borderRadius,
         zIndex: 5,
         opacity: 1,
     },
-    imageContainer: {
-        position: 'relative',
-        zIndex: 10,
-        textAlign: 'center',
-        '&:hover $smallPreviewImg': {
-            opacity: 0.3,
-        },
-        '&:hover $removeBtn': {
-            opacity: 1,
-        },
+    removeButton: {
+        transition: '.5s ease',
+        position: 'absolute',
+        opacity: 0,
+        top: spacing(-1),
+        right: spacing(-1),
+        width: 40,
+        height: 40,
     },
-};
+});
 
 function PreviewList({
     fileObjects,
@@ -61,30 +60,33 @@ function PreviewList({
             fileObjects.map((fileObject, i) => (
                 <div key={i}>
                     <Chip
-                        label={fileObject.file.name}
-                        onDelete={handleRemove(i)}
                         variant="outlined"
                         {...previewChipProps}
+                        label={fileObject.file.name}
+                        onDelete={handleRemove(i)}
                     />
                 </div>
             ))
         );
     }
 
     return (
-        <Grid container={true} spacing={8} className={previewGridClasses.container} {...previewGridProps.container}>
+        <Grid
+            spacing={8}
+            {...previewGridProps.container}
+            container={true}
+            className={clsx(classes.root, previewGridClasses.container)}
+        >
             {fileObjects.map((fileObject, i) => {
-                const img = getPreviewIcon(fileObject, classes);
-
                 return (
                     <Grid
-                        key={i}
-                        item={true}
                         xs={4}
                         {...previewGridProps.item}
-                        className={clsx(previewGridClasses.item, classes.imageContainer)}
+                        item={true}
+                        key={`${fileObject.file?.name ?? 'file'}-${i}`}
+                        className={clsx(classes.imageContainer, previewGridClasses.item)}
                     >
-                        {img}
+                        {getPreviewIcon(fileObject, classes)}
 
                         {showFileNames && (
                             <Typography variant="body1" component="p">
@@ -95,7 +97,7 @@ function PreviewList({
                         <Fab
                             onClick={handleRemove(i)}
                             aria-label="Delete"
-                            className={classes.removeBtn}
+                            className={classes.removeButton}
                         >
                             <DeleteIcon />
                         </Fab>
@@ -118,4 +120,4 @@ PreviewList.propTypes = {
     useChipsForPreview: PropTypes.bool,
 };
 
-export default withStyles(styles)(PreviewList);
+export default withStyles(styles, {name: 'MuiDropzonePreviewList'})(PreviewList);