@blocklet/ui-react/lib/ComponentInstaller/index.js

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

import { jsx as e, jsxs as r, Fragment as x } from "react/jsx-runtime";
import { SessionContext as j } from "@arcblock/did-connect/lib/Session";
import { useLocaleContext as M } from "@arcblock/ux/lib/Locale/context";
import { translate as R } from "@arcblock/ux/lib/Locale/util";
import W from "@arcblock/ux/lib/SessionPermission";
import { Icon as y } from "@iconify/react";
import { Close as w } from "@mui/icons-material";
import { ClickAwayListener as q, Fade as A, Paper as F, Box as n, IconButton as b } from "@mui/material";
import { useMemoizedFn as N } from "ahooks";
import o from "prop-types";
import { use as O } from "react";
import Y from "./installer-item.js";
import P from "./locales.js";
import $ from "./use-component-installed.js";
function c({
  warnIcon: l = null,
  did: m,
  noPermissionMute: I = !1,
  onInstalled: C = null,
  onError: S = null,
  children: a,
  closeByOutSize: k = !1,
  onClose: d = null,
  fallback: p = null,
  disabled: v = !1,
  roles: z = ["owner", "admin"]
}) {
  const { locale: L } = M(), s = N((i, t = {}) => R(P, i, L, "en", t)), { installed: T, optComponents: u, installStatus: g, definedInBlockletYML: D } = $({
    did: m,
    onInstalled: C,
    onError: S
  }), B = O(j), f = () => {
    d?.(!1);
  };
  return v ? a : /* @__PURE__ */ e(W, { session: B?.session, roles: z, children: ({ hasPermission: i }) => T ? a : I && !i ? p || null : typeof a == "function" ? /* @__PURE__ */ r(x, { children: [
    p,
    a({
      hasPermission: i,
      optComponents: u,
      installStatus: g
    })
  ] }) : /* @__PURE__ */ r(x, { children: [
    p,
    /* @__PURE__ */ e(
      q,
      {
        onClickAway: (t) => {
          t.preventDefault(), t.stopPropagation(), k && f();
        },
        children: /* @__PURE__ */ e(A, { in: !0, timeout: 350, children: /* @__PURE__ */ e(
          F,
          {
            variant: "outlined",
            sx: {
              position: "fixed",
              top: 20,
              right: 20,
              zIndex: 3e3,
              borderRadius: 1.5,
              width: 400,
              maxWidth: "90vw",
              borderColor: "divider",
              border: "0 !important",
              fontSize: "14px",
              textAlign: "left",
              boxShadow: ({ palette: t }) => `0px 8px 16px 0px ${t.grey[100]}, 0px 0px 0px 1px ${t.grey[100]}`
            },
            children: D ? /* @__PURE__ */ r(n, { sx: { display: "flex", flexDirection: "column" }, children: [
              /* @__PURE__ */ r(
                n,
                {
                  sx: {
                    padding: "20px 24px",
                    marginLeft: 0,
                    display: "flex",
                    flexDirection: "row",
                    alignItems: "center",
                    justifyContent: "flex-start"
                  },
                  children: [
                    l || /* @__PURE__ */ e(y, { icon: "mdi:warning-box", style: { color: "yellowgreen", fontSize: 24 } }),
                    /* @__PURE__ */ e(n, { sx: { marginLeft: 1, fontSize: "16px", fontWeight: "bold" }, children: s("componentInstallerTitle") }),
                    /* @__PURE__ */ e(n, { sx: { flex: 1 } }),
                    d ? /* @__PURE__ */ e(b, { variant: "outlined", className: "button", onClick: f, children: /* @__PURE__ */ e(w, {}) }) : null
                  ]
                }
              ),
              /* @__PURE__ */ e(n, { sx: { width: "100%", height: "1px", backgroundColor: "grey.100" } }),
              /* @__PURE__ */ e(n, { sx: { maxHeight: "70vh", overflowY: "auto" }, children: u.map((t, h) => /* @__PURE__ */ e(
                Y,
                {
                  t: s,
                  hasPermission: i,
                  index: h,
                  optionalComponent: t,
                  installStatus: g[t.meta?.did]
                },
                t.meta?.did || h
              )) }),
              i ? null : /* @__PURE__ */ r(x, { children: [
                /* @__PURE__ */ e(n, { sx: { width: "100%", height: "1px", backgroundColor: "grey.100" } }),
                /* @__PURE__ */ e(n, { sx: { padding: "20px 24px" }, children: /* @__PURE__ */ e(n, { sx: { opacity: 1 }, children: s("componentInstallerSuggestions") }) })
              ] })
            ] }) : /* @__PURE__ */ r(n, { sx: { display: "flex", flexDirection: "column" }, children: [
              /* @__PURE__ */ r(
                n,
                {
                  sx: {
                    padding: "20px 24px",
                    marginLeft: 0,
                    display: "flex",
                    alignItems: "center",
                    flexDirection: "row",
                    justifyContent: "flex-start"
                  },
                  children: [
                    l || /* @__PURE__ */ e(y, { icon: "mdi:warning-box", style: { color: "yellowgreen", fontSize: 24 } }),
                    /* @__PURE__ */ e(n, { sx: { marginLeft: 1, fontSize: "16px", fontWeight: "bold" }, children: s("componentInstallerTitle") }),
                    /* @__PURE__ */ e(n, { sx: { flex: 1 } }),
                    d ? /* @__PURE__ */ e(b, { variant: "outlined", className: "button", onClick: f, children: /* @__PURE__ */ e(w, {}) }) : null
                  ]
                }
              ),
              /* @__PURE__ */ e(n, { sx: { width: "100%", height: "1px", backgroundColor: "grey.100" } }),
              /* @__PURE__ */ r(n, { sx: { padding: "20px 24px", marginTop: 0 }, children: [
                s("componentInstallerNoDefinedInBlockletYML"),
                ": ",
                m
              ] })
            ] })
          }
        ) })
      }
    )
  ] }) });
}
c.propTypes = {
  disabled: o.bool,
  warnIcon: o.node,
  did: o.oneOfType([o.string, o.arrayOf(o.string)]).isRequired,
  noPermissionMute: o.bool,
  onInstalled: o.func,
  onError: o.func,
  children: o.any.isRequired,
  closeByOutSize: o.bool,
  onClose: o.func,
  fallback: o.node,
  roles: o.array
};
function E(l) {
  return window.blocklet ? /* @__PURE__ */ e(c, { ...l }) : l.children;
}
E.propTypes = {
  ...c.propTypes,
  children: o.any.isRequired
};
export {
  E as default
};