@blocklet/ui-react 2.9.91 → 2.10.0

package/es/ComponentInstaller/installer-item.js

@@ -1,139 +0,0 @@
-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");
-  };
-  const handleOpenStore = () => {
-    window.open(optionalComponent?.storeUrl, "_blank");
-  };
-  const handleRefresh = () => {
-    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: colors.gray6 } }),
-    /* @__PURE__ */ jsxs(
-      Box,
-      {
-        sx: {
-          padding: "20px 24px",
-          paddingTop: 0.5,
-          marginTop: 2,
-          display: "flex",
-          flexDirection: "row",
-          justifyContent: "start",
-          alignItems: "flex-start"
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            "img",
-            {
-              style: { width: size, height: size, minWidth: size, minHeight: size },
-              src: optionalComponent.logoUrl,
-              alt: optionalComponent.meta.title
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            Box,
-            {
-              sx: {
-                display: "flex",
-                flexDirection: "column",
-                justifyContent: "start",
-                alignItems: "start",
-                marginLeft: 2
-              },
-              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.func.isRequired,
-  optionalComponent: PropTypes.object.isRequired,
-  index: PropTypes.number.isRequired,
-  installStatus: PropTypes.string,
-  hasPermission: PropTypes.bool.isRequired
-};
-InstallerItem.defaultProps = {
-  installStatus: ""
-};

package/es/ComponentInstaller/locales.d.ts

@@ -1,28 +0,0 @@
-export default translations;
-declare namespace translations {
-    namespace zh {
-        let componentInstallerTitle: string;
-        let componentInstallerInstall: string;
-        let componentInstallerClose: string;
-        let componentInstallerRefresh: string;
-        let componentInstallerSuccessInstalled: string;
-        let componentInstallerSuggestions: string;
-        let componentInstallerNoDefinedInBlockletYML: string;
-    }
-    namespace en {
-        let componentInstallerTitle_1: string;
-        export { componentInstallerTitle_1 as componentInstallerTitle };
-        let componentInstallerInstall_1: string;
-        export { componentInstallerInstall_1 as componentInstallerInstall };
-        let componentInstallerClose_1: string;
-        export { componentInstallerClose_1 as componentInstallerClose };
-        let componentInstallerRefresh_1: string;
-        export { componentInstallerRefresh_1 as componentInstallerRefresh };
-        let componentInstallerSuccessInstalled_1: string;
-        export { componentInstallerSuccessInstalled_1 as componentInstallerSuccessInstalled };
-        let componentInstallerSuggestions_1: string;
-        export { componentInstallerSuggestions_1 as componentInstallerSuggestions };
-        let componentInstallerNoDefinedInBlockletYML_1: string;
-        export { componentInstallerNoDefinedInBlockletYML_1 as componentInstallerNoDefinedInBlockletYML };
-    }
-}

package/es/ComponentInstaller/locales.js

@@ -1,22 +0,0 @@
-const translations = {
-  zh: {
-    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',
-  },
-};
-
-export default translations;

package/es/ComponentInstaller/use-component-installed.d.ts

@@ -1,12 +0,0 @@
-export default useComponentInstalled;
-declare function useComponentInstalled({ did, onInstalled, onError }: {
-    did: any;
-    onInstalled: any;
-    onError: any;
-}): {
-    optComponents: any;
-    installed: any;
-    installStatus: {};
-    setInstallStatus: import("react").Dispatch<import("react").SetStateAction<{}>>;
-    definedInBlockletYML: any;
-};

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

@@ -1,88 +0,0 @@
-import { AUTH_SERVICE_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) {
-      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(
-      window.blocklet.appUrl,
-      AUTH_SERVICE_PREFIX,
-      `/admin/components?install-component=${item.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({});
-        }
-      }
-    };
-
-    window.addEventListener('message', handle);
-    return () => {
-      window.removeEventListener('message', handle);
-    };
-  }, [didKeys]);
-
-  return {
-    optComponents,
-    installed: !optComponents.length && definedInBlockletYML,
-    installStatus,
-    setInstallStatus,
-    definedInBlockletYML,
-  };
-}
-
-export default useComponentInstalled;

package/es/ComponentManager/components/add-component.d.ts

@@ -1,16 +0,0 @@
-import { ReactElement } from 'react';
-export default function AddComponent({ componentDid, resourceType, resourceDid, grantedRoles, autoClose, selectedMeta, storeUrl, onComplete, onClose, render, }: {
-    componentDid: string;
-    resourceType?: string;
-    resourceDid?: string;
-    autoClose: boolean;
-    selectedMeta?: any;
-    storeUrl?: string;
-    grantedRoles?: string[];
-    onComplete: () => void;
-    onClose: () => void;
-    render?: ({ onClick, loading }: {
-        onClick: () => void;
-        loading: boolean;
-    }) => ReactElement;
-}): import("react").JSX.Element;

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

@@ -1,114 +0,0 @@
-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,
-  grantedRoles = ["admin", "owner"],
-  autoClose = true,
-  selectedMeta,
-  storeUrl,
-  onComplete,
-  onClose,
-  render
-}) {
-  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(WELLKNOWN_SERVICE_PATH_PREFIX, "embed/resources", componentDid, "add"), {
-    resourceDid,
-    resourceType,
-    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"));
-      return;
-    }
-    if (!grantedRoles.includes(session.user?.role)) {
-      Toast.warning(t("noPermission"));
-      return;
-    }
-    currentState.loading = true;
-    currentState.showDialog = true;
-  });
-  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,
-      {
-        variant: "outlined",
-        color: "secondary",
-        type: "button",
-        className: "submit",
-        onClick: handleOpen,
-        loading: currentState.loading,
-        sx: { mr: 1, ml: 1 },
-        children: t("importResource")
-      },
-      "button"
-    ),
-    currentState.showDialog && /* @__PURE__ */ jsx(
-      ResourceDialog,
-      {
-        ref: refIframe,
-        src: importUrl,
-        storeUrl,
-        open: true,
-        componentDid,
-        loading: currentState.loading,
-        onClose: handleClose,
-        onComplete: handleComplete,
-        onLoad: handleLoad
-      }
-    )
-  ] });
-}

package/es/ComponentManager/components/check-component.d.ts

@@ -1,2 +0,0 @@
-import CheckComponent from '../../ComponentInstaller';
-export default CheckComponent;

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

@@ -1,2 +0,0 @@
-import CheckComponent from "../../ComponentInstaller/index.js";
-export default CheckComponent;

package/es/ComponentManager/components/publish-component.d.ts

@@ -1,10 +0,0 @@
-import { ReactElement } from 'react';
-export default function PublishComponent({ componentDid, grantedRoles, onClose, render, }: {
-    componentDid: string;
-    grantedRoles?: string[];
-    onClose: () => void;
-    render?: ({ onClick, loading }: {
-        onClick: () => void;
-        loading: boolean;
-    }) => ReactElement;
-}): import("react").JSX.Element;

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

@@ -1,76 +0,0 @@
-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 { WELLKNOWN_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
-}) {
-  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 = `${WELLKNOWN_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"));
-      return;
-    }
-    if (grantedRoles && grantedRoles.length > 0) {
-      if (!grantedRoles?.includes(session.user?.role)) {
-        Toast.warning(t("noPermission"));
-        return;
-      }
-    }
-    currentState.loading = true;
-    currentState.showDialog = true;
-  });
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    render ? render({ onClick: handleOpen, loading: currentState.loading }) : /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "outlined",
-        color: "secondary",
-        type: "button",
-        className: "submit",
-        loading: currentState.loading,
-        onClick: handleOpen,
-        sx: { mr: 1, ml: 1 },
-        children: t("exportResource")
-      },
-      "button"
-    ),
-    currentState.showDialog && /* @__PURE__ */ jsx(
-      ResourceDialog,
-      {
-        src: exportUrl,
-        open: true,
-        onClose: handleClose,
-        onLoad: handleLoad,
-        componentDid,
-        loading: currentState.loading
-      }
-    )
-  ] });
-}

package/es/ComponentManager/components/resource-dialog.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-declare const _default: import("react").ForwardRefExoticComponent<{
-    src: string;
-    componentDid: string;
-    open?: boolean | undefined;
-    loading?: boolean | undefined;
-    storeUrl?: string | undefined;
-    onLoad?: (() => void) | undefined;
-    onClose?: (() => void) | undefined;
-    onComplete?: (() => void) | undefined;
-} & import("react").RefAttributes<{
-    selectBlocklet: (blockletMeta: any) => void;
-}>>;
-export default _default;

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

@@ -1,74 +0,0 @@
-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 = () => {
-  },
-  onComplete = () => {
-  },
-  onLoad = () => {
-  }
-}, 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();
-      }
-    }
-  });
-  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
-          },
-          "*"
-        );
-      }
-    }
-  }));
-  if (!open) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    "iframe",
-    {
-      ref: iframeRef,
-      src,
-      title: "Resource Dialog",
-      style: {
-        position: "fixed",
-        top: 0,
-        left: loading ? "-100vw" : 0,
-        width: "100vw",
-        height: "100vh",
-        zIndex: 9999,
-        backgroundColor: "transparent",
-        border: "none"
-      }
-    }
-  );
-}
-export default forwardRef(ResourceDialog);

package/es/ComponentManager/index.d.ts

@@ -1,3 +0,0 @@
-export { default as PublishComponent } from './components/publish-component';
-export { default as AddComponent } from './components/add-component';
-export { default as CheckComponent } from './components/check-component';

package/es/ComponentManager/index.js

@@ -1,3 +0,0 @@
-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";

package/es/ComponentManager/libs/locales.d.ts

@@ -1,14 +0,0 @@
-export declare const translations: {
-    zh: {
-        importResource: string;
-        exportResource: string;
-        noPermission: string;
-        needLogin: string;
-    };
-    en: {
-        importResource: string;
-        exportResource: string;
-        noPermission: string;
-        needLogin: string;
-    };
-};

package/es/ComponentManager/libs/locales.js

@@ -1,14 +0,0 @@
-export const translations = {
-  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"
-  },
-  en: {
-    importResource: "Import",
-    exportResource: "Export",
-    noPermission: "You do not have permission to perform this operation. Please switch your passport as admin or contact the administrator to install the blocklet",
-    needLogin: "Please login first"
-  }
-};