From ba2a5a9505f068305f504cc3ec61164bd24e0140 Mon Sep 17 00:00:00 2001
From: Anthony Raymond <anthonyraymond@users.noreply.github.com>
Date: Tue, 26 May 2020 18:06:03 +0200
Subject: [PATCH 1/2] Make previewChips use the grid system as well

Before this PR `previewGridProps` and `previewGridClasses` had no effect if we switched to `useChipsForPreview` and all the chips got stacked one below the other because of the use of a simple div.

Using the already well established **previewGrid** props allow for much more chip customizations.

Chips are now displayed inline by default but thanks to the `previewGridProps` this can be changed at any time
---
 src/components/PreviewList.js | 35 +++++++++++++++++++++++++----------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/components/PreviewList.js b/src/components/PreviewList.js
index 514414b2..7163171c 100644
--- a/src/components/PreviewList.js
+++ b/src/components/PreviewList.js
@@ -60,16 +60,31 @@ function PreviewList({
 }) {
     if (useChipsForPreview) {
         return (
-            fileObjects.map((fileObject, i) => (
-                <div key={i}>
-                    <Chip
-                        variant="outlined"
-                        {...previewChipProps}
-                        label={fileObject.file.name}
-                        onDelete={handleRemove(i)}
-                    />
-                </div>
-            ))
+            <Grid
+                spacing: 1
+                direction: 'row'
+                {...previewGridProps.container}
+                container={true}
+                className={clsx(classes.root, previewGridClasses.container)}
+            >
+                {fileObjects.map((fileObject, i) => {
+                    return (
+                        <Grid
+                            {...previewGridProps.item}
+                            item={true}
+                            key={`${fileObject.file?.name ?? 'file'}-${i}`}
+                            className={classes.imageContainer}
+                        >
+                            <Chip
+                                variant="outlined"
+                                {...previewChipProps}
+                                label={fileObject.file.name}
+                                onDelete={handleRemove(i)}
+                            />
+                        </Grid>
+                    );
+                })}
+            </Grid>
         );
     }
 

From fedb150e6fe31f579c2b94328b43f7f7828c6586 Mon Sep 17 00:00:00 2001
From: Anthony RAYMOND <anthonyraymond@users.noreply.github.com>
Date: Fri, 12 Jun 2020 00:01:38 +0200
Subject: [PATCH 2/2] Add a simple example on how to customize preview chips
 with the grid system

---
 src/components/DropzoneArea.md | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/src/components/DropzoneArea.md b/src/components/DropzoneArea.md
index 2df45dd4..0de8071c 100644
--- a/src/components/DropzoneArea.md
+++ b/src/components/DropzoneArea.md
@@ -59,3 +59,30 @@ const handlePreviewIcon = (fileObject, classes) => {
   getPreviewIcon={handlePreviewIcon}
 />
 ```
+### Using chips for preview
+
+Chips use the Grid system as well, so you can customize the way they appears and benefit from the Material-UI grid customizations
+
+```jsx
+import * as React from 'react';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme: Theme) => createStyles({
+    previewChip: {
+      minWidth: 160,
+      maxWidth: 210
+    }
+  }),
+)
+
+const classes = useStyles()
+
+<DropzoneArea
+  showPreviews={true}
+  showPreviewsInDropzone={false}
+  useChipsForPreview
+  previewGridProps={{container: { spacing: 1, direction: 'row' }}}
+  previewChipProps={{classes: { root: classes.previewChip } }}
+  previewText="Selected files"
+/>
+```