diff --git a/components/vc-progress/assets/index.less b/components/vc-progress/assets/index.less new file mode 100644 index 000000000..e69de29bb diff --git a/components/vc-progress/demo/fast-progress.jsx b/components/vc-progress/demo/fast-progress.jsx new file mode 100644 index 000000000..ba34dbedf --- /dev/null +++ b/components/vc-progress/demo/fast-progress.jsx @@ -0,0 +1,42 @@ +import { Line, Circle } from '../index' +import '../assets/index.less' + +export default { + data () { + return { + percent: 0, + } + }, + mounted () { + this.$nextTick(() => { + this.increase() + }) + }, + methods: { + increase () { + const percent = this.percent + 1 + if (percent >= 100) { + clearTimeout(this.tm) + return + } + this.percent = percent + this.tm = setTimeout(this.increase, 10) + }, + restart () { + clearTimeout(this.tm) + this.percent = 0 + this.$nextTick(() => { + this.increase() + }) + }, + }, + render () { + return ( +
+ + + +
+ ) + }, +} diff --git a/components/vc-progress/demo/gap.jsx b/components/vc-progress/demo/gap.jsx new file mode 100644 index 000000000..d13fe2ba4 --- /dev/null +++ b/components/vc-progress/demo/gap.jsx @@ -0,0 +1,72 @@ +import { Circle } from '../index' +import '../assets/index.less' + +export default { + data () { + return { + percent: 30, + color: '#3FC7FA', + } + }, + methods: { + changeState () { + const colorMap = ['#3FC7FA', '#85D262', '#FE8C6A'] + const value = parseInt(Math.random() * 100, 10) + this.percent = value + this.color = colorMap[parseInt(Math.random() * 3, 10)] + }, + }, + render () { + const circleContainerStyle = { + width: '200px', + height: '200px', + } + return ( +
+
+ +
+
+ +
+
+ +
+
+ +
+

+ +

+
+ ) + }, +} diff --git a/components/vc-progress/demo/simple.jsx b/components/vc-progress/demo/simple.jsx new file mode 100644 index 000000000..4cacef15e --- /dev/null +++ b/components/vc-progress/demo/simple.jsx @@ -0,0 +1,49 @@ +import { Line, Circle } from '../index' +import '../assets/index.less' + +export default { + data () { + return { + percent: 30, + color: '#3FC7FA', + } + }, + methods: { + changeState () { + const colorMap = ['#3FC7FA', '#85D262', '#FE8C6A'] + const value = parseInt(Math.random() * 100, 10) + this.percent = value + this.color = colorMap[parseInt(Math.random() * 3, 10)] + }, + }, + render () { + const containerStyle = { + width: '250px', + } + const circleContainerStyle = { + width: '250px', + height: '250px', + display: 'inline-block', + } + return ( +
+

Line Progress {this.percent}%

+
+ +
+

Circle Progress {this.percent}%

+
+ +
+

+ +

+
+ ) + }, +} diff --git a/components/vc-progress/index.js b/components/vc-progress/index.js new file mode 100644 index 000000000..84efef7a6 --- /dev/null +++ b/components/vc-progress/index.js @@ -0,0 +1,8 @@ +import Progress, { Line, Circle } from './src/'; + +export { + Line, + Circle, +}; + +export default Progress; diff --git a/components/vc-progress/src/Circle.js b/components/vc-progress/src/Circle.js new file mode 100644 index 000000000..f491694f0 --- /dev/null +++ b/components/vc-progress/src/Circle.js @@ -0,0 +1,111 @@ +import PropTypes from '../../_util/vue-types' +import { initDefaultProps } from '../../_util/props-util' +import enhancer from './enhancer' +import { propTypes, defaultProps } from './types' + +const circlePropTypes = { + ...propTypes, + gapPosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right']), + gapDegree: PropTypes.number, +} + +const circleDefaultProps = { + ...defaultProps, + gapPosition: 'top', +} + +const Circle = { + props: initDefaultProps(circlePropTypes, circleDefaultProps), + methods: { + getPathStyles () { + const { percent, strokeWidth, gapDegree = 0, gapPosition } = this.$props + const radius = 50 - (strokeWidth / 2) + let beginPositionX = 0 + let beginPositionY = -radius + let endPositionX = 0 + let endPositionY = -2 * radius + switch (gapPosition) { + case 'left': + beginPositionX = -radius + beginPositionY = 0 + endPositionX = 2 * radius + endPositionY = 0 + break + case 'right': + beginPositionX = radius + beginPositionY = 0 + endPositionX = -2 * radius + endPositionY = 0 + break + case 'bottom': + beginPositionY = radius + endPositionY = 2 * radius + break + default: + } + const pathString = `M 50,50 m ${beginPositionX},${beginPositionY} + 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 = { + strokeDasharray: `${(percent / 100) * (len - gapDegree)}px ${len}px`, + strokeDashoffset: `-${gapDegree / 2}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 } + }, + }, + render () { + const { + prefixCls, strokeWidth, trailWidth, strokeColor, + trailColor, strokeLinecap, percent, ...restProps + } = this.$props + const { pathString, trailPathStyle, strokePathStyle } = this.getPathStyles() + delete restProps.percent + delete restProps.gapDegree + delete restProps.gapPosition + const pathFirst = { + attrs: { + 'd': pathString, + 'stroke': trailColor, + 'stroke-width': trailWidth || strokeWidth, + 'fill-opacity': '0', + }, + class: `${prefixCls}-circle-trail`, + style: trailPathStyle, + } + const pathSecond = { + attrs: { + 'd': pathString, + 'stroke-linecap': strokeLinecap, + 'stroke': strokeColor, + 'stroke-width': percent === 0 ? 0 : strokeWidth, + 'fill-opacity': '0', + }, + class: `${prefixCls}-circle-path`, + style: strokePathStyle, + ref: 'svgPathRef', + } + return ( + + + + + ) + }, +} + +export default enhancer(Circle) diff --git a/components/vc-progress/src/Line.js b/components/vc-progress/src/Line.js new file mode 100644 index 000000000..3beff0df0 --- /dev/null +++ b/components/vc-progress/src/Line.js @@ -0,0 +1,73 @@ +import { initDefaultProps } from '../../_util/props-util' +import enhancer from './enhancer' +import { propTypes, defaultProps } from './types' + +const Line = { + props: initDefaultProps(propTypes, defaultProps), + render () { + const { + percent, + prefixCls, + strokeColor, + strokeLinecap, + strokeWidth, + trailColor, + trailWidth, + ...restProps + } = this.$props + + delete restProps.gapPosition + + const pathStyle = { + strokeDasharray: '100px, 100px', + strokeDashoffset: `${(100 - percent)}px`, + transition: 'stroke-dashoffset 0.3s ease 0s, stroke 0.3s linear', + } + + const center = strokeWidth / 2 + const right = 100 - (strokeWidth / 2) + const pathString = + `M ${strokeLinecap === 'round' ? center : 0},${center} + L ${strokeLinecap === 'round' ? right : 100},${center}` + const viewBoxString = `0 0 100 ${strokeWidth}` + const pathFirst = { + attrs: { + 'd': pathString, + 'stroke-linecap': strokeLinecap, + 'stroke': trailColor, + 'stroke-width': trailWidth || strokeWidth, + 'fill-opacity': '0', + }, + 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 ( + + + + + ) + }, +} + +export default enhancer(Line) diff --git a/components/vc-progress/src/enhancer.js b/components/vc-progress/src/enhancer.js new file mode 100644 index 000000000..c4340b88d --- /dev/null +++ b/components/vc-progress/src/enhancer.js @@ -0,0 +1,21 @@ +function enhancer (Component) { + return { + 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' + } + this.prevTimeStamp = Date.now() + }) + }, + } +} + +export default enhancer diff --git a/components/vc-progress/src/index.js b/components/vc-progress/src/index.js new file mode 100644 index 000000000..490ffd045 --- /dev/null +++ b/components/vc-progress/src/index.js @@ -0,0 +1,12 @@ +import Line from './Line' +import Circle from './Circle' + +export { + Line, + Circle, +} + +export default { + Line, + Circle, +} diff --git a/components/vc-progress/src/types.js b/components/vc-progress/src/types.js new file mode 100644 index 000000000..03e54203f --- /dev/null +++ b/components/vc-progress/src/types.js @@ -0,0 +1,25 @@ +import PropTypes from '../../_util/vue-types' + +export const defaultProps = { + // className: '', + percent: 0, + prefixCls: 'rc-progress', + strokeColor: '#2db7f5', + strokeLinecap: 'round', + strokeWidth: 1, + // style: {}, + trailColor: '#D9D9D9', + trailWidth: 1, +} + +export const propTypes = { + // className: PropTypes.string, + percent: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + prefixCls: PropTypes.string, + strokeColor: PropTypes.string, + strokeLinecap: PropTypes.oneOf(['butt', 'round', 'square']), + strokeWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + // style: PropTypes.object, + trailColor: PropTypes.string, + trailWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), +} diff --git a/components/vc-slider/src/common/createSlider.jsx b/components/vc-slider/src/common/createSlider.jsx index 899da3afe..b1d0c86c9 100644 --- a/components/vc-slider/src/common/createSlider.jsx +++ b/components/vc-slider/src/common/createSlider.jsx @@ -13,7 +13,6 @@ function noop () {} export default function createSlider (Component) { // const displayName = `ComponentEnhancer(${Component.displayName})` const propTypes = { - ...Component.propTypes, min: PropTypes.number, max: PropTypes.number, step: PropTypes.number, @@ -41,7 +40,6 @@ export default function createSlider (Component) { event: 'change', }, props: initDefaultProps(propTypes, { - ...Component.defaultProps, prefixCls: 'rc-slider', min: 0, max: 100, diff --git a/examples/routes.js b/examples/routes.js index 674f13d15..bc9c6245d 100644 --- a/examples/routes.js +++ b/examples/routes.js @@ -3,7 +3,7 @@ const AsyncComp = () => { const hashs = window.location.hash.split('/') const d = hashs[hashs.length - 1] return { - component: import(`../components/table/demo/${d}`), + component: import(`../components/vc-progress/demo/${d}`), } } export default [