Merge pull request #445 from plotly/fixes

Fixes

Author: VeraZab

src/DefaultEditor.js

@@ -1,7 +1,6 @@
-import React, {Fragment} from 'react';
+import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {PanelMenuWrapper} from './components';
-import {localize} from './lib';
 import {
   GraphCreatePanel,
   StyleLayoutPanel,
@@ -16,28 +15,34 @@ import {
   StyleUpdateMenusPanel,
 } from './default_panels';
 
-const DefaultEditor = ({children, localize: _}) => (
-  <Fragment>
-    <PanelMenuWrapper>
-      <GraphCreatePanel group={_('Graph')} name={_('Create')} />
-      <StyleTracesPanel group={_('Style')} name={_('Traces')} />
-      <StyleLayoutPanel group={_('Style')} name={_('Layout')} />
-      <StyleNotesPanel group={_('Style')} name={_('Notes')} />
-      <StyleAxesPanel group={_('Style')} name={_('Axes')} />
-      <StyleLegendPanel group={_('Style')} name={_('Legend')} />
-      <StyleColorbarsPanel group={_('Style')} name={_('Color Bars')} />
-      <StyleShapesPanel group={_('Style')} name={_('Shapes')} />
-      <StyleImagesPanel group={_('Style')} name={_('Images')} />
-      <StyleSlidersPanel group={_('Style')} name={_('Sliders')} />
-      <StyleUpdateMenusPanel group={_('Style')} name={_('Menus')} />
-      {children ? children : null}
-    </PanelMenuWrapper>
-  </Fragment>
-);
+class DefaultEditor extends Component {
+  render() {
+    const _ = this.context.localize;
+    return (
+      <PanelMenuWrapper>
+        <GraphCreatePanel group={_('Graph')} name={_('Create')} />
+        <StyleTracesPanel group={_('Style')} name={_('Traces')} />
+        <StyleLayoutPanel group={_('Style')} name={_('Layout')} />
+        <StyleNotesPanel group={_('Style')} name={_('Notes')} />
+        <StyleAxesPanel group={_('Style')} name={_('Axes')} />
+        <StyleLegendPanel group={_('Style')} name={_('Legend')} />
+        <StyleColorbarsPanel group={_('Style')} name={_('Color Bars')} />
+        <StyleShapesPanel group={_('Style')} name={_('Shapes')} />
+        <StyleImagesPanel group={_('Style')} name={_('Images')} />
+        <StyleSlidersPanel group={_('Style')} name={_('Sliders')} />
+        <StyleUpdateMenusPanel group={_('Style')} name={_('Menus')} />
+        {this.props.children ? this.props.children : null}
+      </PanelMenuWrapper>
+    );
+  }
+}
 
 DefaultEditor.propTypes = {
-  localize: PropTypes.func,
   children: PropTypes.node,
 };
 
-export default localize(DefaultEditor);
+DefaultEditor.contextTypes = {
+  localize: PropTypes.func,
+};
+
+export default DefaultEditor;

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/containers/AnnotationAccordion.js

@@ -2,14 +2,14 @@ import PlotlyFold from './PlotlyFold';
 import TraceRequiredPanel from './TraceRequiredPanel';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
-import {connectAnnotationToLayout, localize} from 'lib';
+import {connectAnnotationToLayout} from 'lib';
 
 const AnnotationFold = connectAnnotationToLayout(PlotlyFold);
 
 class AnnotationAccordion extends Component {
   render() {
-    const {layout: {annotations = []}} = this.context;
-    const {canAdd, children, localize: _} = this.props;
+    const {layout: {annotations = []}, localize: _} = this.context;
+    const {canAdd, children} = this.props;
 
     const content =
       annotations.length &&
@@ -53,12 +53,12 @@ class AnnotationAccordion extends Component {
 
 AnnotationAccordion.contextTypes = {
   layout: PropTypes.object,
+  localize: PropTypes.func,
 };
 
 AnnotationAccordion.propTypes = {
   children: PropTypes.node,
   canAdd: PropTypes.bool,
-  localize: PropTypes.func,
 };
 
-export default localize(AnnotationAccordion);
+export default AnnotationAccordion;

src/components/containers/ImageAccordion.js

@@ -2,14 +2,14 @@ import PlotlyFold from './PlotlyFold';
 import TraceRequiredPanel from './TraceRequiredPanel';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
-import {connectImageToLayout, localize} from 'lib';
+import {connectImageToLayout} from 'lib';
 
 const ImageFold = connectImageToLayout(PlotlyFold);
 
 class ImageAccordion extends Component {
   render() {
-    const {layout: {images = []}} = this.context;
-    const {canAdd, children, localize: _} = this.props;
+    const {layout: {images = []}, localize: _} = this.context;
+    const {canAdd, children} = this.props;
 
     const content =
       images.length &&
@@ -54,12 +54,12 @@ class ImageAccordion extends Component {
 
 ImageAccordion.contextTypes = {
   layout: PropTypes.object,
+  localize: PropTypes.func,
 };
 
 ImageAccordion.propTypes = {
   children: PropTypes.node,
   canAdd: PropTypes.bool,
-  localize: PropTypes.func,
 };
 
-export default localize(ImageAccordion);
+export default ImageAccordion;

src/components/containers/PanelEmpty.js

@@ -29,7 +29,6 @@ class PanelEmpty extends Component {
 PanelEmpty.propTypes = {
   heading: PropTypes.string,
   message: PropTypes.any,
-  localize: PropTypes.func,
   children: PropTypes.node,
   icon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
 };

src/components/containers/PanelHeader.js

@@ -2,7 +2,6 @@ import Button from 'components/widgets/Button';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {PlusIcon, ResizeUpIcon, ResizeDownIcon} from 'plotly-icons';
-import {localize} from 'lib';
 import ModalBox from './ModalBox';
 
 class PanelHeader extends Component {
@@ -18,13 +17,13 @@ class PanelHeader extends Component {
   }
 
   render() {
+    const {localize: _} = this.context;
     const {
       children,
       addAction,
       allowCollapse,
       toggleFolds,
       hasOpen,
-      localize: _,
     } = this.props;
 
     const icon = <PlusIcon />;
@@ -91,15 +90,15 @@ PanelHeader.contextTypes = {
   fullContainer: PropTypes.object,
   onUpdate: PropTypes.func,
   updateContainer: PropTypes.func,
+  localize: PropTypes.func,
 };
 
 PanelHeader.propTypes = {
   addAction: PropTypes.object,
   allowCollapse: PropTypes.bool,
   children: PropTypes.node,
   hasOpen: PropTypes.bool,
-  localize: PropTypes.func,
   toggleFolds: PropTypes.func,
 };
 
-export default localize(PanelHeader);
+export default PanelHeader;

src/components/containers/PlotlyFold.js

@@ -3,14 +3,9 @@ import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import classnames from 'classnames';
 import {CloseIcon, AngleDownIcon} from 'plotly-icons';
-import {
-  unpackPlotProps,
-  localize,
-  containerConnectedContextTypes,
-  striptags,
-} from 'lib';
-
-class UnlocalizedFold extends Component {
+import {unpackPlotProps, containerConnectedContextTypes, striptags} from 'lib';
+
+export class Fold extends Component {
   constructor() {
     super();
     this.foldVisible = true;
@@ -103,9 +98,9 @@ class UnlocalizedFold extends Component {
   }
 }
 
-UnlocalizedFold.plotly_editor_traits = {foldable: true};
+Fold.plotly_editor_traits = {foldable: true};
 
-UnlocalizedFold.propTypes = {
+Fold.propTypes = {
   canDelete: PropTypes.bool,
   children: PropTypes.node,
   className: PropTypes.string,
@@ -114,13 +109,10 @@ UnlocalizedFold.propTypes = {
   hideHeader: PropTypes.bool,
   icon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   messageIfEmpty: PropTypes.string,
-  localize: PropTypes.func,
   name: PropTypes.string,
 };
 
-export const Fold = localize(UnlocalizedFold);
-
-class PlotlyFold extends UnlocalizedFold {
+class PlotlyFold extends Fold {
   constructor(props, context) {
     super(props, context);
 
@@ -171,4 +163,4 @@ PlotlyFold.contextTypes = Object.assign(
   containerConnectedContextTypes
 );
 
-export default localize(PlotlyFold);
+export default PlotlyFold;

src/components/containers/PlotlyPanel.js

@@ -3,12 +3,12 @@ import PanelEmpty from './PanelEmpty';
 import PropTypes from 'prop-types';
 import React, {Component, cloneElement} from 'react';
 import update from 'immutability-helper';
-import {bem, localize} from 'lib';
+import {bem} from 'lib';
 import {EmbedIconIcon} from 'plotly-icons';
 
 class PanelErrorImpl extends Component {
   render() {
-    const {localize: _} = this.props;
+    const {localize: _} = this.context;
 
     return (
       <PanelEmpty
@@ -20,13 +20,13 @@ class PanelErrorImpl extends Component {
   }
 }
 
-PanelErrorImpl.propTypes = {
+PanelErrorImpl.contextTypes = {
   localize: PropTypes.func,
 };
 
-const PanelError = localize(PanelErrorImpl);
+const PanelError = PanelErrorImpl;
 
-class UnlocalizedPanel extends Component {
+export class Panel extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -123,23 +123,25 @@ class UnlocalizedPanel extends Component {
   }
 }
 
-UnlocalizedPanel.propTypes = {
+Panel.propTypes = {
   children: PropTypes.node,
   addAction: PropTypes.object,
   showExpandCollapse: PropTypes.bool,
   noPadding: PropTypes.bool,
 };
 
-UnlocalizedPanel.defaultProps = {
+Panel.defaultProps = {
   showExpandCollapse: true,
 };
 
-export const Panel = localize(UnlocalizedPanel);
+Panel.contextTypes = {
+  localize: PropTypes.func,
+};
 
-class PlotlyPanel extends UnlocalizedPanel {}
+class PlotlyPanel extends Panel {}
 
 PlotlyPanel.plotly_editor_traits = {
   no_visibility_forcing: true,
 };
 
-export default localize(PlotlyPanel);
+export default PlotlyPanel;

src/components/containers/PlotlySection.js

@@ -1,12 +1,8 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {
-  containerConnectedContextTypes,
-  localize,
-  unpackPlotProps,
-} from '../../lib';
+import {containerConnectedContextTypes, unpackPlotProps} from '../../lib';
 
-class UnlocalizedSection extends Component {
+export class Section extends Component {
   constructor() {
     super();
     this.sectionVisible = true;
@@ -30,16 +26,14 @@ class UnlocalizedSection extends Component {
   }
 }
 
-UnlocalizedSection.plotly_editor_traits = {no_visibility_forcing: false};
-UnlocalizedSection.propTypes = {
+Section.plotly_editor_traits = {no_visibility_forcing: false};
+Section.propTypes = {
   children: PropTypes.node,
   name: PropTypes.string,
   attr: PropTypes.string,
 };
 
-export const Section = localize(UnlocalizedSection);
-
-class PlotlySection extends UnlocalizedSection {
+export default class PlotlySection extends Section {
   constructor(props, context) {
     super(props, context);
     this.determineVisibility(props, context);
@@ -78,4 +72,3 @@ class PlotlySection extends UnlocalizedSection {
 
 PlotlySection.plotly_editor_traits = {no_visibility_forcing: true};
 PlotlySection.contextTypes = containerConnectedContextTypes;
-export default localize(PlotlySection);

src/components/containers/RangeSelectorAccordion.js

@@ -2,7 +2,7 @@ import PlotlyFold from './PlotlyFold';
 import PlotlyPanel from './PlotlyPanel';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
-import {connectRangeSelectorToAxis, localize} from 'lib';
+import {connectRangeSelectorToAxis} from 'lib';
 
 const RangeSelectorFold = connectRangeSelectorToAxis(PlotlyFold);
 
@@ -18,8 +18,11 @@ class RangeSelectorAccordion extends Component {
       return null;
     }
 
-    const {fullContainer: {rangeselector: {buttons = []}}} = this.context;
-    const {children, localize: _} = this.props;
+    const {
+      fullContainer: {rangeselector: {buttons = []}},
+      localize: _,
+    } = this.context;
+    const {children} = this.props;
 
     const content =
       buttons.length &&
@@ -62,15 +65,15 @@ class RangeSelectorAccordion extends Component {
 
 RangeSelectorAccordion.contextTypes = {
   fullContainer: PropTypes.object,
+  localize: PropTypes.func,
 };
 
 RangeSelectorAccordion.propTypes = {
   children: PropTypes.node,
-  localize: PropTypes.func,
 };
 
 RangeSelectorAccordion.plotly_editor_traits = {
   no_visibility_forcing: true,
 };
 
-export default localize(RangeSelectorAccordion);
+export default RangeSelectorAccordion;