CircularProgress

import * as React from 'react';
 
/**
 * TofuUI CircularProgress 数据Icon
 * @author shuakami
 * @version 1.0.0
 * @copyright ByteFreeze&TofuUI
 * ️ 🤔移植自@material-ui/core/CircularProgress 🐳支持传入style
 */
 
/**
 * ⚠️免责声明：
 * 本组件是基于 @material-ui/core 的 CircularProgress 组件进行的本地化和修改。
 * 本组件的初始代码来源于使用 MIT 许可证的开源项目 @material-ui/core。
 * 本组件的所有修改和自定义实现均由<shuakami>完成，与原始作者或原项目无关。
 * 对于因使用本组件可能引起的任何形式的损害或法律问题，本人不承担任何责任。
 * 使用者应在遵守适用法律和规定的前提下使用本组件。
 *
 * Disclaimer:
 * This component is a locally modified and optimized version of the CircularProgress component from @material-ui/core.
 * The initial code of this component is based on the open-source project @material-ui/core, which is licensed under the MIT License.
 * All modifications and custom implementations of this component have been made by <shuakami> and are not associated with the original authors or the original project.
 * I am not responsible for any form of damage or legal issues that may arise from the use of this component.
 * Users should use this component in compliance with applicable laws and regulations.
 */
 
 
interface CircularProgressProps {
    color?: 'primary' | 'secondary' | 'inherit';
    disableShrink?: boolean;
    size?: number | string;
    thickness?: number;
    value?: number;
    variant?: 'determinate' | 'indeterminate' | 'static';
    style?: React.CSSProperties;
}
 
const SIZE = 44;
 
const CircularProgress: React.FC<CircularProgressProps> = ({
                                                               color = 'primary',
                                                               disableShrink = false,
                                                               size = 40,
                                                               thickness = 3.6,
                                                               value = 0,
                                                               variant = 'indeterminate',
                                                               style
                                                           }) => {
    const circleStyle: React.CSSProperties = {};
    const rootStyle: React.CSSProperties = {};
    const rootProps: { 'aria-valuenow'?: number } = {};
 
    if (variant === 'determinate' || variant === 'static') {
        const circumference = 2 * Math.PI * ((SIZE - thickness) / 2);
        circleStyle.strokeDasharray = `${circumference.toFixed(3)}px`;
        rootProps['aria-valuenow'] = Math.round(value);
        circleStyle.strokeDashoffset = `${((100 - value) / 100 * circumference).toFixed(3)}px`;
        rootStyle.transform = 'rotate(-90deg)';
    }
 
    return (
        <div
            style={{
                width: size,
                height: size,
                color: color === 'primary' ? '#0072F5' : color === 'secondary' ? '#F50057' : 'inherit',
                display: 'inline-block',
                ...style,
                ...rootStyle
            }}
            role="progressbar"
            {...rootProps}
        >
            <svg
                style={{
                    display: 'block',
                    width: '100%',
                    height: '100%'
                }}
                viewBox={`${SIZE / 2} ${SIZE / 2} ${SIZE} ${SIZE}`}
            >
                <circle
                    style={{
                        stroke: 'currentColor',
                        strokeLinecap: 'butt',
                        fill: 'none',
                        strokeWidth: thickness,
                        ...circleStyle
                    }}
                    cx={SIZE}
                    cy={SIZE}
                    r={(SIZE - thickness) / 2}
                />
            </svg>
        </div>
    );
};
 
export default CircularProgress;