@blocklet/ui-react 2.9.13 → 2.9.15

package/es/common/header-addons.js

@@ -1,88 +1,70 @@
-import 'iconify-icon';
-import { useContext, createElement } from 'react';
-import PropTypes from 'prop-types';
-// FIXME: 直接从 react 中 import  Fragment 可能会在 vite 下出错，先暂时从 react/jsx-runtime 导入 Fragment 来跳过这个问题
-import { Fragment } from 'react/jsx-runtime';
-import { SessionContext } from '@arcblock/did-connect/lib/Session';
-import SessionUser from '@arcblock/ux/lib/SessionUser';
-import SessionBlocklet from '@arcblock/ux/lib/SessionBlocklet';
-import LocaleSelector from '@arcblock/ux/lib/Locale/selector';
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { sessionManagerProps } from '../types';
-import { getLocalizedNavigation, filterNavByRole } from '../blocklets';
-
-// eslint-disable-next-line no-shadow
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function HeaderAddons({
-  formattedBlocklet,
-  addons,
-  sessionManagerProps
-}) {
+import { jsx } from "react/jsx-runtime";
+import "iconify-icon";
+import { useContext, createElement } from "react";
+import PropTypes from "prop-types";
+import { Fragment } from "react/jsx-runtime";
+import { SessionContext } from "@arcblock/did-connect/lib/Session";
+import SessionUser from "@arcblock/ux/lib/SessionUser";
+import SessionBlocklet from "@arcblock/ux/lib/SessionBlocklet";
+import LocaleSelector from "@arcblock/ux/lib/Locale/selector";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { sessionManagerProps } from "../types.js";
+import { getLocalizedNavigation, filterNavByRole } from "../blocklets.js";
+export default function HeaderAddons({ formattedBlocklet, addons, sessionManagerProps: sessionManagerProps2 }) {
   const sessionCtx = useContext(SessionContext);
-  const {
-    locale
-  } = useLocaleContext() || {};
-  const {
-    enableConnect = true,
-    enableLocale = true
-  } = formattedBlocklet;
+  const { locale } = useLocaleContext() || {};
+  const { enableConnect = true, enableLocale = true } = formattedBlocklet;
   const authenticated = !!sessionCtx?.session?.user;
   let localizedNav = getLocalizedNavigation(formattedBlocklet?.navigation?.sessionManager, locale) || [];
-  // 根据 role 筛选 nav 数据
   localizedNav = filterNavByRole(localizedNav, sessionCtx?.session?.user?.role);
   const renderAddons = () => {
-    // 不关心内置的 session manager 和 locale selector, 直接覆盖 UX Header 的 addons
-    if (addons && typeof addons !== 'function') {
+    if (addons && typeof addons !== "function") {
       return Array.isArray(addons) ? addons : [addons];
     }
     let addonsArray = [];
-    // 启用了多语言并且检测到了 locale context
     if (enableLocale && locale) {
-      addonsArray.push( /*#__PURE__*/_jsx(LocaleSelector, {
-        showText: false
-      }, "locale-selector"));
+      addonsArray.push(/* @__PURE__ */ jsx(LocaleSelector, { showText: false }, "locale-selector"));
     }
-    // 启用了连接钱包并且检测到了 session context
     if (enableConnect && sessionCtx) {
       const menu = [];
       if (authenticated) {
         const navList = localizedNav ? localizedNav.slice(0, 5) : [];
-        navList.forEach(x => {
+        navList.forEach((x) => {
           menu.push({
             label: x.title,
-            icon: x.icon ? /*#__PURE__*/_jsx("iconify-icon", {
-              icon: x.icon,
-              height: 24,
-              style: {
-                marginRight: 8
-              }
-            }) : null,
-            component: 'a',
+            icon: x.icon ? /* @__PURE__ */ jsx("iconify-icon", { icon: x.icon, height: 24, style: { marginRight: 8 } }) : null,
+            component: "a",
             href: x.link,
             key: x.link
           });
         });
       }
-      addonsArray.push( /*#__PURE__*/_jsx(SessionBlocklet, {
-        session: sessionCtx.session,
-        locale: locale
-      }, "session-blocklet"));
-      addonsArray.push( /*#__PURE__*/_jsx(SessionUser, {
-        session: sessionCtx.session,
-        locale: locale,
-        menu: menu,
-        showRole: true,
-        ...sessionManagerProps
-      }, "session-user"));
+      addonsArray.push(/* @__PURE__ */ jsx(SessionBlocklet, { session: sessionCtx.session, locale }, "session-blocklet"));
+      addonsArray.push(
+        /* @__PURE__ */ jsx(
+          SessionUser,
+          {
+            session: sessionCtx.session,
+            locale,
+            menu,
+            showRole: true,
+            ...sessionManagerProps2
+          },
+          "session-user"
+        )
+      );
     }
-    // 在内置 addons 基础上定制 addons
-    if (typeof addons === 'function') {
+    if (typeof addons === "function") {
       addonsArray = addons(addonsArray) || [];
     }
     return addonsArray;
   };
   const renderedAddons = renderAddons();
-  const addonList = /*#__PURE__*/createElement(Fragment, null, ...(Array.isArray(renderedAddons) ? renderedAddons : [renderedAddons]));
+  const addonList = createElement(
+    Fragment,
+    null,
+    ...Array.isArray(renderedAddons) ? renderedAddons : [renderedAddons]
+  );
   return addonList;
 }
 HeaderAddons.propTypes = {
@@ -98,4 +80,4 @@ HeaderAddons.defaultProps = {
   sessionManagerProps: {
     showRole: true
   }
-};
+};

package/es/common/link-blocker.d.ts

@@ -0,0 +1,7 @@
+export default LinkBlocker;
+/**
+ * 适用于 header/footer/dashboard "preview mode", 阻止内部组件中所有 link 的默认点击行为
+ */
+declare function LinkBlocker({ ...rest }: {
+    [x: string]: any;
+}): import("react").JSX.Element;

package/es/common/link-blocker.js

@@ -1,25 +1,18 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 function hasParentOfType(node, type) {
-  if (!node) return false;
-  if (type === node.nodeName) return true;
+  if (!node)
+    return false;
+  if (type === node.nodeName)
+    return true;
   return hasParentOfType(node.parentNode, type);
 }
-
-/**
- * 适用于 header/footer/dashboard "preview mode", 阻止内部组件中所有 link 的默认点击行为
- */
-function LinkBlocker({
-  ...rest
-}) {
-  const handleOnClick = e => {
-    const isInsideLink = hasParentOfType(e.target, 'A');
+function LinkBlocker({ ...rest }) {
+  const handleOnClick = (e) => {
+    const isInsideLink = hasParentOfType(e.target, "A");
     if (isInsideLink) {
       e.preventDefault();
     }
   };
-  return /*#__PURE__*/_jsx("div", {
-    onClick: handleOnClick,
-    ...rest
-  });
+  return /* @__PURE__ */ jsx("div", { onClick: handleOnClick, ...rest });
 }
-export default LinkBlocker;
+export default LinkBlocker;

package/es/common/overridable-theme-provider.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 允许 theme 被覆盖的 ThemeProvider 组件, 默认使用 ux default theme, 可以传入 theme 进行覆盖
+ */
+declare function OverridableThemeProvider({ theme: themeOverrides, children }: {
+    theme: any;
+    children: any;
+}): import("react").JSX.Element;
+declare namespace OverridableThemeProvider {
+    namespace propTypes {
+        let children: any;
+        let theme: any;
+    }
+    namespace defaultProps {
+        let theme_1: null;
+        export { theme_1 as theme };
+    }
+}
+export default OverridableThemeProvider;

package/es/common/overridable-theme-provider.js

@@ -1,20 +1,10 @@
-import PropTypes from 'prop-types';
-import { createTheme, ThemeProvider } from '@arcblock/ux/lib/Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import { createTheme, ThemeProvider } from "@arcblock/ux/lib/Theme";
 const defaultTheme = createTheme();
-
-/**
- * 允许 theme 被覆盖的 ThemeProvider 组件, 默认使用 ux default theme, 可以传入 theme 进行覆盖
- */
-export default function OverridableThemeProvider({
-  theme: themeOverrides,
-  children
-}) {
+export default function OverridableThemeProvider({ theme: themeOverrides, children }) {
   const theme = themeOverrides ? createTheme(themeOverrides) : defaultTheme;
-  return /*#__PURE__*/_jsx(ThemeProvider, {
-    theme: theme,
-    children: children
-  });
+  return /* @__PURE__ */ jsx(ThemeProvider, { theme, children });
 }
 OverridableThemeProvider.propTypes = {
   children: PropTypes.any.isRequired,
@@ -22,4 +12,4 @@ OverridableThemeProvider.propTypes = {
 };
 OverridableThemeProvider.defaultProps = {
   theme: null
-};
+};

package/es/common/wallet-hidden-topbar.d.ts

@@ -0,0 +1 @@
+export function useWalletHiddenTopbar(): void;

package/es/common/wallet-hidden-topbar.js

@@ -7,15 +7,17 @@ export const useWalletHiddenTopbar = () => {
   const browser = useBrowser();
   useEffect(() => {
     if (browser.wallet) {
-      import('dsbridge').then(dsbridge => {
-        if (!dsbridge.call) {
-          // eslint-disable-next-line no-param-reassign
-          dsbridge = dsbridge.default;
-        }
-        dsbridge.call('arcHideTopBar', '{}');
-      }).catch(err => {
-        console.error('load dsbridge error', err);
-      });
+      import('dsbridge')
+        .then((dsbridge) => {
+          if (!dsbridge.call) {
+            // eslint-disable-next-line no-param-reassign
+            dsbridge = dsbridge.default;
+          }
+          dsbridge.call('arcHideTopBar', '{}');
+        })
+        .catch((err) => {
+          console.error('load dsbridge error', err);
+        });
     }
   }, [browser]);
-};
+};

package/es/index.d.ts

@@ -0,0 +1,5 @@
+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 * from './UserCenter';

package/es/index.js

@@ -0,0 +1,5 @@
+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 * from "./UserCenter/index.js";

package/es/types.d.ts

@@ -0,0 +1,2 @@
+export const blockletMetaProps: any;
+export const sessionManagerProps: any;

package/es/types.js

@@ -1,23 +1,29 @@
 /* eslint-disable import/prefer-default-export */
 import PropTypes from 'prop-types';
+
 export const blockletMetaProps = PropTypes.shape({
   appLogo: PropTypes.node,
   appName: PropTypes.string,
   theme: PropTypes.shape({
-    background: PropTypes.string
+    background: PropTypes.string,
   }),
   enableConnect: PropTypes.bool,
   enableLocale: PropTypes.bool,
-  navigation: PropTypes.arrayOf(PropTypes.shape({
-    title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-    link: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-    icon: PropTypes.string,
-    items: PropTypes.arrayOf(PropTypes.shape({
+  navigation: PropTypes.arrayOf(
+    PropTypes.shape({
       title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-      link: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
-    }))
-  }))
+      link: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+      icon: PropTypes.string,
+      items: PropTypes.arrayOf(
+        PropTypes.shape({
+          title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+          link: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+        })
+      ),
+    })
+  ),
 });
+
 export const sessionManagerProps = PropTypes.shape({
   showText: PropTypes.bool,
   showRole: PropTypes.bool,
@@ -33,5 +39,5 @@ export const sessionManagerProps = PropTypes.shape({
   menu: PropTypes.array,
   menuRender: PropTypes.func,
   dark: PropTypes.bool,
-  size: PropTypes.number
-});
+  size: PropTypes.number,
+});

package/es/utils.d.ts

@@ -0,0 +1,8 @@
+export function mapRecursive(array: any, fn: any, childrenKey?: string): any;
+export function flatRecursive(array: any, childrenKey?: string): any[];
+export function countRecursive(array: any, childrenKey?: string): number;
+export function filterRecursive(array: any, predicate: any, childrenKey?: string): any;
+export function isUrl(str: any): boolean;
+export function isIconifyString(str: any): boolean;
+export function matchPath(path: any): any;
+export function matchPaths(paths?: any[]): number;

package/es/utils.js

@@ -1,9 +1,9 @@
 export const mapRecursive = (array, fn, childrenKey = 'children') => {
-  return array.map(item => {
+  return array.map((item) => {
     if (Array.isArray(item[childrenKey])) {
       return fn({
         ...item,
-        [childrenKey]: mapRecursive(item[childrenKey], fn, childrenKey)
+        [childrenKey]: mapRecursive(item[childrenKey], fn, childrenKey),
       });
     }
     return fn(item);
@@ -13,7 +13,7 @@ export const mapRecursive = (array, fn, childrenKey = 'children') => {
 // 展平有层级结构的 array
 export const flatRecursive = (array, childrenKey = 'children') => {
   const result = [];
-  mapRecursive(array, item => result.push(item), childrenKey);
+  mapRecursive(array, (item) => result.push(item), childrenKey);
   return result;
 };
 
@@ -27,38 +27,36 @@ export const countRecursive = (array, childrenKey = 'children') => {
 // 对有层级结构的 array 进行 filter 处理
 // 因为是 DFS 遍历, 可以借助 context.filteredChildren 在过滤/保留子结的同时保持父子结构 (即使父结点不满足筛选条件)
 export const filterRecursive = (array, predicate, childrenKey = 'children') => {
-  return array.map(item => ({
-    ...item
-  })).filter(item => {
-    const children = item[childrenKey];
-    if (Array.isArray(children)) {
-      const filtered = filterRecursive(children, predicate, childrenKey);
-      item[childrenKey] = filtered?.length ? filtered : undefined;
-    }
-    const context = {
-      filteredChildren: item[childrenKey],
-      isLeaf: !children?.length
-    };
-    return predicate(item, context);
-  });
+  return array
+    .map((item) => ({ ...item }))
+    .filter((item) => {
+      const children = item[childrenKey];
+      if (Array.isArray(children)) {
+        const filtered = filterRecursive(children, predicate, childrenKey);
+        item[childrenKey] = filtered?.length ? filtered : undefined;
+      }
+      const context = { filteredChildren: item[childrenKey], isLeaf: !children?.length };
+      return predicate(item, context);
+    });
 };
 
 // "http://", "https://" 2 种情况
-export const isUrl = str => {
+export const isUrl = (str) => {
   return /^https?:\/\//.test(str);
 };
-export const isIconifyString = str => {
+
+export const isIconifyString = (str) => {
   return /^[\w-]+:[\w-]+$/.test(str);
 };
 
 /**
  * 检测 path 是否匹配当前 location, path 只考虑 "/" 开头的相对路径
  */
-export const matchPath = path => {
+export const matchPath = (path) => {
   if (!path || !path?.startsWith('/')) {
     return false;
   }
-  const ensureTrailingSlash = str => str.endsWith('/') ? str : `${str}/`;
+  const ensureTrailingSlash = (str) => (str.endsWith('/') ? str : `${str}/`);
   const pathname = ensureTrailingSlash(window.location.pathname);
   const normalizedPath = ensureTrailingSlash(new URL(path, window.location.origin).pathname);
   return pathname.startsWith(normalizedPath);
@@ -68,10 +66,7 @@ export const matchPath = path => {
  * 从一组 paths 中, 找到匹配当前 location 的 path, 返回序号
  */
 export const matchPaths = (paths = []) => {
-  const matched = paths.map((item, index) => ({
-    path: item,
-    index
-  })).filter(item => matchPath(item.path));
+  const matched = paths.map((item, index) => ({ path: item, index })).filter((item) => matchPath(item.path));
   if (!matched?.length) {
     return -1;
   }
@@ -80,4 +75,4 @@ export const matchPaths = (paths = []) => {
     return prev.path.length >= cur.path.length ? prev : cur;
   }, matched[0]);
   return mostSpecific.index;
-};
+};

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

@@ -0,0 +1,63 @@
+import type { Axios } from 'axios';
+export type SessionContext = {
+    session: Session;
+    api: Axios;
+};
+export type User = {
+    did: string;
+    fullName: string;
+    role: string;
+    avatar: string;
+    email?: string;
+    phone?: string;
+    sourceProvider?: string;
+    lastLoginAt?: string;
+    lastLoginIp?: string;
+    createdAt?: string;
+    passports?: any[];
+};
+export type UserCenterTab = {
+    value: string;
+    label: string;
+    url: string;
+    protected: boolean;
+    icon?: string;
+};
+export type Session = {
+    loading: boolean;
+    user: User;
+    login: any;
+    logout: any;
+    switch: any;
+    switchDid: any;
+    switchProfile: any;
+    switchPassport: any;
+};
+export type WebhookType = 'slack' | 'api';
+export type WebhookItemData = {
+    type: WebhookType;
+    url: string;
+};
+export type WebhookItemProps = {
+    onTest: (params: WebhookItemData) => void;
+    onSave: (params: WebhookItemData) => void;
+    onDelete?: (params: WebhookItemData) => void;
+    onCancel?: () => void;
+    edit: boolean;
+    type?: WebhookType;
+    url?: string;
+};
+export type CreatePassportProps = {
+    issuer: string;
+    title: string;
+    issuerDid: string;
+    issuerAvatarUrl: string;
+    ownerDid: string;
+    ownerName: string;
+    ownerAvatarUrl: string;
+    preferredColor?: string;
+    revoked?: boolean;
+    isDataUrl?: boolean;
+    width?: string;
+    height?: string;
+};

package/lib/@types/index.js

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

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

@@ -0,0 +1,12 @@
+declare module '@arcblock/ux/*';
+declare module '@arcblock/did-connect/*';
+
+declare module '@abtnode/constant';
+declare module 'is-url';
+declare module 'url-join';
+
+declare module '*.png';
+
+declare interface Window {
+  blocklet: any;
+}

package/lib/Dashboard/index.d.ts

@@ -0,0 +1,41 @@
+export default Dashboard;
+/**
+ * 专门用于 (composable) blocklet 的 Dashboard 组件, 解析 blocklet meta 中 section 为 dashboard 的 navigation 数据, 渲染一个 UX Dashboard
+ */
+declare function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddons, sessionManagerProps, links, ...rest }: {
+    [x: string]: any;
+    meta: any;
+    fallbackUrl: any;
+    invalidPathFallback: any;
+    headerAddons: any;
+    sessionManagerProps: any;
+    links: any;
+}): import("react").JSX.Element | null;
+declare namespace Dashboard {
+    namespace propTypes {
+        export { blockletMetaProps as meta };
+        export let fallbackUrl: any;
+        export let invalidPathFallback: any;
+        export let headerAddons: any;
+        export { sessionManagerProps };
+        export let links: any;
+    }
+    namespace defaultProps {
+        export let meta: {};
+        export { publicPath as fallbackUrl };
+        let invalidPathFallback_1: null;
+        export { invalidPathFallback_1 as invalidPathFallback };
+        let headerAddons_1: undefined;
+        export { headerAddons_1 as headerAddons };
+        export namespace sessionManagerProps_1 {
+            let showRole: boolean;
+            function onLogout(): void;
+        }
+        export { sessionManagerProps_1 as sessionManagerProps };
+        let links_1: never[];
+        export { links_1 as links };
+    }
+}
+import { blockletMetaProps } from '../types';
+import { sessionManagerProps } from '../types';
+import { publicPath } from '../blocklets';