fix: make #tabs work with React define content config

dnbexperience · Feb 2, 2019 · f7103ee · f7103ee
1 parent 37cd58d
commit f7103ee
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 11 deletions.
diff --git a/packages/dnb-ui-lib/src/components/tabs/Tabs.js b/packages/dnb-ui-lib/src/components/tabs/Tabs.js
@@ -114,9 +114,8 @@ export default class Tabs extends PureComponent {
     ) {
       res = props.children.reduce((acc, content, i) => {
         if (
-          content.type &&
-          (content.type.name || content.type.displayName) ===
-            'CustomContent'
+          content.props &&
+          content.props.displayName === 'CustomContent' // we use this sollution, as Component.displayName
         ) {
           // tabs data from main prop
           const dataProps =
@@ -292,7 +291,7 @@ export default class Tabs extends PureComponent {
   }
 
   renderActiveTab(tabKey) {
-    return `dnb-tablink dnb-no-mouse-focus tab--${tabKey} ${
+    return `dnb-tablink tab--${tabKey} ${
       this.isSelected(tabKey) ? 'selected' : ''
     }`
   }
@@ -489,10 +488,7 @@ class ContentWrapper extends PureComponent {
   }
   render() {
     const { id, children } = this.props
-    const key =
-      this.props.selected_key ||
-      (this._reactInternalFiber && this._reactInternalFiber.key) ||
-      'key'
+    const key = this.props.selected_key || 'key'
 
     return (
       <div
@@ -516,14 +512,17 @@ class ContentWrapper extends PureComponent {
   </Tabs>
  */
 class CustomContent extends PureComponent {
+  static name2 = 'CustomContent'
   static propTypes = {
+    displayName: PropTypes.string, // eslint-disable-line
     title: PropTypes.string, // eslint-disable-line
     hash: PropTypes.string, // eslint-disable-line
     selected: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), // eslint-disable-line
     disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), // eslint-disable-line
     children: PropTypes.node.isRequired
   }
   static defaultProps = {
+    displayName: 'CustomContent',
     title: null,
     hash: null,
     selected: null,

diff --git a/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap b/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap
@@ -35,6 +35,7 @@ exports[`Tabs component have to match snapshot 1`] = `
       "props": Object {
         "children": "children",
         "disabled": "disabled",
+        "displayName": "displayName",
         "hash": "hash",
         "selected": "selected",
         "title": "title",
@@ -92,7 +93,7 @@ exports[`Tabs component have to match snapshot 1`] = `
             >
               <button
                 aria-selected={false}
-                className="dnb-tablink dnb-no-mouse-focus tab--first "
+                className="dnb-tablink tab--first "
                 disabled={false}
                 id="id-tab-first"
                 key="tab--first"
@@ -117,7 +118,7 @@ exports[`Tabs component have to match snapshot 1`] = `
               <button
                 aria-controls="id-content-second"
                 aria-selected={true}
-                className="dnb-tablink dnb-no-mouse-focus tab--second selected"
+                className="dnb-tablink tab--second selected"
                 disabled={false}
                 id="id-tab-second"
                 key="tab--second"
@@ -141,7 +142,7 @@ exports[`Tabs component have to match snapshot 1`] = `
               </button>
               <button
                 aria-selected={false}
-                className="dnb-tablink dnb-no-mouse-focus tab--third "
+                className="dnb-tablink tab--third "
                 disabled={false}
                 id="id-tab-third"
                 key="tab--third"