feat(Dialog): add type succss/error/warning/notice/help fix alibaba-f…

…usion#3488

docs/dialog/demo/basic.md

@@ -56,4 +56,4 @@ class Demo extends React.Component {
 }
 
 ReactDOM.render(<Demo />, mountNode);
-````
+````

docs/dialog/demo/promise.md

@@ -1,6 +1,6 @@
-# 延迟关闭
+# 确认对话框/延迟关闭
 
-- order: 6
+- order: 2
 
 在使用 `Dialog.alert`，`Dialog.confirm` 以及 `Dialog.show` 时，如果 `onOk` 返回 `Promise`，对话框会在 `Promise` resolve 时关闭，除非调用 `resolve(false)`。
 
@@ -15,66 +15,67 @@ When using `Dialog.alert`, `Dialog.confirm`, and `Dialog.show`, if `onOk` return
 ---
 
 ````jsx
+import { useState } from 'react';
 import { Button, Message, Dialog } from '@alifd/next';
 
-class Demo extends React.Component {
-    state = {
-        visible: false,
-        loading: false,
-    };
+const Demo = () => {
+    const [visible, setVisible] = useState(false);
+    const [loading, setLoading] = useState(false);
 
-    onOpen = () => {
-        this.setState({
-            visible: true
-        });
-    };
-
-    onOk = () => {
+    const handleOpen = () => setVisible(true);
+    const handleClose = () => setVisible(false);
+    const handleOk = () => {
         return new Promise(resolve => {
-            this.setState({
-                loading: true
-            });
+            setLoading(true);
             setTimeout(resolve, 2000);
         }).then(() => {
             Message.success('Deleted successfully!');
-            this.setState({
-                loading: false,
-                visible: false
-            });
+             setLoading(false);
+             setVisible(false);
         });
     };
 
-    onClose = () => {
-        this.setState({
-            visible: false
-        });
-    };
-
-    render() {
-        const okProps = {
-            loading: this.state.loading
-        };
-        return (
-            <div>
-                <Button onClick={this.onOpen} type="primary">
-                    Dialog Promise
-                </Button>
-                <Dialog
-                    v2
-                    title="Welcome to Alibaba.com"
-                    visible={this.state.visible}
-                    okProps={okProps}
-                    onOk={this.onOk}
-                    onCancel={this.onClose}
-                >
-                    Start your business here by searching a popular product
-                </Dialog>
-            </div>
-        );
-    }
+    return (<div style={{marginTop: 8}}>
+        <Button onClick={handleOpen} type="primary">
+            Dialog Promise
+        </Button>
+        <Dialog
+            v2
+            title="Welcome to Alibaba.com"
+            visible={visible}
+            okProps={{loading}}
+            onOk={handleOk}
+            onCancel={handleClose}
+        >
+            Start your business here by searching a popular product
+        </Dialog>
+    </div>);
 }
 
 const popupConfirm = () => {
+    Dialog.confirm({
+        v2: true,
+        title: 'Confirm',
+        content: 'confirm content confirm content...',
+        onOk: () => console.log('ok'),
+        onCancel: () => console.log('cancel')
+    });
+};
+
+const popupCustomIcon = () => {
+    Dialog.confirm({
+        v2: true,
+        title: 'Confirm',
+        content: 'set icon as "warning" ',
+        messageProps:{
+            type: 'warning'
+        },
+        onOk: () => console.log('ok'),
+        onCancel: () => console.log('cancel')
+    });
+};
+
+const popupConfirmPromise = () => {
     Dialog.confirm({
         v2: true,
         title: 'Confirm',
@@ -89,10 +90,17 @@ const popupConfirm = () => {
     });
 };
 
+const style = {marginLeft: 8};
+
 ReactDOM.render(<div>
+    <Button onClick={popupConfirm}>Confirm</Button>
+    <Button onClick={popupCustomIcon} style={style}>Custom Icon</Button>
+
+    <br/><br/>
+    <Button onClick={popupConfirmPromise}>Confirm Promise</Button>
+
     <Demo />
     <br/>
-    <Button type="primary" warning onClick={popupConfirm}>Quick Confirm Promise</Button>
 </div>
 , mountNode);
 ````

docs/dialog/demo/quick.md

@@ -17,59 +17,39 @@ The `Dialog` provides quick methods called `alert` and `confirm`, as well as a l
 ````jsx
 import { Button, Dialog, ConfigProvider, Box } from '@alifd/next';
 
-const popupAlert = () => {
-    Dialog.alert({
-        v2: true,
-        title: 'Alert',
-        content: 'alert content alert content...',
-        okProps: {children: 'Custom OK' },
-        onOk: () => console.log('ok')
-    });
-};
-
-const popupConfirm = () => {
-    Dialog.confirm({
-        v2: true,
-        title: 'Confirm',
-        content: 'confirm content confirm content...',
-        onOk: () => console.log('ok'),
-        onCancel: () => console.log('cancel')
-    });
+const config = {
+    v2: true,
+    title: 'Quick',
+    content: 'content content content...'
+}
+const popupError = () => {
+  const dialog = Dialog.error({
+    title: "Error",
+    content: "custom content custom content...",
+    footer: (
+      <Button warning type="primary" onClick={() => dialog.hide()}>
+        Custom button
+      </Button>
+    )
+  });
 };
 
 const popupShow = () => {
-    const dialog = Dialog.show({
-        v2: true,
-        title: 'Custom',
-        content: 'custom content custom content...',
-        footer: (
-            <Button warning type="primary" onClick={() => dialog.hide()}>
-                Custom button
-            </Button>
-        )
-    });
-};
-
-const popupCustomIcon = () => {
-    Dialog.confirm({
-        v2: true,
-        title: 'Confirm',
-        content: 'set icon as "warning" ',
-        messageProps:{
-            type: 'warning'
-        },
-        onOk: () => console.log('ok'),
-        onCancel: () => console.log('cancel')
-    });
+  const dialog = Dialog.show({
+    title: "Custom",
+    content: "custom content custom content..."
+  });
 };
 
 ReactDOM.render(
     <ConfigProvider locale={{ Dialog: { ok: 'OK', cancel: 'Cancel' } }}>
-        <Box direction="row" spacing={20}>
-            <Button onClick={popupAlert}>Alert</Button>
-            <Button onClick={popupConfirm}>Confirm</Button>
-            <Button onClick={popupShow}>Show</Button>
-            <Button onClick={popupCustomIcon}>Custom Icon</Button>
+        <Box direction="row" spacing={8}>
+            <Button onClick={() => Dialog.success(config)}>Success</Button>
+            <Button onClick={popupError}>Error</Button>
+            <Button onClick={() => Dialog.warning(config)}>Warning</Button>
+            <Button onClick={() => Dialog.notice(config)}>Notice</Button>
+            <Button onClick={() => Dialog.help(config)}>Help</Button>
+            <Button onClick={popupShow}>show</Button>
         </Box>
     </ConfigProvider>,
     mountNode

src/dialog/index.jsx

@@ -5,7 +5,7 @@ import Dialog1 from './dialog';
 import Dialog2 from './dialog-v2';
 
 import Inner from './inner';
-import { show, alert, confirm, withContext } from './show';
+import { show, alert, confirm, withContext, success, error, notice, warning, help } from './show';
 
 class Dialog extends React.Component {
     render() {
@@ -40,6 +40,12 @@ Dialog.confirm = config => {
     }
     return confirm(config);
 };
+Dialog.success = config => success(config);
+Dialog.error = config => error(config);
+Dialog.notice = config => notice(config);
+Dialog.warning = config => warning(config);
+Dialog.help = config => help(config);
+
 Dialog.withContext = withContext;
 
 /* istanbul ignore next */

src/dialog/show.jsx

@@ -13,8 +13,14 @@ const Dialog2 = ConfigProvider.config(dialog2);
 
 const noop = () => {};
 const MESSAGE_TYPE = {
-    alert: 'warning',
+    alert: 'warning', // deprecated in 2.x
     confirm: 'help',
+
+    success: 'success',
+    error: 'error',
+    warning: 'warning',
+    notice: 'notice',
+    help: 'help',
 };
 
 export const ModalInner = function({ type, messageProps = {}, title, rtl, prefix = 'next-', content }) {
@@ -38,7 +44,7 @@ class Modal extends Component {
         prefix: PropTypes.string,
         pure: PropTypes.bool,
         rtl: PropTypes.bool,
-        type: PropTypes.oneOf(['alert', 'confirm']),
+        type: PropTypes.oneOf(['alert', 'confirm', 'success', 'error', 'notice', 'warning', 'help']),
         title: PropTypes.node,
         content: PropTypes.node,
         messageProps: PropTypes.object,
@@ -154,7 +160,12 @@ class Modal extends Component {
             );
 
         const newFooterActions =
-            footerActions || (type === 'alert' ? ['ok'] : type === 'confirm' ? ['ok', 'cancel'] : undefined);
+            footerActions ||
+            (type === 'confirm'
+                ? ['ok', 'cancel']
+                : ['alert', 'success', 'error', 'notice', 'warning', 'help'].indexOf(type) > -1
+                ? ['ok']
+                : undefined);
         const newOnOk = this.wrapper(onOk, this.close);
         const newOnCancel = this.wrapper(onCancel, this.close);
         const newOnClose = this.wrapper(onClose, this.close);
@@ -198,7 +209,7 @@ const ConfigModal = ConfigProvider.config(Modal, { componentName: 'Dialog' });
  * 创建对话框
  * @exportName show
  * @param {Object} config 配置项
- * @returns {Object} 包含有 hide 方法，可用来关闭对话框
+ * @returns {Object} 包含有 hide 方法，可用来关闭对话框
  */
 export const show = (config = {}) => {
     const container = document.createElement('div');
@@ -248,15 +259,21 @@ const methodFactory = type => (config = {}) => {
  * 创建警示对话框
  * @exportName alert
  * @param {Object} config 配置项
- * @returns {Object} 包含有 hide 方法，可用来关闭对话框
+ * @returns {Object} 包含有 hide 方法，可用来关闭对话框
  */
 export const alert = methodFactory('alert');
 
+export const success = methodFactory('success');
+export const error = methodFactory('error');
+export const notice = methodFactory('notice');
+export const warning = methodFactory('warning');
+export const help = methodFactory('help');
+
 /**
  * 创建确认对话框
  * @exportName confirm
  * @param {Object} config 配置项
- * @returns {Object} 包含有 hide 方法，可用来关闭对话框
+ * @returns {Object} 包含有 hide 方法，可用来关闭对话框
  */
 export const confirm = methodFactory('confirm');
 
@@ -271,6 +288,11 @@ export const withContext = WrappedComponent => {
                             show: (config = {}) => show({ ...config, contextConfig }),
                             alert: (config = {}) => alert({ ...config, contextConfig }),
                             confirm: (config = {}) => confirm({ ...config, contextConfig }),
+                            success: (config = {}) => success({ ...config, contextConfig }),
+                            error: (config = {}) => error({ ...config, contextConfig }),
+                            warning: (config = {}) => warning({ ...config, contextConfig }),
+                            notice: (config = {}) => notice({ ...config, contextConfig }),
+                            help: (config = {}) => help({ ...config, contextConfig }),
                         }}
                     />
                 )}