From d5051dbb1d5773b471eb60e431ef89b4d689d541 Mon Sep 17 00:00:00 2001 From: Mattia Panzeri Date: Thu, 7 May 2020 18:08:17 +0200 Subject: [PATCH 1/5] :sparkles: Add MUI Theme support to 'DropzoneArea' component --- src/components/DropzoneArea.js | 63 ++++++++++++++++++---------------- 1 file changed, 34 insertions(+), 29 deletions(-) diff --git a/src/components/DropzoneArea.js b/src/components/DropzoneArea.js index 3dc06bb0..05964b9d 100644 --- a/src/components/DropzoneArea.js +++ b/src/components/DropzoneArea.js @@ -12,7 +12,7 @@ import {convertBytesToMbsOrKbs, createFileFromUrl, isImage, readFile} from '../h import PreviewList from './PreviewList'; import SnackbarContentWrapper from './SnackbarContentWrapper'; -const styles = { +const styles = ({palette, shape, spacing}) => ({ '@keyframes progress': { '0%': { backgroundPosition: '0 0', @@ -21,39 +21,44 @@ const styles = { backgroundPosition: '-70px 0', }, }, - dropZone: { + root: { position: 'relative', width: '100%', minHeight: '250px', - backgroundColor: '#F0F0F0', + backgroundColor: palette.background.paper, border: 'dashed', - borderColor: '#C8C8C8', - cursor: 'pointer', + borderColor: palette.divider, + borderRadius: shape.borderRadius, boxSizing: 'border-box', + cursor: 'pointer', overflow: 'hidden', }, - stripes: { - border: 'solid', - backgroundImage: 'repeating-linear-gradient(-45deg, #F0F0F0, #F0F0F0 25px, #C8C8C8 25px, #C8C8C8 50px)', - animation: 'progress 2s linear infinite !important', + active: { + animation: '$progress 2s linear infinite !important', + // eslint-disable-next-line max-len + backgroundImage: `repeating-linear-gradient(-45deg, ${palette.background.paper}, ${palette.background.paper} 25px, ${palette.divider} 25px, ${palette.divider} 50px)`, backgroundSize: '150% 100%', + border: 'solid', + borderColor: palette.primary.light, }, - rejectStripes: { - backgroundImage: 'repeating-linear-gradient(-45deg, #fc8785, #fc8785 25px, #f4231f 25px, #f4231f 50px)', + invalid: { + // eslint-disable-next-line max-len + backgroundImage: `repeating-linear-gradient(-45deg, ${palette.error.light}, ${palette.error.light} 25px, ${palette.error.dark} 25px, ${palette.error.dark} 50px)`, + borderColor: palette.error.main, }, - dropzoneTextStyle: { + textContainer: { textAlign: 'center', }, - uploadIconSize: { + text: { + marginBottom: spacing(3), + marginTop: spacing(3), + }, + icon: { width: 51, height: 51, - color: '#909090', - }, - dropzoneParagraph: { - marginBottom: 20, - marginTop: 20, + color: palette.text.primary, }, -}; +}); const defaultSnackbarAnchorOrigin = { horizontal: 'left', @@ -63,13 +68,13 @@ const defaultSnackbarAnchorOrigin = { const defaultGetPreviewIcon = (fileObject, classes) => { if (isImage(fileObject.file)) { return (); } - return ; + return ; }; /** @@ -301,23 +306,23 @@ class DropzoneArea extends React.PureComponent {
-
+
{dropzoneText} - +
{previewsInDropzoneVisible && @@ -528,7 +533,7 @@ DropzoneArea.propTypes = { * *Default*: If its an image then displays a preview the image, otherwise it will display an attachment icon * * @param {File} objectFile The file which the preview will belong to - * @param {Object} classes The classes for the file preview icon, in the default case we use the smallPreviewImg className. + * @param {Object} classes The classes for the file preview icon, in the default case we use the 'image' className. */ getPreviewIcon: PropTypes.func, /** @@ -557,4 +562,4 @@ DropzoneArea.propTypes = { onDelete: PropTypes.func, }; -export default withStyles(styles)(DropzoneArea); +export default withStyles(styles, {name: 'MuiDropzoneArea'})(DropzoneArea); From 4a2a5354b3ec9b2c374816452025f4f8cf0a5399 Mon Sep 17 00:00:00 2001 From: Mattia Panzeri Date: Thu, 7 May 2020 18:08:35 +0200 Subject: [PATCH 2/5] :sparkles: Add MUI Theme support to 'PreviewList' component --- src/components/PreviewList.js | 74 ++++++++++++++++++----------------- 1 file changed, 38 insertions(+), 36 deletions(-) diff --git a/src/components/PreviewList.js b/src/components/PreviewList.js index 51bb0d5c..03dbb334 100644 --- a/src/components/PreviewList.js +++ b/src/components/PreviewList.js @@ -8,42 +8,41 @@ import clsx from 'clsx'; import * as React from 'react'; import PropTypes from 'prop-types'; -const styles = { - removeBtn: { - transition: '.5s ease', - position: 'absolute', - opacity: 0, - top: -5, - right: -5, - width: 40, - height: 40, +const styles = ({palette, shape, spacing}) => ({ + root: {}, + imageContainer: { + position: 'relative', + zIndex: 10, + textAlign: 'center', + '&:hover $image': { + opacity: 0.3, + }, + '&:hover $removeButton': { + opacity: 1, + }, }, - smallPreviewImg: { + image: { height: 100, width: 'initial', maxWidth: '100%', - marginTop: 5, - marginRight: 10, - color: 'rgba(0, 0, 0, 0.87)', + color: palette.text.primary, transition: 'all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms', boxSizing: 'border-box', boxShadow: 'rgba(0, 0, 0, 0.12) 0 1px 6px, rgba(0, 0, 0, 0.12) 0 1px 4px', - borderRadius: 2, + borderRadius: shape.borderRadius, zIndex: 5, opacity: 1, }, - imageContainer: { - position: 'relative', - zIndex: 10, - textAlign: 'center', - '&:hover $smallPreviewImg': { - opacity: 0.3, - }, - '&:hover $removeBtn': { - opacity: 1, - }, + removeButton: { + transition: '.5s ease', + position: 'absolute', + opacity: 0, + top: spacing(-1), + right: spacing(-1), + width: 40, + height: 40, }, -}; +}); function PreviewList({ fileObjects, @@ -61,10 +60,10 @@ function PreviewList({ fileObjects.map((fileObject, i) => (
)) @@ -72,19 +71,22 @@ function PreviewList({ } return ( - + {fileObjects.map((fileObject, i) => { - const img = getPreviewIcon(fileObject, classes); - return ( - {img} + {getPreviewIcon(fileObject, classes)} {showFileNames && ( @@ -95,7 +97,7 @@ function PreviewList({ @@ -118,4 +120,4 @@ PreviewList.propTypes = { useChipsForPreview: PropTypes.bool, }; -export default withStyles(styles)(PreviewList); +export default withStyles(styles, {name: 'MuiDropzonePreviewList'})(PreviewList); From 9a114f48a985e58fc2ff961ade2d95e42748b576 Mon Sep 17 00:00:00 2001 From: Mattia Panzeri Date: Thu, 7 May 2020 18:08:51 +0200 Subject: [PATCH 3/5] :sparkles: Add MUI Theme support to 'SnackbarContentWrapper' component --- src/components/SnackbarContentWrapper.js | 27 +++++++++++------------- 1 file changed, 12 insertions(+), 15 deletions(-) diff --git a/src/components/SnackbarContentWrapper.js b/src/components/SnackbarContentWrapper.js index a7727884..6d9c784d 100644 --- a/src/components/SnackbarContentWrapper.js +++ b/src/components/SnackbarContentWrapper.js @@ -1,5 +1,3 @@ -import green from '@material-ui/core/colors/green'; -import amber from '@material-ui/core/colors/amber'; import IconButton from '@material-ui/core/IconButton'; import SnackbarContent from '@material-ui/core/SnackbarContent'; import {withStyles} from '@material-ui/core/styles'; @@ -21,28 +19,27 @@ const variantIcon = { const styles = (theme) => ({ success: { - backgroundColor: green[600], + backgroundColor: theme.palette.success.main, }, error: { - backgroundColor: theme.palette.error.dark, + backgroundColor: theme.palette.error.main, }, info: { - backgroundColor: theme.palette.primary.dark, + backgroundColor: theme.palette.info.main, }, warning: { - backgroundColor: amber[700], + backgroundColor: theme.palette.warning.main, + }, + message: { + display: 'flex', + alignItems: 'center', }, icon: { fontSize: 20, - }, - iconVariant: { opacity: 0.9, marginRight: theme.spacing(1), }, - message: { - display: 'flex', - alignItems: 'center', - }, + closeButton: {}, }); function SnackbarContentWrapper(props) { @@ -55,7 +52,7 @@ function SnackbarContentWrapper(props) { aria-describedby="client-snackbar" message={ - + {message} } @@ -64,7 +61,7 @@ function SnackbarContentWrapper(props) { key="close" aria-label="Close" color="inherit" - className={classes.close} + className={classes.closeButton} onClick={onClose} > @@ -83,4 +80,4 @@ SnackbarContentWrapper.propTypes = { variant: PropTypes.oneOf(['success', 'warning', 'error', 'info']).isRequired, }; -export default withStyles(styles)(SnackbarContentWrapper); +export default withStyles(styles, {name: 'MuiDropzoneSnackbar'})(SnackbarContentWrapper); From 8871bfbb16280329a12a690c815233cb266fd37e Mon Sep 17 00:00:00 2001 From: Mattia Panzeri Date: Thu, 7 May 2020 18:10:27 +0200 Subject: [PATCH 4/5] :pencil: Update 'DropzoneArea' docs --- src/components/DropzoneArea.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/components/DropzoneArea.md b/src/components/DropzoneArea.md index 05256549..2df45dd4 100644 --- a/src/components/DropzoneArea.md +++ b/src/components/DropzoneArea.md @@ -24,35 +24,35 @@ import { DropzoneArea } from 'material-ui-dropzone'; ### Custom Preview Icon -Demonstration of how to customize the preview icon for: +Demonstration of how to customize the preview icon for: + * PDF files * Video * Audio * Word Documents - ```jsx -import react from 'react' +import * as React from 'react'; import { AttachFile, AudioTrack, Description, PictureAsPdf, Theaters } from '@material-ui/icons'; -const handlePreviewIcon=(fileObject, classes) => { - const {type} = fileObject.file - const iconProps = { className : classes.smallPreviewImg} +const handlePreviewIcon = (fileObject, classes) => { + const {type} = fileObject.file + const iconProps = { + className : classes.image, + } if (type.startsWith("video/")) return if (type.startsWith("audio/")) return - let component switch (type) { - case "application/msword": - case "application/vnd.openxmlformats-officedocument.wordprocessingml.document": - return + case "application/msword": + case "application/vnd.openxmlformats-officedocument.wordprocessingml.document": + return case "application/pdf": - return + return default: - return + return } - } Date: Thu, 7 May 2020 18:11:48 +0200 Subject: [PATCH 5/5] :pencil: Add 'Theme' section to docs --- docs/theming.md | 39 +++++++++++++++++++++++++++++++++++++++ styleguide.config.js | 6 +++++- 2 files changed, 44 insertions(+), 1 deletion(-) create mode 100644 docs/theming.md diff --git a/docs/theming.md b/docs/theming.md new file mode 100644 index 00000000..bbfec95c --- /dev/null +++ b/docs/theming.md @@ -0,0 +1,39 @@ +`material-ui-dropzone` components support theming through [`MaterialUI Theme`](https://material-ui.com/customization/theming/). + +#### DropzoneArea + +**Theme Namespace:** `MuiDropzoneArea` + +| Rule name | Global class | Description | +| ------------- | ------------------------------ | --------------------------------------------------------------- | +| root | .MuiDropzoneArea-root | The class applied to DropzoneArea container. | +| active | .MuiDropzoneArea-active | The class applied when the Dropzone is 'active'. | +| invalid | .MuiDropzoneArea-invalid | The class applied when the Dropzone is receiving invalid files. | +| textContainer | .MuiDropzoneArea-textContainer | The class applied to the text container div. | +| text | .MuiDropzoneArea-text | The class applied to the hint text. | +| icon | .MuiDropzoneArea-icon | The class applied to the hint icon. | + +#### Preview list + +**Theme Namespace:** `MuiDropzonePreviewList` + +| Rule name | Global class | Description | +| -------------- | -------------------------------------- | -------------------------------------------------------- | +| root | .MuiDropzonePreviewList-root | The class applied to PreviewList container. | +| imageContainer | .MuiDropzonePreviewList-imageContainer | The class applied to the single preview image container. | +| image | .MuiDropzonePreviewList-image | The class applied to the single preview image. | +| removeButton | .MuiDropzonePreviewList-removeButton | The class applied to the preview 'remove' FAB. | + +#### Alert Snackbar + +**Theme Namespace:** `MuiDropzoneSnackbar` + +| Rule name | Global class | Description | +| ----------- | -------------------------------- | ------------------------------------------------------------- | +| info | .MuiDropzoneSnackbar-info | The class applied to the alert snackbar in case of 'info'. | +| success | .MuiDropzoneSnackbar-success | The class applied to the alert snackbar in case of 'success'. | +| warning | .MuiDropzoneSnackbar-warning | The class applied to the alert snackbar in case of 'warning'. | +| error | .MuiDropzoneSnackbar-error | The class applied to the alert snackbar in case of 'error'. | +| message | .MuiDropzoneSnackbar-message | The class applied to the alert snackbar message. | +| icon | .MuiDropzoneSnackbar-icon | The class applied to the alert snackbar icon. | +| closeButton | .MuiDropzoneSnackbar-closeButton | The class applied to the alert snackbar 'close' button. | diff --git a/styleguide.config.js b/styleguide.config.js index 88207769..3d0b2df2 100644 --- a/styleguide.config.js +++ b/styleguide.config.js @@ -22,10 +22,14 @@ module.exports = { name: 'Components', components: './src/components/**.js', }, + { + name: 'Theme', + content: './docs/theming.md', + }, ], skipComponentsWithoutExample: true, usageMode: 'expand', - sortProps: props => props, + sortProps: (props) => props, webpackConfig: { module: { rules: [