Add AxesRange component to handle special visibility

When autorange=true range components are not visible

Author: bpostlethwaite

src/DefaultEditor.js

@@ -2,6 +2,7 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {
   AxesSelector,
+  AxesRange,
   ColorPicker,
   DataSelector,
   Dropdown,
@@ -194,9 +195,29 @@ class DefaultEditor extends Component {
             <Numeric label={_('Size')} step={1} attr="font.size" postfix="px" />
             <ColorPicker label={_('Color')} attr="font.color" />
           </AxesFold>
+
           <AxesFold name={_('Range')}>
             <AxesSelector />
+            <Section name={_('Selection')}>
+              <Radio
+                attr="autorange"
+                options={[
+                  {label: _('Auto'), value: true},
+                  {label: _('Custom'), value: false},
+                ]}
+              />
+              <AxesRange label={_('Min')} attr="range[0]" />
+              <AxesRange label={_('Max')} attr="range[1]" />
+              <Radio
+                attr="type"
+                options={[
+                  {label: _('Linear'), value: 'linear'},
+                  {label: _('log'), value: 'log'},
+                ]}
+              />
+            </Section>
           </AxesFold>
+
           <AxesFold name={_('Lines')}>
             <AxesSelector />
           </AxesFold>

src/components/containers/Section.js

@@ -46,7 +46,7 @@ class Section extends Component {
 
       const isAttr = Boolean(child.props.attr);
       const plotProps = isAttr
-        ? unpackPlotProps(child.props, context, child.constructor)
+        ? unpackPlotProps(child.props, context, child.type)
         : {isVisible: true};
       const childProps = Object.assign({plotProps}, child.props);
       childProps.key = i;

src/components/fields/AxesRange.js

@@ -0,0 +1,29 @@
+import Numeric from './Numeric';
+import React, {Component} from 'react';
+import {connectToContainer} 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} />;
+  }
+}
+
+AxesRange.propTypes = {
+  ...Numeric.propTypes,
+};
+
+AxesRange.defaultProps = {
+  showArrows: false,
+};
+
+export default connectToContainer(AxesRange);

src/components/fields/Numeric.js

@@ -16,7 +16,7 @@ class Numeric extends Component {
           max={this.props.max}
           onChange={this.props.updatePlot}
           onUpdate={this.props.updatePlot}
-          showArrows
+          showArrows={this.props.showArrows}
         />
       </Field>
     );
@@ -28,9 +28,14 @@ Numeric.propTypes = {
   fullValue: PropTypes.func,
   min: PropTypes.number,
   max: PropTypes.number,
+  showArrows: PropTypes.number,
   step: PropTypes.number,
   updatePlot: PropTypes.func,
   ...Field.propTypes,
 };
 
+Numeric.defaultProps = {
+  showArrows: true,
+};
+
 export default connectToContainer(Numeric);

src/components/fields/index.js

@@ -1,3 +1,4 @@
+import AxesRange from './AxesRange';
 import AxesSelector from './AxesSelector';
 import ColorPicker from './Color';
 import Dropdown from './Dropdown';
@@ -9,6 +10,7 @@ import Numeric from './Numeric';
 import TraceSelector from './TraceSelector';
 
 export {
+  AxesRange,
   AxesSelector,
   ColorPicker,
   Dropdown,

src/components/index.js

@@ -1,4 +1,5 @@
 import {
+  AxesRange,
   AxesSelector,
   ColorPicker,
   Dropdown,
@@ -15,6 +16,7 @@ import PanelMenuWrapper from './PanelMenuWrapper';
 
 export {
   AxesSelector,
+  AxesRange,
   SubPanel,
   ColorPicker,
   DataSelector,

src/index.js

@@ -10,6 +10,7 @@ import {
 import {EDITOR_ACTIONS} from './constants';
 
 import {
+  AxesRange,
   AxesSelector,
   SubPanel,
   ColorPicker,
@@ -29,6 +30,7 @@ import {
 } from './components';
 
 export {
+  AxesRange,
   AxesSelector,
   SubPanel,
   ColorPicker,

src/lib/connectToContainer.js

@@ -5,6 +5,12 @@ import {getDisplayName} from '../lib';
 
 export default function connectToContainer(WrappedComponent) {
   class ContainerConnectedComponent extends Component {
+    static modifyPlotProps(props, context, plotProps) {
+      if (WrappedComponent.modifyPlotProps) {
+        WrappedComponent.modifyPlotProps(props, context, plotProps);
+      }
+    }
+
     constructor(props, context) {
       super(props, context);