zent/es/progress/Progress.js

一套前端设计语言和基于React的实现

import { __assign, __rest } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { useMemo } from 'react';
import cx from 'classnames';
import { defaultFormat, avaliableStatus } from './constants';
import CircleProgress from './components/CircleProgress';
import LineProgress from './components/LineProgress';
export var Progress = function (props) {
    var _a = props, type = _a.type, status = _a.status, percent = _a.percent, className = _a.className, normalColor = _a.normalColor, successColor = _a.successColor, exceptionColor = _a.exceptionColor, bgColor = _a.bgColor, format = _a.format, showInfo = _a.showInfo, strokeWidth = _a.strokeWidth, width = _a.width, strokeLinecap = _a.strokeLinecap, divAttrs = __rest(_a, ["type", "status", "percent", "className", "normalColor", "successColor", "exceptionColor", "bgColor", "format", "showInfo", "strokeWidth", "width", "strokeLinecap"]);
    var state = useMemo(function () {
        if (avaliableStatus.indexOf(status) !== -1) {
            return status;
        }
        return percent >= 100 ? 'success' : 'normal';
    }, [status, percent]);
    var currentColor = {
        exception: exceptionColor,
        success: successColor,
        normal: normalColor,
    }[state];
    var percentValue = useMemo(function () {
        if (percent < 0) {
            return 0;
        }
        if (percent > 100) {
            return 100;
        }
        return percent;
    }, [percent]);
    var ProgressComponent;
    switch (type) {
        case 'circle':
            ProgressComponent = CircleProgress;
            break;
        case 'line':
        default:
            ProgressComponent = LineProgress;
            break;
    }
    var containerCls = cx('zent-progress', "zent-progress-type__" + type, "zent-progress-state__" + state, className);
    return (_jsx("div", __assign({ className: containerCls }, divAttrs, { "data-zv": '10.0.17' }, { children: _jsx(ProgressComponent, { percent: percentValue, showInfo: showInfo, strokeWidth: strokeWidth, width: width, bgColor: bgColor, format: format, color: currentColor, state: state, strokeLinecap: strokeLinecap }, void 0) }), void 0));
};
Progress.defaultProps = {
    type: 'line',
    percent: 0,
    showInfo: true,
    strokeWidth: 8,
    strokeLinecap: 'round',
    format: defaultFormat,
};
export default Progress;