Fix invalid progress like <Progress precent={120} />

components/progress/__tests__/__snapshots__/index.test.js.snap

@@ -0,0 +1,85 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+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>
+    <div
+      class="ant-progress-outer"
+    >
+      <div
+        class="ant-progress-inner"
+      >
+        <div
+          class="ant-progress-bg"
+          style="width: 0%; height: 8px;"
+        />
+      </div>
+    </div>
+    <span
+      class="ant-progress-text"
+    >
+      -20%
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Progress render negetive successPercent 1`] = `
+<div
+  class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
+>
+  <div>
+    <div
+      class="ant-progress-outer"
+    >
+      <div
+        class="ant-progress-inner"
+      >
+        <div
+          class="ant-progress-bg"
+          style="width: 50%; height: 8px;"
+        />
+        <div
+          class="ant-progress-success-bg"
+          style="width: 0%; height: 8px;"
+        />
+      </div>
+    </div>
+    <span
+      class="ant-progress-text"
+    >
+      50%
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Progress render out-of-range progress 1`] = `
+<div
+  class="ant-progress ant-progress-line ant-progress-status-success ant-progress-show-info ant-progress-default"
+>
+  <div>
+    <div
+      class="ant-progress-outer"
+    >
+      <div
+        class="ant-progress-inner"
+      >
+        <div
+          class="ant-progress-bg"
+          style="width: 100%; height: 8px;"
+        />
+      </div>
+    </div>
+    <span
+      class="ant-progress-text"
+    >
+      <i
+        class="anticon anticon-check-circle"
+      />
+    </span>
+  </div>
+</div>
+`;

components/progress/__tests__/index.test.js

@@ -10,4 +10,19 @@ describe('Progress', () => {
     wrapper.setProps({ percent: 50, successPercent: 100 });
     expect(wrapper.find('.ant-progress-status-success')).toHaveLength(1);
   });
+
+  it('render out-of-range progress', async () => {
+    const wrapper = mount(<Progress percent={120} />);
+    expect(wrapper.render()).toMatchSnapshot();
+  });
+
+  it('render negetive progress', async () => {
+    const wrapper = mount(<Progress percent={-20} />);
+    expect(wrapper.render()).toMatchSnapshot();
+  });
+
+  it('render negetive successPercent', async () => {
+    const wrapper = mount(<Progress percent={50} successPercent={-20} />);
+    expect(wrapper.render()).toMatchSnapshot();
+  });
 });

components/progress/progress.tsx

@@ -31,6 +31,15 @@ export interface ProgressProps {
   size?: ProgressSize;
 }
 
+const validProgress = (progress: number | undefined) => {
+  if (!progress || progress < 0) {
+    return 0;
+  } else if (progress > 100) {
+    return 100;
+  }
+  return progress;
+};
+
 export default class Progress extends React.Component<ProgressProps, {}> {
   static Line: any;
   static Circle: any;
@@ -84,11 +93,11 @@ export default class Progress extends React.Component<ProgressProps, {}> {
 
     if (type === 'line') {
       const percentStyle = {
-        width: `${percent}%`,
+        width: `${validProgress(percent)}%`,
         height: strokeWidth || (size === 'small' ? 6 : 8),
       };
       const successPercentStyle = {
-        width: `${successPercent}%`,
+        width: `${validProgress(successPercent)}%`,
         height: strokeWidth || (size === 'small' ? 6 : 8),
       };
       const successSegment = successPercent !== undefined
@@ -118,7 +127,7 @@ export default class Progress extends React.Component<ProgressProps, {}> {
       progress = (
         <div className={`${prefixCls}-inner`} style={circleStyle}>
           <Circle
-            percent={percent}
+            percent={validProgress(percent)}
             strokeWidth={circleWidth}
             trailWidth={circleWidth}
             strokeColor={(statusColorMap as any)[progressStatus]}