feat: update vc-progress to 2.3.0

components/vc-cascader/Cascader.jsx

@@ -213,7 +213,7 @@ export default {
       }
       this.setState(newState);
     },
-    handleItemDoubleClick  ()  {
+    handleItemDoubleClick() {
       const { changeOnSelect } = this.$props;
       if (changeOnSelect) {
         this.setPopupVisible(false);
@@ -343,7 +343,7 @@ export default {
         on: {
           ...$listeners,
           select: handleMenuSelect,
-          itemDoubleClick: this.handleItemDoubleClick
+          itemDoubleClick: this.handleItemDoubleClick,
         },
       };
       menus = <Menus {...menusProps} />;
@@ -368,7 +368,7 @@ export default {
       },
       ref: 'trigger',
     };
-    const children = getSlot(this, 'default')[0]
+    const children = getSlot(this, 'default')[0];
     return (
       <Trigger {...triggerProps}>
         {children &&

components/vc-progress/demo/gap.jsx

@@ -1,19 +1,24 @@
 import { Circle } from '../index';
 import '../assets/index.less';
 
+const colorMap = ['#3FC7FA', '#85D262', '#FE8C6A'];
+function getColor(index) {
+  return colorMap[(index + colorMap.length) % colorMap.length];
+}
+
 export default {
   data() {
     return {
       percent: 30,
-      color: '#3FC7FA',
+      colorIndex: 0,
     };
   },
   methods: {
     changeState() {
-      const colorMap = ['#3FC7FA', '#85D262', '#FE8C6A'];
       const value = parseInt(Math.random() * 100, 10);
+      const colorIndex = parseInt(Math.random() * 3, 10);
       this.percent = value;
-      this.color = colorMap[parseInt(Math.random() * 3, 10)];
+      this.colorIndex = colorIndex;
     },
   },
   render() {
@@ -21,18 +26,13 @@ export default {
       width: '200px',
       height: '200px',
     };
+    const { percent, colorIndex } = this;
+    const color = getColor(colorIndex);
     return (
       <div>
-        <div style={circleContainerStyle}>
+        <p>
-          <Circle
+          <button onClick={this.changeState}>Change State [{percent}]</button>
-            percent={this.percent}
+        </p>
-            gapDegree="70"
-            gapPosition="top"
-            strokeWidth="6"
-            strokeLinecap="square"
-            strokeColor={this.color}
-          />
-        </div>
         <div style={circleContainerStyle}>
           <Circle
             percent={this.percent}
@@ -43,6 +43,17 @@ export default {
             strokeColor={this.color}
           />
         </div>
+        <div style={circleContainerStyle}>
+          <Circle
+            percent={[percent / 3, percent / 3, percent / 3]}
+            gapDegree="70"
+            gapPosition="bottom"
+            strokeWidth="6"
+            trailWidth="6"
+            strokeLinecap="round"
+            strokeColor={[color, getColor(colorIndex + 1), getColor(colorIndex + 2)]}
+          />
+        </div>
         <div style={circleContainerStyle}>
           <Circle
             percent={this.percent}
@@ -63,9 +74,6 @@ export default {
             strokeColor={this.color}
           />
         </div>
-        <p>
-          <button onClick={this.changeState}>Change State</button>
-        </p>
       </div>
     );
   },

components/vc-progress/demo/simple.jsx

@@ -30,6 +30,11 @@ export default {
         <h3>Line Progress {this.percent}%</h3>
         <div style={containerStyle}>
           <Line percent={this.percent} strokeWidth="4" strokeColor={this.color} />
+          <Line
+            percent={[this.percent / 2, this.percent / 2]}
+            strokeWidth="4"
+            strokeColor={[this.color, '#CCC']}
+          />
         </div>
         <h3>Circle Progress {this.percent}%</h3>
         <div style={circleContainerStyle}>

components/vc-progress/index.js

@@ -1,4 +1,4 @@
-// based on rc-progress 2.2.7
+// based on rc-progress 2.3.0
 import Progress, { Line, Circle } from './src/';
 
 export { Line, Circle };

components/vc-progress/src/Circle.js

@@ -1,3 +1,5 @@
+import Vue from 'vue';
+import ref from 'vue-ref';
 import PropTypes from '../../_util/vue-types';
 import { initDefaultProps } from '../../_util/props-util';
 import enhancer from './enhancer';
@@ -6,7 +8,7 @@ import { propTypes, defaultProps } from './types';
 const circlePropTypes = {
   ...propTypes,
   gapPosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
-  gapDegree: PropTypes.number,
+  gapDegree: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 };
 
 const circleDefaultProps = {
@@ -14,11 +16,16 @@ const circleDefaultProps = {
   gapPosition: 'top',
 };
 
+Vue.use(ref, { name: 'ant-ref' });
+
 const Circle = {
   props: initDefaultProps(circlePropTypes, circleDefaultProps),
+  data() {
+    this.paths = {};
+    return {};
+  },
   methods: {
-    getPathStyles() {
+    getPathStyles(offset, percent, strokeColor, strokeWidth, gapDegree = 0, gapPosition) {
-      const { percent, strokeWidth, strokeColor, gapDegree = 0, gapPosition } = this.$props;
       const radius = 50 - strokeWidth / 2;
       let beginPositionX = 0;
       let beginPositionY = -radius;
@@ -47,35 +54,89 @@ const Circle = {
        a ${radius},${radius} 0 1 1 ${endPositionX},${-endPositionY}
        a ${radius},${radius} 0 1 1 ${-endPositionX},${endPositionY}`;
       const len = Math.PI * 2 * radius;
-      const trailPathStyle = {
+      const pathStyle = {
-        strokeDasharray: `${len - gapDegree}px ${len}px`,
-        strokeDashoffset: `-${gapDegree / 2}px`,
-        transition: 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s',
-      };
-      const strokePathStyle = {
         stroke: strokeColor,
         strokeDasharray: `${(percent / 100) * (len - gapDegree)}px ${len}px`,
-        strokeDashoffset: `-${gapDegree / 2}px`,
+        strokeDashoffset: `-${gapDegree / 2 + (offset / 100) * (len - gapDegree)}px`,
         transition:
           'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s', // eslint-disable-line
       };
-      return { pathString, trailPathStyle, strokePathStyle };
+      return {
+        pathString,
+        pathStyle,
+      };
+    },
+    getStokeList() {
+      const {
+        prefixCls,
+        percent,
+        strokeColor,
+        strokeWidth,
+        strokeLinecap,
+        gapDegree,
+        gapPosition,
+      } = this.$props;
+      const percentList = Array.isArray(percent) ? percent : [percent];
+      const strokeColorList = Array.isArray(strokeColor) ? strokeColor : [strokeColor];
+
+      let stackPtg = 0;
+      return percentList.map((ptg, index) => {
+        const color = strokeColorList[index] || strokeColorList[strokeColorList.length - 1];
+        const { pathString, pathStyle } = this.getPathStyles(
+          stackPtg,
+          ptg,
+          color,
+          strokeWidth,
+          gapDegree,
+          gapPosition,
+        );
+
+        stackPtg += ptg;
+
+        const pathProps = {
+          key: index,
+          attrs: {
+            d: pathString,
+            'stroke-linecap': strokeLinecap,
+            'stroke-width': ptg === 0 ? 0 : strokeWidth,
+            'fill-opacity': '0',
+          },
+          class: `${prefixCls}-circle-path`,
+          style: pathStyle,
+          directives: [
+            {
+              name: 'ant-ref',
+              value: c => {
+                this.paths[index] = c;
               },
             },
+          ],
+        };
+        return <path {...pathProps} />;
+      });
+    },
+  },
+
   render() {
     const {
       prefixCls,
       strokeWidth,
       trailWidth,
+      gapDegree,
+      gapPosition,
       trailColor,
       strokeLinecap,
-      percent,
       ...restProps
     } = this.$props;
-    const { pathString, trailPathStyle, strokePathStyle } = this.getPathStyles();
+    const { pathString, pathStyle } = this.getPathStyles(
+      0,
+      100,
+      trailColor,
+      strokeWidth,
+      gapDegree,
+      gapPosition,
+    );
     delete restProps.percent;
-    delete restProps.gapDegree;
-    delete restProps.gapPosition;
     delete restProps.strokeColor;
     const pathFirst = {
       attrs: {
@@ -86,23 +147,13 @@ const Circle = {
         'fill-opacity': '0',
       },
       class: `${prefixCls}-circle-trail`,
-      style: trailPathStyle,
+      style: pathStyle,
-    };
-    const pathSecond = {
-      attrs: {
-        d: pathString,
-        'stroke-linecap': strokeLinecap,
-        'stroke-width': percent === 0 ? 0 : strokeWidth,
-        'fill-opacity': '0',
-      },
-      class: `${prefixCls}-circle-path`,
-      style: strokePathStyle,
-      ref: 'svgPathRef',
     };
+
     return (
       <svg class={`${prefixCls}-circle`} viewBox="0 0 100 100" {...restProps}>
         <path {...pathFirst} />
-        <path {...pathSecond} />
+        {this.getStokeList()}
       </svg>
     );
   },

components/vc-progress/src/Line.js

@@ -1,9 +1,17 @@
+import Vue from 'vue';
+import ref from 'vue-ref';
 import { initDefaultProps } from '../../_util/props-util';
 import enhancer from './enhancer';
 import { propTypes, defaultProps } from './types';
 
+Vue.use(ref, { name: 'ant-ref' });
+
 const Line = {
   props: initDefaultProps(propTypes, defaultProps),
+  data() {
+    this.paths = {};
+    return {};
+  },
   render() {
     const {
       percent,
@@ -18,11 +26,8 @@ const Line = {
 
     delete restProps.gapPosition;
 
-    const pathStyle = {
+    const percentList = Array.isArray(percent) ? percent : [percent];
-      strokeDasharray: '100px, 100px',
+    const strokeColorList = Array.isArray(strokeColor) ? strokeColor : [strokeColor];
-      strokeDashoffset: `${100 - percent}px`,
-      transition: 'stroke-dashoffset 0.3s ease 0s, stroke 0.3s linear',
-    };
 
     const center = strokeWidth / 2;
     const right = 100 - strokeWidth / 2;
@@ -30,6 +35,8 @@ const Line = {
            L ${strokeLinecap === 'round' ? right : 100},${center}`;
     const viewBoxString = `0 0 100 ${strokeWidth}`;
 
+    let stackPtg = 0;
+
     const pathFirst = {
       attrs: {
         d: pathString,
@@ -40,18 +47,6 @@ const Line = {
       },
       class: `${prefixCls}-line-trail`,
     };
-    const pathSecond = {
-      attrs: {
-        d: pathString,
-        'stroke-linecap': strokeLinecap,
-        stroke: strokeColor,
-        'stroke-width': strokeWidth,
-        'fill-opacity': '0',
-      },
-      class: `${prefixCls}-line-path`,
-      style: pathStyle,
-      ref: 'svgPathRef',
-    };
     return (
       <svg
         class={`${prefixCls}-line`}
@@ -60,7 +55,39 @@ const Line = {
         {...restProps}
       >
         <path {...pathFirst} />
-        <path {...pathSecond} />
+        {percentList.map((ptg, index) => {
+          const pathStyle = {
+            strokeDasharray: `${ptg}px, 100px`,
+            strokeDashoffset: `-${stackPtg}px`,
+            transition:
+              'stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear',
+          };
+          const color = strokeColorList[index] || strokeColorList[strokeColorList.length - 1];
+
+          stackPtg += ptg;
+
+          const pathProps = {
+            attrs: {
+              d: pathString,
+              'stroke-linecap': strokeLinecap,
+              stroke: color,
+              'stroke-width': strokeWidth,
+              'fill-opacity': '0',
+            },
+            class: `${prefixCls}-line-path`,
+            style: pathStyle,
+            directives: [
+              {
+                name: 'ant-ref',
+                value: c => {
+                  this.paths[index] = c;
+                },
+              },
+            ],
+          };
+
+          return <path {...pathProps} />;
+        })}
       </svg>
     );
   },

components/vc-progress/src/enhancer.js

@@ -3,16 +3,27 @@ function enhancer(Component) {
     mixins: [Component],
     updated() {
       this.$nextTick(() => {
-        if (!this.$refs.svgPathRef) {
+        const now = Date.now();
+        let updated = false;
+
+        Object.keys(this.paths).forEach(key => {
+          const path = this.paths[key];
+
+          if (!path) {
             return;
           }
-        const pathStyle = this.$refs.svgPathRef.style;
+
+          updated = true;
+          const pathStyle = path.style;
           pathStyle.transitionDuration = '.3s, .3s, .3s, .06s';
-        const now = Date.now();
+
           if (this.prevTimeStamp && now - this.prevTimeStamp < 100) {
             pathStyle.transitionDuration = '0s, 0s';
           }
+        });
+        if (updated) {
           this.prevTimeStamp = Date.now();
+        }
       });
     },
   };

components/vc-progress/src/types.js

@@ -11,15 +11,16 @@ export const defaultProps = {
   trailColor: '#D9D9D9',
   trailWidth: 1,
 };
+const mixedType = PropTypes.oneOfType([PropTypes.number, PropTypes.string]);
 
 export const propTypes = {
   // className: PropTypes.string,
-  percent: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  percent: PropTypes.oneOfType([mixedType, PropTypes.arrayOf(mixedType)]),
   prefixCls: PropTypes.string,
-  strokeColor: PropTypes.string,
+  strokeColor: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
   strokeLinecap: PropTypes.oneOf(['butt', 'round', 'square']),
-  strokeWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  strokeWidth: mixedType,
   // style: PropTypes.object,
   trailColor: PropTypes.string,
-  trailWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  trailWidth: mixedType,
 };

components/vc-upload/demo/simple.jsx

@@ -92,7 +92,12 @@ export default {
               height: '500px',
             }}
           >
-            <Upload {...uploaderProps1} id="test" component="div" style={{ display: 'inline-block' }}>
+            <Upload
+              {...uploaderProps1}
+              id="test"
+              component="div"
+              style={{ display: 'inline-block' }}
+            >
               <a>开始上传2</a>
             </Upload>
           </div>

components/vc-upload/src/traverseFileTree.js

@@ -3,7 +3,7 @@ function loopFiles(item, callback) {
   let fileList = [];
 
   function sequence() {
-    dirReader.readEntries((entries) => {
+    dirReader.readEntries(entries => {
       const entryList = Array.prototype.slice.apply(entries);
       fileList = fileList.concat(entryList);
 
@@ -31,8 +31,8 @@ const traverseFileTree = (files, callback, isAccepted) => {
         }
       });
     } else if (item.isDirectory) {
-      loopFiles(item, (entries) => {
+      loopFiles(item, entries => {
-        entries.forEach((entryItem) => {
+        entries.forEach(entryItem => {
           _traverseFileTree(entryItem, `${path}${item.name}/`);
         });
       });

scripts/gulpfile.js

@@ -56,10 +56,7 @@ function copyHtml() {
     path.join(cwd, 'site-dist/404.html'),
     fs.readFileSync(path.join(cwd, 'site/404.html')),
   );
-  fs.writeFileSync(
+  fs.writeFileSync(path.join(cwd, 'site-dist/CNAME'), 'vue.ant.design');
-    path.join(cwd, 'site-dist/CNAME'),
-    'vue.ant.design',
-  );
   rl.on('line', line => {
     if (line.indexOf('path:') > -1) {
       const name = line.split("'")[1].split("'")[0];