Merge pull request #3589 from jaytula/usestyles-dragpreview

[RFR] Convert DragPreview component to useStyles
marmelab · Aug 23, 2019 · 769a179 · 769a179
2 parents 7ecd4a1 + b43b7de
commit 769a179
Showing 1 changed file with 28 additions and 36 deletions.
diff --git 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 React.memo(DragPreview, () => true);