Review comments

Author: VeraZab

src/EditorControls.js

@@ -1,7 +1,7 @@
 import DefaultEditor from './DefaultEditor';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
-import {bem} from './lib';
+import {bem, localizeString} from './lib';
 import {
   shamefullyClearAxisTypes,
   shamefullyAdjustAxisRef,
@@ -34,6 +34,8 @@ class EditorControls extends Component {
       dataSourceValueRenderer: this.props.dataSourceValueRenderer,
       dataSourceOptionRenderer: this.props.dataSourceOptionRenderer,
       dictionaries: this.props.dictionaries || {},
+      localize: key =>
+        localizeString(this.props.dictionaries || {}, this.props.locale, key),
       frames: gd._transitionData ? gd._transitionData._frames : [],
       fullData: gd._fullData,
       fullLayout: gd._fullLayout,
@@ -313,6 +315,7 @@ EditorControls.childContextTypes = {
   graphDiv: PropTypes.any,
   layout: PropTypes.object,
   locale: PropTypes.string,
+  localize: PropTypes.func,
   onUpdate: PropTypes.func,
   plotly: PropTypes.object,
   plotSchema: PropTypes.object,

src/components/fields/AxisCreator.js

@@ -133,7 +133,7 @@ class AxisCreator extends Component {
       return null;
     }
 
-    const {localize: _} = this.props;
+    const {localize: _} = this.context;
     const {fullLayout} = this.context;
     const axisType = traceTypeToAxisType(this.props.container.type);
     const controls = [];
@@ -171,7 +171,6 @@ class AxisCreator extends Component {
 }
 
 AxisCreator.propTypes = {
-  localize: PropTypes.func,
   container: PropTypes.object,
   fullContainer: PropTypes.object,
 };
@@ -180,6 +179,7 @@ AxisCreator.contextTypes = {
   data: PropTypes.array,
   fullData: PropTypes.array,
   fullLayout: PropTypes.object,
+  localize: PropTypes.func,
 };
 
 export default connectToContainer(AxisCreator, {

src/components/fields/ErrorBars.js

@@ -68,7 +68,7 @@ class ErrorBars extends Component {
   }
 
   renderModeSelector() {
-    const {localize: _} = this.props;
+    const {localize: _} = this.context;
 
     return (
       <Field>
@@ -87,7 +87,7 @@ class ErrorBars extends Component {
   }
 
   renderErrorBarControls() {
-    const {localize: _} = this.props;
+    const {localize: _} = this.context;
     const mode = this.getMode();
     const showCustomDataControl = this.props.fullValue.type === 'data';
 
@@ -163,9 +163,12 @@ class ErrorBars extends Component {
 
 ErrorBars.propTypes = {
   attr: PropTypes.string,
-  localize: PropTypes.func,
   fullValue: PropTypes.object,
   updatePlot: PropTypes.func,
 };
 
+ErrorBars.contextTypes = {
+  localize: PropTypes.func,
+};
+
 export default connectToContainer(ErrorBars);

src/components/fields/derived.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import isNumeric from 'fast-isnumeric';
 import {UnconnectedDropdown} from './Dropdown';
 import {UnconnectedFlaglist} from './Flaglist';
@@ -13,7 +14,7 @@ import {
 
 export const AxisAnchorDropdown = connectToContainer(UnconnectedDropdown, {
   modifyPlotProps: (props, context, plotProps) => {
-    const {localize: _} = props;
+    const {localize: _} = context;
     let options = [];
 
     if (
@@ -94,7 +95,7 @@ export const RangesliderVisible = connectToContainer(UnconnectedRadio, {
 
 export const AxisSide = connectToContainer(UnconnectedRadio, {
   modifyPlotProps: (props, context, plotProps) => {
-    const _ = props.localize;
+    const _ = context.localize;
     if (
       context.fullContainer &&
       context.fullContainer._id &&
@@ -463,7 +464,7 @@ function computeAxesRefOptions(axes, propsAttr) {
 
 export const TextPosition = connectToContainer(UnconnectedDropdown, {
   modifyPlotProps: (props, context, plotProps) => {
-    const {localize: _} = props;
+    const {localize: _} = context;
     let options = [
       {label: _('Top Left'), value: 'top left'},
       {label: _('Top Center'), value: 'top center'},
@@ -490,7 +491,7 @@ export const TextPosition = connectToContainer(UnconnectedDropdown, {
 
 export const HoverInfo = connectToContainer(UnconnectedFlaglist, {
   modifyPlotProps: (props, context, plotProps) => {
-    const {localize: _} = props;
+    const {localize: _} = context;
     let options = [
       {label: _('X'), value: 'x'},
       {label: _('Y'), value: 'y'},
@@ -585,7 +586,7 @@ export const HoverInfo = connectToContainer(UnconnectedFlaglist, {
 
 export const FillDropdown = connectToContainer(UnconnectedDropdown, {
   modifyPlotProps: (props, context, plotProps) => {
-    const {localize: _} = props;
+    const {localize: _} = context;
 
     let options = [
       {label: _('None'), value: 'none'},

src/default_panels/GraphCreatePanel.js

@@ -85,19 +85,19 @@ const GraphCreatePanel = ({localize: _}) => {
       </TraceTypeSection>
 
       <PlotlySection name={_('Axes to Use')}>
-        <AxisCreator attr="fake_attr" localize={_} />
+        <AxisCreator attr="fake_attr" />
       </PlotlySection>
 
       <PlotlySection name={_('Error Bars X')}>
-        <ErrorBars localize={_} attr="error_x" />
+        <ErrorBars attr="error_x" />
       </PlotlySection>
 
       <PlotlySection name={_('Error Bars Y')}>
-        <ErrorBars localize={_} attr="error_y" />
+        <ErrorBars attr="error_y" />
       </PlotlySection>
 
       <PlotlySection name={_('Error Bars Z')}>
-        <ErrorBars localize={_} attr="error_z" />
+        <ErrorBars attr="error_z" />
       </PlotlySection>
 
       <PlotlySection name={_('Header Options')}>

src/default_panels/StyleAxesPanel.js

@@ -71,11 +71,7 @@ class StyleAxesPanel extends Component {
           }
         >
           <PlotlySection name={_('Boundaries')} attr="domain[0]">
-            <AxisOverlayDropdown
-              label={_('Overlay')}
-              attr="overlaying"
-              localize={_}
-            />
+            <AxisOverlayDropdown label={_('Overlay')} attr="overlaying" />
             <NumericFractionDomain
               label={_('Start Position')}
               attr="domain[0]"
@@ -87,12 +83,8 @@ class StyleAxesPanel extends Component {
             name={_('Anchor')}
             traceTypes={TRACE_TO_AXIS.cartesian}
           >
-            <AxisAnchorDropdown
-              label={_('Anchor To')}
-              attr="anchor"
-              localize={_}
-            />
-            <AxisSide label={_('Side')} attr="side" localize={_} />
+            <AxisAnchorDropdown label={_('Anchor To')} attr="anchor" />
+            <AxisSide label={_('Side')} attr="side" />
           </TraceTypeSection>
         </AxesFold>
 

src/default_panels/StyleTracesPanel.js

@@ -51,14 +51,7 @@ const StyleTracesPanel = ({localize: _}) => (
     />
     <NumericFraction label={_('Opacity')} attr="opacity" />
     <ColorPicker label={_('Color')} attr="color" />
-    <Numeric
-      showSlider
-      min={0}
-      max={1}
-      step={0.1}
-      attr="hole"
-      label={_('Hole')}
-    />
+    <Numeric showSlider step={0.1} attr="hole" label={_('Hole')} />
     <PlotlySection name={_('Text Attributes')}>
       <Flaglist
         attr="textinfo"
@@ -125,7 +118,7 @@ const StyleTracesPanel = ({localize: _}) => (
       />
     </PlotlySection>
     <PlotlySection name={_('Filled Area')}>
-      <FillDropdown attr="fill" label={_('Fill to')} localize={_} />
+      <FillDropdown attr="fill" label={_('Fill to')} />
       <ColorPicker label={_('Color')} attr="fillcolor" />
     </PlotlySection>
     <TraceMarkerSection>
@@ -220,11 +213,7 @@ const StyleTracesPanel = ({localize: _}) => (
       <FontSelector label={_('Typeface')} attr="textfont.family" />
       <Numeric label={_('Font Size')} attr="textfont.size" units="px" />
       <ColorPicker label={_('Font Color')} attr="textfont.color" />
-      <TextPosition
-        label={_('Text Position')}
-        attr="textposition"
-        localize={_}
-      />
+      <TextPosition label={_('Text Position')} attr="textposition" />
     </TraceTypeSection>
     <PlotlySection name={_('Colorscale')}>
       <ColorscalePicker label={_('Colorscale')} attr="colorscale" />
@@ -373,11 +362,7 @@ const StyleTracesPanel = ({localize: _}) => (
       />
     </PlotlySection>
     <PlotlySection name={_('On Hover')}>
-      <HoverInfo
-        attr="hoverinfo"
-        label={_('Values Shown On Hover')}
-        localize={_}
-      />
+      <HoverInfo attr="hoverinfo" label={_('Values Shown On Hover')} />
       <Radio
         label={_('Show Contour')}
         attr="contour.show"

src/lib/connectToContainer.js

@@ -4,6 +4,7 @@ import unpackPlotProps from './unpackPlotProps';
 import {getDisplayName} from '../lib';
 
 export const containerConnectedContextTypes = {
+  localize: PropTypes.func,
   container: PropTypes.object,
   data: PropTypes.array,
   defaultContainer: PropTypes.object,