feat: update vc-progress to 2.3.0

2019-02-19 22:35:03 +08:00 · 2019-02-19 22:35:03 +08:00 · 487fe2a268
parent a10711d9ae
commit 487fe2a268
11 changed files with 191 additions and 86 deletions
--- a/components/vc-cascader/Cascader.jsx
+++ b/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 &&
--- a/components/vc-progress/demo/gap.jsx
+++ b/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}>
-          <Circle
-            percent={this.percent}
-            gapDegree="70"
-            gapPosition="top"
-            strokeWidth="6"
-            strokeLinecap="square"
-            strokeColor={this.color}
-          />
-        </div>
+        <p>
+          <button onClick={this.changeState}>Change State [{percent}]</button>
+        </p>
        <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>
    );
  },
--- a/components/vc-progress/demo/simple.jsx
+++ b/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}>
--- a/components/vc-progress/index.js
+++ b/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 };
--- a/components/vc-progress/src/Circle.js
+++ b/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() {
-      const { percent, strokeWidth, strokeColor, gapDegree = 0, gapPosition } = this.$props;
+    getPathStyles(offset, percent, strokeColor, strokeWidth, gapDegree = 0, gapPosition) {
      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 = {
-        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 = {
+      const pathStyle = {
        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,
-    };
-    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',
+      style: pathStyle,
    };
+
    return (
      <svg class={`${prefixCls}-circle`} viewBox="0 0 100 100" {...restProps}>
        <path {...pathFirst} />
-        <path {...pathSecond} />
+        {this.getStokeList()}
      </svg>
    );
  },
--- a/components/vc-progress/src/Line.js
+++ b/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 = {
-      strokeDasharray: '100px, 100px',
-      strokeDashoffset: `${100 - percent}px`,
-      transition: 'stroke-dashoffset 0.3s ease 0s, stroke 0.3s linear',
-    };
+    const percentList = Array.isArray(percent) ? percent : [percent];
+    const strokeColorList = Array.isArray(strokeColor) ? strokeColor : [strokeColor];

    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>
    );
  },
--- a/components/vc-progress/src/enhancer.js
+++ b/components/vc-progress/src/enhancer.js
@ -3,16 +3,27 @@ function enhancer(Component) {
    mixins: [Component],
    updated() {
      this.$nextTick(() => {
-        if (!this.$refs.svgPathRef) {
-          return;
-        }
-        const pathStyle = this.$refs.svgPathRef.style;
-        pathStyle.transitionDuration = '.3s, .3s, .3s, .06s';
        const now = Date.now();
-        if (this.prevTimeStamp && now - this.prevTimeStamp < 100) {
-          pathStyle.transitionDuration = '0s, 0s';
+        let updated = false;
+
+        Object.keys(this.paths).forEach(key => {
+          const path = this.paths[key];
+
+          if (!path) {
+            return;
+          }
+
+          updated = true;
+          const pathStyle = path.style;
+          pathStyle.transitionDuration = '.3s, .3s, .3s, .06s';
+
+          if (this.prevTimeStamp && now - this.prevTimeStamp < 100) {
+            pathStyle.transitionDuration = '0s, 0s';
+          }
+        });
+        if (updated) {
+          this.prevTimeStamp = Date.now();
        }
-        this.prevTimeStamp = Date.now();
      });
    },
  };
--- a/components/vc-progress/src/types.js
+++ b/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,
 };
--- a/components/vc-upload/demo/simple.jsx
+++ b/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>
--- a/components/vc-upload/src/traverseFileTree.js
+++ b/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) => {
-        entries.forEach((entryItem) => {
+      loopFiles(item, entries => {
+        entries.forEach(entryItem => {
          _traverseFileTree(entryItem, `${path}${item.name}/`);
        });
      });
--- a/scripts/gulpfile.js
+++ b/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(
-    path.join(cwd, 'site-dist/CNAME'),
-    'vue.ant.design',
-  );
+  fs.writeFileSync(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];