Readd component displayName fix

nstadigs · Apr 22, 2017 · 28e14e8 · 28e14e8
1 parent d16997d
commit 28e14e8
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/src/models/StyledComponent.js b/src/models/StyledComponent.js
@@ -8,6 +8,7 @@ import createWarnTooManyClasses from '../utils/createWarnTooManyClasses'
 import validAttr from '../utils/validAttr'
 import isTag from '../utils/isTag'
 import isStyledComponent from '../utils/isStyledComponent'
+import getComponentName from '../utils/getComponentName'
 import type { RuleSet, Target } from '../types'
 
 import AbstractStyledComponent from './AbstractStyledComponent'
@@ -172,7 +173,7 @@ export default (ComponentStyle: Function, constructWithOptions: Function) => {
     rules: RuleSet,
   ) => {
     const {
-      displayName = isTag(target) ? `styled.${target}` : `Styled(${target.displayName})`,
+      displayName = isTag(target) ? `styled.${target}` : `Styled(${getComponentName(target)})`,
       componentId = generateId(options.displayName),
       ParentComponent = BaseStyledComponent,
       rules: extendingRules,

diff --git a/src/models/StyledNativeComponent.js b/src/models/StyledNativeComponent.js
@@ -5,6 +5,7 @@ import type { Theme } from './ThemeProvider'
 
 import isTag from '../utils/isTag'
 import isStyledComponent from '../utils/isStyledComponent'
+import getComponentName from '../utils/getComponentName'
 import type { RuleSet, Target } from '../types'
 
 import { CHANNEL } from './ThemeProvider'
@@ -120,7 +121,7 @@ export default (constructWithOptions: Function) => {
     rules: RuleSet,
   ) => {
     const {
-      displayName = isTag(target) ? `styled.${target}` : `Styled(${target.displayName})`,
+      displayName = isTag(target) ? `styled.${target}` : `Styled(${getComponentName(target)})`,
       ParentComponent = BaseStyledNativeComponent,
       rules: extendingRules,
       attrs,

diff --git a/src/utils/getComponentName.js b/src/utils/getComponentName.js
@@ -0,0 +1,10 @@
+// @flow
+
+/* eslint-disable no-undef */
+export default function getComponentName(target: ReactClass<*>): string {
+  return (
+    target.displayName ||
+    target.name ||
+    'Component'
+  )
+}