Merge pull request #226 from plotly/no-foldIndex

Make panel component set the foldIndex prop on its direct Fold children

Author: VeraZab

package-lock.json

@@ -167,7 +167,7 @@ class DefaultEditor extends Component {
           </TraceAccordion>
         </Panel>
         <LayoutPanel group="Style" name={_('Layout')}>
-          <Fold name={_('Canvas')} foldIndex={0} key={0}>
+          <Fold name={_('Canvas')}>
             <Radio
               attr="autosize"
               options={[
@@ -180,7 +180,7 @@ class DefaultEditor extends Component {
             <ColorPicker label={_('Plot Background')} attr="plot_bgcolor" />
             <ColorPicker label={_('Margin Color')} attr="paper_bgcolor" />
           </Fold>
-          <Fold name={_('Title and Fonts')} foldIndex={1} key={1}>
+          <Fold name={_('Title and Fonts')}>
             <Section name={_('Title')}>
               <MultiFormatTextEditor attr="title" />
               <FontSelector
@@ -205,7 +205,7 @@ class DefaultEditor extends Component {
               <ColorPicker label={_('Font Color')} attr="font.color" />
             </Section>
           </Fold>
-          <Fold name={_('Margins and Padding')} foldIndex={2} key={2}>
+          <Fold name={_('Margins and Padding')}>
             <Numeric label={_('Top')} attr="margin.t" units="px" />
             <Numeric label={_('Bottom')} attr="margin.b" units="px" />
             <Numeric label={_('Left')} attr="margin.l" units="px" />
@@ -293,15 +293,15 @@ class DefaultEditor extends Component {
           </AnnotationAccordion>
         </LayoutPanel>
         <LayoutPanel group="Style" name={_('Axes')}>
-          <AxesFold name={_('Titles')} foldIndex={0} key={0}>
+          <AxesFold name={_('Titles')}>
             <AxesSelector />
             <MultiFormatTextEditor 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')} foldIndex={1} key={1}>
+          <AxesFold name={_('Range')}>
             <AxesSelector />
             <Section name={_('Selection')}>
               <Radio
@@ -323,29 +323,29 @@ class DefaultEditor extends Component {
             </Section>
           </AxesFold>
 
-          <AxesFold name={_('Lines')} foldIndex={2} key={2}>
+          <AxesFold name={_('Lines')}>
             <AxesSelector />
           </AxesFold>
-          <AxesFold name={_('Tick Labels')} foldIndex={3} key={3}>
+          <AxesFold name={_('Tick Labels')}>
             <AxesSelector />
             <Section name={_('Tick Labels')}>
               <FontSelector label={_('Typeface')} attr="tickfont.family" />
               <Numeric label={_('Font Size')} attr="tickfont.size" units="px" />
               <ColorPicker label={_('Font Color')} attr="tickfont.color" />
             </Section>
           </AxesFold>
-          <AxesFold name={_('Tick Markers')} foldIndex={4} key={4}>
+          <AxesFold name={_('Tick Markers')}>
             <AxesSelector />
           </AxesFold>
-          <AxesFold name={_('Zoom Interactivity')} foldIndex={5} key={5}>
+          <AxesFold name={_('Zoom Interactivity')}>
             <AxesSelector />
           </AxesFold>
-          <AxesFold name={_('Layout')} foldIndex={6} key={6}>
+          <AxesFold name={_('Layout')}>
             <AxesSelector />
           </AxesFold>
         </LayoutPanel>
         <LayoutPanel group="Style" name={_('Legend')}>
-          <Fold hideHeader foldIndex={0} key={0}>
+          <Fold hideHeader>
             <Section name={_('Legend')}>
               <Radio
                 attr="showlegend"

src/DefaultEditor.js

@@ -1,6 +1,6 @@
 import PanelHeader from './PanelHeader';
 import PropTypes from 'prop-types';
-import React, {Component} from 'react';
+import React, {Component, cloneElement} from 'react';
 import update from 'immutability-helper';
 import {bem} from 'lib';
 
@@ -63,14 +63,15 @@ export default class Panel extends Component {
   }
 
   render() {
-    const {visible, children} = this.props;
+    const {visible} = this.props;
     const {individualFoldStates, nbOfFolds} = this.state;
     const hasOpen =
       individualFoldStates.length > 0 &&
       individualFoldStates.some(s => s === false);
     const {onUpdate, layout, updateContainer} = this.context;
 
     if (visible) {
+      let children = this.props.children;
       let action = null;
       let onAction = () => {};
 
@@ -86,6 +87,19 @@ export default class Panel extends Component {
           children.type.prototype.addAnnotation(layout, updateContainer);
       }
 
+      if (Array.isArray(children)) {
+        children = children.map((child, index) => {
+          if (child.type.displayName.indexOf('Fold') >= 0) {
+            return cloneElement(child, {
+              ...child.props,
+              foldIndex: index,
+              key: index,
+            });
+          }
+          return child;
+        });
+      }
+
       return (
         <div className={bem('panel')}>
           <PanelHeader

src/components/containers/Panel.js

@@ -21,15 +21,15 @@
     &__collapse {
       font-size: var(--font-size-medium);
       float: left;
-      color: var(--color-rhino-core);
+      color: var(--color-text-base);
       display: flex;
       align-items: center;
       height: 100%;
       cursor: pointer;
       svg {
         width: 16px !important;
         height: 16px !important;
-        fill: var(--color-rhino-core);
+        fill: var(--color-text-light);
         padding-right: 3px;
       }
     }