test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-01 11:39:28 +08:00
Code Issues Actions 69 Packages Projects Releases Wiki Activity

fix: Badge should not do motion when appear (#28003)

Browse Source 
* fix: Badge no need appear motion

* test: Update snapshot
This commit is contained in:
二货机器人 2020-11-25 19:49:44 +08:00 committed by GitHub
parent bd20a85576
commit 20788d870c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 526 additions and 516 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

990
components/badge/__tests__/__snapshots__/demo.test.js.snap
View File

File diff suppressed because it is too large Load Diff

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

@ -5,7 +5,7 @@ exports[`Badge badge should support float number 1`] = `
class="ant-badge ant-badge-not-a-wrapper"
>
<sup
class="ant-scroll-number ant-badge-zoom-appear ant-badge-zoom-appear-start ant-badge-zoom ant-badge-count ant-badge-multiple-words"
class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
data-show="true"
title="3.5"
>
@ -19,7 +19,7 @@ exports[`Badge badge should support float number 2`] = `
class="ant-badge ant-badge-not-a-wrapper"
>
<sup
class="ant-scroll-number ant-badge-zoom-appear ant-badge-zoom-appear-start ant-badge-zoom ant-badge-count ant-badge-multiple-words"
class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
data-show="true"
title="3.5"
>
@ -35,7 +35,7 @@ exports[`Badge render Badge size when contains children 1`] = `
>
<a />
<sup
class="ant-scroll-number ant-badge-zoom-appear ant-badge-zoom-appear-start ant-badge-zoom ant-badge-count"
class="ant-scroll-number ant-badge-count"
data-show="true"
title="5"
>
@ -201,7 +201,7 @@ exports[`Badge render Badge size when contains children 1`] = `
>
<a />
<sup
class="ant-scroll-number ant-badge-zoom-appear ant-badge-zoom-appear-start ant-badge-zoom ant-badge-count ant-badge-count-sm"
class="ant-scroll-number ant-badge-count ant-badge-count-sm"
data-show="true"
title="5"
>
@ -372,7 +372,7 @@ exports[`Badge render Badge status/color when contains children 1`] = `
>
<a />
<sup
class="ant-scroll-number ant-badge-zoom-appear ant-badge-zoom-appear-start ant-badge-zoom ant-badge-dot ant-badge-status-success"
class="ant-scroll-number ant-badge-dot ant-badge-status-success"
data-show="true"
title="5"
/>
@ -382,7 +382,7 @@ exports[`Badge render Badge status/color when contains children 1`] = `
>
<a />
<sup
class="ant-scroll-number ant-badge-zoom-appear ant-badge-zoom-appear-start ant-badge-zoom ant-badge-dot ant-badge-status-blue"
class="ant-scroll-number ant-badge-dot ant-badge-status-blue"
data-show="true"
title="5"
/>
@ -392,7 +392,7 @@ exports[`Badge render Badge status/color when contains children 1`] = `
>
<a />
<sup
class="ant-scroll-number ant-badge-zoom-appear ant-badge-zoom-appear-start ant-badge-zoom ant-badge-dot"
class="ant-scroll-number ant-badge-dot"
data-show="true"
style="background: rgb(0, 136, 204);"
title="5"
@ -407,7 +407,7 @@ exports[`Badge render correct with negative number 1`] = `
class="ant-badge ant-badge-not-a-wrapper"
>
<sup
class="ant-scroll-number ant-badge-zoom-appear ant-badge-zoom-appear-start ant-badge-zoom ant-badge-count ant-badge-multiple-words"
class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
data-show="true"
title="-10"
>
@ -732,7 +732,7 @@ exports[`Badge render correct with negative number 1`] = `
class="ant-badge ant-badge-not-a-wrapper"
>
<sup
class="ant-scroll-number ant-badge-zoom-appear ant-badge-zoom-appear-start ant-badge-zoom ant-badge-count ant-badge-multiple-words"
class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
data-show="true"
title="-10"
>
@ -1242,7 +1242,7 @@ exports[`Badge should be compatible with borderColor style 1`] = `
class="ant-badge ant-badge-not-a-wrapper"
>
<sup
class="ant-scroll-number ant-badge-zoom-appear ant-badge-zoom-appear-start ant-badge-zoom ant-badge-count"
class="ant-scroll-number ant-badge-count"
data-show="true"
style="background-color: rgb(255, 255, 255); color: rgb(153, 153, 153); border-color: #d9d9d9; box-shadow: 0 0 0 1px #d9d9d9 inset;"
title="4"
@ -1411,7 +1411,7 @@ exports[`Badge should render when count is changed 1`] = `
class="ant-badge ant-badge-not-a-wrapper"
>
<sup
class="ant-scroll-number ant-badge-zoom-appear ant-badge-zoom-appear-start ant-badge-zoom ant-badge-count ant-badge-multiple-words"
class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
data-show="true"
title="10"
>
@ -1734,7 +1734,7 @@ exports[`Badge should render when count is changed 2`] = `
class="ant-badge ant-badge-not-a-wrapper"
>
<sup
class="ant-scroll-number ant-badge-zoom-appear ant-badge-zoom-appear-start ant-badge-zoom ant-badge-count ant-badge-multiple-words"
class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
data-show="true"
title="11"
>
@ -2057,7 +2057,7 @@ exports[`Badge should render when count is changed 3`] = `
class="ant-badge ant-badge-not-a-wrapper"
>
<sup
class="ant-scroll-number ant-badge-zoom-appear ant-badge-zoom-appear-start ant-badge-zoom ant-badge-count ant-badge-multiple-words"
class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
data-show="true"
title="11"
>
@ -2380,7 +2380,7 @@ exports[`Badge should render when count is changed 4`] = `
class="ant-badge ant-badge-not-a-wrapper"
>
<sup
class="ant-scroll-number ant-badge-zoom-appear ant-badge-zoom-appear-start ant-badge-zoom ant-badge-count ant-badge-multiple-words"
class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
data-show="true"
title="111"
>
@ -2394,7 +2394,7 @@ exports[`Badge should render when count is changed 5`] = `
class="ant-badge ant-badge-not-a-wrapper"
>
<sup
class="ant-scroll-number ant-badge-zoom-appear ant-badge-zoom-appear-start ant-badge-zoom ant-badge-count ant-badge-multiple-words"
class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
data-show="true"
title="10"
>
@ -2717,7 +2717,7 @@ exports[`Badge should render when count is changed 6`] = `
class="ant-badge ant-badge-not-a-wrapper"
>
<sup
class="ant-scroll-number ant-badge-zoom-appear ant-badge-zoom-appear-start ant-badge-zoom ant-badge-count"
class="ant-scroll-number ant-badge-count"
data-show="true"
title="9"
>

18
components/badge/demo/no-wrapper.md
View File

@ -16,16 +16,17 @@ title:
Used in standalone when children is empty.
```jsx
import { Badge } from 'antd';
import { Badge, Space } from 'antd';
ReactDOM.render(
<div>
const Demo = () => (
<Space>
<Badge count={25} />
<Badge count={4} className="site-badge-count-4" />
<Badge className="site-badge-count-109" count={109} style={{ backgroundColor: '#52c41a' }} />
</div>,
mountNode,
</Space>
);
ReactDOM.render(<Demo />, mountNode);
```
```css
@ -37,13 +38,6 @@ ReactDOM.render(
```
<style>
.ant-badge-not-a-wrapper:not(.ant-badge-status) {
margin-right: 8px;
}
.ant-badge.ant-badge-rtl:not(.ant-badge-not-a-wrapper) {
margin-right: 0;
margin-left: 20px;
}
[data-theme="dark"] .site-badge-count-4 .ant-badge-count {
background-color: #141414;
box-shadow: 0 0 0 1px #434343 inset;

2
components/badge/index.tsx
View File

@ -159,7 +159,7 @@ const Badge: CompoundedComponent = ({
return (
<span {...restProps} className={badgeClassName}>
{children}
<CSSMotion visible={!isHidden} motionName={`${prefixCls}-zoom`} motionAppear>
<CSSMotion visible={!isHidden} motionName={`${prefixCls}-zoom`} motionAppear={false}>
{({ className: motionClassName }) => {
const scrollNumberPrefixCls = getPrefixCls(
'scroll-number',