Merge pull request #322 from plotly/AxesFold-refactor

Put AxesSelector into AxesFold by default

Author: VeraZab

src/components/containers/AxesFold.js

@@ -0,0 +1,24 @@
+import AxesSelector from '../fields/AxesSelector';
+import Fold from './Fold';
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+import {connectAxesToLayout} from 'lib';
+
+class AxesFold extends Component {
+  render() {
+    return this.props.children ? (
+      <Fold {...this.props}>
+        <AxesSelector />
+        {this.props.children}
+      </Fold>
+    ) : null;
+  }
+}
+
+AxesFold.propTypes = {
+  children: PropTypes.any,
+};
+
+AxesFold.plotly_editor_traits = {foldable: true};
+
+export default connectAxesToLayout(AxesFold);

src/components/containers/derived.js

@@ -1,19 +1,12 @@
 import React from 'react';
 import Panel from './Panel';
-import Fold from './Fold';
 import Section from './Section';
 import PropTypes from 'prop-types';
 
-import {
-  connectLayoutToPlot,
-  connectAxesToLayout,
-  containerConnectedContextTypes,
-} from 'lib';
+import {connectLayoutToPlot, containerConnectedContextTypes} from 'lib';
 
 const LayoutPanel = connectLayoutToPlot(Panel);
 
-const AxesFold = connectAxesToLayout(Fold);
-
 const TraceTypeSection = (props, context) => {
   const {fullContainer} = context;
   if (
@@ -39,4 +32,4 @@ TraceTypeSection.defaultProps = {
   traceTypes: [],
 };
 
-export {AxesFold, LayoutPanel, TraceTypeSection};
+export {LayoutPanel, TraceTypeSection};

src/components/containers/index.js

@@ -1,11 +1,12 @@
 import AnnotationAccordion from './AnnotationAccordion';
+import AxesFold from './AxesFold';
 import Fold from './Fold';
 import MenuPanel from './MenuPanel';
 import Panel from './Panel';
 import Section from './Section';
 import TraceAccordion from './TraceAccordion';
 import TraceMarkerSection from './TraceMarkerSection';
-import {AxesFold, LayoutPanel, TraceTypeSection} from './derived';
+import {LayoutPanel, TraceTypeSection} from './derived';
 import TraceRequiredPanel from './TraceRequiredPanel';
 import SingleSidebarItem from './SingleSidebarItem';
 

src/default_panels/StyleAxesPanel.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-  AxesSelector,
   AxesRange,
   ColorPicker,
   Dropdown,
@@ -21,15 +20,13 @@ import {localize} from '../lib';
 const StyleAxesPanel = ({localize: _}) => (
   <TraceRequiredPanel>
     <AxesFold name={_('Titles')}>
-      <AxesSelector />
       <TextEditor attr="title" />
       <FontSelector label={_('Typeface')} attr="titlefont.family" />
       <Numeric label={_('Font Size')} attr="titlefont.size" units="px" />
       <ColorPicker label={_('Font Color')} attr="titlefont.color" />
     </AxesFold>
 
     <AxesFold name={_('Range')}>
-      <AxesSelector />
       <Section name={_('Selection')} attr="autorange">
         <Radio
           attr="autorange"
@@ -51,8 +48,6 @@ const StyleAxesPanel = ({localize: _}) => (
     </AxesFold>
 
     <AxesFold name={_('Lines')}>
-      <AxesSelector />
-
       <Section name={_('Axis Line')} attr="showline">
         <Radio
           attr="showline"
@@ -119,7 +114,6 @@ const StyleAxesPanel = ({localize: _}) => (
     </AxesFold>
 
     <AxesFold name={_('Tick Labels')}>
-      <AxesSelector />
       <Section name={_('Tick Labels')} attr="showticklabels">
         <Radio
           attr="showticklabels"
@@ -223,7 +217,6 @@ const StyleAxesPanel = ({localize: _}) => (
       </Section>
     </AxesFold>
     <AxesFold name={_('Tick Markers')}>
-      <AxesSelector />
       <Section name={_('Tick Markers')} attr="ticks">
         <Radio
           attr="ticks"
@@ -276,7 +269,6 @@ const StyleAxesPanel = ({localize: _}) => (
     </Fold>
 
     <AxesFold name={_('Zoom Interactivity')}>
-      <AxesSelector />
       <Radio
         attr="fixedrange"
         options={[
@@ -286,8 +278,6 @@ const StyleAxesPanel = ({localize: _}) => (
       />
     </AxesFold>
     <AxesFold name={_('Layout')}>
-      <AxesSelector />
-
       <Section name={_('Axis Width')} attr="domain[0]">
         <Numeric
           label={_('Start Position')}
@@ -317,8 +307,6 @@ const StyleAxesPanel = ({localize: _}) => (
     </AxesFold>
 
     <AxesFold name={_('Hover Projections')}>
-      <AxesSelector />
-
       <Radio
         attr="showspikes"
         options={[