rename SubPanel -> MenuPanel and split MenuPanel

The underlying modal is useful to other dropdown like components so
that has been split into something called ModalBox

Author: bpostlethwaite

src/DefaultEditor.js

@@ -14,7 +14,8 @@ import {
   PanelMenuWrapper,
   Radio,
   Section,
-  SubPanel,
+  MenuPanel,
+  SymbolSelector,
   TraceAccordion,
   TraceSelector,
 } from './components';
@@ -278,7 +279,7 @@ class DefaultEditor extends Component {
               />
             </Section>
             <Section name={_('Positioning')}>
-              <SubPanel>
+              <MenuPanel>
                 <Section name={_('Anchor Point')}>
                   <Info>
                     {_(
@@ -303,7 +304,7 @@ class DefaultEditor extends Component {
                     ]}
                   />
                 </Section>
-              </SubPanel>
+              </MenuPanel>
               <Numeric
                 label={_('X Position')}
                 step={0.01}

src/components/containers/MenuPanel.js

@@ -0,0 +1,65 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import ModalBox from './ModalBox';
+
+export default class MenuPanel extends Component {
+  constructor() {
+    super();
+    this.state = {isOpen: false};
+
+    this.togglePanel = this.togglePanel.bind(this);
+  }
+
+  menupanelClasses() {
+    if (this.props.iconClass) {
+      return {
+        iconClass: `menupanel__icon ${this.props.iconClass}`,
+        spanClass: 'menupanel__icon-span',
+      };
+    } else if (this.props.question) {
+      return {
+        iconClass: 'menupanel__icon plotlyjs_editor__icon-question-circle',
+        spanClass: `menupanel__icon-span menupanel__icon-span--question`,
+      };
+    }
+    return {
+      iconClass: 'menupanel__icon plotlyjs_editor__icon-cog',
+      spanClass: 'menupanel__icon-span menupanel__icon-span--cog',
+    };
+  }
+
+  togglePanel() {
+    this.setState({isOpen: !this.state.isOpen});
+  }
+
+  render() {
+    const isOpen = this.props.show || this.state.isOpen;
+    const containerClass = classnames('menupanel', {
+      'menupanel--ownline': this.props.ownline,
+    });
+
+    const {iconClass, spanClass} = this.menupanelClasses();
+
+    return (
+      <div className={containerClass}>
+        <span className={spanClass}>
+          <span>{this.props.label}</span>
+          <i className={iconClass} onClick={this.togglePanel} />
+        </span>
+        {isOpen ? (
+          <ModalBox onClose={this.togglePanel}>{this.props.children}</ModalBox>
+        ) : null}
+      </div>
+    );
+  }
+}
+
+MenuPanel.propTypes = {
+  children: PropTypes.node,
+  iconClass: PropTypes.string,
+  show: PropTypes.bool,
+  ownline: PropTypes.bool,
+  question: PropTypes.bool,
+  label: PropTypes.string,
+};

src/components/containers/ModalBox.js

@@ -0,0 +1,24 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+
+export default class ModalBox extends Component {
+  render() {
+    let style;
+    if (this.props.backgroundColor) {
+      style = {backgroundColor: this.props.backgroundColor};
+    }
+
+    return (
+      <div className="modalbox" style={style}>
+        <div className="modalbox__cover" onClick={this.props.onClose} />
+        <div>{this.props.children}</div>
+      </div>
+    );
+  }
+}
+
+ModalBox.propTypes = {
+  backgroundColor: PropTypes.string,
+  children: PropTypes.node,
+  onClose: PropTypes.func,
+};

src/components/containers/Section.js

@@ -1,4 +1,4 @@
-import SubPanel from './SubPanel';
+import MenuPanel from './MenuPanel';
 import React, {Component, cloneElement} from 'react';
 import PropTypes from 'prop-types';
 import unpackPlotProps from '../../lib/unpackPlotProps';
@@ -12,7 +12,7 @@ class Section extends Component {
     super(props, context);
 
     this.children = null;
-    this.subPanel = null;
+    this.menuPanel = null;
 
     this.processAndSetChildren(context);
   }
@@ -28,19 +28,19 @@ class Section extends Component {
     }
 
     const attrChildren = [];
-    let subPanel = null;
+    let menuPanel = null;
 
     for (let i = 0; i < children.length; i++) {
       const child = children[i];
       if (!child) {
         continue;
       }
-      if (child.type === SubPanel) {
-        // Process the first subPanel. Ignore the rest.
-        if (subPanel) {
+      if (child.type === MenuPanel) {
+        // Process the first menuPanel. Ignore the rest.
+        if (menuPanel) {
           continue;
         }
-        subPanel = child;
+        menuPanel = child;
         continue;
       }
 
@@ -54,19 +54,19 @@ class Section extends Component {
     }
 
     this.children = attrChildren.length ? attrChildren : null;
-    this.subPanel = subPanel;
+    this.menuPanel = menuPanel;
   }
 
   render() {
     const hasVisibleChildren =
       (this.children && this.children.some(childIsVisible)) ||
-      Boolean(this.subPanel);
+      Boolean(this.menuPanel);
 
     return hasVisibleChildren ? (
       <div className="section">
         <div className="section__heading">
           {this.props.name}
-          {this.subPanel}
+          {this.menuPanel}
         </div>
         {this.children}
       </div>

src/components/containers/SubPanel.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import Section from '../Section';
-import SubPanel from '../SubPanel';
+import MenuPanel from '../MenuPanel';
 import {Flaglist, Info, Numeric} from '../../fields';
 import {TestEditor, fixtures, plotly} from '../../../lib/test-utils';
 import {connectTraceToPlot} from '../../../lib';
@@ -91,20 +91,20 @@ describe('Section', () => {
     expect(wrapper.find(Numeric).exists()).toBe(false);
   });
 
-  it('will render first subPanel even with no visible attrs', () => {
+  it('will render first menuPanel even with no visible attrs', () => {
     const wrapper = mount(
       <TestEditor
         plotly={plotly}
         onUpdate={jest.fn()}
         {...fixtures.scatter({deref: true})}
       >
         <Section name="test-section">
-          <SubPanel show>
+          <MenuPanel show>
             <Info>INFO</Info>
-          </SubPanel>
-          <SubPanel show>
+          </MenuPanel>
+          <MenuPanel show>
             <Info>MISINFORMATION</Info>
-          </SubPanel>
+          </MenuPanel>
         </Section>
       </TestEditor>
     ).find('[name="test-section"]');

src/components/containers/__tests__/Section-test.js

@@ -1,7 +1,7 @@
-import SubPanel from './SubPanel';
+import MenuPanel from './MenuPanel';
 import Fold from './Fold';
 import Panel from './Panel';
 import Section from './Section';
 import TraceAccordion from './TraceAccordion';
 
-export {SubPanel, Fold, Panel, Section, TraceAccordion};
+export {MenuPanel, Fold, Panel, Section, TraceAccordion};

src/components/containers/index.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
-import SubPanel from '../containers/SubPanel';
+import MenuPanel from '../containers/MenuPanel';
 import classnames from 'classnames';
 import {bem, localize} from '../../lib';
 import {multiValueText} from '../../lib/constants';
@@ -48,11 +48,11 @@ class Field extends Component {
         <div className={fieldClass}>
           {children}
           {multiValued ? (
-            <SubPanel label={_(multiValueText.title)} ownline question>
+            <MenuPanel label={_(multiValueText.title)} ownline question>
               <div className="info__title">{_(multiValueText.title)}</div>
               <div className="info__text">{_(multiValueText.text)}</div>
               <div className="info__sub-text">{_(multiValueText.subText)}</div>
-            </SubPanel>
+            </MenuPanel>
           ) : null}
         </div>
         {postfix ? (

src/components/fields/Field.js

@@ -11,13 +11,13 @@ import {
   TraceSelector,
 } from './fields';
 
-import {SubPanel, Fold, Panel, Section, TraceAccordion} from './containers';
+import {MenuPanel, Fold, Panel, Section, TraceAccordion} from './containers';
 import PanelMenuWrapper from './PanelMenuWrapper';
 
 export {
   AxesSelector,
   AxesRange,
-  SubPanel,
+  MenuPanel,
   ColorPicker,
   DataSelector,
   Dropdown,

src/components/index.js

@@ -12,7 +12,6 @@ import {EDITOR_ACTIONS} from './constants';
 import {
   AxesRange,
   AxesSelector,
-  SubPanel,
   ColorPicker,
   DataSelector,
   Dropdown,
@@ -25,14 +24,15 @@ import {
   PanelMenuWrapper,
   Radio,
   Section,
+  MenuPanel,
   TraceAccordion,
   TraceSelector,
 } from './components';
 
 export {
   AxesRange,
   AxesSelector,
-  SubPanel,
+  MenuPanel,
   ColorPicker,
   DataSelector,
   Dropdown,

src/index.js

@@ -3,3 +3,4 @@
 @import "section";
 @import "menupanel";
 @import "info";
+@import "modalbox";