feat: progress support custom line-gradiend

tangjinzhou · tangjinzhou · commit f7ad7defe5ab · 2020-02-22T19:54:40.000+08:00
diff --git a/build/config.js b/build/config.js
@@ -1,5 +1,5 @@
 module.exports = {
   dev: {
-    componentName: 'popover', // dev components
+    componentName: 'progress', // dev components
   },
 };
diff --git a/components/progress/__tests__/__snapshots__/demo.test.js.snap b/components/progress/__tests__/__snapshots__/demo.test.js.snap
diff --git a/components/progress/__tests__/__snapshots__/index.test.js.snap b/components/progress/__tests__/__snapshots__/index.test.js.snap
@@ -4,11 +4,11 @@ exports[`Progress render format 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: 24;"><svg viewBox="0 0 100 100" 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" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; 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>
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; 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>
       <path d="M 50,50 m 0,-47
-       a 47,47 0 1 1 0,94
-       a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: red; stroke-dasharray: 147.6548547187203px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: red; stroke-dasharray: 147.6548547187203px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
     </svg><span title="50%" class="ant-progress-text">50%</span></div>
 </div>
 `;
@@ -31,7 +31,7 @@ exports[`Progress render negetive successPercent 1`] = `
     <div class="ant-progress-outer">
       <div class="ant-progress-inner">
         <div class="ant-progress-bg" style="width: 50%; height: 8px; border-radius: 100px;"></div>
-        <div class="ant-progress-success-bg" style="width: 0%; height: 8px; border-radius: 100px;"></div>
+        <div class="ant-progress-success-bg" style="width: 0%; height: 8px;"></div>
       </div>
     </div><span title="50%" class="ant-progress-text">50%</span>
   </div>
@@ -44,7 +44,7 @@ exports[`Progress render negetive successPercent 2`] = `
     <div class="ant-progress-outer">
       <div class="ant-progress-inner">
         <div class="ant-progress-bg" style="width: 50%; height: 8px; border-radius: 100px;"></div>
-        <div class="ant-progress-success-bg" style="width: 10%; height: 8px; border-radius: 100px;"></div>
+        <div class="ant-progress-success-bg" style="width: 10%; height: 8px;"></div>
       </div>
     </div><span title="50 10" class="ant-progress-text">50 10</span>
   </div>
diff --git a/components/progress/circle.jsx b/components/progress/circle.jsx
@@ -44,14 +44,21 @@ const Circle = {
     const circleWidth = strokeWidth || 6;
     const gapPos = gapPosition || (type === 'dashboard' && 'bottom') || 'top';
     const gapDeg = gapDegree || (type === 'dashboard' && 75);
+    const strokeColor = getStrokeColor(props);
+    const isGradient = Object.prototype.toString.call(strokeColor) === '[object Object]';
+
+    const wrapperClassName = {
+      [`${prefixCls}-inner`]: true,
+      [`${prefixCls}-circle-gradient`]: isGradient,
+    };
 
     return (
-      <div class={`${prefixCls}-inner`} style={circleStyle}>
+      <div class={wrapperClassName} style={circleStyle}>
         <VCCircle
           percent={getPercentage(props)}
           strokeWidth={circleWidth}
           trailWidth={circleWidth}
-          strokeColor={getStrokeColor(props)}
+          strokeColor={strokeColor}
           strokeLinecap={strokeLinecap}
           trailColor={trailColor}
           prefixCls={prefixCls}
diff --git a/components/progress/demo/gradient-line.md b/components/progress/demo/gradient-line.md
@@ -0,0 +1,47 @@
+<cn>
+#### 自定义进度条渐变色
+`linear-gradient` 的封装。推荐只传两种颜色。
+</cn>
+
+<us>
+#### Custom line gradient
+A package of `linear-gradient`. It is recommended to only pass two colors.
+</us>
+
+```tpl
+<template>
+  <div>
+    <a-progress
+      :strokeColor="{
+        '0%': '#108ee9',
+        '100%': '#87d068',
+      }"
+      :percent="99.9"
+    />
+    <a-progress
+      :strokeColor="{
+        from: '#108ee9',
+        to: '#87d068',
+      }"
+      :percent="99.9"
+      status="active"
+    />
+    <a-progress
+      type="circle"
+      :strokeColor="{
+        '0%': '#108ee9',
+        '100%': '#87d068',
+      }"
+      :percent="90"
+    />
+    <a-progress
+      type="circle"
+      :strokeColor="{
+        '0%': '#108ee9',
+        '100%': '#87d068',
+      }"
+      :percent="100"
+    />
+  </div>
+</template>
+```
diff --git a/components/progress/demo/index.vue b/components/progress/demo/index.vue
@@ -9,6 +9,7 @@ import Dynamic from './dynamic.md';
 import Dashboard from './dashboard.md';
 import Segment from './segment.md';
 import Linecap from './linecap.md';
+import GradientLine from './gradient-line';
 import CN from '../index.zh-CN.md';
 import US from '../index.en-US.md';
 
@@ -40,27 +41,17 @@ export default {
     return (
       <div>
         <md cn={md.cn} us={md.us} />
-        <br />
         <Line />
-        <br />
         <Circle />
-        <br />
         <LineMini />
-        <br />
         <CircleMini />
-        <br />
         <CircleDynamic />
-        <br />
         <Format />
-        <br />
         <Dynamic />
-        <br />
         <Dashboard />
-        <br />
         <Segment />
-        <br />
         <Linecap />
-        <br />
+        <GradientLine />
         <api>
           <template slot="cn">
             <CN />
diff --git a/components/progress/index.en-US.md b/components/progress/index.en-US.md
@@ -8,23 +8,25 @@ Properties that shared by all types.
 | format | template function of the content | function(percent, successPercent) \| v-slot:format="percent, successPercent" | `percent => percent + '%'` |
 | percent | to set the completion percentage | number | 0 |
 | showInfo | whether to display the progress value and the status icon | boolean | true |
-| status | to set the status of the Progress, options: `success` `exception` `active` `normal` | string | - |
+| status | to set the status of the Progress, options: `success` `exception` `normal` `active`(line only) | string | - |
 | strokeLinecap | to set the style of the progress linecap | Enum{ 'round', 'square' } | `round` |
 | strokeColor | color of progress bar | string | - |
 | successPercent | segmented success percent | number | 0 |
 
 ### `type="line"`
 
-| Property    | Description                                      | Type   | Default |
-| ----------- | ------------------------------------------------ | ------ | ------- |
-| strokeWidth | to set the width of the progress bar, unit: `px` | number | 10      |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| strokeWidth | to set the width of the progress bar, unit: `px` | number | 10 |  |
+| strokeColor | color of progress bar, render `linear-gradient` when passing an object | string \| { from: string; to: string; direction: string } | - | 1.5.0 |
 
 ### `type="circle"`
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| width | to set the canvas width of the circular progress, unit: `px` | number | 132 |
-| strokeWidth | to set the width of the circular progress, unit: percentage of the canvas width | number | 6 |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| width | to set the canvas width of the circular progress, unit: `px` | number | 132 |  |
+| strokeWidth | to set the width of the circular progress, unit: percentage of the canvas width | number | 6 |  |
+| strokeColor | color of circular progress, render `linear-gradient` when passing an object | string \| object | - | 1.5.0 |
 
 ### `type="dashboard"`
 
diff --git a/components/progress/index.zh-CN.md b/components/progress/index.zh-CN.md
@@ -8,23 +8,25 @@
 | format | 内容的模板函数 | function(percent, successPercent) \| v-slot:format="percent, successPercent" | `percent => percent + '%'` |
 | percent | 百分比 | number | 0 |
 | showInfo | 是否显示进度数值或状态图标 | boolean | true |
-| status | 状态，可选：`success` `exception` `active` `normal` | string | - |
+| status | 状态，可选：`success` `exception` `normal` `active`(仅限 line) | string | - |
 | strokeLinecap |  | Enum{ 'round', 'square' } | `round` |
 | strokeColor | 进度条的色彩 | string | - |
 | successPercent | 已完成的分段百分比 | number | 0 |
 
 ### `type="line"`
 
-| 属性        | 说明                    | 类型   | 默认值 |
-| ----------- | ----------------------- | ------ | ------ |
-| strokeWidth | 进度条线的宽度，单位 px | number | 10     |
+| 属性 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| strokeWidth | 进度条线的宽度，单位 px | number | 10 |  |
+| strokeColor | 进度条的色彩，传入 object 时为渐变 | string \| { from: string; to: string; direction: string } | - | 1.5.0 |
 
 ### `type="circle"`
 
-| 属性        | 说明                                             | 类型   | 默认值 |
-| ----------- | ------------------------------------------------ | ------ | ------ |
-| width       | 圆形进度条画布宽度，单位 px                      | number | 132    |
-| strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6      |
+| 属性 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| width | 圆形进度条画布宽度，单位 px | number | 132 |  |
+| strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 |  |
+| strokeColor | 圆形进度条线的色彩，传入 object 时为渐变 | string \| object | - | 1.5.0 |
 
 ### `type="dashboard"`
 
diff --git a/components/progress/line.jsx b/components/progress/line.jsx
@@ -1,5 +1,55 @@
 import { validProgress } from './utils';
 
+/**
+ * {
+ *   '0%': '#afc163',
+ *   '75%': '#009900',
+ *   '50%': 'green',     ====>     '#afc163 0%, #66FF00 25%, #00CC00 50%, #009900 75%, #ffffff 100%'
+ *   '25%': '#66FF00',
+ *   '100%': '#ffffff'
+ * }
+ */
+export const sortGradient = gradients => {
+  let tempArr = [];
+  // eslint-disable-next-line no-restricted-syntax
+  for (const [key, value] of Object.entries(gradients)) {
+    const formatKey = parseFloat(key.replace(/%/g, ''));
+    if (isNaN(formatKey)) {
+      return {};
+    }
+    tempArr.push({
+      key: formatKey,
+      value,
+    });
+  }
+  tempArr = tempArr.sort((a, b) => a.key - b.key);
+  return tempArr.map(({ key, value }) => `${value} ${key}%`).join(', ');
+};
+
+/**
+ * {
+ *   '0%': '#afc163',
+ *   '25%': '#66FF00',
+ *   '50%': '#00CC00',     ====>  linear-gradient(to right, #afc163 0%, #66FF00 25%,
+ *   '75%': '#009900',              #00CC00 50%, #009900 75%, #ffffff 100%)
+ *   '100%': '#ffffff'
+ * }
+ *
+ * Then this man came to realize the truth:
+ * Besides six pence, there is the moon.
+ * Besides bread and butter, there is the bug.
+ * And...
+ * Besides women, there is the code.
+ */
+export const handleGradient = strokeColor => {
+  const { from = '#1890ff', to = '#1890ff', direction = 'to right', ...rest } = strokeColor;
+  if (Object.keys(rest).length !== 0) {
+    const sortedGradients = sortGradient(rest);
+    return { backgroundImage: `linear-gradient(${direction}, ${sortedGradients})` };
+  }
+  return { backgroundImage: `linear-gradient(${direction}, ${from}, ${to})` };
+};
+
 const Line = {
   functional: true,
   render(h, context) {
@@ -13,16 +63,25 @@ const Line = {
       strokeColor,
       strokeLinecap,
     } = props;
+    let backgroundProps;
+    if (strokeColor && typeof strokeColor !== 'string') {
+      backgroundProps = handleGradient(strokeColor);
+    } else {
+      backgroundProps = {
+        background: strokeColor,
+      };
+    }
     const percentStyle = {
       width: `${validProgress(percent)}%`,
       height: `${strokeWidth || (size === 'small' ? 6 : 8)}px`,
       background: strokeColor,
       borderRadius: strokeLinecap === 'square' ? 0 : '100px',
+      ...backgroundProps,
     };
     const successPercentStyle = {
       width: `${validProgress(successPercent)}%`,
       height: `${strokeWidth || (size === 'small' ? 6 : 8)}px`,
-      borderRadius: strokeLinecap === 'square' ? 0 : '100px',
+      borderRadius: strokeLinecap === 'square' ? 0 : '',
     };
     const successSegment =
       successPercent !== undefined ? (
diff --git a/components/progress/progress.jsx b/components/progress/progress.jsx
@@ -11,7 +11,7 @@ function addUnit(num, unit) {
   const unitType = unit || 'px';
   return num ? num + unitType : null;
 }
-
+const ProgressStatuses = ['normal', 'exception', 'active', 'success'];
 export const ProgressType = PropTypes.oneOf(['line', 'circle', 'dashboard']);
 export const ProgressSize = PropTypes.oneOf(['default', 'small']);
 
@@ -21,11 +21,11 @@ export const ProgressProps = {
   percent: PropTypes.number,
   successPercent: PropTypes.number,
   format: PropTypes.func,
-  status: PropTypes.oneOf(['normal', 'success', 'active', 'exception']),
+  status: PropTypes.oneOf(ProgressStatuses),
   showInfo: PropTypes.bool,
   strokeWidth: PropTypes.number,
-  strokeLinecap: PropTypes.oneOf(['round', 'square']),
-  strokeColor: PropTypes.string,
+  strokeLinecap: PropTypes.oneOf(['butt', 'round', 'square']),
+  strokeColor: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   trailColor: PropTypes.string,
   width: PropTypes.number,
   gapDegree: PropTypes.number,
@@ -48,6 +48,21 @@ export default {
     configProvider: { default: () => ConfigConsumerProps },
   },
   methods: {
+    getPercentNumber() {
+      const { successPercent, percent = 0 } = this.$props;
+      return parseInt(
+        successPercent !== undefined ? successPercent.toString() : percent.toString(),
+        10,
+      );
+    },
+
+    getProgressStatus() {
+      const { status } = this.$props;
+      if (ProgressStatuses.indexOf(status) < 0 && this.getPercentNumber() >= 100) {
+        return 'success';
+      }
+      return status || 'normal';
+    },
     renderProcessInfo(prefixCls, progressStatus) {
       const { showInfo, format, type, percent, successPercent } = this.$props;
       if (!showInfo) return null;
@@ -96,14 +111,10 @@ export default {
     } = props;
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('progress', customizePrefixCls);
+    const progressStatus = this.getProgressStatus();
+    const progressInfo = this.renderProcessInfo(prefixCls, progressStatus);
 
-    const progressStatus =
-      parseInt(successPercent !== undefined ? successPercent.toString() : percent.toString(), 10) >=
-        100 && !('status' in props)
-        ? 'success'
-        : status || 'normal';
     let progress;
-    const progressInfo = this.renderProcessInfo(prefixCls, progressStatus);
 
     // Render progress shape
     if (type === 'line') {
diff --git a/components/progress/utils.js b/components/progress/utils.js
@@ -1,7 +1,8 @@
 export function validProgress(progress) {
   if (!progress || progress < 0) {
     return 0;
-  } else if (progress > 100) {
+  }
+  if (progress > 100) {
     return 100;
   }
   return progress;
diff --git a/components/vc-progress/index.js b/components/vc-progress/index.js
@@ -1,4 +1,4 @@
-// based on rc-progress 2.3.0
+// based on rc-progress 2.5.2
 import Progress, { Line, Circle } from './src/';
 
 export { Line, Circle };
diff --git a/components/vc-progress/src/Circle.js b/components/vc-progress/src/Circle.js
diff --git a/components/vc-progress/src/Line.js b/components/vc-progress/src/Line.js
diff --git a/components/vc-progress/src/types.js b/components/vc-progress/src/types.js
diff --git a/types/progress.d.ts b/types/progress.d.ts
