react-cookie - Fix display name to include the original component name

bendotcodes · Jul 4, 2019 · 3e41f66 · 3e41f66
1 parent 1f43a41
commit 3e41f66
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 15 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,7 +5,8 @@
 - Upgrade dependencies to last versions
 - Publish MIT license to NPM with the code (#224)
 - `universal-cookie`: Add support for generic type with reading cookies (#222)
-- `react-cookie`: Add `WrappedComponent` static property when using `withRouter` (#225)
+- `react-cookie`: Add `WrappedComponent` static property when using `withCookies` (#225)
+- `react-cookie`: Fix display name to include the original component name
 
 ## v4.0.0
 

diff --git a/packages/react-cookie/README.md b/packages/react-cookie/README.md
@@ -113,7 +113,7 @@ Your original static properties will be hoisted on the returned component. You c
 function MyComponent() {
   return null;
 }
-const NewComponent = withRouter(MyComponent);
+const NewComponent = withCookies(MyComponent);
 NewComponent.WrappedComponent === MyComponent;
 ```
 

diff --git a/packages/react-cookie/src/__tests__/withCookies-test.js b/packages/react-cookie/src/__tests__/withCookies-test.js
@@ -126,6 +126,19 @@ describe('withCookies(Component)', () => {
       const Component = withCookies(TestComponent);
       expect(Component.WrappedComponent).toBe(TestComponent);
     });
+
+    it('format withCookies() with display name first', () => {
+      const MyNameComponent = () => null;
+      MyNameComponent.displayName = 'MyDisplayName';
+      const Component = withCookies(MyNameComponent);
+      expect(Component.displayName).toBe('withCookies(MyDisplayName)');
+    });
+
+    it('format withCookies() with name as fallback', () => {
+      const MyNameComponent = () => null;
+      const Component = withCookies(MyNameComponent);
+      expect(Component.displayName).toBe('withCookies(MyNameComponent)');
+    });
   });
 
   describe('on the server', () => {

diff --git a/packages/react-cookie/src/withCookies.tsx b/packages/react-cookie/src/withCookies.tsx
@@ -18,6 +18,7 @@ export default function withCookies<T extends ReactCookieProps>(
 
   class CookieWrapper extends React.Component<any, any> {
     static displayName = `withCookies(${name})`;
+    static WrappedComponent = WrappedComponent;
 
     onChange = () => {
       // Make sure to update children with new values
@@ -61,19 +62,18 @@ export default function withCookies<T extends ReactCookieProps>(
     }
   }
 
-  const CookieWrapperWithRefAndCookieConsumer: any = React.forwardRef(
-    (props, ref) => {
-      return (
-        <Consumer>
-          {(cookies: Cookies) => (
-            <CookieWrapper cookies={cookies} {...props} forwardedRef={ref} />
-          )}
-        </Consumer>
-      );
-    }
-  );
+  const ForwardedComponent: any = React.forwardRef((props: any, ref: any) => {
+    return (
+      <Consumer>
+        {(cookies: Cookies) => (
+          <CookieWrapper cookies={cookies} {...props} forwardedRef={ref} />
+        )}
+      </Consumer>
+    );
+  });
 
-  CookieWrapperWithRefAndCookieConsumer.WrappedComponent = WrappedComponent;
+  ForwardedComponent.displayName = CookieWrapper.displayName;
+  ForwardedComponent.WrappedComponent = CookieWrapper.WrappedComponent;
 
-  return hoistStatics(CookieWrapperWithRefAndCookieConsumer, WrappedComponent);
+  return hoistStatics(ForwardedComponent, WrappedComponent);
 }