test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 03:59:01 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

fix(Progress): StrokeLinecap style (#46551)

Browse Source
This commit is contained in:
ZN1996 2023-12-22 10:26:23 +08:00 committed by GitHub
parent 4bfdfdccdb
commit 142b4d7b4e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/progress/Line.tsx
View File

@ -108,14 +108,16 @@ const Line: React.FC<LineProps> = (props) => {
warning.deprecated(!('strokeWidth' in props), 'strokeWidth', 'size'); warning.deprecated(!('strokeWidth' in props), 'strokeWidth', 'size');
} }
const percentBorderRadius = strokeLinecap === 'square' || strokeLinecap === 'butt' ? 0 : '100px';
const percentStyle: React.CSSProperties = { const percentStyle: React.CSSProperties = {
width: `100%`, width: `100%`,
height, height,
borderRadius, borderRadius,
clipPath: clipPath:
direction === 'rtl' direction === 'rtl'
? `inset(0 0 0 ${100 - validProgress(percent)}% round 100px)` ? `inset(0 0 0 ${100 - validProgress(percent)}% round ${percentBorderRadius})`
: `inset(0 ${100 - validProgress(percent)}% 0 0 round 100px)`, : `inset(0 ${100 - validProgress(percent)}% 0 0 round ${percentBorderRadius})`,
...backgroundProps, ...backgroundProps,
}; };
@ -127,8 +129,8 @@ const Line: React.FC<LineProps> = (props) => {
borderRadius, borderRadius,
clipPath: clipPath:
direction === 'rtl' direction === 'rtl'
? `inset(0 0 0 ${100 - validProgress(successPercent)}% round 100px)` ? `inset(0 0 0 ${100 - validProgress(successPercent)}% round ${percentBorderRadius})`
: `inset(0 ${100 - validProgress(successPercent)}% 0 0 round 100px)`, : `inset(0 ${100 - validProgress(successPercent)}% 0 0 round ${percentBorderRadius})`,
backgroundColor: success?.strokeColor, backgroundColor: success?.strokeColor,
}; };

2
components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -2410,7 +2410,7 @@ Array [
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width: 100%; height: 8px; border-radius: 0; clip-path: inset(0 25% 0 0 round 100px);" style="width: 100%; height: 8px; border-radius: 0; clip-path: inset(0 25% 0 0 round 0);"
/> />
</div> </div>
</div> </div>

2
components/progress/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -2318,7 +2318,7 @@ Array [
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width:100%;height:8px;border-radius:0;clip-path:inset(0 25% 0 0 round 100px)" style="width:100%;height:8px;border-radius:0;clip-path:inset(0 25% 0 0 round 0)"
/> />
</div> </div>
</div> </div>