diff --git a/components/progress/Circle.tsx b/components/progress/Circle.tsx index 446ee9118d..203f53d6a8 100644 --- a/components/progress/Circle.tsx +++ b/components/progress/Circle.tsx @@ -48,7 +48,15 @@ const Circle: React.SFC = props => { }; const circleWidth = strokeWidth || 6; const gapPos = gapPosition || (type === 'dashboard' && 'bottom') || 'top'; - const gapDeg = gapDegree || (type === 'dashboard' ? 75 : undefined); + // Support gapDeg = 0 when type = 'dashboard' + let gapDeg; + if (gapDegree || gapDegree === 0) { + gapDeg = gapDegree; + } + else if (type === 'dashboard') { + gapDeg = 75; + } + // using className to style stroke color const strokeColor = getStrokeColor(props) as string | string[] | object; const isGradient = Object.prototype.toString.call(strokeColor) === '[object Object]'; diff --git a/components/progress/__tests__/__snapshots__/demo.test.js.snap b/components/progress/__tests__/__snapshots__/demo.test.js.snap index 8749dfef6b..d93121e903 100644 --- a/components/progress/__tests__/__snapshots__/demo.test.js.snap +++ b/components/progress/__tests__/__snapshots__/demo.test.js.snap @@ -433,45 +433,88 @@ exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = ` `; exports[`renders ./components/progress/demo/dashboard.md correctly 1`] = ` -
+
- - + - + - - + + + 75% + +
+
+
+
- 75% - + + + + + + 75% + +
`; @@ -696,65 +739,6 @@ exports[`renders ./components/progress/demo/gradient-line.md correctly 1`] = `
-
- - - - - - - - - - - - 90% - -
-
-
+ + + 90% + +
+
+
+
+ + + + + + + + + diff --git a/components/progress/__tests__/__snapshots__/index.test.js.snap b/components/progress/__tests__/__snapshots__/index.test.js.snap index 80afc737e3..e6d329e54e 100644 --- a/components/progress/__tests__/__snapshots__/index.test.js.snap +++ b/components/progress/__tests__/__snapshots__/index.test.js.snap @@ -1,5 +1,137 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Progress render dashboard 295 gapDegree 1`] = ` +
+
+ + + + + + 0% + +
+
+`; + +exports[`Progress render dashboard 296 gapDegree 1`] = ` +
+
+ + + + + + 0% + +
+
+`; + +exports[`Progress render dashboard zero gapDegree 1`] = ` +
+
+ + + + + + 0% + +
+
+`; + exports[`Progress render format 1`] = `
`; -exports[`Progress render negetive progress 1`] = ` +exports[`Progress render negative progress 1`] = `
@@ -54,7 +186,7 @@ exports[`Progress render negetive progress 1`] = `
`; -exports[`Progress render negetive successPercent 1`] = ` +exports[`Progress render negative successPercent 1`] = `
@@ -240,7 +372,6 @@ exports[`Progress render strokeColor 1`] = ` exports[`Progress render strokeColor 2`] = ` { expect(wrapper.render()).toMatchSnapshot(); }); - it('render negetive progress', () => { + it('render negative progress', () => { const wrapper = mount(); expect(wrapper.render()).toMatchSnapshot(); }); - it('render negetive successPercent', () => { + it('render negative successPercent', () => { const wrapper = mount(); expect(wrapper.render()).toMatchSnapshot(); }); @@ -81,6 +81,21 @@ describe('Progress', () => { expect(wrapper.render()).toMatchSnapshot(); }); + it('render dashboard zero gapDegree', () => { + const wrapper = mount(); + expect(wrapper.render()).toMatchSnapshot(); + }); + + it('render dashboard 295 gapDegree', () => { + const wrapper = mount(); + expect(wrapper.render()).toMatchSnapshot(); + }); + + it('render dashboard 296 gapDegree', () => { + const wrapper = mount(); + expect(wrapper.render()).toMatchSnapshot(); + }); + it('get correct line-gradient', () => { expect(handleGradient({ from: 'test', to: 'test' }).backgroundImage).toBe( 'linear-gradient(to right, test, test)', diff --git a/components/progress/demo/dashboard.md b/components/progress/demo/dashboard.md index 37b2240d7a..ba1738ae23 100644 --- a/components/progress/demo/dashboard.md +++ b/components/progress/demo/dashboard.md @@ -7,14 +7,19 @@ title: ## zh-CN -通过设置 `type=dashboard`，可以很方便地实现仪表盘样式的进度条。 +通过设置 `type=dashboard`，可以很方便地实现仪表盘样式的进度条。若想要修改缺口的角度，可以设置 `gapDegree` 为你想要的值。 ## en-US -By setting `type=dashboard`, you can get a dashboard style of progress easily. +By setting `type=dashboard`, you can get a dashboard style of progress easily. Modify `gapDegree` to set the degree of gap. ```jsx import { Progress } from 'antd'; -ReactDOM.render(, mountNode); +ReactDOM.render( +
+ + +
+, mountNode); ``` diff --git a/components/progress/demo/segment.md b/components/progress/demo/segment.md index 231b05e2eb..d37e718664 100644 --- a/components/progress/demo/segment.md +++ b/components/progress/demo/segment.md @@ -7,11 +7,11 @@ title: ## zh-CN -标准的进度条。 +标准的进度条。`type="circle|dashboard"` 时不支持分段颜色。 ## en-US -A standard progress bar. +A standard progress bar. Doesn't support trail color when `type="circle|dashboard"`. ```jsx import { Tooltip, Progress } from 'antd'; diff --git a/components/progress/index.en-US.md b/components/progress/index.en-US.md index b1d42b3473..7405674ce9 100644 --- a/components/progress/index.en-US.md +++ b/components/progress/index.en-US.md @@ -51,5 +51,5 @@ Properties that shared by all types. | --- | --- | --- | --- | | width | to set the canvas width of the dashboard progress, unit: `px` | number | 132 | | strokeWidth | to set the width of the dashboard progress, unit: percentage of the canvas width | number | 6 | -| gapDegree | the gap degree of half circle, 0 ~ 360 | number | 0 | -| gapPosition | the gap position, options: `top` `bottom` `left` `right` | string | `top` | +| gapDegree | the gap degree of half circle, 0 ~ 295 | number | 75 | +| gapPosition | the gap position, options: `top` `bottom` `left` `right` | string | `bottom` | diff --git a/components/progress/index.zh-CN.md b/components/progress/index.zh-CN.md index 4ba5245676..219ce14620 100644 --- a/components/progress/index.zh-CN.md +++ b/components/progress/index.zh-CN.md @@ -52,5 +52,5 @@ title: Progress | --- | --- | --- | --- | | width | 仪表盘进度条画布宽度，单位 px | number | 132 | | strokeWidth | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | -| gapDegree | 仪表盘进度条缺口角度，可取值 0 ~ 360 | number | 0 | -| gapPosition | 仪表盘进度条缺口位置 | `top` \| `bottom` \| `left` \| `right` | `top` | +| gapDegree | 仪表盘进度条缺口角度，可取值 0 ~ 295 | number | 75 | +| gapPosition | 仪表盘进度条缺口位置 | `top` \| `bottom` \| `left` \| `right` | `bottom` | diff --git a/components/progress/progress.tsx b/components/progress/progress.tsx index 056848bd84..f4bcb662d7 100644 --- a/components/progress/progress.tsx +++ b/components/progress/progress.tsx @@ -49,7 +49,7 @@ export default class Progress extends React.Component { // null for different theme definition trailColor: null, size: 'default', - gapDegree: 0, + gapDegree: undefined, strokeLinecap: 'round', };