mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-08 18:13:29 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

fix: Notification closeIcon don't update (#32351) (#32359)

Browse Source 
* fix: Notification closeIcon don't update (#32351)

* add test case for Notification closeIcon (#32351)

Co-authored-by: shuzhiqiang <shuzhiqiang@megalinkps.cn>
This commit is contained in:
Karott Schu 2021-10-02 14:14:31 +08:00 committed by GitHub
parent 6b56af466f
commit 27c3b51c18
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
components/notification/__tests__/index.test.js
View File

@ -191,6 +191,21 @@ describe('notification', () => {
expect(document.querySelectorAll('.test-customize-icon').length).toBe(1); expect(document.querySelectorAll('.test-customize-icon').length).toBe(1);
}); });
it('closeIcon should be update', async () => {
const openNotificationWithCloseIcon = async type => {
notification.open({
message: 'Notification Title',
closeIcon: <span className={`test-customize-icon-${type}`} />,
});
await Promise.resolve();
expect(document.querySelectorAll(`.test-customize-icon-${type}`).length).toBe(1);
};
const promises = ['1', '2'].map(type => openNotificationWithCloseIcon(type));
await Promise.all(promises);
});
it('support config duration', () => { it('support config duration', () => {
notification.config({ notification.config({
duration: 0, duration: 0,

16
components/notification/index.tsx
View File

@ -124,7 +124,6 @@ function getNotificationInstance(
top, top,
bottom, bottom,
getContainer = defaultGetContainer, getContainer = defaultGetContainer,
closeIcon = defaultCloseIcon,
prefixCls: customizePrefixCls, prefixCls: customizePrefixCls,
} = args; } = args;
const { getPrefixCls, getIconPrefixCls } = globalConfig(); const { getPrefixCls, getIconPrefixCls } = globalConfig();
@ -141,12 +140,6 @@ function getNotificationInstance(
return; return;
} }
const closeIconToRender = (
<span className={`${prefixCls}-close-x`}>
{closeIcon || <CloseOutlined className={`${prefixCls}-close-icon`} />}
</span>
);
const notificationClass = classNames(`${prefixCls}-${placement}`, { const notificationClass = classNames(`${prefixCls}-${placement}`, {
[`${prefixCls}-rtl`]: rtl === true, [`${prefixCls}-rtl`]: rtl === true,
}); });
@ -158,7 +151,6 @@ function getNotificationInstance(
className: notificationClass, className: notificationClass,
style: getPlacementStyle(placement, top, bottom), style: getPlacementStyle(placement, top, bottom),
getContainer, getContainer,
closeIcon: closeIconToRender,
maxCount, maxCount,
}, },
notification => { notification => {
@ -213,6 +205,7 @@ function getRCNoticeProps(args: ArgsProps, prefixCls: string, iconPrefixCls?: st
key, key,
style, style,
className, className,
closeIcon = defaultCloseIcon,
} = args; } = args;
const duration = durationArg === undefined ? defaultDuration : durationArg; const duration = durationArg === undefined ? defaultDuration : durationArg;
@ -226,6 +219,12 @@ function getRCNoticeProps(args: ArgsProps, prefixCls: string, iconPrefixCls?: st
}); });
} }
const closeIconToRender = (
<span className={`${prefixCls}-close-x`}>
{closeIcon || <CloseOutlined className={`${prefixCls}-close-icon`} />}
</span>
);
const autoMarginTag = const autoMarginTag =
!description && iconNode ? ( !description && iconNode ? (
<span className={`${prefixCls}-message-single-line-auto-margin`} /> <span className={`${prefixCls}-message-single-line-auto-margin`} />
@ -247,6 +246,7 @@ function getRCNoticeProps(args: ArgsProps, prefixCls: string, iconPrefixCls?: st
), ),
duration, duration,
closable: true, closable: true,
closeIcon: closeIconToRender,
onClose, onClose,
onClick, onClick,
key, key,