@blocklet/ui-react 2.13.70 → 3.0.1

package/lib/ComponentManager/components/publish-component.js

@@ -1,76 +1,67 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useContext } from "react";
-import Button from "@arcblock/ux/lib/Button";
-import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { BLOCKLET_SERVICE_PATH_PREFIX } from "@arcblock/ux/lib/Util/constant";
-import { useMemoizedFn, useReactive } from "ahooks";
-import { translate } from "@arcblock/ux/lib/Locale/util";
-import { SessionContext } from "@arcblock/did-connect/lib/Session";
-import Toast from "@arcblock/ux/lib/Toast";
-import ResourceDialog from "./resource-dialog.js";
-import { translations } from "../libs/locales.js";
-export default function PublishComponent({
-  componentDid,
-  grantedRoles,
-  onClose,
-  render
+import { jsxs as x, Fragment as b, jsx as u } from "react/jsx-runtime";
+import { use as w } from "react";
+import L from "@arcblock/ux/lib/Button";
+import { useLocaleContext as C } from "@arcblock/ux/lib/Locale/context";
+import { BLOCKLET_SERVICE_PATH_PREFIX as D } from "@arcblock/ux/lib/Util/constant";
+import { useMemoizedFn as n, useReactive as E } from "ahooks";
+import { translate as P } from "@arcblock/ux/lib/Locale/util";
+import { SessionContext as F } from "@arcblock/did-connect/lib/Session";
+import c from "@arcblock/ux/lib/Toast";
+import S from "./resource-dialog.js";
+import { translations as T } from "../libs/locales.js";
+function H({
+  componentDid: s,
+  grantedRoles: r,
+  onClose: i,
+  render: a
 }) {
-  const { session } = useContext(SessionContext);
-  const { locale } = useLocaleContext();
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, "en", data);
-  });
-  const currentState = useReactive({
-    showDialog: false,
-    loading: false
-  });
-  const exportUrl = `${BLOCKLET_SERVICE_PATH_PREFIX}/embed/resources/${componentDid}/publish?mode=dialog`;
-  const handleClose = useMemoizedFn(() => {
-    currentState.showDialog = false;
-    onClose?.();
-  });
-  const handleLoad = useMemoizedFn(() => {
-    currentState.loading = false;
-  });
-  const handleOpen = useMemoizedFn(() => {
-    if (!session.user) {
-      Toast.warning(t("needLogin"));
+  const { session: l } = w(F), { locale: f } = C(), e = n((t, h = {}) => P(T, t, f, "en", h)), o = E({
+    showDialog: !1,
+    loading: !1
+  }), p = `${D}/embed/resources/${s}/publish?mode=dialog`, d = n(() => {
+    o.showDialog = !1, i == null || i();
+  }), g = n(() => {
+    o.loading = !1;
+  }), m = n(() => {
+    var t;
+    if (!l.user) {
+      c.warning(e("needLogin"));
       return;
     }
-    if (grantedRoles && grantedRoles.length > 0) {
-      if (!grantedRoles?.includes(session.user?.role)) {
-        Toast.warning(t("noPermission"));
-        return;
-      }
+    if (r && r.length > 0 && !(r != null && r.includes((t = l.user) == null ? void 0 : t.role))) {
+      c.warning(e("noPermission"));
+      return;
     }
-    currentState.loading = true;
-    currentState.showDialog = true;
+    o.loading = !0, o.showDialog = !0;
   });
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    render ? render({ onClick: handleOpen, loading: currentState.loading }) : /* @__PURE__ */ jsx(
-      Button,
+  return /* @__PURE__ */ x(b, { children: [
+    a ? a({ onClick: m, loading: o.loading }) : /* @__PURE__ */ u(
+      L,
       {
         variant: "outlined",
         color: "secondary",
         type: "button",
         className: "submit",
-        loading: currentState.loading,
-        onClick: handleOpen,
+        loading: o.loading,
+        onClick: m,
         sx: { mr: 1, ml: 1 },
-        children: t("exportResource")
+        children: e("exportResource")
       },
       "button"
     ),
-    currentState.showDialog && /* @__PURE__ */ jsx(
-      ResourceDialog,
+    o.showDialog && /* @__PURE__ */ u(
+      S,
       {
-        src: exportUrl,
-        open: true,
-        onClose: handleClose,
-        onLoad: handleLoad,
-        componentDid,
-        loading: currentState.loading
+        src: p,
+        open: !0,
+        onClose: d,
+        onLoad: g,
+        componentDid: s,
+        loading: o.loading
       }
     )
   ] });
 }
+export {
+  H as default
+};

package/lib/ComponentManager/components/resource-dialog.js

@@ -1,67 +1,50 @@
-import { jsx } from "react/jsx-runtime";
-import { useMemoizedFn, useMount, useUnmount } from "ahooks";
-import { useRef, forwardRef, useImperativeHandle } from "react";
-function ResourceDialog({
-  src,
-  open = false,
-  componentDid,
-  loading = true,
-  storeUrl,
-  onClose = () => {
+import { jsx as w } from "react/jsx-runtime";
+import { useMemoizedFn as p, useMount as D, useUnmount as R } from "ahooks";
+import { forwardRef as h, useRef as x, useImperativeHandle as M } from "react";
+function b({
+  src: l,
+  open: t = !1,
+  componentDid: n,
+  loading: u = !0,
+  storeUrl: c,
+  onClose: d = () => {
   },
-  onComplete = () => {
+  onComplete: f = () => {
   },
-  onLoad = () => {
+  onLoad: m = () => {
   }
-}, ref) {
-  const iframeRef = useRef(null);
-  const listener = useMemoizedFn((event) => {
-    if (open) {
-      if (event?.data?.event === "resourceDialog.close") {
-        onClose();
-      }
-      if (event?.data?.event === "resourceDialog.complete") {
-        onComplete();
-      }
-      if (event?.data?.event === "resourceDialog.loaded") {
-        onLoad();
-      }
-    }
+}, g) {
+  const r = x(null), i = p((e) => {
+    var o, s, a;
+    t && (((o = e == null ? void 0 : e.data) == null ? void 0 : o.event) === "resourceDialog.close" && d(), ((s = e == null ? void 0 : e.data) == null ? void 0 : s.event) === "resourceDialog.complete" && f(), ((a = e == null ? void 0 : e.data) == null ? void 0 : a.event) === "resourceDialog.loaded" && m());
   });
-  useMount(() => {
-    window.addEventListener("message", listener);
-  });
-  useUnmount(() => {
-    window.removeEventListener("message", listener);
-  });
-  useImperativeHandle(ref, () => ({
-    selectBlocklet: (blockletMeta) => {
-      if (iframeRef.current?.contentWindow) {
-        iframeRef.current.contentWindow.postMessage(
-          {
-            event: "resourceDialog.select",
-            data: blockletMeta,
-            componentDid,
-            storeUrl
-          },
-          "*"
-        );
-      }
+  return D(() => {
+    window.addEventListener("message", i);
+  }), R(() => {
+    window.removeEventListener("message", i);
+  }), M(g, () => ({
+    selectBlocklet: (e) => {
+      var o;
+      (o = r.current) != null && o.contentWindow && r.current.contentWindow.postMessage(
+        {
+          event: "resourceDialog.select",
+          data: e,
+          componentDid: n,
+          storeUrl: c
+        },
+        "*"
+      );
     }
-  }));
-  if (!open) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
+  })), t ? /* @__PURE__ */ w(
     "iframe",
     {
-      ref: iframeRef,
-      src,
+      ref: r,
+      src: l,
       title: "Resource Dialog",
       style: {
         position: "fixed",
         top: 0,
-        left: loading ? "-100vw" : 0,
+        left: u ? "-100vw" : 0,
         width: "100vw",
         height: "100vh",
         zIndex: 9999,
@@ -69,6 +52,9 @@ function ResourceDialog({
         border: "none"
       }
     }
-  );
+  ) : null;
 }
-export default forwardRef(ResourceDialog);
+const I = h(b);
+export {
+  I as default
+};

package/lib/ComponentManager/index.js

@@ -1,3 +1,8 @@
-export { default as PublishComponent } from "./components/publish-component.js";
-export { default as AddComponent } from "./components/add-component.js";
-export { default as CheckComponent } from "./components/check-component.js";
+import { default as t } from "./components/publish-component.js";
+import { default as f } from "./components/add-component.js";
+import { default as n } from "../ComponentInstaller/index.js";
+export {
+  f as AddComponent,
+  n as CheckComponent,
+  t as PublishComponent
+};

package/lib/ComponentManager/libs/locales.js

@@ -1,9 +1,9 @@
-export const translations = {
+const o = {
   zh: {
-    importResource: "\u5BFC\u5165",
-    exportResource: "\u5BFC\u51FA",
-    noPermission: "\u4F60\u6CA1\u6709\u6743\u9650\u6267\u884C\u8BE5\u64CD\u4F5C\uFF0C\u8BF7\u5207\u6362\u7BA1\u7406\u5458\u901A\u884C\u8BC1\u6216\u8054\u7CFB\u7BA1\u7406\u5458\u8FDB\u884C\u5B89\u88C5",
-    needLogin: "\u767B\u5F55\u540E\u624D\u53EF\u64CD\u4F5C"
+    importResource: "导入",
+    exportResource: "导出",
+    noPermission: "你没有权限执行该操作，请切换管理员通行证或联系管理员进行安装",
+    needLogin: "登录后才可操作"
   },
   en: {
     importResource: "Import",
@@ -12,3 +12,6 @@ export const translations = {
     needLogin: "Please login first"
   }
 };
+export {
+  o as translations
+};

package/lib/Dashboard/index.js

@@ -1,146 +1,110 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx as s } from "react/jsx-runtime";
 import "iconify-icon";
-import { useMemo, useLayoutEffect, useContext } from "react";
-import PropTypes from "prop-types";
-import { SessionContext } from "@arcblock/did-connect/lib/Session";
-import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import UxImg from "@arcblock/ux/lib/Img";
-import UxDashboard from "@arcblock/ux/lib/Layout/dashboard";
-import useBlockletLogo from "@arcblock/ux/lib/hooks/use-blocklet-logo";
-import { BlockletMetaProps, SessionManagerProps } from "../types.js";
-import { mapRecursive, flatRecursive, matchPaths } from "../utils.js";
-import { publicPath, formatBlockletInfo, getLocalizedNavigation, filterNavByRole } from "../blocklets.js";
-import HeaderAddons from "../common/header-addons.js";
-import { useWalletHiddenTopbar } from "../common/wallet-hidden-topbar.js";
-function Dashboard({
-  meta,
-  fallbackUrl,
-  invalidPathFallback,
-  headerAddons,
-  sessionManagerProps,
-  links,
-  showDomainWarningDialog,
-  ...rest
+import { use as A, useMemo as N, useLayoutEffect as P } from "react";
+import t from "prop-types";
+import { SessionContext as D } from "@arcblock/did-connect/lib/Session";
+import { useLocaleContext as M } from "@arcblock/ux/lib/Locale/context";
+import B from "@arcblock/ux/lib/Img";
+import O from "@arcblock/ux/lib/Layout/dashboard";
+import j from "@arcblock/ux/lib/hooks/use-blocklet-logo";
+import { SessionManagerProps as H, BlockletMetaProps as S } from "../types.js";
+import { mapRecursive as _, flatRecursive as C, matchPaths as E } from "../utils.js";
+import { formatBlockletInfo as U, getLocalizedNavigation as q, filterNavByRole as F, publicPath as h } from "../blocklets.js";
+import G from "../common/header-addons.js";
+import { useWalletHiddenTopbar as J } from "../common/wallet-hidden-topbar.js";
+function K({
+  meta: l = {},
+  fallbackUrl: c = h,
+  invalidPathFallback: d = null,
+  headerAddons: k = void 0,
+  sessionManagerProps: W = {
+    showRole: !0,
+    // dashboard 默认退出登录行为: 跳转到 (root) blocklet 首页
+    onLogout: () => {
+      window.location.href = h;
+    }
+  },
+  links: f = [],
+  showDomainWarningDialog: I = !0,
+  ...g
 }) {
-  useWalletHiddenTopbar();
-  const sessionCtx = useContext(SessionContext);
-  const user = sessionCtx?.session?.user;
-  const userRole = user?.role;
-  const { locale } = useLocaleContext() || {};
-  const formattedBlocklet = useMemo(() => {
-    const blocklet = Object.assign({}, window.blocklet, meta);
+  var x;
+  J();
+  const p = A(D), i = (x = p == null ? void 0 : p.session) == null ? void 0 : x.user, y = i == null ? void 0 : i.role, { locale: b } = M() || {}, r = N(() => {
+    const e = Object.assign({}, window.blocklet, l);
     try {
-      return formatBlockletInfo(blocklet);
-    } catch (e) {
-      console.error("Failed to format blocklet info", e, blocklet);
-      return blocklet;
+      return U(e);
+    } catch (a) {
+      return console.error("Failed to format blocklet info", a, e), e;
     }
-  }, [meta]);
-  const { localizedNav, flattened, matchedIndex } = useMemo(() => {
-    let localizedNav2 = getLocalizedNavigation(formattedBlocklet?.navigation?.dashboard, locale) || [];
-    localizedNav2 = filterNavByRole(localizedNav2, userRole);
-    localizedNav2 = mapRecursive(
-      localizedNav2,
-      (item) => {
-        let icon = null;
-        if (item.icon) {
-          if (item.icon.startsWith("http") || item.icon.startsWith("data:")) {
-            icon = /* @__PURE__ */ jsx(UxImg, { src: item.icon });
-          } else {
-            icon = /* @__PURE__ */ jsx("iconify-icon", { height: "100%", width: "100%", icon: item.icon });
-          }
-        }
-        return {
-          id: item.id,
-          title: item.title,
-          url: item.link,
-          icon,
+  }, [l]), { localizedNav: v, flattened: n, matchedIndex: w } = N(() => {
+    var L;
+    let e = q((L = r == null ? void 0 : r.navigation) == null ? void 0 : L.dashboard, b) || [];
+    e = F(e, y), e = _(
+      e,
+      (o) => {
+        let m = null;
+        return o.icon && (o.icon.startsWith("http") || o.icon.startsWith("data:") ? m = /* @__PURE__ */ s(B, { src: o.icon }) : m = /* @__PURE__ */ s("iconify-icon", { height: "100%", width: "100%", icon: o.icon })), {
+          id: o.id,
+          title: o.title,
+          url: o.link,
+          icon: m,
           // https://github.com/ArcBlock/ux/issues/755#issuecomment-1208692620
-          external: true,
-          children: item.items
+          external: !0,
+          children: o.items
         };
       },
       "items"
     );
-    const flattened2 = flatRecursive(localizedNav2).filter((item) => !!item.url);
-    const matchedIndex2 = matchPaths(flattened2.map((item) => item.url));
-    if (matchedIndex2 !== -1) {
-      flattened2[matchedIndex2].active = true;
-    }
-    return { localizedNav: localizedNav2, flattened: flattened2, matchedIndex: matchedIndex2 };
-  }, [formattedBlocklet, locale, userRole]);
-  const allLinks = typeof links === "function" ? links(localizedNav) : [...localizedNav, ...links];
-  const appLogo = useBlockletLogo({
-    meta
+    const a = C(e).filter((o) => !!o.url), u = E(a.map((o) => o.url));
+    return u !== -1 && (a[u].active = !0), { localizedNav: e, flattened: a, matchedIndex: u };
+  }, [r, b, y]), R = typeof f == "function" ? f(v) : [...v, ...f], T = j({
+    meta: l
   });
-  useLayoutEffect(() => {
-    if (!!user && !flattened?.length && fallbackUrl) {
-      window.location.href = fallbackUrl;
-    }
-  }, [fallbackUrl]);
-  useLayoutEffect(() => {
-    if (!!user && !!flattened?.length && matchedIndex === -1) {
-      if (invalidPathFallback) {
-        invalidPathFallback();
-      } else {
-      }
-    }
-  }, [invalidPathFallback, flattened, matchedIndex]);
-  if (!formattedBlocklet.appName) {
+  if (P(() => {
+    i && !(n != null && n.length) && c && (window.location.href = c);
+  }, [c]), P(() => {
+    i && (n != null && n.length) && w === -1 && d && d();
+  }, [d, n, w]), !r.appName)
     return null;
-  }
-  const { appName } = formattedBlocklet;
-  const _headerAddons = /* @__PURE__ */ jsx(
-    HeaderAddons,
+  const { appName: z } = r;
+  return /* @__PURE__ */ s(
+    O,
     {
-      formattedBlocklet,
-      addons: headerAddons,
-      sessionManagerProps,
-      showDomainWarningDialog
-    }
-  );
-  return /* @__PURE__ */ jsx(
-    UxDashboard,
-    {
-      title: appName,
-      fullWidth: true,
+      title: z,
+      fullWidth: !0,
       sidebarWidth: 128,
-      legacy: false,
-      links: allLinks,
-      ...rest,
+      legacy: !1,
+      links: R,
+      ...g,
       headerProps: {
-        homeLink: publicPath,
-        logo: /* @__PURE__ */ jsx("img", { src: appLogo, alt: "logo" }),
-        addons: _headerAddons,
-        ...rest.headerProps
+        homeLink: h,
+        logo: /* @__PURE__ */ s("img", { src: T, alt: "logo" }),
+        addons: /* @__PURE__ */ s(
+          G,
+          {
+            formattedBlocklet: r,
+            addons: k,
+            sessionManagerProps: W,
+            showDomainWarningDialog: I
+          }
+        ),
+        ...g.headerProps
       }
     }
   );
 }
-Dashboard.propTypes = {
-  meta: BlockletMetaProps,
+K.propTypes = {
+  meta: S,
   // 如果当前用户没有权限访问任何导航菜单, 则自动跳转到 fallbackUrl, 默认值为 publicPath, 设置为 null 表示禁用自动跳转
-  fallbackUrl: PropTypes.string,
+  fallbackUrl: t.string,
   // 当前路径未匹配任何 nav links 时的 fallback, 默认行为跳转到首个可用的 nav link
-  invalidPathFallback: PropTypes.func,
-  headerAddons: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-  sessionManagerProps: SessionManagerProps,
-  links: PropTypes.oneOfType([PropTypes.array, PropTypes.func]),
-  showDomainWarningDialog: PropTypes.bool
+  invalidPathFallback: t.func,
+  headerAddons: t.oneOfType([t.func, t.node]),
+  sessionManagerProps: H,
+  links: t.oneOfType([t.array, t.func]),
+  showDomainWarningDialog: t.bool
 };
-Dashboard.defaultProps = {
-  meta: {},
-  fallbackUrl: publicPath,
-  invalidPathFallback: null,
-  headerAddons: void 0,
-  sessionManagerProps: {
-    showRole: true,
-    // dashboard 默认退出登录行为: 跳转到 (root) blocklet 首页
-    onLogout: () => {
-      window.location.href = publicPath;
-    }
-  },
-  links: [],
-  showDomainWarningDialog: true
+export {
+  K as default
 };
-export default Dashboard;

package/lib/Footer/brand.js

@@ -1,32 +1,26 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { isValidElement } from "react";
-import PropTypes from "prop-types";
-import { styled } from "@arcblock/ux/lib/Theme";
-import { Box } from "@mui/material";
-export default function Brand({ name, logo, description, ...rest }) {
-  if (!name && !logo && !description) {
+import { jsx as o, jsxs as n } from "react/jsx-runtime";
+import { isValidElement as l } from "react";
+import i from "prop-types";
+import { styled as s } from "@arcblock/ux/lib/Theme";
+import { Box as m } from "@mui/material";
+function p({ name: e = "", logo: t = "", description: r = "", ...a }) {
+  if (!e && !t && !r)
     return null;
-  }
-  const logoElement = isValidElement(logo) ? logo : /* @__PURE__ */ jsx("img", { src: logo, alt: name });
-  return /* @__PURE__ */ jsxs(Root, { ...rest, children: [
-    /* @__PURE__ */ jsxs("div", { children: [
-      logo && /* @__PURE__ */ jsx(Box, { component: "a", href: "/", className: "footer-brand-logo", children: logoElement }),
-      name && /* @__PURE__ */ jsx("div", { className: "footer-brand-name", children: name })
+  const d = l(t) ? t : /* @__PURE__ */ o("img", { src: t, alt: e });
+  return /* @__PURE__ */ n(h, { ...a, children: [
+    /* @__PURE__ */ n("div", { children: [
+      t && /* @__PURE__ */ o(m, { component: "a", href: "/", className: "footer-brand-logo", children: d }),
+      e && /* @__PURE__ */ o("div", { className: "footer-brand-name", children: e })
     ] }),
-    description && /* @__PURE__ */ jsx("div", { className: "footer-brand-desc", children: description })
+    r && /* @__PURE__ */ o("div", { className: "footer-brand-desc", children: r })
   ] });
 }
-Brand.propTypes = {
-  name: PropTypes.node,
-  logo: PropTypes.node,
-  description: PropTypes.string
-};
-Brand.defaultProps = {
-  name: "",
-  logo: "",
-  description: ""
+p.propTypes = {
+  name: i.node,
+  logo: i.node,
+  description: i.string
 };
-const Root = styled("div")`
+const h = s("div")`
   display: flex;
   flex-direction: column;
   font-size: 14px;
@@ -52,19 +46,19 @@ const Root = styled("div")`
   }
   .footer-brand-name {
     font-size: 18px;
-    color: ${(props) => props.theme.palette.grey[900]};
+    color: ${(e) => e.theme.palette.grey[900]};
   }
   .footer-brand-desc {
     white-space: pre-line;
     margin-top: 16px;
-    color: ${(props) => props.theme.palette.text.secondary};
+    color: ${(e) => e.theme.palette.text.secondary};
   }
 
-  ${(props) => props.theme.breakpoints.down("sm")} {
+  ${(e) => e.theme.breakpoints.down("sm")} {
     width: auto;
   }
 
-  ${(props) => props.theme.breakpoints.down("md")} {
+  ${(e) => e.theme.breakpoints.down("md")} {
     .footer-brand-logo {
       img,
       svg {
@@ -74,3 +68,6 @@ const Root = styled("div")`
     }
   }
 `;
+export {
+  p as default
+};

package/lib/Footer/copyright.js

@@ -1,25 +1,24 @@
-import { jsxs } from "react/jsx-runtime";
-import { styled } from "@arcblock/ux/lib/Theme";
-import PropTypes from "prop-types";
-export default function Copyright({ owner, year, ...rest }) {
-  return /* @__PURE__ */ jsxs(Root, { ...rest, children: [
-    "Copyright \xA9 ",
-    year,
+import { jsxs as i } from "react/jsx-runtime";
+import { styled as p } from "@arcblock/ux/lib/Theme";
+import r from "prop-types";
+function n({ owner: t = "ArcBlock", year: e = `${(/* @__PURE__ */ new Date()).getFullYear()}`, ...o }) {
+  return /* @__PURE__ */ i(s, { ...o, children: [
+    "Copyright © ",
+    e,
     " ",
-    owner
+    t
   ] });
 }
-Copyright.propTypes = {
-  owner: PropTypes.string,
-  year: PropTypes.string
+n.propTypes = {
+  owner: r.string,
+  year: r.string
 };
-Copyright.defaultProps = {
-  owner: "ArcBlock",
-  year: `${(/* @__PURE__ */ new Date()).getFullYear()}`
-};
-const Root = styled("p")`
+const s = p("p")`
   display: flex;
   align-items: center;
   margin: 0;
   font-size: 13px;
 `;
+export {
+  n as default
+};