@blocklet/ui-react 2.9.91 → 2.10.0

package/build.config.ts

@@ -15,15 +15,10 @@ const shared: BuildEntry = {
 export default defineBuildConfig({
   failOnWarn: false,
   entries: [
-    {
-      ...shared,
-      outDir: './es',
-      format: 'esm',
-    },
     {
       ...shared,
       outDir: './lib',
-      format: 'cjs',
+      format: 'esm',
     },
   ],
 });

package/lib/@types/index.d.ts

@@ -50,6 +50,7 @@ export type User = UserPublicInfo & {
     passports?: any[];
     didSpace?: Record<string, any>;
     connectedAccounts?: any[];
+    locale?: string;
 };
 export type UserCenterTab = {
     value: string;

package/lib/@types/index.js

@@ -1 +0,0 @@
-"use strict";

package/lib/BlockletStudio/index.js

@@ -1,16 +1,10 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _jsxRuntime = require("react/jsx-runtime");
-var _react = require("react");
-var _ufo = require("ufo");
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { joinURL } from "ufo";
 const WELL_KNOWN_SERVICE_PATH = "/.well-known/service";
 function parseUrl(uri, params) {
   const url = new URL(uri);
-  Object.keys(params).forEach(key => {
+  Object.keys(params).forEach((key) => {
     const value = params[key];
     if (value !== void 0) {
       url.searchParams.set(key, typeof value === "string" ? value : JSON.stringify(value));
@@ -43,10 +37,10 @@ function BlockletStudio({
   dependentComponentsMode,
   ...rest
 }) {
-  const [opened, setOpened] = (0, _react.useState)(false);
-  const didRef = (0, _react.useRef)("");
+  const [opened, setOpened] = useState(false);
+  const didRef = useRef("");
   didRef.current = componentDid;
-  const latestFunctionVersionRef = (0, _react.useRef)({});
+  const latestFunctionVersionRef = useRef({});
   latestFunctionVersionRef.current["resourceDialog.close"] = () => {
     setOpened(false);
     setOpen(false);
@@ -58,8 +52,8 @@ function BlockletStudio({
   latestFunctionVersionRef.current["studioDialog.uploaded"] = onUploaded;
   latestFunctionVersionRef.current["studioDialog.connected"] = onConnected;
   latestFunctionVersionRef.current["studioDialog.released"] = onReleased;
-  (0, _react.useEffect)(() => {
-    const listener = event => {
+  useEffect(() => {
+    const listener = (event) => {
       if (event?.data?.componentDid !== didRef.current) {
         return;
       }
@@ -76,39 +70,45 @@ function BlockletStudio({
   if (!open) {
     return null;
   }
-  const src = parseUrl((0, _ufo.joinURL)(window.location.origin, WELL_KNOWN_SERVICE_PATH, "/embed/resources", componentDid, "publish"), {
-    title,
-    logo,
-    description,
-    introduction,
-    note,
-    tenantScope,
-    mode,
-    resourcesParams,
-    resources,
-    components,
-    resourcesTitle,
-    componentsTitle,
-    dependentComponentsMode
-  });
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)("iframe", {
-    src,
-    title: "Blocklet Studio",
-    style: {
-      position: "fixed",
-      top: 0,
-      left: 0,
-      width: "100vw",
-      height: "100vh",
-      zIndex,
-      border: 0,
-      padding: 0,
-      margin: 0,
-      pointerEvents: opened ? "auto" : "none",
-      opacity: opened ? 1 : 0,
-      ...style
-    },
-    ...rest
-  });
+  const src = parseUrl(
+    joinURL(window.location.origin, WELL_KNOWN_SERVICE_PATH, "/embed/resources", componentDid, "publish"),
+    {
+      title,
+      logo,
+      description,
+      introduction,
+      note,
+      tenantScope,
+      mode,
+      resourcesParams,
+      resources,
+      components,
+      resourcesTitle,
+      componentsTitle,
+      dependentComponentsMode
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    "iframe",
+    {
+      src,
+      title: "Blocklet Studio",
+      style: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        width: "100vw",
+        height: "100vh",
+        zIndex,
+        border: 0,
+        padding: 0,
+        margin: 0,
+        pointerEvents: opened ? "auto" : "none",
+        opacity: opened ? 1 : 0,
+        ...style
+      },
+      ...rest
+    }
+  );
 }
-module.exports = BlockletStudio;
+export default BlockletStudio;

package/lib/ComponentInstaller/index.js

@@ -1,25 +1,18 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-module.exports = WrapComponentInstaller;
-var _jsxRuntime = require("react/jsx-runtime");
-var _Session = require("@arcblock/did-connect/lib/Session");
-var _Colors = require("@arcblock/ux/lib/Colors");
-var _context = require("@arcblock/ux/lib/Locale/context");
-var _util = require("@arcblock/ux/lib/Locale/util");
-var _SessionPermission = _interopRequireDefault(require("@arcblock/ux/lib/SessionPermission"));
-var _react = require("@iconify/react");
-var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
-var _material = require("@mui/material");
-var _ahooks = require("ahooks");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react2 = require("react");
-var _installerItem = _interopRequireDefault(require("./installer-item"));
-var _locales = _interopRequireDefault(require("./locales"));
-var _useComponentInstalled = _interopRequireDefault(require("./use-component-installed"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { SessionContext } from "@arcblock/did-connect/lib/Session";
+import { temp as colors } from "@arcblock/ux/lib/Colors";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { translate } from "@arcblock/ux/lib/Locale/util";
+import SessionPermission from "@arcblock/ux/lib/SessionPermission";
+import { Icon } from "@iconify/react";
+import CloseIcon from "@mui/icons-material/Close";
+import { Box, ClickAwayListener, Fade, IconButton, Paper } from "@mui/material";
+import { useMemoizedFn } from "ahooks";
+import PropTypes from "prop-types";
+import { useContext } from "react";
+import InstallerItem from "./installer-item.js";
+import translations from "./locales.js";
+import useComponentInstalled from "./use-component-installed.js";
 function ComponentInstaller({
   warnIcon,
   did,
@@ -33,63 +26,54 @@ function ComponentInstaller({
   disabled,
   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 { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, "en", data);
   });
-  const {
-    installed,
-    optComponents,
-    installStatus,
-    definedInBlockletYML
-  } = (0, _useComponentInstalled.default)({
+  const { installed, optComponents, installStatus, definedInBlockletYML } = useComponentInstalled({
     did,
     onInstalled,
     onError
   });
-  const sessionCtx = (0, _react2.useContext)(_Session.SessionContext);
+  const sessionCtx = useContext(SessionContext);
   const handleClose = () => {
     onClose?.(false);
   };
   if (disabled) {
     return children;
   }
-  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,
-            optComponents,
-            installStatus
-          })]
-        });
-      }
-      return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [fallback, /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ClickAwayListener, {
-          onClickAway: e => {
+  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,
+          optComponents,
+          installStatus
+        })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      fallback,
+      /* @__PURE__ */ jsx(
+        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, {
+          children: /* @__PURE__ */ jsx(Fade, { in: true, timeout: 350, children: /* @__PURE__ */ jsx(
+            Paper,
+            {
               variant: "outlined",
               sx: {
                 position: "fixed",
@@ -99,158 +83,96 @@ function ComponentInstaller({
                 borderRadius: 3,
                 width: 400,
                 maxWidth: "90vw",
-                borderColor: _Colors.temp.lineStep,
+                borderColor: colors.lineStep,
                 border: "0 !important",
                 fontSize: "14px",
                 textAlign: "left",
-                boxShadow: `0px 8px 16px 0px ${_Colors.temp.gray6}, 0px 0px 0px 1px ${_Colors.temp.gray6}`
+                boxShadow: `0px 8px 16px 0px ${colors.gray6}, 0px 0px 0px 1px ${colors.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",
-                    alignItems: "center",
-                    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, {
+              children: !definedInBlockletYML ? /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column" }, children: [
+                /* @__PURE__ */ jsxs(
+                  Box,
+                  {
                     sx: {
-                      marginLeft: 1,
-                      fontSize: "16px",
-                      fontWeight: "bold"
+                      padding: "20px 24px",
+                      marginLeft: 0,
+                      display: "flex",
+                      alignItems: "center",
+                      flexDirection: "row",
+                      justifyContent: "flex-start"
                     },
-                    children: t("componentInstallerTitle")
-                  }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-                    sx: {
-                      flex: 1
-                    }
-                  }), onClose ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
-                    variant: "outlined",
-                    className: "button",
-                    onClick: handleClose,
-                    children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_Close.default, {})
-                  }) : null]
-                }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-                  sx: {
-                    width: "100%",
-                    height: "1px",
-                    backgroundColor: _Colors.temp.gray6
+                    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: { flex: 1 } }),
+                      onClose ? /* @__PURE__ */ jsx(IconButton, { variant: "outlined", className: "button", onClick: handleClose, children: /* @__PURE__ */ jsx(CloseIcon, {}) }) : null
+                    ]
                   }
-                }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-                  sx: {
-                    padding: "20px 24px",
-                    marginTop: 0
-                  },
-                  children: [t("componentInstallerNoDefinedInBlockletYML"), ": ", did]
-                })]
-              }) : /* @__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",
-                    alignItems: "center",
-                    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, {
+                ),
+                /* @__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__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column" }, children: [
+                /* @__PURE__ */ jsxs(
+                  Box,
+                  {
                     sx: {
-                      marginLeft: 1,
-                      fontSize: "16px",
-                      fontWeight: "bold"
+                      padding: "20px 24px",
+                      marginLeft: 0,
+                      display: "flex",
+                      flexDirection: "row",
+                      alignItems: "center",
+                      justifyContent: "flex-start"
                     },
-                    children: t("componentInstallerTitle")
-                  }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-                    sx: {
-                      flex: 1
-                    }
-                  }), onClose ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
-                    variant: "outlined",
-                    className: "button",
-                    onClick: handleClose,
-                    children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_Close.default, {})
-                  }) : null]
-                }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-                  sx: {
-                    width: "100%",
-                    height: "1px",
-                    backgroundColor: _Colors.temp.gray6
+                    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: { flex: 1 } }),
+                      onClose ? /* @__PURE__ */ jsx(IconButton, { variant: "outlined", className: "button", onClick: handleClose, children: /* @__PURE__ */ jsx(CloseIcon, {}) }) : null
+                    ]
                   }
-                }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-                  sx: {
-                    maxHeight: "70vh",
-                    overflowY: "auto"
-                  },
-                  children: optComponents.map((optionalComponent, index) => {
-                    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_installerItem.default, {
+                ),
+                /* @__PURE__ */ jsx(Box, { sx: { width: "100%", height: "1px", backgroundColor: colors.gray6 } }),
+                /* @__PURE__ */ jsx(Box, { sx: { maxHeight: "70vh", overflowY: "auto" }, children: optComponents.map((optionalComponent, index) => {
+                  return /* @__PURE__ */ jsx(
+                    InstallerItem,
+                    {
                       t,
                       hasPermission,
                       index,
                       optionalComponent,
                       installStatus: installStatus[optionalComponent.meta?.did]
-                    }, optionalComponent.meta?.did || index);
-                  })
-                }), 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.jsx)(_material.Box, {
-                    sx: {
-                      padding: "20px 24px"
                     },
-                    children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-                      sx: {
-                        opacity: 1
-                      },
-                      children: t("componentInstallerSuggestions")
-                    })
-                  })]
-                })]
-              })
-            })
-          })
-        })]
-      });
-    }
-  });
+                    optionalComponent.meta?.did || index
+                  );
+                }) }),
+                hasPermission ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Box, { sx: { width: "100%", height: "1px", backgroundColor: colors.gray6 } }),
+                  /* @__PURE__ */ jsx(Box, { sx: { padding: "20px 24px" }, children: /* @__PURE__ */ jsx(Box, { sx: { opacity: 1 }, children: t("componentInstallerSuggestions") }) })
+                ] })
+              ] })
+            }
+          ) })
+        }
+      )
+    ] });
+  } });
 }
 ComponentInstaller.propTypes = {
-  disabled: _propTypes.default.bool,
-  warnIcon: _propTypes.default.node,
-  did: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_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
+  disabled: PropTypes.bool,
+  warnIcon: PropTypes.node,
+  did: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(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 = {
   disabled: false,
@@ -263,18 +185,16 @@ ComponentInstaller.defaultProps = {
   fallback: null,
   roles: ["owner", "admin"]
 };
-function WrapComponentInstaller(props) {
+export default function WrapComponentInstaller(props) {
   if (window.blocklet) {
-    return /* @__PURE__ */(0, _jsxRuntime.jsx)(ComponentInstaller, {
-      ...props
-    });
+    return /* @__PURE__ */ jsx(ComponentInstaller, { ...props });
   }
   return props.children;
 }
 WrapComponentInstaller.propTypes = {
   ...ComponentInstaller.propTypes,
-  children: _propTypes.default.any.isRequired
+  children: PropTypes.any.isRequired
 };
 WrapComponentInstaller.defaultProps = {
   ...ComponentInstaller.defaultProps
-};
+};