import * as React from 'react';
import { css } from 'glamor';
import JSEditor from './asyncJSEditor';

const errorStyle = css({
    color: '#999',
    fontSize: '12px',
    fontStyle: 'italic',
    paddingTop: '3px',
});
// eslint-disable-next-line
export class ErrorCatch extends React.Component {
    static getDerivedStateFromProps(nextProps, state) {
        if (state.prevProps === nextProps) {
            return null;
        }
        if (state.code !== nextProps.code) {
            return {
                error: undefined,
                info: undefined,
                code: nextProps.code,
                prevProps: nextProps,
            };
        }
        return null;
    }
    constructor(props) {
        super(props);
        this.state = { error: undefined, info: undefined, prevProps: props };
        this.onErrorBlur = this.onErrorBlur.bind(this);
    }
    componentDidCatch(error, info) {
        this.setState(() => ({
            error,
            info,
        }));
    }
    onErrorBlur(target, editor) {
        this.props.onChange(editor.getValue());
    }
    render() {
        if (this.state.error && this.state.info) {
            return (
                <>
                    <JSEditor
                        value={this.props.code}
                        width="100%"
                        height="200px"
                        onBlur={this.onErrorBlur}
                    />
                    <div {...errorStyle}>{this.state.error.message}</div>
                </>
            );
        }
        return this.props.children;
    }
}

@@ -296,225 +296,78 @@
 t %7B%0A
+%0A
     
-static getDerivedStateFromProps(nextProps, state) %7B%0A        if (state.prevProps === nextProps) %7B%0A            return null;%0A        %7D%0A        if (state.code !== nextProps.code) %7B%0A            return %7B%0A               
+constructor(props) %7B%0A        super(props);%0A        this.state = %7B
  err
@@ -375,36 +375,36 @@
 r: undefined
-,%0A  
+ %7D;%0A
         
       info: 
@@ -395,68 +395,97 @@
     
-      info: undefined,%0A                code: nextProps.code,
+this.onErrorBlur = this.onErrorBlur.bind(this);%0A    %7D%0A    componentDidUpdate(prevProps) %7B
 %0A   
@@ -489,24 +489,20 @@
         
-        
+if (
 prevProp
@@ -506,196 +506,113 @@
 rops
-: nextProps,%0A            %7D;%0A        %7D%0A        return null;%0A    %7D%0A    constructor(props) %7B%0A        super(props);%0A        this.state = %7B error: undefined, info: undefined, prevProps: props
+.code !== this.props.code) %7B%0A            this.setState(%7B%0A                error: undefined,%0A           
  %7D
+)
 ;%0A  
@@ -621,178 +621,85 @@
     
-this.onErrorBlur = this.onErrorBlur.bind(this);%0A    %7D%0A    componentDidCatch(error, info) %7B%0A        this.setState(() =%3E (%7B%0A            error,%0A            info,%0A        %7D))
+%7D%0A    %7D%0A    static getDerivedStateFromError(error) %7B%0A        return %7B error %7D
 ;%0A  
@@ -837,27 +837,8 @@
 rror
- && this.state.info
 ) %7B%0A

Rewrite Script's error Catcher