Refactor

Author: VeraZab

src/components/containers/PlotlyFold.js

@@ -10,48 +10,10 @@ import {
   striptags,
 } from 'lib';
 
-class PlotlyFold 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;
-
-    if (nextProps.forceVisibility) {
-      this.foldVisible = true;
-      return;
-    }
-
-    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;
-      }
-    });
+export class Fold extends Component {
+  constructor() {
+    super();
+    this.foldVisible = true;
   }
 
   render() {
@@ -141,20 +103,63 @@ class PlotlyFold extends Component {
   }
 }
 
-PlotlyFold.plotly_editor_traits = {foldable: true};
+Fold.plotly_editor_traits = {foldable: true};
 
-PlotlyFold.propTypes = {
+Fold.propTypes = {
   canDelete: PropTypes.bool,
   children: PropTypes.node,
   className: PropTypes.string,
-  folded: PropTypes.bool.isRequired,
-  toggleFold: PropTypes.func.isRequired,
+  folded: PropTypes.bool,
+  toggleFold: PropTypes.func,
   hideHeader: PropTypes.bool,
   icon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   messageIfEmpty: PropTypes.string,
   localize: PropTypes.func,
   name: PropTypes.string,
-  forceVisibility: PropTypes.bool,
+};
+
+class PlotlyFold extends Fold {
+  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(
@@ -165,26 +170,3 @@ PlotlyFold.contextTypes = Object.assign(
 );
 
 export default localize(PlotlyFold);
-
-export class Fold extends PlotlyFold {}
-
-Fold.plotly_editor_traits = {
-  foldable: true,
-};
-
-Fold.defaultProps = {
-  forceVisibility: true,
-};
-
-Fold.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  folded: PropTypes.bool,
-  toggleFold: PropTypes.func,
-  hideHeader: PropTypes.bool,
-  icon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  messageIfEmpty: PropTypes.string,
-  localize: PropTypes.func,
-  name: PropTypes.string,
-  forceVisibility: PropTypes.bool,
-};

src/components/containers/PlotlyPanel.js

@@ -26,7 +26,7 @@ PanelErrorImpl.propTypes = {
 
 const PanelError = localize(PanelErrorImpl);
 
-class PlotlyPanel extends Component {
+export class Panel extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -101,7 +101,6 @@ class PlotlyPanel extends Component {
             toggleFold: () => this.toggleFold(index),
           });
         }
-
         return child;
       }
     );
@@ -124,23 +123,19 @@ class PlotlyPanel extends Component {
   }
 }
 
-PlotlyPanel.plotly_editor_traits = {no_visibility_forcing: true};
-
-PlotlyPanel.propTypes = {
+Panel.propTypes = {
   children: PropTypes.node,
   addAction: PropTypes.object,
   showExpandCollapse: PropTypes.bool,
   noPadding: PropTypes.bool,
 };
 
-PlotlyPanel.defaultProps = {
+Panel.defaultProps = {
   showExpandCollapse: true,
 };
 
-export default PlotlyPanel;
-
-export class Panel extends PlotlyPanel {}
+export default class PlotlyPanel extends Panel {}
 
-Panel.plotly_editor_traits = {
-  no_visibility_forcing: false,
+PlotlyPanel.plotly_editor_traits = {
+  no_visibility_forcing: true,
 };

src/components/containers/PlotlySection.js

@@ -7,7 +7,16 @@ import {
 } from '../../lib';
 
 export class Section extends Component {
+  constructor() {
+    super();
+    this.sectionVisible = true;
+  }
+
   render() {
+    if (!this.sectionVisible) {
+      return null;
+    }
+
     return (
       <div className="section">
         {this.props.name ? (
@@ -31,9 +40,6 @@ Section.propTypes = {
 class PlotlySection extends Section {
   constructor(props, context) {
     super(props, context);
-
-    this.sectionVisible = false;
-
     this.determineVisibility(props, context);
   }
 
@@ -46,7 +52,7 @@ class PlotlySection extends Section {
     this.sectionVisible = Boolean(isVisible);
 
     React.Children.forEach(nextProps.children, child => {
-      if (!child || this.foldVisible) {
+      if (!child || this.sectionVisible) {
         return;
       }
 
@@ -66,31 +72,8 @@ class PlotlySection extends Section {
       }
     });
   }
-
-  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>
-    );
-  }
 }
 
 PlotlySection.plotly_editor_traits = {no_visibility_forcing: true};
-
-PlotlySection.propTypes = {
-  children: PropTypes.node,
-  name: PropTypes.string,
-  attr: PropTypes.string,
-};
-
 PlotlySection.contextTypes = containerConnectedContextTypes;
 export default localize(PlotlySection);