Three fixes per review

Remove createStyles Add classes prop to allow overrides Remove enhance where only one HOC and just inline it
marmelab · Aug 20, 2019 · 7e12a00 · 7e12a00
1 parent 58927c1
commit 7e12a00
Show file tree

Hide file tree

Showing 9 changed files with 192 additions and 193 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,
-    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';
 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 = <ContentAdd />,
     ...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
@@ -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 ? (
         <div
             className={classnames(
@@ -58,6 +56,7 @@ export const FormInput = ({ input, ...rest }) => {
 
 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
@@ -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 (
         <Fragment>
             <MuiToolbar
@@ -157,5 +156,4 @@ Toolbar.defaultProps = {
     submitOnEnter: true,
 };
 
-const enhance = withWidth({ initialWidth: 'xs' });
-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
@@ -2,28 +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 { makeStyles, createStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import { FieldTitle } from 'ra-core';
 
-const useStyles = makeStyles(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.
@@ -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
@@ -1,51 +1,55 @@
 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';
 
 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 (
         <Authenticated location={location}>
@@ -72,6 +76,7 @@ const NotFound = ({ className, title, location, ...rest }) => {
 
 NotFound.propTypes = {
     className: PropTypes.string,
+    classes: PropTypes.object,
     title: PropTypes.string,
     location: PropTypes.object,
 };