change API for modifying framework

Instead of modifyPlotProps we have a more general supplyPlotProps. If
a supplyPlotProps is present it is run. Most implementations of
supplyPlotProps will run `unpackPlotProps` first and then alter
plotProps as necessary. However, this enables us to now alter `props`
and `context` _before_ running unpackPlotProps. This will allows us to
"fix" the problem of nested layout fields within a trace context. See
#58 (comment)
for background.

Author: bpostlethwaite

src/__tests__/nestedConnections-test.js

@@ -2,12 +2,13 @@ import MenuPanel from './MenuPanel';
 import React, {Component, cloneElement} from 'react';
 import PropTypes from 'prop-types';
 import unpackPlotProps from '../../lib/unpackPlotProps';
+import {containerConnectedContextTypes} from '../../lib/connectToContainer';
 
 function childIsVisible(child) {
   return Boolean((child.props.plotProps || {}).isVisible);
 }
 
-class Section extends Component {
+export default class Section extends Component {
   constructor(props, context) {
     super(props, context);
 
@@ -49,7 +50,11 @@ class Section extends Component {
       if (child.plotProps) {
         plotProps = child.plotProps;
       } else if (isAttr) {
-        plotProps = unpackPlotProps(child.props, context, child.type);
+        if (child.type.supplyPlotProps) {
+          plotProps = child.type.supplyPlotProps(child.props, context);
+        } else {
+          plotProps = unpackPlotProps(child.props, context);
+        }
       } else {
         plotProps = {isVisible: true};
       }
@@ -84,12 +89,4 @@ Section.propTypes = {
   name: PropTypes.string,
 };
 
-Section.contextTypes = {
-  container: PropTypes.object,
-  defaultContainer: PropTypes.object,
-  fullContainer: PropTypes.object,
-  getValObject: PropTypes.func,
-  updateContainer: PropTypes.func,
-};
-
-export default Section;
+Section.contextTypes = containerConnectedContextTypes;

src/components/containers/Section.js

@@ -1,29 +1,13 @@
 import Numeric from './Numeric';
-import React, {Component} from 'react';
-import {connectToContainer} from '../../lib';
+import {connectToContainer, unpackPlotProps} from '../../lib';
 
-class AxesRange extends Component {
-  static modifyPlotProps(props, context, plotProps) {
-    if (!plotProps.isVisible) {
-      return;
-    }
-    const {fullContainer} = plotProps;
-    if (fullContainer && fullContainer.autorange) {
-      plotProps.isVisible = false;
-    }
-  }
-
-  render() {
-    return <Numeric {...this.props} />;
+function supplyPlotProps(props, context) {
+  const plotProps = unpackPlotProps(props, context);
+  const {fullContainer} = plotProps;
+  if (plotProps.isVisible && fullContainer && fullContainer.autorange) {
+    plotProps.isVisible = false;
   }
+  return plotProps;
 }
 
-AxesRange.propTypes = {
-  ...Numeric.propTypes,
-};
-
-AxesRange.defaultProps = {
-  showArrows: false,
-};
-
-export default connectToContainer(AxesRange);
+export default connectToContainer(Numeric, {supplyPlotProps});

src/components/fields/AxesRange.js

@@ -1,25 +1,13 @@
 import Numeric from './Numeric';
-import React, {Component} from 'react';
-import {connectToContainer} from '../../lib';
+import {connectToContainer, unpackPlotProps} from '../../lib';
 
-class CanvasSize extends Component {
-  static modifyPlotProps(props, context, plotProps) {
-    if (!plotProps.isVisible) {
-      return;
-    }
-    const {fullContainer} = plotProps;
-    if (fullContainer && fullContainer.autosize) {
-      plotProps.isVisible = false;
-    }
-  }
-
-  render() {
-    return <Numeric {...this.props} />;
+function supplyPlotProps(props, context) {
+  const plotProps = unpackPlotProps(props, context);
+  const {fullContainer} = plotProps;
+  if (plotProps.isVisible && fullContainer && fullContainer.autosize) {
+    plotProps.isVisible = false;
   }
+  return plotProps;
 }
 
-CanvasSize.propTypes = {
-  ...Numeric.propTypes,
-};
-
-export default connectToContainer(CanvasSize);
+export default connectToContainer(Numeric, {supplyPlotProps});

src/components/fields/CanvasSize.js

@@ -3,19 +3,13 @@ import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import Field from './Field';
 import nestedProperty from 'plotly.js/src/lib/nested_property';
-import {connectToContainer} from '../../lib';
+import {connectToContainer, unpackPlotProps} from '../../lib';
 
 function attributeIsData(meta = {}) {
   return meta.valType === 'data_array' || meta.arrayOk;
 }
 
 class DataSelector extends Component {
-  static modifyPlotProps(props, context, plotProps) {
-    if (attributeIsData(plotProps.attrMeta)) {
-      plotProps.isVisible = true;
-    }
-  }
-
   constructor(props) {
     super(props);
 
@@ -72,4 +66,12 @@ DataSelector.propTypes = {
   ...Field.propTypes,
 };
 
-export default connectToContainer(DataSelector);
+function supplyPlotProps(props, context) {
+  const plotProps = unpackPlotProps(props, context);
+  if (attributeIsData(plotProps.attrMeta)) {
+    plotProps.isVisible = true;
+  }
+  return plotProps;
+}
+
+export default connectToContainer(DataSelector, {supplyPlotProps});

src/components/fields/DataSelector.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import {connectLayoutToPlot} from '../../../lib';
+import {Panel, Fold, Numeric} from '../../';
+import {TestEditor, fixtures} from '../../../lib/test-utils';
+import {mount} from 'enzyme';
+import CanvasSize from '../CanvasSize';
+
+describe('CanvasSize', () => {
+  const LayoutPanel = connectLayoutToPlot(Panel);
+
+  it('is hidden when autosize is true', () => {
+    const fixtureProps = fixtures.scatter({layout: {autosize: true}});
+    const wrapper = mount(
+      <TestEditor {...{...fixtureProps}}>
+        <LayoutPanel name="Layout">
+          <Fold name="Canvas">
+            <CanvasSize attr="width" />
+          </Fold>
+        </LayoutPanel>
+      </TestEditor>
+    ).find(Numeric);
+
+    expect(wrapper.length).toBe(0);
+  });
+
+  it('is visible when autosize is false', () => {
+    const fixtureProps = fixtures.scatter({layout: {autosize: false}});
+    const wrapper = mount(
+      <TestEditor {...{...fixtureProps}}>
+        <LayoutPanel name="Layout">
+          <Fold name="Canvas">
+            <CanvasSize attr="width" />
+          </Fold>
+        </LayoutPanel>
+      </TestEditor>
+    ).find(Numeric);
+
+    expect(wrapper.length).toBe(1);
+  });
+});

src/components/fields/__tests__/CanvasSize-test.js

@@ -1,10 +1,10 @@
-import {Numeric} from '../components/fields';
-import {Fold, Panel, Section} from '../components/containers';
-import NumericInput from '../components/widgets/NumericInputStatefulWrapper';
+import NumericInput from '../../components/widgets/NumericInputStatefulWrapper';
 import React from 'react';
-import {EDITOR_ACTIONS} from '../constants';
-import {TestEditor, fixtures, plotly} from '../lib/test-utils';
-import {connectLayoutToPlot} from '../lib';
+import connectLayoutToPlot from '../connectLayoutToPlot';
+import {EDITOR_ACTIONS} from '../../constants';
+import {Fold, Panel, Section} from '../../components/containers';
+import {Numeric} from '../../components/fields';
+import {TestEditor, fixtures, plotly} from '../test-utils';
 import {mount} from 'enzyme';
 
 const Layouts = [Panel, Fold, Section].map(connectLayoutToPlot);

src/__tests__/connectLayoutToPlot-test.js renamed to src/lib/__tests__/connectLayoutToPlot-test.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import {connectTraceToPlot, connectToContainer, unpackPlotProps} from '..';
+import {Numeric} from '../../components/fields';
+import {TestEditor, fixtures} from '../test-utils';
+import {mount} from 'enzyme';
+
+describe('connectToContainer', () => {
+  it('connectToContainer accepts supplyPlotProps function', () => {
+    const onUpdate = jest.fn();
+    const fixtureProps = fixtures.scatter({layout: {width: 10}});
+    const ConnectedNumeric = connectTraceToPlot(
+      connectToContainer(Numeric, {
+        supplyPlotProps: (props, context) => {
+          const plotProps = unpackPlotProps(props, context);
+          plotProps.connectToContainerModifiedPlotProp = true;
+          return plotProps;
+        },
+      })
+    );
+
+    const numeric = mount(
+      <TestEditor {...{...fixtureProps, onUpdate}}>
+        <ConnectedNumeric traceIndex={0} label="Opacity" attr="opacity" />
+      </TestEditor>
+    ).find(Numeric);
+
+    expect(numeric.prop('connectToContainerModifiedPlotProp')).toBe(true);
+  });
+});

src/lib/__tests__/connectToContainer-test.js

@@ -1,10 +1,10 @@
-import {Numeric} from '../components/fields';
-import {Fold, Panel, Section} from '../components/containers';
-import NumericInput from '../components/widgets/NumericInputStatefulWrapper';
+import NumericInput from '../../components/widgets/NumericInputStatefulWrapper';
 import React from 'react';
-import {EDITOR_ACTIONS} from '../constants';
-import {TestEditor, fixtures, plotly} from '../lib/test-utils';
-import {connectTraceToPlot} from '../lib';
+import connectTraceToPlot from '../connectTraceToPlot';
+import {EDITOR_ACTIONS} from '../../constants';
+import {Fold, Panel, Section} from '../../components/containers';
+import {Numeric} from '../../components/fields';
+import {TestEditor, fixtures, plotly} from '../test-utils';
 import {mount} from 'enzyme';
 
 const Traces = [Panel, Fold, Section].map(connectTraceToPlot);