GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix: badge should accept negative number (#15810) 

* fix badge negative number

* support negative as count
pull/18967/head
zombieJ 6 years ago
committed by GitHub
parent
95f5e78917
commit
6b2d72e2c1
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 707 additions and 20 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 57
      components/badge/ScrollNumber.tsx
  2. 655
      components/badge/__tests__/__snapshots__/index.test.js.snap
  3. 11
      components/badge/__tests__/index.test.js
  4. 4
      components/badge/style/index.less

57
components/badge/ScrollNumber.tsx
View File

@ -11,7 +11,10 @@ function getNumberArray(num: string | number | undefined | null) {
.toString()
.split('')
.reverse()
.map(i => Number(i))
.map(i => {
const current = Number(i);
return isNaN(current) ? i : current;
})
: [];
}
@ -60,13 +63,18 @@ class ScrollNumber extends Component<ScrollNumberProps, ScrollNumberState> {
}
getPositionByNum(num: number, i: number) {
const { count } = this.state;
const currentCount = Math.abs(Number(count));
const lastCount = Math.abs(Number(this.lastCount));
const currentDigit = Math.abs(getNumberArray(this.state.count)[i] as number);
const lastDigit = Math.abs(getNumberArray(this.lastCount)[i] as number);
if (this.state.animateStarted) {
return 10 + num;
}
const currentDigit = getNumberArray(this.state.count)[i];
const lastDigit = getNumberArray(this.lastCount)[i];
// 同方向则在同一侧切换数字
if (Number(this.state.count) > Number(this.lastCount)) {
if (currentCount > lastCount) {
if (currentDigit >= lastDigit) {
return 10 + num;
}
@ -107,26 +115,35 @@ class ScrollNumber extends Component<ScrollNumberProps, ScrollNumberState> {
</p>,
);
}
return childrenToReturn;
}
renderCurrentNumber(prefixCls: string, num: number, i: number) {
const position = this.getPositionByNum(num, i);
const removeTransition =
this.state.animateStarted || getNumberArray(this.lastCount)[i] === undefined;
return createElement(
'span',
{
className: `${prefixCls}-only`,
style: {
transition: removeTransition ? 'none' : undefined,
msTransform: `translateY(${-position * 100}%)`,
WebkitTransform: `translateY(${-position * 100}%)`,
transform: `translateY(${-position * 100}%)`,
renderCurrentNumber(prefixCls: string, num: number | string, i: number) {
if (typeof num === 'number') {
const position = this.getPositionByNum(num, i);
const removeTransition =
this.state.animateStarted || getNumberArray(this.lastCount)[i] === undefined;
return createElement(
'span',
{
className: `${prefixCls}-only`,
style: {
transition: removeTransition ? 'none' : undefined,
msTransform: `translateY(${-position * 100}%)`,
WebkitTransform: `translateY(${-position * 100}%)`,
transform: `translateY(${-position * 100}%)`,
},
key: i,
},
key: i,
},
this.renderNumberList(position),
this.renderNumberList(position),
);
}
return (
<span key="symbol" className={`${prefixCls}-symbol`}>
{num}
</span>
);
}

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

@ -73,6 +73,661 @@ exports[`Badge badge should support float number 2`] = `
</Badge>
`;
exports[`Badge render correct with negative number 1`] = `
<div>
<span
class="ant-badge ant-badge-not-a-wrapper"
>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
data-show="true"
title="-10"
>
<span
class="ant-scroll-number-symbol"
>
-
</span>
<span
class="ant-scroll-number-only"
style="transition:none;-ms-transform:translateY(-1100%);-webkit-transform:translateY(-1100%);transform:translateY(-1100%)"
>
<p
class=""
>
0
</p>
<p
class=""
>
1
</p>
<p
class=""
>
2
</p>
<p
class=""
>
3
</p>
<p
class=""
>
4
</p>
<p
class=""
>
5
</p>
<p
class=""
>
6
</p>
<p
class=""
>
7
</p>
<p
class=""
>
8
</p>
<p
class=""
>
9
</p>
<p
class=""
>
0
</p>
<p
class="current"
>
1
</p>
<p
class=""
>
2
</p>
<p
class=""
>
3
</p>
<p
class=""
>
4
</p>
<p
class=""
>
5
</p>
<p
class=""
>
6
</p>
<p
class=""
>
7
</p>
<p
class=""
>
8
</p>
<p
class=""
>
9
</p>
<p
class=""
>
0
</p>
<p
class=""
>
1
</p>
<p
class=""
>
2
</p>
<p
class=""
>
3
</p>
<p
class=""
>
4
</p>
<p
class=""
>
5
</p>
<p
class=""
>
6
</p>
<p
class=""
>
7
</p>
<p
class=""
>
8
</p>
<p
class=""
>
9
</p>
</span>
<span
class="ant-scroll-number-only"
style="transition:none;-ms-transform:translateY(-1000%);-webkit-transform:translateY(-1000%);transform:translateY(-1000%)"
>
<p
class=""
>
0
</p>
<p
class=""
>
1
</p>
<p
class=""
>
2
</p>
<p
class=""
>
3
</p>
<p
class=""
>
4
</p>
<p
class=""
>
5
</p>
<p
class=""
>
6
</p>
<p
class=""
>
7
</p>
<p
class=""
>
8
</p>
<p
class=""
>
9
</p>
<p
class="current"
>
0
</p>
<p
class=""
>
1
</p>
<p
class=""
>
2
</p>
<p
class=""
>
3
</p>
<p
class=""
>
4
</p>
<p
class=""
>
5
</p>
<p
class=""
>
6
</p>
<p
class=""
>
7
</p>
<p
class=""
>
8
</p>
<p
class=""
>
9
</p>
<p
class=""
>
0
</p>
<p
class=""
>
1
</p>
<p
class=""
>
2
</p>
<p
class=""
>
3
</p>
<p
class=""
>
4
</p>
<p
class=""
>
5
</p>
<p
class=""
>
6
</p>
<p
class=""
>
7
</p>
<p
class=""
>
8
</p>
<p
class=""
>
9
</p>
</span>
</sup>
</span>
<span
class="ant-badge ant-badge-not-a-wrapper"
>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
data-show="true"
title="-10"
>
<span
class="ant-scroll-number-symbol"
>
-
</span>
<span
class="ant-scroll-number-only"
style="transition:none;-ms-transform:translateY(-1100%);-webkit-transform:translateY(-1100%);transform:translateY(-1100%)"
>
<p
class=""
>
0
</p>
<p
class=""
>
1
</p>
<p
class=""
>
2
</p>
<p
class=""
>
3
</p>
<p
class=""
>
4
</p>
<p
class=""
>
5
</p>
<p
class=""
>
6
</p>
<p
class=""
>
7
</p>
<p
class=""
>
8
</p>
<p
class=""
>
9
</p>
<p
class=""
>
0
</p>
<p
class="current"
>
1
</p>
<p
class=""
>
2
</p>
<p
class=""
>
3
</p>
<p
class=""
>
4
</p>
<p
class=""
>
5
</p>
<p
class=""
>
6
</p>
<p
class=""
>
7
</p>
<p
class=""
>
8
</p>
<p
class=""
>
9
</p>
<p
class=""
>
0
</p>
<p
class=""
>
1
</p>
<p
class=""
>
2
</p>
<p
class=""
>
3
</p>
<p
class=""
>
4
</p>
<p
class=""
>
5
</p>
<p
class=""
>
6
</p>
<p
class=""
>
7
</p>
<p
class=""
>
8
</p>
<p
class=""
>
9
</p>
</span>
<span
class="ant-scroll-number-only"
style="transition:none;-ms-transform:translateY(-1000%);-webkit-transform:translateY(-1000%);transform:translateY(-1000%)"
>
<p
class=""
>
0
</p>
<p
class=""
>
1
</p>
<p
class=""
>
2
</p>
<p
class=""
>
3
</p>
<p
class=""
>
4
</p>
<p
class=""
>
5
</p>
<p
class=""
>
6
</p>
<p
class=""
>
7
</p>
<p
class=""
>
8
</p>
<p
class=""
>
9
</p>
<p
class="current"
>
0
</p>
<p
class=""
>
1
</p>
<p
class=""
>
2
</p>
<p
class=""
>
3
</p>
<p
class=""
>
4
</p>
<p
class=""
>
5
</p>
<p
class=""
>
6
</p>
<p
class=""
>
7
</p>
<p
class=""
>
8
</p>
<p
class=""
>
9
</p>
<p
class=""
>
0
</p>
<p
class=""
>
1
</p>
<p
class=""
>
2
</p>
<p
class=""
>
3
</p>
<p
class=""
>
4
</p>
<p
class=""
>
5
</p>
<p
class=""
>
6
</p>
<p
class=""
>
7
</p>
<p
class=""
>
8
</p>
<p
class=""
>
9
</p>
</span>
</sup>
</span>
</div>
`;
exports[`Badge should be compatible with borderColor style 1`] = `
<span
class="ant-badge ant-badge-not-a-wrapper"

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

@ -95,4 +95,15 @@ describe('Badge', () => {
const wrapper = mount(<Badge style={{ color: 'red' }} status="success" text="Success" />);
expect(wrapper.find('.ant-badge-status-text').props().style.color).toBe('red');
});
// https://github.com/ant-design/ant-design/issues/15799
it('render correct with negative number', () => {
const wrapper = render(
<div>
<Badge count="-10" />
<Badge count={-10} />
</div>,
);
expect(wrapper).toMatchSnapshot();
});
});

4
components/badge/style/index.less
View File

@ -163,6 +163,10 @@
margin: 0;
}
}
&-symbol {
vertical-align: top;
}
}
@keyframes antZoomBadgeIn {

Write Preview
Loading…
Cancel
Save