@kloudlite/design-system/mjs/atoms/pulsable.js

A design system for building ambitious products.

"use client";

// components/atoms/pulsable.tsx
import { useEffect, useRef, useState } from "react";

// components/utils.tsx
import classNames from "classnames";
import { useMemo } from "react";
import { v4 } from "uuid";
var cn = (...props) => {
  return classNames(...props);
};

// components/atoms/pulsable.tsx
import { jsx } from "react/jsx-runtime";
var Pulsable = ({
  children,
  isLoading
}) => {
  const ref = useRef(null);
  const [isCalculating, setCalculating] = useState(true);
  useEffect(() => {
    setCalculating(true);
    if (isLoading) {
      if (!ref.current) {
        return;
      }
      const docs = ref.current.querySelectorAll(".pulsable");
      docs.forEach((element) => {
        element.classList.add("pulse-element");
        element.childNodes.forEach((ch) => {
          if (ch.classList && !ch.classList.contains("pulse-child")) {
            ch.classList?.add("pulse-child-element");
            logger.log(ch?.getAttribute("disabled"));
          }
        });
        const pc = element.querySelector(".pulse-child");
        if (!pc) {
          const pulseEl = document.createElement("div");
          pulseEl.classList.add(
            "absolute",
            "z-20",
            "!bg-[#bebebe82]",
            "animate-pulse",
            "w-full",
            "h-full",
            "inset-0",
            "rounded",
            "pulse-child"
          );
          element.appendChild(pulseEl);
        }
      });
      setCalculating(false);
    } else {
      if (!ref.current) {
        return;
      }
      const pc = ref.current.querySelectorAll(".pulse-child");
      pc.forEach((v) => {
        v.parentNode?.removeChild(v);
      });
      const pc2 = ref.current.querySelectorAll(".pulse-element");
      pc2.forEach((v) => {
        v.classList.remove("pulse-element");
      });
      const docs = ref.current.querySelectorAll(".pulsable");
      docs.forEach((element) => {
        element.childNodes.forEach((ch) => {
          ch.classList?.remove("pulse-child-element");
          if (!ch?.classList.contains("pulse-has-disabled-attr")) {
            ch?.removeAttribute("disabled");
          }
        });
      });
      setCalculating(false);
    }
  }, [isLoading, ref.current]);
  return /* @__PURE__ */ jsx(
    "div",
    {
      ref,
      className: cn("pulse-container", {
        "kl-opacity-0 kl-transition-all": isLoading && isCalculating
      }),
      children
    }
  );
};
var pulsable_default = Pulsable;
export {
  pulsable_default as default
};