@blocklet/ui-react/lib/common/wizard-modal.js

Some useful front-end web components that can be used in Blocklets.

import { jsxs as x, jsx as a } from "react/jsx-runtime";
import { useLocaleContext as T } from "@arcblock/ux/lib/Locale/context";
import { Dialog as R, useTheme as j, useMediaQuery as D, Box as v, CircularProgress as E, Typography as M } from "@mui/material";
import P from "lodash/merge";
import t from "prop-types";
import { useState as h, useRef as b, useEffect as s } from "react";
import { withQuery as A, joinURL as F } from "ufo";
const B = "/.well-known/service/onboard/bind-account";
function Q({
  onFinished: y = () => {
  },
  show: n = !1,
  onChangeVisible: C = () => {
  },
  loadingText: l = "",
  defaultPath: c = B,
  ...d
}) {
  const [r, i] = h(n), [u, f] = h(!1), [k, m] = h(() => {
    const e = localStorage.getItem("wizard-current-url");
    return e?.includes("/.well-known/service/onboard") ? e : c;
  }), z = b(y), p = b(), g = b(null), { locale: I } = T(), L = j(), w = D(L.breakpoints.down("sm"));
  if (z.current = y, p.current = () => {
    if (g.current?.contentWindow)
      try {
        const o = new URL(g.current.contentWindow.location.href).pathname;
        localStorage.setItem("wizard-current-url", o), m(o);
      } catch (e) {
        m(c), console.warn("Failed to save wizard URL:", e);
      }
    localStorage.setItem("wizard-completed", "true"), i(!1), C(!1);
  }, s(() => {
    n !== r && i(n);
  }, [n]), s(() => {
    !r && u && f(!1);
  }, [r]), s(() => {
    const e = (o) => {
      if (o.origin !== window.location.origin)
        return;
      const { type: U, data: W } = o.data || {};
      switch (U) {
        case "wizard.loaded":
          f(!0);
          break;
        case "wizard.finished": {
          i(!1), m(c), localStorage.removeItem("wizard-current-url"), localStorage.setItem("wizard-completed", "true"), z.current?.(W);
          break;
        }
        case "wizard.close": {
          p.current();
          break;
        }
      }
    };
    return window.addEventListener("message", e), () => {
      window.removeEventListener("message", e);
    };
  }, []), s(() => {
    localStorage.getItem("wizard-completed") || i(!0);
  }, []), !r)
    return null;
  const S = A(F(window.location.origin, k), {
    locale: I
  });
  return /* @__PURE__ */ x(
    R,
    {
      id: "wizard-dialog",
      open: r,
      onClose: () => p.current(),
      fullWidth: !0,
      maxWidth: w ? !1 : "md",
      fullScreen: w,
      ...d,
      slotProps: P(
        {},
        {
          paper: {
            sx: {
              margin: 0,
              borderRadius: 0,
              position: "relative",
              overflow: "hidden",
              ...w ? { borderRadius: 0 } : {
                borderRadius: 1,
                height: "720px"
              }
            }
          }
        },
        d.slotProps
      ),
      sx: {
        "& .MuiBackdrop-root": {
          backgroundColor: "rgba(0, 0, 0, 0.5)"
        },
        ...d.sx
      },
      children: [
        /* @__PURE__ */ a(
          "iframe",
          {
            ref: g,
            id: "wizard-iframe",
            src: S,
            title: "Setup Wizard",
            style: {
              width: "100%",
              height: "100%",
              border: 0,
              padding: 0,
              margin: 0,
              opacity: u ? 1 : 0,
              transition: "opacity 0.3s ease-in-out"
            },
            onLoad: () => f(!0)
          }
        ),
        u ? null : /* @__PURE__ */ a(
          v,
          {
            sx: {
              position: "absolute",
              top: 0,
              left: 0,
              right: 0,
              bottom: 0,
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
              bgcolor: "background.paper"
            },
            children: /* @__PURE__ */ x(v, { sx: { display: "flex", alignItems: "center", flexDirection: "column", gap: 1 }, children: [
              /* @__PURE__ */ a(E, {}),
              typeof l == "string" ? /* @__PURE__ */ a(M, { variant: "body1", children: l }) : l
            ] })
          }
        )
      ]
    }
  );
}
Q.propTypes = {
  onFinished: t.func,
  show: t.bool,
  onChangeVisible: t.func,
  loadingText: t.node,
  defaultPath: t.string,
  ...R.propTypes
};
export {
  Q as default
};