fix: gapDegree=0 in Dashboard progress is now working (#22462)

* fix: gapDegree=0 in Dashboard progress is now working * update jest snapshot for Progress * Add use case of gapDegree and test cases. Also doc error correction
5 years ago · 0519111a99
9 changed files with 253 additions and 54 deletions
--- a/components/progress/Circle.tsx
+++ b/components/progress/Circle.tsx
@ -48,7 +48,15 @@ const Circle: React.SFC<CircleProps> = 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]';
--- 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`] = `
-<div
-  class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
->
+<div>
  <div
-    class="ant-progress-inner"
-    style="width:120px;height:120px;font-size:24px"
+    class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
  >
-    <svg
-      class="ant-progress-circle "
-      viewBox="0 0 100 100"
+    <div
+      class="ant-progress-inner"
+      style="width:120px;height:120px;font-size:24px"
    >
-      <path
-        class="ant-progress-circle-trail"
-        d="M 50,50 m 0,47
+      <svg
+        class="ant-progress-circle "
+        viewBox="0 0 100 100"
+      >
+        <path
+          class="ant-progress-circle-trail"
+          d="M 50,50 m 0,47
   a 47,47 0 1 1 0,-94
   a 47,47 0 1 1 0,94"
-        fill-opacity="0"
-        stroke-linecap="round"
-        stroke-width="6"
-        style="stroke-dasharray:220.30970943744057px 295.3097094374406px;stroke-dashoffset:-37.5px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
-      />
-      <path
-        class="ant-progress-circle-path"
-        d="M 50,50 m 0,47
+          fill-opacity="0"
+          stroke-linecap="round"
+          stroke-width="6"
+          style="stroke-dasharray:220.30970943744057px 295.3097094374406px;stroke-dashoffset:-37.5px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
+        />
+        <path
+          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"
-        fill-opacity="0"
-        stroke=""
-        stroke-linecap="round"
-        stroke-width="6"
-        style="stroke-dasharray:165.23228207808043px 295.3097094374406px;stroke-dashoffset:-37.5px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
-      />
-    </svg>
-    <span
-      class="ant-progress-text"
-      title="75%"
+          fill-opacity="0"
+          stroke=""
+          stroke-linecap="round"
+          stroke-width="6"
+          style="stroke-dasharray:165.23228207808043px 295.3097094374406px;stroke-dashoffset:-37.5px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
+        />
+      </svg>
+      <span
+        class="ant-progress-text"
+        title="75%"
+      >
+        75%
+      </span>
+    </div>
+  </div>
+  <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"
    >
-      75%
-    </span>
+      <svg
+        class="ant-progress-circle "
+        viewBox="0 0 100 100"
+      >
+        <path
+          class="ant-progress-circle-trail"
+          d="M 50,50 m 0,47
+   a 47,47 0 1 1 0,-94
+   a 47,47 0 1 1 0,94"
+          fill-opacity="0"
+          stroke-linecap="round"
+          stroke-width="6"
+          style="stroke-dasharray:265.3097094374406px 295.3097094374406px;stroke-dashoffset:-15px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
+        />
+        <path
+          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"
+          fill-opacity="0"
+          stroke=""
+          stroke-linecap="round"
+          stroke-width="6"
+          style="stroke-dasharray:198.98228207808043px 295.3097094374406px;stroke-dashoffset:-15px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
+        />
+      </svg>
+      <span
+        class="ant-progress-text"
+        title="75%"
+      >
+        75%
+      </span>
+    </div>
  </div>
 </div>
 `;
@ -707,7 +750,7 @@ exports[`renders ./components/progress/demo/gradient-line.md correctly 1`] = `
      >
        <defs>
          <linearGradient
-            id="ant-progress-gradient-10"
+            id="ant-progress-gradient-11"
            x1="100%"
            x2="0%"
            y1="0%"
@ -739,7 +782,7 @@ exports[`renders ./components/progress/demo/gradient-line.md correctly 1`] = `
   a 47,47 0 1 1 0,94
   a 47,47 0 1 1 0,-94"
          fill-opacity="0"
-          stroke="url(#ant-progress-gradient-10)"
+          stroke="url(#ant-progress-gradient-11)"
          stroke-linecap="round"
          stroke-width="6"
          style="stroke:[object Object];stroke-dasharray:265.77873849369655px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
@ -766,7 +809,7 @@ exports[`renders ./components/progress/demo/gradient-line.md correctly 1`] = `
      >
        <defs>
          <linearGradient
-            id="ant-progress-gradient-11"
+            id="ant-progress-gradient-12"
            x1="100%"
            x2="0%"
            y1="0%"
@ -798,7 +841,7 @@ exports[`renders ./components/progress/demo/gradient-line.md correctly 1`] = `
   a 47,47 0 1 1 0,94
   a 47,47 0 1 1 0,-94"
          fill-opacity="0"
-          stroke="url(#ant-progress-gradient-11)"
+          stroke="url(#ant-progress-gradient-12)"
          stroke-linecap="round"
          stroke-width="6"
          style="stroke:[object Object];stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
--- 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`] = `
+<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
+      class="ant-progress-circle "
+      viewBox="0 0 100 100"
+    >
+      <path
+        class="ant-progress-circle-trail"
+        d="M 50,50 m 0,47
+   a 47,47 0 1 1 0,-94
+   a 47,47 0 1 1 0,94"
+        fill-opacity="0"
+        stroke-linecap="round"
+        stroke-width="6"
+        style="stroke-dasharray: 0.3097094374405742px 295.3097094374406px; stroke-dashoffset: -147.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"
+      />
+      <path
+        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"
+        fill-opacity="0"
+        stroke=""
+        stroke-linecap="round"
+        stroke-width="0"
+        style="stroke-dasharray: 0px 295.3097094374406px; stroke-dashoffset: -147.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"
+      />
+    </svg>
+    <span
+      class="ant-progress-text"
+      title="0%"
+    >
+      0%
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Progress render dashboard 296 gapDegree 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
+      class="ant-progress-circle "
+      viewBox="0 0 100 100"
+    >
+      <path
+        class="ant-progress-circle-trail"
+        d="M 50,50 m 0,47
+   a 47,47 0 1 1 0,-94
+   a 47,47 0 1 1 0,94"
+        fill-opacity="0"
+        stroke-linecap="round"
+        stroke-width="6"
+        style="stroke-dasharray: -0.6902905625594258px 295.3097094374406px; stroke-dashoffset: -148px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"
+      />
+      <path
+        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"
+        fill-opacity="0"
+        stroke=""
+        stroke-linecap="round"
+        stroke-width="0"
+        style="stroke-dasharray: 0px 295.3097094374406px; stroke-dashoffset: -148px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"
+      />
+    </svg>
+    <span
+      class="ant-progress-text"
+      title="0%"
+    >
+      0%
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Progress render dashboard zero gapDegree 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
+      class="ant-progress-circle "
+      viewBox="0 0 100 100"
+    >
+      <path
+        class="ant-progress-circle-trail"
+        d="M 50,50 m 0,47
+   a 47,47 0 1 1 0,-94
+   a 47,47 0 1 1 0,94"
+        fill-opacity="0"
+        stroke-linecap="round"
+        stroke-width="6"
+        style="stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"
+      />
+      <path
+        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"
+        fill-opacity="0"
+        stroke=""
+        stroke-linecap="round"
+        stroke-width="0"
+        style="stroke-dasharray: 0px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"
+      />
+    </svg>
+    <span
+      class="ant-progress-text"
+      title="0%"
+    >
+      0%
+    </span>
+  </div>
+</div>
+`;
+
 exports[`Progress render format 1`] = `
 <div
  class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
@ -29,7 +161,7 @@ exports[`Progress render format 1`] = `
 </div>
 `;

-exports[`Progress render negetive progress 1`] = `
+exports[`Progress render negative progress 1`] = `
 <div
  class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
 >
@ -54,7 +186,7 @@ exports[`Progress render negetive progress 1`] = `
 </div>
 `;

-exports[`Progress render negetive successPercent 1`] = `
+exports[`Progress render negative successPercent 1`] = `
 <div
  class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
 >
@ -240,7 +372,6 @@ exports[`Progress render strokeColor 1`] = `

 exports[`Progress render strokeColor 2`] = `
 <Progress
-  gapDegree={0}
  percent={50}
  showInfo={true}
  size="default"
@ -258,7 +389,6 @@ exports[`Progress render strokeColor 2`] = `
    className="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
  >
    <Line
-      gapDegree={0}
      percent={50}
      prefixCls="ant-progress"
      showInfo={true}
@ -305,7 +435,6 @@ exports[`Progress render strokeColor 2`] = `

 exports[`Progress render strokeColor 3`] = `
 <Progress
-  gapDegree={0}
  percent={50}
  showInfo={true}
  size="default"
@ -323,7 +452,6 @@ exports[`Progress render strokeColor 3`] = `
    className="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
  >
    <Line
-      gapDegree={0}
      percent={50}
      prefixCls="ant-progress"
      showInfo={true}
--- a/components/progress/tests/index.test.js
+++ b/components/progress/tests/index.test.js
@ -30,12 +30,12 @@ describe('Progress', () => {
    expect(wrapper.render()).toMatchSnapshot();
  });

-  it('render negetive progress', () => {
+  it('render negative progress', () => {
    const wrapper = mount(<Progress percent={-20} />);
    expect(wrapper.render()).toMatchSnapshot();
  });

-  it('render negetive successPercent', () => {
+  it('render negative successPercent', () => {
    const wrapper = mount(<Progress percent={50} successPercent={-20} />);
    expect(wrapper.render()).toMatchSnapshot();
  });
@ -81,6 +81,21 @@ describe('Progress', () => {
    expect(wrapper.render()).toMatchSnapshot();
  });

+  it('render dashboard zero gapDegree', () => {
+    const wrapper = mount(<Progress type="dashboard" gapDegree={0} />);
+    expect(wrapper.render()).toMatchSnapshot();
+  });
+
+  it('render dashboard 295 gapDegree', () => {
+    const wrapper = mount(<Progress type="dashboard" gapDegree={295} />);
+    expect(wrapper.render()).toMatchSnapshot();
+  });
+
+  it('render dashboard 296 gapDegree', () => {
+    const wrapper = mount(<Progress type="dashboard" gapDegree={296} />);
+    expect(wrapper.render()).toMatchSnapshot();
+  });
+
  it('get correct line-gradient', () => {
    expect(handleGradient({ from: 'test', to: 'test' }).backgroundImage).toBe(
      'linear-gradient(to right, test, test)',
--- 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(<Progress type="dashboard" percent={75} />, mountNode);
+ReactDOM.render(
+  <div>
+    <Progress type="dashboard" percent={75} />
+    <Progress type="dashboard" percent={75} gapDegree={30} />
+  </div>
+, mountNode);
 ```
--- 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';
--- 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` |
--- 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` |
--- a/components/progress/progress.tsx
+++ b/components/progress/progress.tsx
@ -49,7 +49,7 @@ export default class Progress extends React.Component<ProgressProps> {
    // null for different theme definition
    trailColor: null,
    size: 'default',
-    gapDegree: 0,
+    gapDegree: undefined,
    strokeLinecap: 'round',
  };