NEW Connect Element to redux-form state and use activeTab as prop rat…

…her than storing it in local state.

client/src/components/ElementActions/AbstractAction.js

@@ -26,6 +26,7 @@ AbstractAction.propTypes = {
   onClick: PropTypes.func,
   title: PropTypes.string,
   name: PropTypes.string,
+  active: PropTypes.bool,
 };
 
 AbstractAction.defaultProps = {

client/src/components/ElementEditor/Content.js

@@ -30,6 +30,7 @@ class Content extends PureComponent {
       InlineEditFormComponent,
       SummaryComponent,
       activeTab,
+      onFormInit
     } = this.props;
 
     if (!content && !fileUrl) {
@@ -53,6 +54,7 @@ class Content extends PureComponent {
             onClick={(event) => event.stopPropagation()}
             elementId={id}
             activeTab={activeTab}
+            onFormInit={onFormInit}
           />
         }
       </div>

client/src/components/ElementEditor/Element.js

@@ -2,9 +2,14 @@
 
 import React, { Component, PropTypes } from 'react';
 import { elementType } from 'types/elementType';
+import { bindActionCreators, compose } from 'redux';
 import { inject } from 'lib/Injector';
 import i18n from 'i18n';
 import classNames from 'classnames';
+import { connect } from 'react-redux';
+import { change } from 'redux-form';
+import { loadElementFormStateName } from 'state/editor/loadElementFormStateName';
+
 
 /**
  * The Element component used in the context of an ElementEditor shows the summary
@@ -17,10 +22,11 @@ class Element extends Component {
     this.handleKeyUp = this.handleKeyUp.bind(this);
     this.handleExpand = this.handleExpand.bind(this);
     this.handleTabClick = this.handleTabClick.bind(this);
+    this.updateFormTab = this.updateFormTab.bind(this);
 
     this.state = {
       previewExpanded: false,
-      activeTab: '',
+      initialTab: '',
     };
   }
 
@@ -46,15 +52,41 @@ class Element extends Component {
   }
 
   /**
-   * Update the active tab state on tab click that is passed down to InlineEditForm
+   * Dispatcher to Redux-Form state for the Tabs container 'value'
+   * @param {string} activeTab Name prop of the active tab
+   */
+  updateFormTab(activeTab) {
+    const { element, actions } = this.props;
+    const { initialTab } = this.state;
+
+    const formStateName = loadElementFormStateName(element.ID);
+
+    if (!initialTab) {
+      this.setState({
+        initialTab: activeTab
+      });
+    }
+
+    if (activeTab || initialTab) {
+      actions.reduxForm.change(formStateName, 'Root', activeTab || initialTab);
+    }
+  }
+
+  /**
+   * Update the active tab on tab actions menu button click event. Is passed down to InlineEditForm.
    *
    * @param {string} toBeActiveTab
    */
   handleTabClick(toBeActiveTab) {
-    this.setState({
-      activeTab: toBeActiveTab,
-      previewExpanded: true,
-    });
+    const { activeTab } = this.props;
+
+    if (toBeActiveTab !== activeTab) {
+      this.setState({
+        previewExpanded: true,
+      });
+
+      this.updateFormTab(toBeActiveTab);
+    }
   }
 
   /**
@@ -101,9 +133,10 @@ class Element extends Component {
       link,
       editTabs,
       pageId,
+      activeTab
     } = this.props;
 
-    const { previewExpanded, activeTab } = this.state;
+    const { previewExpanded } = this.state;
 
     const linkTitle = i18n.inject(
       i18n._t('ElementalElement.TITLE', 'Edit this {type} block'),
@@ -122,6 +155,7 @@ class Element extends Component {
       this.getVersionedStateClassName()
     );
 
+
     return (
       <div
         className={elementClassNames}
@@ -146,6 +180,7 @@ class Element extends Component {
           previewExpanded={previewExpanded}
           expandable={element.InlineEditable}
           handleEditTabsClick={this.handleTabClick}
+          activeTab={activeTab}
         />
         <ContentComponent
           id={element.ID}
@@ -154,12 +189,34 @@ class Element extends Component {
           content={element.BlockSchema.content}
           previewExpanded={previewExpanded}
           activeTab={activeTab}
+          onFormInit={() => this.updateFormTab(activeTab)}
         />
       </div>
     );
   }
 }
 
+function mapStateToProps(state, ownProps) {
+  const elementName = loadElementFormStateName(ownProps.element.ID).split('.')[1];
+
+  // InlineEditForm will neither have been rendered nor wrapped in redux-form
+  if (!state.form.formState.element || !state.form.formState.element[elementName]) {
+    return {};
+  }
+
+  const activeTab = state.form.formState.element[elementName].values.Root;
+  return { activeTab };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: {
+      reduxForm: bindActionCreators({ change }, dispatch),
+    },
+  };
+}
+
+
 Element.propTypes = {
   element: elementType,
   link: PropTypes.string.isRequired,
@@ -172,10 +229,13 @@ Element.defaultProps = {
 
 export { Element as Component };
 
-export default inject(
-  ['ElementHeader', 'ElementContent'],
-  (HeaderComponent, ContentComponent) => ({
-    HeaderComponent, ContentComponent,
-  }),
-  () => 'ElementEditor.ElementList.Element'
+export default compose(
+  connect(mapStateToProps, mapDispatchToProps),
+  inject(
+    ['ElementHeader', 'ElementContent'],
+    (HeaderComponent, ContentComponent) => ({
+      HeaderComponent, ContentComponent,
+    }),
+    () => 'ElementEditor.ElementList.Element'
+  )
 )(Element);

client/src/components/ElementEditor/ElementActions.js

@@ -31,15 +31,21 @@ class ElementActions extends Component {
    * @returns {DOMElement[]|null}
    */
   renderEditTabs() {
-    const { editTabs } = this.props;
+    const { editTabs, activeTab } = this.props;
 
     if (!editTabs || !editTabs.length) {
       return null;
     }
 
     return editTabs.map(
       ({ name, title }) =>
-        <AbstractAction key={name} name={name} title={title} onClick={this.handleEditTabsClick} />
+        (<AbstractAction
+          key={name}
+          name={name}
+          title={title}
+          onClick={this.handleEditTabsClick}
+          active={name === activeTab}
+        />)
     );
   }
 
@@ -52,7 +58,7 @@ class ElementActions extends Component {
     const { children, editTabs } = this.props;
 
     if (editTabs && editTabs.length && React.Children.count(children)) {
-      return <DropdownItem divider />;
+      return <DropdownItem divider role="separator" />;
     }
     return null;
   }
@@ -91,6 +97,7 @@ class ElementActions extends Component {
 
 ElementActions.propTypes = {
   id: PropTypes.string,
+  activeTab: PropTypes.string,
   editTabs: PropTypes.arrayOf(PropTypes.shape({
     title: PropTypes.string,
     name: PropTypes.string,

client/src/components/ElementEditor/Header.js

@@ -94,9 +94,12 @@ class Header extends Component {
           </div>
           <h3 className="element-editor-header__title">{title}</h3>
         </div>
-        <div className="element-editor-header__actions">
+        <div
+          role="none"
+          className="element-editor-header__actions"
+          onClick={(event) => event.stopPropagation()}
+        >
           {expandable && <ElementActionsComponent {...this.props} />}
-
           <i className={expandCaretClasses} title={expandTitle} />
         </div>
       </div>

client/src/components/ElementEditor/Header.scss

@@ -72,4 +72,8 @@
       background-color: $state-modified-bg;
     }
   }
+
+  .dropdown-item.active {
+    cursor: default;
+  }
 }

client/src/components/ElementEditor/InlineEditForm.js

@@ -1,59 +1,11 @@
 import React, { PureComponent, PropTypes } from 'react';
-import { connect } from 'react-redux';
 import classnames from 'classnames';
 import FormBuilderLoader from 'containers/FormBuilderLoader/FormBuilderLoader';
 import { loadElementSchemaValue } from 'state/editor/loadElementSchemaValue';
-import { bindActionCreators } from 'redux';
-import { change } from 'redux-form/lib';
-import Config from 'lib/Config';
 
 class InlineEditForm extends PureComponent {
-  constructor(props) {
-    super(props);
-
-    const sectionKey = 'DNADesign\\Elemental\\Controllers\\ElementalAreaController';
-    const section = Config.getSection(sectionKey);
-    const formNameTemplate = section.form.elementForm.formNameTemplate;
-
-    this.state = {
-      formNameTemplate
-    };
-
-    this.updateFormTab = this.updateFormTab.bind(this);
-  }
-
-  componentDidMount() {
-    this.updateFormTab();
-  }
-
-  /**
-   * Update the active tab on tab actions menu button click event.
-   * @param event onChangeEvent from a input field.
-   */
-  componentDidUpdate(prevProps) {
-    const { activeTab } = this.props;
-
-    if (activeTab !== prevProps.activeTab) {
-      this.updateFormTab();
-    }
-  }
-
-  getFormName(elementId) {
-    return `element.${this.state.formNameTemplate.replace('{id}', elementId)}`;
-  }
-
-  updateFormTab() {
-    const { elementId, actions, activeTab } = this.props;
-
-    // form value hardcoded since neither ElementAreaController.php's getElementForm() nor the
-    // schema data can't be accessed
-    if (activeTab !== '') {
-      actions.reduxForm.change(this.getFormName(elementId), 'Root', activeTab);
-    }
-  }
-
   render() {
-    const { elementId, extraClass, onClick } = this.props;
+    const { elementId, extraClass, onClick, onFormInit } = this.props;
 
     const classNames = classnames('element-editor-editform', extraClass);
     const schemaUrl = loadElementSchemaValue('schemaUrl', elementId);
@@ -62,9 +14,12 @@ class InlineEditForm extends PureComponent {
       formTag: 'div',
       schemaUrl,
       identifier: 'element',
-      onReduxFormInit: this.updateFormTab,
     };
 
+    if (typeof onFormInit === 'function') {
+      formProps.onReduxFormInit = onFormInit;
+    }
+
     return (
       <div className={classNames} onClick={onClick} role="presentation">
         <FormBuilderLoader {...formProps} />
@@ -73,21 +28,10 @@ class InlineEditForm extends PureComponent {
   }
 }
 
-function mapDispatchToProps(dispatch) {
-  return {
-    actions: {
-      reduxForm: bindActionCreators({ change }, dispatch),
-    },
-  };
-}
-
 InlineEditForm.propTypes = {
   extraClass: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   onClick: PropTypes.func,
   elementId: PropTypes.string,
-  activeTab: PropTypes.string,
 };
 
-export { InlineEditForm as Component };
-
-export default connect(null, mapDispatchToProps)(InlineEditForm);
+export default InlineEditForm;

client/src/state/editor/loadElementFormStateName.js

@@ -0,0 +1,18 @@
+import Config from 'lib/Config';
+
+/**
+ * Returns the named component from the elementForm's state data
+ *
+ * @param {number|null} elementId
+ * @returns {string}
+ */
+export const loadElementFormStateName = (elementId = null) => {
+  const sectionKey = 'DNADesign\\Elemental\\Controllers\\ElementalAreaController';
+  const section = Config.getSection(sectionKey);
+  const formNameTemplate = section.form.elementForm.formNameTemplate;
+
+  if (elementId) {
+    return `element.${formNameTemplate.replace('{id}', elementId)}`;
+  }
+  return formNameTemplate;
+};