@arcblock/ux 2.13.46 → 2.13.47

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.47",
   "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": "8236383669dc761248ad704198602e3b5af3bed2",
   "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.47",
+    "@arcblock/nft-display": "^2.13.47",
+    "@arcblock/react-hooks": "^2.13.47",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@blocklet/theme": "^2.13.46",
+    "@blocklet/theme": "^2.13.47",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.0.18",
     "@iconify-icons/logos": "^1.2.36",

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;