Store extendedBlockRenderMap in state so it can be updated when readO…

…nly changes its value (#325)
globocom · Sep 28, 2020 · 3cbacb3 · 3cbacb3
1 parent 2664665
commit 3cbacb3
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 18 deletions.
diff --git a/src/components/MegadraftEditor.js b/src/components/MegadraftEditor.js
@@ -52,18 +52,22 @@ export default class MegadraftEditor extends Component {
     actions: DEFAULT_ACTIONS,
     blockRendererFn: () => {},
     i18n: i18nConfig,
-    language: "en-US"
+    language: "en-US",
+    readOnly: false
   };
 
   constructor(props) {
     super(props);
     this.state = {
-      readOnly: this.props.readOnly || false,
+      readOnly: this.props.readOnly,
       hasFocus: false,
       scrollRef: "",
       swapUp: false,
       swapDown: false,
-      didSwap: false
+      didSwap: false,
+      extendedBlockRenderMap: this.createExtendedBlockRenderMap(
+        this.props.readOnly
+      )
     };
 
     this.onChange = ::this.onChange;
@@ -93,20 +97,22 @@ export default class MegadraftEditor extends Component {
     this.keyBindings = this.props.keyBindings || [];
 
     this.onAction = this.props.onAction || defaultAction;
+  }
 
-    this.extendedBlockRenderMap = Immutable.OrderedMap().withMutations(r => {
+  createExtendedBlockRenderMap(readOnly) {
+    return Immutable.OrderedMap().withMutations(r => {
       for (let [blockType, data] of DefaultDraftBlockRenderMap.entrySeq()) {
         r.set(blockType, {
           ...data,
           wrapper:
-            !this.props.readOnly && this.props.movableBlocks ? (
+            !readOnly && this.props.movableBlocks ? (
               <MoveControl
                 wrapper={data.wrapper}
                 swapUp={this.swapUp}
                 swapDown={this.swapDown}
                 isFirstBlock={this.isFirstBlock}
                 isLastBlock={this.isLastBlock}
-                onAction={this.onAction}
+                onAction={this.props.onAction || defaultAction}
                 isAtomic={blockType === "atomic"}
               />
             ) : (
@@ -139,12 +145,6 @@ 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,6 +390,15 @@ 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;
 
@@ -568,7 +577,7 @@ export default class MegadraftEditor extends Component {
               handleReturn={this.props.handleReturn || this.handleReturn}
               keyBindingFn={this.externalKeyBindings}
               onChange={this.onChange}
-              blockRenderMap={this.extendedBlockRenderMap}
+              blockRenderMap={this.state.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 items = testContext.wrapper.find(Editor);
-    expect(items.instance().props.readOnly).toBeFalsy();
+    const editor = testContext.wrapper;
+    expect(editor.instance().state.readOnly).toBeFalsy();
   });
 
   it("changes readOnly status", () => {
-    const items = testContext.wrapper.find(Editor);
-    testContext.component.setReadOnly(true);
-    expect(items.instance().props.readOnly).toBeTruthy();
+    const editor = testContext.wrapper;
+    editor.setProps({ readOnly: true });
+    expect(editor.instance().state.readOnly).toBeTruthy();
   });
 
   it("is capable of inserting soft line breaks", () => {