[RFR] Convert RootDropTarget component to useStyles

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

@@ -1,17 +1,16 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import compose from 'recompose/compose';
 import classNames from 'classnames';
 import { DropTarget } from 'react-dnd';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import ListItem from '@material-ui/core/ListItem';
 import IconGetApp from '@material-ui/icons/GetApp';
-import { translate } from 'ra-core';
+import { useTranslate } from 'react-admin';
 
 import { DROP_TARGET_TYPE } from './constants';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
     root: {
         paddingLeft: theme.spacing(6),
     },
@@ -23,52 +22,43 @@ const styles = theme => ({
     hover: {
         backgroundColor: theme.palette.action.active,
     },
-});
-
-class RootDropTarget extends Component {
-    static propTypes = {
-        canDrop: PropTypes.bool,
-        classes: PropTypes.object.isRequired,
-        connectDropTarget: PropTypes.func.isRequired,
-        isOverCurrent: PropTypes.bool,
-        translate: PropTypes.func.isRequired,
-    };
+}));
 
-    shouldComponentUpdate(nextProps) {
-        return (
-            this.props.canDrop !== nextProps.canDrop ||
-            this.props.isOverCurrent !== nextProps.isOverCurrent
-        );
-    }
+function RootDropTarget({
+    canDrop,
+    classes: classesOverride,
+    connectDropTarget,
+    isOverCurrent,
+}) {
+    const classes = useStyles({ classes: classesOverride });
+    const translate = useTranslate();
 
-    render() {
-        const {
-            canDrop,
-            classes,
-            connectDropTarget,
-            isOverCurrent,
-            translate,
-        } = this.props;
-        return (
-            <ListItem
-                className={classNames(classes.root, {
-                    [classes.hover]: canDrop && isOverCurrent,
-                })}
-                disabled={!canDrop}
-            >
-                <IconGetApp />
-                {connectDropTarget(
-                    <div>
-                        <Typography className={classes.text}>
-                            {translate('ra.tree.root_target')}
-                        </Typography>
-                    </div>
-                )}
-            </ListItem>
-        );
-    }
+    return (
+        <ListItem
+            className={classNames(classes.root, {
+                [classes.hover]: canDrop && isOverCurrent,
+            })}
+            disabled={!canDrop}
+        >
+            <IconGetApp />
+            {connectDropTarget(
+                <div>
+                    <Typography className={classes.text}>
+                        {translate('ra.tree.root_target')}
+                    </Typography>
+                </div>
+            )}
+        </ListItem>
+    );
 }
 
+RootDropTarget.propTypes = {
+    canDrop: PropTypes.bool,
+    classes: PropTypes.object,
+    connectDropTarget: PropTypes.func.isRequired,
+    isOverCurrent: PropTypes.bool,
+};
+
 const dropTargetSpecs = {
     drop(props, monitor) {
         if (monitor.isOver({ shallow: true })) {
@@ -91,8 +81,11 @@ const dropTargetConnect = (connect, monitor) => ({
     item: monitor.getItem(),
 });
 
-export default compose(
-    DropTarget(DROP_TARGET_TYPE, dropTargetSpecs, dropTargetConnect),
-    translate,
-    withStyles(styles)
-)(RootDropTarget);
+export default React.memo(
+    DropTarget(DROP_TARGET_TYPE, dropTargetSpecs, dropTargetConnect)(
+        RootDropTarget
+    ),
+    (prevProps, nextProps) =>
+        prevProps.canDrop === nextProps.canDrop &&
+        prevProps.isOverCurrent === nextProps.isOverCurrent
+);