@blocklet/ui-react 2.9.15 → 2.9.17

package/lib/ComponentInstaller/index.js

@@ -0,0 +1,381 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _jsxRuntime = require("react/jsx-runtime");
+var _material = require("@mui/material");
+var _react = require("@iconify/react");
+var _Colors = require("@arcblock/ux/lib/Colors");
+var _Session = require("@arcblock/did-connect/lib/Session");
+var _react2 = require("react");
+var _SessionPermission = _interopRequireDefault(require("@arcblock/ux/lib/SessionPermission"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ahooks = require("ahooks");
+var _util = require("@arcblock/ux/lib/Locale/util");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _useComponentInstalled = _interopRequireDefault(require("./use-component-installed"));
+var _locales = _interopRequireDefault(require("./locales"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ComponentInstaller({
+  warnIcon,
+  did,
+  noPermissionMute,
+  onInstalled,
+  onError,
+  children,
+  closeByOutSize,
+  onClose,
+  fallback,
+  roles = ["owner", "admin"]
+}) {
+  const {
+    locale
+  } = (0, _context.useLocaleContext)();
+  const t = (0, _ahooks.useMemoizedFn)((key, data = {}) => {
+    return (0, _util.translate)(_locales.default, key, locale, "en", data);
+  });
+  const {
+    installed,
+    optionalComponent,
+    installUrl,
+    storeUrl,
+    installStatus,
+    installStatusDone,
+    definedInBlockletYML
+  } = (0, _useComponentInstalled.default)({
+    did,
+    onInstalled,
+    onError
+  });
+  const sessionCtx = (0, _react2.useContext)(_Session.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__ */(0, _jsxRuntime.jsx)(_SessionPermission.default, {
+    session: sessionCtx?.session,
+    roles,
+    children: ({
+      hasPermission
+    }) => {
+      if (installed) {
+        return children;
+      }
+      if (noPermissionMute && !hasPermission) {
+        return fallback || null;
+      }
+      if (typeof children === "function") {
+        return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [fallback, children({
+            hasPermission,
+            optionalComponent,
+            installStatus,
+            handleOpenStore,
+            handleInstall,
+            handleRefresh
+          })]
+        });
+      }
+      return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [fallback, /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ClickAwayListener, {
+          onClickAway: e => {
+            e.preventDefault();
+            e.stopPropagation();
+            if (closeByOutSize) {
+              handleClose();
+            }
+          },
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
+            in: true,
+            timeout: 350,
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Paper, {
+              variant: "outlined",
+              sx: {
+                position: "fixed",
+                top: 20,
+                right: 20,
+                zIndex: 3e3,
+                borderRadius: 3,
+                width: 400,
+                maxWidth: 400,
+                borderColor: _Colors.temp.lineStep,
+                border: "0 !important",
+                fontSize: "14px",
+                textAlign: "left",
+                boxShadow: `0px 8px 16px 0px ${_Colors.temp.gray6}, 0px 0px 0px 1px ${_Colors.temp.gray6}`
+              },
+              children: !definedInBlockletYML ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+                sx: {
+                  display: "flex",
+                  flexDirection: "column"
+                },
+                children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+                  sx: {
+                    padding: "20px 24px",
+                    marginLeft: 0,
+                    display: "flex",
+                    flexDirection: "row",
+                    justifyContent: "flex-start"
+                  },
+                  children: [warnIcon || /* @__PURE__ */(0, _jsxRuntime.jsx)(_react.Icon, {
+                    icon: "mdi:warning-box",
+                    style: {
+                      color: "yellowgreen",
+                      fontSize: 24
+                    }
+                  }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+                    sx: {
+                      marginLeft: 1,
+                      fontSize: "16px",
+                      fontWeight: "bold"
+                    },
+                    children: t("componentInstallerTitle")
+                  })]
+                }), /* @__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",
+                    marginTop: 0
+                  },
+                  children: [t("componentInstallerNoDefinedInBlockletYML"), ": ", did]
+                }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+                  sx: {
+                    padding: "0px 24px"
+                  },
+                  children: onClose ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+                    sx: {
+                      marginBottom: 2
+                    },
+                    variant: "outlined",
+                    className: "button",
+                    onClick: handleClose,
+                    children: t("componentInstallerClose")
+                  }) : null
+                })]
+              }) : /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+                sx: {
+                  display: "flex",
+                  flexDirection: "column"
+                },
+                children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+                  sx: {
+                    padding: "20px 24px",
+                    marginLeft: 0,
+                    display: "flex",
+                    flexDirection: "row",
+                    justifyContent: "flex-start"
+                  },
+                  children: [warnIcon || /* @__PURE__ */(0, _jsxRuntime.jsx)(_react.Icon, {
+                    icon: "mdi:warning-box",
+                    style: {
+                      color: "yellowgreen",
+                      fontSize: 24
+                    }
+                  }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+                    sx: {
+                      marginLeft: 1,
+                      fontSize: "16px",
+                      fontWeight: "bold"
+                    },
+                    children: t("componentInstallerTitle")
+                  })]
+                }), /* @__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, {
+                    sx: {
+                      display: "flex",
+                      flexDirection: "column",
+                      justifyContent: "start",
+                      alignItems: "start",
+                      marginLeft: 2
+                    },
+                    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+                      sx: {
+                        fontSize: "16px",
+                        fontWeight: "bold",
+                        cursor: "pointer",
+                        ".link-icon": {
+                          opacity: 0
+                        },
+                        ":hover .link-icon": {
+                          opacity: 1
+                        }
+                      },
+                      onClick: handleOpenStore,
+                      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.jsxs)(_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,
+                          sx: {
+                            color: "#333"
+                          },
+                          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,
+                        children: t("componentInstallerInstall")
+                      }, "install"), onClose ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+                        sx: {
+                          marginTop: 2
+                        },
+                        variant: "outlined",
+                        className: "button",
+                        onClick: handleClose,
+                        children: t("componentInstallerClose")
+                      }) : null]
+                    }), installStatusDone ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+                      sx: {
+                        marginTop: 2,
+                        opacity: 0.7
+                      },
+                      children: t("componentInstallerSuccessInstalled")
+                    }) : null]
+                  })]
+                }), hasPermission ? null : /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                  children: [/* @__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"
+                    },
+                    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+                      sx: {
+                        opacity: 1
+                      },
+                      children: t("componentInstallerSuggestions")
+                    }), onClose ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+                      sx: {
+                        marginTop: 2,
+                        alignSelf: "flex-start"
+                      },
+                      variant: "outlined",
+                      className: "button",
+                      onClick: handleClose,
+                      children: t("componentInstallerClose")
+                    }) : null]
+                  })]
+                })]
+              })
+            })
+          })
+        })]
+      });
+    }
+  });
+}
+ComponentInstaller.propTypes = {
+  warnIcon: _propTypes.default.node,
+  did: _propTypes.default.string.isRequired,
+  noPermissionMute: _propTypes.default.bool,
+  onInstalled: _propTypes.default.func,
+  onError: _propTypes.default.func,
+  children: _propTypes.default.any.isRequired,
+  closeByOutSize: _propTypes.default.bool,
+  onClose: _propTypes.default.func,
+  fallback: _propTypes.default.node,
+  roles: _propTypes.default.array
+};
+ComponentInstaller.defaultProps = {
+  warnIcon: null,
+  noPermissionMute: false,
+  onInstalled: null,
+  onError: null,
+  closeByOutSize: false,
+  onClose: null,
+  fallback: null,
+  roles: ["owner", "admin"]
+};
+module.exports = ComponentInstaller;

package/lib/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/lib/ComponentInstaller/locales.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+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'
+  }
+};
+module.exports = translations;

package/lib/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/lib/ComponentInstaller/use-component-installed.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _constant = require("@arcblock/did-connect/lib/constant");
+var _react = require("react");
+function useComponentInstalled({
+  did,
+  onInstalled,
+  onError
+}) {
+  const {
+    optionalComponents,
+    componentMountPoints
+  } = window.blocklet;
+  const onInstalledRef = (0, _react.useRef)({
+    onInstalled,
+    onError
+  });
+  onInstalledRef.current = {
+    onInstalled,
+    onError
+  };
+  const optionalComponent = (0, _react.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 = (0, _react.useMemo)(() => {
+    if (optionalComponent) {
+      return true;
+    }
+    return (componentMountPoints || []).find(item => item.did === did);
+  }, [optionalComponent, componentMountPoints, did]);
+  const installUrl = `${window.blocklet.appUrl}/${_constant.AUTH_SERVICE_PREFIX}/admin/components?install-component=${did}`;
+  const storeUrl = optionalComponent ? `${optionalComponent.meta.homepage}/blocklets/${did}` : '';
+  const [installStatus, setInstallStatus] = (0, _react.useState)('');
+  (0, _react.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
+  };
+}
+module.exports = useComponentInstalled;

package/lib/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-installed';
 export * from './UserCenter';

package/lib/index.js

@@ -7,8 +7,16 @@ var _exportNames = {
   Header: true,
   Footer: true,
   Dashboard: true,
-  Icon: true
+  Icon: true,
+  ComponentInstaller: true,
+  useComponentInstaller: true
 };
+Object.defineProperty(exports, "ComponentInstaller", {
+  enumerable: true,
+  get: function () {
+    return _ComponentInstaller.default;
+  }
+});
 Object.defineProperty(exports, "Dashboard", {
   enumerable: true,
   get: function () {
@@ -33,10 +41,18 @@ Object.defineProperty(exports, "Icon", {
     return _Icon.default;
   }
 });
+Object.defineProperty(exports, "useComponentInstaller", {
+  enumerable: true,
+  get: function () {
+    return _useComponentInstalled.default;
+  }
+});
 var _Header = _interopRequireDefault(require("./Header"));
 var _Footer = _interopRequireDefault(require("./Footer"));
 var _Dashboard = _interopRequireDefault(require("./Dashboard"));
 var _Icon = _interopRequireDefault(require("./Icon"));
+var _ComponentInstaller = _interopRequireDefault(require("./ComponentInstaller"));
+var _useComponentInstalled = _interopRequireDefault(require("./ComponentInstaller/use-component-installed"));
 var _UserCenter = require("./UserCenter");
 Object.keys(_UserCenter).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.9.15",
+  "version": "2.9.17",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -40,6 +40,10 @@
       "import": "./es/",
       "require": "./lib/"
     },
+    "./lib/ComponentInstaller": {
+      "import": "./es/ComponentInstaller/index.js",
+      "require": "./lib/ComponentInstaller/index.js"
+    },
     "./lib/Dashboard": {
       "import": "./es/Dashboard/index.js",
       "require": "./lib/Dashboard/index.js"
@@ -59,8 +63,8 @@
   },
   "dependencies": {
     "@abtnode/constant": "1.16.23-beta-aeb9f5bd",
-    "@arcblock/did-connect": "^2.9.15",
-    "@arcblock/ux": "^2.9.15",
+    "@arcblock/did-connect": "^2.9.17",
+    "@arcblock/ux": "^2.9.17",
     "@blocklet/js-sdk": "1.16.23-beta-aeb9f5bd",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
@@ -92,5 +96,5 @@
     "jest": "^28.1.3",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "2402b2d3888dcac685215c373afd7651e6907acc"
+  "gitHead": "73c46d89b7ae8bb79b14adc26611f3e0046508d4"
 }