[WIP] makeStyles and functional components

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

@@ -2,13 +2,13 @@
  * Custom DragLayer from Alejandro Hernandez
  * See https://github.com/react-dnd/react-dnd/issues/592#issuecomment-399287474
  */
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { DragLayer } from 'react-dnd';
-import compose from 'recompose/compose';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import isEqual from 'lodash/isEqual';
-const styles = {
+
+const useStyles = makeStyles({
     layer: {
         position: 'fixed',
         pointerEvents: 'none',
@@ -19,56 +19,50 @@ const styles = {
         height: '100%',
     },
     item: {},
-};
-
-class CustomDragLayer extends Component {
-    static propTypes = {
-        beingDragged: PropTypes.bool,
-        classes: PropTypes.object.isRequired,
-        dragPreviewComponent: PropTypes.oneOfType([
-            PropTypes.element,
-            PropTypes.func,
-        ]).isRequired,
-        itemBeingDragged: PropTypes.object,
-        offset: PropTypes.object,
-    };
-
-    shouldComponentUpdate(nextProps) {
-        return !isEqual(this.props.offset, nextProps.offset);
-    }
+});
 
-    render() {
-        const {
-            classes,
-            beingDragged,
-            dragPreviewComponent: DragPreview,
-            itemBeingDragged,
-            offset,
-        } = this.props;
-        if (!beingDragged || !offset) return null;
+const CustomDragLayer = ({
+    beingDragged,
+    dragPreviewComponent: DragPreview,
+    itemBeingDragged,
+    offset,
+}) => {
+    const classes = useStyles();
+    if (!beingDragged || !offset) return null;
 
-        return (
-            <div className={classes.layer}>
-                <div
-                    role="presentation"
-                    className={classes.item}
-                    style={{
-                        transform: `translate(${offset.x}px, ${offset.y}px)`,
-                    }}
-                >
-                    <DragPreview node={itemBeingDragged} />
-                </div>
+    return (
+        <div className={classes.layer}>
+            <div
+                role="presentation"
+                className={classes.item}
+                style={{
+                    transform: `translate(${offset.x}px, ${offset.y}px)`,
+                }}
+            >
+                <DragPreview node={itemBeingDragged} />
             </div>
-        );
-    }
-}
+        </div>
+    );
+};
+
+CustomDragLayer.propTypes = {
+    beingDragged: PropTypes.bool,
+    dragPreviewComponent: PropTypes.oneOfType([
+        PropTypes.element,
+        PropTypes.func,
+    ]).isRequired,
+    itemBeingDragged: PropTypes.object,
+    offset: PropTypes.object,
+};
 
-export default compose(
-    withStyles(styles),
-    DragLayer(monitor => ({
-        itemBeingDragged: monitor.getItem(),
-        componentType: monitor.getItemType(),
-        beingDragged: monitor.isDragging(),
-        offset: monitor.getSourceClientOffset(),
-    }))
-)(CustomDragLayer);
+export default DragLayer(monitor => ({
+    itemBeingDragged: monitor.getItem(),
+    componentType: monitor.getItemType(),
+    beingDragged: monitor.isDragging(),
+    offset: monitor.getSourceClientOffset(),
+}))(
+    React.memo(
+        CustomDragLayer,
+        (prevProps, nextProps) => !isEqual(prevProps.offset, nextProps.offset)
+    )
+);

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

@@ -1,10 +1,9 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import compose from 'recompose/compose';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import { translate } from 'ra-core';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
     item: {
         alignItems: 'center',
         backgroundColor: theme.palette.action.active,
@@ -16,45 +15,35 @@ const styles = theme => ({
         paddingLeft: theme.spacing(6),
         paddingRight: theme.spacing(4),
     },
-});
-class DragPreview extends Component {
-    shouldComponentUpdate() {
-        return false;
-    }
-    render() {
-        const {
-            children,
-            className,
-            classes,
-            node,
-            style,
-            translate,
-        } = this.props;
-        return (
-            <div className={className || classes.item} style={style}>
-                {children
-                    ? typeof children === 'function'
-                        ? children({ node, translate })
-                        : children
-                    : translate('ra.tree.drag_preview', {
-                          id: node.id,
-                          smart_count: node.children.length,
-                      })}
-            </div>
-        );
-    }
-}
+}));
+
+const DragPreview = ({ children, className, node, style, translate }) => {
+    const classes = useStyles();
+
+    return (
+        <div className={className || classes.item} style={style}>
+            {children
+                ? typeof children === 'function'
+                    ? children({ node, translate })
+                    : children
+                : translate('ra.tree.drag_preview', {
+                      id: node.id,
+                      smart_count: node.children.length,
+                  })}
+        </div>
+    );
+};
 
 DragPreview.propTypes = {
     children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
     className: PropTypes.string,
-    classes: PropTypes.object,
     node: PropTypes.object,
     style: PropTypes.object,
     translate: PropTypes.func.isRequired,
 };
 
-export default compose(
-    translate,
-    withStyles(styles)
-)(DragPreview);
+export default translate()(
+    React.memo(DragPreview, () => {
+        return false;
+    })
+);

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;