@arcblock/ux 2.13.46 → 2.13.48

package/lib/RelativeTime/index.d.ts

@@ -1,3 +1,4 @@
+import { TooltipProps } from '@mui/material';
 import 'dayjs/locale/zh-cn';
 import type { Locale } from '../type';
 export interface RelativeTimeProps {
@@ -12,5 +13,6 @@ export interface RelativeTimeProps {
     enableTooltip?: boolean;
     useShortTimezone?: boolean;
     disableTimezone?: boolean;
+    placement?: TooltipProps['placement'];
 }
-export default function RelativeTime({ value, locale, withoutSuffix, from, to, type, tz, relativeRange, enableTooltip, useShortTimezone, disableTimezone, ...rest }: RelativeTimeProps): import("react/jsx-runtime").JSX.Element;
+export default function RelativeTime({ value, locale, withoutSuffix, from, to, type, tz, relativeRange, enableTooltip, useShortTimezone, disableTimezone, placement, ...rest }: RelativeTimeProps): import("react/jsx-runtime").JSX.Element;

package/lib/RelativeTime/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Tooltip } from '@mui/material';
-import { useState, useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
@@ -8,6 +8,7 @@ import localizedFormat from 'dayjs/plugin/localizedFormat';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 import updateLocale from 'dayjs/plugin/updateLocale';
+import { create } from 'zustand';
 import { formatToDatetime, setDateTool } from '../Util';
 dayjs.extend(localizedFormat);
 dayjs.extend(utc);
@@ -48,6 +49,12 @@ const translations = {
     shortLocal: '当前时区'
   }
 };
+const useUtcStore = create(set => ({
+  isUtc: false,
+  setIsUtc: isUtc => set({
+    isUtc
+  })
+}));
 function useRelativeTime({
   value,
   locale = 'en',
@@ -63,7 +70,12 @@ function useRelativeTime({
   const sign = timeZoneOffset > 0 ? '-' : '+';
   const hoursOffset = Math.abs(timeZoneOffset) / 60;
   const isLocalUtc = timeZoneOffset === 0;
-  const [isUtc, setIsUtc] = useState(isLocalUtc);
+  const isUtc = useUtcStore(state => state.isUtc);
+  const setIsUtc = useUtcStore(state => state.setIsUtc);
+  useEffect(() => {
+    setIsUtc(isLocalUtc);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isLocalUtc]);
   if (!value) {
     return {
       innerContent: '-',
@@ -137,8 +149,6 @@ function useRelativeTime({
 function UTCChip({
   locale,
   isUtc,
-  sign,
-  hoursOffset,
   setIsUtc,
   useShortTimezone = true
 }) {
@@ -162,7 +172,7 @@ function UTCChip({
       padding: '4px 8px',
       lineHeight: 1
     },
-    onClick: () => setIsUtc(r => !r),
+    onClick: () => setIsUtc(!isUtc),
     children: text
   });
 }
@@ -178,6 +188,7 @@ export default function RelativeTime({
   enableTooltip = true,
   useShortTimezone = false,
   disableTimezone = false,
+  placement = 'top-end',
   ...rest
 }) {
   const {
@@ -185,8 +196,6 @@ export default function RelativeTime({
     popContent,
     isUtc,
     setIsUtc,
-    sign,
-    hoursOffset,
     relativeString
   } = useRelativeTime({
     value,
@@ -201,7 +210,7 @@ export default function RelativeTime({
   if (type === 'all') {
     return /*#__PURE__*/_jsx(Tooltip, {
       title: undefined,
-      placement: "top-end",
+      placement: placement,
       enterTouchDelay: 0,
       children: /*#__PURE__*/_jsxs(Box, {
         display: "inline-flex",
@@ -235,8 +244,6 @@ export default function RelativeTime({
           }), /*#__PURE__*/_jsx(UTCChip, {
             locale: locale,
             isUtc: isUtc,
-            sign: sign,
-            hoursOffset: hoursOffset,
             setIsUtc: setIsUtc,
             useShortTimezone: useShortTimezone
           })]
@@ -246,7 +253,7 @@ export default function RelativeTime({
   }
   return /*#__PURE__*/_jsx(Tooltip, {
     title: enableTooltip ? popContent : undefined,
-    placement: "top-end",
+    placement: placement,
     enterTouchDelay: 0,
     children: /*#__PURE__*/_jsxs(Box, {
       display: "inline-flex",
@@ -259,8 +266,6 @@ export default function RelativeTime({
       }), type === 'utc' && !disableTimezone && /*#__PURE__*/_jsx(UTCChip, {
         locale: locale,
         isUtc: isUtc,
-        sign: sign,
-        hoursOffset: hoursOffset,
         setIsUtc: setIsUtc,
         useShortTimezone: useShortTimezone
       })]

package/lib/Theme/theme-provider.js

@@ -7,6 +7,7 @@ import StyledEngineProvider from '@mui/material/StyledEngineProvider';
 import CssBaseline from '@mui/material/CssBaseline';
 import set from 'lodash/set';
 import { BLOCKLET_THEME_PREFER_KEY } from '@blocklet/theme';
+import useLocationState from '../hooks/use-location-state';
 import { createTheme, getDefaultThemePrefer, isTheme, isUxTheme, lazyCreateDefaultTheme } from './theme';
 const defaultTheme = createTheme();
 
@@ -19,9 +20,9 @@ export function useColorScheme() {
 
 /** 根据偏好获取颜色模式 */
 const resolveMode = prefer => {
+  // 允许组件的 prefer 属性覆盖 blocklet theme 中配置的 prefer
   if (prefer) {
     if (prefer === 'system') {
-      // 取系统默认
       return getDefaultThemePrefer({
         theme: {
           prefer: 'system'
@@ -123,6 +124,7 @@ function ColorSchemeProvider({
 }) {
   const [mode, setMode] = useState(() => resolveMode(prefer));
   const parentTheme = useTheme();
+  const location = useLocationState();
   const _themeInput = useMemo(() => {
     let result = {};
     const createBaseTheme = lazyCreateDefaultTheme(mode);
@@ -177,11 +179,11 @@ function ColorSchemeProvider({
     changeMode,
     prefer
   }), [mode, prefer, toggleMode, changeMode]);
+
+  // 监听 prefer 或者 url.search 变化
   useEffect(() => {
-    if (prefer) {
-      setMode(resolveMode(prefer));
-    }
-  }, [prefer, setMode]);
+    setMode(resolveMode(prefer));
+  }, [prefer, setMode, location.search]);
   return /*#__PURE__*/_jsx(ColorSchemeContext.Provider, {
     value: colorSchemeValue,
     children: /*#__PURE__*/_jsx(BaseThemeProvider, {

package/lib/Theme/theme.js

@@ -73,9 +73,15 @@ export function loadFonts(fonts) {
 
 // 获取默认主题偏好
 export function getDefaultThemePrefer(meta) {
+  // 跟随 url theme 参数
+  const urlParams = new URLSearchParams(window.location.search);
+  const urlPrefer = urlParams.get('theme');
+  if (urlPrefer === 'light' || urlPrefer === 'dark') {
+    return urlPrefer;
+  }
   const prefer = Object.assign({}, window.blocklet, meta).theme?.prefer;
   if (prefer === 'system') {
-    // 本地缓存
+    // 跟随本地缓存
     const localPrefer = localStorage.getItem(BLOCKLET_THEME_PREFER_KEY);
     if (localPrefer && (localPrefer === 'light' || localPrefer === 'dark')) {
       return localPrefer;
@@ -84,11 +90,12 @@ export function getDefaultThemePrefer(meta) {
     // 跟随系统
     return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
   }
+  // 跟随 blocklet theme mode
   if (prefer === 'light' || prefer === 'dark') {
     return prefer;
   }
 
-  // 未设置偏好
+  // fallback
   return 'light';
 }
 

package/lib/hooks/use-location-state.d.ts

@@ -0,0 +1,16 @@
+export interface LocationLike {
+    href: string;
+    origin: string;
+    host: string;
+    hostname: string;
+    port: string;
+    protocol: string;
+    pathname: string;
+    search: string;
+    hash: string;
+}
+/**
+ * 监听 location 变化，返回当前 location 状态
+ */
+export declare function useLocationState(): LocationLike;
+export default useLocationState;

package/lib/hooks/use-location-state.js

@@ -0,0 +1,89 @@
+/* eslint-disable no-restricted-globals */
+import { useEffect, useState } from 'react';
+const subscribers = new Set();
+let patched = false;
+let lastHref = '';
+
+// 检查是否在浏览器环境中
+const isBrowser = typeof window !== 'undefined';
+function notifyIfChanged() {
+  if (!isBrowser) return;
+  const currentHref = window.location.href;
+  if (currentHref !== lastHref) {
+    lastHref = currentHref;
+    subscribers.forEach(cb => cb(window.location));
+  }
+}
+function patchHistoryOnce() {
+  if (!isBrowser || patched) return;
+  patched = true;
+  const originalPushState = history.pushState;
+  history.pushState = function patchedPushState(...args) {
+    const result = originalPushState.apply(this, args);
+    notifyIfChanged();
+    return result;
+  };
+  const originalReplaceState = history.replaceState;
+  history.replaceState = function patchedReplaceState(...args) {
+    const result = originalReplaceState.apply(this, args);
+    notifyIfChanged();
+    return result;
+  };
+  window.addEventListener('popstate', notifyIfChanged);
+  window.addEventListener('hashchange', notifyIfChanged);
+}
+function subscribeUrlChange(callback) {
+  if (isBrowser) {
+    patchHistoryOnce();
+    subscribers.add(callback);
+  }
+  return () => {
+    subscribers.delete(callback);
+  };
+}
+function extractLocation(location) {
+  return {
+    href: location.href,
+    origin: location.origin,
+    host: location.host,
+    hostname: location.hostname,
+    pathname: location.pathname,
+    port: location.port,
+    protocol: location.protocol,
+    search: location.search,
+    hash: location.hash
+  };
+}
+const defaultLocation = {
+  href: '',
+  origin: '',
+  host: '',
+  hostname: '',
+  port: '',
+  protocol: '',
+  pathname: '',
+  search: '',
+  hash: ''
+};
+
+/**
+ * 监听 location 变化，返回当前 location 状态
+ */
+export function useLocationState() {
+  const [location, setLocation] = useState(() => {
+    if (!isBrowser) {
+      return defaultLocation;
+    }
+    return extractLocation(window.location);
+  });
+  useEffect(() => {
+    if (!isBrowser) {
+      return undefined;
+    }
+    return subscribeUrlChange(newLocation => {
+      setLocation(extractLocation(newLocation));
+    });
+  }, []);
+  return location;
+}
+export default useLocationState;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.13.46",
+  "version": "2.13.48",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -71,14 +71,14 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "1e351b068cb3856aa4c8b1bf9f0067d95e8aec17",
+  "gitHead": "e6639ffcaa28acbebef892a278fe609fc24ee365",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.13.46",
-    "@arcblock/nft-display": "^2.13.46",
-    "@arcblock/react-hooks": "^2.13.46",
+    "@arcblock/icons": "^2.13.48",
+    "@arcblock/nft-display": "^2.13.48",
+    "@arcblock/react-hooks": "^2.13.48",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@blocklet/theme": "^2.13.46",
+    "@blocklet/theme": "^2.13.48",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.0.18",
     "@iconify-icons/logos": "^1.2.36",
@@ -129,6 +129,7 @@
     "type-fest": "^4.28.0",
     "validator": "^13.9.0",
     "versor": "^0.0.4",
-    "webfontloader": "^1.6.28"
+    "webfontloader": "^1.6.28",
+    "zustand": "^5.0.5"
   }
 }

package/src/RelativeTime/index.tsx

@@ -1,5 +1,5 @@
-import { Box, Tooltip } from '@mui/material';
-import { useState, useMemo } from 'react';
+import { Box, Tooltip, TooltipProps } from '@mui/material';
+import { useEffect, useMemo } from 'react';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
@@ -7,6 +7,7 @@ import localizedFormat from 'dayjs/plugin/localizedFormat';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 import updateLocale from 'dayjs/plugin/updateLocale';
+import { create } from 'zustand';
 import { formatToDatetime, setDateTool } from '../Util';
 import type { Locale } from '../type';
 
@@ -51,6 +52,12 @@ const translations: Record<Locale, { utc: string; local: string; shortUTC: strin
   },
 };
 
+type UtcState = { isUtc: boolean; setIsUtc: (isUtc: boolean) => void };
+const useUtcStore = create<UtcState>((set) => ({
+  isUtc: false,
+  setIsUtc: (isUtc: boolean) => set({ isUtc }),
+}));
+
 export interface RelativeTimeProps {
   value: string | number;
   locale?: Locale;
@@ -63,6 +70,7 @@ export interface RelativeTimeProps {
   enableTooltip?: boolean;
   useShortTimezone?: boolean;
   disableTimezone?: boolean;
+  placement?: TooltipProps['placement'];
 }
 
 function useRelativeTime({
@@ -89,7 +97,14 @@ function useRelativeTime({
   const sign = timeZoneOffset > 0 ? '-' : '+';
   const hoursOffset = Math.abs(timeZoneOffset) / 60;
   const isLocalUtc = timeZoneOffset === 0;
-  const [isUtc, setIsUtc] = useState(isLocalUtc);
+
+  const isUtc = useUtcStore((state) => state.isUtc);
+  const setIsUtc = useUtcStore((state) => state.setIsUtc);
+
+  useEffect(() => {
+    setIsUtc(isLocalUtc);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isLocalUtc]);
 
   if (!value) {
     return { innerContent: '-', popContent: '-', isUtc, setIsUtc, sign, hoursOffset };
@@ -149,16 +164,12 @@ function useRelativeTime({
 function UTCChip({
   locale,
   isUtc,
-  sign,
-  hoursOffset,
   setIsUtc,
   useShortTimezone = true,
 }: {
   locale: Locale;
   isUtc?: boolean;
-  sign: string;
-  hoursOffset: number;
-  setIsUtc: (data: any) => void;
+  setIsUtc: (data: boolean) => void;
   useShortTimezone?: boolean;
 }) {
   const text = useMemo(() => {
@@ -185,7 +196,7 @@ function UTCChip({
         padding: '4px 8px',
         lineHeight: 1,
       }}
-      onClick={() => setIsUtc((r: any) => !r)}>
+      onClick={() => setIsUtc(!isUtc)}>
       {text}
     </Box>
   );
@@ -203,9 +214,10 @@ export default function RelativeTime({
   enableTooltip = true,
   useShortTimezone = false,
   disableTimezone = false,
+  placement = 'top-end',
   ...rest
 }: RelativeTimeProps) {
-  const { innerContent, popContent, isUtc, setIsUtc, sign, hoursOffset, relativeString } = useRelativeTime({
+  const { innerContent, popContent, isUtc, setIsUtc, relativeString } = useRelativeTime({
     value,
     locale,
     withoutSuffix,
@@ -218,7 +230,7 @@ export default function RelativeTime({
 
   if (type === 'all') {
     return (
-      <Tooltip title={undefined} placement="top-end" enterTouchDelay={0}>
+      <Tooltip title={undefined} placement={placement} enterTouchDelay={0}>
         <Box display="inline-flex" alignItems="center" gap={0.5} {...rest}>
           <Box component="span" {...rest} sx={{}}>
             {innerContent}
@@ -238,14 +250,7 @@ export default function RelativeTime({
                 ·
               </Box>
 
-              <UTCChip
-                locale={locale}
-                isUtc={isUtc}
-                sign={sign}
-                hoursOffset={hoursOffset}
-                setIsUtc={setIsUtc}
-                useShortTimezone={useShortTimezone}
-              />
+              <UTCChip locale={locale} isUtc={isUtc} setIsUtc={setIsUtc} useShortTimezone={useShortTimezone} />
             </>
           )}
         </Box>
@@ -254,21 +259,14 @@ export default function RelativeTime({
   }
 
   return (
-    <Tooltip title={enableTooltip ? popContent : undefined} placement="top-end" enterTouchDelay={0}>
+    <Tooltip title={enableTooltip ? popContent : undefined} placement={placement} enterTouchDelay={0}>
       <Box display="inline-flex" alignItems="center" gap={1}>
         <Box component="span" {...rest}>
           {innerContent}
         </Box>
 
         {type === 'utc' && !disableTimezone && (
-          <UTCChip
-            locale={locale}
-            isUtc={isUtc}
-            sign={sign}
-            hoursOffset={hoursOffset}
-            setIsUtc={setIsUtc}
-            useShortTimezone={useShortTimezone}
-          />
+          <UTCChip locale={locale} isUtc={isUtc} setIsUtc={setIsUtc} useShortTimezone={useShortTimezone} />
         )}
       </Box>
     </Tooltip>

package/src/Theme/theme-provider.tsx

@@ -7,6 +7,8 @@ import CssBaseline from '@mui/material/CssBaseline';
 import set from 'lodash/set';
 import { BLOCKLET_THEME_PREFER_KEY } from '@blocklet/theme';
 
+import useLocationState from '../hooks/use-location-state';
+
 import {
   createTheme,
   getDefaultThemePrefer,
@@ -33,9 +35,9 @@ export function useColorScheme() {
 
 /** 根据偏好获取颜色模式 */
 const resolveMode = (prefer?: Prefer): PaletteMode => {
+  // 允许组件的 prefer 属性覆盖 blocklet theme 中配置的 prefer
   if (prefer) {
     if (prefer === 'system') {
-      // 取系统默认
       return getDefaultThemePrefer({ theme: { prefer: 'system' } });
     }
     return prefer;
@@ -166,6 +168,7 @@ function ColorSchemeProvider({
 }: ThemeProviderProps) {
   const [mode, setMode] = useState<PaletteMode>(() => resolveMode(prefer));
   const parentTheme = useTheme();
+  const location = useLocationState();
 
   const _themeInput = useMemo(() => {
     let result: UxThemeOptions = {};
@@ -222,11 +225,10 @@ function ColorSchemeProvider({
     [mode, prefer, toggleMode, changeMode]
   );
 
+  // 监听 prefer 或者 url.search 变化
   useEffect(() => {
-    if (prefer) {
-      setMode(resolveMode(prefer));
-    }
-  }, [prefer, setMode]);
+    setMode(resolveMode(prefer));
+  }, [prefer, setMode, location.search]);
 
   return (
     <ColorSchemeContext.Provider value={colorSchemeValue}>

package/src/Theme/theme.ts

@@ -82,10 +82,16 @@ export function loadFonts(fonts: string[]) {
 
 // 获取默认主题偏好
 export function getDefaultThemePrefer(meta?: { theme: { prefer: 'light' | 'dark' | 'system' } }): PaletteMode {
-  const prefer = Object.assign({}, window.blocklet, meta).theme?.prefer;
+  // 跟随 url theme 参数
+  const urlParams = new URLSearchParams(window.location.search);
+  const urlPrefer = urlParams.get('theme');
+  if (urlPrefer === 'light' || urlPrefer === 'dark') {
+    return urlPrefer;
+  }
 
+  const prefer = Object.assign({}, window.blocklet, meta).theme?.prefer;
   if (prefer === 'system') {
-    // 本地缓存
+    // 跟随本地缓存
     const localPrefer = localStorage.getItem(BLOCKLET_THEME_PREFER_KEY) as PaletteMode;
     if (localPrefer && (localPrefer === 'light' || localPrefer === 'dark')) {
       return localPrefer;
@@ -94,12 +100,12 @@ export function getDefaultThemePrefer(meta?: { theme: { prefer: 'light' | 'dark'
     // 跟随系统
     return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
   }
-
+  // 跟随 blocklet theme mode
   if (prefer === 'light' || prefer === 'dark') {
     return prefer;
   }
 
-  // 未设置偏好
+  // fallback
   return 'light';
 }
 

package/src/hooks/use-location-state.tsx

@@ -0,0 +1,117 @@
+/* eslint-disable no-restricted-globals */
+import { useEffect, useState } from 'react';
+
+type UrlChangeCallback = (location: Location) => void;
+
+const subscribers = new Set<UrlChangeCallback>();
+let patched = false;
+let lastHref = '';
+
+// 检查是否在浏览器环境中
+const isBrowser = typeof window !== 'undefined';
+
+function notifyIfChanged() {
+  if (!isBrowser) return;
+
+  const currentHref = window.location.href;
+  if (currentHref !== lastHref) {
+    lastHref = currentHref;
+    subscribers.forEach((cb) => cb(window.location));
+  }
+}
+
+function patchHistoryOnce() {
+  if (!isBrowser || patched) return;
+  patched = true;
+
+  const originalPushState = history.pushState;
+  history.pushState = function patchedPushState(...args) {
+    const result = originalPushState.apply(this, args);
+    notifyIfChanged();
+    return result;
+  };
+
+  const originalReplaceState = history.replaceState;
+  history.replaceState = function patchedReplaceState(...args) {
+    const result = originalReplaceState.apply(this, args);
+    notifyIfChanged();
+    return result;
+  };
+
+  window.addEventListener('popstate', notifyIfChanged);
+  window.addEventListener('hashchange', notifyIfChanged);
+}
+
+function subscribeUrlChange(callback: UrlChangeCallback): () => void {
+  if (isBrowser) {
+    patchHistoryOnce();
+    subscribers.add(callback);
+  }
+  return () => {
+    subscribers.delete(callback);
+  };
+}
+
+export interface LocationLike {
+  href: string;
+  origin: string;
+  host: string;
+  hostname: string;
+  port: string;
+  protocol: string;
+  pathname: string;
+  search: string;
+  hash: string;
+}
+
+function extractLocation(location: Location): LocationLike {
+  return {
+    href: location.href,
+    origin: location.origin,
+    host: location.host,
+    hostname: location.hostname,
+    pathname: location.pathname,
+    port: location.port,
+    protocol: location.protocol,
+    search: location.search,
+    hash: location.hash,
+  };
+}
+
+const defaultLocation: LocationLike = {
+  href: '',
+  origin: '',
+  host: '',
+  hostname: '',
+  port: '',
+  protocol: '',
+  pathname: '',
+  search: '',
+  hash: '',
+};
+
+/**
+ * 监听 location 变化，返回当前 location 状态
+ */
+export function useLocationState(): LocationLike {
+  const [location, setLocation] = useState<LocationLike>(() => {
+    if (!isBrowser) {
+      return defaultLocation;
+    }
+    return extractLocation(window.location);
+  });
+
+  useEffect(() => {
+    if (!isBrowser) {
+      return undefined;
+    }
+
+    return subscribeUrlChange((newLocation) => {
+      setLocation(extractLocation(newLocation));
+    });
+  }, []);
+
+  return location;
+}
+
+export default useLocationState;