@arcblock/ux 2.13.16 → 2.13.18

package/lib/Config/config-provider.d.ts

@@ -3,14 +3,16 @@ import { type PaletteMode } from '@mui/material';
 import { LocaleProviderProps } from '../Locale/context';
 import { ThemeProviderProps } from '../Theme/theme-provider';
 import { type UserThemeOptions, type ThemeConfig } from '../Theme';
+type Prefer = 'light' | 'dark' | 'system';
 export interface ConfigContextType {
     mode: PaletteMode;
+    prefer?: Prefer;
     themeOptions: UserThemeOptions;
     toggleMode: () => void;
 }
 export interface ConfigProviderProps extends Omit<LocaleProviderProps, 'translations'>, Omit<ThemeProviderProps, 'theme'> {
     children: ReactNode;
-    prefer?: PaletteMode;
+    prefer?: Prefer;
     theme?: UserThemeOptions | ((config: ThemeConfig) => UserThemeOptions);
     disableBlockletTheme?: boolean;
     translations?: Record<string, any>;
@@ -24,6 +26,7 @@ export declare namespace ConfigProvider {
 }
 export declare function useConfig(): {
     mode: PaletteMode;
+    prefer?: Prefer;
     themeOptions: UserThemeOptions;
     toggleMode: () => void;
     locale: import("../type").Locale;
@@ -35,3 +38,4 @@ export declare function useConfig(): {
     }[];
     theme: import("@mui/material").Theme;
 };
+export {};

package/lib/Config/config-provider.js

@@ -6,6 +6,20 @@ import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
 import { LocaleProvider, useLocaleContext } from '../Locale/context';
 import ThemeProvider from '../Theme/theme-provider';
 import { createTheme, getDefaultThemePrefer, lazyThemeConfig, useTheme } from '../Theme';
+const resolveMode = prefer => {
+  if (prefer) {
+    if (prefer === 'system') {
+      // 取系统默认
+      return getDefaultThemePrefer({
+        theme: {
+          prefer: 'system'
+        }
+      });
+    }
+    return prefer;
+  }
+  return getDefaultThemePrefer();
+};
 const ConfigContext = /*#__PURE__*/createContext({});
 /**
  * 集中化配置
@@ -24,12 +38,7 @@ export function ConfigProvider({
   languages,
   onLoadingTranslation
 }) {
-  const [mode, setMode] = useState(() => {
-    if (prefer) {
-      return prefer;
-    }
-    return getDefaultThemePrefer();
-  });
+  const [mode, setMode] = useState(() => resolveMode(prefer));
   const _themeOptions = useMemo(() => {
     let result = {};
     const getThemeConfig = lazyThemeConfig(mode);
@@ -60,13 +69,14 @@ export function ConfigProvider({
   const config = useMemo(() => ({
     mode,
     themeOptions: _themeOptions,
-    toggleMode
-  }), [mode, _themeOptions, toggleMode]);
+    toggleMode,
+    prefer
+  }), [mode, prefer, _themeOptions, toggleMode]);
 
   // change prefer manually
   useEffect(() => {
     if (prefer) {
-      setMode(prefer);
+      setMode(resolveMode(prefer));
     }
   }, [prefer, setMode]);
   return /*#__PURE__*/_jsx(ConfigContext.Provider, {

package/lib/Config/theme-mode-toggle.js

@@ -6,7 +6,8 @@ import { useConfig } from './config-provider';
 export default function ThemeModeToggle() {
   const {
     mode,
-    toggleMode
+    toggleMode,
+    prefer
   } = useConfig();
   if (!toggleMode) {
     if (process.env.NODE_ENV !== 'production') {
@@ -14,8 +15,13 @@ export default function ThemeModeToggle() {
     }
     return null;
   }
-  return /*#__PURE__*/_jsx(IconButton, {
-    onClick: toggleMode,
-    children: mode === 'light' ? /*#__PURE__*/_jsx(Brightness2OutlinedIcon, {}) : /*#__PURE__*/_jsx(LightModeOutlinedIcon, {})
-  });
+
+  // 跟随系统才显示切换
+  if (prefer === 'system' || window.blocklet?.theme?.prefer === 'system') {
+    return /*#__PURE__*/_jsx(IconButton, {
+      onClick: toggleMode,
+      children: mode === 'light' ? /*#__PURE__*/_jsx(Brightness2OutlinedIcon, {}) : /*#__PURE__*/_jsx(LightModeOutlinedIcon, {})
+    });
+  }
+  return null;
 }

package/lib/SessionUser/components/user-info.js

@@ -24,7 +24,10 @@ export default function UserInfo({
     return translate(translations, key, locale, 'en', data);
   });
   const avatar = getUserAvatar(session.user?.avatar?.replace(/\s/g, encodeURIComponent(' ')), 64);
-  const currentRole = useCreation(() => session.user?.passports?.find(item => item.name === session.user.role), [session?.user?.passports, session?.user?.role]);
+  const currentRole = useCreation(() => {
+    // FIXME: @zhanghan 感觉应该把 name 的判断去掉？
+    return session.user?.passports?.find(item => item.name === session.user.role || item.role === session.user.role);
+  }, [session?.user?.passports, session?.user?.role]);
   const hasBindWallet = useCreation(() => {
     return getWallet(session?.user);
   }, [session?.user]);

package/lib/Theme/theme.d.ts

@@ -11,7 +11,11 @@ export declare function collectFontFamilies(obj?: {
     fontFamily?: string;
 }, fontSet?: Set<string>): Set<string>;
 export declare function loadFonts(fonts: string[]): Promise<boolean>;
-export declare function getDefaultThemePrefer(): PaletteMode;
+export declare function getDefaultThemePrefer(meta?: {
+    theme: {
+        prefer: 'light' | 'dark' | 'system';
+    };
+}): PaletteMode;
 export declare function createDefaultThemeOptions(mode?: PaletteMode): ThemeOptions;
 export interface UserThemeOptions extends ThemeOptions {
     disableBlockletTheme?: boolean;

package/lib/Theme/theme.js

@@ -63,8 +63,8 @@ export function loadFonts(fonts) {
 }
 
 // 获取默认主题偏好
-export function getDefaultThemePrefer() {
-  const prefer = window.blocklet?.theme?.prefer;
+export function getDefaultThemePrefer(meta) {
+  const prefer = Object.assign({}, window.blocklet, meta).theme?.prefer;
   if (prefer === 'system') {
     // 本地缓存
     const localPrefer = localStorage.getItem(BLOCKLET_THEME_PREFER_KEY);

package/lib/type.d.ts

@@ -1,4 +1,4 @@
-import type { Theme, PaletteMode } from '@mui/material';
+import type { Theme } from '@mui/material';
 import type { LiteralUnion } from 'type-fest';
 
 export type $TSFixMe = any;
@@ -26,7 +26,7 @@ export type Blocklet = {
   mode: string;
   tenantMode: 'single' | 'multiple';
   theme: {
-    prefer?: PaletteMode | 'system';
+    prefer?: 'light' | 'dark' | 'system';
     light: Theme;
     dark: Theme;
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.13.16",
+  "version": "2.13.18",
   "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": "ccf3113f17409f98eb34b43a18f532effef9bd9b",
+  "gitHead": "7bb88b45cd68de7eb079b590d0d73fd41d303917",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.13.16",
-    "@arcblock/nft-display": "^2.13.16",
-    "@arcblock/react-hooks": "^2.13.16",
+    "@arcblock/icons": "^2.13.18",
+    "@arcblock/nft-display": "^2.13.18",
+    "@arcblock/react-hooks": "^2.13.18",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@blocklet/theme": "^2.13.16",
+    "@blocklet/theme": "^2.13.18",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.0.18",
     "@iconify-icons/logos": "^1.2.36",

package/src/Config/config-provider.tsx

@@ -14,19 +14,34 @@ import {
   type ThemeConfig,
 } from '../Theme';
 
+type Prefer = 'light' | 'dark' | 'system';
+
 export interface ConfigContextType {
   mode: PaletteMode;
+  prefer?: Prefer;
   themeOptions: UserThemeOptions;
   toggleMode: () => void;
 }
 
+const resolveMode = (prefer?: Prefer): PaletteMode => {
+  if (prefer) {
+    if (prefer === 'system') {
+      // 取系统默认
+      return getDefaultThemePrefer({ theme: { prefer: 'system' } });
+    }
+    return prefer;
+  }
+
+  return getDefaultThemePrefer();
+};
+
 const ConfigContext = createContext<ConfigContextType>({} as ConfigContextType);
 
 export interface ConfigProviderProps
   extends Omit<LocaleProviderProps, 'translations'>,
     Omit<ThemeProviderProps, 'theme'> {
   children: ReactNode;
-  prefer?: PaletteMode;
+  prefer?: Prefer;
   theme?: UserThemeOptions | ((config: ThemeConfig) => UserThemeOptions);
   disableBlockletTheme?: boolean;
   translations?: Record<string, any>;
@@ -49,13 +64,7 @@ export function ConfigProvider({
   languages,
   onLoadingTranslation,
 }: ConfigProviderProps) {
-  const [mode, setMode] = useState<PaletteMode>(() => {
-    if (prefer) {
-      return prefer;
-    }
-
-    return getDefaultThemePrefer();
-  });
+  const [mode, setMode] = useState<PaletteMode>(() => resolveMode(prefer));
 
   const _themeOptions = useMemo(() => {
     let result: ThemeOptions = {};
@@ -90,14 +99,15 @@ export function ConfigProvider({
       mode,
       themeOptions: _themeOptions,
       toggleMode,
+      prefer,
     }),
-    [mode, _themeOptions, toggleMode]
+    [mode, prefer, _themeOptions, toggleMode]
   );
 
   // change prefer manually
   useEffect(() => {
     if (prefer) {
-      setMode(prefer);
+      setMode(resolveMode(prefer));
     }
   }, [prefer, setMode]);
 

package/src/Config/theme-mode-toggle.tsx

@@ -4,7 +4,7 @@ import Brightness2OutlinedIcon from '@mui/icons-material/Brightness2Outlined';
 import { useConfig } from './config-provider';
 
 export default function ThemeModeToggle() {
-  const { mode, toggleMode } = useConfig();
+  const { mode, toggleMode, prefer } = useConfig();
 
   if (!toggleMode) {
     if (process.env.NODE_ENV !== 'production') {
@@ -14,9 +14,14 @@ export default function ThemeModeToggle() {
     return null;
   }
 
-  return (
-    <IconButton onClick={toggleMode}>
-      {mode === 'light' ? <Brightness2OutlinedIcon /> : <LightModeOutlinedIcon />}
-    </IconButton>
-  );
+  // 跟随系统才显示切换
+  if (prefer === 'system' || window.blocklet?.theme?.prefer === 'system') {
+    return (
+      <IconButton onClick={toggleMode}>
+        {mode === 'light' ? <Brightness2OutlinedIcon /> : <LightModeOutlinedIcon />}
+      </IconButton>
+    );
+  }
+
+  return null;
 }

package/src/SessionUser/components/user-info.tsx

@@ -36,10 +36,12 @@ export default function UserInfo({
     return translate(translations, key, locale, 'en', data);
   });
   const avatar = getUserAvatar(session.user?.avatar?.replace(/\s/g, encodeURIComponent(' ')), 64);
-  const currentRole = useCreation(
-    () => session.user?.passports?.find((item: $TSFixMe) => item.name === session.user.role),
-    [session?.user?.passports, session?.user?.role]
-  );
+  const currentRole = useCreation(() => {
+    // FIXME: @zhanghan 感觉应该把 name 的判断去掉？
+    return session.user?.passports?.find(
+      (item: $TSFixMe) => item.name === session.user.role || item.role === session.user.role
+    );
+  }, [session?.user?.passports, session?.user?.role]);
 
   const hasBindWallet = useCreation(() => {
     return getWallet(session?.user);

package/src/Theme/theme.ts

@@ -6,7 +6,6 @@ import { deepmerge } from '@mui/utils';
 import pick from 'lodash/pick';
 import webfontloader from 'webfontloader';
 import { BLOCKLET_THEME_LIGHT, BLOCKLET_THEME_DARK, DEFAULT_FONTS, BLOCKLET_THEME_PREFER_KEY } from '@blocklet/theme';
-
 import { cleanedObj, deepmergeAll } from '../Util';
 
 // 默认只加载最基本的 roboto latin 字体
@@ -73,8 +72,8 @@ export function loadFonts(fonts: string[]) {
 }
 
 // 获取默认主题偏好
-export function getDefaultThemePrefer(): PaletteMode {
-  const prefer = window.blocklet?.theme?.prefer;
+export function getDefaultThemePrefer(meta?: { theme: { prefer: 'light' | 'dark' | 'system' } }): PaletteMode {
+  const prefer = Object.assign({}, window.blocklet, meta).theme?.prefer;
 
   if (prefer === 'system') {
     // 本地缓存

package/src/type.d.ts

@@ -1,4 +1,4 @@
-import type { Theme, PaletteMode } from '@mui/material';
+import type { Theme } from '@mui/material';
 import type { LiteralUnion } from 'type-fest';
 
 export type $TSFixMe = any;
@@ -26,7 +26,7 @@ export type Blocklet = {
   mode: string;
   tenantMode: 'single' | 'multiple';
   theme: {
-    prefer?: PaletteMode | 'system';
+    prefer?: 'light' | 'dark' | 'system';
     light: Theme;
     dark: Theme;
   };