From 58927c1d8c4da63fe0fc9e5543daa99f28018c98 Mon Sep 17 00:00:00 2001 From: jaytula Date: Mon, 19 Aug 2019 23:35:24 -0700 Subject: [PATCH 1/3] Refactor withStyles to makeStyles for 10 components CreateButton, FormInput, ToolBar, Labeled, RadioButtonGroupInput, NotFound, BulkActionsToolbar, DatagridHeaderCell, DatagridLoading, SimpleList --- .../src/button/CreateButton.js | 17 +- .../ra-ui-materialui/src/form/FormInput.js | 16 +- packages/ra-ui-materialui/src/form/Toolbar.js | 147 ++++++++-------- .../ra-ui-materialui/src/input/Labeled.js | 12 +- .../src/input/RadioButtonGroupInput.js | 2 +- .../ra-ui-materialui/src/layout/NotFound.js | 13 +- .../src/list/BulkActionsToolbar.js | 12 +- .../src/list/DatagridHeaderCell.js | 39 ++--- .../src/list/DatagridLoading.js | 16 +- .../ra-ui-materialui/src/list/SimpleList.js | 164 +++++++++--------- 10 files changed, 219 insertions(+), 219 deletions(-) diff --git a/packages/ra-ui-materialui/src/button/CreateButton.js b/packages/ra-ui-materialui/src/button/CreateButton.js index 5b45198853c..a9a4799341f 100644 --- a/packages/ra-ui-materialui/src/button/CreateButton.js +++ b/packages/ra-ui-materialui/src/button/CreateButton.js @@ -4,18 +4,17 @@ import onlyUpdateForKeys from 'recompose/onlyUpdateForKeys'; import { Fab, createStyles, - withStyles, + 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 => +const useStyles = makeStyles(theme => createStyles({ floating: { color: theme.palette.getContrastText(theme.palette.primary.main), @@ -30,16 +29,17 @@ const styles = theme => floatingLink: { color: 'inherit', }, - }); + }) +); const CreateButton = ({ basePath = '', className, - classes = {}, label = 'ra.action.create', icon = , ...rest }) => { + const classes = useStyles(); const translate = useTranslate(); const isSmall = useMediaQuery(theme => theme.breakpoints.down('sm')); return isSmall ? ( @@ -69,15 +69,10 @@ const CreateButton = ({ CreateButton.propTypes = { basePath: PropTypes.string, className: PropTypes.string, - classes: PropTypes.object, label: PropTypes.string, size: PropTypes.string, 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..b7fdb412f27 100644 --- a/packages/ra-ui-materialui/src/form/FormInput.js +++ b/packages/ra-ui-materialui/src/form/FormInput.js @@ -1,19 +1,21 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import { withStyles, createStyles } from '@material-ui/core/styles'; +import { makeStyles, createStyles } from '@material-ui/core/styles'; import Labeled from '../input/Labeled'; const sanitizeRestProps = ({ basePath, record, ...rest }) => rest; -const styles = theme => +const useStyles = makeStyles(theme => createStyles({ input: { width: theme.spacing(32) }, - }); + }) +); -export const FormInput = ({ classes, input, ...rest }) => - input ? ( +export const FormInput = ({ input, ...rest }) => { + const classes = useStyles(); + return input ? (
)}
) : null; +}; FormInput.propTypes = { className: PropTypes.string, - classes: PropTypes.object, input: PropTypes.object, }; // 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..9e161704ffb 100644 --- a/packages/ra-ui-materialui/src/form/Toolbar.js +++ b/packages/ra-ui-materialui/src/form/Toolbar.js @@ -1,14 +1,13 @@ 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, createStyles } from '@material-ui/core/styles'; import classnames from 'classnames'; import { SaveButton, DeleteButton } from '../button'; -const styles = theme => +const useStyles = makeStyles(theme => createStyles({ toolbar: { backgroundColor: @@ -40,7 +39,8 @@ const styles = theme => height: '5em', }, }, - }); + }) +); const valueOrDefault = (value, defaultValue) => typeof value === 'undefined' ? defaultValue : value; @@ -48,7 +48,6 @@ const valueOrDefault = (value, defaultValue) => const Toolbar = ({ basePath, children, - classes, className, handleSubmit, handleSubmitWithRedirect, @@ -62,72 +61,75 @@ const Toolbar = ({ undoable, width, ...rest -}) => ( - - - {Children.count(children) === 0 ? ( -
- - {record && typeof record.id !== 'undefined' && ( - { + const classes = useStyles(); + 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 +157,5 @@ Toolbar.defaultProps = { submitOnEnter: true, }; -const enhance = compose( - withWidth({ initialWidth: 'xs' }), - withStyles(styles) -); +const enhance = withWidth({ initialWidth: 'xs' }); export default enhance(Toolbar); diff --git a/packages/ra-ui-materialui/src/input/Labeled.js b/packages/ra-ui-materialui/src/input/Labeled.js index 130d925fffd..91586e4babc 100644 --- a/packages/ra-ui-materialui/src/input/Labeled.js +++ b/packages/ra-ui-materialui/src/input/Labeled.js @@ -2,10 +2,10 @@ 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, createStyles } from '@material-ui/core/styles'; import { FieldTitle } from 'ra-core'; -const styles = theme => +const useStyles = makeStyles(theme => createStyles({ label: { position: 'relative', @@ -22,7 +22,8 @@ const styles = theme => display: 'block', width: '100%', }, - }); + }) +); /** * Use any component as read-only Input, labeled just like other Inputs. @@ -41,7 +42,6 @@ const styles = theme => */ export const Labeled = ({ children, - classes, className, fullWidth, id, @@ -53,6 +53,7 @@ export const Labeled = ({ source, ...rest }) => { + const classes = useStyles(); if (!label && !source) { throw new Error( `Cannot create label for component <${children && @@ -94,7 +95,6 @@ export const Labeled = ({ Labeled.propTypes = { basePath: PropTypes.string, children: PropTypes.element, - classes: PropTypes.object, className: PropTypes.string, fullWidth: PropTypes.bool, id: PropTypes.string, @@ -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/input/RadioButtonGroupInput.js b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.js index ffc2f1058aa..4443da86be9 100644 --- a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.js +++ b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.js @@ -174,4 +174,4 @@ RadioButtonGroupInput.defaultProps = { translateChoice: true, }; -export default RadioButtonGroupInput; +export default RadioButtonGroupInput; \ No newline at end of file diff --git a/packages/ra-ui-materialui/src/layout/NotFound.js b/packages/ra-ui-materialui/src/layout/NotFound.js index 0377de21ff9..b10728493df 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, createStyles } from '@material-ui/core/styles'; import HotTub from '@material-ui/icons/HotTub'; import History from '@material-ui/icons/History'; import classnames from 'classnames'; @@ -9,7 +9,7 @@ import classnames from 'classnames'; import { useTranslate, Authenticated } from 'ra-core'; import Title from './Title'; -const styles = theme => +const useStyles = makeStyles(theme => createStyles({ container: { display: 'flex', @@ -37,13 +37,15 @@ const styles = theme => textAlign: 'center', marginTop: '2em', }, - }); + }) +); function goBack() { window.history.go(-1); } -const NotFound = ({ classes, className, title, location, ...rest }) => { +const NotFound = ({ className, title, location, ...rest }) => { + const classes = useStyles(); const translate = useTranslate(); return ( @@ -69,10 +71,9 @@ const NotFound = ({ classes, className, title, location, ...rest }) => { }; NotFound.propTypes = { - classes: PropTypes.object, className: PropTypes.string, 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..997112be4d0 100644 --- a/packages/ra-ui-materialui/src/list/BulkActionsToolbar.js +++ b/packages/ra-ui-materialui/src/list/BulkActionsToolbar.js @@ -3,13 +3,13 @@ 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, createStyles } 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 => +const useStyles = makeStyles(theme => createStyles({ toolbar: { zIndex: 3, @@ -36,10 +36,10 @@ const styles = theme => title: { flex: '0 0 auto', }, - }); + }) +); const BulkActionsToolbar = ({ - classes, basePath, filterValues, label, @@ -48,6 +48,7 @@ const BulkActionsToolbar = ({ children, ...rest }) => { + const classes = useStyles(); const translate = useTranslate(); return ( @@ -82,7 +83,6 @@ const BulkActionsToolbar = ({ BulkActionsToolbar.propTypes = { children: PropTypes.node, - classes: PropTypes.object, basePath: PropTypes.string, filterValues: PropTypes.object, label: PropTypes.string, @@ -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..ee462dc1bfb 100644 --- a/packages/ra-ui-materialui/src/list/DatagridHeaderCell.js +++ b/packages/ra-ui-materialui/src/list/DatagridHeaderCell.js @@ -2,27 +2,27 @@ 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, createStyles } from '@material-ui/core/styles'; import { FieldTitle, useTranslate } from 'ra-core'; // remove the sort icons when not active -const styles = createStyles({ - icon: { - display: 'none', - }, - active: { - '& $icon': { - display: 'inline', +const useStyles = makeStyles( + createStyles({ + icon: { + display: 'none', }, - }, -}); + active: { + '& $icon': { + display: 'inline', + }, + }, + }) +); export const DatagridHeaderCell = ({ - classes, className, field, currentSort, @@ -31,6 +31,7 @@ export const DatagridHeaderCell = ({ isSorting, ...rest }) => { + const classes = useStyles(); const translate = useTranslate(); return ( - props.isSorting !== nextProps.isSorting || - (nextProps.isSorting && - props.currentSort.order !== nextProps.currentSort.order) - ), - withStyles(styles) +const enhance = shouldUpdate( + (props, nextProps) => + props.isSorting !== nextProps.isSorting || + (nextProps.isSorting && + props.currentSort.order !== nextProps.currentSort.order) ); export default enhance(DatagridHeaderCell); diff --git a/packages/ra-ui-materialui/src/list/DatagridLoading.js b/packages/ra-ui-materialui/src/list/DatagridLoading.js index 0cf249ee4e7..d8efe73273a 100644 --- a/packages/ra-ui-materialui/src/list/DatagridLoading.js +++ b/packages/ra-ui-materialui/src/list/DatagridLoading.js @@ -8,21 +8,21 @@ 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, createStyles } from '@material-ui/core/styles'; -const RawPlaceholder = ({ classes }) => ( -
 
-); - -const styles = theme => +const useStyles = makeStyles(theme => createStyles({ root: { backgroundColor: theme.palette.grey[300], display: 'flex', }, - }); + }) +); -const Placeholder = withStyles(styles)(RawPlaceholder); +const Placeholder = () => { + const classes = useStyles(); + 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..7b78945844b 100644 --- a/packages/ra-ui-materialui/src/list/SimpleList.js +++ b/packages/ra-ui-materialui/src/list/SimpleList.js @@ -7,39 +7,40 @@ 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, createStyles } from '@material-ui/core/styles'; import { Link } from 'react-router-dom'; import { linkToRecord, sanitizeListRestProps } from 'ra-core'; -const styles = createStyles({ - link: { - textDecoration: 'none', - color: 'inherit', - }, - 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 useStyles = makeStyles( + createStyles({ + link: { + textDecoration: 'none', + color: 'inherit', + }, + tertiary: { float: 'right', opacity: 0.541176 }, + }) ); +const LinkOrNot = ({ linkType, basePath, id, children }) => { + const classes = useStyles(); + return linkType === 'edit' || linkType === true ? ( + + {children} + + ) : linkType === 'show' ? ( + + {children} + + ) : ( + {children} + ); +}; + const SimpleList = ({ basePath, - classes = {}, className, data, hasBulkActions, @@ -57,63 +58,68 @@ 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(); + 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)} + + )} + {rightIcon && ( + + {rightIcon(data[id], id)} + )} -
- } - secondary={ - secondaryText && secondaryText(data[id], id) - } - /> - {(rightAvatar || rightIcon) && ( - - {rightAvatar && ( - {rightAvatar(data[id], id)} - )} - {rightIcon && ( - - {rightIcon(data[id], id)} - - )} - - )} - - - ))} - + + )} + + + ))} + + ) ); +}; SimpleList.propTypes = { basePath: PropTypes.string, - classes: PropTypes.object, className: PropTypes.string, data: PropTypes.object, hasBulkActions: PropTypes.bool.isRequired, @@ -137,4 +143,4 @@ SimpleList.defaultProps = { selectedIds: [], }; -export default withStyles(styles)(SimpleList); +export default SimpleList; From 7e12a0057bec04cbf3f8b8b7e95658b8c537663b Mon Sep 17 00:00:00 2001 From: jaytula Date: Tue, 20 Aug 2019 15:30:14 -0700 Subject: [PATCH 2/3] Three fixes per review Remove createStyles Add classes prop to allow overrides Remove enhance where only one HOC and just inline it --- .../src/button/CreateButton.js | 43 +++++------ .../ra-ui-materialui/src/form/FormInput.js | 15 ++-- packages/ra-ui-materialui/src/form/Toolbar.js | 72 +++++++++---------- .../ra-ui-materialui/src/input/Labeled.js | 42 +++++------ .../ra-ui-materialui/src/layout/NotFound.js | 67 +++++++++-------- .../src/list/BulkActionsToolbar.js | 62 ++++++++-------- .../src/list/DatagridHeaderCell.js | 32 ++++----- .../src/list/DatagridLoading.js | 20 +++--- .../ra-ui-materialui/src/list/SimpleList.js | 32 +++++---- 9 files changed, 192 insertions(+), 193 deletions(-) diff --git a/packages/ra-ui-materialui/src/button/CreateButton.js b/packages/ra-ui-materialui/src/button/CreateButton.js index a9a4799341f..aa448ddb5f9 100644 --- a/packages/ra-ui-materialui/src/button/CreateButton.js +++ b/packages/ra-ui-materialui/src/button/CreateButton.js @@ -1,12 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import onlyUpdateForKeys from 'recompose/onlyUpdateForKeys'; -import { - Fab, - createStyles, - makeStyles, - useMediaQuery, -} from '@material-ui/core'; +import { Fab, makeStyles, useMediaQuery } from '@material-ui/core'; import ContentAdd from '@material-ui/icons/Add'; import classnames from 'classnames'; import { Link } from 'react-router-dom'; @@ -14,32 +9,31 @@ import { useTranslate } from 'ra-core'; import Button from './Button'; -const useStyles = makeStyles(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: classesOverride, label = 'ra.action.create', icon = , ...rest }) => { - const classes = useStyles(); + const classes = useStyles({ classes: classesOverride }); const translate = useTranslate(); const isSmall = useMediaQuery(theme => theme.breakpoints.down('sm')); return isSmall ? ( @@ -69,6 +63,7 @@ const CreateButton = ({ CreateButton.propTypes = { basePath: PropTypes.string, className: PropTypes.string, + classes: PropTypes.object, label: PropTypes.string, size: PropTypes.string, icon: PropTypes.element, diff --git a/packages/ra-ui-materialui/src/form/FormInput.js b/packages/ra-ui-materialui/src/form/FormInput.js index b7fdb412f27..610d0bab4e9 100644 --- a/packages/ra-ui-materialui/src/form/FormInput.js +++ b/packages/ra-ui-materialui/src/form/FormInput.js @@ -1,20 +1,18 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import { makeStyles, 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 useStyles = makeStyles(theme => - createStyles({ - input: { width: theme.spacing(32) }, - }) -); +const useStyles = makeStyles(theme => ({ + input: { width: theme.spacing(32) }, +})); -export const FormInput = ({ input, ...rest }) => { - const classes = useStyles(); +export const FormInput = ({ input, classes: classesOverride, ...rest }) => { + const classes = useStyles({ classes: classesOverride }); return input ? (
{ FormInput.propTypes = { className: PropTypes.string, + classes: PropTypes.object, input: PropTypes.object, }; diff --git a/packages/ra-ui-materialui/src/form/Toolbar.js b/packages/ra-ui-materialui/src/form/Toolbar.js index 9e161704ffb..dc986c79e8a 100644 --- a/packages/ra-ui-materialui/src/form/Toolbar.js +++ b/packages/ra-ui-materialui/src/form/Toolbar.js @@ -2,45 +2,43 @@ import React, { Children, Fragment, isValidElement } from 'react'; import PropTypes from 'prop-types'; import MuiToolbar from '@material-ui/core/Toolbar'; import withWidth from '@material-ui/core/withWidth'; -import { makeStyles, createStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/core/styles'; import classnames from 'classnames'; import { SaveButton, DeleteButton } from '../button'; -const useStyles = makeStyles(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; @@ -49,6 +47,7 @@ const Toolbar = ({ basePath, children, className, + classes: classesOverride, handleSubmit, handleSubmitWithRedirect, invalid, @@ -62,7 +61,7 @@ const Toolbar = ({ width, ...rest }) => { - const classes = useStyles(); + const classes = useStyles({ classes: classesOverride }); return ( - 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. @@ -43,6 +41,7 @@ const useStyles = makeStyles(theme => export const Labeled = ({ children, className, + classes: classesOverride, fullWidth, id, input, @@ -53,7 +52,7 @@ export const Labeled = ({ source, ...rest }) => { - const classes = useStyles(); + const classes = useStyles({ classes: classesOverride }); if (!label && !source) { throw new Error( `Cannot create label for component <${children && @@ -96,6 +95,7 @@ Labeled.propTypes = { basePath: PropTypes.string, children: PropTypes.element, className: PropTypes.string, + classes: PropTypes.object, fullWidth: PropTypes.bool, id: PropTypes.string, input: PropTypes.object, diff --git a/packages/ra-ui-materialui/src/layout/NotFound.js b/packages/ra-ui-materialui/src/layout/NotFound.js index b10728493df..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 { makeStyles, 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,43 +9,47 @@ import classnames from 'classnames'; import { useTranslate, Authenticated } from 'ra-core'; import Title from './Title'; -const useStyles = makeStyles(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 = ({ className, title, location, ...rest }) => { - const classes = useStyles(); +const NotFound = ({ + className, + classes: classesOverride, + title, + location, + ...rest +}) => { + const classes = useStyles({ classes: classesOverride }); const translate = useTranslate(); return ( @@ -72,6 +76,7 @@ const NotFound = ({ className, title, location, ...rest }) => { NotFound.propTypes = { className: PropTypes.string, + classes: PropTypes.object, title: PropTypes.string, location: PropTypes.object, }; diff --git a/packages/ra-ui-materialui/src/list/BulkActionsToolbar.js b/packages/ra-ui-materialui/src/list/BulkActionsToolbar.js index 997112be4d0..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 { makeStyles, 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 useStyles = makeStyles(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 = ({ basePath, + classes: classesOverride, filterValues, label, resource, @@ -48,7 +47,7 @@ const BulkActionsToolbar = ({ children, ...rest }) => { - const classes = useStyles(); + const classes = useStyles({ classes: classesOverride }); const translate = useTranslate(); return ( @@ -83,6 +82,7 @@ const BulkActionsToolbar = ({ BulkActionsToolbar.propTypes = { children: PropTypes.node, + classes: PropTypes.object, basePath: PropTypes.string, filterValues: PropTypes.object, label: PropTypes.string, diff --git a/packages/ra-ui-materialui/src/list/DatagridHeaderCell.js b/packages/ra-ui-materialui/src/list/DatagridHeaderCell.js index ee462dc1bfb..1dc504e6e1b 100644 --- a/packages/ra-ui-materialui/src/list/DatagridHeaderCell.js +++ b/packages/ra-ui-materialui/src/list/DatagridHeaderCell.js @@ -5,25 +5,24 @@ import shouldUpdate from 'recompose/shouldUpdate'; import TableCell from '@material-ui/core/TableCell'; import TableSortLabel from '@material-ui/core/TableSortLabel'; import Tooltip from '@material-ui/core/Tooltip'; -import { makeStyles, 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 useStyles = makeStyles( - createStyles({ - icon: { - display: 'none', +const useStyles = makeStyles({ + icon: { + display: 'none', + }, + active: { + '& $icon': { + display: 'inline', }, - active: { - '& $icon': { - display: 'inline', - }, - }, - }) -); + }, +}); export const DatagridHeaderCell = ({ className, + classes: classesOverride, field, currentSort, updateSort, @@ -31,7 +30,7 @@ export const DatagridHeaderCell = ({ isSorting, ...rest }) => { - const classes = useStyles(); + const classes = useStyles({ classes: classesOverride }); const translate = useTranslate(); return ( props.isSorting !== nextProps.isSorting || (nextProps.isSorting && props.currentSort.order !== nextProps.currentSort.order) -); - -export default enhance(DatagridHeaderCell); +)(DatagridHeaderCell); diff --git a/packages/ra-ui-materialui/src/list/DatagridLoading.js b/packages/ra-ui-materialui/src/list/DatagridLoading.js index d8efe73273a..003d1bf997b 100644 --- a/packages/ra-ui-materialui/src/list/DatagridLoading.js +++ b/packages/ra-ui-materialui/src/list/DatagridLoading.js @@ -8,19 +8,17 @@ 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 { makeStyles, createStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/core/styles'; -const useStyles = makeStyles(theme => - createStyles({ - root: { - backgroundColor: theme.palette.grey[300], - display: 'flex', - }, - }) -); +const useStyles = makeStyles(theme => ({ + root: { + backgroundColor: theme.palette.grey[300], + display: 'flex', + }, +})); -const Placeholder = () => { - const classes = useStyles(); +const Placeholder = ({ classes: classesOverride }) => { + const classes = useStyles({ classes: classesOverride }); return
 
; }; diff --git a/packages/ra-ui-materialui/src/list/SimpleList.js b/packages/ra-ui-materialui/src/list/SimpleList.js index 7b78945844b..6ca3b248229 100644 --- a/packages/ra-ui-materialui/src/list/SimpleList.js +++ b/packages/ra-ui-materialui/src/list/SimpleList.js @@ -7,22 +7,26 @@ 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 { makeStyles, 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 useStyles = makeStyles( - createStyles({ - link: { - textDecoration: 'none', - color: 'inherit', - }, - tertiary: { float: 'right', opacity: 0.541176 }, - }) -); +const useStyles = makeStyles({ + link: { + textDecoration: 'none', + color: 'inherit', + }, + tertiary: { float: 'right', opacity: 0.541176 }, +}); -const LinkOrNot = ({ linkType, basePath, id, children }) => { - const classes = useStyles(); +const LinkOrNot = ({ + classes: classesOverride, + linkType, + basePath, + id, + children, +}) => { + const classes = useStyles({ classes: classesOverride }); return linkType === 'edit' || linkType === true ? ( {children} @@ -42,6 +46,7 @@ const LinkOrNot = ({ linkType, basePath, id, children }) => { const SimpleList = ({ basePath, className, + classes: classesOverride, data, hasBulkActions, ids, @@ -59,7 +64,7 @@ const SimpleList = ({ total, ...rest }) => { - const classes = useStyles(); + const classes = useStyles({ classes: classesOverride }); return ( (isLoading || total > 0) && ( @@ -121,6 +126,7 @@ const SimpleList = ({ SimpleList.propTypes = { basePath: PropTypes.string, className: PropTypes.string, + classes: PropTypes.object, data: PropTypes.object, hasBulkActions: PropTypes.bool.isRequired, ids: PropTypes.array, From 18ff671ead3d41c8f5571b242874746d724a389d Mon Sep 17 00:00:00 2001 From: jaytula Date: Tue, 20 Aug 2019 15:47:17 -0700 Subject: [PATCH 3/3] Add new-line at end of file for prettier/prettier --- packages/ra-ui-materialui/src/input/RadioButtonGroupInput.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.js b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.js index 4443da86be9..ffc2f1058aa 100644 --- a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.js +++ b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.js @@ -174,4 +174,4 @@ RadioButtonGroupInput.defaultProps = { translateChoice: true, }; -export default RadioButtonGroupInput; \ No newline at end of file +export default RadioButtonGroupInput;