Skip to content

Commit 83d18c1

Browse files
wangxueliangwangxueliang
committed
fix: round progress support strokeColor #238 
1 parent 75ca643 commit 83d18c1

File tree

5 files changed

+41
-14
lines changed

5 files changed

+41
-14
lines changed

‎components/progress/__tests__/__snapshots__/demo.test.js.snap

+11-11
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
99
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
1010
<path d="M 50,50 m 0,-47
1111
a 47,47 0 1 1 0,94
12-
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke="#108ee9" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 221.48228207808043px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
12+
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 221.48228207808043px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
1313
</svg><span class="ant-progress-text">75%</span></div>
1414
</div>
1515
<div class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info ant-progress-default">
@@ -19,7 +19,7 @@ exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
1919
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
2020
<path d="M 50,50 m 0,-47
2121
a 47,47 0 1 1 0,94
22-
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke="#ff5500" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 206.7167966062084px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
22+
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #ff5500; stroke-dasharray: 206.7167966062084px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
2323
</svg><span class="ant-progress-text"><i class="anticon anticon-cross"></i></span></div>
2424
</div>
2525
<div class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default">
@@ -29,7 +29,7 @@ exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
2929
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
3030
<path d="M 50,50 m 0,-47
3131
a 47,47 0 1 1 0,94
32-
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke="#87d068" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
32+
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #87d068; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
3333
</svg><span class="ant-progress-text"><i class="anticon anticon-check"></i></span></div>
3434
</div>
3535
</div>
@@ -57,7 +57,7 @@ exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
5757
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
5858
<path d="M 50,50 m 0,-47
5959
a 47,47 0 1 1 0,94
60-
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke="#108ee9" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 88.59291283123217px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
60+
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 88.59291283123217px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
6161
</svg><span class="ant-progress-text">30%</span></div>
6262
</div>
6363
<div class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info ant-progress-default">
@@ -67,7 +67,7 @@ exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
6767
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
6868
<path d="M 50,50 m 0,-47
6969
a 47,47 0 1 1 0,94
70-
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke="#ff5500" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 206.7167966062084px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
70+
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #ff5500; stroke-dasharray: 206.7167966062084px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
7171
</svg><span class="ant-progress-text"><i class="anticon anticon-cross"></i></span></div>
7272
</div>
7373
<div class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default">
@@ -77,7 +77,7 @@ exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
7777
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
7878
<path d="M 50,50 m 0,-47
7979
a 47,47 0 1 1 0,94
80-
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke="#87d068" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
80+
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #87d068; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
8181
</svg><span class="ant-progress-text"><i class="anticon anticon-check"></i></span></div>
8282
</div>
8383
</div>
@@ -92,7 +92,7 @@ exports[`renders ./components/progress/demo/dashboard.md correctly 1`] = `
9292
a 47,47 0 1 1 0,94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray: 220.30970943744057px 295.3097094374406px; stroke-dashoffset: -37.5px;"></path>
9393
<path d="M 50,50 m 0,47
9494
a 47,47 0 1 1 0,-94
95-
a 47,47 0 1 1 0,94" stroke-linecap="round" stroke="#108ee9" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 165.23228207808043px 295.3097094374406px; stroke-dashoffset: -37.5px;"></path>
95+
a 47,47 0 1 1 0,94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 165.23228207808043px 295.3097094374406px; stroke-dashoffset: -37.5px;"></path>
9696
</svg><span class="ant-progress-text">75%</span></div>
9797
</div>
9898
</div>
@@ -122,7 +122,7 @@ exports[`renders ./components/progress/demo/format.md correctly 1`] = `
122122
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
123123
<path d="M 50,50 m 0,-47
124124
a 47,47 0 1 1 0,94
125-
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke="#108ee9" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 221.48228207808043px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
125+
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 221.48228207808043px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
126126
</svg><span class="ant-progress-text">75 Days</span></div>
127127
</div>
128128
<div class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default">
@@ -132,7 +132,7 @@ exports[`renders ./components/progress/demo/format.md correctly 1`] = `
132132
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
133133
<path d="M 50,50 m 0,-47
134134
a 47,47 0 1 1 0,94
135-
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke="#87d068" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
135+
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #87d068; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
136136
</svg><span class="ant-progress-text">Done</span></div>
137137
</div>
138138
</div>
@@ -247,7 +247,7 @@ exports[`renders ./components/progress/demo/linecap.md correctly 1`] = `
247247
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
248248
<path d="M 50,50 m 0,-47
249249
a 47,47 0 1 1 0,94
250-
a 47,47 0 1 1 0,-94" stroke-linecap="square" stroke="#108ee9" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 221.48228207808043px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
250+
a 47,47 0 1 1 0,-94" stroke-linecap="square" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 221.48228207808043px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
251251
</svg><span class="ant-progress-text">75%</span></div>
252252
</div>
253253
<div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
@@ -257,7 +257,7 @@ exports[`renders ./components/progress/demo/linecap.md correctly 1`] = `
257257
a 47,47 0 1 1 0,94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray: 220.30970943744057px 295.3097094374406px; stroke-dashoffset: -37.5px;"></path>
258258
<path d="M 50,50 m 0,47
259259
a 47,47 0 1 1 0,-94
260-
a 47,47 0 1 1 0,94" stroke-linecap="square" stroke="#108ee9" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 165.23228207808043px 295.3097094374406px; stroke-dashoffset: -37.5px;"></path>
260+
a 47,47 0 1 1 0,94" stroke-linecap="square" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 165.23228207808043px 295.3097094374406px; stroke-dashoffset: -37.5px;"></path>
261261
</svg><span class="ant-progress-text">75%</span></div>
262262
</div>
263263
</div>

‎components/progress/__tests__/__snapshots__/index.test.js.snap

+13
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,18 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`Progress render format 1`] = `
4+
<div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
5+
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
6+
<path d="M 50,50 m 0,-47
7+
a 47,47 0 1 1 0,94
8+
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
9+
<path d="M 50,50 m 0,-47
10+
a 47,47 0 1 1 0,94
11+
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: red; stroke-dasharray: 147.6548547187203px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
12+
</svg><span class="ant-progress-text">50%</span></div>
13+
</div>
14+
`;
15+
316
exports[`Progress render negetive progress 1`] = `
417
<div class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default">
518
<div>

‎components/progress/__tests__/index.test.js

+14
Original file line numberDiff line numberDiff line change
@@ -84,4 +84,18 @@ describe('Progress', () => {
8484
expect(wrapper.html()).toMatchSnapshot()
8585
})
8686
})
87+
88+
it('render format', async () => {
89+
const wrapper = mount(Progress, {
90+
propsData: {
91+
percent: 50,
92+
type: 'circle',
93+
strokeColor: 'red',
94+
},
95+
sync: false,
96+
})
97+
await asyncExpect(() => {
98+
expect(wrapper.html()).toMatchSnapshot()
99+
})
100+
})
87101
})

‎components/progress/progress.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ export default {
123123
percent={validProgress(percent)}
124124
strokeWidth={circleWidth}
125125
trailWidth={circleWidth}
126-
strokeColor={statusColorMap[progressStatus]}
126+
strokeColor={strokeColor || statusColorMap[progressStatus]}
127127
strokeLinecap={strokeLinecap}
128128
trailColor={trailColor}
129129
prefixCls={prefixCls}

‎components/vc-progress/src/Circle.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const Circle = {
1818
props: initDefaultProps(circlePropTypes, circleDefaultProps),
1919
methods: {
2020
getPathStyles () {
21-
const { percent, strokeWidth, gapDegree = 0, gapPosition } = this.$props
21+
const { percent, strokeWidth, strokeColor, gapDegree = 0, gapPosition } = this.$props
2222
const radius = 50 - (strokeWidth / 2)
2323
let beginPositionX = 0
2424
let beginPositionY = -radius
@@ -53,6 +53,7 @@ const Circle = {
5353
transition: 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s',
5454
}
5555
const strokePathStyle = {
56+
stroke: strokeColor,
5657
strokeDasharray: `${(percent / 100) * (len - gapDegree)}px ${len}px`,
5758
strokeDashoffset: `-${gapDegree / 2}px`,
5859
transition: 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s', // eslint-disable-line
@@ -83,7 +84,6 @@ const Circle = {
8384
attrs: {
8485
'd': pathString,
8586
'stroke-linecap': strokeLinecap,
86-
'stroke': strokeColor,
8787
'stroke-width': percent === 0 ? 0 : strokeWidth,
8888
'fill-opacity': '0',
8989
},

0 commit comments

Comments
 (0)