From 798aadcc918a6d140f8a660dac93b9a52b020380 Mon Sep 17 00:00:00 2001 From: wangxueliang Date: Thu, 25 Apr 2019 20:23:14 +0800 Subject: [PATCH] feat: update progress --- components/progress/circle.jsx | 68 ++++++++++++++ components/progress/demo/segment.md | 14 ++- components/progress/line.jsx | 46 ++++++++++ components/progress/progress.jsx | 132 +++++++++++----------------- components/progress/utils.js | 8 ++ 5 files changed, 185 insertions(+), 83 deletions(-) create mode 100644 components/progress/circle.jsx create mode 100644 components/progress/line.jsx create mode 100644 components/progress/utils.js diff --git a/components/progress/circle.jsx b/components/progress/circle.jsx new file mode 100644 index 000000000..1f8629e6b --- /dev/null +++ b/components/progress/circle.jsx @@ -0,0 +1,68 @@ +import { Circle as VCCircle } from '../vc-progress'; +import { validProgress } from './utils'; +import { ProgressProps } from './progress'; + +const statusColorMap = { + normal: '#108ee9', + exception: '#ff5500', + success: '#87d068', +}; + +function getPercentage({ percent, successPercent }) { + const ptg = validProgress(percent); + if (!successPercent) return ptg; + + const successPtg = validProgress(successPercent); + return [successPercent, validProgress(ptg - successPtg)]; +} + +function getStrokeColor({ progressStatus, successPercent, strokeColor }) { + const color = strokeColor || statusColorMap[progressStatus]; + if (!successPercent) return color; + 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: circleSize, + height: circleSize, + fontSize: circleSize * 0.15 + 6, + }; + const circleWidth = strokeWidth || 6; + const gapPos = gapPosition || (type === 'dashboard' && 'bottom') || 'top'; + const gapDeg = gapDegree || (type === 'dashboard' && 75); + + return ( +
+ + {children} +
+ ); + }, +}; + +export default Circle; diff --git a/components/progress/demo/segment.md b/components/progress/demo/segment.md index 96bcd52c4..af6272c9c 100644 --- a/components/progress/demo/segment.md +++ b/components/progress/demo/segment.md @@ -10,9 +10,17 @@ A standard progress bar. ```html ``` diff --git a/components/progress/line.jsx b/components/progress/line.jsx new file mode 100644 index 000000000..2a24e52ca --- /dev/null +++ b/components/progress/line.jsx @@ -0,0 +1,46 @@ +import { validProgress } from './utils'; +import { ProgressProps } from './progress'; + +const Line = { + functional: true, + render(h, context) { + const { props, children } = context; + const { + prefixCls, + percent, + successPercent, + strokeWidth, + size, + strokeColor, + strokeLinecap, + } = props; + const percentStyle = { + width: `${validProgress(percent)}%`, + height: strokeWidth || (size === 'small' ? 6 : 8), + background: strokeColor, + borderRadius: strokeLinecap === 'square' ? 0 : '100px', + }; + const successPercentStyle = { + width: `${validProgress(successPercent)}%`, + height: strokeWidth || (size === 'small' ? 6 : 8), + borderRadius: strokeLinecap === 'square' ? 0 : '100px', + }; + const successSegment = + successPercent !== undefined ? ( +
+ ) : null; + return ( +
+
+
+
+ {successSegment} +
+
+ {children} +
+ ); + }, +}; + +export default Line; diff --git a/components/progress/progress.jsx b/components/progress/progress.jsx index 074ccf9a3..a8531da17 100644 --- a/components/progress/progress.jsx +++ b/components/progress/progress.jsx @@ -1,18 +1,16 @@ import classNames from 'classnames'; import PropTypes from '../_util/vue-types'; import { getOptionProps, initDefaultProps } from '../_util/props-util'; +import { ConfigConsumerProps } from '../config-provider'; import Icon from '../icon'; -import { Circle } from '../vc-progress'; +import Line from './line'; +import Circle from './circle'; +import { validProgress } from './utils'; function addUnit(num, unit) { const unitType = unit || 'px'; return num ? num + unitType : null; } -const statusColorMap = { - normal: '#108ee9', - exception: '#ff5500', - success: '#87d068', -}; export const ProgressType = PropTypes.oneOf(['line', 'circle', 'dashboard']); export const ProgressSize = PropTypes.oneOf(['default', 'small']); @@ -35,15 +33,6 @@ export const ProgressProps = { size: ProgressSize, }; -const validProgress = progress => { - if (!progress || progress < 0) { - return 0; - } else if (progress > 100) { - return 100; - } - return progress; -}; - export default { name: 'AProgress', props: initDefaultProps(ProgressProps, { @@ -51,14 +40,39 @@ export default { percent: 0, showInfo: true, trailColor: '#f3f3f3', - prefixCls: 'ant-progress', size: 'default', + gapDegree: 0, + strokeLinecap: 'round', }), + inject: { + configProvider: { default: () => ({}) }, + }, + methods: { + renderProcessInfo(prefixCls, progressStatus) { + const { showInfo, format, type, percent, successPercent } = this.$props; + if (!showInfo) return null; + let text; + const textFormatter = format || (percentNumber => `${percentNumber}%`); + const iconType = type === 'circle' || type === 'dashboard' ? '' : '-circle'; + if (format || (progressStatus !== 'exception' && progressStatus !== 'success')) { + text = textFormatter(validProgress(percent), validProgress(successPercent)); + } else if (progressStatus === 'exception') { + text = ; + } else if (progressStatus === 'success') { + text = ; + } + return ( + + {text} + + ); + }, + }, render() { const props = getOptionProps(this); const { - prefixCls, + prefixCls: customizePrefixCls, percent = 0, status, format, @@ -75,84 +89,42 @@ export default { strokeLinecap = 'round', ...restProps } = props; + const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls; + const prefixCls = getPrefixCls('progress', customizePrefixCls); + const progressStatus = - parseInt(successPercent ? successPercent.toString() : percent.toString(), 10) >= 100 && + parseInt(successPercent !== undefined ? successPercent.toString() : percent.toString(), 10) >= 100 && !('status' in props) ? 'success' : status || 'normal'; - let progressInfo; let progress; - const textFormatter = format || (percentNumber => `${percentNumber}%`); - - if (showInfo) { - let text; - const iconType = type === 'circle' || type === 'dashboard' ? '' : '-circle'; - if (format || (progressStatus !== 'exception' && progressStatus !== 'success')) { - text = textFormatter(validProgress(percent), validProgress(successPercent)); - } else if (progressStatus === 'exception') { - text = ; - } else if (progressStatus === 'success') { - text = ; - } - progressInfo = ( - - {text} - - ); - } + const progressInfo = this.renderProcessInfo(prefixCls, progressStatus); + // Render progress shape if (type === 'line') { - const percentStyle = { - width: `${validProgress(percent)}%`, - height: `${strokeWidth || (size === 'small' ? 6 : 8)}px`, - background: strokeColor, - borderRadius: strokeLinecap === 'square' ? 0 : '100px', - }; - const successPercentStyle = { - width: `${validProgress(successPercent)}%`, - height: `${strokeWidth || (size === 'small' ? 6 : 8)}px`, - borderRadius: strokeLinecap === 'square' ? 0 : '100px', + const lineProps = { + props: { + ...props, + prefixCls, + }, }; - const successSegment = - successPercent !== undefined ? ( -
- ) : null; progress = ( -
-
-
-
- {successSegment} -
-
+ {progressInfo} -
+ ); } else if (type === 'circle' || type === 'dashboard') { - const circleSize = width || 120; - const circleStyle = { - width: addUnit(circleSize), - height: addUnit(circleSize), - fontSize: addUnit(circleSize * 0.15 + 6), + const circleProps = { + props: { + ...props, + prefixCls, + progressStatus, + }, }; - const circleWidth = strokeWidth || 6; - const gapPos = gapPosition || (type === 'dashboard' && 'bottom') || 'top'; - const gapDeg = gapDegree || (type === 'dashboard' && 75); progress = ( -
- + {progressInfo} -
+ ); } diff --git a/components/progress/utils.js b/components/progress/utils.js new file mode 100644 index 000000000..aa5fa6ccb --- /dev/null +++ b/components/progress/utils.js @@ -0,0 +1,8 @@ +export function validProgress(progress) { + if (!progress || progress < 0) { + return 0; + } else if (progress > 100) { + return 100; + } + return progress; +};