fix: round progress support strokeColor #238

vueComponent · Oct 30, 2018 · 83d18c1 · 83d18c1
1 parent 75ca643
commit 83d18c1
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 14 deletions.
diff --git a/components/progress/__tests__/__snapshots__/demo.test.js.snap b/components/progress/__tests__/__snapshots__/demo.test.js.snap
@@ -9,7 +9,7 @@ exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
        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>
         <path d="M 50,50 m 0,-47
        a 47,47 0 1 1 0,94
-       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>
+       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>
       </svg><span class="ant-progress-text">75%</span></div>
   </div>
   <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`] = `
        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>
         <path d="M 50,50 m 0,-47
        a 47,47 0 1 1 0,94
-       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>
+       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>
       </svg><span class="ant-progress-text"><i class="anticon anticon-cross"></i></span></div>
   </div>
   <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`] = `
        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>
         <path d="M 50,50 m 0,-47
        a 47,47 0 1 1 0,94
-       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>
+       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>
       </svg><span class="ant-progress-text"><i class="anticon anticon-check"></i></span></div>
   </div>
 </div>
@@ -57,7 +57,7 @@ exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
        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>
         <path d="M 50,50 m 0,-47
        a 47,47 0 1 1 0,94
-       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>
+       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>
       </svg><span class="ant-progress-text">30%</span></div>
   </div>
   <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`] = `
        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>
         <path d="M 50,50 m 0,-47
        a 47,47 0 1 1 0,94
-       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>
+       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>
       </svg><span class="ant-progress-text"><i class="anticon anticon-cross"></i></span></div>
   </div>
   <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`] = `
        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>
         <path d="M 50,50 m 0,-47
        a 47,47 0 1 1 0,94
-       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>
+       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>
       </svg><span class="ant-progress-text"><i class="anticon anticon-check"></i></span></div>
   </div>
 </div>
@@ -92,7 +92,7 @@ exports[`renders ./components/progress/demo/dashboard.md correctly 1`] = `
        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>
         <path d="M 50,50 m 0,47
        a 47,47 0 1 1 0,-94
-       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>
+       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>
       </svg><span class="ant-progress-text">75%</span></div>
   </div>
 </div>
@@ -122,7 +122,7 @@ exports[`renders ./components/progress/demo/format.md correctly 1`] = `
        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>
         <path d="M 50,50 m 0,-47
        a 47,47 0 1 1 0,94
-       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>
+       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>
       </svg><span class="ant-progress-text">75 Days</span></div>
   </div>
   <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`] = `
        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>
         <path d="M 50,50 m 0,-47
        a 47,47 0 1 1 0,94
-       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>
+       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>
       </svg><span class="ant-progress-text">Done</span></div>
   </div>
 </div>
@@ -247,7 +247,7 @@ exports[`renders ./components/progress/demo/linecap.md correctly 1`] = `
        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>
         <path d="M 50,50 m 0,-47
        a 47,47 0 1 1 0,94
-       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>
+       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>
       </svg><span class="ant-progress-text">75%</span></div>
   </div>
   <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`] = `
        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>
         <path d="M 50,50 m 0,47
        a 47,47 0 1 1 0,-94
-       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>
+       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>
       </svg><span class="ant-progress-text">75%</span></div>
   </div>
 </div>

diff --git a/components/progress/__tests__/__snapshots__/index.test.js.snap b/components/progress/__tests__/__snapshots__/index.test.js.snap
@@ -1,5 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Progress render format 1`] = `
+<div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
+  <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
+      <path d="M 50,50 m 0,-47
+       a 47,47 0 1 1 0,94
+       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>
+      <path d="M 50,50 m 0,-47
+       a 47,47 0 1 1 0,94
+       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>
+    </svg><span class="ant-progress-text">50%</span></div>
+</div>
+`;
+
 exports[`Progress render negetive progress 1`] = `
 <div class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default">
   <div>

diff --git a/components/progress/__tests__/index.test.js b/components/progress/__tests__/index.test.js
@@ -84,4 +84,18 @@ describe('Progress', () => {
       expect(wrapper.html()).toMatchSnapshot()
     })
   })
+
+  it('render format', async () => {
+    const wrapper = mount(Progress, {
+      propsData: {
+        percent: 50,
+        type: 'circle',
+        strokeColor: 'red',
+      },
+      sync: false,
+    })
+    await asyncExpect(() => {
+      expect(wrapper.html()).toMatchSnapshot()
+    })
+  })
 })
diff --git a/components/progress/progress.jsx b/components/progress/progress.jsx
@@ -123,7 +123,7 @@ export default {
             percent={validProgress(percent)}
             strokeWidth={circleWidth}
             trailWidth={circleWidth}
-            strokeColor={statusColorMap[progressStatus]}
+            strokeColor={strokeColor || statusColorMap[progressStatus]}
             strokeLinecap={strokeLinecap}
             trailColor={trailColor}
             prefixCls={prefixCls}

diff --git a/components/vc-progress/src/Circle.js b/components/vc-progress/src/Circle.js
@@ -18,7 +18,7 @@ const Circle = {
   props: initDefaultProps(circlePropTypes, circleDefaultProps),
   methods: {
     getPathStyles () {
-      const { percent, strokeWidth, gapDegree = 0, gapPosition } = this.$props
+      const { percent, strokeWidth, strokeColor, gapDegree = 0, gapPosition } = this.$props
       const radius = 50 - (strokeWidth / 2)
       let beginPositionX = 0
       let beginPositionY = -radius
@@ -53,6 +53,7 @@ const Circle = {
         transition: 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s',
       }
       const strokePathStyle = {
+        stroke: strokeColor,
         strokeDasharray: `${(percent / 100) * (len - gapDegree)}px ${len}px`,
         strokeDashoffset: `-${gapDegree / 2}px`,
         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 = {
       attrs: {
         'd': pathString,
         'stroke-linecap': strokeLinecap,
-        'stroke': strokeColor,
         'stroke-width': percent === 0 ? 0 : strokeWidth,
         'fill-opacity': '0',
       },