Merge pull request #56 from gaoli/refactor_editorId

refactor(Editor): Move editorId from GGEditor into Editor as id
alibaba · Sep 12, 2018 · 0485863 · 0485863
2 parents 4ce36c9 + 20720e6
commit 0485863
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 31 deletions.
diff --git a/src/components/Base/BaseComponent.js b/src/components/Base/BaseComponent.js
@@ -4,11 +4,10 @@ import PropTypes from 'prop-types';
 class BaseComponent extends React.Component {
   static contextTypes = {
     editor: PropTypes.object,
-    editorId: PropTypes.number,
     propsAPI: PropTypes.object,
     onBeforeAddPage: PropTypes.func,
     onAfterAddPage: PropTypes.func,
-  }
+  };
 
   render() {
     return null;

diff --git a/src/components/Base/Editor.js b/src/components/Base/Editor.js
@@ -1,11 +1,13 @@
 import G6Editor from '@antv/g6-editor';
 import { EVENT_BEFORE_ADD_PAGE } from '@common/constants';
 import track from '@helpers/track';
+import { createId } from '@utils';
 
 export default class Editor extends G6Editor {
   constructor(options) {
     super(options);
 
+    this.id = createId();
     this.on(EVENT_BEFORE_ADD_PAGE, ({ className }) => track({ c1: className }));
   }
 }
diff --git a/src/components/ContextMenu/index.js b/src/components/ContextMenu/index.js
@@ -9,9 +9,9 @@ class ContextMenu extends BaseComponent {
   contextMenu = null;
 
   get containerId() {
-    const { editorId } = this.context;
+    const { editor } = this.context;
 
-    return `${CONTEXT_MENU_CONTAINER}_${editorId}`;
+    return `${CONTEXT_MENU_CONTAINER}_${editor.id}`;
   }
 
   componentDidMount() {

diff --git a/src/components/Flow/index.js b/src/components/Flow/index.js
@@ -13,12 +13,12 @@ class Flow extends Page {
       nodes: [],
       edges: [],
     },
-  }
+  };
 
   get pageId() {
-    const { editorId } = this.context;
+    const { editor } = this.context;
 
-    return `${FLOW_CONTAINER}_${editorId}`;
+    return `${FLOW_CONTAINER}_${editor.id}`;
   }
 
   initPage() {

diff --git a/src/components/GGEditor/index.js b/src/components/GGEditor/index.js
@@ -1,28 +1,30 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Editor from '@components/Base/Editor';
-import { EDITOR_EVENTS, EDITOR_REACT_EVENTS, EVENT_BEFORE_ADD_PAGE, EVENT_AFTER_ADD_PAGE } from '@common/constants';
-import { pick, createId } from '@utils';
+import {
+  EDITOR_EVENTS,
+  EDITOR_REACT_EVENTS,
+  EVENT_BEFORE_ADD_PAGE,
+  EVENT_AFTER_ADD_PAGE,
+} from '@common/constants';
+import { pick } from '@utils';
 import PropsAPI from '@components/Adapter/propsAPI';
 import Global from '@common/Global';
 
 class GGEditor extends React.Component {
   static childContextTypes = {
     editor: PropTypes.object,
-    editorId: PropTypes.number,
     propsAPI: PropTypes.object,
     onBeforeAddPage: PropTypes.func,
     onAfterAddPage: PropTypes.func,
-  }
+  };
 
   static setTrackable(value) {
     Global.set('trackable', Boolean(value));
   }
 
   editor = null;
 
-  editorId = createId();
-
   get currentPage() {
     return this.editor.getCurrentPage();
   }
@@ -37,7 +39,6 @@ class GGEditor extends React.Component {
   getChildContext() {
     return {
       editor: this.editor,
-      editorId: this.editorId,
       propsAPI: this.propsAPI,
       onBeforeAddPage: this.handleBeforeAddPage,
       onAfterAddPage: this.handleAfterAddPage,
@@ -46,11 +47,11 @@ class GGEditor extends React.Component {
 
   addListener = (target, eventName, handler) => {
     if (typeof handler === 'function') target.on(eventName, handler);
-  }
+  };
 
   handleBeforeAddPage = (func) => {
     this.editor.on(EVENT_BEFORE_ADD_PAGE, func);
-  }
+  };
 
   handleAfterAddPage = (func) => {
     const { currentPage: page } = this;
@@ -61,7 +62,7 @@ class GGEditor extends React.Component {
     }
 
     this.editor.on(EVENT_AFTER_ADD_PAGE, func);
-  }
+  };
 
   init() {
     this.editor = new Editor();
@@ -81,11 +82,7 @@ class GGEditor extends React.Component {
   render() {
     const { children } = this.props;
 
-    return (
-      <div {...pick(this.props, ['style', 'className'])}>
-        {children}
-      </div>
-    );
+    return <div {...pick(this.props, ['style', 'className'])}>{children}</div>;
   }
 }
 

diff --git a/src/components/Mind/index.js b/src/components/Mind/index.js
@@ -9,9 +9,9 @@ import Page from '@components/Page';
 
 class Mind extends Page {
   get pageId() {
-    const { editorId } = this.context;
+    const { editor } = this.context;
 
-    return `${MIND_CONTAINER}_${editorId}`;
+    return `${MIND_CONTAINER}_${editor.id}`;
   }
 
   initPage() {

diff --git a/src/components/Minimap/index.js b/src/components/Minimap/index.js
@@ -6,9 +6,9 @@ import BaseComponent from '@components/Base/BaseComponent';
 
 class Minimap extends BaseComponent {
   get containerId() {
-    const { editorId } = this.context;
+    const { editor } = this.context;
 
-    return `${MINIMAP_CONTAINER}_${editorId}`;
+    return `${MINIMAP_CONTAINER}_${editor.id}`;
   }
 
   componentDidMount() {
@@ -39,9 +39,7 @@ class Minimap extends BaseComponent {
       return null;
     }
 
-    return (
-      <div id={this.containerId} {...pick(this.props, ['style', 'className'])} />
-    );
+    return <div id={this.containerId} {...pick(this.props, ['style', 'className'])} />;
   }
 }
 

diff --git a/src/components/Toolbar/index.js b/src/components/Toolbar/index.js
@@ -8,9 +8,9 @@ class Toolbar extends BaseComponent {
   toolbar = null;
 
   get containerId() {
-    const { editorId } = this.context;
+    const { editor } = this.context;
 
-    return `${TOOLBAR_CONTAINER}_${editorId}`;
+    return `${TOOLBAR_CONTAINER}_${editor.id}`;
   }
 
   componentDidMount() {