diff --git a/packages/ra-ui-materialui/src/button/CreateButton.js b/packages/ra-ui-materialui/src/button/CreateButton.js index 5b45198853c..aa448ddb5f9 100644 --- a/packages/ra-ui-materialui/src/button/CreateButton.js +++ b/packages/ra-ui-materialui/src/button/CreateButton.js @@ -1,45 +1,39 @@ import React from 'react'; import PropTypes from 'prop-types'; import onlyUpdateForKeys from 'recompose/onlyUpdateForKeys'; -import { - Fab, - createStyles, - withStyles, - useMediaQuery, -} from '@material-ui/core'; +import { Fab, makeStyles, useMediaQuery } from '@material-ui/core'; import ContentAdd from '@material-ui/icons/Add'; -import compose from 'recompose/compose'; import classnames from 'classnames'; import { Link } from 'react-router-dom'; import { useTranslate } from 'ra-core'; import Button from './Button'; -const styles = theme => - createStyles({ - floating: { - color: theme.palette.getContrastText(theme.palette.primary.main), - margin: 0, - top: 'auto', - right: 20, - bottom: 60, - left: 'auto', - position: 'fixed', - zIndex: 1000, - }, - floatingLink: { - color: 'inherit', - }, - }); +const useStyles = makeStyles(theme => ({ + floating: { + color: theme.palette.getContrastText(theme.palette.primary.main), + margin: 0, + top: 'auto', + right: 20, + bottom: 60, + left: 'auto', + position: 'fixed', + zIndex: 1000, + }, + floatingLink: { + color: 'inherit', + }, +})); const CreateButton = ({ basePath = '', className, - classes = {}, + classes: classesOverride, label = 'ra.action.create', icon = , ...rest }) => { + const classes = useStyles({ classes: classesOverride }); const translate = useTranslate(); const isSmall = useMediaQuery(theme => theme.breakpoints.down('sm')); return isSmall ? ( @@ -75,9 +69,5 @@ CreateButton.propTypes = { icon: PropTypes.element, }; -const enhance = compose( - onlyUpdateForKeys(['basePath', 'label', 'translate']), - withStyles(styles) -); - +const enhance = onlyUpdateForKeys(['basePath', 'label', 'translate']); export default enhance(CreateButton); diff --git a/packages/ra-ui-materialui/src/form/FormInput.js b/packages/ra-ui-materialui/src/form/FormInput.js index 8314085935f..610d0bab4e9 100644 --- a/packages/ra-ui-materialui/src/form/FormInput.js +++ b/packages/ra-ui-materialui/src/form/FormInput.js @@ -1,19 +1,19 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import { withStyles, createStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/core/styles'; import Labeled from '../input/Labeled'; const sanitizeRestProps = ({ basePath, record, ...rest }) => rest; -const styles = theme => - createStyles({ - input: { width: theme.spacing(32) }, - }); +const useStyles = makeStyles(theme => ({ + input: { width: theme.spacing(32) }, +})); -export const FormInput = ({ classes, input, ...rest }) => - input ? ( +export const FormInput = ({ input, classes: classesOverride, ...rest }) => { + const classes = useStyles({ classes: classesOverride }); + return input ? (
)}
) : null; +}; FormInput.propTypes = { className: PropTypes.string, @@ -62,4 +63,4 @@ FormInput.propTypes = { // wat? TypeScript looses the displayName if we don't set it explicitly FormInput.displayName = 'FormInput'; -export default withStyles(styles)(FormInput); +export default FormInput; diff --git a/packages/ra-ui-materialui/src/form/Toolbar.js b/packages/ra-ui-materialui/src/form/Toolbar.js index 7bc8d8fe715..dc986c79e8a 100644 --- a/packages/ra-ui-materialui/src/form/Toolbar.js +++ b/packages/ra-ui-materialui/src/form/Toolbar.js @@ -1,46 +1,44 @@ import React, { Children, Fragment, isValidElement } from 'react'; import PropTypes from 'prop-types'; -import compose from 'recompose/compose'; import MuiToolbar from '@material-ui/core/Toolbar'; import withWidth from '@material-ui/core/withWidth'; -import { withStyles, createStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/core/styles'; import classnames from 'classnames'; import { SaveButton, DeleteButton } from '../button'; -const styles = theme => - createStyles({ - toolbar: { - backgroundColor: - theme.palette.type === 'light' - ? theme.palette.grey[100] - : theme.palette.grey[900], +const useStyles = makeStyles(theme => ({ + toolbar: { + backgroundColor: + theme.palette.type === 'light' + ? theme.palette.grey[100] + : theme.palette.grey[900], + }, + desktopToolbar: { + marginTop: theme.spacing(2), + }, + mobileToolbar: { + position: 'fixed', + bottom: 0, + left: 0, + right: 0, + padding: '16px', + width: '100%', + boxSizing: 'border-box', + flexShrink: 0, + zIndex: 2, + }, + defaultToolbar: { + flex: 1, + display: 'flex', + justifyContent: 'space-between', + }, + spacer: { + [theme.breakpoints.down('xs')]: { + height: '5em', }, - desktopToolbar: { - marginTop: theme.spacing(2), - }, - mobileToolbar: { - position: 'fixed', - bottom: 0, - left: 0, - right: 0, - padding: '16px', - width: '100%', - boxSizing: 'border-box', - flexShrink: 0, - zIndex: 2, - }, - defaultToolbar: { - flex: 1, - display: 'flex', - justifyContent: 'space-between', - }, - spacer: { - [theme.breakpoints.down('xs')]: { - height: '5em', - }, - }, - }); + }, +})); const valueOrDefault = (value, defaultValue) => typeof value === 'undefined' ? defaultValue : value; @@ -48,8 +46,8 @@ const valueOrDefault = (value, defaultValue) => const Toolbar = ({ basePath, children, - classes, className, + classes: classesOverride, handleSubmit, handleSubmitWithRedirect, invalid, @@ -62,72 +60,75 @@ const Toolbar = ({ undoable, width, ...rest -}) => ( - - - {Children.count(children) === 0 ? ( -
- - {record && typeof record.id !== 'undefined' && ( - { + const classes = useStyles({ classes: classesOverride }); + return ( + + + {Children.count(children) === 0 ? ( +
+ - )} -
- ) : ( - Children.map(children, button => - button && isValidElement(button) - ? React.cloneElement(button, { - basePath, - handleSubmit: valueOrDefault( - button.props.handleSubmit, - handleSubmit - ), - handleSubmitWithRedirect: valueOrDefault( - button.props.handleSubmitWithRedirect, - handleSubmitWithRedirect - ), - invalid, - pristine, - record, - resource, - saving, - submitOnEnter: valueOrDefault( - button.props.submitOnEnter, - submitOnEnter - ), - undoable: valueOrDefault( - button.props.undoable, - undoable - ), - }) - : null - ) - )} - -
- -); + {record && typeof record.id !== 'undefined' && ( + + )} +
+ ) : ( + Children.map(children, button => + button && isValidElement(button) + ? React.cloneElement(button, { + basePath, + handleSubmit: valueOrDefault( + button.props.handleSubmit, + handleSubmit + ), + handleSubmitWithRedirect: valueOrDefault( + button.props.handleSubmitWithRedirect, + handleSubmitWithRedirect + ), + invalid, + pristine, + record, + resource, + saving, + submitOnEnter: valueOrDefault( + button.props.submitOnEnter, + submitOnEnter + ), + undoable: valueOrDefault( + button.props.undoable, + undoable + ), + }) + : null + ) + )} + +
+ + ); +}; Toolbar.propTypes = { basePath: PropTypes.string, @@ -155,8 +156,4 @@ Toolbar.defaultProps = { submitOnEnter: true, }; -const enhance = compose( - withWidth({ initialWidth: 'xs' }), - withStyles(styles) -); -export default enhance(Toolbar); +export default withWidth({ initialWidth: 'xs' })(Toolbar); diff --git a/packages/ra-ui-materialui/src/input/Labeled.js b/packages/ra-ui-materialui/src/input/Labeled.js index 130d925fffd..51f3017703a 100644 --- a/packages/ra-ui-materialui/src/input/Labeled.js +++ b/packages/ra-ui-materialui/src/input/Labeled.js @@ -2,27 +2,26 @@ import React from 'react'; import PropTypes from 'prop-types'; import InputLabel from '@material-ui/core/InputLabel'; import FormControl from '@material-ui/core/FormControl'; -import { withStyles, createStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/core/styles'; import { FieldTitle } from 'ra-core'; -const styles = theme => - createStyles({ - label: { - position: 'relative', - }, - value: { - fontFamily: theme.typography.fontFamily, - color: 'currentColor', - padding: `${theme.spacing(1)}px 0 ${theme.spacing(1) / 2}px`, - border: 0, - boxSizing: 'content-box', - verticalAlign: 'middle', - background: 'none', - margin: 0, // Reset for Safari - display: 'block', - width: '100%', - }, - }); +const useStyles = makeStyles(theme => ({ + label: { + position: 'relative', + }, + value: { + fontFamily: theme.typography.fontFamily, + color: 'currentColor', + padding: `${theme.spacing(1)}px 0 ${theme.spacing(1) / 2}px`, + border: 0, + boxSizing: 'content-box', + verticalAlign: 'middle', + background: 'none', + margin: 0, // Reset for Safari + display: 'block', + width: '100%', + }, +})); /** * Use any component as read-only Input, labeled just like other Inputs. @@ -41,8 +40,8 @@ const styles = theme => */ export const Labeled = ({ children, - classes, className, + classes: classesOverride, fullWidth, id, input, @@ -53,6 +52,7 @@ export const Labeled = ({ source, ...rest }) => { + const classes = useStyles({ classes: classesOverride }); if (!label && !source) { throw new Error( `Cannot create label for component <${children && @@ -94,8 +94,8 @@ export const Labeled = ({ Labeled.propTypes = { basePath: PropTypes.string, children: PropTypes.element, - classes: PropTypes.object, className: PropTypes.string, + classes: PropTypes.object, fullWidth: PropTypes.bool, id: PropTypes.string, input: PropTypes.object, @@ -109,4 +109,4 @@ Labeled.propTypes = { labelStyle: PropTypes.object, }; -export default withStyles(styles)(Labeled); +export default Labeled; diff --git a/packages/ra-ui-materialui/src/layout/NotFound.js b/packages/ra-ui-materialui/src/layout/NotFound.js index 0377de21ff9..2e2b4459ed2 100644 --- a/packages/ra-ui-materialui/src/layout/NotFound.js +++ b/packages/ra-ui-materialui/src/layout/NotFound.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import Button from '@material-ui/core/Button'; -import { withStyles, createStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/core/styles'; import HotTub from '@material-ui/icons/HotTub'; import History from '@material-ui/icons/History'; import classnames from 'classnames'; @@ -9,41 +9,47 @@ import classnames from 'classnames'; import { useTranslate, Authenticated } from 'ra-core'; import Title from './Title'; -const styles = theme => - createStyles({ - container: { - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - [theme.breakpoints.up('md')]: { - height: '100%', - }, - [theme.breakpoints.down('sm')]: { - height: '100vh', - marginTop: '-3em', - }, +const useStyles = makeStyles(theme => ({ + container: { + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + [theme.breakpoints.up('md')]: { + height: '100%', }, - icon: { - width: '9em', - height: '9em', + [theme.breakpoints.down('sm')]: { + height: '100vh', + marginTop: '-3em', }, - message: { - textAlign: 'center', - fontFamily: 'Roboto, sans-serif', - opacity: 0.5, - margin: '0 1em', - }, - toolbar: { - textAlign: 'center', - marginTop: '2em', - }, - }); + }, + icon: { + width: '9em', + height: '9em', + }, + message: { + textAlign: 'center', + fontFamily: 'Roboto, sans-serif', + opacity: 0.5, + margin: '0 1em', + }, + toolbar: { + textAlign: 'center', + marginTop: '2em', + }, +})); function goBack() { window.history.go(-1); } -const NotFound = ({ classes, className, title, location, ...rest }) => { +const NotFound = ({ + className, + classes: classesOverride, + title, + location, + ...rest +}) => { + const classes = useStyles({ classes: classesOverride }); const translate = useTranslate(); return ( @@ -69,10 +75,10 @@ const NotFound = ({ classes, className, title, location, ...rest }) => { }; NotFound.propTypes = { - classes: PropTypes.object, className: PropTypes.string, + classes: PropTypes.object, title: PropTypes.string, location: PropTypes.object, }; -export default withStyles(styles)(NotFound); +export default NotFound; diff --git a/packages/ra-ui-materialui/src/list/BulkActionsToolbar.js b/packages/ra-ui-materialui/src/list/BulkActionsToolbar.js index 03a66b26024..a364f0e3aad 100644 --- a/packages/ra-ui-materialui/src/list/BulkActionsToolbar.js +++ b/packages/ra-ui-materialui/src/list/BulkActionsToolbar.js @@ -3,44 +3,43 @@ import PropTypes from 'prop-types'; import classnames from 'classnames'; import Toolbar from '@material-ui/core/Toolbar'; import Typography from '@material-ui/core/Typography'; -import { withStyles, createStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/core/styles'; import { lighten } from '@material-ui/core/styles/colorManipulator'; import { useTranslate, sanitizeListRestProps } from 'ra-core'; import TopToolbar from '../layout/TopToolbar'; -const styles = theme => - createStyles({ - toolbar: { - zIndex: 3, - color: - theme.palette.type === 'light' - ? theme.palette.primary.main - : theme.palette.text.primary, - justifyContent: 'space-between', - backgroundColor: - theme.palette.type === 'light' - ? lighten(theme.palette.primary.light, 0.85) - : theme.palette.primary.dark, - minHeight: theme.spacing(8), - height: theme.spacing(8), - transition: `${theme.transitions.create( - 'height' - )}, ${theme.transitions.create('min-height')}`, - }, - collapsed: { - minHeight: 0, - height: 0, - overflowY: 'hidden', - }, - title: { - flex: '0 0 auto', - }, - }); +const useStyles = makeStyles(theme => ({ + toolbar: { + zIndex: 3, + color: + theme.palette.type === 'light' + ? theme.palette.primary.main + : theme.palette.text.primary, + justifyContent: 'space-between', + backgroundColor: + theme.palette.type === 'light' + ? lighten(theme.palette.primary.light, 0.85) + : theme.palette.primary.dark, + minHeight: theme.spacing(8), + height: theme.spacing(8), + transition: `${theme.transitions.create( + 'height' + )}, ${theme.transitions.create('min-height')}`, + }, + collapsed: { + minHeight: 0, + height: 0, + overflowY: 'hidden', + }, + title: { + flex: '0 0 auto', + }, +})); const BulkActionsToolbar = ({ - classes, basePath, + classes: classesOverride, filterValues, label, resource, @@ -48,6 +47,7 @@ const BulkActionsToolbar = ({ children, ...rest }) => { + const classes = useStyles({ classes: classesOverride }); const translate = useTranslate(); return ( @@ -94,4 +94,4 @@ BulkActionsToolbar.defaultProps = { label: 'ra.action.bulk_actions', }; -export default withStyles(styles)(BulkActionsToolbar); +export default BulkActionsToolbar; diff --git a/packages/ra-ui-materialui/src/list/DatagridHeaderCell.js b/packages/ra-ui-materialui/src/list/DatagridHeaderCell.js index 38fe689f1e5..1dc504e6e1b 100644 --- a/packages/ra-ui-materialui/src/list/DatagridHeaderCell.js +++ b/packages/ra-ui-materialui/src/list/DatagridHeaderCell.js @@ -2,15 +2,14 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import shouldUpdate from 'recompose/shouldUpdate'; -import compose from 'recompose/compose'; import TableCell from '@material-ui/core/TableCell'; import TableSortLabel from '@material-ui/core/TableSortLabel'; import Tooltip from '@material-ui/core/Tooltip'; -import { withStyles, createStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/core/styles'; import { FieldTitle, useTranslate } from 'ra-core'; // remove the sort icons when not active -const styles = createStyles({ +const useStyles = makeStyles({ icon: { display: 'none', }, @@ -22,8 +21,8 @@ const styles = createStyles({ }); export const DatagridHeaderCell = ({ - classes, className, + classes: classesOverride, field, currentSort, updateSort, @@ -31,6 +30,7 @@ export const DatagridHeaderCell = ({ isSorting, ...rest }) => { + const classes = useStyles({ classes: classesOverride }); const translate = useTranslate(); return ( - props.isSorting !== nextProps.isSorting || - (nextProps.isSorting && - props.currentSort.order !== nextProps.currentSort.order) - ), - withStyles(styles) -); - -export default enhance(DatagridHeaderCell); +export default shouldUpdate( + (props, nextProps) => + props.isSorting !== nextProps.isSorting || + (nextProps.isSorting && + props.currentSort.order !== nextProps.currentSort.order) +)(DatagridHeaderCell); diff --git a/packages/ra-ui-materialui/src/list/DatagridLoading.js b/packages/ra-ui-materialui/src/list/DatagridLoading.js index 0cf249ee4e7..003d1bf997b 100644 --- a/packages/ra-ui-materialui/src/list/DatagridLoading.js +++ b/packages/ra-ui-materialui/src/list/DatagridLoading.js @@ -8,21 +8,19 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import IconButton from '@material-ui/core/IconButton'; import Checkbox from '@material-ui/core/Checkbox'; import classnames from 'classnames'; -import { withStyles, createStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/core/styles'; -const RawPlaceholder = ({ classes }) => ( -
 
-); - -const styles = theme => - createStyles({ - root: { - backgroundColor: theme.palette.grey[300], - display: 'flex', - }, - }); +const useStyles = makeStyles(theme => ({ + root: { + backgroundColor: theme.palette.grey[300], + display: 'flex', + }, +})); -const Placeholder = withStyles(styles)(RawPlaceholder); +const Placeholder = ({ classes: classesOverride }) => { + const classes = useStyles({ classes: classesOverride }); + return
 
; +}; const times = (nbChildren, fn) => Array.from({ length: nbChildren }, (_, key) => fn(key)); diff --git a/packages/ra-ui-materialui/src/list/SimpleList.js b/packages/ra-ui-materialui/src/list/SimpleList.js index cd83fc24149..6ca3b248229 100644 --- a/packages/ra-ui-materialui/src/list/SimpleList.js +++ b/packages/ra-ui-materialui/src/list/SimpleList.js @@ -7,11 +7,11 @@ import ListItemAvatar from '@material-ui/core/ListItemAvatar'; import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; import ListItemText from '@material-ui/core/ListItemText'; -import { withStyles, createStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/core/styles'; import { Link } from 'react-router-dom'; import { linkToRecord, sanitizeListRestProps } from 'ra-core'; -const styles = createStyles({ +const useStyles = makeStyles({ link: { textDecoration: 'none', color: 'inherit', @@ -19,28 +19,34 @@ const styles = createStyles({ tertiary: { float: 'right', opacity: 0.541176 }, }); -const LinkOrNot = withStyles(styles)( - ({ classes, linkType, basePath, id, children }) => - linkType === 'edit' || linkType === true ? ( - - {children} - - ) : linkType === 'show' ? ( - - {children} - - ) : ( - {children} - ) -); +const LinkOrNot = ({ + classes: classesOverride, + linkType, + basePath, + id, + children, +}) => { + const classes = useStyles({ classes: classesOverride }); + return linkType === 'edit' || linkType === true ? ( + + {children} + + ) : linkType === 'show' ? ( + + {children} + + ) : ( + {children} + ); +}; const SimpleList = ({ basePath, - classes = {}, className, + classes: classesOverride, data, hasBulkActions, ids, @@ -57,64 +63,70 @@ const SimpleList = ({ tertiaryText, total, ...rest -}) => - (isLoading || total > 0) && ( - - {ids.map(id => ( - - - {leftIcon && ( - - {leftIcon(data[id], id)} - - )} - {leftAvatar && ( - - {leftAvatar(data[id], id)} - - )} - - {primaryText(data[id], id)} - {tertiaryText && ( - - {tertiaryText(data[id], id)} - +}) => { + const classes = useStyles({ classes: classesOverride }); + return ( + (isLoading || total > 0) && ( + + {ids.map(id => ( + + + {leftIcon && ( + + {leftIcon(data[id], id)} + + )} + {leftAvatar && ( + + {leftAvatar(data[id], id)} + + )} + + {primaryText(data[id], id)} + {tertiaryText && ( + + {tertiaryText(data[id], id)} + + )} +
+ } + secondary={ + secondaryText && secondaryText(data[id], id) + } + /> + {(rightAvatar || rightIcon) && ( + + {rightAvatar && ( + + {rightAvatar(data[id], id)} + )} -
- } - secondary={ - secondaryText && secondaryText(data[id], id) - } - /> - {(rightAvatar || rightIcon) && ( - - {rightAvatar && ( - {rightAvatar(data[id], id)} - )} - {rightIcon && ( - - {rightIcon(data[id], id)} - - )} - - )} - - - ))} - + {rightIcon && ( + + {rightIcon(data[id], id)} + + )} + + )} + + + ))} + + ) ); +}; SimpleList.propTypes = { basePath: PropTypes.string, - classes: PropTypes.object, className: PropTypes.string, + classes: PropTypes.object, data: PropTypes.object, hasBulkActions: PropTypes.bool.isRequired, ids: PropTypes.array, @@ -137,4 +149,4 @@ SimpleList.defaultProps = { selectedIds: [], }; -export default withStyles(styles)(SimpleList); +export default SimpleList;