Merge pull request #173 from anthonyraymond/patch-1

Make previewChips use the grid system as well
Yuvaleros · Jun 14, 2020 · fdb8dbd · fdb8dbd
2 parents 3cb69b1 + fedb150
commit fdb8dbd
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 10 deletions.
diff --git 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"
+/>
+```
diff --git 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>
         );
     }