mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 12:39:49 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

fix: Safari Badge scroll number missing (#51598)
Some checks are pending
Publish Any Commit / build (push) Waiting to run
Details
🔀 Sync mirror to Gitee / mirror (push) Waiting to run
Details
✅ test / lint (push) Waiting to run
Details
✅ test / test-react-legacy (16, 1/2) (push) Waiting to run
Details
✅ test / test-react-legacy (16, 2/2) (push) Waiting to run
Details
✅ test / test-react-legacy (17, 1/2) (push) Waiting to run
Details
✅ test / test-react-legacy (17, 2/2) (push) Waiting to run
Details
✅ test / test-node (push) Waiting to run
Details
✅ test / test-react-latest (dom, 1/2) (push) Waiting to run
Details
✅ test / test-react-latest (dom, 2/2) (push) Waiting to run
Details
✅ test / test-react-latest-dist (dist, 1/2) (push) Blocked by required conditions
Details
✅ test / test-react-latest-dist (dist, 2/2) (push) Blocked by required conditions
Details
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Blocked by required conditions
Details
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Blocked by required conditions
Details
✅ test / test-coverage (push) Blocked by required conditions
Details
✅ test / build (push) Waiting to run
Details
✅ test / test lib/es module (es, 1/2) (push) Waiting to run
Details
✅ test / test lib/es module (es, 2/2) (push) Waiting to run
Details
✅ test / test lib/es module (lib, 1/2) (push) Waiting to run
Details
✅ test / test lib/es module (lib, 2/2) (push) Waiting to run
Details
👁️ Visual Regression Persist Start / test image (push) Waiting to run
Details

Browse Source 
* fix: Safari Badge scroll number missing

* test: update snapshot
This commit is contained in:
二货爱吃白萝卜 2024-11-13 11:12:39 +08:00 committed by GitHub
parent e713ea1f46
commit 021745f1ab
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 9 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/badge/SingleNumber.tsx
View File

@ -79,23 +79,29 @@ const SingleNumber: React.FC<Readonly<SingleNumberProps>> = (props) => {
unitNumberList.push(index); unitNumberList.push(index);
} }
const unit = prevCount < count ? 1 : -1;
// Fill with number unit nodes // Fill with number unit nodes
const prevIndex = unitNumberList.findIndex((n) => n % 10 === prevValue); const prevIndex = unitNumberList.findIndex((n) => n % 10 === prevValue);
unitNodes = unitNumberList.map((n, index) => {
// Cut list
const cutUnitNumberList =
unit < 0 ? unitNumberList.slice(0, prevIndex + 1) : unitNumberList.slice(prevIndex);
unitNodes = cutUnitNumberList.map((n, index) => {
const singleUnit = n % 10; const singleUnit = n % 10;
return ( return (
<UnitNumber <UnitNumber
{...props} {...props}
key={n} key={n}
value={singleUnit} value={singleUnit}
offset={index - prevIndex} offset={unit < 0 ? index - prevIndex : index}
current={index === prevIndex} current={index === prevIndex}
/> />
); );
}); });
// Calculate container offset value // Calculate container offset value
const unit = prevCount < count ? 1 : -1;
offsetStyle = { offsetStyle = {
transform: `translateY(${-getOffset(prevValue, value, unit)}00%)`, transform: `translateY(${-getOffset(prevValue, value, unit)}00%)`,
}; };

163
components/badge/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -305,60 +305,6 @@ exports[`Badge should render when count is changed 1`] = `
> >
<span <span
class="ant-scroll-number-only-unit" class="ant-scroll-number-only-unit"
style="position: absolute; top: -900%; left: 0px;"
>
0
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -800%; left: 0px;"
>
1
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -700%; left: 0px;"
>
2
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -600%; left: 0px;"
>
3
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -500%; left: 0px;"
>
4
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -400%; left: 0px;"
>
5
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -300%; left: 0px;"
>
6
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -200%; left: 0px;"
>
7
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -100%; left: 0px;"
>
8
</span>
<span
class="ant-scroll-number-only-unit current"
> >
9 9
</span> </span>
@ -400,60 +346,6 @@ exports[`Badge should render when count is changed 2`] = `
> >
<span <span
class="ant-scroll-number-only-unit" class="ant-scroll-number-only-unit"
style="position: absolute; top: -900%; left: 0px;"
>
1
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -800%; left: 0px;"
>
2
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -700%; left: 0px;"
>
3
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -600%; left: 0px;"
>
4
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -500%; left: 0px;"
>
5
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -400%; left: 0px;"
>
6
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -300%; left: 0px;"
>
7
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -200%; left: 0px;"
>
8
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -100%; left: 0px;"
>
9
</span>
<span
class="ant-scroll-number-only-unit current"
> >
0 0
</span> </span>
@ -495,7 +387,6 @@ exports[`Badge should render when count is changed 3`] = `
> >
<span <span
class="ant-scroll-number-only-unit current" class="ant-scroll-number-only-unit current"
style=""
> >
1 1
</span> </span>
@ -579,60 +470,6 @@ exports[`Badge should render when count is changed 6`] = `
> >
0 0
</span> </span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: 100%; left: 0px;"
>
1
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: 200%; left: 0px;"
>
2
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: 300%; left: 0px;"
>
3
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: 400%; left: 0px;"
>
4
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: 500%; left: 0px;"
>
5
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: 600%; left: 0px;"
>
6
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: 700%; left: 0px;"
>
7
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: 800%; left: 0px;"
>
8
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: 900%; left: 0px;"
>
9
</span>
</span> </span>
</bdi> </bdi>
</sup> </sup>