@arcblock/ux 3.0.22 → 3.0.24
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.
- package/lib/Theme/theme-provider.js +75 -73
- package/package.json +11 -11
- package/src/Theme/theme-provider.tsx +20 -3
@@ -1,37 +1,37 @@
|
|
1
|
-
import { jsx as m, jsxs as
|
2
|
-
import { createContext as
|
3
|
-
import { useTheme as
|
4
|
-
import { deepmerge as
|
5
|
-
import
|
6
|
-
import
|
7
|
-
import { useDebounceFn as
|
8
|
-
import { getBlockletThemeOptions as
|
9
|
-
import { useLocationState as
|
10
|
-
import { createTheme as C, lazyCreateDefaultTheme as
|
11
|
-
const
|
12
|
-
function
|
13
|
-
return
|
1
|
+
import { jsx as m, jsxs as I } from "react/jsx-runtime";
|
2
|
+
import { createContext as N, use as O, useState as x, useRef as K, useMemo as g, useCallback as B, useEffect as b } from "react";
|
3
|
+
import { useTheme as R, CssBaseline as V, StyledEngineProvider as W, ThemeProvider as q, GlobalStyles as z } from "@mui/material";
|
4
|
+
import { deepmerge as Y } from "@mui/utils";
|
5
|
+
import $ from "lodash/set";
|
6
|
+
import J from "lodash/isUndefined";
|
7
|
+
import { useDebounceFn as Q, useCreation as M } from "ahooks";
|
8
|
+
import { getBlockletThemeOptions as X, BLOCKLET_THEME_PREFER_KEY as h, isValidThemeMode as Z, getDefaultThemePrefer as P } from "@blocklet/theme";
|
9
|
+
import { useLocationState as ee } from "../hooks/use-location-state.js";
|
10
|
+
import { createTheme as C, lazyCreateDefaultTheme as te, isUxTheme as oe, isTheme as re } from "./theme.js";
|
11
|
+
const ne = C(), j = N({});
|
12
|
+
function A() {
|
13
|
+
return O(j);
|
14
14
|
}
|
15
|
-
const
|
16
|
-
function
|
17
|
-
const t =
|
15
|
+
const _ = (i) => i ? i === "system" ? P({ theme: { prefer: "system" } }) : i : P();
|
16
|
+
function se({ className: i = void 0 }) {
|
17
|
+
const t = R();
|
18
18
|
if (t.palette.mode === "dark") {
|
19
|
-
const n = "transparent",
|
19
|
+
const n = "transparent", s = t.palette.grey[300], o = (i || "").trim().split(/\s+/).filter(Boolean).map((d) => d.startsWith(".") ? d : `.${d}`).join(" "), u = o ? `${o}::-webkit-scrollbar, ${o} *::-webkit-scrollbar` : "*::-webkit-scrollbar", r = o ? `${o}::-webkit-scrollbar-track, ${o} *::-webkit-scrollbar-track` : "*::-webkit-scrollbar-track", a = o ? `${o}::-webkit-scrollbar-thumb, ${o} *::-webkit-scrollbar-thumb` : "*::-webkit-scrollbar-thumb", c = o ? `${o}, ${o} *` : "*";
|
20
20
|
return /* @__PURE__ */ m(
|
21
|
-
|
21
|
+
z,
|
22
22
|
{
|
23
23
|
styles: {
|
24
24
|
// Chrome, Safari, Edge
|
25
25
|
"@supports selector(::-webkit-scrollbar)": {
|
26
|
-
[
|
26
|
+
[u]: {
|
27
27
|
width: "12px",
|
28
28
|
height: "12px"
|
29
29
|
},
|
30
30
|
[r]: {
|
31
31
|
background: n
|
32
32
|
},
|
33
|
-
[
|
34
|
-
background:
|
33
|
+
[a]: {
|
34
|
+
background: s,
|
35
35
|
borderRadius: "6px",
|
36
36
|
border: "2px solid",
|
37
37
|
borderColor: n,
|
@@ -46,7 +46,7 @@ function oe({ className: l = void 0 }) {
|
|
46
46
|
"@supports not selector(::-webkit-scrollbar)": {
|
47
47
|
[c]: {
|
48
48
|
scrollbarWidth: "auto",
|
49
|
-
scrollbarColor: `${
|
49
|
+
scrollbarColor: `${s} ${n}`
|
50
50
|
}
|
51
51
|
}
|
52
52
|
}
|
@@ -55,99 +55,101 @@ function oe({ className: l = void 0 }) {
|
|
55
55
|
}
|
56
56
|
return null;
|
57
57
|
}
|
58
|
-
|
59
|
-
|
60
|
-
|
58
|
+
let D = !1;
|
59
|
+
const L = {};
|
60
|
+
function U({
|
61
|
+
children: i = null,
|
62
|
+
theme: t = ne,
|
61
63
|
injectFirst: n = !0,
|
62
|
-
darkSchemeClass:
|
64
|
+
darkSchemeClass: s = ""
|
63
65
|
}) {
|
64
|
-
const o =
|
66
|
+
const o = g(() => typeof t == "function" || re(t) ? t : C(t), [t]), u = M(() => D ? null : (D = !0, /* @__PURE__ */ m(V, {})), []), r = M(() => L[s] ? null : (L[s] = !0, /* @__PURE__ */ m(se, { className: s })), [s]);
|
65
67
|
return (
|
66
68
|
// injectFirst 会影响 makeStyles 自定义样式和 mui styles 覆盖问题
|
67
|
-
/* @__PURE__ */ m(
|
68
|
-
|
69
|
-
|
70
|
-
|
69
|
+
/* @__PURE__ */ m(W, { injectFirst: n, children: /* @__PURE__ */ I(q, { theme: o, children: [
|
70
|
+
u,
|
71
|
+
r,
|
72
|
+
i
|
71
73
|
] }) })
|
72
74
|
);
|
73
75
|
}
|
74
|
-
function
|
75
|
-
children:
|
76
|
+
function le({
|
77
|
+
children: i = null,
|
76
78
|
theme: t = void 0,
|
77
79
|
prefer: n = void 0,
|
78
|
-
disableBlockletTheme:
|
80
|
+
disableBlockletTheme: s = !1,
|
79
81
|
...o
|
80
82
|
}) {
|
81
|
-
const
|
83
|
+
const u = A(), [r, a] = x(() => _(n)), [c, d] = x(null), p = R(), k = ee(), f = K(null), S = J(u.toggleMode), { run: w } = Q(
|
82
84
|
(e) => {
|
83
|
-
|
85
|
+
d(e);
|
84
86
|
},
|
85
87
|
{
|
86
88
|
wait: 200
|
87
89
|
}
|
88
|
-
), v =
|
90
|
+
), v = g(() => {
|
89
91
|
let e = {};
|
90
92
|
if (t) {
|
91
|
-
const
|
93
|
+
const G = te(r);
|
92
94
|
if (typeof t == "function") {
|
93
|
-
const
|
94
|
-
|
95
|
+
const H = G();
|
96
|
+
oe(p) ? e = { ...t(p, { mode: r }) } : e = { ...t(H, { mode: r }) };
|
95
97
|
} else
|
96
98
|
e = { ...t };
|
97
99
|
}
|
98
|
-
let
|
99
|
-
return c && (
|
100
|
-
}, [r, t,
|
100
|
+
let l = r;
|
101
|
+
return c && (l = c.mode || "light", e = Y(e, X(l, c))), $(e, "palette.mode", l), $(e, "mode", l), e;
|
102
|
+
}, [r, t, p, c]), T = g(() => C({ ...v, disableBlockletTheme: !!c || s }), [v, s, c]), E = B(() => {
|
101
103
|
const e = r === "light" ? "dark" : "light";
|
102
|
-
|
103
|
-
}, [r,
|
104
|
+
a(e), sessionStorage.removeItem(h), localStorage.setItem(h, e);
|
105
|
+
}, [r, a]), y = B(
|
104
106
|
(e) => {
|
105
|
-
r !== e && (
|
107
|
+
r !== e && (a(e), sessionStorage.removeItem(h), localStorage.setItem(h, e));
|
106
108
|
},
|
107
|
-
[r,
|
108
|
-
),
|
109
|
+
[r, a]
|
110
|
+
), F = g(
|
109
111
|
() => ({
|
110
112
|
mode: r,
|
111
113
|
toggleMode: E,
|
112
|
-
changeMode:
|
114
|
+
changeMode: y,
|
113
115
|
prefer: n
|
114
116
|
}),
|
115
|
-
[r, n, E,
|
117
|
+
[r, n, E, y]
|
116
118
|
);
|
117
119
|
return b(() => {
|
118
|
-
|
119
|
-
}, [n,
|
120
|
-
const e = new URLSearchParams(
|
121
|
-
|
122
|
-
}, [
|
123
|
-
|
120
|
+
a(_(n));
|
121
|
+
}, [n, a, k.search]), b(() => {
|
122
|
+
const e = new URLSearchParams(k.search).get("theme");
|
123
|
+
Z(e) && sessionStorage.setItem(h, e);
|
124
|
+
}, [k.search]), b(() => {
|
125
|
+
f.current || (f.current = document.querySelector('meta[name="theme-color"]'));
|
124
126
|
const e = T.palette.background.default;
|
125
|
-
if (
|
126
|
-
|
127
|
+
if (f.current)
|
128
|
+
f.current.setAttribute("content", e);
|
127
129
|
else {
|
128
|
-
const
|
129
|
-
|
130
|
+
const l = document.createElement("meta");
|
131
|
+
l.name = "theme-color", l.content = e, document.head.appendChild(l), f.current = l;
|
130
132
|
}
|
131
133
|
}, [T.palette.background.default]), b(() => {
|
132
|
-
const e = (
|
133
|
-
|
134
|
+
const e = (l) => {
|
135
|
+
l.origin === window.origin && l.data.type === "THEME_BUILDER_CONFIG_CHANGED" && w(l.data.payload);
|
134
136
|
};
|
135
137
|
return window.addEventListener("message", e), () => window.removeEventListener("message", e);
|
136
|
-
}, [
|
137
|
-
|
138
|
-
}, [
|
138
|
+
}, [w]), b(() => {
|
139
|
+
S && (r === "dark" ? document.documentElement.setAttribute("data-theme", "dark") : document.documentElement.removeAttribute("data-theme"));
|
140
|
+
}, [S, r]), /* @__PURE__ */ m(j, { value: F, children: /* @__PURE__ */ m(U, { theme: T, ...o, children: i }) });
|
139
141
|
}
|
140
|
-
function
|
141
|
-
children:
|
142
|
+
function pe({
|
143
|
+
children: i = null,
|
142
144
|
prefer: t = void 0,
|
143
145
|
enableColorScheme: n = !1,
|
144
|
-
...
|
146
|
+
...s
|
145
147
|
}) {
|
146
|
-
const { toggleMode: o } =
|
147
|
-
return n || t || !o ? /* @__PURE__ */ m(
|
148
|
+
const { toggleMode: o } = A();
|
149
|
+
return n || t || !o ? /* @__PURE__ */ m(le, { prefer: t, ...s, children: i }) : /* @__PURE__ */ m(U, { ...s, children: i });
|
148
150
|
}
|
149
151
|
export {
|
150
|
-
|
151
|
-
|
152
|
-
|
152
|
+
j as ColorSchemeContext,
|
153
|
+
pe as default,
|
154
|
+
A as useColorScheme
|
153
155
|
};
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@arcblock/ux",
|
3
|
-
"version": "3.0.
|
3
|
+
"version": "3.0.24",
|
4
4
|
"description": "Common used react components for arcblock products",
|
5
5
|
"keywords": [
|
6
6
|
"react",
|
@@ -54,22 +54,22 @@
|
|
54
54
|
"peerDependencies": {
|
55
55
|
"@emotion/react": "^11.14.0",
|
56
56
|
"@emotion/styled": "^11.14.0",
|
57
|
-
"@mui/icons-material": "^7.
|
58
|
-
"@mui/material": "^7.
|
59
|
-
"@mui/utils": "^7.
|
57
|
+
"@mui/icons-material": "^7.2.0",
|
58
|
+
"@mui/material": "^7.2.0",
|
59
|
+
"@mui/utils": "^7.2.0",
|
60
60
|
"react": "^19.0.0",
|
61
61
|
"react-router-dom": "^6.22.3"
|
62
62
|
},
|
63
|
-
"gitHead": "
|
63
|
+
"gitHead": "37d2a1f13dfc80b7c41b2d503e295ac899f3c320",
|
64
64
|
"dependencies": {
|
65
|
-
"@arcblock/bridge": "3.0.
|
65
|
+
"@arcblock/bridge": "3.0.24",
|
66
66
|
"@arcblock/did": "^1.20.15",
|
67
67
|
"@arcblock/did-motif": "^1.1.14",
|
68
|
-
"@arcblock/icons": "3.0.
|
69
|
-
"@arcblock/nft-display": "3.0.
|
70
|
-
"@arcblock/react-hooks": "3.0.
|
71
|
-
"@blocklet/js-sdk": "^1.16.
|
72
|
-
"@blocklet/theme": "3.0.
|
68
|
+
"@arcblock/icons": "3.0.24",
|
69
|
+
"@arcblock/nft-display": "3.0.24",
|
70
|
+
"@arcblock/react-hooks": "3.0.24",
|
71
|
+
"@blocklet/js-sdk": "^1.16.46",
|
72
|
+
"@blocklet/theme": "3.0.24",
|
73
73
|
"@fontsource/roboto": "~5.1.1",
|
74
74
|
"@fontsource/ubuntu-mono": "^5.2.6",
|
75
75
|
"@iconify-icons/logos": "^1.2.36",
|
@@ -12,7 +12,7 @@ import {
|
|
12
12
|
import { deepmerge } from '@mui/utils';
|
13
13
|
import set from 'lodash/set';
|
14
14
|
import isUndefined from 'lodash/isUndefined';
|
15
|
-
import { useDebounceFn } from 'ahooks';
|
15
|
+
import { useCreation, useDebounceFn } from 'ahooks';
|
16
16
|
import {
|
17
17
|
BLOCKLET_THEME_PREFER_KEY,
|
18
18
|
getDefaultThemePrefer,
|
@@ -129,6 +129,9 @@ interface BaseThemeProviderProps {
|
|
129
129
|
darkSchemeClass?: string;
|
130
130
|
}
|
131
131
|
|
132
|
+
let injectedCssBaseline = false;
|
133
|
+
const injectedDarkSchemeStylesMap: Record<string, boolean> = {};
|
134
|
+
|
132
135
|
/** 快速配置 MUI 主题 */
|
133
136
|
function BaseThemeProvider({
|
134
137
|
children = null,
|
@@ -147,12 +150,26 @@ function BaseThemeProvider({
|
|
147
150
|
return createTheme(theme);
|
148
151
|
}, [theme]);
|
149
152
|
|
153
|
+
const cssBaseline = useCreation(() => {
|
154
|
+
if (injectedCssBaseline) return null;
|
155
|
+
|
156
|
+
injectedCssBaseline = true;
|
157
|
+
return <CssBaseline />;
|
158
|
+
}, []);
|
159
|
+
|
160
|
+
const darkSchemeStyles = useCreation(() => {
|
161
|
+
if (injectedDarkSchemeStylesMap[darkSchemeClass]) return null;
|
162
|
+
|
163
|
+
injectedDarkSchemeStylesMap[darkSchemeClass] = true;
|
164
|
+
return <DarkSchemeStyles className={darkSchemeClass} />;
|
165
|
+
}, [darkSchemeClass]);
|
166
|
+
|
150
167
|
return (
|
151
168
|
// injectFirst 会影响 makeStyles 自定义样式和 mui styles 覆盖问题
|
152
169
|
<StyledEngineProvider injectFirst={injectFirst}>
|
153
170
|
<MuiThemeProvider theme={_theme}>
|
154
|
-
|
155
|
-
|
171
|
+
{cssBaseline}
|
172
|
+
{darkSchemeStyles}
|
156
173
|
{children}
|
157
174
|
</MuiThemeProvider>
|
158
175
|
</StyledEngineProvider>
|