mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-02 12:07:54 +08:00
feat: update progress
This commit is contained in:
wangxueliang
parent
4193d246ba
commit
798aadcc91
68
components/progress/circle.jsx
Normal file
68
components/progress/circle.jsx
Normal file
@ -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 (
|
||||
<div class={`${prefixCls}-inner`} style={circleStyle}>
|
||||
<VCCircle
|
||||
percent={getPercentage(props)}
|
||||
strokeWidth={circleWidth}
|
||||
trailWidth={circleWidth}
|
||||
strokeColor={getStrokeColor(props)}
|
||||
strokeLinecap={strokeLinecap}
|
||||
trailColor={trailColor}
|
||||
prefixCls={prefixCls}
|
||||
gapDegree={gapDeg}
|
||||
gapPosition={gapPos}
|
||||
/>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export default Circle;
|
||||
@ -10,9 +10,17 @@ A standard progress bar.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<a-tooltip title="3 done / 3 in progress / 4 to do">
|
||||
<a-progress :percent="60" :successPercent="30" />
|
||||
</a-tooltip>
|
||||
<div>
|
||||
<a-tooltip title="3 done / 3 in progress / 4 to do">
|
||||
<a-progress :percent="60" :successPercent="30" />
|
||||
</a-tooltip>
|
||||
<a-tooltip title="3 done / 3 in progress / 4 to do">
|
||||
<a-progress :percent="60" :successPercent="30" type="circle" />
|
||||
</a-tooltip>
|
||||
<a-tooltip title="3 done / 3 in progress / 4 to do">
|
||||
<a-progress :percent="60" :successPercent="30" type="dashboard" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
|
||||
46
components/progress/line.jsx
Normal file
46
components/progress/line.jsx
Normal file
@ -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 ? (
|
||||
<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>
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export default Line;
|
||||
@ -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 = <Icon type={`close${iconType}`} theme={type === 'line' ? 'filled' : 'outlined'} />;
|
||||
} else if (progressStatus === 'success') {
|
||||
text = <Icon type={`check${iconType}`} theme={type === 'line' ? 'filled' : 'outlined'} />;
|
||||
}
|
||||
return (
|
||||
<span class={`${prefixCls}-text`} title={typeof text === 'string' ? text : undefined}>
|
||||
{text}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
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 = <Icon type={`close${iconType}`} theme={type === 'line' ? 'filled' : 'outlined'} />;
|
||||
} else if (progressStatus === 'success') {
|
||||
text = <Icon type={`check${iconType}`} theme={type === 'line' ? 'filled' : 'outlined'} />;
|
||||
}
|
||||
progressInfo = (
|
||||
<span class={`${prefixCls}-text`} title={typeof text === 'string' ? text : undefined}>
|
||||
{text}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
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 lineProps = {
|
||||
props: {
|
||||
...props,
|
||||
prefixCls,
|
||||
},
|
||||
};
|
||||
const successPercentStyle = {
|
||||
width: `${validProgress(successPercent)}%`,
|
||||
height: `${strokeWidth || (size === 'small' ? 6 : 8)}px`,
|
||||
borderRadius: strokeLinecap === 'square' ? 0 : '100px',
|
||||
};
|
||||
const successSegment =
|
||||
successPercent !== undefined ? (
|
||||
<div class={`${prefixCls}-success-bg`} style={successPercentStyle} />
|
||||
) : null;
|
||||
progress = (
|
||||
<div>
|
||||
<div class={`${prefixCls}-outer`}>
|
||||
<div class={`${prefixCls}-inner`}>
|
||||
<div class={`${prefixCls}-bg`} style={percentStyle} />
|
||||
{successSegment}
|
||||
</div>
|
||||
</div>
|
||||
<Line {...lineProps}>
|
||||
{progressInfo}
|
||||
</div>
|
||||
</Line>
|
||||
);
|
||||
} 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 = (
|
||||
<div class={`${prefixCls}-inner`} style={circleStyle}>
|
||||
<Circle
|
||||
percent={validProgress(percent)}
|
||||
strokeWidth={circleWidth}
|
||||
trailWidth={circleWidth}
|
||||
strokeColor={strokeColor || statusColorMap[progressStatus]}
|
||||
strokeLinecap={strokeLinecap}
|
||||
trailColor={trailColor}
|
||||
prefixCls={prefixCls}
|
||||
gapDegree={gapDeg || 0}
|
||||
gapPosition={gapPos}
|
||||
/>
|
||||
<Circle {...circleProps}>
|
||||
{progressInfo}
|
||||
</div>
|
||||
</Circle>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
8
components/progress/utils.js
Normal file
8
components/progress/utils.js
Normal file
@ -0,0 +1,8 @@
|
||||
export function validProgress(progress) {
|
||||
if (!progress || progress < 0) {
|
||||
return 0;
|
||||
} else if (progress > 100) {
|
||||
return 100;
|
||||
}
|
||||
return progress;
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user