Revert "Store extendedBlockRenderMap in state so it can be updated wh…

…en readOnly changes its value (#325)" This reverts commit 3cbacb3.
globocom · Oct 8, 2020 · e49789c · e49789c
1 parent 3e99ba7
commit e49789c
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 27 deletions.
diff --git a/src/components/MegadraftEditor.js b/src/components/MegadraftEditor.js
@@ -52,22 +52,18 @@ export default class MegadraftEditor extends Component {
     actions: DEFAULT_ACTIONS,
     blockRendererFn: () => {},
     i18n: i18nConfig,
-    language: "en-US",
-    readOnly: false
+    language: "en-US"
   };
 
   constructor(props) {
     super(props);
     this.state = {
-      readOnly: this.props.readOnly,
+      readOnly: this.props.readOnly || false,
       hasFocus: false,
       scrollRef: "",
       swapUp: false,
       swapDown: false,
-      didSwap: false,
-      extendedBlockRenderMap: this.createExtendedBlockRenderMap(
-        this.props.readOnly
-      )
+      didSwap: false
     };
 
     this.onChange = ::this.onChange;
@@ -97,22 +93,20 @@ export default class MegadraftEditor extends Component {
     this.keyBindings = this.props.keyBindings || [];
 
     this.onAction = this.props.onAction || defaultAction;
-  }
 
-  createExtendedBlockRenderMap(readOnly) {
-    return Immutable.OrderedMap().withMutations(r => {
+    this.extendedBlockRenderMap = Immutable.OrderedMap().withMutations(r => {
       for (let [blockType, data] of DefaultDraftBlockRenderMap.entrySeq()) {
         r.set(blockType, {
           ...data,
           wrapper:
-            !readOnly && this.props.movableBlocks ? (
+            !this.props.readOnly && this.props.movableBlocks ? (
               <MoveControl
                 wrapper={data.wrapper}
                 swapUp={this.swapUp}
                 swapDown={this.swapDown}
                 isFirstBlock={this.isFirstBlock}
                 isLastBlock={this.isLastBlock}
-                onAction={this.props.onAction || defaultAction}
+                onAction={this.onAction}
                 isAtomic={blockType === "atomic"}
               />
             ) : (
@@ -145,6 +139,12 @@ export default class MegadraftEditor extends Component {
     return pluginsByType;
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (this.props.readOnly !== nextProps.readOnly) {
+      this.setState({ readOnly: nextProps.readOnly });
+    }
+  }
+
   onChange(editorState) {
     this.props.onChange(editorState);
   }
@@ -390,15 +390,6 @@ export default class MegadraftEditor extends Component {
   }
 
   componentDidUpdate() {
-    if (this.props.readOnly !== this.state.readOnly) {
-      this.setState({
-        readOnly: this.props.readOnly,
-        extendedBlockRenderMap: this.createExtendedBlockRenderMap(
-          this.props.readOnly
-        )
-      });
-    }
-
     if (this.state.swapUp || this.state.swapDown) {
       const swapFunction = this.state.swapUp ? swapDataUp : swapDataDown;
 
@@ -577,7 +568,7 @@ export default class MegadraftEditor extends Component {
               handleReturn={this.props.handleReturn || this.handleReturn}
               keyBindingFn={this.externalKeyBindings}
               onChange={this.onChange}
-              blockRenderMap={this.state.extendedBlockRenderMap}
+              blockRenderMap={this.extendedBlockRenderMap}
             />
             {this.renderToolbar({
               i18n: i18n,

diff --git a/tests/components/MegadraftEditor_test.js b/tests/components/MegadraftEditor_test.js
@@ -491,14 +491,14 @@ describe("MegadraftEditor Component", () => {
   });
 
   it("starts with default readOnly status", () => {
-    const editor = testContext.wrapper;
-    expect(editor.instance().state.readOnly).toBeFalsy();
+    const items = testContext.wrapper.find(Editor);
+    expect(items.instance().props.readOnly).toBeFalsy();
   });
 
   it("changes readOnly status", () => {
-    const editor = testContext.wrapper;
-    editor.setProps({ readOnly: true });
-    expect(editor.instance().state.readOnly).toBeTruthy();
+    const items = testContext.wrapper.find(Editor);
+    testContext.component.setReadOnly(true);
+    expect(items.instance().props.readOnly).toBeTruthy();
   });
 
   it("is capable of inserting soft line breaks", () => {