Rebase

VeraZab · VeraZab · commit a45317947125 · 2018-03-28T15:41:38.000-04:00
diff --git a/README.md b/README.md
@@ -70,7 +70,7 @@ The [custom editor example](https://github.com/plotly/react-chart-editor/tree/ma
 * `<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)
+* `<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
diff --git a/src/components/containers/PlotlyFold.js b/src/components/containers/PlotlyFold.js
@@ -25,7 +25,7 @@ class PlotlyFold extends Component {
   determineVisibility(nextProps, nextContext) {
     this.foldVisible = false;
 
-    if (this.props.forceVisibility) {
+    if (nextProps.forceVisibility) {
       this.foldVisible = true;
       return;
     }
@@ -167,6 +167,24 @@ 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,
+};
diff --git a/src/components/containers/PlotlyPanel.js b/src/components/containers/PlotlyPanel.js
@@ -101,6 +101,7 @@ class PlotlyPanel extends Component {
             toggleFold: () => this.toggleFold(index),
           });
         }
+
         return child;
       }
     );
@@ -136,12 +137,6 @@ PlotlyPanel.defaultProps = {
   showExpandCollapse: true,
 };
 
-PlotlyPanel.contextTypes = {
-  layout: PropTypes.object,
-  onUpdate: PropTypes.func,
-  updateContainer: PropTypes.func,
-};
-
 export default PlotlyPanel;
 
 export class Panel extends PlotlyPanel {}
diff --git a/src/components/containers/PlotlySection.js b/src/components/containers/PlotlySection.js
@@ -10,9 +10,11 @@ export class Section extends Component {
   render() {
     return (
       <div className="section">
-        <div className="section__heading">
-          <div className="section__heading__text">{this.props.name}</div>
-        </div>
+        {this.props.name ? (
+          <div className="section__heading">
+            <div className="section__heading__text">{this.props.name}</div>
+          </div>
+        ) : null}
         {this.props.children}
       </div>
     );
diff --git a/src/components/containers/TransformAccordion.js b/src/components/containers/TransformAccordion.js
@@ -1,10 +1,10 @@
-import Fold from './Fold';
-import Panel from './Panel';
+import PlotlyFold from './PlotlyFold';
+import PlotlyPanel from './PlotlyPanel';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {connectTransformToTrace, localize} from 'lib';
 
-const TransformFold = connectTransformToTrace(Fold);
+const TransformFold = connectTransformToTrace(PlotlyFold);
 
 class TransformAccordion extends Component {
   render() {
@@ -50,7 +50,11 @@ class TransformAccordion extends Component {
       }),
     };
 
-    return <Panel addAction={addAction}>{content ? content : null}</Panel>;
+    return (
+      <PlotlyPanel addAction={addAction}>
+        {content ? content : null}
+      </PlotlyPanel>
+    );
   }
 }
 
diff --git a/src/components/containers/__tests__/ConnectedContainersVisibility-test.js b/src/components/containers/__tests__/ConnectedContainersVisibility-test.js
@@ -55,21 +55,6 @@ describe('Basic PlotlyPanel rules', () => {
     it('HIDES Field because it needs context from PlotlyPanel', () =>
       expect(wrapper.find('input').length).toEqual(0));
   });
-
-  // describe('no PlotlyPanel, no context for Folds, not usable', () => {
-  //   expect(() => {
-  //     mount(
-  //       <TestEditor {...fixtures.scatter()}>
-  //         <div>
-  //           <PlotlyFold>
-  //             <div id="thediv"> ok </div>
-  //             <Numeric attr="title" />
-  //           </PlotlyFold>
-  //         </div>
-  //       </TestEditor>
-  //     );
-  //   }).toThrow();
-  // });
 });
 
 describe('Basic PlotlySection rules', () => {
@@ -299,7 +284,8 @@ describe('Basic PlotlyFold rules', () => {
 
         it('HIDES PlotlyFold', () =>
           expect(wrapper.find('div.fold').length).toEqual(0));
-        it('HIDES Info', () => expect(wrapper.find(Info).length).toEqual(0));
+        it('HIDES Info', () =>
+          expect(wrapper.find('.js-test-info').length).toEqual(0));
         it('HIDES Field', () =>
           expect(wrapper.find('input').length).toEqual(0));
       });
diff --git a/src/components/containers/__tests__/UnconnectedContainersVisibility-test.js b/src/components/containers/__tests__/UnconnectedContainersVisibility-test.js
@@ -27,42 +27,47 @@ describe('Basic Panel rules', () => {
     const wrapper = mount(
       <TestEditor {...fixtures.scatter()}>
         <Panel>
+          <Section>
+            <div id="thediv"> ok </div>
+            <Numeric attr="title" />
+          </Section>
           <Fold>
-            <Section>
-              <div id="thediv"> ok </div>
-              <Numeric attr="title" />
-            </Section>
             <div id="theseconddiv" />
           </Fold>
+          <Fold>
+            <Info />
+          </Fold>
         </Panel>
       </TestEditor>
     );
 
-    it('SHOWS Section, Fold, #thediv, #theseconddiv', () => {
+    it('SHOWS Section, Fold, #thediv, #theseconddiv, Info', () => {
       expect(wrapper.find('div.section').length).toEqual(1);
-      expect(wrapper.find('div.fold').length).toEqual(1);
+      expect(wrapper.find('div.fold').length).toEqual(2);
       expect(wrapper.find('#thediv').length).toEqual(1);
       expect(wrapper.find('#theseconddiv').length).toEqual(1);
+      expect(wrapper.find('.js-test-info').length).toEqual(1);
     });
 
     it('HIDES Field because it needs context', () =>
       expect(wrapper.find('input').length).toEqual(0));
-  });
 
-  // describe('no Panel, no context for Folds, not usable', () => {
-  //   expect(() => {
-  //     mount(
-  //       <TestEditor {...fixtures.scatter()}>
-  //         <div>
-  //           <Fold>
-  //             <div id="thediv"> ok </div>
-  //             <Numeric attr="title" />
-  //           </Fold>
-  //         </div>
-  //       </TestEditor>
-  //     );
-  //   }).toThrow();
-  // });
+    it('PANEL shows collapse functionality, FOLD is foldable', () => {
+      expect(wrapper.find('.panel__header__collapse').length).toEqual(1);
+      expect(
+        wrapper
+          .find(Fold)
+          .first()
+          .props().folded
+      ).toBe(false);
+      expect(
+        typeof wrapper
+          .find(Fold)
+          .first()
+          .props().toggleFold
+      ).toBe('function');
+    });
+  });
 });
 
 describe('Basic Section rules', () => {
@@ -100,6 +105,22 @@ describe('Basic Section rules', () => {
       it('SHOWS Field', () => expect(wrapper.find('input').length).toEqual(1));
     });
 
+    describe('PlotlyPanel > Section > Field-with-invisible-attr', () => {
+      const wrapper = mount(
+        <TestEditor {...fixtures.scatter()}>
+          <LayoutPanel>
+            <Section>
+              <Numeric attr="not_an_attr" />
+            </Section>
+          </LayoutPanel>
+        </TestEditor>
+      );
+
+      it('SHOWS Section because it always shows itself', () =>
+        expect(wrapper.find('div.section').length).toEqual(1));
+      it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
+    });
+
     describe('Panel > Section > div', () => {
       const wrapper = mount(
         <TestEditor {...fixtures.scatter()}>
@@ -265,9 +286,9 @@ describe('Basic Fold rules', () => {
 
         it('SHOWS Fold', () =>
           expect(wrapper.find('div.fold').length).toEqual(1));
-        it('HIDES PlotlyPanel', () =>
+        it('SHOWS PlotlyPanel', () =>
           expect(wrapper.find('div.panel').length).toEqual(2));
-        it('HIDES Field', () =>
+        it('SHOWS Field', () =>
           expect(wrapper.find('input').length).toEqual(1));
       });
     });
@@ -278,19 +299,16 @@ describe('Basic Fold rules', () => {
           <TestEditor {...fixtures.scatter()}>
             <LayoutPanel>
               <Fold>
-                <Info>
-                  <Numeric attr="title" />
-                </Info>
+                <Info>ok</Info>
               </Fold>
             </LayoutPanel>
           </TestEditor>
         );
 
         it('SHOWS Fold', () =>
           expect(wrapper.find('div.fold').length).toEqual(1));
-        it('SHOWS Info', () => expect(wrapper.find(Info).length).toEqual(1));
-        it('SHOWS Field', () =>
-          expect(wrapper.find('input').length).toEqual(1));
+        it('SHOWS Info', () =>
+          expect(wrapper.find('.js-test-info').length).toEqual(1));
       });
     });
   });
diff --git a/src/components/fields/Info.js b/src/components/fields/Info.js
@@ -3,7 +3,11 @@ import React, {Component} from 'react';
 
 export default class Info extends Component {
   render() {
-    return <Field {...this.props}>{this.props.children}</Field>;
+    return (
+      <Field {...this.props}>
+        <div className="js-test-info">{this.props.children}</div>
+      </Field>
+    );
   }
 }
 
diff --git a/src/default_panels/GraphTransformsPanel.js b/src/default_panels/GraphTransformsPanel.js
@@ -6,11 +6,11 @@ import {
   TraceAccordion,
   DataSelector,
   Dropdown,
-  Section,
+  PlotlySection,
 } from '../components';
 import {connectAggregationToTransform, localize} from '../lib';
 
-const AggregationSection = connectAggregationToTransform(Section);
+const AggregationSection = connectAggregationToTransform(PlotlySection);
 
 class UnlocalizedAggregations extends Component {
   render() {
@@ -69,9 +69,9 @@ const GraphTransformsPanel = ({localize: _}) => {
 
         <DataSelector label={_('By')} attr="groups" />
 
-        <Section name={_('Aggregations')} attr="aggregations">
+        <PlotlySection name={_('Aggregations')} attr="aggregations">
           <Aggregations />
-        </Section>
+        </PlotlySection>
       </TransformAccordion>
     </TraceAccordion>
   );
diff --git a/src/default_panels/StyleTracesPanel.js b/src/default_panels/StyleTracesPanel.js
@@ -12,7 +12,6 @@ import {
   NumericFractionInverse,
   Radio,
   TextEditor,
-  Section,
   PlotlySection,
   LayoutSection,
   SymbolSelector,
diff --git a/src/lib/__tests__/nestedContainerConnections-test.js b/src/lib/__tests__/nestedContainerConnections-test.js
@@ -87,7 +87,7 @@ describe('Plot Connection', () => {
     expect(wrapper.length).toBe(0);
   });
 
-  it('can modify plotProps with <Trace><Section><LayoutComp>', () => {
+  it('can modify plotProps with <Trace><PlotlySection><LayoutComp>', () => {
     const fixtureProps = fixtures.scatter({layout: {width: 10}});
     const TracePanel = connectTraceToPlot(PlotlyPanel);
 

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,11 @@ import React, {Component} from 'react';`
`3`	`3`
`4`	`4`	`export default class Info extends Component {`
`5`	`5`	`render() {`
`6`		`- return <Field {...this.props}>{this.props.children}</Field>;`
	`6`	`+ return (`
	`7`	`+ <Field {...this.props}>`
	`8`	`+ <div className="js-test-info">{this.props.children}</div>`
	`9`	`+ </Field>`
	`10`	`+ );`
`7`	`11`	`}`
`8`	`12`	`}`
`9`	`13`