Refactored selection logic so that both ways of handlng Tabs work a little better

Author: valentijnnieman

dash_core_components/bundle.js

@@ -2783,6 +2783,13 @@
     "description": "A Dash component that lets you render pages with tabs - the Tabs component's children\ncan be dcc.Tab components, which can hold a label that will be displayed as a tab, and can in turn hold\nchildren components that will be that tab's content.",
     "displayName": "Tabs",
     "methods": [
+      {
+        "name": "parseChildrenToArray",
+        "docblock": null,
+        "modifiers": [],
+        "params": [],
+        "returns": null
+      },
       {
         "name": "selectHandler",
         "docblock": null,

dash_core_components/metadata.json

@@ -18,7 +18,7 @@ const EnhancedTab = ({
     disabled_className,
     mobile_breakpoint,
     amountOfTabs,
-    colors
+    colors,
 }) => {
     let tabStyle = style;
     if (disabled) {
@@ -111,38 +111,50 @@ export default class Tabs extends Component {
     constructor(props) {
         super(props);
 
+        this.selectHandler = this.selectHandler.bind(this);
+        this.parseChildrenToArray = this.parseChildrenToArray.bind(this);
+
+        this.parseChildrenToArray();
+
         if (!this.props.value) {
             // if no value specified on Tabs component, set it to the first child's (which should be a Tab component) value
-            const value = this.props.children[0].props.children.props.value;
+            const value =
+                this.props.children[0].props.children.props.value || 'tab-1';
             this.state = {
-                selected: value || 'tab-1'
+                selected: value,
             };
-            if(this.props.setProps) {
+            if (this.props.setProps) {
                 // updating the prop in Dash is necessary so that callbacks work
                 this.props.setProps({
-                    value: value
+                    value: value,
                 });
             }
         } else {
             this.state = {
-                selected: this.props.value
+                selected: this.props.value,
             };
         }
-        this.selectHandler = this.selectHandler.bind(this);
+    }
+    parseChildrenToArray() {
+        if (!R.is(Array, this.props.children)) {
+            // if dcc.Tabs.children contains just one single element, it gets passed as an object
+            // instead of an array - so we put in in a array ourselves!
+            this.props.children = [this.props.children];
+        }
     }
     selectHandler(value) {
         this.setState({
-            selected: value
+            selected: value,
         });
         if (this.props.setProps) {
             this.props.setProps({value: value});
         }
     }
     componentWillReceiveProps(newProps) {
         const value = newProps.value;
-        if (!value) {
+        if (typeof value !== 'undefined') {
             this.setState({
-                selected: value
+                selected: value,
             });
         }
     }
@@ -151,13 +163,9 @@ export default class Tabs extends Component {
         let selectedTab;
         let selectedTabContent;
 
-        if (this.props.children) {
-            if (!R.is(Array, this.props.children)) {
-                // if dcc.Tabs.children contains just one single element, it gets passed as an object
-                // instead of an array - so we put in in a array ourselves!
-                this.props.children = [this.props.children];
-            }
+        this.parseChildrenToArray();
 
+        if (this.props.children) {
             const amountOfTabs = this.props.children.length;
 
             EnhancedTabs = this.props.children.map((child, index) => {
@@ -202,8 +210,6 @@ export default class Tabs extends Component {
             selectedTab = this.props.children.filter(child => {
                 return child.props.children.props.value === this.state.selected;
             });
-            window.console.log('selected', this.state.selected);
-            window.console.log('selectedTab[0]', selectedTab[0]);
             if ('props' in selectedTab[0]) {
                 selectedTabContent = selectedTab[0].props.children;
             }
@@ -265,13 +271,11 @@ export default class Tabs extends Component {
                             border-bottom: none;
                         }
                         :global(.tab-container--vert .tab:last-of-type) {
-                            border-bottom: 1px solid
-                                ${this.props.colors.border} !important;
+                            border-bottom: 1px solid ${this.props.colors.border} !important;
                         }
                         :global(.tab-container--vert .tab--selected) {
                             border: 1px solid ${this.props.colors.border};
-                            border-left: 2px solid
-                                ${this.props.colors.primary};
+                            border-left: 2px solid ${this.props.colors.primary};
                             border-right: none;
                         }
 
@@ -291,8 +295,8 @@ Tabs.defaultProps = {
     colors: {
         border: '#d6d6d6',
         primary: '#1975FA',
-        background: '#f9f9f9'
-    }
+        background: '#f9f9f9',
+    },
 };
 
 Tabs.propTypes = {
@@ -364,6 +368,6 @@ Tabs.propTypes = {
     colors: PropTypes.shape({
         border: PropTypes.string,
         primary: PropTypes.string,
-        background: PropTypes.string
-    })
+        background: PropTypes.string,
+    }),
 };