feat(Modal): add close api. close #995 (#998)

components/modal/__tests__/__snapshots__/demo.test.web.js.snap

@@ -12,7 +12,7 @@ exports[`renders ./components/modal/demo/alert.md correctly 1`] = `
     role="button"
   >
     <span>
-      自定义按钮 
+       自定义按钮 
     </span>
   </a>
   <div

components/modal/alert.web.tsx

@@ -11,7 +11,9 @@ export default function (...args) {
 
   if (!title && !content) {
     // console.log('Must specify either an alert title, or message, or both');
-    return;
+    return {
+      close: () => {},
+    };
   }
 
   const prefixCls = 'am-modal';
@@ -53,4 +55,8 @@ export default function (...args) {
       <div style={{ zoom: 1, overflow: 'hidden' }}>{content}</div>
     </Modal>, div
   );
+
+  return {
+    close,
+  };
 }

components/modal/demo/alert.md

@@ -18,14 +18,21 @@ import { Modal, Button, WhiteSpace, WingBlank, Toast } from 'antd-mobile';
 
 const alert = Modal.alert;
 
+const showAlert = () => {
+  const alertInstance = alert('删除', '确定删除么???', [
+    { text: 'Cancel', onPress: () => console.log('cancel'), style: 'default' },
+    { text: 'OK', onPress: () => console.log('ok'), style: { fontWeight: 'bold' } },
+  ]);
+  setTimeout(() => {
+    // 可以调用close方法以在外部close
+    alertInstance.close();
+  }, 1000);
+};
+
 const App = () => (
   <WingBlank size="lg">
     <WhiteSpace size="lg" />
-    <Button onClick={() => alert('删除', '确定删除么???', [
-      { text: 'Cancel', onPress: () => console.log('cancel'), style: 'default' },
-      { text: 'OK', onPress: () => console.log('ok'), style: { fontWeight: 'bold' } },
-    ])}
-    >自定义按钮 </Button>
+    <Button onClick={showAlert}> 自定义按钮 </Button>
 
     <WhiteSpace size="lg" />
     <Button onClick={() => alert('删除', '确定删除么???', [

components/modal/index.en-US.md

@@ -14,7 +14,9 @@ Use to show important information for the system, and ask for user feedback. eg:
 
 ## API
 
-### Modal ( Support Platform：WEB、React-Native )
+ Support WEB, React-Native.
+
+### Modal
 
 | Property             | Description                    | Type     | Default        |
 |------------------|-----------------------|----------|---------------|
@@ -37,6 +39,8 @@ Use to show important information for the system, and ask for user feedback. eg:
 | message      | message                  | String or React.Element    | -    |
 | actions         | button group, [{text, onPress, style}]       | Array | -            |
 
+call `Modal.alert(title, message, actions?).close()`  can close Alert Modal outside anywhere as you wish.
+
 ### Modal.prompt(title, message, callbackOrActions, type?, defaultValue?) ( Support Platform：WEB )
 
 | Property             | Description                                         | Type     | Default        |
@@ -47,8 +51,12 @@ Use to show important information for the system, and ask for user feedback. eg:
 | type       | prompt style   | String (`default`, `secure-text`, `login-password`)|  `default`  |
 | defaultValue       | Default(input whick type is password is not supported)   | String |   -  |
 
+call Modal.prompt(title, message, callbackOrActions, type?, defaultValue?).close()` can close prompt Modal outside anywhere as you wish.
+
 ### Modal.operation(actions?) ( Support Platform：WEB、React-Native )
 
 | Property             | Description                                         | Type     | Default        |
 |------------------|----------------------------------------------|----------|---------------|
 | actions         | button group, [{text, onPress, style}]       | Array | -            |
+
+call Modal.operation(actions?).close()` can close Operation Modal outside anywhere as you wish.

components/modal/index.zh-CN.md

@@ -16,7 +16,9 @@ subtitle: 对话框
 
 ## API
 
-### Modal ( 适用平台：WEB、React-Native )
+适用平台：WEB、React-Native
+
+### Modal
 
 | 参数             | 说明                    | 类型     | 默认值        |
 |------------------|-----------------------|----------|---------------|
@@ -39,6 +41,8 @@ subtitle: 对话框
 | message      | 提示信息                  | String 或 React.Element    | 无    |
 | actions         | 按钮组, [{text, onPress, style}]       | Array | 无            |
 
+`Modal.alert(title, message, actions?).close()` 可以在外部关闭 Alert
+
 ### Modal.prompt(title, message, callbackOrActions, type?, defaultValue?) ( 适用平台：WEB )
 
 | 参数             | 说明                                         | 类型     | 默认值        |
@@ -49,8 +53,12 @@ subtitle: 对话框
 | type       | prompt 的样式   | String (`default`, `secure-text`, `login-password`)|  `default`  |
 | defaultValue       | 默认值(input 为 password 类型不支持)   | String |   -  |
 
+Modal.prompt(title, message, callbackOrActions, type?, defaultValue?).close()` 可以在外部关闭 prompt
+
 ### Modal.operation(actions?) ( 适用平台：WEB、React-Native )
 
 | 参数             | 说明                                         | 类型     | 默认值        |
 |------------------|----------------------------------------------|----------|---------------|
 | actions         | 按钮组, [{text, onPress, style}]       | Array | 无            |
+
+Modal.operation(actions?).close()` 可以在外部关闭 operation

components/modal/operation.web.tsx

@@ -46,4 +46,8 @@ export default function (...args) {
       className="am-modal-operation"
     /> , div
   );
+
+  return {
+    close,
+  };
 }

components/modal/prompt.web.tsx

@@ -144,4 +144,8 @@ export default function (...args) {
       <div style={{ zoom: 1, overflow: 'hidden' }}>{content}</div>
     </Modal>, div
   );
+
+  return {
+    close,
+  };
 }