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

Opinionated design system for Drivy's projects.

import React, { useRef, useLayoutEffect } from 'react';
import cx from 'classnames';

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);
    }, []);
    return (React.createElement("div", { className: cx(`cobalt-circularProgressBar cobalt-circularProgressBar--size${size}`, className, {
            "cobalt-circularProgressBar--animated": animated,
            [`cobalt-circularProgressBar--${status}`]: status,
        }) },
        React.createElement("div", { className: "cobalt-circularProgressBar__content" }, children),
        React.createElement("svg", { viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "none" },
            React.createElement("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