feat(Message): can remove icon by iconType: false

Co-authored-by: ranrui.cwj <[email protected]>
alibaba-fusion · Mar 25, 2022 · b0f732e · b0f732e
1 parent 3768a0d
commit b0f732e
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 10 deletions.
diff --git a/docs/message/index.md b/docs/message/index.md
@@ -27,7 +27,7 @@
 | children       | 内容                                                                                    | ReactNode | -         |
 | defaultVisible | 默认是否显示                                                                                | Boolean   | true      |
 | visible        | 当前是否显示                                                                                | Boolean   | -         |
-| iconType       | 显示的图标类型，会覆盖内部设置的IconType                                                              | String    | -         |
+| iconType       | 显示的图标类型，会覆盖内部设置的IconType，传false不显示图标                                                              | String \| false   | -         |
 | closeable      | 显示关闭按钮                                                                                | Boolean   | false     |
 | onClose        | 关闭按钮的回调<br/><br/>**签名**:<br/>Function() => void                                       | Function  | () => {}  |
 | afterClose     | 关闭之后调用的函数<br/><br/>**签名**:<br/>Function() => void                                     | Function  | () => {}  |

diff --git a/src/message/message.jsx b/src/message/message.jsx
@@ -55,9 +55,9 @@ class Message extends Component {
          */
         visible: PropTypes.bool,
         /**
-         * 显示的图标类型，会覆盖内部设置的IconType
+         * 显示的图标类型，会覆盖内部设置的IconType，传false不显示图标
          */
-        iconType: PropTypes.string,
+        iconType: PropTypes.string | false,
         /**
          * 显示关闭按钮
          */
@@ -175,11 +175,13 @@ class Message extends Component {
                         <Icon type="close" />
                     </a>
                 ) : null}
-                <Icon
-                    className={`${messagePrefix}-symbol ${!icon &&
-                        `${messagePrefix}-symbol-icon`}`}
-                    type={icon}
-                />
+                {icon !== false ? (
+                    <Icon
+                        className={`${messagePrefix}-symbol ${!icon &&
+                            `${messagePrefix}-symbol-icon`}`}
+                        type={icon}
+                    />
+                ) : null}
                 {title ? (
                     <div className={`${messagePrefix}-title`}>{title}</div>
                 ) : null}

diff --git a/test/message/index-spec.js b/test/message/index-spec.js
@@ -105,6 +105,12 @@ describe('Message', () => {
         wrapper.unmount();
     });
 
+    it('should not show icon if set iconType to false', () => {
+        const wrapper = mount(<Message iconType={false} />);
+        assert(wrapper.find(Icon).length === 0);
+        wrapper.unmount();
+    });
+
     it('should custom icon type', () => {
         const wrapper = mount(<Message iconType="smile" />);
         assert(wrapper.find(Icon).prop('type') === 'smile');

diff --git a/types/message/index.d.ts b/types/message/index.d.ts
@@ -44,9 +44,9 @@ export interface MessageProps extends HTMLAttributesWeak, CommonProps {
     visible?: boolean;
 
     /**
-     * 显示的图标类型，会覆盖内部设置的IconType
+     * 显示的图标类型，会覆盖内部设置的IconType，传false不显示图标
      */
-    iconType?: string;
+    iconType?: string | false;
 
     /**
      * 显示关闭按钮