[WIP] makeStyles and functional components

packages/ra-tree-ui-materialui/src/NodeActions.js

@@ -1,34 +1,32 @@
-import React, { cloneElement, Children, Component } from 'react';
+import React, { cloneElement, Children } from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
     root: {
         alignItems: 'center',
         marginLeft: 'auto',
         marginRight: theme.spacing(4),
     },
-});
+}));
 
-export class NodeActions extends Component {
-    static propTypes = {
-        classes: PropTypes.object.isRequired,
-        basePath: PropTypes.string.isRequired,
-        children: PropTypes.node,
-        record: PropTypes.object.isRequired,
-        resource: PropTypes.string.isRequired,
-    };
+const NodeActions = ({ children, ...props }) => {
+    const classes = useStyles();
 
-    render() {
-        const { children, classes, ...props } = this.props;
-        return (
-            <span className={classes.root}>
-                {Children.map(children, action =>
-                    action ? cloneElement(action, props) : null
-                )}
-            </span>
-        );
-    }
-}
+    return (
+        <span className={classes.root}>
+            {Children.map(children, action =>
+                action ? cloneElement(action, props) : null
+            )}
+        </span>
+    );
+};
 
-export default withStyles(styles)(NodeActions);
+NodeActions.propTypes = {
+    basePath: PropTypes.string.isRequired,
+    children: PropTypes.node,
+    record: PropTypes.object.isRequired,
+    resource: PropTypes.string.isRequired,
+};
+
+export default NodeActions;

packages/ra-tree-ui-materialui/src/NodeView.js

@@ -1,17 +1,17 @@
-import React, { cloneElement, Children, Component } from 'react';
+import React, { cloneElement, Children } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 const CONTAINER_CLASS = 'treenode-content';
 
-const styles = {
+const useStyles = makeStyles({
     root: {
         alignItems: 'center',
         display: 'flex',
         flexGrow: 1,
     },
-};
+});
 
 const sanitizeRestProps = ({
     cancelDropOnChildren,
@@ -30,17 +30,17 @@ const sanitizeRestProps = ({
     ...rest
 }) => rest;
 
-export class NodeView extends Component {
-    static propTypes = {
-        actions: PropTypes.node,
-        basePath: PropTypes.string.isRequired,
-        children: PropTypes.node,
-        classes: PropTypes.object,
-        node: PropTypes.object.isRequired,
-        resource: PropTypes.string.isRequired,
-    };
+const NodeView = ({
+    actions,
+    basePath,
+    children,
+    node,
+    resource,
+    ...props
+}) => {
+    const classes = useStyles();
 
-    handleClick = event => {
+    const handleClick = event => {
         event.persist();
         // This ensure clicking on a button does not collapse/expand a node
         // When clicking on the form (empty spaces around buttons) however, it should
@@ -50,41 +50,37 @@ export class NodeView extends Component {
         }
     };
 
-    render() {
-        const {
-            actions,
-            basePath,
-            children,
-            classes,
-            node,
-            resource,
-            ...props
-        } = this.props;
+    return (
+        <div
+            className={classNames(CONTAINER_CLASS, classes.root)}
+            onClick={handleClick}
+            {...sanitizeRestProps(props)}
+        >
+            {Children.map(children, field =>
+                field
+                    ? cloneElement(field, {
+                          basePath: field.props.basePath || basePath,
+                          record: node.record,
+                          resource,
+                      })
+                    : null
+            )}
+            {actions &&
+                cloneElement(actions, {
+                    basePath,
+                    record: node.record,
+                    resource,
+                })}
+        </div>
+    );
+};
 
-        return (
-            <div
-                className={classNames(CONTAINER_CLASS, classes.root)}
-                onClick={this.handleClick}
-                {...sanitizeRestProps(props)}
-            >
-                {Children.map(children, field =>
-                    field
-                        ? cloneElement(field, {
-                              basePath: field.props.basePath || basePath,
-                              record: node.record,
-                              resource,
-                          })
-                        : null
-                )}
-                {actions &&
-                    cloneElement(actions, {
-                        basePath,
-                        record: node.record,
-                        resource,
-                    })}
-            </div>
-        );
-    }
-}
+NodeView.propTypes = {
+    actions: PropTypes.node,
+    basePath: PropTypes.string.isRequired,
+    children: PropTypes.node,
+    node: PropTypes.object.isRequired,
+    resource: PropTypes.string.isRequired,
+};
 
-export default withStyles(styles)(NodeView);
+export default NodeView;