Skip to content

feat: improves onDelete, dropzoneText and docs #324

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

feat: improves onDelete, dropzoneText and docs #324

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f16aa78
feat: adds deleted file index to onDelete callback
Sep 15, 2021
295c10f
feat: dropzone text as string or element
Sep 16, 2021
96200ab
docs: improving screenshots into a gif and fixed some typos
Sep 16, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions .size-snapshot.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
{
"dist/index.js": {
"bundled": 57189,
"minified": 25753,
"gzipped": 5983
"bundled": 57367,
"minified": 25794,
"gzipped": 5995
},
"dist/index.es.js": {
"bundled": 56007,
"minified": 24741,
"gzipped": 5861,
"bundled": 56185,
"minified": 24782,
"gzipped": 5873,
"treeshaked": {
"rollup": {
"code": 10815,
"code": 10836,
"import_statements": 1533
},
"webpack": {
"code": 21871
"code": 21894
}
}
}
Expand Down
37 changes: 14 additions & 23 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
# material-ui-dropzone
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Revert changes to README.md or exclude them from this PR.


> Material-UI-dropzone is a [React](https://github.com/facebook/react) component using [Material-UI](https://github.com/mui-org/material-ui) and is based on the excellent [react-dropzone](https://github.com/react-dropzone/react-dropzone) library.
[![License](https://img.shields.io/github/license/yuvaleros/material-ui-dropzone)](https://github.com/Yuvaleros/material-ui-dropzone/blob/master/LICENSE) [![All Contributors](https://img.shields.io/badge/all_contributors-9-orange.svg)](#contributors) [![Rebuild Dist Workflow Status](https://img.shields.io/github/workflow/status/yuvaleros/material-ui-dropzone/Rebuild%20Dist?label=build)](https://github.com/Yuvaleros/material-ui-dropzone/actions?query=workflow%3A%22Rebuild+Dist%22) [![Update Docs Workflow Status](https://img.shields.io/github/workflow/status/yuvaleros/material-ui-dropzone/Update%20Docs?label=docs)](https://github.com/Yuvaleros/material-ui-dropzone/actions?query=workflow%3A%22Update+Docs%22) [![npm package](https://img.shields.io/npm/v/material-ui-dropzone)](https://www.npmjs.com/package/material-ui-dropzone) [![npm downloads](https://img.shields.io/npm/dm/material-ui-dropzone.svg)](https://www.npmjs.com/package/material-ui-dropzone)

[![License](https://img.shields.io/github/license/yuvaleros/material-ui-dropzone)](https://github.com/Yuvaleros/material-ui-dropzone/blob/master/LICENSE) <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->[![All Contributors](https://img.shields.io/badge/all_contributors-9-orange.svg)](#contributors)
<!-- ALL-CONTRIBUTORS-BADGE:END -->

[![Rebuild Dist Workflow Status](https://img.shields.io/github/workflow/status/yuvaleros/material-ui-dropzone/Rebuild%20Dist?label=build)](https://github.com/Yuvaleros/material-ui-dropzone/actions?query=workflow%3A%22Rebuild+Dist%22) [![Update Docs Workflow Status](https://img.shields.io/github/workflow/status/yuvaleros/material-ui-dropzone/Update%20Docs?label=docs)](https://github.com/Yuvaleros/material-ui-dropzone/actions?query=workflow%3A%22Update+Docs%22)
**Material-UI-Dropzone** is a set of [React](https://github.com/facebook/react) components using [Material-UI](https://github.com/mui-org/material-ui) and is based on the excellent [react-dropzone](https://github.com/react-dropzone/react-dropzone) library.

[![npm package](https://img.shields.io/npm/v/material-ui-dropzone)](https://www.npmjs.com/package/material-ui-dropzone) [![npm downloads](https://img.shields.io/npm/dm/material-ui-dropzone.svg)](https://www.npmjs.com/package/material-ui-dropzone)
These components provide:

This components provide either a file-upload dropzone or a file-upload dropzone inside of a dialog.
- File Upload Dropzone
- File Upload Dropzone inside of a Dialog

Additionally, the File Upload Dropzone features some snazzy "File Allowed/Not Allowed" effects, previews and alerts.

The file-upload dropzone features some snazzy "File Allowed/Not Allowed" effects, previews and alerts.

## Installation

Expand All @@ -34,26 +34,17 @@ yarn add material-ui-dropzone
| `3.x` | `16.8+` | `4.x` |
| `2.x` | `15.x` or `16.x` | `3.x` or `4.x` |

## Screenshots

This is the Dialog component:

![Dialog](https://raw.githubusercontent.com/Yuvaleros/material-ui-dropzone/master/pics/demo_pic.jpg)
![Dialog with Previews](https://raw.githubusercontent.com/Yuvaleros/material-ui-dropzone/master/pics/demo_pic5.JPG)

When you drag a file onto the dropzone, you get a neat effect:

![Drag Overlay](https://raw.githubusercontent.com/Yuvaleros/material-ui-dropzone/master/pics/demo_pic2.JPG)

And if you drag in a wrong type of file, you'll get yelled at:
## Demo

![Drag Error Overlay](https://raw.githubusercontent.com/Yuvaleros/material-ui-dropzone/master/pics/demo_pic4.JPG)
Full documentation and samples are available here [https://yuvaleros.github.io/material-ui-dropzone](https://yuvaleros.github.io/material-ui-dropzone).

**N.B. This has some limitations (see [here](https://github.com/react-dropzone/react-dropzone/tree/master/examples/accept#browser-limitations) for more details).**
**Preview: Dialog Component** with drag'n'drop effects for accepted and rejected files.

## Documentation and Examples
<img src="pics/dropzone.gif" alt="drawing" width="100%"/>
<br>
<br>

See [https://yuvaleros.github.io/material-ui-dropzone](https://yuvaleros.github.io/material-ui-dropzone) for Documentation and Examples.
**Disclaimer:** Drag'n'drop handling has some known limitations, see [here](https://github.com/react-dropzone/react-dropzone/tree/master/examples/accept#browser-limitations) for more details.

## Components

Expand Down
4 changes: 2 additions & 2 deletions dist/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export type DropzoneAreaBaseProps = {
filesLimit?: number;
Icon?: React.ComponentType;
maxFileSize?: number;
dropzoneText?: string;
dropzoneText?: string | React.ReactElement;
previewText?: string;
showPreviews?: boolean;
showPreviewsInDropzone?: boolean;
Expand Down Expand Up @@ -97,7 +97,7 @@ export type DropzoneAreaProps = Omit<
clearOnUnmount?: boolean;
initialFiles?: (File | string)[];
onChange?: (files: File[]) => void;
onDelete?: (file: File) => void;
onDelete?: (file: File, index: number) => void;
};

export const DropzoneArea: React.ComponentType<DropzoneAreaProps>;
Expand Down
11 changes: 6 additions & 5 deletions dist/index.es.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/index.es.js.map
View file
Open in desktop

Large diffs are not rendered by default.

11 changes: 6 additions & 5 deletions dist/index.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/index.js.map
View file
Open in desktop

Large diffs are not rendered by default.

7 changes: 4 additions & 3 deletions docs/intro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
# material-ui-dropzone
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Revert changes to docs/intro.md or exclude them from this PR.


> Material-UI-dropzone is a set of [React](https://github.com/facebook/react) components using [Material-UI](https://github.com/mui-org/material-ui) and is based on the excellent [react-dropzone](https://github.com/react-dropzone/react-dropzone) library.
**Material-UI-Dropzone** is a set of [React](https://github.com/facebook/react) components using [Material-UI](https://github.com/mui-org/material-ui) and is based on the excellent [react-dropzone](https://github.com/react-dropzone/react-dropzone) library. These components provide:

This components provide either a file-upload dropzone or a file-upload dropzone inside of a dialog.
- File Upload Dropzone
- File Upload Dropzone inside of a Dialog

The file-upload dropzone features some snazzy "File Allowed/Not Allowed" effects, previews and alerts.
Additionally, the File Upload Dropzone features some snazzy "File Allowed/Not Allowed" effects, previews and alerts.
17 changes: 6 additions & 11 deletions docs/screenshots.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,9 @@
This is the Dialog component:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Revert changes to docs/screenshots.md or exclude them from this PR.

Full documentation and samples are available here [https://yuvaleros.github.io/material-ui-dropzone](https://yuvaleros.github.io/material-ui-dropzone).

![Dialog](https://raw.githubusercontent.com/Yuvaleros/material-ui-dropzone/master/pics/demo_pic.jpg)
![Dialog with Previews](https://raw.githubusercontent.com/Yuvaleros/material-ui-dropzone/master/pics/demo_pic5.JPG)
**Preview: Dialog Component** with drag'n'drop effects for accepted and rejected files.

When you drag a file onto the dropzone, you get a neat effect:
<img src="pics/dropzone.gif" alt="drawing" width="100%"/>
<br>
<br>

![Drag Overlay](https://raw.githubusercontent.com/Yuvaleros/material-ui-dropzone/master/pics/demo_pic2.JPG)

And if you drag in a wrong type of file, you'll get yelled at:

![Drag Error Overlay](https://raw.githubusercontent.com/Yuvaleros/material-ui-dropzone/master/pics/demo_pic4.JPG)

**N.B. This has some limitations (see [here](https://github.com/react-dropzone/react-dropzone/tree/master/examples/accept#browser-limitations) for more details).**
**Disclaimer:** Drag'n'drop handling has some known limitations, see [here](https://github.com/react-dropzone/react-dropzone/tree/master/examples/accept#browser-limitations) for more details.
Binary file added pics/dropzone.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 2 additions & 1 deletion src/components/DropzoneArea.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ class DropzoneArea extends React.PureComponent {

// Notify removed file
if (onDelete) {
onDelete(removedFileObj.file);
onDelete(removedFileObj.file, removedFileObjIdx);
}

// Update local state
Expand Down Expand Up @@ -165,6 +165,7 @@ DropzoneArea.propTypes = {
* Fired when a file is deleted from the previews panel.
*
* @param {File} deletedFile The file that was removed.
* @param {number} deletedFileIndex The index of the file that was removed.
*/
onDelete: PropTypes.func,
};
Expand Down
20 changes: 11 additions & 9 deletions src/components/DropzoneAreaBase.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,13 +252,15 @@ class DropzoneAreaBase extends React.PureComponent {
<input {...getInputProps(inputProps)} />

<div className={classes.textContainer}>
<Typography
variant="h5"
component="p"
className={clsx(classes.text, dropzoneParagraphClass)}
>
{dropzoneText}
</Typography>
{ typeof dropzoneText === 'string' ?
<Typography
variant="h5"
component="p"
className={clsx(classes.text, dropzoneParagraphClass)}>
{dropzoneText}
</Typography> :
dropzoneText
}
{Icon ? (
<Icon className={classes.icon} />
) : (
Expand Down Expand Up @@ -382,8 +384,8 @@ DropzoneAreaBase.propTypes = {
fileObjects: PropTypes.arrayOf(FileObjectShape),
/** Maximum file size (in bytes) that the dropzone will accept. */
maxFileSize: PropTypes.number,
/** Text inside the dropzone. */
dropzoneText: PropTypes.string,
/** Text or Element inside the dropzone. */
dropzoneText: PropTypes.string | PropTypes.element,
/** Custom CSS class name for dropzone container. */
dropzoneClass: PropTypes.string,
/** Custom CSS class name for text inside the container. */
Expand Down
2 changes: 1 addition & 1 deletion src/components/DropzoneAreaBase.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { DropzoneAreaBase } from 'material-ui-dropzone';
```jsx
<DropzoneAreaBase
onAdd={(fileObjs) => console.log('Added Files:', fileObjs)}
onDelete={(fileObj) => console.log('Removed File:', fileObj)}
onDelete={(fileObj, index) => console.log('Removed File:', fileObj, 'at index', index)}
onAlert={(message, variant) => console.log(`${variant}: ${message}`)}
/>
```
Expand Down
4 changes: 2 additions & 2 deletions src/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export type DropzoneAreaBaseProps = {
filesLimit?: number;
Icon?: React.ComponentType;
maxFileSize?: number;
dropzoneText?: string;
dropzoneText?: string | React.ReactElement;
previewText?: string;
showPreviews?: boolean;
showPreviewsInDropzone?: boolean;
Expand Down Expand Up @@ -97,7 +97,7 @@ export type DropzoneAreaProps = Omit<
clearOnUnmount?: boolean;
initialFiles?: (File | string)[];
onChange?: (files: File[]) => void;
onDelete?: (file: File) => void;
onDelete?: (file: File, index: number) => void;
};

export const DropzoneArea: React.ComponentType<DropzoneAreaProps>;
Expand Down
2 changes: 1 addition & 1 deletion styleguide.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ module.exports = {
content: './docs/support.md',
},
{
name: 'Screenshots',
name: 'Demo',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Revert this change

content: './docs/screenshots.md',
},
{
Expand Down
18 changes: 9 additions & 9 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2470,19 +2470,19 @@ camelcase@^5.0.0:
integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==

caniuse-lite@^1.0.30000989:
version "1.0.30001038"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001038.tgz#44da3cbca2ab6cb6aa83d1be5d324e17f141caff"
integrity sha512-zii9quPo96XfOiRD4TrfYGs+QsGZpb2cGiMAzPjtf/hpFgB6zCPZgJb7I1+EATeMw/o+lG8FyRAnI+CWStHcaQ==
version "1.0.30001257"
resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001257.tgz"
integrity sha512-JN49KplOgHSXpIsVSF+LUyhD8PUp6xPpAXeRrrcBh4KBeP7W864jHn6RvzJgDlrReyeVjMFJL3PLpPvKIxlIHA==

caniuse-lite@^1.0.30001030:
version "1.0.30001035"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001035.tgz#2bb53b8aa4716b2ed08e088d4dc816a5fe089a1e"
integrity sha512-C1ZxgkuA4/bUEdMbU5WrGY4+UhMFFiXrgNAfxiMIqWgFTWfv/xsZCS2xEHT2LMq7xAZfuAnu6mcqyDl0ZR6wLQ==
version "1.0.30001257"
resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001257.tgz"
integrity sha512-JN49KplOgHSXpIsVSF+LUyhD8PUp6xPpAXeRrrcBh4KBeP7W864jHn6RvzJgDlrReyeVjMFJL3PLpPvKIxlIHA==

caniuse-lite@^1.0.30001043:
version "1.0.30001081"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001081.tgz#40615a3c416a047c5a4d45673e5257bf128eb3b5"
integrity sha512-iZdh3lu09jsUtLE6Bp8NAbJskco4Y3UDtkR3GTCJGsbMowBU5IWDFF79sV2ws7lSqTzWyKazxam2thasHymENQ==
version "1.0.30001257"
resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001257.tgz"
integrity sha512-JN49KplOgHSXpIsVSF+LUyhD8PUp6xPpAXeRrrcBh4KBeP7W864jHn6RvzJgDlrReyeVjMFJL3PLpPvKIxlIHA==

ccount@^1.0.0:
version "1.0.5"
Expand Down