github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/vueComponent/ant-design-vue

pull/263/head
tangjinzhou 2018-11-10 22:59:29 +08:00
parent 34c880f8d0 83d18c1ac8
commit fc4ea7e118
5 changed files with 41 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
components/progress/__tests__/__snapshots__/demo.test.js.snap
View File

@ -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>

13
components/progress/__tests__/__snapshots__/index.test.js.snap
View File

@ -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>

14
components/progress/__tests__/index.test.js
View File

@ -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()
})
})
})

2
components/progress/progress.jsx
View File

@ -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}

4
components/vc-progress/src/Circle.js
View File

@ -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',
},