@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.
|
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": "
|
74
|
+
"gitHead": "780e1e0d2465208e7f53d5ba23b5cb3f84a819ae",
|
75
75
|
"dependencies": {
|
76
76
|
"@arcblock/did-motif": "^1.1.13",
|
77
|
-
"@arcblock/icons": "^2.13.
|
78
|
-
"@arcblock/nft-display": "^2.13.
|
79
|
-
"@arcblock/react-hooks": "^2.13.
|
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.
|
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}>
|