Feature/remove context typees

package.json

@@ -55,20 +55,21 @@
     "fs": "^0.0.1-security",
     "gl": "^4.0.4",
     "glob": "^7.1.2",
-    "jest": "^23.5.0",
+    "jest": "^23.6.0",
     "jest-cli": "^23.5.0",
     "mkdirp": "^0.5.1",
     "node-sass": "^4.7.2",
     "postcss": "^6.0.23",
     "postcss-combine-duplicated-selectors": "^6.0.2",
     "postcss-custom-properties": "^6.3.1",
     "postcss-remove-root": "^0.0.2",
-    "prettier": "1.14.2",
-    "react": "^16.0.0",
+    "prettier": "^1.14.2",
+    "react": "^16.6.0",
     "react-ace": "^6.1.4",
-    "react-dom": "^16.0.0",
-    "react-hot-loader": "^4.0.0-beta.21",
+    "react-dom": "^16.6.0",
+    "react-hot-loader": "^4.3.12",
     "react-inspector": "^2.2.2",
+    "react-percy": "^0.3.0",
     "react-test-renderer": "^16.2.0",
     "rimraf": "2.6.2",
     "sass-loader": "^7.1.0",
@@ -77,8 +78,8 @@
     "webpack-dev-server": "^2.11.1"
   },
   "peerDependencies": {
-    "react": ">15",
-    "react-dom": ">15"
+    "react": ">16.6.0",
+    "react-dom": ">16.6.0"
   },
   "homepage": "https://plotly.github.io/react-chart-editor/",
   "jest": {

src/DefaultEditor.js

@@ -19,6 +19,7 @@ import {
 import {traceHasColorbar} from './default_panels/StyleColorbarsPanel';
 import Logo from './components/widgets/Logo';
 import {TRANSFORMABLE_TRACES} from './lib/constants';
+import {EditorControlsContext} from './context';
 
 class DefaultEditor extends Component {
   constructor(props, context) {
@@ -98,11 +99,6 @@ DefaultEditor.propTypes = {
   menuPanelOrder: PropTypes.array,
 };
 
-DefaultEditor.contextTypes = {
-  localize: PropTypes.func,
-  fullData: PropTypes.array,
-  fullLayout: PropTypes.object,
-  layout: PropTypes.object,
-};
+DefaultEditor.contextType = EditorControlsContext;
 
 export default DefaultEditor;

src/EditorControls.js

@@ -18,6 +18,7 @@ import nestedProperty from 'plotly.js/src/lib/nested_property';
 import {categoryLayout, traceTypes} from 'lib/traceTypes';
 import {ModalProvider} from 'components/containers';
 import {DEFAULT_FONTS} from 'lib/constants';
+import {EditorControlsContext} from './context';
 
 class EditorControls extends Component {
   constructor(props, context) {
@@ -62,6 +63,37 @@ class EditorControls extends Component {
     };
   }
 
+  provideValue() {
+    const gd = this.props.graphDiv || {};
+    return {
+      advancedTraceTypeSelector: this.props.advancedTraceTypeSelector,
+      config: gd._context,
+      srcConverters: this.props.srcConverters,
+      data: gd.data,
+      dataSources: this.props.dataSources,
+      dataSourceOptions: this.props.dataSourceOptions,
+      dataSourceValueRenderer: this.props.dataSourceValueRenderer,
+      dataSourceOptionRenderer: this.props.dataSourceOptionRenderer,
+      dictionaries: this.props.dictionaries || {},
+      localize: this.localize,
+      frames: gd._transitionData ? gd._transitionData._frames : [],
+      fullData: gd._fullData,
+      fullLayout: gd._fullLayout,
+      graphDiv: gd,
+      layout: gd.layout,
+      locale: this.props.locale,
+      onUpdate: this.handleUpdate.bind(this),
+      plotSchema: this.plotSchema,
+      plotly: this.props.plotly,
+      traceTypesConfig: this.props.traceTypesConfig,
+      showFieldTooltips: this.props.showFieldTooltips,
+      glByDefault: this.props.glByDefault,
+      mapBoxAccess: this.props.mapBoxAccess,
+      fontOptions: this.props.fontOptions,
+      chartHelp: this.props.chartHelp,
+    };
+  }
+
   handleUpdate({type, payload}) {
     const {graphDiv} = this.props;
 
@@ -295,19 +327,21 @@ class EditorControls extends Component {
 
   render() {
     return (
-      <div
-        className={
-          bem('editor_controls') +
-          ' plotly-editor--theme-provider' +
-          `${this.props.className ? ` ${this.props.className}` : ''}`
-        }
-      >
-        <ModalProvider>
-          {this.props.graphDiv &&
-            this.props.graphDiv._fullLayout &&
-            (this.props.children ? this.props.children : <DefaultEditor />)}
-        </ModalProvider>
-      </div>
+      <EditorControlsContext.Provider value={this.provideValue()}>
+        <div
+          className={
+            bem('editor_controls') +
+            ' plotly-editor--theme-provider' +
+            `${this.props.className ? ` ${this.props.className}` : ''}`
+          }
+        >
+          <ModalProvider>
+            {this.props.graphDiv &&
+              this.props.graphDiv._fullLayout &&
+              (this.props.children ? this.props.children : <DefaultEditor />)}
+          </ModalProvider>
+        </div>
+      </EditorControlsContext.Provider>
     );
   }
 }

src/components/PanelMenuWrapper.js

@@ -3,6 +3,7 @@ import React, {cloneElement, Component} from 'react';
 import SidebarGroup from './sidebar/SidebarGroup';
 import {bem} from 'lib';
 import sortMenu from 'lib/sortMenu';
+import {PanelMenuWrapperContext} from '../context';
 
 class PanelsWithSidebar extends Component {
   constructor(props) {
@@ -30,6 +31,12 @@ class PanelsWithSidebar extends Component {
     };
   }
 
+  provideValue() {
+    return {
+      setPanel: this.setPanel,
+    };
+  }
+
   renderSection(section, i) {
     if (section.type && (section.type.plotly_editor_traits || {}).sidebar_element) {
       return cloneElement(section, {key: i});
@@ -89,18 +96,20 @@ class PanelsWithSidebar extends Component {
     const menuOpts = this.computeMenuOptions(this.props);
 
     return (
-      <div className={bem('editor_controls', 'wrapper')}>
-        <div className={bem('sidebar')}>{menuOpts.map(this.renderSection)}</div>
-        {React.Children.map(
-          this.props.children,
-          (child, i) =>
-            child === null ||
-            this.state.group !== child.props.group ||
-            this.state.panel !== child.props.name
-              ? null
-              : cloneElement(child, {key: i})
-        )}
-      </div>
+      <PanelMenuWrapperContext.Provider value={this.provideValue()}>
+        <div className={bem('editor_controls', 'wrapper')}>
+          <div className={bem('sidebar')}>{menuOpts.map(this.renderSection)}</div>
+          {React.Children.map(
+            this.props.children,
+            (child, i) =>
+              child === null ||
+              this.state.group !== child.props.group ||
+              this.state.panel !== child.props.name
+                ? null
+                : cloneElement(child, {key: i})
+          )}
+        </div>
+      </PanelMenuWrapperContext.Provider>
     );
   }
 }

src/components/containers/AnnotationAccordion.js

@@ -4,6 +4,7 @@ import {PanelMessage} from './PanelEmpty';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {connectAnnotationToLayout} from 'lib';
+import {EditorControlsContext} from '../../context';
 
 const AnnotationFold = connectAnnotationToLayout(PlotlyFold);
 
@@ -61,10 +62,7 @@ class AnnotationAccordion extends Component {
   }
 }
 
-AnnotationAccordion.contextTypes = {
-  layout: PropTypes.object,
-  localize: PropTypes.func,
-};
+AnnotationAccordion.contextType = EditorControlsContext;
 
 AnnotationAccordion.propTypes = {
   children: PropTypes.node,

src/components/containers/ImageAccordion.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {connectImageToLayout} from 'lib';
 import {PanelMessage} from './PanelEmpty';
+import {EditorControlsContext} from '../../context';
 
 const ImageFold = connectImageToLayout(PlotlyFold);
 
@@ -66,10 +67,7 @@ class ImageAccordion extends Component {
   }
 }
 
-ImageAccordion.contextTypes = {
-  layout: PropTypes.object,
-  localize: PropTypes.func,
-};
+ImageAccordion.contextType = EditorControlsContext;
 
 ImageAccordion.propTypes = {
   children: PropTypes.node,

src/components/containers/Modal.js

@@ -1,6 +1,7 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {CloseIcon} from 'plotly-icons';
+import {ModalProviderContext} from '../../context';
 
 const ModalHeader = ({title, handleClose}) => (
   <div className="modal__header">
@@ -68,10 +69,7 @@ Modal.propTypes = {
   title: PropTypes.node,
 };
 
-Modal.contextTypes = {
-  handleClose: PropTypes.func,
-  isAnimatingOut: PropTypes.bool,
-};
+Modal.contextType = ModalProviderContext;
 
 export default Modal;
 

src/components/containers/ModalProvider.js

@@ -1,5 +1,6 @@
 import React, {Fragment} from 'react';
 import PropTypes from 'prop-types';
+import {ModalProviderContext} from '../../context';
 
 class ModalProvider extends React.Component {
   constructor(props) {
@@ -70,13 +71,26 @@ class ModalProvider extends React.Component {
     };
   }
 
+  provideValue() {
+    return {
+      openModal: (c, p) => this.openModal(c, p),
+      closeModal: () => this.closeModal(),
+      handleClose: () => this.handleClose(),
+      isAnimatingOut: this.state.isAnimatingOut,
+    };
+  }
+
   render() {
     const {component: Component, componentProps, isAnimatingOut} = this.state;
     return (
-      <Fragment>
-        {this.props.children}
-        {this.state.open ? <Component isAnimatingOut={isAnimatingOut} {...componentProps} /> : null}
-      </Fragment>
+      <ModalProviderContext.Provider value={this.provideValue()}>
+        <Fragment>
+          {this.props.children}
+          {this.state.open ? (
+            <Component isAnimatingOut={isAnimatingOut} {...componentProps} />
+          ) : null}
+        </Fragment>
+      </ModalProviderContext.Provider>
     );
   }
 }

src/components/containers/PlotlyFold.js

@@ -4,6 +4,7 @@ import React, {Component} from 'react';
 import classnames from 'classnames';
 import {CloseIcon, AngleDownIcon} from 'plotly-icons';
 import {unpackPlotProps, containerConnectedContextTypes, striptags} from 'lib';
+import {PlotlyFoldContext} from '../../context';
 
 export class Fold extends Component {
   constructor() {
@@ -17,9 +18,15 @@ export class Fold extends Component {
     };
   }
 
+  provideValue() {
+    return {
+      foldInfo: this.props.foldInfo ? this.props.foldInfo : null,
+    };
+  }
+
   render() {
     if (!this.foldVisible && !this.props.messageIfEmpty) {
-      return null;
+      return <PlotlyFoldContext.Provider value={this.getChildContext()} />;
     }
     const {deleteContainer} = this.context;
     const {
@@ -97,10 +104,12 @@ export class Fold extends Component {
     const classes = className ? ' ' + className : '';
 
     return (
-      <div className={`fold${classes}`}>
-        {foldHeader}
-        {foldContent}
-      </div>
+      <PlotlyFoldContext.Provider value={this.provideValue()}>
+        <div className={`fold${classes}`}>
+          {foldHeader}
+          {foldContent}
+        </div>
+      </PlotlyFoldContext.Provider>
     );
   }
 }

src/components/containers/PlotlyPanel.js

@@ -5,6 +5,7 @@ import React, {Component, cloneElement} from 'react';
 import update from 'immutability-helper';
 import {bem} from 'lib';
 import {EmbedIconIcon} from 'plotly-icons';
+import {PlotlyPanelContext} from '../../context';
 
 class PanelErrorImpl extends Component {
   render() {
@@ -41,6 +42,12 @@ export class Panel extends Component {
     };
   }
 
+  provideValue() {
+    return {
+      deleteContainer: this.props.deleteAction ? this.props.deleteAction : null,
+    };
+  }
+
   componentDidCatch() {
     this.setState({hasError: true});
   }
@@ -88,7 +95,11 @@ export class Panel extends Component {
     const {individualFoldStates, hasError} = this.state;
 
     if (hasError) {
-      return <PanelError />;
+      return (
+        <PlotlyPanelContext.Provider value={this.provideValue()}>
+          <PanelError />
+        </PlotlyPanelContext.Provider>
+      );
     }
 
     const newChildren = React.Children.map(this.props.children, (child, index) => {
@@ -103,15 +114,17 @@ export class Panel extends Component {
     });
 
     return (
-      <div className={`panel${this.props.noPadding ? ' panel--no-padding' : ''}`}>
-        <PanelHeader
-          addAction={this.props.addAction}
-          allowCollapse={this.props.showExpandCollapse && individualFoldStates.length > 1}
-          toggleFolds={this.toggleFolds}
-          hasOpen={individualFoldStates.some(s => s === false)}
-        />
-        <div className={bem('panel', 'content')}>{newChildren}</div>
-      </div>
+      <PlotlyPanelContext.Provider value={this.provideValue()}>
+        <div className={`panel${this.props.noPadding ? ' panel--no-padding' : ''}`}>
+          <PanelHeader
+            addAction={this.props.addAction}
+            allowCollapse={this.props.showExpandCollapse && individualFoldStates.length > 1}
+            toggleFolds={this.toggleFolds}
+            hasOpen={individualFoldStates.some(s => s === false)}
+          />
+          <div className={bem('panel', 'content')}>{newChildren}</div>
+        </div>
+      </PlotlyPanelContext.Provider>
     );
   }
 }