Merge pull request #3570 from jaytula/usestyles-treenode

[RFR] Change to useStyles for TreeNode component
marmelab · Aug 22, 2019 · a4047e8 · a4047e8
2 parents 5d9b820 + 4ddd781
commit a4047e8
Showing 1 changed file with 110 additions and 116 deletions.
diff --git a/packages/ra-tree-ui-materialui/src/TreeNode.js b/packages/ra-tree-ui-materialui/src/TreeNode.js
@@ -1,10 +1,10 @@
-import React, { Fragment, Component } from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import ListItem from '@material-ui/core/ListItem';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
     expandIcon: {
         margin: 0,
         left: -theme.spacing(6),
@@ -71,132 +71,126 @@ const styles = theme => ({
     draggingOver: {
         background: theme.palette.action.hover,
     },
-});
+}));
 
-class TreeNode extends Component {
-    static propTypes = {
-        basePath: PropTypes.string.isRequired,
-        canDrop: PropTypes.bool,
-        children: PropTypes.node,
-        classes: PropTypes.object,
-        closeNode: PropTypes.func,
-        connectDropTarget: PropTypes.func,
-        expandNode: PropTypes.func,
-        getIsNodeExpanded: PropTypes.func,
-        isOver: PropTypes.bool,
-        isOverCurrent: PropTypes.bool,
-        itemType: PropTypes.string,
-        node: PropTypes.object.isRequired,
-        resource: PropTypes.string.isRequired,
-        toggleNode: PropTypes.func,
-        treeNodeComponent: PropTypes.oneOfType([
-            PropTypes.element,
-            PropTypes.func,
-        ]),
-        treeNodeContentComponent: PropTypes.oneOfType([
-            PropTypes.element,
-            PropTypes.func,
-        ]).isRequired,
-        treeNodeWithChildrenComponent: PropTypes.oneOfType([
-            PropTypes.element,
-            PropTypes.func,
-        ]),
-    };
-
-    static defaultProps = {
-        connectDropTarget: target => target,
-    };
-
-    handleDrop = event => {
-        if (this.props.isOver && this.props.canDrop) {
-            event.persit();
+function TreeNode({
+    basePath,
+    canDrop,
+    children,
+    classes: classesOverride,
+    closeNode,
+    connectDropTarget,
+    expandNode,
+    getIsNodeExpanded,
+    isOver,
+    isOverCurrent,
+    itemType,
+    node,
+    resource,
+    treeNodeComponent,
+    treeNodeWithChildrenComponent: TreeNodeWithChildren,
+    treeNodeContentComponent: TreeNodeContent,
+    toggleNode,
+    ...props
+}) {
+    const classes = useStyles({ classes: classesOverride });
+    const handleDrop = event => {
+        if (isOver && canDrop) {
+            event.persist();
             event.preventDefault();
         }
     };
 
-    render() {
-        const {
-            basePath,
-            canDrop,
-            children,
-            classes,
-            closeNode,
-            connectDropTarget,
-            expandNode,
-            getIsNodeExpanded,
-            isOver,
-            isOverCurrent,
-            itemType,
-            node,
-            resource,
-            treeNodeComponent,
-            treeNodeWithChildrenComponent: TreeNodeWithChildren,
-            treeNodeContentComponent: TreeNodeContent,
-            toggleNode,
-            ...props
-        } = this.props;
-        return connectDropTarget(
-            <div className={classes.root}>
-                <ListItem
-                    button
-                    classes={{
-                        root: classNames({
-                            [classes.node]: node.children.length > 0,
-                            [classes.leaf]: node.children.length === 0,
-                            [classes.draggingOver]: isOverCurrent,
-                        }),
-                    }}
-                    dense
-                    disableGutters
-                >
-                    {node.children.length > 0 ? (
-                        <TreeNodeWithChildren
-                            key={`TreeNodeWithChildren${node.id}`}
-                            basePath={basePath}
-                            cancelDropOnChildren={!!itemType}
-                            classes={classes}
-                            closeNode={closeNode}
-                            expandNode={expandNode}
-                            getIsNodeExpanded={getIsNodeExpanded}
-                            /*
+    return connectDropTarget(
+        <div className={classes.root}>
+            <ListItem
+                button
+                classes={{
+                    root: classNames({
+                        [classes.node]: node.children.length > 0,
+                        [classes.leaf]: node.children.length === 0,
+                        [classes.draggingOver]: isOverCurrent,
+                    }),
+                }}
+                dense
+                disableGutters
+            >
+                {node.children.length > 0 ? (
+                    <TreeNodeWithChildren
+                        key={`TreeNodeWithChildren${node.id}`}
+                        basePath={basePath}
+                        cancelDropOnChildren={!!itemType}
+                        classes={classes}
+                        closeNode={closeNode}
+                        expandNode={expandNode}
+                        getIsNodeExpanded={getIsNodeExpanded}
+                        /*
                             Override the isExpanded prop managed through redux on hover.
                             Set it to undefined when not hovering to fall back to redux state
                             so that it stay expanded if it was before
                         */
-                            isExpanded={isOver && canDrop ? true : undefined}
+                        isExpanded={isOver && canDrop ? true : undefined}
+                        node={node}
+                        resource={resource}
+                        treeNodeComponent={treeNodeComponent}
+                        treeNodeWithChildrenComponent={TreeNodeWithChildren}
+                        treeNodeContentComponent={TreeNodeContent}
+                        toggleNode={toggleNode}
+                        {...props}
+                    >
+                        {children}
+                    </TreeNodeWithChildren>
+                ) : (
+                    <Fragment>
+                        <TreeNodeContent
+                            key={`TreeNodeContent_${node.id}`}
+                            basePath={basePath}
                             node={node}
                             resource={resource}
-                            treeNodeComponent={treeNodeComponent}
-                            treeNodeWithChildrenComponent={TreeNodeWithChildren}
-                            treeNodeContentComponent={TreeNodeContent}
-                            toggleNode={toggleNode}
+                            isLeaf={true}
+                            cancelDropOnChildren={!!itemType}
+                            onDrop={handleDrop}
+                            classes={{
+                                handle: classes.handle,
+                            }}
                             {...props}
                         >
                             {children}
-                        </TreeNodeWithChildren>
-                    ) : (
-                        <Fragment>
-                            <TreeNodeContent
-                                key={`TreeNodeContent_${node.id}`}
-                                basePath={basePath}
-                                node={node}
-                                resource={resource}
-                                isLeaf={true}
-                                cancelDropOnChildren={!!itemType}
-                                onDrop={this.handleDrop}
-                                classes={{
-                                    handle: classes.handle,
-                                }}
-                                {...props}
-                            >
-                                {children}
-                            </TreeNodeContent>
-                        </Fragment>
-                    )}
-                </ListItem>
-            </div>
-        );
-    }
+                        </TreeNodeContent>
+                    </Fragment>
+                )}
+            </ListItem>
+        </div>
+    );
 }
 
-export default withStyles(styles)(TreeNode);
+TreeNode.propTypes = {
+    basePath: PropTypes.string.isRequired,
+    canDrop: PropTypes.bool,
+    children: PropTypes.node,
+    classes: PropTypes.object,
+    closeNode: PropTypes.func,
+    connectDropTarget: PropTypes.func,
+    expandNode: PropTypes.func,
+    getIsNodeExpanded: PropTypes.func,
+    isOver: PropTypes.bool,
+    isOverCurrent: PropTypes.bool,
+    itemType: PropTypes.string,
+    node: PropTypes.object.isRequired,
+    resource: PropTypes.string.isRequired,
+    toggleNode: PropTypes.func,
+    treeNodeComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+    treeNodeContentComponent: PropTypes.oneOfType([
+        PropTypes.element,
+        PropTypes.func,
+    ]).isRequired,
+    treeNodeWithChildrenComponent: PropTypes.oneOfType([
+        PropTypes.element,
+        PropTypes.func,
+    ]),
+};
+
+TreeNode.defaultProps = {
+    connectDropTarget: target => target,
+};
+export default TreeNode;