Merge pull request #669 from creative-commoners/pulls/1/change-active…

…-tab-via-redux-form

NEW Tabs now store the active tab in redux state

client/src/components/Tabs/Tabs.js

@@ -9,9 +9,6 @@ class Tabs extends Component {
 
     this.toggle = this.toggle.bind(this);
     this.renderTab = this.renderTab.bind(this);
-    this.state = {
-      activeTab: this.getDefaultActiveKey()
-    };
   }
 
   /**
@@ -62,10 +59,8 @@ class Tabs extends Component {
   }
 
   toggle(activeTab) {
-    if (this.state.activeTab !== activeTab) {
-      this.setState({
-        activeTab,
-      });
+    if (this.props.value !== activeTab) {
+      this.props.onChange(activeTab);
     }
   }
 
@@ -79,8 +74,11 @@ class Tabs extends Component {
     if (child.props.title === null) {
       return null;
     }
+
+    const currentTab = this.props.value || this.getDefaultActiveKey();
+
     const classNames = classnames({
-      active: this.state.activeTab === child.props.name,
+      active: currentTab === child.props.name,
       [child.props.tabClassName]: child.props.tabClassName,
     });
 
@@ -118,8 +116,7 @@ class Tabs extends Component {
   }
 
   render() {
-    const { hideNav, children } = this.props;
-    const { activeTab } = this.state;
+    const { hideNav, children, value } = this.props;
 
     const containerProps = this.getContainerProps();
     const nav = hideNav ? null : this.renderNav();
@@ -128,7 +125,7 @@ class Tabs extends Component {
       <div {...containerProps}>
         <div className="wrapper">
           {nav}
-          <TabContent activeTab={activeTab}>
+          <TabContent activeTab={value || this.getDefaultActiveKey()}>
             {children}
           </TabContent>
         </div>
@@ -142,6 +139,7 @@ Tabs.propTypes = {
   defaultActiveKey: PropTypes.string,
   extraClass: PropTypes.string,
   hideNav: PropTypes.bool,
+  onChange: PropTypes.func, // Comes from ReduxFormField
 };
 
 Tabs.defaultProps = {

client/src/containers/FormBuilderLoader/FormBuilderLoader.js

@@ -340,6 +340,10 @@ class FormBuilderLoader extends Component {
             { keepSubmitSucceeded: true }
           );
 
+          if (typeof this.props.onReduxFormInit === 'function') {
+            this.props.onReduxFormInit();
+          }
+
           return overriddenSchema;
         }
         return formSchema;
@@ -438,6 +442,7 @@ FormBuilderLoader.propTypes = Object.assign({}, basePropTypes, {
   form: PropTypes.string,
   submitting: PropTypes.bool,
   onFetchingSchema: PropTypes.func,
+  onReduxFormInit: PropTypes.func,
   loadingComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
 });