feat: update progress

2020-06-26 10:08:47 +08:00 · 2020-06-26 10:08:47 +08:00 · 1f09c6e41f
parent e623fc12cd
commit 1f09c6e41f
12 changed files with 141 additions and 153 deletions
--- a/2
+++ b/2
@ -1 +1 @@
-Subproject commit 3506c191e7e5aa2981d46a594c9997536fe12446
+Subproject commit c2e13cef53abb73e36ad7e506a9a03f1268fc3e8
--- a/components/progress/tests/snapshots/index.test.js.snap
+++ b/components/progress/tests/snapshots/index.test.js.snap
@ -2,14 +2,15 @@

 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">
+  <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
+      <!---->
      <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>
      <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="" 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>
+    </svg><span class="ant-progress-text" title="50%">50%</span></div>
 </div>
 `;

@ -19,8 +20,9 @@ exports[`Progress render negetive progress 1`] = `
    <div class="ant-progress-outer">
      <div class="ant-progress-inner">
        <div class="ant-progress-bg" style="width: 0%; height: 8px; border-radius: 100px;"></div>
+        <!---->
      </div>
-    </div><span title="0%" class="ant-progress-text">0%</span>
+    </div><span class="ant-progress-text" title="0%">0%</span>
  </div>
 </div>
 `;
@ -33,7 +35,7 @@ exports[`Progress render negetive successPercent 1`] = `
        <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;"></div>
      </div>
-    </div><span title="50%" class="ant-progress-text">50%</span>
+    </div><span class="ant-progress-text" title="50%">50%</span>
  </div>
 </div>
 `;
@ -46,7 +48,7 @@ exports[`Progress render negetive successPercent 2`] = `
        <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;"></div>
      </div>
-    </div><span title="50 10" class="ant-progress-text">50 10</span>
+    </div><span class="ant-progress-text" title="50 10">50 10</span>
  </div>
 </div>
 `;
@ -57,8 +59,9 @@ exports[`Progress render normal progress 1`] = `
    <div class="ant-progress-outer">
      <div class="ant-progress-inner">
        <div class="ant-progress-bg" style="width: 0%; height: 8px; border-radius: 100px;"></div>
+        <!---->
      </div>
-    </div><span title="0%" class="ant-progress-text">0%</span>
+    </div><span class="ant-progress-text" title="0%">0%</span>
  </div>
 </div>
 `;
@ -69,8 +72,9 @@ exports[`Progress render out-of-range progress 1`] = `
    <div class="ant-progress-outer">
      <div class="ant-progress-inner">
        <div class="ant-progress-bg" style="width: 100%; height: 8px; border-radius: 100px;"></div>
+        <!---->
      </div>
-    </div><span class="ant-progress-text"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg></span></span>
+    </div><span class="ant-progress-text" title=""><span class="anticon anticon-check-circle" role="img" aria-label="check-circle"><svg class="" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg></span></span>
  </div>
 </div>
 `;
@ -81,8 +85,9 @@ exports[`Progress render out-of-range progress with info 1`] = `
    <div class="ant-progress-outer">
      <div class="ant-progress-inner">
        <div class="ant-progress-bg" style="width: 100%; height: 8px; border-radius: 100px;"></div>
+        <!---->
      </div>
-    </div><span class="ant-progress-text"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg></span></span>
+    </div><span class="ant-progress-text" title=""><span class="anticon anticon-check-circle" role="img" aria-label="check-circle"><svg class="" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg></span></span>
  </div>
 </div>
 `;
--- a/components/progress/tests/index.test.js
+++ b/components/progress/tests/index.test.js
@ -5,7 +5,7 @@ import Progress from '..';
 describe('Progress', () => {
  it('successPercent should decide the progress status when it exists', async () => {
    const wrapper = mount(Progress, {
-      propsData: {
+      props: {
        percent: 100,
        successPercent: 50,
      },
@ -28,7 +28,7 @@ describe('Progress', () => {

  it('render out-of-range progress', async () => {
    const wrapper = mount(Progress, {
-      propsData: {
+      props: {
        percent: 120,
      },
      sync: false,
@ -40,7 +40,7 @@ describe('Progress', () => {

  it('render out-of-range progress with info', async () => {
    const wrapper = mount(Progress, {
-      propsData: {
+      props: {
        percent: 120,
        showInfo: true,
      },
@ -53,7 +53,7 @@ describe('Progress', () => {

  it('render negetive progress', async () => {
    const wrapper = mount(Progress, {
-      propsData: {
+      props: {
        percent: -20,
      },
      sync: false,
@ -65,7 +65,7 @@ describe('Progress', () => {

  it('render negetive successPercent', async () => {
    const wrapper = mount(Progress, {
-      propsData: {
+      props: {
        percent: 50,
        successPercent: -20,
      },
@ -78,7 +78,7 @@ describe('Progress', () => {

  it('render negetive successPercent', async () => {
    const wrapper = mount(Progress, {
-      propsData: {
+      props: {
        percent: 50,
        successPercent: 10,
        format: (percent, successPercent) => `${percent} ${successPercent}`,
@ -92,7 +92,7 @@ describe('Progress', () => {

  it('render format', async () => {
    const wrapper = mount(Progress, {
-      propsData: {
+      props: {
        percent: 50,
        type: 'circle',
        strokeColor: 'red',
@ -105,7 +105,7 @@ describe('Progress', () => {
  });

  it('render normal progress', () => {
-    const wrapper = mount(Progress, { propsData: { status: 'normal' } });
+    const wrapper = mount(Progress, { props: { status: 'normal' } });
    expect(wrapper.html()).toMatchSnapshot();
  });
 });
--- a/components/progress/circle.jsx
+++ b/components/progress/circle.jsx
@ -21,54 +21,50 @@ function getStrokeColor({ progressStatus, successPercent, strokeColor }) {
  return [statusColorMap.success, color];
 }

-const Circle = {
-  functional: true,
-  render(h, context) {
-    const { props, children } = context;
-    const {
-      prefixCls,
-      width,
-      strokeWidth,
-      trailColor,
-      strokeLinecap,
-      gapPosition,
-      gapDegree,
-      type,
-    } = props;
-    const circleSize = width || 120;
-    const circleStyle = {
-      width: typeof circleSize === 'number' ? `${circleSize}px` : circleSize,
-      height: typeof circleSize === 'number' ? `${circleSize}px` : circleSize,
-      fontSize: circleSize * 0.15 + 6,
-    };
-    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 Circle = (_, { attrs, slots }) => {
+  const {
+    prefixCls,
+    width,
+    strokeWidth,
+    trailColor,
+    strokeLinecap,
+    gapPosition,
+    gapDegree,
+    type,
+  } = attrs;
+  const circleSize = width || 120;
+  const circleStyle = {
+    width: typeof circleSize === 'number' ? `${circleSize}px` : circleSize,
+    height: typeof circleSize === 'number' ? `${circleSize}px` : circleSize,
+    fontSize: `${circleSize * 0.15 + 6}px`,
+  };
+  const circleWidth = strokeWidth || 6;
+  const gapPos = gapPosition || (type === 'dashboard' && 'bottom') || 'top';
+  const gapDeg = gapDegree || (type === 'dashboard' && 75);
+  const strokeColor = getStrokeColor(attrs);
+  const isGradient = Object.prototype.toString.call(strokeColor) === '[object Object]';

-    const wrapperClassName = {
-      [`${prefixCls}-inner`]: true,
-      [`${prefixCls}-circle-gradient`]: isGradient,
-    };
+  const wrapperClassName = {
+    [`${prefixCls}-inner`]: true,
+    [`${prefixCls}-circle-gradient`]: isGradient,
+  };

-    return (
-      <div class={wrapperClassName} style={circleStyle}>
-        <VCCircle
-          percent={getPercentage(props)}
-          strokeWidth={circleWidth}
-          trailWidth={circleWidth}
-          strokeColor={strokeColor}
-          strokeLinecap={strokeLinecap}
-          trailColor={trailColor}
-          prefixCls={prefixCls}
-          gapDegree={gapDeg}
-          gapPosition={gapPos}
-        />
-        {children}
-      </div>
-    );
-  },
+  return (
+    <div class={wrapperClassName} style={circleStyle}>
+      <VCCircle
+        percent={getPercentage(attrs)}
+        strokeWidth={circleWidth}
+        trailWidth={circleWidth}
+        strokeColor={strokeColor}
+        strokeLinecap={strokeLinecap}
+        trailColor={trailColor}
+        prefixCls={prefixCls}
+        gapDegree={gapDeg}
+        gapPosition={gapPos}
+      />
+      {slots?.default()}
+    </div>
+  );
 };

 export default Circle;
--- a/components/progress/index.jsx
+++ b/components/progress/index.jsx
@ -1,12 +1,10 @@
 import Progress from './progress';
-import Base from '../base';

 export { ProgressProps } from './progress';

 /* istanbul ignore next */
-Progress.install = function(Vue) {
-  Vue.use(Base);
-  Vue.component(Progress.name, Progress);
+Progress.install = function(app) {
+  app.component(Progress.name, Progress);
 };

 export default Progress;
--- a/components/progress/line.jsx
+++ b/components/progress/line.jsx
@ -50,55 +50,51 @@ export const handleGradient = strokeColor => {
  return { backgroundImage: `linear-gradient(${direction}, ${from}, ${to})` };
 };

-const Line = {
-  functional: true,
-  render(h, context) {
-    const { props, children } = context;
-    const {
-      prefixCls,
-      percent,
-      successPercent,
-      strokeWidth,
-      size,
-      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`,
+const Line = (_, { attrs, slots }) => {
+  const {
+    prefixCls,
+    percent,
+    successPercent,
+    strokeWidth,
+    size,
+    strokeColor,
+    strokeLinecap,
+  } = attrs;
+  let backgroundProps;
+  if (strokeColor && typeof strokeColor !== 'string') {
+    backgroundProps = handleGradient(strokeColor);
+  } else {
+    backgroundProps = {
      background: strokeColor,
-      borderRadius: strokeLinecap === 'square' ? 0 : '100px',
-      ...backgroundProps,
    };
-    const successPercentStyle = {
-      width: `${validProgress(successPercent)}%`,
-      height: `${strokeWidth || (size === 'small' ? 6 : 8)}px`,
-      borderRadius: strokeLinecap === 'square' ? 0 : '',
-    };
-    const successSegment =
-      successPercent !== undefined ? (
-        <div class={`${prefixCls}-success-bg`} style={successPercentStyle} />
-      ) : null;
-    return (
-      <div>
-        <div class={`${prefixCls}-outer`}>
-          <div class={`${prefixCls}-inner`}>
-            <div class={`${prefixCls}-bg`} style={percentStyle} />
-            {successSegment}
-          </div>
+  }
+  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 : '',
+  };
+  const successSegment =
+    successPercent !== undefined ? (
+      <div class={`${prefixCls}-success-bg`} style={successPercentStyle} />
+    ) : null;
+  return (
+    <div>
+      <div class={`${prefixCls}-outer`}>
+        <div class={`${prefixCls}-inner`}>
+          <div class={`${prefixCls}-bg`} style={percentStyle} />
+          {successSegment}
        </div>
-        {children}
      </div>
-    );
-  },
+      {slots?.default()}
+    </div>
+  );
 };

 export default Line;
--- a/components/progress/progress.jsx
+++ b/components/progress/progress.jsx
@ -1,6 +1,7 @@
+import { inject } from 'vue';
 import classNames from 'classnames';
 import PropTypes from '../_util/vue-types';
-import { getOptionProps, initDefaultProps, getListeners } from '../_util/props-util';
+import { getOptionProps, initDefaultProps } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
 import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
 import CheckOutlined from '@ant-design/icons-vue/CheckOutlined';
@ -43,8 +44,10 @@ export default {
    gapDegree: 0,
    strokeLinecap: 'round',
  }),
-  inject: {
-    configProvider: { default: () => ConfigConsumerProps },
+  setup() {
+    return {
+      configProvider: inject('configProvider', ConfigConsumerProps),
+    };
  },
  methods: {
    getPercentNumber() {
@ -67,12 +70,11 @@ export default {
      if (!showInfo) return null;

      let text;
-      const textFormatter =
-        format || this.$scopedSlots.format || (percentNumber => `${percentNumber}%`);
+      const textFormatter = format || this.$slots.format || (percentNumber => `${percentNumber}%`);
      const isLineType = type === 'line';
      if (
        format ||
-        this.$scopedSlots.format ||
+        this.$slots.format ||
        (progressStatus !== 'exception' && progressStatus !== 'success')
      ) {
        text = textFormatter(validProgress(percent), validProgress(successPercent));
@ -101,19 +103,15 @@ export default {
    // Render progress shape
    if (type === 'line') {
      const lineProps = {
-        props: {
-          ...props,
-          prefixCls,
-        },
+        ...props,
+        prefixCls,
      };
      progress = <Line {...lineProps}>{progressInfo}</Line>;
    } else if (type === 'circle' || type === 'dashboard') {
      const circleProps = {
-        props: {
-          ...props,
-          prefixCls,
-          progressStatus,
-        },
+        ...props,
+        prefixCls,
+        progressStatus,
      };
      progress = <Circle {...circleProps}>{progressInfo}</Circle>;
    }
@ -126,7 +124,6 @@ export default {
    });

    const progressProps = {
-      on: getListeners(this),
      class: classString,
    };
    return <div {...progressProps}>{progress}</div>;
--- a/components/vc-progress/src/Circle.js
+++ b/components/vc-progress/src/Circle.js
@ -69,6 +69,7 @@ function getPathStyles(offset, percent, strokeColor, strokeWidth, gapDegree = 0,
 }

 const Circle = {
+  name: 'Circle',
  props: initDefaultProps(circlePropTypes, circleDefaultProps),
  created() {
    this.paths = {};
@ -148,13 +149,11 @@ const Circle = {
      color => Object.prototype.toString.call(color) === '[object Object]',
    );
    const pathFirst = {
-      attrs: {
-        d: pathString,
-        stroke: trailColor,
-        'stroke-linecap': strokeLinecap,
-        'stroke-width': trailWidth || strokeWidth,
-        'fill-opacity': '0',
-      },
+      d: pathString,
+      stroke: trailColor,
+      'stroke-linecap': strokeLinecap,
+      'stroke-width': trailWidth || strokeWidth,
+      'fill-opacity': '0',
      class: `${prefixCls}-circle-trail`,
      style: pathStyle,
    };
--- a/components/vc-progress/src/Line.js
+++ b/components/vc-progress/src/Line.js
@ -3,6 +3,7 @@ import enhancer from './enhancer';
 import { propTypes, defaultProps } from './types';

 const Line = {
+  name: 'Line',
  props: initDefaultProps(propTypes, defaultProps),
  created() {
    this.paths = {};
@ -34,13 +35,11 @@ const Line = {
    let stackPtg = 0;

    const pathFirst = {
-      attrs: {
-        d: pathString,
-        'stroke-linecap': strokeLinecap,
-        stroke: trailColor,
-        'stroke-width': trailWidth || strokeWidth,
-        'fill-opacity': '0',
-      },
+      d: pathString,
+      'stroke-linecap': strokeLinecap,
+      stroke: trailColor,
+      'stroke-width': trailWidth || strokeWidth,
+      'fill-opacity': '0',
      class: `${prefixCls}-line-trail`,
    };
    return (
@ -65,13 +64,11 @@ const Line = {

          const pathProps = {
            key: index,
-            attrs: {
-              d: pathString,
-              'stroke-linecap': strokeLinecap,
-              stroke: color,
-              'stroke-width': strokeWidth,
-              'fill-opacity': '0',
-            },
+            d: pathString,
+            'stroke-linecap': strokeLinecap,
+            stroke: color,
+            'stroke-width': strokeWidth,
+            'fill-opacity': '0',
            class: `${prefixCls}-line-path`,
            style: pathStyle,
          };
--- a/components/vc-progress/src/enhancer.js
+++ b/components/vc-progress/src/enhancer.js
@ -1,6 +1,6 @@
 function enhancer(Component) {
  return {
-    mixins: [Component],
+    ...Component,
    updated() {
      const now = Date.now();
      let updated = false;
--- a/examples/App.vue
+++ b/examples/App.vue
@ -1,11 +1,10 @@
 <template>
  <div>
-    <a-button><span>按钮</span></a-button>
    <demo />
  </div>
 </template>
 <script>
-import demo from '../antdv-demo/docs/upload/demo/drag';
+import demo from '../antdv-demo/docs/progress/demo/index';

 export default {
  components: {
--- a/examples/index.js
+++ b/examples/index.js
@ -1,7 +1,7 @@
 import '@babel/polyfill';
 import { createApp } from 'vue';
 import App from './App.vue';
-import { Button, Upload, Icon, Modal, notification, message } from 'ant-design-vue';
+import { Button, Upload, Icon, Modal, Progress, notification, message } from 'ant-design-vue';
 import 'ant-design-vue/style.js';

 const basic = {
@ -22,4 +22,5 @@ app
  .use(Button)
  .use(Icon)
  .use(Modal)
+  .use(Progress)
  .mount('#app');