Make message icons optional

components/message/__tests__/index.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import message from '..';
+import Icon from '../../icon';
 
 describe('message', () => {
   beforeEach(() => {
@@ -115,6 +116,16 @@ describe('message', () => {
     expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
   });
 
+  it('should allow custom icon', () => {
+    message.open({ content: 'Message', icon: <Icon type="smile-o" /> });
+    expect(document.querySelectorAll('.anticon-smile-o').length).toBe(1);
+  });
+
+  it('should have no icon', () => {
+    message.open({ content: 'Message' });
+    expect(document.querySelectorAll('.ant-message-notice .anticon').length).toBe(0);
+  });
+
   // https://github.com/ant-design/ant-design/issues/8201
   it('should destroy messages correctly', () => {
     // eslint-disable-next-line

components/message/index.en-US.md

@@ -14,6 +14,17 @@ Display global messages as feedback in response to user operations.
 
 ## API
 
+- `message.open(config)`
+
+The properties of config are as follows:
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| content | content of the message | ReactNode ||
+| duration | time(seconds) before auto-dismiss, don't dismiss if set to 0 | number | 3 |
+| onClose | Specify a function that will be called when the message is closed | function ||
+| icon | Customized Icon | ReactNode ||
+
 This components provides some static methods, with usage and arguments as following:
 
 - `message.success(content, [duration], onClose)`

components/message/index.tsx

@@ -45,30 +45,29 @@ export interface MessageType {
   promise: Promise<any>;
 }
 
-function notice(
-  content: React.ReactNode,
-  duration: (() => void) | number = defaultDuration,
-  type: NoticeType,
-  onClose?: () => void,
-): MessageType {
+export interface ArgsProps {
+  content: React.ReactNode;
+  duration: number | null;
+  type: NoticeType;
+  onClose?: () => void;
+  icon?: React.ReactNode;
+}
+
+function notice(args: ArgsProps): MessageType {
+  const duration = args.duration !== undefined ? args.duration : defaultDuration;
   const iconType = ({
     info: 'info-circle',
     success: 'check-circle',
     error: 'cross-circle',
     warning: 'exclamation-circle',
     loading: 'loading',
-  })[type];
-
-  if (typeof duration === 'function') {
-    onClose = duration;
-    duration = defaultDuration;
-  }
+  })[args.type];
 
   const target = key++;
   const closePromise = new Promise((resolve) => {
-    const callback =  () => {
-      if (typeof onClose === 'function') {
-        onClose();
+    const callback = () => {
+      if (typeof args.onClose === 'function') {
+        args.onClose();
       }
       return resolve(true);
     };
@@ -78,9 +77,9 @@ function notice(
         duration,
         style: {},
         content: (
-          <div className={`${prefixCls}-custom-content ${prefixCls}-${type}`}>
-            <Icon type={iconType} />
-            <span>{content}</span>
+          <div className={`${prefixCls}-custom-content${args.type ? ` ${prefixCls}-${args.type}` : ''}`}>
+            {args.icon ? args.icon : iconType ? <Icon type={iconType} /> : ''}
+            <span>{args.content}</span>
           </div>
         ),
         onClose: callback,
@@ -110,26 +109,8 @@ export interface ConfigOptions {
   maxCount?: number;
 }
 
-export default {
-  info(content: ConfigContent, duration?: ConfigDuration, onClose?: ConfigOnClose) {
-    return notice(content, duration, 'info', onClose);
-  },
-  success(content: ConfigContent, duration?: ConfigDuration, onClose?: ConfigOnClose) {
-    return notice(content, duration, 'success', onClose);
-  },
-  error(content: ConfigContent, duration?: ConfigDuration, onClose?: ConfigOnClose) {
-    return notice(content, duration, 'error', onClose);
-  },
-  // Departed usage, please use warning()
-  warn(content: ConfigContent, duration?: ConfigDuration, onClose?: ConfigOnClose) {
-    return notice(content, duration, 'warning', onClose);
-  },
-  warning(content: ConfigContent, duration?: ConfigDuration, onClose?: ConfigOnClose) {
-    return notice(content, duration, 'warning', onClose);
-  },
-  loading(content: ConfigContent, duration?: ConfigDuration, onClose?: ConfigOnClose) {
-    return notice(content, duration, 'loading', onClose);
-  },
+const api: any = {
+  open: notice,
   config(options: ConfigOptions) {
     if (options.top !== undefined) {
       defaultTop = options.top;
@@ -160,3 +141,29 @@ export default {
     }
   },
 };
+
+['success', 'info', 'warning', 'error', 'loading'].forEach((type) => {
+  api[type] = (content: ConfigContent, duration?: ConfigDuration, onClose?: ConfigOnClose) => {
+    if (typeof duration === 'function') {
+      onClose = duration;
+      duration = undefined;
+    }
+    return api.open({ content, duration: duration, type, onClose });
+  };
+});
+
+api.warn = api.warning;
+
+export interface MessageApi {
+  info(content: ConfigContent, duration?: ConfigDuration, onClose?: ConfigOnClose): void;
+  success(content: ConfigContent, duration?: ConfigDuration, onClose?: ConfigOnClose): void;
+  error(content: ConfigContent, duration?: ConfigDuration, onClose?: ConfigOnClose): void;
+  warn(content: ConfigContent, duration?: ConfigDuration, onClose?: ConfigOnClose): void;
+  warning(content: ConfigContent, duration?: ConfigDuration, onClose?: ConfigOnClose): void;
+  loading(content: ConfigContent, duration?: ConfigDuration, onClose?: ConfigOnClose): void;
+  open(args: ArgsProps): void;
+  config(options: ConfigOptions): void;
+  destroy(): void;
+}
+
+export default api as MessageApi;