Merge pull request #3546 from jaytula/next-withstyles-to-makestyles

[RFR] Refactor withStyles to useStyles for 10 components
marmelab · Aug 21, 2019 · e979d7a · e979d7a
2 parents 0690a6d + 18ff671
commit e979d7a
Show file tree

Hide file tree

Showing 9 changed files with 327 additions and 328 deletions.
diff --git 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 = <ContentAdd />,
     ...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
@@ -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 ? (
         <div
             className={classnames(
                 'ra-input',
@@ -52,6 +52,7 @@ export const FormInput = ({ classes, input, ...rest }) =>
             )}
         </div>
     ) : 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
@@ -1,55 +1,53 @@
 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;
 
 const Toolbar = ({
     basePath,
     children,
-    classes,
     className,
+    classes: classesOverride,
     handleSubmit,
     handleSubmitWithRedirect,
     invalid,
@@ -62,72 +60,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({ classes: classesOverride });
+    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 +156,4 @@ Toolbar.defaultProps = {
     submitOnEnter: true,
 };
 
-const enhance = compose(
-    withWidth({ initialWidth: 'xs' }),
-    withStyles(styles)
-);
-export default enhance(Toolbar);
+export default withWidth({ initialWidth: 'xs' })(Toolbar);