@arcblock/ux 2.13.55 → 2.13.57

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
2
+ import { createContext, useCallback, useContext, useEffect, useMemo, useState, useRef } from 'react';
3
3
  import PropTypes from 'prop-types';
4
4
  import { GlobalStyles } from '@mui/material';
5
5
  import { ThemeProvider as MuiThemeProvider, useTheme } from '@mui/material/styles';
@@ -125,6 +125,7 @@ function ColorSchemeProvider({
125
125
  const [mode, setMode] = useState(() => resolveMode(prefer));
126
126
  const parentTheme = useTheme();
127
127
  const location = useLocationState();
128
+ const metaThemeColorRef = useRef(null);
128
129
  const _themeInput = useMemo(() => {
129
130
  let result = {};
130
131
  const createBaseTheme = lazyCreateDefaultTheme(mode);
@@ -165,11 +166,13 @@ function ColorSchemeProvider({
165
166
  const toggleMode = useCallback(() => {
166
167
  const newMode = mode === 'light' ? 'dark' : 'light';
167
168
  setMode(newMode);
169
+ sessionStorage.removeItem(BLOCKLET_THEME_PREFER_KEY);
168
170
  localStorage.setItem(BLOCKLET_THEME_PREFER_KEY, newMode);
169
171
  }, [mode, setMode]);
170
172
  const changeMode = useCallback(newMode => {
171
173
  if (mode !== newMode) {
172
174
  setMode(newMode);
175
+ sessionStorage.removeItem(BLOCKLET_THEME_PREFER_KEY);
173
176
  localStorage.setItem(BLOCKLET_THEME_PREFER_KEY, newMode);
174
177
  }
175
178
  }, [mode, setMode]);
@@ -192,6 +195,23 @@ function ColorSchemeProvider({
192
195
  sessionStorage.setItem(BLOCKLET_THEME_PREFER_KEY, urlTheme);
193
196
  }
194
197
  }, [location.search]);
198
+
199
+ // 动态设置 <meta name="theme-color" content="..."> 标签,用于控制移动端浏览器状态栏颜色
200
+ useEffect(() => {
201
+ if (!metaThemeColorRef.current) {
202
+ metaThemeColorRef.current = document.querySelector('meta[name="theme-color"]');
203
+ }
204
+ const bgcolor = theme.palette.background.default;
205
+ if (metaThemeColorRef.current) {
206
+ metaThemeColorRef.current.setAttribute('content', bgcolor);
207
+ } else {
208
+ const meta = document.createElement('meta');
209
+ meta.name = 'theme-color';
210
+ meta.content = bgcolor;
211
+ document.head.appendChild(meta);
212
+ metaThemeColorRef.current = meta;
213
+ }
214
+ }, [theme.palette.background.default]);
195
215
  return /*#__PURE__*/_jsx(ColorSchemeContext.Provider, {
196
216
  value: colorSchemeValue,
197
217
  children: /*#__PURE__*/_jsx(BaseThemeProvider, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arcblock/ux",
3
- "version": "2.13.55",
3
+ "version": "2.13.57",
4
4
  "description": "Common used react components for arcblock products",
5
5
  "keywords": [
6
6
  "react",
@@ -71,14 +71,14 @@
71
71
  "react": ">=18.2.0",
72
72
  "react-router-dom": ">=6.22.3"
73
73
  },
74
- "gitHead": "fd8de005ce497660cbf1ea7378cf0d725b45fe87",
74
+ "gitHead": "780e1e0d2465208e7f53d5ba23b5cb3f84a819ae",
75
75
  "dependencies": {
76
76
  "@arcblock/did-motif": "^1.1.13",
77
- "@arcblock/icons": "^2.13.55",
78
- "@arcblock/nft-display": "^2.13.55",
79
- "@arcblock/react-hooks": "^2.13.55",
77
+ "@arcblock/icons": "^2.13.57",
78
+ "@arcblock/nft-display": "^2.13.57",
79
+ "@arcblock/react-hooks": "^2.13.57",
80
80
  "@babel/plugin-syntax-dynamic-import": "^7.8.3",
81
- "@blocklet/theme": "^2.13.55",
81
+ "@blocklet/theme": "^2.13.57",
82
82
  "@fontsource/roboto": "~5.1.1",
83
83
  "@fontsource/ubuntu-mono": "^5.0.18",
84
84
  "@iconify-icons/logos": "^1.2.36",
@@ -1,4 +1,4 @@
1
- import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
1
+ import { createContext, useCallback, useContext, useEffect, useMemo, useState, useRef } from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
  import { GlobalStyles, PaletteMode } from '@mui/material';
4
4
  import { ThemeProvider as MuiThemeProvider, Theme, ThemeOptions, useTheme } from '@mui/material/styles';
@@ -161,6 +161,7 @@ function ColorSchemeProvider({
161
161
  const [mode, setMode] = useState<PaletteMode>(() => resolveMode(prefer));
162
162
  const parentTheme = useTheme();
163
163
  const location = useLocationState();
164
+ const metaThemeColorRef = useRef<HTMLMetaElement | null>(null);
164
165
 
165
166
  const _themeInput = useMemo(() => {
166
167
  let result: UxThemeOptions = {};
@@ -194,6 +195,7 @@ function ColorSchemeProvider({
194
195
  const toggleMode = useCallback(() => {
195
196
  const newMode = mode === 'light' ? 'dark' : 'light';
196
197
  setMode(newMode);
198
+ sessionStorage.removeItem(BLOCKLET_THEME_PREFER_KEY);
197
199
  localStorage.setItem(BLOCKLET_THEME_PREFER_KEY, newMode);
198
200
  }, [mode, setMode]);
199
201
 
@@ -201,6 +203,7 @@ function ColorSchemeProvider({
201
203
  (newMode: PaletteMode) => {
202
204
  if (mode !== newMode) {
203
205
  setMode(newMode);
206
+ sessionStorage.removeItem(BLOCKLET_THEME_PREFER_KEY);
204
207
  localStorage.setItem(BLOCKLET_THEME_PREFER_KEY, newMode);
205
208
  }
206
209
  },
@@ -231,6 +234,25 @@ function ColorSchemeProvider({
231
234
  }
232
235
  }, [location.search]);
233
236
 
237
+ // 动态设置 <meta name="theme-color" content="..."> 标签,用于控制移动端浏览器状态栏颜色
238
+ useEffect(() => {
239
+ if (!metaThemeColorRef.current) {
240
+ metaThemeColorRef.current = document.querySelector('meta[name="theme-color"]');
241
+ }
242
+
243
+ const bgcolor = theme.palette.background.default;
244
+
245
+ if (metaThemeColorRef.current) {
246
+ metaThemeColorRef.current.setAttribute('content', bgcolor);
247
+ } else {
248
+ const meta = document.createElement('meta');
249
+ meta.name = 'theme-color';
250
+ meta.content = bgcolor;
251
+ document.head.appendChild(meta);
252
+ metaThemeColorRef.current = meta;
253
+ }
254
+ }, [theme.palette.background.default]);
255
+
234
256
  return (
235
257
  <ColorSchemeContext.Provider value={colorSchemeValue}>
236
258
  <BaseThemeProvider theme={theme} {...rest}>