@blocklet/ui-react 2.13.70 → 3.0.1

package/lib/ComponentInstaller/installer-item.js

@@ -1,24 +1,19 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Icon } from "@iconify/react";
-import { Box, Button, useTheme } from "@mui/material";
-import PropTypes from "prop-types";
-export default function InstallerItem({ optionalComponent, index, installStatus, hasPermission, t }) {
-  const { palette } = useTheme();
-  const handleInstall = () => {
-    window.open(optionalComponent?.installUrl, "_blank");
-  };
-  const handleOpenStore = () => {
-    window.open(optionalComponent?.storeUrl, "_blank");
-  };
-  const handleRefresh = () => {
+import { jsxs as n, jsx as i } from "react/jsx-runtime";
+import { Icon as x } from "@iconify/react";
+import { useTheme as y, Box as r, Button as d } from "@mui/material";
+import s from "prop-types";
+function I({ optionalComponent: e, index: h, installStatus: l = "", hasPermission: f, t: c }) {
+  const { palette: m } = y(), g = () => {
+    window.open(e == null ? void 0 : e.installUrl, "_blank");
+  }, p = () => {
+    window.open(e == null ? void 0 : e.storeUrl, "_blank");
+  }, u = () => {
     window.location.reload();
-  };
-  const installStatusDone = installStatus === "stopped" || installStatus === "running";
-  const size = 60;
-  return /* @__PURE__ */ jsxs(Box, { children: [
-    index === 0 ? null : /* @__PURE__ */ jsx(Box, { sx: { width: "100%", height: "1px", backgroundColor: "grey.100" } }),
-    /* @__PURE__ */ jsxs(
-      Box,
+  }, o = l === "stopped" || l === "running", a = 60;
+  return /* @__PURE__ */ n(r, { children: [
+    h === 0 ? null : /* @__PURE__ */ i(r, { sx: { width: "100%", height: "1px", backgroundColor: "grey.100" } }),
+    /* @__PURE__ */ n(
+      r,
       {
         sx: {
           padding: "20px 24px",
@@ -30,16 +25,16 @@ export default function InstallerItem({ optionalComponent, index, installStatus,
           alignItems: "flex-start"
         },
         children: [
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ i(
             "img",
             {
-              style: { width: size, height: size, minWidth: size, minHeight: size },
-              src: optionalComponent.logoUrl,
-              alt: optionalComponent.meta.title
+              style: { width: a, height: a, minWidth: a, minHeight: a },
+              src: e.logoUrl,
+              alt: e.meta.title
             }
           ),
-          /* @__PURE__ */ jsxs(
-            Box,
+          /* @__PURE__ */ n(
+            r,
             {
               sx: {
                 display: "flex",
@@ -49,8 +44,8 @@ export default function InstallerItem({ optionalComponent, index, installStatus,
                 marginLeft: 2
               },
               children: [
-                /* @__PURE__ */ jsxs(
-                  Box,
+                /* @__PURE__ */ n(
+                  r,
                   {
                     sx: {
                       fontSize: "16px",
@@ -63,11 +58,14 @@ export default function InstallerItem({ optionalComponent, index, installStatus,
                         opacity: 1
                       }
                     },
-                    onClick: () => handleOpenStore(optionalComponent.meta?.did),
+                    onClick: () => {
+                      var t;
+                      return p((t = e.meta) == null ? void 0 : t.did);
+                    },
                     children: [
-                      optionalComponent.meta.title,
-                      /* @__PURE__ */ jsxs(
-                        Box,
+                      e.meta.title,
+                      /* @__PURE__ */ n(
+                        r,
                         {
                           sx: {
                             paddingLeft: 1,
@@ -76,14 +74,14 @@ export default function InstallerItem({ optionalComponent, index, installStatus,
                           },
                           component: "span",
                           children: [
-                            optionalComponent.meta.version,
-                            /* @__PURE__ */ jsx(
-                              Icon,
+                            e.meta.version,
+                            /* @__PURE__ */ i(
+                              x,
                               {
                                 className: "link-icon",
                                 icon: "fluent:open-20-filled",
                                 style: {
-                                  color: palette.primary.main,
+                                  color: m.primary.main,
                                   fontSize: 16,
                                   transform: "translate(6px, 3px)",
                                   transition: "all 0.3s"
@@ -96,29 +94,32 @@ export default function InstallerItem({ optionalComponent, index, installStatus,
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx(Box, { sx: { marginTop: 0, opacity: 0.7 }, children: optionalComponent.meta.description }),
-                /* @__PURE__ */ jsx(Box, { sx: { display: hasPermission ? "flex" : "none", flexDirection: "row", gap: 1 }, children: installStatus ? /* @__PURE__ */ jsx(Box, { sx: { marginTop: 2, opacity: 0.7 }, children: installStatusDone ? /* @__PURE__ */ jsx(Button, { variant: "contained", onClick: handleRefresh, children: t("componentInstallerRefresh") }, "refresh") : /* @__PURE__ */ jsx(
-                  Button,
+                /* @__PURE__ */ i(r, { sx: { marginTop: 0, opacity: 0.7 }, children: e.meta.description }),
+                /* @__PURE__ */ i(r, { sx: { display: f ? "flex" : "none", flexDirection: "row", gap: 1 }, children: l ? /* @__PURE__ */ i(r, { sx: { marginTop: 2, opacity: 0.7 }, children: o ? /* @__PURE__ */ i(d, { variant: "contained", onClick: u, children: c("componentInstallerRefresh") }, "refresh") : /* @__PURE__ */ i(
+                  d,
                   {
-                    disabled: true,
+                    disabled: !0,
                     sx: { color: "text.primary" },
-                    startIcon: /* @__PURE__ */ jsx(Icon, { icon: "line-md:loading-loop", style: { color: "text.primary", fontSize: 16 } }),
+                    startIcon: /* @__PURE__ */ i(x, { icon: "line-md:loading-loop", style: { color: "text.primary", fontSize: 16 } }),
                     variant: "contained",
-                    children: installStatus
+                    children: l
                   },
                   "status"
-                ) }) : /* @__PURE__ */ jsx(
-                  Button,
+                ) }) : /* @__PURE__ */ i(
+                  d,
                   {
                     sx: { marginTop: 2 },
                     variant: "contained",
                     className: "button",
-                    onClick: () => handleInstall(optionalComponent.meta?.did),
-                    children: t("componentInstallerInstall")
+                    onClick: () => {
+                      var t;
+                      return g((t = e.meta) == null ? void 0 : t.did);
+                    },
+                    children: c("componentInstallerInstall")
                   },
                   "install"
                 ) }),
-                installStatusDone ? /* @__PURE__ */ jsx(Box, { sx: { marginTop: 2, opacity: 0.7 }, children: t("componentInstallerSuccessInstalled") }) : null
+                o ? /* @__PURE__ */ i(r, { sx: { marginTop: 2, opacity: 0.7 }, children: c("componentInstallerSuccessInstalled") }) : null
               ]
             }
           )
@@ -127,13 +128,13 @@ export default function InstallerItem({ optionalComponent, index, installStatus,
     )
   ] });
 }
-InstallerItem.propTypes = {
-  t: PropTypes.func.isRequired,
-  optionalComponent: PropTypes.object.isRequired,
-  index: PropTypes.number.isRequired,
-  installStatus: PropTypes.string,
-  hasPermission: PropTypes.bool.isRequired
+I.propTypes = {
+  t: s.func.isRequired,
+  optionalComponent: s.object.isRequired,
+  index: s.number.isRequired,
+  installStatus: s.string,
+  hasPermission: s.bool.isRequired
 };
-InstallerItem.defaultProps = {
-  installStatus: ""
+export {
+  I as default
 };

package/lib/ComponentInstaller/locales.js

@@ -1,22 +1,23 @@
-const translations = {
+const e = {
   zh: {
-    componentInstallerTitle: '缺少组件',
-    componentInstallerInstall: '安装',
-    componentInstallerClose: '关闭',
-    componentInstallerRefresh: '重载页面',
-    componentInstallerSuccessInstalled: '安装成功，请重载页面查看变化。',
-    componentInstallerSuggestions: '请联系系统管理员安装该组件。',
-    componentInstallerNoDefinedInBlockletYML: '组件未在 blocklet.yml 中定义',
+    componentInstallerTitle: "缺少组件",
+    componentInstallerInstall: "安装",
+    componentInstallerClose: "关闭",
+    componentInstallerRefresh: "重载页面",
+    componentInstallerSuccessInstalled: "安装成功，请重载页面查看变化。",
+    componentInstallerSuggestions: "请联系系统管理员安装该组件。",
+    componentInstallerNoDefinedInBlockletYML: "组件未在 blocklet.yml 中定义"
   },
   en: {
-    componentInstallerTitle: 'Missing component',
-    componentInstallerInstall: 'Install',
-    componentInstallerClose: 'Close',
-    componentInstallerRefresh: 'Refresh',
-    componentInstallerSuccessInstalled: 'Successfully installed, please refresh the page to see the changes.',
-    componentInstallerSuggestions: 'Please contact the system administrator to install the component.',
-    componentInstallerNoDefinedInBlockletYML: 'The component is not defined in blocklet.yml',
-  },
+    componentInstallerTitle: "Missing component",
+    componentInstallerInstall: "Install",
+    componentInstallerClose: "Close",
+    componentInstallerRefresh: "Refresh",
+    componentInstallerSuccessInstalled: "Successfully installed, please refresh the page to see the changes.",
+    componentInstallerSuggestions: "Please contact the system administrator to install the component.",
+    componentInstallerNoDefinedInBlockletYML: "The component is not defined in blocklet.yml"
+  }
+};
+export {
+  e as default
 };
-
-export default translations;

package/lib/ComponentInstaller/use-component-installed.js

@@ -1,88 +1,57 @@
-import { BLOCKLET_SERVICE_PATH_PREFIX } from '@arcblock/did-connect/lib/constant';
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { joinURL } from 'ufo';
-
-const parseDidToSet = (did) => {
-  if (typeof did === 'string') {
-    return new Set(did.split(';;'));
-  }
-  return new Set(did);
-};
-
-function useComponentInstalled({ did, onInstalled, onError }) {
-  const didKeys = Array.isArray(did) ? did.join(';;') : did;
-  const [installStatus, setInstallStatus] = useState({});
-  const onInstalledRef = useRef({ onInstalled, onError });
-  onInstalledRef.current = { onInstalled, onError };
-
-  const { optionalComponents, componentMountPoints } = window.blocklet;
-
-  const optComponents = useMemo(() => {
-    if (!optionalComponents || !optionalComponents.length) {
+import { BLOCKLET_SERVICE_PATH_PREFIX as y } from "@arcblock/did-connect/lib/constant";
+import { useState as A, useRef as M, useMemo as C, useEffect as P } from "react";
+import { joinURL as I } from "ufo";
+const u = (e) => typeof e == "string" ? new Set(e.split(";;")) : new Set(e);
+function B({ did: e, onInstalled: f, onError: p }) {
+  const o = Array.isArray(e) ? e.join(";;") : e, [L, i] = A({}), d = M({ onInstalled: f, onError: p });
+  d.current = { onInstalled: f, onError: p };
+  const { optionalComponents: l, componentMountPoints: m } = window.blocklet, r = C(() => {
+    var s;
+    if (!l || !l.length)
       return [];
-    }
-    const didSet = parseDidToSet(didKeys);
-    const components = optionalComponents.filter((c) => didSet.has(c.meta.did));
-    (components ? onInstalledRef.current.onError : onInstalledRef.current.onInstalled)?.(components);
-    return components;
-  }, [didKeys, optionalComponents]);
-
-  const definedInBlockletYML = useMemo(() => {
-    if (optComponents.length) {
-      return true;
-    }
-    const didSet = parseDidToSet(didKeys);
-    return (componentMountPoints || []).find((item) => didSet.has(item.did));
-  }, [optComponents, componentMountPoints, didKeys]);
-
-  optComponents.forEach((item) => {
-    item.storeUrl = joinURL(item.meta.homepage, 'blocklets', item.meta.did);
-    item.installUrl = joinURL(
+    const t = u(o), n = l.filter((a) => t.has(a.meta.did));
+    return (s = n ? d.current.onError : d.current.onInstalled) == null || s(n), n;
+  }, [o, l]), h = C(() => {
+    if (r.length)
+      return !0;
+    const t = u(o);
+    return (m || []).find((n) => t.has(n.did));
+  }, [r, m, o]);
+  return r.forEach((t) => {
+    t.storeUrl = I(t.meta.homepage, "blocklets", t.meta.did), t.installUrl = I(
       window.blocklet.appUrl,
-      BLOCKLET_SERVICE_PATH_PREFIX,
-      `/admin/components?install-component=${item.meta.did}`
+      y,
+      `/admin/components?install-component=${t.meta.did}`
     );
-  });
-
-  useEffect(() => {
-    const handle = (event) => {
-      if (event.origin !== window.blocklet.appUrl) {
-        return;
-      }
-
-      if (event.data?.kind === 'component-installer' && event.data?.blocklet?.children) {
-        let hasChild = false;
-        const didSet = parseDidToSet(didKeys);
-        event.data?.blocklet?.children.forEach((item) => {
-          if (didSet.has(item.meta?.did)) {
-            hasChild = true;
-            setInstallStatus((value) => {
-              return {
-                ...value,
-                [item.meta?.did]: item.status || 'waiting',
-              };
-            });
-          }
-        });
-        if (!hasChild) {
-          setInstallStatus({});
-        }
+  }), P(() => {
+    const t = (n) => {
+      var s, a, w, S, g;
+      if (n.origin === window.blocklet.appUrl && ((s = n.data) == null ? void 0 : s.kind) === "component-installer" && (w = (a = n.data) == null ? void 0 : a.blocklet) != null && w.children) {
+        let E = !1;
+        const R = u(o);
+        (g = (S = n.data) == null ? void 0 : S.blocklet) == null || g.children.forEach((c) => {
+          var k;
+          R.has((k = c.meta) == null ? void 0 : k.did) && (E = !0, i((U) => {
+            var b;
+            return {
+              ...U,
+              [(b = c.meta) == null ? void 0 : b.did]: c.status || "waiting"
+            };
+          }));
+        }), E || i({});
       }
     };
-
-    window.addEventListener('message', handle);
-    return () => {
-      window.removeEventListener('message', handle);
+    return window.addEventListener("message", t), () => {
+      window.removeEventListener("message", t);
     };
-  }, [didKeys]);
-
-  return {
-    optComponents,
-    installed: !optComponents.length && definedInBlockletYML,
-    installStatus,
-    setInstallStatus,
-    definedInBlockletYML,
+  }, [o]), {
+    optComponents: r,
+    installed: !r.length && h,
+    installStatus: L,
+    setInstallStatus: i,
+    definedInBlockletYML: h
   };
 }
-
-export default useComponentInstalled;
+export {
+  B as default
+};

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

@@ -1,114 +1,93 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, 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 { joinURL, withQuery } from "ufo";
-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 AddComponent({
-  componentDid,
-  resourceType,
-  resourceDid,
-  grantedRoles = ["admin", "owner"],
-  autoClose = true,
-  selectedMeta,
-  storeUrl,
-  onComplete,
-  onClose,
-  render
+import { jsxs as B, Fragment as C, jsx as g } from "react/jsx-runtime";
+import { use as F, useRef as I, useEffect as S } from "react";
+import j from "@arcblock/ux/lib/Button";
+import { useLocaleContext as P } from "@arcblock/ux/lib/Locale/context";
+import { BLOCKLET_SERVICE_PATH_PREFIX as T } from "@arcblock/ux/lib/Util/constant";
+import { useMemoizedFn as r, useReactive as U } from "ahooks";
+import { translate as _ } from "@arcblock/ux/lib/Locale/util";
+import { withQuery as A, joinURL as M } from "ufo";
+import { SessionContext as O } from "@arcblock/did-connect/lib/Session";
+import h from "@arcblock/ux/lib/Toast";
+import z from "./resource-dialog.js";
+import { translations as H } from "../libs/locales.js";
+function $({
+  componentDid: a,
+  resourceType: w,
+  resourceDid: p,
+  grantedRoles: L = ["admin", "owner"],
+  autoClose: R = !0,
+  selectedMeta: D,
+  storeUrl: E,
+  onComplete: n,
+  onClose: t,
+  render: m
 }) {
-  const { session } = useContext(SessionContext);
-  const { locale } = useLocaleContext();
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, "en", data);
-  });
-  const refIframe = useRef(null);
-  const currentState = useReactive({
-    loading: false,
-    showDialog: false
-  });
-  const importUrl = withQuery(joinURL(BLOCKLET_SERVICE_PATH_PREFIX, "embed/resources", componentDid, "add"), {
-    resourceDid,
-    resourceType,
+  const { session: d } = F(O), { locale: x } = P(), i = r((o, s = {}) => _(H, o, x, "en", s)), l = I(null), e = U({
+    loading: !1,
+    showDialog: !1
+  }), b = A(M(T, "embed/resources", a, "add"), {
+    resourceDid: p,
+    resourceType: w,
     mode: "dialog",
     showFromUrl: "false",
     showResourcesSwitch: "false",
     enableRunBackground: "false",
     showCategory: "false"
-  });
-  const handleClose = useMemoizedFn(() => {
-    currentState.showDialog = false;
-    onClose?.();
-  });
-  const handleComplete = useMemoizedFn(() => {
-    currentState.showDialog = false;
-    onComplete?.();
-  });
-  const handleOpen = useMemoizedFn(() => {
-    if (!session.user) {
-      Toast.warning(t("needLogin"));
+  }), k = r(() => {
+    e.showDialog = !1, t == null || t();
+  }), c = r(() => {
+    e.showDialog = !1, n == null || n();
+  }), f = r(() => {
+    var o;
+    if (!d.user) {
+      h.warning(i("needLogin"));
       return;
     }
-    if (!grantedRoles.includes(session.user?.role)) {
-      Toast.warning(t("noPermission"));
+    if (!L.includes((o = d.user) == null ? void 0 : o.role)) {
+      h.warning(i("noPermission"));
       return;
     }
-    currentState.loading = true;
-    currentState.showDialog = true;
+    e.loading = !0, e.showDialog = !0;
+  }), y = r(() => {
+    var o;
+    e.loading = !1, l.current && ((o = l.current) == null || o.selectBlocklet(D));
+  }), u = r((o) => {
+    var s;
+    ((s = o == null ? void 0 : o.data) == null ? void 0 : s.event) === "component.installed" && o.data.componentDid === a && (R || o.data.manual) && c();
   });
-  const handleLoad = useMemoizedFn(() => {
-    currentState.loading = false;
-    if (refIframe.current) {
-      refIframe.current?.selectBlocklet(selectedMeta);
-    }
-  });
-  const handleIframeMessage = useMemoizedFn((event) => {
-    if (event?.data?.event === "component.installed" && event.data.componentDid === componentDid) {
-      if (autoClose || event.data.manual) {
-        handleComplete();
-      }
-    }
-  });
-  useEffect(() => {
-    if (currentState.showDialog) {
-      window.addEventListener("message", handleIframeMessage);
-    } else {
-      window.removeEventListener("message", handleIframeMessage);
-    }
-  }, [currentState.showDialog]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    render ? render({ onClick: handleOpen, loading: currentState.loading }) : /* @__PURE__ */ jsx(
-      Button,
+  return S(() => {
+    e.showDialog ? window.addEventListener("message", u) : window.removeEventListener("message", u);
+  }, [e.showDialog]), /* @__PURE__ */ B(C, { children: [
+    m ? m({ onClick: f, loading: e.loading }) : /* @__PURE__ */ g(
+      j,
       {
         variant: "outlined",
         color: "secondary",
         type: "button",
         className: "submit",
-        onClick: handleOpen,
-        loading: currentState.loading,
+        onClick: f,
+        loading: e.loading,
         sx: { mr: 1, ml: 1 },
-        children: t("importResource")
+        children: i("importResource")
       },
       "button"
     ),
-    currentState.showDialog && /* @__PURE__ */ jsx(
-      ResourceDialog,
+    e.showDialog && /* @__PURE__ */ g(
+      z,
       {
-        ref: refIframe,
-        src: importUrl,
-        storeUrl,
-        open: true,
-        componentDid,
-        loading: currentState.loading,
-        onClose: handleClose,
-        onComplete: handleComplete,
-        onLoad: handleLoad
+        ref: l,
+        src: b,
+        storeUrl: E,
+        open: !0,
+        componentDid: a,
+        loading: e.loading,
+        onClose: k,
+        onComplete: c,
+        onLoad: y
       }
     )
   ] });
 }
+export {
+  $ as default
+};

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

@@ -1,2 +1,4 @@
-import CheckComponent from "../../ComponentInstaller/index.js";
-export default CheckComponent;
+import r from "../../ComponentInstaller/index.js";
+export {
+  r as default
+};