From b0bc749fba0f704738347105686eec08c608a60d Mon Sep 17 00:00:00 2001
From: jaytula <jaytula@gmail.com>
Date: Thu, 22 Aug 2019 20:58:39 -0700
Subject: [PATCH 1/2] Convert DragPreview component to useStyles

---
 .../ra-tree-ui-materialui/src/DragPreview.js  | 64 ++++++++-----------
 1 file changed, 28 insertions(+), 36 deletions(-)

diff --git a/packages/ra-tree-ui-materialui/src/DragPreview.js b/packages/ra-tree-ui-materialui/src/DragPreview.js
index 9a33376e082..8534e614495 100644
--- a/packages/ra-tree-ui-materialui/src/DragPreview.js
+++ b/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 { translate } from 'ra-core';
+import { makeStyles } from '@material-ui/core/styles';
+import { useTranslate } from 'ra-core';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
     item: {
         alignItems: 'center',
         backgroundColor: theme.palette.action.active,
@@ -16,33 +15,29 @@ 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>
-        );
-    }
+}));
+
+function DragPreview({
+    children,
+    className,
+    classes: classesOverride,
+    node,
+    style,
+}) {
+    const classes = useStyles({ classes: classesOverride });
+    const translate = useTranslate();
+    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 = {
@@ -54,7 +49,4 @@ DragPreview.propTypes = {
     translate: PropTypes.func.isRequired,
 };
 
-export default compose(
-    translate,
-    withStyles(styles)
-)(DragPreview);
+export default DragPreview;

From b43b7defbc84bcb0b9a967100412d1e5e72f335e Mon Sep 17 00:00:00 2001
From: jaytula <jaytula@gmail.com>
Date: Thu, 22 Aug 2019 23:58:27 -0700
Subject: [PATCH 2/2] Memo-ize DragPreview to disallow re-render

---
 packages/ra-tree-ui-materialui/src/DragPreview.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ra-tree-ui-materialui/src/DragPreview.js b/packages/ra-tree-ui-materialui/src/DragPreview.js
index 8534e614495..085d0aa707a 100644
--- a/packages/ra-tree-ui-materialui/src/DragPreview.js
+++ b/packages/ra-tree-ui-materialui/src/DragPreview.js
@@ -49,4 +49,4 @@ DragPreview.propTypes = {
     translate: PropTypes.func.isRequired,
 };
 
-export default DragPreview;
+export default React.memo(DragPreview, () => true);