test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-03 04:30:06 +08:00
Code Issues Actions 100 Packages Projects Releases Wiki Activity

🐛 fix Badge color not working when contains children (#21333)

Browse Source 
close #21331
This commit is contained in:
偏右 2020-02-11 12:56:18 +08:00 committed by GitHub
parent 2e419b264b
commit ef36e17bb6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 64 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
components/badge/__tests__/__snapshots__/index.test.js.snap
View File

@ -69,6 +69,42 @@ exports[`Badge badge should support float number 2`] = `
</Badge>
`;
exports[`Badge render Badge status/color when contains children 1`] = `
Array [
<span
class="ant-badge ant-badge-status"
>
<a />
<sup
class="ant-scroll-number ant-badge-dot ant-badge-status-success"
data-show="true"
title="5"
/>
</span>,
<span
class="ant-badge ant-badge-status"
>
<a />
<sup
class="ant-scroll-number ant-badge-dot ant-badge-status-blue"
data-show="true"
title="5"
/>
</span>,
<span
class="ant-badge ant-badge-status"
>
<a />
<sup
class="ant-scroll-number ant-badge-dot"
data-show="true"
style="background:#08c"
title="5"
/>
</span>,
]
`;
exports[`Badge render correct with negative number 1`] = `
<div>
<span

18
components/badge/__tests__/index.test.js
View File

@ -113,4 +113,22 @@ describe('Badge', () => {
);
expect(wrapper).toMatchSnapshot();
});
// https://github.com/ant-design/ant-design/issues/21331
it('render Badge status/color when contains children', () => {
const wrapper = render(
<>
<Badge count={5} status="success">
<a />
</Badge>
<Badge count={5} color="blue">
<a />
</Badge>
<Badge count={5} color="#08c">
<a />
</Badge>
</>,
);
expect(wrapper).toMatchSnapshot();
})
});

13
components/badge/index.tsx
View File

@ -129,7 +129,7 @@ export default class Badge extends React.Component<BadgeProps, any> {
}
renderBadgeNumber(prefixCls: string, scrollNumberPrefixCls: string) {
const { status, count } = this.props;
const { status, count, color } = this.props;
const displayCount = this.getDisplayCount();
const isDot = this.isDot();
@ -140,9 +140,16 @@ export default class Badge extends React.Component<BadgeProps, any> {
[`${prefixCls}-count`]: !isDot,
[`${prefixCls}-multiple-words`]:
!isDot && count && count.toString && count.toString().length > 1,
[`${prefixCls}-status-${status}`]: this.hasStatus(),
[`${prefixCls}-status-${status}`]: !!status,
[`${prefixCls}-status-${color}`]: isPresetColor(color),
});
let statusStyle: React.CSSProperties | undefined = this.getStyleWithOffset();
if (color && !isPresetColor(color)) {
statusStyle = statusStyle || {};
statusStyle.background = color;
}
return hidden ? null : (
<ScrollNumber
prefixCls={scrollNumberPrefixCls}
@ -151,7 +158,7 @@ export default class Badge extends React.Component<BadgeProps, any> {
count={displayCount}
displayComponent={this.renderDisplayComponent()} // <Badge status="success" count={<Icon type="xxx" />}></Badge>
title={this.getScrollNumberTitle()}
style={this.getStyleWithOffset()}
style={statusStyle}
key="scrollNumber"
/>
);