@blocklet/ui-react 2.9.15 → 2.9.16

package/es/ComponentInstaller/index.d.ts

@@ -0,0 +1,45 @@
+export default ComponentInstaller;
+declare function ComponentInstaller({ warnIcon, did, noPermissionMute, onInstalled, onError, children, closeByOutSize, onClose, fallback, roles, }: {
+    warnIcon: any;
+    did: any;
+    noPermissionMute: any;
+    onInstalled: any;
+    onError: any;
+    children: any;
+    closeByOutSize: any;
+    onClose: any;
+    fallback: any;
+    roles?: string[] | undefined;
+}): import("react").JSX.Element;
+declare namespace ComponentInstaller {
+    namespace propTypes {
+        let warnIcon: any;
+        let did: any;
+        let noPermissionMute: any;
+        let onInstalled: any;
+        let onError: any;
+        let children: any;
+        let closeByOutSize: any;
+        let onClose: any;
+        let fallback: any;
+        let roles: any;
+    }
+    namespace defaultProps {
+        let warnIcon_1: null;
+        export { warnIcon_1 as warnIcon };
+        let noPermissionMute_1: boolean;
+        export { noPermissionMute_1 as noPermissionMute };
+        let onInstalled_1: null;
+        export { onInstalled_1 as onInstalled };
+        let onError_1: null;
+        export { onError_1 as onError };
+        let closeByOutSize_1: boolean;
+        export { closeByOutSize_1 as closeByOutSize };
+        let onClose_1: null;
+        export { onClose_1 as onClose };
+        let fallback_1: null;
+        export { fallback_1 as fallback };
+        let roles_1: string[];
+        export { roles_1 as roles };
+    }
+}

package/es/ComponentInstaller/index.js

@@ -0,0 +1,298 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button, Box, ClickAwayListener, Fade, Paper } from "@mui/material";
+import { Icon } from "@iconify/react";
+import { temp as colors } from "@arcblock/ux/lib/Colors";
+import { SessionContext } from "@arcblock/did-connect/lib/Session";
+import { useContext } from "react";
+import SessionPermission from "@arcblock/ux/lib/SessionPermission";
+import PropTypes from "prop-types";
+import { useMemoizedFn } from "ahooks";
+import { translate } from "@arcblock/ux/lib/Locale/util";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import useComponentInstalled from "./use-component-installed.js";
+import translations from "./locales.js";
+function ComponentInstaller({
+  warnIcon,
+  did,
+  noPermissionMute,
+  onInstalled,
+  onError,
+  children,
+  closeByOutSize,
+  onClose,
+  fallback,
+  roles = ["owner", "admin"]
+}) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, "en", data);
+  });
+  const { installed, optionalComponent, installUrl, storeUrl, installStatus, installStatusDone, definedInBlockletYML } = useComponentInstalled({
+    did,
+    onInstalled,
+    onError
+  });
+  const sessionCtx = useContext(SessionContext);
+  const handleInstall = () => {
+    window.open(installUrl, "_blank");
+  };
+  const handleClose = () => {
+    onClose?.(false);
+  };
+  const handleOpenStore = () => {
+    window.open(storeUrl, "_blank");
+  };
+  const handleRefresh = () => {
+    window.location.reload();
+  };
+  const size = 60;
+  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,
+          optionalComponent,
+          installStatus,
+          handleOpenStore,
+          handleInstall,
+          handleRefresh
+        })
+      ] });
+    }
+    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: 3,
+                width: 400,
+                maxWidth: 400,
+                borderColor: colors.lineStep,
+                border: "0 !important",
+                fontSize: "14px",
+                textAlign: "left",
+                boxShadow: `0px 8px 16px 0px ${colors.gray6}, 0px 0px 0px 1px ${colors.gray6}`
+              },
+              children: !definedInBlockletYML ? /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column" }, children: [
+                /* @__PURE__ */ jsxs(
+                  Box,
+                  {
+                    sx: {
+                      padding: "20px 24px",
+                      marginLeft: 0,
+                      display: "flex",
+                      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: { width: "100%", height: "1px", backgroundColor: colors.gray6 } }),
+                /* @__PURE__ */ jsxs(Box, { sx: { padding: "20px 24px", marginTop: 0 }, children: [
+                  t("componentInstallerNoDefinedInBlockletYML"),
+                  ": ",
+                  did
+                ] }),
+                /* @__PURE__ */ jsx(Box, { sx: { padding: "0px 24px" }, children: onClose ? /* @__PURE__ */ jsx(Button, { sx: { marginBottom: 2 }, variant: "outlined", className: "button", onClick: handleClose, children: t("componentInstallerClose") }) : null })
+              ] }) : /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column" }, children: [
+                /* @__PURE__ */ jsxs(
+                  Box,
+                  {
+                    sx: {
+                      padding: "20px 24px",
+                      marginLeft: 0,
+                      display: "flex",
+                      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: { 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,
+                                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__ */ jsxs(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,
+                                  children: t("componentInstallerInstall")
+                                },
+                                "install"
+                              ),
+                              onClose ? /* @__PURE__ */ jsx(Button, { sx: { marginTop: 2 }, variant: "outlined", className: "button", onClick: handleClose, children: t("componentInstallerClose") }) : null
+                            ] }),
+                            installStatusDone ? /* @__PURE__ */ jsx(Box, { sx: { marginTop: 2, opacity: 0.7 }, children: t("componentInstallerSuccessInstalled") }) : null
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                ),
+                hasPermission ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Box, { sx: { width: "100%", height: "1px", backgroundColor: colors.gray6 } }),
+                  /* @__PURE__ */ jsxs(Box, { sx: { padding: "20px 24px" }, children: [
+                    /* @__PURE__ */ jsx(Box, { sx: { opacity: 1 }, children: t("componentInstallerSuggestions") }),
+                    onClose ? /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        sx: { marginTop: 2, alignSelf: "flex-start" },
+                        variant: "outlined",
+                        className: "button",
+                        onClick: handleClose,
+                        children: t("componentInstallerClose")
+                      }
+                    ) : null
+                  ] })
+                ] })
+              ] })
+            }
+          ) })
+        }
+      )
+    ] });
+  } });
+}
+ComponentInstaller.propTypes = {
+  warnIcon: PropTypes.node,
+  did: 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 = {
+  warnIcon: null,
+  noPermissionMute: false,
+  onInstalled: null,
+  onError: null,
+  closeByOutSize: false,
+  onClose: null,
+  fallback: null,
+  roles: ["owner", "admin"]
+};
+export default ComponentInstaller;

package/es/ComponentInstaller/locales.d.ts

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,15 @@
+export default useComponentInstalled;
+declare function useComponentInstalled({ did, onInstalled, onError }: {
+    did: any;
+    onInstalled: any;
+    onError: any;
+}): {
+    optionalComponent: any;
+    installed: any;
+    installUrl: string;
+    storeUrl: string;
+    installStatus: string;
+    setInstallStatus: import("react").Dispatch<import("react").SetStateAction<string>>;
+    installStatusDone: boolean;
+    definedInBlockletYML: any;
+};

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

@@ -0,0 +1,68 @@
+import { AUTH_SERVICE_PREFIX } from '@arcblock/did-connect/lib/constant';
+import { useMemo, useRef, useState, useEffect } from 'react';
+
+function useComponentInstalled({ did, onInstalled, onError }) {
+  const { optionalComponents, componentMountPoints } = window.blocklet;
+  const onInstalledRef = useRef({ onInstalled, onError });
+  onInstalledRef.current = { onInstalled, onError };
+
+  const optionalComponent = useMemo(() => {
+    if (!optionalComponents || !optionalComponents.length) {
+      return null;
+    }
+    const component = optionalComponents.find((c) => c.meta.did === did);
+    (component ? onInstalledRef.current.onError : onInstalledRef.current.onInstalled)?.(component);
+    return component;
+  }, [did, optionalComponents]);
+
+  const definedInBlockletYML = useMemo(() => {
+    if (optionalComponent) {
+      return true;
+    }
+    return (componentMountPoints || []).find((item) => item.did === did);
+  }, [optionalComponent, componentMountPoints, did]);
+
+  const installUrl = `${window.blocklet.appUrl}/${AUTH_SERVICE_PREFIX}/admin/components?install-component=${did}`;
+  const storeUrl = optionalComponent ? `${optionalComponent.meta.homepage}/blocklets/${did}` : '';
+  const [installStatus, setInstallStatus] = useState('');
+
+  useEffect(() => {
+    const handle = (event) => {
+      if (event.origin !== window.blocklet.appUrl) {
+        return;
+      }
+
+      if (event.data?.kind === 'component-installer' && event.data?.blocklet?.children) {
+        let hasChild = false;
+        event.data?.blocklet?.children.forEach((item) => {
+          if (item.meta?.did === did) {
+            hasChild = true;
+            setInstallStatus(item.status || 'waiting');
+          }
+        });
+        if (!hasChild) {
+          setInstallStatus('');
+        }
+      }
+    };
+    window.addEventListener('message', handle);
+    return () => {
+      window.removeEventListener('message', handle);
+    };
+  }, [did]);
+
+  const installStatusDone = installStatus === 'stopped' || installStatus === 'running';
+
+  return {
+    optionalComponent,
+    installed: !optionalComponent && definedInBlockletYML,
+    installUrl,
+    storeUrl,
+    installStatus,
+    setInstallStatus,
+    installStatusDone,
+    definedInBlockletYML,
+  };
+}
+
+export default useComponentInstalled;

package/es/index.d.ts

@@ -2,4 +2,6 @@ export { default as Header } from './Header';
 export { default as Footer } from './Footer';
 export { default as Dashboard } from './Dashboard';
 export { default as Icon } from './Icon';
+export { default as ComponentInstaller } from './ComponentInstaller';
+export { default as useComponentInstaller } from './ComponentInstaller/use-component-installer';
 export * from './UserCenter';

package/es/index.js

@@ -2,4 +2,6 @@ export { default as Header } from "./Header/index.js";
 export { default as Footer } from "./Footer/index.js";
 export { default as Dashboard } from "./Dashboard/index.js";
 export { default as Icon } from "./Icon/index.js";
+export { default as ComponentInstaller } from "./ComponentInstaller/index.js";
+export { default as useComponentInstaller } from "./ComponentInstaller/use-component-installer";
 export * from "./UserCenter/index.js";

package/lib/ComponentInstaller/index.d.ts

@@ -0,0 +1,45 @@
+export default ComponentInstaller;
+declare function ComponentInstaller({ warnIcon, did, noPermissionMute, onInstalled, onError, children, closeByOutSize, onClose, fallback, roles, }: {
+    warnIcon: any;
+    did: any;
+    noPermissionMute: any;
+    onInstalled: any;
+    onError: any;
+    children: any;
+    closeByOutSize: any;
+    onClose: any;
+    fallback: any;
+    roles?: string[] | undefined;
+}): import("react").JSX.Element;
+declare namespace ComponentInstaller {
+    namespace propTypes {
+        let warnIcon: any;
+        let did: any;
+        let noPermissionMute: any;
+        let onInstalled: any;
+        let onError: any;
+        let children: any;
+        let closeByOutSize: any;
+        let onClose: any;
+        let fallback: any;
+        let roles: any;
+    }
+    namespace defaultProps {
+        let warnIcon_1: null;
+        export { warnIcon_1 as warnIcon };
+        let noPermissionMute_1: boolean;
+        export { noPermissionMute_1 as noPermissionMute };
+        let onInstalled_1: null;
+        export { onInstalled_1 as onInstalled };
+        let onError_1: null;
+        export { onError_1 as onError };
+        let closeByOutSize_1: boolean;
+        export { closeByOutSize_1 as closeByOutSize };
+        let onClose_1: null;
+        export { onClose_1 as onClose };
+        let fallback_1: null;
+        export { fallback_1 as fallback };
+        let roles_1: string[];
+        export { roles_1 as roles };
+    }
+}