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
ant-design · Mar 22, 2020 · 0519111 · 0519111
1 parent 3dd2332
commit 0519111
Show file tree

Hide file tree

Showing 9 changed files with 253 additions and 54 deletions.
diff --git 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]';

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

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