chowa
Version:
UI component library based on React
170 lines (169 loc) • 7.32 kB
JavaScript
/**
* @license chowa v1.1.3
*
* Copyright (c) Chowa Techonlogies Co.,Ltd.(http://www.chowa.cn).
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
;
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const PropTypes = require("prop-types");
const classnames_1 = require("classnames");
const utils_1 = require("../utils");
const icon_1 = require("../icon");
class Progress extends React.PureComponent {
renderInfo() {
const { showInfo, formatter, status, percent, mode } = this.props;
if (!showInfo) {
return null;
}
if ((status === 'normal' || status === 'active') && percent !== 100) {
return (React.createElement("div", { className: utils_1.preClass(`progress-${mode}-percent`) }, formatter ? formatter(percent) : `${percent}%`));
}
const notStatus = percent === 100 ? 'success' : status;
const iconType = mode === 'line'
? notStatus === 'success' ? 'success-fill' : 'error-fill'
: notStatus === 'success' ? 'check' : 'close';
return (React.createElement("div", { className: utils_1.preClass(`progress-${mode}-status`) },
React.createElement(icon_1.default, { type: iconType })));
}
compileCircleGradient() {
const { storkeColor } = this.props;
if (!storkeColor) {
return null;
}
const percentGradient = [];
if (typeof storkeColor === 'string') {
percentGradient.push({
percentage: '0%',
color: storkeColor
});
percentGradient.push({
percentage: '100%',
color: storkeColor
});
}
else if (utils_1.hasProperty(storkeColor, 'from') && utils_1.hasProperty(storkeColor, 'to')) {
percentGradient.push({
percentage: '0%',
color: storkeColor.from
});
percentGradient.push({
percentage: '100%',
color: storkeColor.to
});
}
else {
for (const percentage in storkeColor) {
if (isNaN(parseInt(percentage.replace('%', ''), 10))) {
continue;
}
percentGradient.push({
percentage,
color: storkeColor[percentage]
});
}
}
return (React.createElement("defs", null,
React.createElement("linearGradient", { id: 'circle-gradient', x1: '0%', y1: '0%', x2: '100%', y2: '0%' }, percentGradient.map(({ percentage, color }, key) => (React.createElement("stop", { offset: percentage, stopColor: color, key: key }))))));
}
renderCircle(componentClass) {
const { strokeWidth, percent, strokeLinecap, storkeColor, style } = this.props;
const radius = 50;
const outPoint = radius - strokeWidth / 2;
const pathStr = `M ${radius},
${radius} m 0,
-${outPoint} a ${outPoint},
${outPoint} 0 1 1 0,
${2 * outPoint} a ${outPoint},
${outPoint} 0 1 1 0,
-${2 * outPoint}`;
const pos = Math.PI * 2 * outPoint;
const pathStyle = {
strokeDasharray: `${pos}px ${pos}px`,
strokeDashoffset: `${(100 - percent) / 100 * pos}px`
};
const fillClass = classnames_1.default({
[utils_1.preClass('progress-circle-fill')]: true,
[utils_1.preClass('progress-circle-gradient')]: storkeColor && typeof storkeColor !== 'string'
});
return (React.createElement("div", { style: style, className: componentClass },
React.createElement("svg", { viewBox: `0 0 ${radius * 2} ${radius * 2}`, className: utils_1.preClass('progress-svg') },
this.compileCircleGradient(),
React.createElement("path", { className: utils_1.preClass('progress-circle-track'), d: pathStr, strokeWidth: strokeWidth, fillOpacity: 0 }),
React.createElement("path", { className: fillClass, d: pathStr, strokeWidth: strokeWidth, style: pathStyle, strokeLinecap: strokeLinecap, fillOpacity: 0 })),
this.renderInfo()));
}
compileLineGradient() {
const { storkeColor } = this.props;
if (!storkeColor) {
return {};
}
if (typeof storkeColor === 'string') {
return { backgroundColor: storkeColor };
}
const gradients = [];
if (utils_1.hasProperty(storkeColor, 'from') && utils_1.hasProperty(storkeColor, 'to')) {
gradients.push(`${storkeColor.from} 0%`);
gradients.push(`${storkeColor.to} 100%`);
}
else {
for (const percentage in storkeColor) {
if (isNaN(parseInt(percentage.replace('%', ''), 10))) {
continue;
}
gradients.push(`${storkeColor[percentage]} ${percentage}`);
}
}
return {
backgroundImage: `linear-gradient(to right, ${gradients.join(', ')})`
};
}
renderLine(componentClass) {
const { strokeWidth, percent, strokeLinecap, style } = this.props;
const bgStyle = this.compileLineGradient();
const raduisStyle = { borderRadius: strokeLinecap === 'round' ? strokeWidth : 0 };
const lineStyle = Object.assign(Object.assign({ height: strokeWidth, width: `${percent}%`, borderRadius: strokeLinecap === 'round' ? strokeWidth : 0 }, raduisStyle), bgStyle);
return (React.createElement("div", { className: componentClass, style: style },
React.createElement("div", { className: utils_1.preClass('progress-inner'), style: raduisStyle },
React.createElement("div", { className: utils_1.preClass('progress-bg'), style: lineStyle })),
this.renderInfo()));
}
render() {
const { className, mode, percent, status } = this.props;
const componentClass = classnames_1.default({
[utils_1.preClass('progress')]: true,
[utils_1.preClass(`progress-${mode}`)]: true,
[utils_1.preClass(`progress-${status}`)]: status !== 'normal' && percent !== 100,
[utils_1.preClass('progress-success')]: percent === 100,
[className]: utils_1.isExist(className)
});
if (mode === 'circle') {
return this.renderCircle(componentClass);
}
return this.renderLine(componentClass);
}
}
Progress.propTypes = {
className: PropTypes.string,
style: PropTypes.object,
percent: PropTypes.number,
showInfo: PropTypes.bool,
strokeWidth: PropTypes.number,
mode: PropTypes.oneOf(['line', 'circle']),
strokeLinecap: PropTypes.oneOf(['square', 'round']),
status: PropTypes.oneOf(['normal', 'active', 'success', 'exception']),
formatter: PropTypes.func,
storkeColor: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
};
Progress.defaultProps = {
percent: 0,
status: 'normal',
showInfo: true,
strokeWidth: 6,
mode: 'line',
strokeLinecap: 'round'
};
exports.default = Progress;