diff --git a/src/components/DropzoneAreaBase.js b/src/components/DropzoneAreaBase.js index 77179996..578d7bba 100644 --- a/src/components/DropzoneAreaBase.js +++ b/src/components/DropzoneAreaBase.js @@ -87,6 +87,14 @@ class DropzoneAreaBase extends React.PureComponent { snackbarVariant: 'success', }; + notifyAlert() { + const {onAlert} = this.props; + const {openSnackBar, snackbarMessage, snackbarVariant} = this.state; + if (openSnackBar && onAlert) { + onAlert(snackbarMessage, snackbarVariant); + } + } + handleDropAccepted = async(acceptedFiles, evt) => { const {fileObjects, filesLimit, getFileAddedMessage, getFileLimitExceedMessage, onAdd, onDrop} = this.props; @@ -95,7 +103,7 @@ class DropzoneAreaBase extends React.PureComponent { openSnackBar: true, snackbarMessage: getFileLimitExceedMessage(filesLimit), snackbarVariant: 'error', - }); + }, this.notifyAlert); return; } @@ -126,7 +134,7 @@ class DropzoneAreaBase extends React.PureComponent { openSnackBar: true, snackbarMessage: message, snackbarVariant: 'success', - }); + }, this.notifyAlert); } handleDropRejected = (rejectedFiles, evt) => { @@ -157,7 +165,7 @@ class DropzoneAreaBase extends React.PureComponent { openSnackBar: true, snackbarMessage: message, snackbarVariant: 'error', - }); + }, this.notifyAlert); } handleRemove = (fileIndex) => (event) => { @@ -177,7 +185,7 @@ class DropzoneAreaBase extends React.PureComponent { openSnackBar: true, snackbarMessage: getFileRemovedMessage(removedFileObj.file.name), snackbarVariant: 'info', - }); + }, this.notifyAlert); }; handleCloseSnackbar = () => { @@ -506,6 +514,13 @@ DropzoneAreaBase.propTypes = { * @param {Event} event The react-dropzone drop event. */ onDropRejected: PropTypes.func, + /** + * Fired when an alert is triggered. + * + * @param {string} message Alert message. + * @param {string} variant One of "error", "info", "success". + */ + onAlert: PropTypes.func, }; export default withStyles(styles, {name: 'MuiDropzoneArea'})(DropzoneAreaBase); diff --git a/src/components/DropzoneAreaBase.md b/src/components/DropzoneAreaBase.md index 2b4198ef..0077a007 100644 --- a/src/components/DropzoneAreaBase.md +++ b/src/components/DropzoneAreaBase.md @@ -10,6 +10,7 @@ import { DropzoneAreaBase } from 'material-ui-dropzone'; console.log('Added Files:', fileObjs)} onDelete={(fileObj) => console.log('Removed File:', fileObj)} + onAlert={(message, variant) => console.log(`${variant}: ${message}`)} /> ``` @@ -20,6 +21,7 @@ import { DropzoneAreaBase } from 'material-ui-dropzone'; acceptedFiles={['image/*']} dropzoneText={"Drag and drop an image here or click"} onChange={(files) => console.log('Files:', files)} + onAlert={(message, variant) => console.log(`${variant}: ${message}`)} /> ``` diff --git a/src/index.d.ts b/src/index.d.ts index 56f482d4..556defd7 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -69,6 +69,7 @@ export type DropzoneAreaBaseProps = { onDelete?: (deletedFileObject: FileObject, index: number) => void; onDrop?: (files: File[], event: DropEvent) => void; onDropRejected?: (files: File[], event: DropEvent) => void; + onAlert?: (message: string, variant: AlertType) => void; getFileLimitExceedMessage?: (filesLimit: number) => string; getFileAddedMessage?: (fileName: string) => string; getFileRemovedMessage?: (fileName: string) => string;