@blocklet/ui-react 2.9.91 → 2.10.1

package/lib/ComponentInstaller/installer-item.js

@@ -1,22 +1,9 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-module.exports = InstallerItem;
-var _jsxRuntime = require("react/jsx-runtime");
-var _Colors = require("@arcblock/ux/lib/Colors");
-var _react = require("@iconify/react");
-var _material = require("@mui/material");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function InstallerItem({
-  optionalComponent,
-  index,
-  installStatus,
-  hasPermission,
-  t
-}) {
+import { jsx, jsxs } from "react/jsx-runtime";
+import { temp as colors } from "@arcblock/ux/lib/Colors";
+import { Icon } from "@iconify/react";
+import { Box, Button } from "@mui/material";
+import PropTypes from "prop-types";
+export default function InstallerItem({ optionalComponent, index, installStatus, hasPermission, t }) {
   const handleInstall = () => {
     window.open(optionalComponent?.installUrl, "_blank");
   };
@@ -28,134 +15,125 @@ function InstallerItem({
   };
   const installStatusDone = installStatus === "stopped" || installStatus === "running";
   const size = 60;
-  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-    children: [index === 0 ? null : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-      sx: {
-        width: "100%",
-        height: "1px",
-        backgroundColor: _Colors.temp.gray6
-      }
-    }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-      sx: {
-        padding: "20px 24px",
-        paddingTop: 0.5,
-        marginTop: 2,
-        display: "flex",
-        flexDirection: "row",
-        justifyContent: "start",
-        alignItems: "flex-start"
-      },
-      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)("img", {
-        style: {
-          width: size,
-          height: size,
-          minWidth: size,
-          minHeight: size
-        },
-        src: optionalComponent.logoUrl,
-        alt: optionalComponent.meta.title
-      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    index === 0 ? null : /* @__PURE__ */ jsx(Box, { sx: { width: "100%", height: "1px", backgroundColor: colors.gray6 } }),
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
         sx: {
+          padding: "20px 24px",
+          paddingTop: 0.5,
+          marginTop: 2,
           display: "flex",
-          flexDirection: "column",
+          flexDirection: "row",
           justifyContent: "start",
-          alignItems: "start",
-          marginLeft: 2
+          alignItems: "flex-start"
         },
-        children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-          sx: {
-            fontSize: "16px",
-            fontWeight: "bold",
-            cursor: "pointer",
-            ".link-icon": {
-              opacity: 0
-            },
-            ":hover .link-icon": {
-              opacity: 1
+        children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              style: { width: size, height: size, minWidth: size, minHeight: size },
+              src: optionalComponent.logoUrl,
+              alt: optionalComponent.meta.title
             }
-          },
-          onClick: () => handleOpenStore(optionalComponent.meta?.did),
-          children: [optionalComponent.meta.title, /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-            sx: {
-              paddingLeft: 1,
-              fontSize: "13px",
-              fontWeight: "400"
-            },
-            component: "span",
-            children: [optionalComponent.meta.version, /* @__PURE__ */(0, _jsxRuntime.jsx)(_react.Icon, {
-              className: "link-icon",
-              icon: "fluent:open-20-filled",
-              style: {
-                color: _Colors.temp.primaryBase,
-                fontSize: 16,
-                transform: "translate(6px, 3px)",
-                transition: "all 0.3s"
-              }
-            })]
-          })]
-        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-          sx: {
-            marginTop: 0,
-            opacity: 0.7
-          },
-          children: optionalComponent.meta.description
-        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-          sx: {
-            display: hasPermission ? "flex" : "none",
-            flexDirection: "row",
-            gap: 1
-          },
-          children: installStatus ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-            sx: {
-              marginTop: 2,
-              opacity: 0.7
-            },
-            children: installStatusDone ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
-              variant: "contained",
-              onClick: handleRefresh,
-              children: t("componentInstallerRefresh")
-            }, "refresh") : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
-              disabled: true,
+          ),
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
               sx: {
-                color: "#333"
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "start",
+                alignItems: "start",
+                marginLeft: 2
               },
-              startIcon: /* @__PURE__ */(0, _jsxRuntime.jsx)(_react.Icon, {
-                icon: "line-md:loading-loop",
-                style: {
-                  color: "#333",
-                  fontSize: 16
-                }
-              }),
-              variant: "contained",
-              children: installStatus
-            }, "status")
-          }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
-            sx: {
-              marginTop: 2
-            },
-            variant: "contained",
-            className: "button",
-            onClick: () => handleInstall(optionalComponent.meta?.did),
-            children: t("componentInstallerInstall")
-          }, "install")
-        }), installStatusDone ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-          sx: {
-            marginTop: 2,
-            opacity: 0.7
-          },
-          children: t("componentInstallerSuccessInstalled")
-        }) : null]
-      })]
-    })]
-  });
+              children: [
+                /* @__PURE__ */ jsxs(
+                  Box,
+                  {
+                    sx: {
+                      fontSize: "16px",
+                      fontWeight: "bold",
+                      cursor: "pointer",
+                      ".link-icon": {
+                        opacity: 0
+                      },
+                      ":hover .link-icon": {
+                        opacity: 1
+                      }
+                    },
+                    onClick: () => handleOpenStore(optionalComponent.meta?.did),
+                    children: [
+                      optionalComponent.meta.title,
+                      /* @__PURE__ */ jsxs(
+                        Box,
+                        {
+                          sx: {
+                            paddingLeft: 1,
+                            fontSize: "13px",
+                            fontWeight: "400"
+                          },
+                          component: "span",
+                          children: [
+                            optionalComponent.meta.version,
+                            /* @__PURE__ */ jsx(
+                              Icon,
+                              {
+                                className: "link-icon",
+                                icon: "fluent:open-20-filled",
+                                style: {
+                                  color: colors.primaryBase,
+                                  fontSize: 16,
+                                  transform: "translate(6px, 3px)",
+                                  transition: "all 0.3s"
+                                }
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__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,
+                  {
+                    disabled: true,
+                    sx: { color: "#333" },
+                    startIcon: /* @__PURE__ */ jsx(Icon, { icon: "line-md:loading-loop", style: { color: "#333", fontSize: 16 } }),
+                    variant: "contained",
+                    children: installStatus
+                  },
+                  "status"
+                ) }) : /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    sx: { marginTop: 2 },
+                    variant: "contained",
+                    className: "button",
+                    onClick: () => handleInstall(optionalComponent.meta?.did),
+                    children: t("componentInstallerInstall")
+                  },
+                  "install"
+                ) }),
+                installStatusDone ? /* @__PURE__ */ jsx(Box, { sx: { marginTop: 2, opacity: 0.7 }, children: t("componentInstallerSuccessInstalled") }) : null
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
 }
 InstallerItem.propTypes = {
-  t: _propTypes.default.func.isRequired,
-  optionalComponent: _propTypes.default.object.isRequired,
-  index: _propTypes.default.number.isRequired,
-  installStatus: _propTypes.default.string,
-  hasPermission: _propTypes.default.bool.isRequired
+  t: PropTypes.func.isRequired,
+  optionalComponent: PropTypes.object.isRequired,
+  index: PropTypes.number.isRequired,
+  installStatus: PropTypes.string,
+  hasPermission: PropTypes.bool.isRequired
 };
 InstallerItem.defaultProps = {
   installStatus: ""
-};
+};

package/lib/ComponentInstaller/locales.js

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
 const translations = {
   zh: {
     componentInstallerTitle: '缺少组件',
@@ -12,7 +6,7 @@ const translations = {
     componentInstallerRefresh: '重载页面',
     componentInstallerSuccessInstalled: '安装成功，请重载页面查看变化。',
     componentInstallerSuggestions: '请联系系统管理员安装该组件。',
-    componentInstallerNoDefinedInBlockletYML: '组件未在 blocklet.yml 中定义'
+    componentInstallerNoDefinedInBlockletYML: '组件未在 blocklet.yml 中定义',
   },
   en: {
     componentInstallerTitle: 'Missing component',
@@ -21,7 +15,8 @@ const translations = {
     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'
-  }
+    componentInstallerNoDefinedInBlockletYML: 'The component is not defined in blocklet.yml',
+  },
 };
-module.exports = translations;
+
+export default translations;

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

@@ -1,72 +1,65 @@
-"use strict";
+import { AUTH_SERVICE_PREFIX } from '@arcblock/did-connect/lib/constant';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { joinURL } from 'ufo';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _constant = require("@arcblock/did-connect/lib/constant");
-var _react = require("react");
-var _ufo = require("ufo");
-const parseDidToSet = did => {
+const parseDidToSet = (did) => {
   if (typeof did === 'string') {
     return new Set(did.split(';;'));
   }
   return new Set(did);
 };
-function useComponentInstalled({
-  did,
-  onInstalled,
-  onError
-}) {
+
+function useComponentInstalled({ did, onInstalled, onError }) {
   const didKeys = Array.isArray(did) ? did.join(';;') : did;
-  const [installStatus, setInstallStatus] = (0, _react.useState)({});
-  const onInstalledRef = (0, _react.useRef)({
-    onInstalled,
-    onError
-  });
-  onInstalledRef.current = {
-    onInstalled,
-    onError
-  };
-  const {
-    optionalComponents,
-    componentMountPoints
-  } = window.blocklet;
-  const optComponents = (0, _react.useMemo)(() => {
+  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) {
       return [];
     }
     const didSet = parseDidToSet(didKeys);
-    const components = optionalComponents.filter(c => didSet.has(c.meta.did));
+    const components = optionalComponents.filter((c) => didSet.has(c.meta.did));
     (components ? onInstalledRef.current.onError : onInstalledRef.current.onInstalled)?.(components);
     return components;
   }, [didKeys, optionalComponents]);
-  const definedInBlockletYML = (0, _react.useMemo)(() => {
+
+  const definedInBlockletYML = useMemo(() => {
     if (optComponents.length) {
       return true;
     }
     const didSet = parseDidToSet(didKeys);
-    return (componentMountPoints || []).find(item => didSet.has(item.did));
+    return (componentMountPoints || []).find((item) => didSet.has(item.did));
   }, [optComponents, componentMountPoints, didKeys]);
-  optComponents.forEach(item => {
-    item.storeUrl = (0, _ufo.joinURL)(item.meta.homepage, 'blocklets', item.meta.did);
-    item.installUrl = (0, _ufo.joinURL)(window.blocklet.appUrl, _constant.AUTH_SERVICE_PREFIX, `/admin/components?install-component=${item.meta.did}`);
+
+  optComponents.forEach((item) => {
+    item.storeUrl = joinURL(item.meta.homepage, 'blocklets', item.meta.did);
+    item.installUrl = joinURL(
+      window.blocklet.appUrl,
+      AUTH_SERVICE_PREFIX,
+      `/admin/components?install-component=${item.meta.did}`
+    );
   });
-  (0, _react.useEffect)(() => {
-    const handle = event => {
+
+  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 => {
+        event.data?.blocklet?.children.forEach((item) => {
           if (didSet.has(item.meta?.did)) {
             hasChild = true;
-            setInstallStatus(value => {
+            setInstallStatus((value) => {
               return {
                 ...value,
-                [item.meta?.did]: item.status || 'waiting'
+                [item.meta?.did]: item.status || 'waiting',
               };
             });
           }
@@ -76,17 +69,20 @@ function useComponentInstalled({
         }
       }
     };
+
     window.addEventListener('message', handle);
     return () => {
       window.removeEventListener('message', handle);
     };
   }, [didKeys]);
+
   return {
     optComponents,
     installed: !optComponents.length && definedInBlockletYML,
     installStatus,
     setInstallStatus,
-    definedInBlockletYML
+    definedInBlockletYML,
   };
 }
-module.exports = useComponentInstalled;
+
+export default useComponentInstalled;

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

@@ -1,23 +1,16 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-module.exports = AddComponent;
-var _jsxRuntime = require("react/jsx-runtime");
-var _react = require("react");
-var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
-var _context = require("@arcblock/ux/lib/Locale/context");
-var _constant = require("@arcblock/ux/lib/Util/constant");
-var _ahooks = require("ahooks");
-var _util = require("@arcblock/ux/lib/Locale/util");
-var _ufo = require("ufo");
-var _Session = require("@arcblock/did-connect/lib/Session");
-var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
-var _resourceDialog = _interopRequireDefault(require("./resource-dialog"));
-var _locales = require("../libs/locales");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function AddComponent({
+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 { WELLKNOWN_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,
@@ -29,21 +22,17 @@ function AddComponent({
   onClose,
   render
 }) {
-  const {
-    session
-  } = (0, _react.useContext)(_Session.SessionContext);
-  const {
-    locale
-  } = (0, _context.useLocaleContext)();
-  const t = (0, _ahooks.useMemoizedFn)((key, data = {}) => {
-    return (0, _util.translate)(_locales.translations, key, locale, "en", data);
+  const { session } = useContext(SessionContext);
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, "en", data);
   });
-  const refIframe = (0, _react.useRef)(null);
-  const currentState = (0, _ahooks.useReactive)({
+  const refIframe = useRef(null);
+  const currentState = useReactive({
     loading: false,
     showDialog: false
   });
-  const importUrl = (0, _ufo.withQuery)((0, _ufo.joinURL)(_constant.WELLKNOWN_SERVICE_PATH_PREFIX, "embed/resources", componentDid, "add"), {
+  const importUrl = withQuery(joinURL(WELLKNOWN_SERVICE_PATH_PREFIX, "embed/resources", componentDid, "add"), {
     resourceDid,
     resourceType,
     mode: "dialog",
@@ -52,72 +41,74 @@ function AddComponent({
     enableRunBackground: "false",
     showCategory: "false"
   });
-  const handleClose = (0, _ahooks.useMemoizedFn)(() => {
+  const handleClose = useMemoizedFn(() => {
     currentState.showDialog = false;
     onClose?.();
   });
-  const handleComplete = (0, _ahooks.useMemoizedFn)(() => {
+  const handleComplete = useMemoizedFn(() => {
     currentState.showDialog = false;
     onComplete?.();
   });
-  const handleOpen = (0, _ahooks.useMemoizedFn)(() => {
+  const handleOpen = useMemoizedFn(() => {
     if (!session.user) {
-      _Toast.default.warning(t("needLogin"));
+      Toast.warning(t("needLogin"));
       return;
     }
     if (!grantedRoles.includes(session.user?.role)) {
-      _Toast.default.warning(t("noPermission"));
+      Toast.warning(t("noPermission"));
       return;
     }
     currentState.loading = true;
     currentState.showDialog = true;
   });
-  const handleLoad = (0, _ahooks.useMemoizedFn)(() => {
+  const handleLoad = useMemoizedFn(() => {
     currentState.loading = false;
     if (refIframe.current) {
       refIframe.current?.selectBlocklet(selectedMeta);
     }
   });
-  const handleIframeMessage = (0, _ahooks.useMemoizedFn)(event => {
+  const handleIframeMessage = useMemoizedFn((event) => {
     if (event?.data?.event === "component.installed" && event.data.componentDid === componentDid) {
       if (autoClose || event.data.manual) {
         handleComplete();
       }
     }
   });
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     if (currentState.showDialog) {
       window.addEventListener("message", handleIframeMessage);
     } else {
       window.removeEventListener("message", handleIframeMessage);
     }
   }, [currentState.showDialog]);
-  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [render ? render({
-      onClick: handleOpen,
-      loading: currentState.loading
-    }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_Button.default, {
-      variant: "outlined",
-      color: "secondary",
-      type: "button",
-      className: "submit",
-      onClick: handleOpen,
-      loading: currentState.loading,
-      sx: {
-        mr: 1,
-        ml: 1
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    render ? render({ onClick: handleOpen, loading: currentState.loading }) : /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outlined",
+        color: "secondary",
+        type: "button",
+        className: "submit",
+        onClick: handleOpen,
+        loading: currentState.loading,
+        sx: { mr: 1, ml: 1 },
+        children: t("importResource")
       },
-      children: t("importResource")
-    }, "button"), currentState.showDialog && /* @__PURE__ */(0, _jsxRuntime.jsx)(_resourceDialog.default, {
-      ref: refIframe,
-      src: importUrl,
-      storeUrl,
-      open: true,
-      componentDid,
-      loading: currentState.loading,
-      onClose: handleClose,
-      onComplete: handleComplete,
-      onLoad: handleLoad
-    })]
-  });
-}
+      "button"
+    ),
+    currentState.showDialog && /* @__PURE__ */ jsx(
+      ResourceDialog,
+      {
+        ref: refIframe,
+        src: importUrl,
+        storeUrl,
+        open: true,
+        componentDid,
+        loading: currentState.loading,
+        onClose: handleClose,
+        onComplete: handleComplete,
+        onLoad: handleLoad
+      }
+    )
+  ] });
+}

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

@@ -1,9 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _ComponentInstaller = _interopRequireDefault(require("../../ComponentInstaller"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-module.exports = _ComponentInstaller.default;
+import CheckComponent from "../../ComponentInstaller/index.js";
+export default CheckComponent;