@blocklet/ui-react 2.13.70 → 3.0.1

package/lib/@types/index.js

@@ -1,18 +1,5 @@
-export var DurationEnum = /* @__PURE__ */ ((DurationEnum2) => {
-  DurationEnum2["NoClear"] = "no_clear";
-  DurationEnum2["ThirtyMinutes"] = "30_minutes";
-  DurationEnum2["OneHour"] = "1_hour";
-  DurationEnum2["FourHours"] = "4_hours";
-  DurationEnum2["Today"] = "today";
-  DurationEnum2["ThisWeek"] = "this_week";
-  DurationEnum2["Custom"] = "custom";
-  return DurationEnum2;
-})(DurationEnum || {});
-export var StatusEnum = /* @__PURE__ */ ((StatusEnum2) => {
-  StatusEnum2["Meeting"] = "meeting";
-  StatusEnum2["Community"] = "community";
-  StatusEnum2["Holiday"] = "holiday";
-  StatusEnum2["OffSick"] = "off_sick";
-  StatusEnum2["WorkingRemotely"] = "working_remotely";
-  return StatusEnum2;
-})(StatusEnum || {});
+var o = /* @__PURE__ */ ((e) => (e.NoClear = "no_clear", e.ThirtyMinutes = "30_minutes", e.OneHour = "1_hour", e.FourHours = "4_hours", e.Today = "today", e.ThisWeek = "this_week", e.Custom = "custom", e))(o || {}), r = /* @__PURE__ */ ((e) => (e.Meeting = "meeting", e.Community = "community", e.Holiday = "holiday", e.OffSick = "off_sick", e.WorkingRemotely = "working_remotely", e))(r || {});
+export {
+  o as DurationEnum,
+  r as StatusEnum
+};

package/lib/BlockletStudio/index.js

@@ -1,97 +1,81 @@
-import { jsx } from "react/jsx-runtime";
-import { BLOCKLET_SERVICE_PATH_PREFIX } from "@arcblock/ux/lib/Util/constant";
-import { useEffect, useRef, useState } from "react";
-import { joinURL } from "ufo";
-function parseUrl(uri, params) {
-  const url = new URL(uri);
-  Object.keys(params).forEach((key) => {
-    const value = params[key];
-    if (value !== void 0) {
-      url.searchParams.set(key, typeof value === "string" ? value : JSON.stringify(value));
-    }
-  });
-  return url.pathname + url.search;
+import { jsx as T } from "react/jsx-runtime";
+import { BLOCKLET_SERVICE_PATH_PREFIX as V } from "@arcblock/ux/lib/Util/constant";
+import { useState as A, useRef as p, useEffect as H } from "react";
+import { joinURL as J } from "ufo";
+function K(a, s) {
+  const t = new URL(a);
+  return Object.keys(s).forEach((i) => {
+    const o = s[i];
+    o !== void 0 && t.searchParams.set(i, typeof o == "string" ? o : JSON.stringify(o));
+  }), t.pathname + t.search;
 }
-function BlockletStudio({
-  open,
-  setOpen,
-  onOpened,
-  componentDid,
-  tenantScope,
-  resourcesParams = {},
-  mode = "dialog",
-  title,
-  logo,
-  description,
-  introduction,
-  note,
-  componentsTitle,
-  resourcesTitle,
-  onUploaded,
-  onReleased,
-  onConnected,
-  components = [],
-  resources = {},
-  style = {},
-  zIndex = 9999,
-  dependentComponentsMode,
-  ...rest
+function G({
+  open: a,
+  setOpen: s,
+  onOpened: t,
+  componentDid: i,
+  tenantScope: o,
+  resourcesParams: h = {},
+  mode: w = "dialog",
+  title: E,
+  logo: R,
+  description: L,
+  introduction: y,
+  note: D,
+  componentsTitle: S,
+  resourcesTitle: b,
+  onUploaded: j,
+  onReleased: x,
+  onConnected: B,
+  components: P = [],
+  resources: U = {},
+  style: _ = {},
+  zIndex: k = 9999,
+  dependentComponentsMode: C,
+  ...F
 }) {
-  const [opened, setOpened] = useState(false);
-  const didRef = useRef("");
-  didRef.current = componentDid;
-  const latestFunctionVersionRef = useRef({});
-  latestFunctionVersionRef.current["resourceDialog.close"] = () => {
-    setOpened(false);
-    setOpen(false);
-  };
-  latestFunctionVersionRef.current["resourceDialog.loaded"] = () => {
-    setOpened(true);
-    onOpened?.();
-  };
-  latestFunctionVersionRef.current["studioDialog.uploaded"] = onUploaded;
-  latestFunctionVersionRef.current["studioDialog.connected"] = onConnected;
-  latestFunctionVersionRef.current["studioDialog.released"] = onReleased;
-  useEffect(() => {
-    const listener = (event) => {
-      if (event?.data?.componentDid !== didRef.current) {
+  const [n, c] = A(!1), u = p("");
+  u.current = i;
+  const e = p({});
+  if (e.current["resourceDialog.close"] = () => {
+    c(!1), s(!1);
+  }, e.current["resourceDialog.loaded"] = () => {
+    c(!0), t == null || t();
+  }, e.current["studioDialog.uploaded"] = j, e.current["studioDialog.connected"] = B, e.current["studioDialog.released"] = x, H(() => {
+    const l = (r) => {
+      var f, m, g;
+      if (((f = r == null ? void 0 : r.data) == null ? void 0 : f.componentDid) !== u.current)
         return;
-      }
-      const fn = latestFunctionVersionRef.current[event?.data?.event];
-      if (typeof fn === "function") {
-        fn(event?.data?.data);
-      }
+      const d = e.current[(m = r == null ? void 0 : r.data) == null ? void 0 : m.event];
+      typeof d == "function" && d((g = r == null ? void 0 : r.data) == null ? void 0 : g.data);
     };
-    window.addEventListener("message", listener);
-    return () => {
-      window.removeEventListener("message", listener);
+    return window.addEventListener("message", l), () => {
+      window.removeEventListener("message", l);
     };
-  }, []);
-  if (!open) {
+  }, []), !a)
     return null;
-  }
-  const src = parseUrl(
-    joinURL(window.location.origin, BLOCKLET_SERVICE_PATH_PREFIX, "/embed/resources", componentDid, "/publish"),
+  const I = K(
+    J(window.location.origin, V, "/embed/resources", i, "/publish"),
     {
-      title,
-      logo,
-      description,
-      introduction,
-      note,
-      tenantScope,
-      mode,
-      resourcesParams,
-      resources,
-      components,
-      resourcesTitle,
-      componentsTitle,
-      dependentComponentsMode
+      title: E,
+      logo: R,
+      description: L,
+      introduction: y,
+      note: D,
+      tenantScope: o,
+      mode: w,
+      resourcesParams: h,
+      resources: U,
+      components: P,
+      resourcesTitle: b,
+      componentsTitle: S,
+      dependentComponentsMode: C
     }
   );
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ T(
     "iframe",
     {
-      src,
+      src: I,
       title: "Blocklet Studio",
       style: {
         position: "fixed",
@@ -99,16 +83,18 @@ function BlockletStudio({
         left: 0,
         width: "100vw",
         height: "100vh",
-        zIndex,
+        zIndex: k,
         border: 0,
         padding: 0,
         margin: 0,
-        pointerEvents: opened ? "auto" : "none",
-        opacity: opened ? 1 : 0,
-        ...style
+        pointerEvents: n ? "auto" : "none",
+        opacity: n ? 1 : 0,
+        ..._
       },
-      ...rest
+      ...F
     }
   );
 }
-export default BlockletStudio;
+export {
+  G as default
+};

package/lib/ComponentInstaller/index.js

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