35 lines
1.6 KiB
React
35 lines
1.6 KiB
React
import React from 'react';
|
|
import './ProgressVariants.css';
|
|
|
|
const R = 42;
|
|
const CIRC = 2 * Math.PI * R;
|
|
const COLORS = { success: '#52C41A', warning: '#FA8C16', error: '#F5222D', normal: '#2F54EB' };
|
|
|
|
export default function ProgressVariants({ type = 'line', percent = 0, status = 'normal', showInfo = true }) {
|
|
const color = COLORS[status] || COLORS.normal;
|
|
if (type === 'line') {
|
|
return (
|
|
<div className={'aa-progress is-' + status}>
|
|
<div className="aa-progress-line-wrap">
|
|
<div className="aa-progress-line"><div className="aa-progress-line-fill" style={{ width: percent + '%' }} /></div>
|
|
{showInfo ? <span className="aa-progress-text">{status === 'success' ? '完成' : percent + '%'}</span> : null}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
const isDash = type === 'dashboard';
|
|
const arcLen = isDash ? CIRC * 0.75 : CIRC;
|
|
return (
|
|
<div className={'aa-progress-circle' + (status !== 'normal' ? ' is-' + status : '')}>
|
|
<svg width="100" height="100" viewBox="0 0 100 100">
|
|
<circle cx="50" cy="50" r={R} fill="none" stroke="#E8ECF1" strokeWidth="8"
|
|
strokeDasharray={CIRC} strokeDashoffset={isDash ? CIRC * 0.25 : 0} />
|
|
<circle cx="50" cy="50" r={R} fill="none" stroke={color} strokeWidth="8" strokeLinecap="round"
|
|
strokeDasharray={arcLen} strokeDashoffset={arcLen * (1 - percent / 100)}
|
|
transform={isDash ? 'rotate(135 50 50)' : 'rotate(-90 50 50)'} />
|
|
</svg>
|
|
{showInfo ? <span className="aa-progress-circle-text">{percent}%</span> : null}
|
|
</div>
|
|
);
|
|
}
|