[core] Update getDisplayName to handle React.memo (#19762)

mui · Feb 19, 2020 · 61a9cc6 · 61a9cc6
1 parent 7a24f67
commit 61a9cc6
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 1 deletion.
diff --git a/packages/material-ui-utils/src/getDisplayName.js b/packages/material-ui-utils/src/getDisplayName.js
@@ -1,4 +1,4 @@
-import { ForwardRef } from 'react-is';
+import { ForwardRef, Memo } from 'react-is';
 
 // Simplified polyfill for IE 11 support
 // https://github.com/JamesMGreene/Function.name/blob/58b314d4a983110c3682f1228f845d39ccca1817/Function.name.js#L3
@@ -50,6 +50,8 @@ export default function getDisplayName(Component) {
     switch (Component.$$typeof) {
       case ForwardRef:
         return getWrappedName(Component, Component.render, 'ForwardRef');
+      case Memo:
+        return getWrappedName(Component, Component.type, 'memo');
       default:
         return undefined;
     }

diff --git a/packages/material-ui-utils/src/getDisplayName.test.js b/packages/material-ui-utils/src/getDisplayName.test.js
@@ -39,6 +39,15 @@ describe('utils/getDisplayName.js', () => {
       ));
       NamedForwardRefComponent.displayName = 'Div';
 
+      const AnonymousMemoComponent = React.memo((props, ref) => <div {...props} ref={ref} />);
+
+      const MemoComponent = React.memo(function Div(props, ref) {
+        return <div {...props} ref={ref} />;
+      });
+
+      const NamedMemoComponent = React.memo((props, ref) => <div {...props} ref={ref} />);
+      NamedMemoComponent.displayName = 'Div';
+
       assert.strictEqual(getDisplayName(SomeComponent), 'SomeComponent');
       assert.strictEqual(getDisplayName(SomeOtherComponent), 'CustomDisplayName');
       assert.strictEqual(getDisplayName(YetAnotherComponent), 'YetAnotherComponent');
@@ -48,6 +57,9 @@ describe('utils/getDisplayName.js', () => {
       assert.strictEqual(getDisplayName(AnonymousForwardRefComponent), 'ForwardRef');
       assert.strictEqual(getDisplayName(ForwardRefComponent), 'ForwardRef(Div)');
       assert.strictEqual(getDisplayName(NamedForwardRefComponent), 'Div');
+      assert.strictEqual(getDisplayName(AnonymousMemoComponent), 'memo');
+      assert.strictEqual(getDisplayName(MemoComponent), 'memo(Div)');
+      assert.strictEqual(getDisplayName(NamedMemoComponent), 'Div');
       assert.strictEqual(getDisplayName(), undefined);
       assert.strictEqual(getDisplayName({}), undefined);
       assert.strictEqual(getDisplayName(false), undefined);

diff --git a/packages/material-ui/scripts/rollup.config.js b/packages/material-ui/scripts/rollup.config.js
@@ -34,6 +34,7 @@ const commonjsOptions = {
       'isFragment',
       'isLazy',
       'isMemo',
+      'Memo',
       'isValidElementType',
     ],
   },