📝 Add various examples that showcase the new GridList approach to the…

… preview

src/components/DropzoneArea.md

@@ -6,12 +6,45 @@ import { DropzoneArea } from 'material-ui-dropzone';
 
 ### Basic usage
 
+Add up to 3 files
+
 ```jsx
 <DropzoneArea
   onChange={(files) => console.log('Files:', files)}
 />
 ```
 
+### Single file upload
+
+```jsx
+<DropzoneArea
+  filesLimit={1}
+  onChange={(files) => console.log('Files:', files)}
+/>
+```
+
+### Up to 20 files (previewed inside dropzone area)
+
+```jsx
+<DropzoneArea
+  filesLimit={20}  
+  onChange={(files) => console.log('Files:', files)}
+/>
+```
+
+
+### Up to 20 Files (previewed below dropzone area)
+
+```jsx
+<DropzoneArea
+  filesLimit={20}
+  previewType='below'
+  showFileNames
+  onChange={(files) => console.log('Files:', files)}
+/>
+```
+
+
 ### Accept only images
 
 ```jsx
@@ -33,29 +66,64 @@ Demonstration of how to customize the preview icon for:
 
 ```jsx
 import * as React from 'react';
+import Grid from '@material-ui/core/Grid'
 import { AttachFile, AudioTrack, Description, PictureAsPdf, Theaters } from '@material-ui/icons';
+import clsx from 'clsx'
 
-const handlePreviewIcon = (fileObject, classes) => {
+const handlePreviewIcon = (fileObject, classes, isImage, titleBarTop) => {
   const {type} = fileObject.file
   const iconProps = {
-    className : classes.image,
+     className : clsx(classes.fileIcon, {[classes.fileIconBottom]: titleBarTop})
   }
 
-  if (type.startsWith("video/")) return <Theaters {...iconProps} />
-  if (type.startsWith("audio/")) return <AudioTrack {...iconProps} />
+  let icon
+
+  if (type.startsWith("video/")) icon = <Theaters {...iconProps} />
+  if (type.startsWith("audio/")) icon = <AudioTrack {...iconProps} />
 
   switch (type) {
     case "application/msword":
     case "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
-      return <Description {...iconProps} />
+      icon = <Description {...iconProps} />;
+      break;
     case "application/pdf":
-      return <PictureAsPdf {...iconProps} />
+      icon = <PictureAsPdf {...iconProps} />;
+      break;
     default:
-      return <AttachFile {...iconProps} />
+      icon = <AttachFile {...iconProps} />;
+      break;      
   }
+
+  return <Grid container className={classes.iconWrapper} justify="center" >
+        {icon}
+    </Grid>
 }
 
 <DropzoneArea
   getPreviewIcon={handlePreviewIcon}
+
 />
 ```
+
+
+### With custom preview props
+
+```jsx
+<DropzoneArea
+  filesLimit={20}
+  showFileNames
+  previewGridProps={{
+    gridList : {
+      cellHeight: 220, // the mui default is 180
+      cols: 4, // force the number of columns
+    },
+    gridListTitleBar : {
+      titlePosition : 'top', // mui default is bottom
+      actionPosition: 'left', // mui default is right
+      style: {backgroundColor: 'rgba(248, 132, 132, 0.63)'}
+    },
+  }}
+
+  onChange={(files) => console.log('Files:', files)}
+/>
+```

src/components/DropzoneDialog.md

@@ -27,7 +27,7 @@ const [open, setOpen] = React.useState(false);
       console.log('Files:', files);
       setOpen(false);
     }}
-    showPreviews={true}
+    previewType='below'
     showFileNames={true}
   />
 </div>