@serendie/ui/dist/components/ProgressIndicator/AnimatedArc.js

Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric

import { jsx as R } from "react/jsx-runtime";
import e from "react";
import { getAnimatedArcProps as P } from "./animatedArcProps.js";
const F = 2.5, E = ({ className: l, radius: u, width: o, progress: t }) => {
  const [s, m] = e.useState(0), r = e.useRef(null), n = e.useRef(null);
  e.useEffect(() => {
    if (t != null)
      return;
    const a = (c) => {
      r.current == null && (r.current = c);
      const d = (c - r.current) / 1e3;
      r.current = c;
      const A = d / F;
      m((p) => (p + A) % 1), n.current = requestAnimationFrame(a);
    };
    return n.current = requestAnimationFrame(a), () => {
      n.current != null && cancelAnimationFrame(n.current);
    };
  }, [t]);
  const { d: f, rotationDeg: i } = e.useMemo(
    () => P({
      progress: t ?? s,
      radius: u,
      width: o
    }),
    [t, s, u, o]
  );
  return /* @__PURE__ */ R(
    "path",
    {
      d: f,
      transform: `rotate(${i})`,
      strokeLinecap: "butt",
      stroke: "currentColor",
      strokeWidth: o,
      fill: "none",
      className: l
    }
  );
};
export {
  E as AnimatedArc
};