@drivy/cobalt/components/ProgressCircular/index.js

Opinionated design system for Drivy's projects.

import { jsxs, jsx } from 'react/jsx-runtime';
import cx from 'classnames';
import { useRef, useLayoutEffect } from 'react';

const ProgressCircular = ({ progress, size, status = "info", animated = false, className, children, }) => {
    const pathRef = useRef(null);
    useLayoutEffect(() => {
        if (!pathRef.current)
            return;
        const length = pathRef.current.getTotalLength();
        const value = progress;
        const to = length * ((100 - value) / 100);
        // Trigger Layout in Safari hack https://jakearchibald.com/2013/animated-line-drawing-svg/
        pathRef.current.getBoundingClientRect();
        pathRef.current.style.strokeDashoffset = `${Math.max(0, to)}`;
    }, [progress]);
    return (jsxs("div", { className: cx(`cobalt-circularProgressBar cobalt-circularProgressBar--size${size}`, className, {
            "cobalt-circularProgressBar--animated": animated,
            [`cobalt-circularProgressBar--${status}`]: status,
        }), children: [jsx("div", { className: "cobalt-circularProgressBar__content", children: children }), jsxs("svg", { viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "none", children: [jsx("title", { children: children }), jsx("path", { ref: pathRef, className: "cobalt-circularProgressBar__bar", d: "M5,50a45,45 0 1,0 90,0a45,45 0 1,0 -90,0", strokeLinecap: "round", strokeLinejoin: "round", strokeDashoffset: "282.78302001953125", strokeDasharray: "282.78302001953125" })] })] }));
};

export { ProgressCircular };
//# sourceMappingURL=index.js.map