Refactor withStyles to makeStyles for 10 components

CreateButton, FormInput, ToolBar, Labeled, RadioButtonGroupInput, NotFound, BulkActionsToolbar, DatagridHeaderCell, DatagridLoading, SimpleList
marmelab · Aug 20, 2019 · f147ada · f147ada
1 parent ce889b1
commit f147ada
Show file tree

Hide file tree

Showing 10 changed files with 228 additions and 232 deletions.
diff --git 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 = <ContentAdd />,
     ...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
@@ -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 ? (
         <div
             className={classnames(
                 'ra-input',
@@ -52,14 +54,14 @@ export const FormInput = ({ classes, input, ...rest }) =>
             )}
         </div>
     ) : 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
@@ -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,15 +39,15 @@ const styles = theme =>
                 height: '5em',
             },
         },
-    });
+    })
+);
 
 const valueOrDefault = (value, defaultValue) =>
     typeof value === 'undefined' ? defaultValue : value;
 
 const Toolbar = ({
     basePath,
     children,
-    classes,
     className,
     handleSubmit,
     handleSubmitWithRedirect,
@@ -62,72 +61,75 @@ const Toolbar = ({
     undoable,
     width,
     ...rest
-}) => (
-    <Fragment>
-        <MuiToolbar
-            className={classnames(
-                classes.toolbar,
-                {
-                    [classes.mobileToolbar]: width === 'xs',
-                    [classes.desktopToolbar]: width !== 'xs',
-                },
-                className
-            )}
-            role="toolbar"
-            {...rest}
-        >
-            {Children.count(children) === 0 ? (
-                <div className={classes.defaultToolbar}>
-                    <SaveButton
-                        handleSubmitWithRedirect={handleSubmitWithRedirect}
-                        invalid={invalid}
-                        redirect={redirect}
-                        saving={saving}
-                        submitOnEnter={submitOnEnter}
-                    />
-                    {record && typeof record.id !== 'undefined' && (
-                        <DeleteButton
-                            basePath={basePath}
-                            record={record}
-                            resource={resource}
-                            undoable={undoable}
+}) => {
+    const classes = useStyles();
+    return (
+        <Fragment>
+            <MuiToolbar
+                className={classnames(
+                    classes.toolbar,
+                    {
+                        [classes.mobileToolbar]: width === 'xs',
+                        [classes.desktopToolbar]: width !== 'xs',
+                    },
+                    className
+                )}
+                role="toolbar"
+                {...rest}
+            >
+                {Children.count(children) === 0 ? (
+                    <div className={classes.defaultToolbar}>
+                        <SaveButton
+                            handleSubmitWithRedirect={handleSubmitWithRedirect}
+                            invalid={invalid}
+                            redirect={redirect}
+                            saving={saving}
+                            submitOnEnter={submitOnEnter}
                         />
-                    )}
-                </div>
-            ) : (
-                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
-                )
-            )}
-        </MuiToolbar>
-        <div className={classes.spacer} />
-    </Fragment>
-);
+                        {record && typeof record.id !== 'undefined' && (
+                            <DeleteButton
+                                basePath={basePath}
+                                record={record}
+                                resource={resource}
+                                undoable={undoable}
+                            />
+                        )}
+                    </div>
+                ) : (
+                    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
+                    )
+                )}
+            </MuiToolbar>
+            <div className={classes.spacer} />
+        </Fragment>
+    );
+};
 
 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
@@ -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;