Merge pull request #432 from plotly/plotly-containers

Rename Panel/Fold/Section -> PlotlyPanel/Fold/Section/

Author: VeraZab

README.md

@@ -66,11 +66,11 @@ The [custom editor example](https://github.com/plotly/react-chart-editor/tree/ma
 
 ### General-purpose Containers
 
-* `<Panel />`: renders as a generic rectangular container with special handling for collapsing/expanding child `<Fold />`s and optionally an 'add' button for creating them
 * `<PanelMenuWrapper />`: renders as a sidebar selector menu for `<Panel />`s
-* `<Fold />`: collapsable container within a `<Panel />`
-* `<Section />`: uncollapsable container within a `<Panel />` or `<Fold />`
-* `<SectionHeader/>`: a `SectionHeader` to use separately with custom layouts.
+* `<PlotlyPanel />`: renders as a generic rectangular container with special handling for collapsing/expanding child `<Fold />`s and optionally an 'add' button for creating them, has special [visibility rules](https://github.com/plotly/react-chart-editor/tree/master/src/components/containers/_tests_/ConnectedContainersVisibility-test.js) that depend on plotly figure
+* `<PlotlyFold />`: collapsable container within a `<Panel />`, has special [visibility rules](https://github.com/plotly/react-chart-editor/tree/master/src/components/containers/_tests_/ConnectedContainersVisibility-test.js) that depend on plotly figure
+* `<PlotlySection />`: uncollapsable container within a `<Panel />` or `<Fold />`, has special [visibility rules](https://github.com/plotly/react-chart-editor/tree/master/src/components/containers/_tests_/ConnectedContainersVisibility-test.js) that depend on plotly figure
+* `<Panel/>`, `<Fold/>`, `<Section/>`: same as `PlotlyPanel`, `PlotlyFold`, `PlotlySection`, but there are no special visibility rules, those containers [always show, and always show their children](https://github.com/plotly/react-chart-editor/tree/master/src/components/containers/_tests_/UnconnectedContainersVisibility-test.js), but Fold does not have the canDelete functionality as its context related
 * `<SingleSidebarItem/>`: wraps any item you would like to see appear in the sidebar menu.
 
 ### General-purpose Fields

examples/custom/src/CustomEditor.js

@@ -3,13 +3,13 @@ import {
   Flaglist,
   ColorPicker,
   ColorscalePicker,
-  Fold,
+  PlotlyFold,
   PanelMenuWrapper,
   TextEditor,
   Radio,
   Dropdown,
   Info,
-  Section,
+  PlotlySection,
   Numeric,
   LayoutPanel,
   Button,
@@ -22,16 +22,16 @@ export default class CustomEditor extends Component {
     return (
       <PanelMenuWrapper>
         <TraceAccordion group="Traces" name="Style">
-          <Section name="Colorscale" attr="marker.colorscale">
+          <PlotlySection name="Colorscale" attr="marker.colorscale">
             <ColorscalePicker label="Colorscale" attr="marker.colorscale" />
-          </Section>
+          </PlotlySection>
         </TraceAccordion>
 
         <LayoutPanel group="Layout" name="Style">
-          <Fold name="Fold">
+          <PlotlyFold name="PlotlyFold">
             {
-              // At least one of the direct children of Fold must have an attr prop
-              // for the Fold to display itself
+              // At least one of the direct children of PlotlyFold must have an attr prop
+              // for the PlotlyFold to display itself
             }
             <Info attr="title">
               <p>
@@ -42,7 +42,7 @@ export default class CustomEditor extends Component {
                 This is an <code>Info</code> component.
               </p>
             </Info>
-            <Section name="Section">
+            <PlotlySection name="PlotlySection">
               <Numeric label="Numeric" attr="width" show units="units" />
               <Dropdown
                 label="Dropdown"
@@ -80,8 +80,8 @@ export default class CustomEditor extends Component {
               />
               <TextEditor attr="title" label="TextEditor htmlOnly" htmlOnly />
               <TextEditor attr="title" label="TextEditor latexOnly" latexOnly />
-            </Section>
-          </Fold>
+            </PlotlySection>
+          </PlotlyFold>
         </LayoutPanel>
         <SingleSidebarItem>
           <Button

src/__tests__/PlotlyEditor.test.js

@@ -1,4 +1,4 @@
-import PlotlyEditor, {Fold} from '..';
+import PlotlyEditor, {PlotlyFold} from '..';
 import {configure, mount} from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import React, {Component} from 'react';
@@ -54,7 +54,7 @@ describe('<TestApp>', () => {
   });
 
   it('Can create and delete traces', done => {
-    expect(app.find(Fold).length).toEqual(0);
+    expect(app.find(PlotlyFold).length).toEqual(0);
 
     app
       .find('.js-add-button')

src/components/containers/AnnotationAccordion.js

@@ -1,10 +1,10 @@
-import Fold from './Fold';
+import PlotlyFold from './PlotlyFold';
 import TraceRequiredPanel from './TraceRequiredPanel';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {connectAnnotationToLayout, localize} from 'lib';
 
-const AnnotationFold = connectAnnotationToLayout(Fold);
+const AnnotationFold = connectAnnotationToLayout(PlotlyFold);
 
 class AnnotationAccordion extends Component {
   render() {

src/components/containers/AxesFold.js

@@ -1,5 +1,5 @@
 import AxesSelector from '../fields/AxesSelector';
-import Fold from './Fold';
+import PlotlyFold from './PlotlyFold';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {connectAxesToLayout} from 'lib';
@@ -8,10 +8,10 @@ class AxesFold extends Component {
   render() {
     const {children, options} = this.props;
     return options.length && children ? (
-      <Fold {...this.props}>
+      <PlotlyFold {...this.props}>
         {options.length === 1 ? null : <AxesSelector axesOptions={options} />}
         {children}
-      </Fold>
+      </PlotlyFold>
     ) : null;
   }
 }

src/components/containers/ImageAccordion.js

@@ -1,10 +1,10 @@
-import Fold from './Fold';
+import PlotlyFold from './PlotlyFold';
 import TraceRequiredPanel from './TraceRequiredPanel';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {connectImageToLayout, localize} from 'lib';
 
-const ImageFold = connectImageToLayout(Fold);
+const ImageFold = connectImageToLayout(PlotlyFold);
 
 class ImageAccordion extends Component {
   render() {

src/components/containers/Fold.js renamed to src/components/containers/PlotlyFold.js

@@ -10,43 +10,10 @@ import {
   striptags,
 } from 'lib';
 
-class Fold extends Component {
-  constructor(props, context) {
-    super(props, context);
-
-    this.foldVisible = false;
-    this.determineVisibility(props, context);
-  }
-
-  componentWillReceiveProps(nextProps, nextContext) {
-    this.determineVisibility(nextProps, nextContext);
-  }
-
-  determineVisibility(nextProps, nextContext) {
-    this.foldVisible = false;
-
-    React.Children.forEach(nextProps.children, child => {
-      if (!child || this.foldVisible) {
-        return;
-      }
-
-      if (child.props.attr) {
-        // attr components force fold open if they are visible
-        const plotProps = unpackPlotProps(child.props, nextContext);
-        if (child.type.modifyPlotProps) {
-          child.type.modifyPlotProps(child.props, nextContext, plotProps);
-        }
-
-        this.foldVisible = this.foldVisible || plotProps.isVisible;
-        return;
-      }
-
-      if (!(child.type.plotly_editor_traits || {}).no_visibility_forcing) {
-        // non-attr components force visibility (unless they don't via traits)
-        this.foldVisible = true;
-        return;
-      }
-    });
+class UnlocalizedFold extends Component {
+  constructor() {
+    super();
+    this.foldVisible = true;
   }
 
   render() {
@@ -136,9 +103,9 @@ class Fold extends Component {
   }
 }
 
-Fold.plotly_editor_traits = {foldable: true};
+UnlocalizedFold.plotly_editor_traits = {foldable: true};
 
-Fold.propTypes = {
+UnlocalizedFold.propTypes = {
   canDelete: PropTypes.bool,
   children: PropTypes.node,
   className: PropTypes.string,
@@ -151,11 +118,57 @@ Fold.propTypes = {
   name: PropTypes.string,
 };
 
-Fold.contextTypes = Object.assign(
+export const Fold = localize(UnlocalizedFold);
+
+class PlotlyFold extends UnlocalizedFold {
+  constructor(props, context) {
+    super(props, context);
+
+    this.foldVisible = false;
+    this.determineVisibility(props, context);
+  }
+
+  componentWillReceiveProps(nextProps, nextContext) {
+    this.determineVisibility(nextProps, nextContext);
+  }
+
+  determineVisibility(nextProps, nextContext) {
+    this.foldVisible = false;
+
+    React.Children.forEach(nextProps.children, child => {
+      if (!child || this.foldVisible) {
+        return;
+      }
+
+      if (child.props.attr) {
+        // attr components force fold open if they are visible
+        const plotProps = unpackPlotProps(child.props, nextContext);
+        if (child.type.modifyPlotProps) {
+          child.type.modifyPlotProps(child.props, nextContext, plotProps);
+        }
+
+        this.foldVisible = this.foldVisible || plotProps.isVisible;
+        return;
+      }
+
+      if (!(child.type.plotly_editor_traits || {}).no_visibility_forcing) {
+        // non-attr components force visibility (unless they don't via traits)
+        this.foldVisible = true;
+        return;
+      }
+    });
+  }
+}
+
+PlotlyFold.plotly_editor_traits = {
+  foldable: true,
+};
+
+PlotlyFold.contextTypes = Object.assign(
   {
     deleteContainer: PropTypes.func,
   },
   containerConnectedContextTypes
 );
 
-export default localize(Fold);
+export default localize(PlotlyFold);

src/components/containers/Panel.js renamed to src/components/containers/PlotlyPanel.js

@@ -26,7 +26,7 @@ PanelErrorImpl.propTypes = {
 
 const PanelError = localize(PanelErrorImpl);
 
-class Panel extends Component {
+class UnlocalizedPanel extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -123,23 +123,23 @@ class Panel extends Component {
   }
 }
 
-Panel.plotly_editor_traits = {no_visibility_forcing: true};
-
-Panel.propTypes = {
+UnlocalizedPanel.propTypes = {
   children: PropTypes.node,
   addAction: PropTypes.object,
   showExpandCollapse: PropTypes.bool,
   noPadding: PropTypes.bool,
 };
 
-Panel.defaultProps = {
+UnlocalizedPanel.defaultProps = {
   showExpandCollapse: true,
 };
 
-Panel.contextTypes = {
-  layout: PropTypes.object,
-  onUpdate: PropTypes.func,
-  updateContainer: PropTypes.func,
+export const Panel = localize(UnlocalizedPanel);
+
+class PlotlyPanel extends UnlocalizedPanel {}
+
+PlotlyPanel.plotly_editor_traits = {
+  no_visibility_forcing: true,
 };
 
-export default Panel;
+export default localize(PlotlyPanel);

src/components/containers/Section.js renamed to src/components/containers/PlotlySection.js

@@ -5,14 +5,43 @@ import {
   localize,
   unpackPlotProps,
 } from '../../lib';
-import SectionHeader from './SectionHeader';
 
-class Section extends Component {
-  constructor(props, context) {
-    super(props, context);
+class UnlocalizedSection extends Component {
+  constructor() {
+    super();
+    this.sectionVisible = true;
+  }
+
+  render() {
+    if (!this.sectionVisible) {
+      return null;
+    }
+
+    return (
+      <div className="section">
+        {this.props.name ? (
+          <div className="section__heading">
+            <div className="section__heading__text">{this.props.name}</div>
+          </div>
+        ) : null}
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+UnlocalizedSection.plotly_editor_traits = {no_visibility_forcing: false};
+UnlocalizedSection.propTypes = {
+  children: PropTypes.node,
+  name: PropTypes.string,
+  attr: PropTypes.string,
+};
 
-    this.sectionVisible = false;
+export const Section = localize(UnlocalizedSection);
 
+class PlotlySection extends UnlocalizedSection {
+  constructor(props, context) {
+    super(props, context);
     this.determineVisibility(props, context);
   }
 
@@ -25,7 +54,7 @@ class Section extends Component {
     this.sectionVisible = Boolean(isVisible);
 
     React.Children.forEach(nextProps.children, child => {
-      if (!child || this.foldVisible) {
+      if (!child || this.sectionVisible) {
         return;
       }
 
@@ -45,27 +74,8 @@ class Section extends Component {
       }
     });
   }
-
-  render() {
-    if (!this.sectionVisible) {
-      return null;
-    }
-    return (
-      <div className="section">
-        {this.props.name && <SectionHeader name={this.props.name} />}
-        {this.props.children}
-      </div>
-    );
-  }
 }
 
-Section.plotly_editor_traits = {no_visibility_forcing: true};
-
-Section.propTypes = {
-  children: PropTypes.node,
-  name: PropTypes.string,
-  attr: PropTypes.string,
-};
-
-Section.contextTypes = containerConnectedContextTypes;
-export default localize(Section);
+PlotlySection.plotly_editor_traits = {no_visibility_forcing: true};
+PlotlySection.contextTypes = containerConnectedContextTypes;
+export default localize(PlotlySection);