Add use case of gapDegree and test cases. Also doc error correction

ant-design · Mar 21, 2020 · a201ce5 · a201ce5
1 parent c89ae5d
commit a201ce5
Show file tree

Hide file tree

Showing 6 changed files with 239 additions and 44 deletions.
diff --git 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"

diff --git 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"
 >

diff --git 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)',

diff --git 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);
 ```
diff --git 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 | 75 |
+| 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
@@ -52,5 +52,5 @@ title: Progress
 | --- | --- | --- | --- |
 | width | 仪表盘进度条画布宽度，单位 px | number | 132 |
 | strokeWidth | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 |
-| gapDegree | 仪表盘进度条缺口角度，可取值 0 ~ 360 | number | 75 |
+| gapDegree | 仪表盘进度条缺口角度，可取值 0 ~ 295 | number | 75 |
 | gapPosition | 仪表盘进度条缺口位置 | `top` \| `bottom` \| `left` \| `right` | `bottom` |