feat(Modal): add update to method modal

src/components/Modal/__demo__/method.jsx

@@ -1,12 +1,35 @@
 import React from 'react';
-import Modal from 'components/Modal';
-import Button from 'components/Button';
+
+import Modal from 'src/components/Modal';
+import Button from 'src/components/Button';
 
 // demo start
 class Demo extends React.Component {
+    open() {
+        this.modal = Modal.open(
+            {
+                title: '测试',
+                onClose: () => console.log('close'),
+                onOk: () => console.log('ok')
+            },
+            <div style={{ height: '300px' }}>
+                <Button onClick={() => this.update()}>测试</Button>
+            </div>
+        );
+    }
+    update() {
+        if (!this.modal) return;
+        this.modal.update({
+            title: `测试 - ${Math.random()}`,
+            size: ['sm', 'md', 'lg'][(Math.random() * 3) | 0]
+        });
+    }
     render() {
         return (
             <div>
+                <div className="demo-wrap">
+                    <Button onClick={() => this.open()}>open</Button>
+                </div>
                 <Button
                     onClick={() =>
                         Modal.alert(
@@ -104,7 +127,9 @@ class Demo extends React.Component {
                             <div>this is content</div>
                         )
                     }
-                ></Button>
+                >
+                    promise open
+                </Button>
             </div>
         );
     }

src/components/Modal/__tests__/__snapshots__/demo.test.js.snap

@@ -615,6 +615,16 @@ exports[`Modal demo -- method 1`] = `
 }
 
 <div>
+  <div
+    class="demo-wrap"
+  >
+    <button
+      class="uc-fe-button uc-fe-button-size-md uc-fe-button-styletype-border emotion-0 emotion-1"
+      type="button"
+    >
+      open
+    </button>
+  </div>
   <button
     class="uc-fe-button uc-fe-button-size-md uc-fe-button-styletype-border emotion-0 emotion-1"
     type="button"
@@ -642,7 +652,9 @@ exports[`Modal demo -- method 1`] = `
   <button
     class="uc-fe-button uc-fe-button-size-md uc-fe-button-styletype-border emotion-0 emotion-1"
     type="button"
-  />
+  >
+    promise open
+  </button>
 </div>
 `;
 

src/components/Modal/method.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PureComponent } from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import { ThemeProvider } from 'emotion-theming';
@@ -9,6 +9,27 @@ import { getRuntimeTheme } from 'src/components/ThemeProvider/runtime';
 
 import Modal from './Modal';
 
+class ModalWrap extends PureComponent {
+    static propTypes = {
+        reportUpdate: PropTypes.func
+    };
+    componentWillMount() {
+        this.props.reportUpdate(this.update);
+    }
+    update = props => {
+        this.setState({ ...props });
+    };
+    render() {
+        // eslint-disable-next-line no-unused-vars
+        const { reportUpdate, ...rest } = this.props;
+        return (
+            <ThemeProvider theme={getRuntimeTheme()}>
+                <Modal {...rest} visible {...this.state} />
+            </ThemeProvider>
+        );
+    }
+}
+
 const pop = props => {
     let container = document.createElement('div');
     document.body.appendChild(container);
@@ -19,19 +40,16 @@ const pop = props => {
         }
     };
 
-    ReactDOM.render(
-        <ThemeProvider theme={getRuntimeTheme()}>
-            <Modal {...props} visible />
-        </ThemeProvider>,
-        container
-    );
+    let update = null;
+    ReactDOM.render(<ModalWrap {...props} reportUpdate={_update => (update = _update)} />, container);
 
     return {
         destory: () => {
             console.error(`Warning: wrong name of destory, please use destroy to instead`);
             destroy();
         },
-        destroy
+        destroy,
+        update
     };
 };