@blocklet/ui-react 2.9.91 → 2.10.0

package/es/blocklets.js

@@ -1,178 +0,0 @@
-import { mapRecursive, filterRecursive, isUrl } from './utils.js';
-
-export const publicPath = window?.blocklet?.groupPrefix || window?.blocklet?.prefix || '/';
-
-/**
- * 格式化 theme (目前仅考虑 background)
- */
-export const formatTheme = (theme) => {
-  const formatted = { ...theme };
-  const background = theme?.background;
-  if (typeof background === 'string') {
-    formatted.background = { header: background, footer: background, default: background };
-  } else if (background && typeof background === 'object') {
-    formatted.background = {
-      header: background.header || background.default,
-      footer: background.footer || background.default,
-      default: background.default,
-    };
-  }
-  return formatted;
-};
-
-/**
- * 获取指定 locale 对应的 navigation 数据, 仅考虑 zh/en
- */
-export const getLocalizedNavigation = (navigation, locale = 'en') => {
-  if (!navigation?.length) {
-    return navigation;
-  }
-  // eslint-disable-next-line no-shadow
-  const getTitle = (title, _locale) => {
-    if (typeof title === 'string') {
-      return title;
-    }
-    if (typeof title === 'object') {
-      return title[_locale] || title?.en || title?.zh;
-    }
-    return title;
-  };
-  // eslint-disable-next-line no-shadow
-  const getLink = (link, _locale) => {
-    if (typeof link === 'string') {
-      // http[s] 开头的 url
-      if (isUrl(link)) {
-        const url = new URL(link);
-        url.searchParams.set('locale', _locale);
-        return url.href;
-      }
-      const url = new URL(link, window.location.origin);
-      url.searchParams.set('locale', _locale);
-      return url.pathname + url.search;
-    }
-    if (typeof link === 'object') {
-      return link[_locale] || link?.en || link?.zh;
-    }
-    return link;
-  };
-  return mapRecursive(
-    navigation,
-    (item) => {
-      return {
-        ...item,
-        title: getTitle(item.title, locale),
-        // 仅对叶结点进行处理
-        link: !item.items?.length ? getLink(item.link, locale) : item.link,
-        _rawLink: item.link,
-      };
-    },
-    'items'
-  );
-};
-
-/**
- * 格式化 navigation
- *
- * - role 统一为数组形式
- */
-export const formatNavigation = (navigation) => {
-  return mapRecursive(
-    navigation,
-    (item) => {
-      if (item.role) {
-        return {
-          ...item,
-          role: Array.isArray(item.role) ? item.role : [item.role],
-        };
-      }
-      return item;
-    },
-    'items'
-  );
-};
-
-export const parseNavigation = (navigation) => {
-  if (!navigation?.length) {
-    return null;
-  }
-
-  const formattedNav = formatNavigation(navigation);
-
-  const sections = {
-    header: [],
-    footer: [],
-    // 对应 footer social media
-    social: [],
-    // 对应 footer 底部 links
-    bottom: [],
-    // 对应 dashboard#sidenav 导航
-    dashboard: [],
-    // session manager menus
-    sessionManager: [],
-    userCenter: [],
-  };
-
-  // 对 navigation 顶层元素按 section 分组
-  formattedNav.forEach((item) => {
-    // item#section 为空时, 表示只存在于 header
-    if (!item.section) {
-      sections.header.push(item);
-      // item 出现在指定几个 section 中 (array)
-    } else if (Array.isArray(item.section)) {
-      item.section.forEach((sectionKey) => {
-        sections[sectionKey]?.push(item);
-      });
-      // item 出现在指定的一个 section 中 (string)
-    } else if (typeof item.section === 'string') {
-      sections[item.section]?.push(item);
-    }
-  });
-
-  return sections;
-};
-
-/**
- * 格式化 blocklet info 数据
- */
-export const formatBlockletInfo = (blockletInfo) => {
-  if (!blockletInfo) {
-    return null;
-  }
-  const formatted = { ...blockletInfo };
-  // theme
-  formatted.theme = formatTheme(formatted.theme);
-  // navigation
-  formatted.navigation = parseNavigation(filterValidNavItems(formatted.navigation));
-  return formatted;
-};
-
-/**
- * 过滤掉无效结点 (无 link 且子元素为空)
- */
-export const filterValidNavItems = (navigation = []) => {
-  return filterRecursive(navigation, (item, context) => !!item.link || context.filteredChildren?.length, 'items');
-};
-
-/**
- * 根据 role 筛选 nav, 规则:
- * - 如果是枝结点, 必须至少存在一个符合条件的子结点
- * - role 未定义, 符合条件
- * - role 定义且包括当前的 userRole, 符合条件
- *
- * @param {object[]} nav 导航菜单数据
- * @param {string} userRole 当前用户 role
- * @returns 符合 role 权限的导航菜单数据
- */
-export const filterNavByRole = (nav, userRole) => {
-  return filterRecursive(
-    nav,
-    (item, context) => {
-      const isRoleMatched = !item.role || (userRole && item.role.includes(userRole));
-      if (!context.isLeaf) {
-        return isRoleMatched && context.filteredChildren?.length;
-      }
-      return isRoleMatched;
-    },
-    'items'
-  );
-};

package/es/common/header-addons.d.ts

@@ -1,21 +0,0 @@
-declare function HeaderAddons({ formattedBlocklet, addons, sessionManagerProps }: {
-    formattedBlocklet: any;
-    addons: any;
-    sessionManagerProps: any;
-}): import("react").DetailedReactHTMLElement<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-declare namespace HeaderAddons {
-    namespace propTypes {
-        export let formattedBlocklet: any;
-        export let addons: any;
-        export { SessionManagerProps as sessionManagerProps };
-    }
-    namespace defaultProps {
-        let addons_1: null;
-        export { addons_1 as addons };
-        export namespace sessionManagerProps {
-            let showRole: boolean;
-        }
-    }
-}
-export default HeaderAddons;
-import { SessionManagerProps } from '../types';

package/es/common/header-addons.js

@@ -1,83 +0,0 @@
-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 }) {
-  const sessionCtx = useContext(SessionContext);
-  const { locale } = useLocaleContext() || {};
-  const { enableConnect = true, enableLocale = true } = formattedBlocklet;
-  const authenticated = !!sessionCtx?.session?.user;
-  let localizedNav = getLocalizedNavigation(formattedBlocklet?.navigation?.sessionManager, locale) || [];
-  localizedNav = filterNavByRole(localizedNav, sessionCtx?.session?.user?.role);
-  const renderAddons = () => {
-    if (addons && typeof addons !== "function") {
-      return Array.isArray(addons) ? addons : [addons];
-    }
-    let addonsArray = [];
-    if (enableLocale && locale) {
-      addonsArray.push(/* @__PURE__ */ jsx(LocaleSelector, { showText: false }, "locale-selector"));
-    }
-    if (enableConnect && sessionCtx) {
-      const menu = [];
-      if (authenticated) {
-        const navList = localizedNav ? localizedNav.slice(0, 5) : [];
-        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",
-            href: x.link,
-            key: x.link
-          });
-        });
-      }
-      addonsArray.push(/* @__PURE__ */ jsx(SessionBlocklet, { session: sessionCtx.session, locale }, "session-blocklet"));
-      addonsArray.push(
-        /* @__PURE__ */ jsx(
-          SessionUser,
-          {
-            session: sessionCtx.session,
-            locale,
-            menu,
-            showRole: true,
-            ...sessionManagerProps
-          },
-          "session-user"
-        )
-      );
-    }
-    if (typeof addons === "function") {
-      addonsArray = addons(addonsArray) || [];
-    }
-    return addonsArray;
-  };
-  const renderedAddons = renderAddons();
-  const addonList = createElement(
-    Fragment,
-    null,
-    ...Array.isArray(renderedAddons) ? renderedAddons : [renderedAddons]
-  );
-  return addonList;
-}
-HeaderAddons.propTypes = {
-  formattedBlocklet: PropTypes.object.isRequired,
-  // 需要考虑 定制的 addons 与内置的 连接钱包/选择语言 addons 共存的情况
-  // - PropTypes.func: 可以把自定义 addons 插在 session-manager 或 locale-selector (如果存在的话) 前/中/后
-  // - PropTypes.node: 将 addons 原样传给 UX Header 组件
-  addons: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-  sessionManagerProps: SessionManagerProps
-};
-HeaderAddons.defaultProps = {
-  addons: null,
-  sessionManagerProps: {
-    showRole: true
-  }
-};

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

@@ -1,7 +0,0 @@
-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,18 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-function hasParentOfType(node, type) {
-  if (!node)
-    return false;
-  if (type === node.nodeName)
-    return true;
-  return hasParentOfType(node.parentNode, type);
-}
-function LinkBlocker({ ...rest }) {
-  const handleOnClick = (e) => {
-    const isInsideLink = hasParentOfType(e.target, "A");
-    if (isInsideLink) {
-      e.preventDefault();
-    }
-  };
-  return /* @__PURE__ */ jsx("div", { onClick: handleOnClick, ...rest });
-}
-export default LinkBlocker;

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

@@ -1,18 +0,0 @@
-/**
- * 允许 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,15 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import PropTypes from "prop-types";
-import { createTheme, ThemeProvider } from "@arcblock/ux/lib/Theme";
-const defaultTheme = createTheme();
-export default function OverridableThemeProvider({ theme: themeOverrides, children }) {
-  const theme = themeOverrides ? createTheme(themeOverrides) : defaultTheme;
-  return /* @__PURE__ */ jsx(ThemeProvider, { theme, children });
-}
-OverridableThemeProvider.propTypes = {
-  children: PropTypes.any.isRequired,
-  theme: PropTypes.object
-};
-OverridableThemeProvider.defaultProps = {
-  theme: null
-};

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

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

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

@@ -1,14 +0,0 @@
-import { useEffect } from 'react';
-import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
-import bridge from '@arcblock/bridge';
-
-// 在 wallet webview 环境中, 隐藏 wallet topbar
-// eslint-disable-next-line import/prefer-default-export
-export const useWalletHiddenTopbar = () => {
-  const browser = useBrowser();
-  useEffect(() => {
-    if (browser.wallet) {
-      bridge.call('arcHideTopBar', '{}');
-    }
-  }, [browser]);
-};

package/es/contexts/config-user-space.d.ts

@@ -1,26 +0,0 @@
-/// <reference types="react" />
-export interface SpaceGateway {
-    did: string;
-    name: string;
-    url: string;
-    endpoint: string;
-}
-export interface SettingStorageEndpoint {
-    (endpoint: string | undefined): void | Promise<void>;
-}
-interface ConfigUserSpaceContextType {
-    loading: boolean;
-    spaceGateway: SpaceGateway | undefined;
-    deleteSpaceGateway: (spaceGateway: SpaceGateway) => Promise<void>;
-    updateSpaceGateway: (updateSpaceGateway: SpaceGateway) => Promise<void>;
-    storageEndpoint: string;
-    settingStorageEndpoint: SettingStorageEndpoint;
-    hasStorageEndpoint: boolean;
-}
-declare const ConfigUserSpaceContext: import("react").Context<ConfigUserSpaceContextType>;
-declare const Consumer: import("react").Consumer<ConfigUserSpaceContextType>;
-declare function ConfigUserSpaceProvider({ children }: {
-    children: React.ReactNode;
-}): import("react").JSX.Element;
-declare function useConfigUserSpaceContext(): ConfigUserSpaceContextType;
-export { ConfigUserSpaceContext, ConfigUserSpaceProvider, Consumer as ConfigUserSpaceConsumer, useConfigUserSpaceContext, };

package/es/contexts/config-user-space.js

@@ -1,53 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { createContext, useContext, useMemo, useState, useEffect } from "react";
-import { SessionContext } from "@arcblock/did-connect/lib/Session";
-const ConfigUserSpaceContext = createContext({});
-const { Provider, Consumer } = ConfigUserSpaceContext;
-function ConfigUserSpaceProvider({ children }) {
-  const [loading] = useState(false);
-  const { session } = useContext(SessionContext);
-  const { user } = session;
-  const [spaceGateway, setSpaceGateway] = useState();
-  const storageEndpoint = useMemo(() => {
-    return user?.didSpace?.endpoint;
-  }, [user?.didSpace]);
-  useEffect(() => {
-    setSpaceGateway(user?.didSpace);
-  }, [user?.didSpace]);
-  const deleteSpaceGateway = async () => {
-    setSpaceGateway(void 0);
-  };
-  const settingStorageEndpoint = (endpoint) => {
-  };
-  const updateSpaceGateway = async (x) => {
-    setSpaceGateway(x);
-    session.refresh();
-    await settingStorageEndpoint(x.endpoint);
-  };
-  const hasStorageEndpoint = Boolean(storageEndpoint && spaceGateway);
-  return /* @__PURE__ */ jsx(
-    Provider,
-    {
-      value: {
-        loading,
-        spaceGateway,
-        deleteSpaceGateway,
-        updateSpaceGateway,
-        storageEndpoint,
-        settingStorageEndpoint,
-        hasStorageEndpoint
-      },
-      children
-    }
-  );
-}
-function useConfigUserSpaceContext() {
-  const res = useContext(ConfigUserSpaceContext);
-  return res;
-}
-export {
-  ConfigUserSpaceContext,
-  ConfigUserSpaceProvider,
-  Consumer as ConfigUserSpaceConsumer,
-  useConfigUserSpaceContext
-};

package/es/hooks/use-mobile.d.ts

@@ -1,4 +0,0 @@
-import { Breakpoint } from '@mui/material';
-export default function useMobile({ key }: {
-    key?: number | Breakpoint;
-}): boolean;

package/es/hooks/use-mobile.js

@@ -1,5 +0,0 @@
-import { useTheme, useMediaQuery } from "@mui/material";
-export default function useMobile({ key = "sm" }) {
-  const theme = useTheme();
-  return useMediaQuery(theme.breakpoints.down(key));
-}

package/es/index.d.ts

@@ -1,10 +0,0 @@
-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 BlockletStudio } from './BlockletStudio';
-export { default as useComponentInstaller } from './ComponentInstaller/use-component-installed';
-export * from './UserCenter';
-export * from './UserSessions';
-export * from './ComponentManager';

package/es/index.js

@@ -1,10 +0,0 @@
-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 BlockletStudio } from "./BlockletStudio/index.js";
-export { default as useComponentInstaller } from "./ComponentInstaller/use-component-installed.js";
-export * from "./UserCenter/index.js";
-export * from "./UserSessions/index.js";
-export * from "./ComponentManager/index.js";

package/es/libs/client.d.ts

@@ -1,2 +0,0 @@
-import { BlockletSDK } from '@blocklet/js-sdk';
-export declare const client: BlockletSDK;

package/es/libs/client.js

@@ -1,2 +0,0 @@
-import { BlockletSDK } from "@blocklet/js-sdk";
-export const client = new BlockletSDK();

package/es/libs/spaces.d.ts

@@ -1,2 +0,0 @@
-export declare function getSpaceNftDisplayUrlFromEndpoint(endpoint: string): string;
-export declare function getSpaceHomeUrl(endpoint: string): string;

package/es/libs/spaces.js

@@ -1,13 +0,0 @@
-import { joinURL } from "ufo";
-export function getSpaceNftDisplayUrlFromEndpoint(endpoint) {
-  const prefix = endpoint.replace(/\/api\/space\/.+/, "");
-  const strArray = endpoint.replace(/\/$/, "").split("/");
-  const spaceDid = strArray.at(-4);
-  return joinURL(prefix, `/api/space/nft/display?spaceDid=${spaceDid}`);
-}
-export function getSpaceHomeUrl(endpoint) {
-  const baseUrl = endpoint.replace(/\/api\/space\/.+/, "");
-  const strArray = endpoint.replace(/\/$/, "").split("/");
-  const spaceDid = strArray.at(-4);
-  return joinURL(baseUrl, "space", spaceDid);
-}

package/es/types.d.ts

@@ -1,2 +0,0 @@
-export const BlockletMetaProps: any;
-export const SessionManagerProps: any;

package/es/types.js

@@ -1,43 +0,0 @@
-/* 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,
-  }),
-  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({
-          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,
-  switchDid: PropTypes.bool,
-  switchProfile: PropTypes.bool,
-  switchPassport: PropTypes.bool,
-  disableLogout: PropTypes.bool,
-  onLogin: PropTypes.func,
-  onLogout: PropTypes.func,
-  onSwitchDid: PropTypes.func,
-  onSwitchProfile: PropTypes.func,
-  onSwitchPassport: PropTypes.func,
-  menu: PropTypes.array,
-  menuRender: PropTypes.func,
-  dark: PropTypes.bool,
-  size: PropTypes.number,
-});

package/es/utils.d.ts

@@ -1,8 +0,0 @@
-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,78 +0,0 @@
-export const mapRecursive = (array, fn, childrenKey = 'children') => {
-  return array.map((item) => {
-    if (Array.isArray(item[childrenKey])) {
-      return fn({
-        ...item,
-        [childrenKey]: mapRecursive(item[childrenKey], fn, childrenKey),
-      });
-    }
-    return fn(item);
-  });
-};
-
-// 展平有层级结构的 array
-export const flatRecursive = (array, childrenKey = 'children') => {
-  const result = [];
-  mapRecursive(array, (item) => result.push(item), childrenKey);
-  return result;
-};
-
-// 对有层级结构的 array 元素计数
-export const countRecursive = (array, childrenKey = 'children') => {
-  let counter = 0;
-  mapRecursive(array, () => counter++, childrenKey);
-  return counter;
-};
-
-// 对有层级结构的 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);
-    });
-};
-
-// "http://", "https://" 2 种情况
-export const isUrl = (str) => {
-  return /^https?:\/\//.test(str);
-};
-
-export const isIconifyString = (str) => {
-  return /^[\w-]+:[\w-]+$/.test(str);
-};
-
-/**
- * 检测 path 是否匹配当前 location, path 只考虑 "/" 开头的相对路径
- */
-export const matchPath = (path) => {
-  if (!path || !path?.startsWith('/')) {
-    return false;
-  }
-  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);
-};
-
-/**
- * 从一组 paths 中, 找到匹配当前 location 的 path, 返回序号
- */
-export const matchPaths = (paths = []) => {
-  const matched = paths.map((item, index) => ({ path: item, index })).filter((item) => matchPath(item.path));
-  if (!matched?.length) {
-    return -1;
-  }
-  // 多个 path 都匹配时, 取一个最具体 (最长的) path
-  const mostSpecific = matched.slice(1).reduce((prev, cur) => {
-    return prev.path.length >= cur.path.length ? prev : cur;
-  }, matched[0]);
-  return mostSpecific.index;
-};