Fork master

circle.yml → .circleci/config.yml

@@ -15,6 +15,8 @@ jobs:
             - v1-dependencies-
 
       - run: npm install
+      - run: npm install --save-dev @percy/react
+      - run: npm rebuild node-sass
 
       - save_cache:
           paths:

.gitignore

@@ -7,6 +7,7 @@ npm-debug.log*
 !.storybook
 !.gitignore
 !.gitattributes
+!.circleci
 !.npmignore
 !.eslintrc
 !.eslintignore

dev/App.js

@@ -183,27 +183,9 @@ class App extends Component {
           // makeDefaultTrace={() => ({type: 'scattergl', mode: 'markers'})}
           // fontOptions={[{label:'Arial', value: 'arial'}]}
           // chartHelp={chartHelp}
+          // menuPanelOrder={menuPanelOrder}
         >
-          <DefaultEditor
-          // menuPanelOrder={[
-          //   {group: 'Dev', name: 'JSON'},
-          //   {group: 'Dev', name: 'Inspector'},
-          //   {group: 'Structure', name: 'Create'},
-          //   {group: 'Structure', name: 'Subplots'},
-          //   {group: 'Structure', name: 'Transforms'},
-          //   {group: 'Test', name: 'Testing'},
-          //   {group: 'Style', name: 'General'},
-          //   {group: 'Style', name: 'Traces'},
-          //   {group: 'Style', name: 'Axes'},
-          //   {group: 'Style', name: 'Legend'},
-          //   {group: 'Style', name: 'Color Bars'},
-          //   {group: 'Style', name: 'Annotation'},
-          //   {group: 'Style', name: 'Shapes'},
-          //   {group: 'Style', name: 'Images'},
-          //   {group: 'Style', name: 'Sliders'},
-          //   {group: 'Style', name: 'Menus'},
-          // ]}
-          >
+          <DefaultEditor>
             <Panel group="Dev" name="JSON">
               <div className="mocks">
                 <Select

package.json

@@ -1,10 +1,10 @@
 {
-  "name": "react-chart-editor",
-  "description": "plotly.js chart editor react component UI",
-  "version": "0.38.1",
-  "author": "Plotly, Inc.",
+  "name": "rcen",
+  "description": "fork from plotly.js chart editor react component UI by oprstchn",
+  "version": "0.38.2",
+  "author": "oprstchn",
   "bugs": {
-    "url": "https://github.com/plotly/react-chart-editor/issues"
+    "url": "https://github.com/oprstchn/react-chart-editor/issues"
   },
   "dependencies": {
     "@plotly/draft-js-export-html": "1.2.0",
@@ -15,7 +15,7 @@
     "fast-isnumeric": "^1.1.2",
     "immutability-helper": "^3.0.0",
     "plotly-icons": "1.3.12",
-    "plotly.js": "1.48.3",
+    "plotly.js": "1.49.0",
     "prop-types": "^15.7.2",
     "raf": "^3.4.1",
     "react-color": "^2.17.0",
@@ -82,10 +82,10 @@
     "webpack-dev-server": "3.5.1"
   },
   "peerDependencies": {
-    "react": ">15",
-    "react-dom": ">15"
+    "react": ">=16.3.0",
+    "react-dom": ">=16.3.0"
   },
-  "homepage": "https://plotly.github.io/react-chart-editor/",
+  "homepage": "https://oprstchn.github.io/react-chart-editor/",
   "jest": {
     "roots": [
       "<rootDir>/src/"
@@ -109,7 +109,7 @@
   "main": "lib/index.js",
   "repository": {
     "type": "git",
-    "url": "https://github.com/plotly/react-chart-editor.git"
+    "url": "https://github.com/oprstchn/react-chart-editor.git"
   },
   "scripts": {
     "lint": "prettier --write \"src/**/*.js\"",

src/DefaultEditor.js

@@ -19,11 +19,12 @@ import {
 } from './default_panels';
 import {traceHasColorbar} from './default_panels/StyleColorbarsPanel';
 import Logo from './components/widgets/Logo';
+import {EditorControlsContext} from './context';
 import {TRANSFORMABLE_TRACES, TRACE_TO_AXIS} from './lib/constants';
 
 class DefaultEditor extends Component {
-  constructor(props, context) {
-    super(props, context);
+  constructor(props) {
+    super(props);
     this.hasTransforms = this.hasTransforms.bind(this);
     this.hasAxes = this.hasAxes.bind(this);
     this.hasMenus = this.hasMenus.bind(this);
@@ -47,18 +48,13 @@ class DefaultEditor extends Component {
   }
 
   hasMenus() {
-    const {
-      fullLayout: {updatemenus = []},
-    } = this.context;
+    const {updatemenus = []} = this.context.fullLayout;
 
     return updatemenus.length > 0;
   }
 
   hasSliders() {
-    const {
-      layout: {sliders = []},
-    } = this.context;
-
+    const {sliders = []} = this.context.layout;
     return sliders.length > 0;
   }
 
@@ -77,9 +73,8 @@ class DefaultEditor extends Component {
   }
 
   render() {
-    const _ = this.context.localize;
     const logo = this.props.logoSrc && <Logo src={this.props.logoSrc} />;
-
+    const _ = this.context.localize;
     return (
       <PanelMenuWrapper menuPanelOrder={this.props.menuPanelOrder}>
         {logo ? logo : null}
@@ -111,11 +106,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

@@ -19,6 +19,8 @@ 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';
+import {recursiveMap} from './lib/recursiveMap';
 
 class EditorControls extends Component {
   constructor(props, context) {
@@ -32,27 +34,35 @@ class EditorControls extends Component {
     }
   }
 
-  getChildContext() {
+  componentWillReceiveProps(nextProps) {
+    const {updatePayload} = nextProps;
+    if (updatePayload && updatePayload.length > 0) {
+      this.handleUpdateActions(updatePayload);
+    }
+  }
+
+  provideValue() {
     const gd = this.props.graphDiv || {};
     return {
       advancedTraceTypeSelector: this.props.advancedTraceTypeSelector,
       config: gd._context,
       srcConverters: this.props.srcConverters,
       data: gd.data,
       dataSourceComponents: this.props.dataSourceComponents,
+      dataSourceStyles: this.props.dataSourceStyles,
       dataSourceOptions: this.props.dataSourceOptions,
       dataSources: this.props.dataSources,
       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,
+      localize: this.localize,
       onUpdate: this.handleUpdate.bind(this),
-      plotSchema: this.plotSchema,
       plotly: this.props.plotly,
+      plotSchema: this.plotSchema,
       traceTypesConfig: this.props.traceTypesConfig,
       showFieldTooltips: this.props.showFieldTooltips,
       glByDefault: this.props.glByDefault,
@@ -62,6 +72,14 @@ class EditorControls extends Component {
     };
   }
 
+  handleUpdateActions(updatePayload) {
+    if (updatePayload && updatePayload.length !== 0) {
+      updatePayload.forEach(actions => {
+        this.handleUpdate(actions);
+      });
+    }
+  }
+
   handleUpdate({type, payload}) {
     const {graphDiv} = this.props;
 
@@ -337,19 +355,25 @@ 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 ? (
+                recursiveMap(this.props.children, this.provideValue())
+              ) : (
+                <DefaultEditor />
+              ))}
+          </ModalProvider>
+        </div>
+      </EditorControlsContext.Provider>
     );
   }
 }
@@ -377,6 +401,7 @@ EditorControls.propTypes = {
     fromSrc: PropTypes.func.isRequired,
   }),
   dataSourceComponents: PropTypes.object,
+  dataSourceStyles: PropTypes.object,
   dataSourceOptions: PropTypes.array,
   dataSources: PropTypes.object,
   dictionaries: PropTypes.object,
@@ -391,6 +416,7 @@ EditorControls.propTypes = {
   mapBoxAccess: PropTypes.bool,
   fontOptions: PropTypes.array,
   chartHelp: PropTypes.object,
+  updatePayload: PropTypes.array,
 };
 
 EditorControls.defaultProps = {
@@ -404,34 +430,4 @@ EditorControls.defaultProps = {
   fontOptions: DEFAULT_FONTS,
 };
 
-EditorControls.childContextTypes = {
-  advancedTraceTypeSelector: PropTypes.bool,
-  config: PropTypes.object,
-  srcConverters: PropTypes.shape({
-    toSrc: PropTypes.func.isRequired,
-    fromSrc: PropTypes.func.isRequired,
-  }),
-  data: PropTypes.array,
-  dataSourceComponents: PropTypes.object,
-  dataSourceOptions: PropTypes.array,
-  dataSources: PropTypes.object,
-  dictionaries: PropTypes.object,
-  frames: PropTypes.array,
-  fullData: PropTypes.array,
-  fullLayout: PropTypes.object,
-  graphDiv: PropTypes.any,
-  layout: PropTypes.object,
-  locale: PropTypes.string,
-  localize: PropTypes.func,
-  onUpdate: PropTypes.func,
-  plotly: PropTypes.object,
-  plotSchema: PropTypes.object,
-  traceTypesConfig: PropTypes.object,
-  showFieldTooltips: PropTypes.bool,
-  glByDefault: PropTypes.bool,
-  mapBoxAccess: PropTypes.bool,
-  fontOptions: PropTypes.array,
-  chartHelp: PropTypes.object,
-};
-
 export default EditorControls;

src/PlotlyEditor.js

@@ -27,6 +27,7 @@ class PlotlyEditor extends Component {
             graphDiv={this.state.graphDiv}
             dataSources={this.props.dataSources}
             dataSourceOptions={this.props.dataSourceOptions}
+            dataSourceStyles={this.props.dataSourceStyles}
             plotly={this.props.plotly}
             onUpdate={this.props.onUpdate}
             advancedTraceTypeSelector={this.props.advancedTraceTypeSelector}
@@ -40,6 +41,8 @@ class PlotlyEditor extends Component {
             mapBoxAccess={Boolean(this.props.config && this.props.config.mapboxAccessToken)}
             fontOptions={this.props.fontOptions}
             chartHelp={this.props.chartHelp}
+            menuPanelOrder={this.props.menuPanelOrder}
+            updatePayload={this.props.updatePayload}
           >
             {this.props.children}
           </EditorControls>
@@ -69,6 +72,7 @@ PlotlyEditor.propTypes = {
   data: PropTypes.array,
   config: PropTypes.object,
   dataSourceOptions: PropTypes.array,
+  dataSourceStyles: PropTypes.object,
   dataSources: PropTypes.object,
   frames: PropTypes.array,
   onUpdate: PropTypes.func,
@@ -91,6 +95,8 @@ PlotlyEditor.propTypes = {
   glByDefault: PropTypes.bool,
   fontOptions: PropTypes.array,
   chartHelp: PropTypes.object,
+  menuPanelOrder: PropTypes.array,
+  updatePayload: PropTypes.array,
 };
 
 PlotlyEditor.defaultProps = {

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) {
@@ -24,7 +25,7 @@ class PanelsWithSidebar extends Component {
     this.setState({group, panel});
   }
 
-  getChildContext() {
+  provideValue() {
     return {
       setPanel: this.setPanel,
     };
@@ -85,16 +86,18 @@ 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>
     );
   }
 }
@@ -104,8 +107,4 @@ PanelsWithSidebar.propTypes = {
   menuPanelOrder: PropTypes.array,
 };
 
-PanelsWithSidebar.childContextTypes = {
-  setPanel: PropTypes.func,
-};
-
 export default PanelsWithSidebar;