Merge pull request #3591 from jaytula/usestyles-draglayer

[RFR] Convert DragLayer component to useStyles
marmelab · Aug 26, 2019 · 9581961 · 9581961
2 parents 8a2f90c + 40f6b0b
commit 9581961
Showing 1 changed file with 41 additions and 46 deletions.
diff --git a/packages/ra-tree-ui-materialui/src/DragLayer.js b/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,51 @@ 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);
-    }
+function CustomDragLayer({
+    classes: classesOverride,
+    beingDragged,
+    dragPreviewComponent: DragPreview,
+    itemBeingDragged,
+    offset,
+}) {
+    const classes = useStyles({ classes: classesOverride });
 
-    render() {
-        const {
-            classes,
-            beingDragged,
-            dragPreviewComponent: DragPreview,
-            itemBeingDragged,
-            offset,
-        } = this.props;
-        if (!beingDragged || !offset) return null;
+    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>
+    );
 }
 
-export default compose(
-    withStyles(styles),
+CustomDragLayer.propTypes = {
+    beingDragged: PropTypes.bool,
+    classes: PropTypes.object,
+    dragPreviewComponent: PropTypes.oneOfType([
+        PropTypes.element,
+        PropTypes.func,
+    ]).isRequired,
+    itemBeingDragged: PropTypes.object,
+    offset: PropTypes.object,
+};
+
+export default React.memo(
     DragLayer(monitor => ({
         itemBeingDragged: monitor.getItem(),
         componentType: monitor.getItemType(),
         beingDragged: monitor.isDragging(),
         offset: monitor.getSourceClientOffset(),
-    }))
-)(CustomDragLayer);
+    }))(CustomDragLayer),
+    (prevProps, nextProps) => isEqual(prevProps.offset, nextProps.offset)
+);