chore: Handle UNSAFE components warning. #56

uiwjs · Aug 11, 2020 · a9f4679 · a9f4679
1 parent 7c33c85
commit a9f4679
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 34 deletions.
diff --git a/src/CodeMirror.js b/src/CodeMirror.js
@@ -34,16 +34,16 @@ export default class ReactCodeMirror extends Component {
       this.editor.setSize(width, height);
     }
   }
-  async UNSAFE_componentWillReceiveProps(nextProps) {
+  async componentDidUpdate(prevProps) {
     const val = this.editor.getValue();
-    const next = nextProps.value;
-    if (next !== undefined && next !== this.props.value && next !== val) {
-      this.editor.setValue(nextProps.value);
+    const value = this.props.value;
+    if (value !== undefined && value !== prevProps.value && value !== val) {
+      this.editor.setValue(value);
     }
-    const { options, width, height } = nextProps;
-    await this.setOptions(options);
+    const { width, height } = prevProps;
+    await this.setOptions(this.props.options);
     if (width !== this.props.width || height !== this.props.height) {
-      this.editor.setSize(width, height);
+      this.editor.setSize(this.props.width, this.props.height);
     }
   }
   // http://codemirror.net/doc/manual.html#config

diff --git a/src/index.js b/src/index.js
@@ -4,32 +4,17 @@ import CodeMirror from './CodeMirror';
 import './codemirror.css';
 import './index.css';
 
+const defaultOptions = {
+  tabSize: 2,
+  autoCloseBrackets: true,
+  matchBrackets: true,
+  showCursorWhenSelecting: true,
+  // 显示行号
+  lineNumbers: true,
+  fullScreen: true,
+}
+
 export default class ReactCodeMirror extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      codeMirrorOptions: {},
-    };
-  }
-  async componentDidMount() {
-    const { options } = this.props;
-    const codeMirrorOptions = {
-      tabSize: 2,
-      autoCloseBrackets: true,
-      matchBrackets: true,
-      showCursorWhenSelecting: true,
-      // 显示行号
-      lineNumbers: true,
-      fullScreen: true,
-      ...options,
-    };
-    this.setState({ codeMirrorOptions });
-  }
-  async UNSAFE_componentWillReceiveProps(nextPros) {
-    await this.setState({
-      codeMirrorOptions: { ...this.state.codeMirrorOptions, ...nextPros.options },
-    });
-  }
   getInstance = (instance) => {
     if (instance) {
       this.codemirror = instance.codemirror;
@@ -38,12 +23,11 @@ export default class ReactCodeMirror extends Component {
   }
   render() {
     const { options, ...otherProps } = this.props;
-    const { codeMirrorOptions } = this.state;
     return (
       <CodeMirror
         {...otherProps}
         ref={this.getInstance}
-        options={{ ...codeMirrorOptions }}
+        options={{ ...defaultOptions, ...options }}
       />
     );
   }