@blocklet/ui-react 2.9.90 → 2.10.0

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

@@ -1,85 +1,76 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-module.exports = PublishComponent;
-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 _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 PublishComponent({
+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
-  } = (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 currentState = (0, _ahooks.useReactive)({
+  const currentState = useReactive({
     showDialog: false,
     loading: false
   });
-  const exportUrl = `${_constant.WELLKNOWN_SERVICE_PATH_PREFIX}/embed/resources/${componentDid}/publish?mode=dialog`;
-  const handleClose = (0, _ahooks.useMemoizedFn)(() => {
+  const exportUrl = `${WELLKNOWN_SERVICE_PATH_PREFIX}/embed/resources/${componentDid}/publish?mode=dialog`;
+  const handleClose = useMemoizedFn(() => {
     currentState.showDialog = false;
     onClose?.();
   });
-  const handleLoad = (0, _ahooks.useMemoizedFn)(() => {
+  const handleLoad = useMemoizedFn(() => {
     currentState.loading = false;
   });
-  const handleOpen = (0, _ahooks.useMemoizedFn)(() => {
+  const handleOpen = useMemoizedFn(() => {
     if (!session.user) {
-      _Toast.default.warning(t("needLogin"));
+      Toast.warning(t("needLogin"));
       return;
     }
     if (grantedRoles && grantedRoles.length > 0) {
       if (!grantedRoles?.includes(session.user?.role)) {
-        _Toast.default.warning(t("noPermission"));
+        Toast.warning(t("noPermission"));
         return;
       }
     }
     currentState.loading = true;
     currentState.showDialog = true;
   });
-  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",
-      loading: currentState.loading,
-      onClick: handleOpen,
-      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",
+        loading: currentState.loading,
+        onClick: handleOpen,
+        sx: { mr: 1, ml: 1 },
+        children: t("exportResource")
       },
-      children: t("exportResource")
-    }, "button"), currentState.showDialog && /* @__PURE__ */(0, _jsxRuntime.jsx)(_resourceDialog.default, {
-      src: exportUrl,
-      open: true,
-      onClose: handleClose,
-      onLoad: handleLoad,
-      componentDid,
-      loading: currentState.loading
-    })]
-  });
-}
+      "button"
+    ),
+    currentState.showDialog && /* @__PURE__ */ jsx(
+      ResourceDialog,
+      {
+        src: exportUrl,
+        open: true,
+        onClose: handleClose,
+        onLoad: handleLoad,
+        componentDid,
+        loading: currentState.loading
+      }
+    )
+  ] });
+}

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

@@ -1,24 +1,21 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _jsxRuntime = require("react/jsx-runtime");
-var _ahooks = require("ahooks");
-var _react = require("react");
+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 = () => {}
+  onClose = () => {
+  },
+  onComplete = () => {
+  },
+  onLoad = () => {
+  }
 }, ref) {
-  const iframeRef = (0, _react.useRef)(null);
-  const listener = (0, _ahooks.useMemoizedFn)(event => {
+  const iframeRef = useRef(null);
+  const listener = useMemoizedFn((event) => {
     if (open) {
       if (event?.data?.event === "resourceDialog.close") {
         onClose();
@@ -31,41 +28,47 @@ function ResourceDialog({
       }
     }
   });
-  (0, _ahooks.useMount)(() => {
+  useMount(() => {
     window.addEventListener("message", listener);
   });
-  (0, _ahooks.useUnmount)(() => {
+  useUnmount(() => {
     window.removeEventListener("message", listener);
   });
-  (0, _react.useImperativeHandle)(ref, () => ({
-    selectBlocklet: blockletMeta => {
+  useImperativeHandle(ref, () => ({
+    selectBlocklet: (blockletMeta) => {
       if (iframeRef.current?.contentWindow) {
-        iframeRef.current.contentWindow.postMessage({
-          event: "resourceDialog.select",
-          data: blockletMeta,
-          componentDid,
-          storeUrl
-        }, "*");
+        iframeRef.current.contentWindow.postMessage(
+          {
+            event: "resourceDialog.select",
+            data: blockletMeta,
+            componentDid,
+            storeUrl
+          },
+          "*"
+        );
       }
     }
   }));
   if (!open) {
     return null;
   }
-  return /* @__PURE__ */(0, _jsxRuntime.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"
+  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"
+      }
     }
-  });
+  );
 }
-module.exports = (0, _react.forwardRef)(ResourceDialog);
+export default forwardRef(ResourceDialog);

package/lib/ComponentManager/index.js

@@ -1,27 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "AddComponent", {
-  enumerable: true,
-  get: function () {
-    return _addComponent.default;
-  }
-});
-Object.defineProperty(exports, "CheckComponent", {
-  enumerable: true,
-  get: function () {
-    return _checkComponent.default;
-  }
-});
-Object.defineProperty(exports, "PublishComponent", {
-  enumerable: true,
-  get: function () {
-    return _publishComponent.default;
-  }
-});
-var _publishComponent = _interopRequireDefault(require("./components/publish-component"));
-var _addComponent = _interopRequireDefault(require("./components/add-component"));
-var _checkComponent = _interopRequireDefault(require("./components/check-component"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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/lib/ComponentManager/libs/locales.js

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.translations = void 0;
-const translations = exports.translations = {
+export const translations = {
   zh: {
     importResource: "\u5BFC\u5165",
     exportResource: "\u5BFC\u51FA",
@@ -17,4 +11,4 @@ const translations = exports.translations = {
     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"
   }
-};
+};

package/lib/Dashboard/index.js

@@ -1,143 +1,118 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _jsxRuntime = require("react/jsx-runtime");
-require("iconify-icon");
-var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Session = require("@arcblock/did-connect/lib/Session");
-var _context = require("@arcblock/ux/lib/Locale/context");
-var _dashboard = _interopRequireDefault(require("@arcblock/ux/lib/Layout/dashboard"));
-var _types = require("../types");
-var _utils = require("../utils");
-var _blocklets = require("../blocklets");
-var _headerAddons2 = _interopRequireDefault(require("../common/header-addons"));
-var _walletHiddenTopbar = require("../common/wallet-hidden-topbar");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function Dashboard({
-  meta,
-  fallbackUrl,
-  invalidPathFallback,
-  headerAddons,
-  sessionManagerProps,
-  links,
-  ...rest
-}) {
-  (0, _walletHiddenTopbar.useWalletHiddenTopbar)();
-  const sessionCtx = (0, _react.useContext)(_Session.SessionContext);
+import { jsx } from "react/jsx-runtime";
+import "iconify-icon";
+import { useMemo, useLayoutEffect, useContext } from "react";
+import PropTypes from "prop-types";
+import { SessionContext } from "@arcblock/did-connect/lib/Session";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import UxDashboard from "@arcblock/ux/lib/Layout/dashboard";
+import { BlockletMetaProps, SessionManagerProps } from "../types.js";
+import { mapRecursive, flatRecursive, matchPaths } from "../utils.js";
+import { publicPath, formatBlockletInfo, getLocalizedNavigation, filterNavByRole } from "../blocklets.js";
+import HeaderAddons from "../common/header-addons.js";
+import { useWalletHiddenTopbar } from "../common/wallet-hidden-topbar.js";
+function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddons, sessionManagerProps, links, ...rest }) {
+  useWalletHiddenTopbar();
+  const sessionCtx = useContext(SessionContext);
   const user = sessionCtx?.session?.user;
   const userRole = user?.role;
-  const {
-    locale
-  } = (0, _context.useLocaleContext)() || {};
-  const formattedBlocklet = (0, _react.useMemo)(() => {
+  const { locale } = useLocaleContext() || {};
+  const formattedBlocklet = useMemo(() => {
     const blocklet = Object.assign({}, window.blocklet, meta);
     try {
-      return (0, _blocklets.formatBlockletInfo)(blocklet);
+      return formatBlockletInfo(blocklet);
     } catch (e) {
       console.error("Failed to format blocklet info", e, blocklet);
       return blocklet;
     }
   }, [meta]);
-  const {
-    localizedNav,
-    flattened,
-    matchedIndex
-  } = (0, _react.useMemo)(() => {
-    let localizedNav2 = (0, _blocklets.getLocalizedNavigation)(formattedBlocklet?.navigation?.dashboard, locale) || [];
-    localizedNav2 = (0, _blocklets.filterNavByRole)(localizedNav2, userRole);
-    localizedNav2 = (0, _utils.mapRecursive)(localizedNav2, item => ({
-      title: item.title,
-      url: item.link,
-      icon: item.icon ? /* @__PURE__ */(0, _jsxRuntime.jsx)("iconify-icon", {
-        height: "100%",
-        width: "100%",
-        icon: item.icon
-      }) : null,
-      // https://github.com/ArcBlock/ux/issues/755#issuecomment-1208692620
-      external: true,
-      children: item.items
-    }), "items");
-    const flattened2 = (0, _utils.flatRecursive)(localizedNav2).filter(item => !!item.url);
-    const matchedIndex2 = (0, _utils.matchPaths)(flattened2.map(item => item.url));
+  const { localizedNav, flattened, matchedIndex } = useMemo(() => {
+    let localizedNav2 = getLocalizedNavigation(formattedBlocklet?.navigation?.dashboard, locale) || [];
+    localizedNav2 = filterNavByRole(localizedNav2, userRole);
+    localizedNav2 = mapRecursive(
+      localizedNav2,
+      (item) => ({
+        title: item.title,
+        url: item.link,
+        icon: item.icon ? /* @__PURE__ */ jsx("iconify-icon", { height: "100%", width: "100%", icon: item.icon }) : null,
+        // https://github.com/ArcBlock/ux/issues/755#issuecomment-1208692620
+        external: true,
+        children: item.items
+      }),
+      "items"
+    );
+    const flattened2 = flatRecursive(localizedNav2).filter((item) => !!item.url);
+    const matchedIndex2 = matchPaths(flattened2.map((item) => item.url));
     if (matchedIndex2 !== -1) {
       flattened2[matchedIndex2].active = true;
     }
-    return {
-      localizedNav: localizedNav2,
-      flattened: flattened2,
-      matchedIndex: matchedIndex2
-    };
+    return { localizedNav: localizedNav2, flattened: flattened2, matchedIndex: matchedIndex2 };
   }, [formattedBlocklet, locale, userRole]);
   const allLinks = typeof links === "function" ? links(localizedNav) : [...localizedNav, ...links];
-  (0, _react.useLayoutEffect)(() => {
+  useLayoutEffect(() => {
     if (!!user && !flattened?.length && fallbackUrl) {
       window.location.href = fallbackUrl;
     }
   }, [fallbackUrl]);
-  (0, _react.useLayoutEffect)(() => {
+  useLayoutEffect(() => {
     if (!!user && !!flattened?.length && matchedIndex === -1) {
       if (invalidPathFallback) {
         invalidPathFallback();
-      } else {}
+      } else {
+      }
     }
   }, [invalidPathFallback, flattened, matchedIndex]);
   if (!formattedBlocklet.appName) {
     return null;
   }
-  const {
-    appLogo,
-    appLogoRect,
-    appName
-  } = formattedBlocklet;
-  const _headerAddons = /* @__PURE__ */(0, _jsxRuntime.jsx)(_headerAddons2.default, {
-    formattedBlocklet,
-    addons: headerAddons,
-    sessionManagerProps
-  });
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_dashboard.default, {
-    title: appName,
-    fullWidth: true,
-    sidebarWidth: 128,
-    legacy: false,
-    links: allLinks,
-    ...rest,
-    headerProps: {
-      homeLink: _blocklets.publicPath,
-      logo: /* @__PURE__ */(0, _jsxRuntime.jsx)("img", {
-        src: appLogoRect || appLogo,
-        alt: "logo"
-      }),
-      addons: _headerAddons,
-      ...rest.headerProps
+  const { appLogo, appLogoRect, appName } = formattedBlocklet;
+  const _headerAddons = /* @__PURE__ */ jsx(
+    HeaderAddons,
+    {
+      formattedBlocklet,
+      addons: headerAddons,
+      sessionManagerProps
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    UxDashboard,
+    {
+      title: appName,
+      fullWidth: true,
+      sidebarWidth: 128,
+      legacy: false,
+      links: allLinks,
+      ...rest,
+      headerProps: {
+        homeLink: publicPath,
+        logo: /* @__PURE__ */ jsx("img", { src: appLogoRect || appLogo, alt: "logo" }),
+        addons: _headerAddons,
+        ...rest.headerProps
+      }
     }
-  });
+  );
 }
 Dashboard.propTypes = {
-  meta: _types.BlockletMetaProps,
+  meta: BlockletMetaProps,
   // 如果当前用户没有权限访问任何导航菜单, 则自动跳转到 fallbackUrl, 默认值为 publicPath, 设置为 null 表示禁用自动跳转
-  fallbackUrl: _propTypes.default.string,
+  fallbackUrl: PropTypes.string,
   // 当前路径未匹配任何 nav links 时的 fallback, 默认行为跳转到首个可用的 nav link
-  invalidPathFallback: _propTypes.default.func,
-  headerAddons: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
-  sessionManagerProps: _types.SessionManagerProps,
-  links: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.func])
+  invalidPathFallback: PropTypes.func,
+  headerAddons: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  sessionManagerProps: SessionManagerProps,
+  links: PropTypes.oneOfType([PropTypes.array, PropTypes.func])
 };
 Dashboard.defaultProps = {
   meta: {},
-  fallbackUrl: _blocklets.publicPath,
+  fallbackUrl: publicPath,
   invalidPathFallback: null,
   headerAddons: void 0,
   sessionManagerProps: {
     showRole: true,
     // dashboard 默认退出登录行为: 跳转到 (root) blocklet 首页
     onLogout: () => {
-      window.location.href = _blocklets.publicPath;
+      window.location.href = publicPath;
     }
   },
   links: []
 };
-module.exports = Dashboard;
+export default Dashboard;

package/lib/Footer/brand.js

@@ -1,54 +1,32 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-module.exports = Brand;
-var _jsxRuntime = require("react/jsx-runtime");
-var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Theme = require("@arcblock/ux/lib/Theme");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function Brand({
-  name,
-  logo,
-  description,
-  ...rest
-}) {
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isValidElement } from "react";
+import PropTypes from "prop-types";
+import { styled } from "@arcblock/ux/lib/Theme";
+import { Box } from "@mui/material";
+export default function Brand({ name, logo, description, ...rest }) {
   if (!name && !logo && !description) {
     return null;
   }
-  const logoElement = (0, _react.isValidElement)(logo) ? logo : /* @__PURE__ */(0, _jsxRuntime.jsx)("img", {
-    src: logo,
-    alt: name
-  });
-  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(Root, {
-    ...rest,
-    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)("div", {
-      children: [logo && /* @__PURE__ */(0, _jsxRuntime.jsx)("div", {
-        className: "footer-brand-logo",
-        children: logoElement
-      }), name && /* @__PURE__ */(0, _jsxRuntime.jsx)("div", {
-        className: "footer-brand-name",
-        children: name
-      })]
-    }), description && /* @__PURE__ */(0, _jsxRuntime.jsx)("div", {
-      className: "footer-brand-desc",
-      children: description
-    })]
-  });
+  const logoElement = isValidElement(logo) ? logo : /* @__PURE__ */ jsx("img", { src: logo, alt: name });
+  return /* @__PURE__ */ jsxs(Root, { ...rest, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      logo && /* @__PURE__ */ jsx(Box, { component: "a", href: "/", className: "footer-brand-logo", children: logoElement }),
+      name && /* @__PURE__ */ jsx("div", { className: "footer-brand-name", children: name })
+    ] }),
+    description && /* @__PURE__ */ jsx("div", { className: "footer-brand-desc", children: description })
+  ] });
 }
 Brand.propTypes = {
-  name: _propTypes.default.node,
-  logo: _propTypes.default.node,
-  description: _propTypes.default.string
+  name: PropTypes.node,
+  logo: PropTypes.node,
+  description: PropTypes.string
 };
 Brand.defaultProps = {
   name: "",
   logo: "",
   description: ""
 };
-const Root = (0, _Theme.styled)("div")`
+const Root = styled("div")`
   display: flex;
   flex-direction: column;
   font-size: 14px;
@@ -80,11 +58,11 @@ const Root = (0, _Theme.styled)("div")`
     margin-top: 16px;
   }
 
-  ${props => props.theme.breakpoints.down("sm")} {
+  ${(props) => props.theme.breakpoints.down("sm")} {
     width: auto;
   }
 
-  ${props => props.theme.breakpoints.down("md")} {
+  ${(props) => props.theme.breakpoints.down("md")} {
     .footer-brand-logo {
       img,
       svg {
@@ -93,4 +71,4 @@ const Root = (0, _Theme.styled)("div")`
       }
     }
   }
-`;
+`;

package/lib/Footer/copyright.js

@@ -1,34 +1,25 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-module.exports = Copyright;
-var _jsxRuntime = require("react/jsx-runtime");
-var _Theme = require("@arcblock/ux/lib/Theme");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function Copyright({
-  owner,
-  year,
-  ...rest
-}) {
-  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(Root, {
-    ...rest,
-    children: ["Copyright \xA9 ", year, " ", owner]
-  });
+import { jsxs } from "react/jsx-runtime";
+import { styled } from "@arcblock/ux/lib/Theme";
+import PropTypes from "prop-types";
+export default function Copyright({ owner, year, ...rest }) {
+  return /* @__PURE__ */ jsxs(Root, { ...rest, children: [
+    "Copyright \xA9 ",
+    year,
+    " ",
+    owner
+  ] });
 }
 Copyright.propTypes = {
-  owner: _propTypes.default.string,
-  year: _propTypes.default.string
+  owner: PropTypes.string,
+  year: PropTypes.string
 };
 Copyright.defaultProps = {
   owner: "ArcBlock",
-  year: `${/* @__PURE__ */new Date().getFullYear()}`
+  year: `${(/* @__PURE__ */ new Date()).getFullYear()}`
 };
-const Root = (0, _Theme.styled)("p")`
+const Root = styled("p")`
   display: flex;
   align-items: center;
   margin: 0;
   font-size: 13px;
-`;
+`;