@arcblock/ux 3.1.23 → 3.1.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 +67 -71
- package/package.json +7 -7
- package/src/Theme/theme-provider.tsx +58 -61
|
@@ -7,84 +7,80 @@ import Q from "lodash/isUndefined";
|
|
|
7
7
|
import { useDebounceFn as X, useCreation as P } from "ahooks";
|
|
8
8
|
import { getBlockletThemeOptions as Z, BLOCKLET_THEME_PREFER_KEY as h, isValidThemeMode as ee, getDefaultThemePrefer as _ } from "@blocklet/theme";
|
|
9
9
|
import { useLocationState as te } from "../hooks/use-location-state.js";
|
|
10
|
-
import { createTheme as T, lazyCreateDefaultTheme as
|
|
10
|
+
import { createTheme as T, lazyCreateDefaultTheme as oe, isUxTheme as re, isTheme as ne } from "./theme.js";
|
|
11
11
|
const se = T(), N = O({});
|
|
12
12
|
function U() {
|
|
13
13
|
return V(N);
|
|
14
14
|
}
|
|
15
|
-
const D = (
|
|
16
|
-
function L({ className:
|
|
17
|
-
const
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
width: "12px",
|
|
28
|
-
height: "12px"
|
|
29
|
-
},
|
|
30
|
-
[o]: {
|
|
31
|
-
background: n
|
|
32
|
-
},
|
|
33
|
-
[c]: {
|
|
34
|
-
background: s,
|
|
35
|
-
borderRadius: "6px",
|
|
36
|
-
border: "2px solid",
|
|
37
|
-
borderColor: n,
|
|
38
|
-
backgroundClip: "padding-box",
|
|
39
|
-
"&:hover": {
|
|
40
|
-
background: r.palette.grey[400],
|
|
41
|
-
backgroundClip: "padding-box"
|
|
42
|
-
}
|
|
43
|
-
},
|
|
44
|
-
[u]: {
|
|
45
|
-
background: n
|
|
46
|
-
}
|
|
15
|
+
const D = (c) => c ? c === "system" ? _({ theme: { prefer: "system" } }) : c : _();
|
|
16
|
+
function L({ className: c = void 0 }) {
|
|
17
|
+
const o = A(), n = "transparent", s = o.palette.grey[300], t = (c || "").trim().split(/\s+/).filter(Boolean).map((m) => m.startsWith(".") ? m : `.${m}`).join(" "), d = t ? `${t}::-webkit-scrollbar, ${t} *::-webkit-scrollbar` : "*::-webkit-scrollbar", r = t ? `${t}::-webkit-scrollbar-track, ${t} *::-webkit-scrollbar-track` : "*::-webkit-scrollbar-track", i = t ? `${t}::-webkit-scrollbar-thumb, ${t} *::-webkit-scrollbar-thumb` : "*::-webkit-scrollbar-thumb", u = t ? `${t}::-webkit-scrollbar-corner, ${t} *::-webkit-scrollbar-corner` : "*::-webkit-scrollbar-corner", k = t ? `${t}, ${t} *` : "*";
|
|
18
|
+
return /* @__PURE__ */ a(
|
|
19
|
+
Y,
|
|
20
|
+
{
|
|
21
|
+
styles: {
|
|
22
|
+
// Chrome, Safari, Edge
|
|
23
|
+
"@supports selector(::-webkit-scrollbar)": {
|
|
24
|
+
[d]: {
|
|
25
|
+
width: "12px",
|
|
26
|
+
height: "12px"
|
|
47
27
|
},
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
28
|
+
[r]: {
|
|
29
|
+
background: n
|
|
30
|
+
},
|
|
31
|
+
[i]: {
|
|
32
|
+
background: s,
|
|
33
|
+
borderRadius: "6px",
|
|
34
|
+
border: "2px solid",
|
|
35
|
+
borderColor: n,
|
|
36
|
+
backgroundClip: "padding-box",
|
|
37
|
+
"&:hover": {
|
|
38
|
+
background: o.palette.grey[400],
|
|
39
|
+
backgroundClip: "padding-box"
|
|
53
40
|
}
|
|
41
|
+
},
|
|
42
|
+
[u]: {
|
|
43
|
+
background: n
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
// Firefox
|
|
47
|
+
"@supports not selector(::-webkit-scrollbar)": {
|
|
48
|
+
[k]: {
|
|
49
|
+
scrollbarWidth: "auto",
|
|
50
|
+
scrollbarColor: `${s} ${n}`
|
|
54
51
|
}
|
|
55
52
|
}
|
|
56
53
|
}
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
return null;
|
|
54
|
+
}
|
|
55
|
+
);
|
|
60
56
|
}
|
|
61
57
|
let R = !1;
|
|
62
58
|
const j = {};
|
|
63
59
|
function F({
|
|
64
|
-
children:
|
|
65
|
-
theme:
|
|
60
|
+
children: c = null,
|
|
61
|
+
theme: o = se,
|
|
66
62
|
injectFirst: n = !0,
|
|
67
63
|
darkSchemeClass: s = "",
|
|
68
64
|
disableStyleCache: t = !1
|
|
69
65
|
}) {
|
|
70
|
-
const d = g(() => typeof
|
|
66
|
+
const d = g(() => typeof o == "function" || ne(o) ? o : T(o), [o]), r = P(() => t ? /* @__PURE__ */ a(B, {}) : R ? null : (R = !0, /* @__PURE__ */ a(B, {})), [t]), i = P(() => t ? /* @__PURE__ */ a(L, { className: s }) : j[s] ? null : (j[s] = !0, /* @__PURE__ */ a(L, { className: s })), [s, t]);
|
|
71
67
|
return (
|
|
72
68
|
// injectFirst 会影响 makeStyles 自定义样式和 mui styles 覆盖问题
|
|
73
69
|
/* @__PURE__ */ a(q, { injectFirst: n, children: /* @__PURE__ */ K(z, { theme: d, children: [
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
70
|
+
r,
|
|
71
|
+
i,
|
|
72
|
+
c
|
|
77
73
|
] }) })
|
|
78
74
|
);
|
|
79
75
|
}
|
|
80
76
|
function le({
|
|
81
|
-
children:
|
|
82
|
-
theme:
|
|
77
|
+
children: c = null,
|
|
78
|
+
theme: o = void 0,
|
|
83
79
|
prefer: n = void 0,
|
|
84
80
|
disableBlockletTheme: s = !1,
|
|
85
81
|
...t
|
|
86
82
|
}) {
|
|
87
|
-
const d = U(), [
|
|
83
|
+
const d = U(), [r, i] = $(() => D(n)), [u, k] = $(null), m = A(), p = te(), b = W(null), C = Q(d.toggleMode), { run: S } = X(
|
|
88
84
|
(e) => {
|
|
89
85
|
k(e);
|
|
90
86
|
},
|
|
@@ -93,36 +89,36 @@ function le({
|
|
|
93
89
|
}
|
|
94
90
|
), v = g(() => {
|
|
95
91
|
let e = {};
|
|
96
|
-
if (
|
|
97
|
-
const H =
|
|
98
|
-
if (typeof
|
|
92
|
+
if (o) {
|
|
93
|
+
const H = oe(r);
|
|
94
|
+
if (typeof o == "function") {
|
|
99
95
|
const I = H();
|
|
100
|
-
|
|
96
|
+
re(m) ? e = { ...o(m, { mode: r }) } : e = { ...o(I, { mode: r }) };
|
|
101
97
|
} else
|
|
102
|
-
e = { ...
|
|
98
|
+
e = { ...o };
|
|
103
99
|
}
|
|
104
|
-
let l =
|
|
100
|
+
let l = r;
|
|
105
101
|
return u && (l = u.mode || "light", e = J(e, Z(l, u))), M(e, "palette.mode", l), M(e, "mode", l), e;
|
|
106
|
-
}, [
|
|
107
|
-
const e =
|
|
108
|
-
|
|
109
|
-
}, [
|
|
102
|
+
}, [r, o, m, u]), w = g(() => T({ ...v, disableBlockletTheme: !!u || s }), [v, s, u]), E = y(() => {
|
|
103
|
+
const e = r === "light" ? "dark" : "light";
|
|
104
|
+
i(e), sessionStorage.removeItem(h), localStorage.setItem(h, e);
|
|
105
|
+
}, [r, i]), x = y(
|
|
110
106
|
(e) => {
|
|
111
|
-
|
|
107
|
+
r !== e && (i(e), sessionStorage.removeItem(h), localStorage.setItem(h, e));
|
|
112
108
|
},
|
|
113
|
-
[
|
|
109
|
+
[r, i]
|
|
114
110
|
), G = g(
|
|
115
111
|
() => ({
|
|
116
|
-
mode:
|
|
112
|
+
mode: r,
|
|
117
113
|
toggleMode: E,
|
|
118
114
|
changeMode: x,
|
|
119
115
|
prefer: n
|
|
120
116
|
}),
|
|
121
|
-
[
|
|
117
|
+
[r, n, E, x]
|
|
122
118
|
);
|
|
123
119
|
return f(() => {
|
|
124
|
-
|
|
125
|
-
}, [n,
|
|
120
|
+
i(D(n));
|
|
121
|
+
}, [n, i, p.search]), f(() => {
|
|
126
122
|
const e = new URLSearchParams(p.search).get("theme");
|
|
127
123
|
ee(e) && sessionStorage.setItem(h, e);
|
|
128
124
|
}, [p.search]), f(() => {
|
|
@@ -140,17 +136,17 @@ function le({
|
|
|
140
136
|
};
|
|
141
137
|
return window.addEventListener("message", e), () => window.removeEventListener("message", e);
|
|
142
138
|
}, [S]), f(() => {
|
|
143
|
-
C && (
|
|
144
|
-
}, [C,
|
|
139
|
+
C && (r === "dark" ? document.documentElement.setAttribute("data-theme", "dark") : document.documentElement.removeAttribute("data-theme"));
|
|
140
|
+
}, [C, r]), /* @__PURE__ */ a(N, { value: G, children: /* @__PURE__ */ a(F, { theme: w, ...t, children: c }) });
|
|
145
141
|
}
|
|
146
142
|
function ke({
|
|
147
|
-
children:
|
|
148
|
-
prefer:
|
|
143
|
+
children: c = null,
|
|
144
|
+
prefer: o = void 0,
|
|
149
145
|
enableColorScheme: n = !1,
|
|
150
146
|
...s
|
|
151
147
|
}) {
|
|
152
148
|
const { toggleMode: t } = U();
|
|
153
|
-
return n ||
|
|
149
|
+
return n || o || !t ? /* @__PURE__ */ a(le, { prefer: o, ...s, children: c }) : /* @__PURE__ */ a(F, { ...s, children: c });
|
|
154
150
|
}
|
|
155
151
|
export {
|
|
156
152
|
N as ColorSchemeContext,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arcblock/ux",
|
|
3
|
-
"version": "3.1.
|
|
3
|
+
"version": "3.1.24",
|
|
4
4
|
"description": "Common used react components for arcblock products",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -67,16 +67,16 @@
|
|
|
67
67
|
"react": "^19.0.0",
|
|
68
68
|
"react-router-dom": "^6.22.3"
|
|
69
69
|
},
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "4c67bf1252644c938718101c89e921dfaae9035a",
|
|
71
71
|
"dependencies": {
|
|
72
|
-
"@arcblock/bridge": "3.1.
|
|
72
|
+
"@arcblock/bridge": "3.1.24",
|
|
73
73
|
"@arcblock/did": "^1.21.3",
|
|
74
74
|
"@arcblock/did-motif": "^1.1.14",
|
|
75
|
-
"@arcblock/icons": "3.1.
|
|
76
|
-
"@arcblock/nft-display": "3.1.
|
|
77
|
-
"@arcblock/react-hooks": "3.1.
|
|
75
|
+
"@arcblock/icons": "3.1.24",
|
|
76
|
+
"@arcblock/nft-display": "3.1.24",
|
|
77
|
+
"@arcblock/react-hooks": "3.1.24",
|
|
78
78
|
"@blocklet/js-sdk": "^1.16.48",
|
|
79
|
-
"@blocklet/theme": "3.1.
|
|
79
|
+
"@blocklet/theme": "3.1.24",
|
|
80
80
|
"@fontsource/roboto": "~5.1.1",
|
|
81
81
|
"@fontsource/ubuntu-mono": "^5.2.6",
|
|
82
82
|
"@iconify-icons/logos": "^1.2.36",
|
|
@@ -58,72 +58,69 @@ const resolveMode = (prefer?: Prefer): PaletteMode => {
|
|
|
58
58
|
function DarkSchemeStyles({ className = undefined }: { className?: string }) {
|
|
59
59
|
const theme = useTheme();
|
|
60
60
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
61
|
+
const trackColor = 'transparent';
|
|
62
|
+
const thumbColor = theme.palette.grey[300];
|
|
63
|
+
|
|
64
|
+
// 处理作用域选择器
|
|
65
|
+
const prefix = (className || '')
|
|
66
|
+
.trim()
|
|
67
|
+
.split(/\s+/)
|
|
68
|
+
.filter(Boolean)
|
|
69
|
+
.map((c) => (c.startsWith('.') ? c : `.${c}`))
|
|
70
|
+
.join(' ');
|
|
71
|
+
|
|
72
|
+
// 统一滚动条样式
|
|
73
|
+
const webkitScrollbar = prefix
|
|
74
|
+
? `${prefix}::-webkit-scrollbar, ${prefix} *::-webkit-scrollbar`
|
|
75
|
+
: '*::-webkit-scrollbar';
|
|
76
|
+
const webkitTrack = prefix
|
|
77
|
+
? `${prefix}::-webkit-scrollbar-track, ${prefix} *::-webkit-scrollbar-track`
|
|
78
|
+
: '*::-webkit-scrollbar-track';
|
|
79
|
+
const webkitThumb = prefix
|
|
80
|
+
? `${prefix}::-webkit-scrollbar-thumb, ${prefix} *::-webkit-scrollbar-thumb`
|
|
81
|
+
: '*::-webkit-scrollbar-thumb';
|
|
82
|
+
const webKitCorner = prefix
|
|
83
|
+
? `${prefix}::-webkit-scrollbar-corner, ${prefix} *::-webkit-scrollbar-corner`
|
|
84
|
+
: '*::-webkit-scrollbar-corner';
|
|
85
|
+
const firefoxSelector = prefix ? `${prefix}, ${prefix} *` : '*';
|
|
86
86
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
87
|
+
return (
|
|
88
|
+
<GlobalStyles
|
|
89
|
+
styles={{
|
|
90
|
+
// Chrome, Safari, Edge
|
|
91
|
+
'@supports selector(::-webkit-scrollbar)': {
|
|
92
|
+
[webkitScrollbar]: {
|
|
93
|
+
width: '12px',
|
|
94
|
+
height: '12px',
|
|
95
|
+
},
|
|
96
|
+
[webkitTrack]: {
|
|
97
|
+
background: trackColor,
|
|
98
|
+
},
|
|
99
|
+
[webkitThumb]: {
|
|
100
|
+
background: thumbColor,
|
|
101
|
+
borderRadius: '6px',
|
|
102
|
+
border: '2px solid',
|
|
103
|
+
borderColor: trackColor,
|
|
104
|
+
backgroundClip: 'padding-box',
|
|
105
|
+
'&:hover': {
|
|
106
|
+
background: theme.palette.grey[400],
|
|
104
107
|
backgroundClip: 'padding-box',
|
|
105
|
-
'&:hover': {
|
|
106
|
-
background: theme.palette.grey[400],
|
|
107
|
-
backgroundClip: 'padding-box',
|
|
108
|
-
},
|
|
109
|
-
},
|
|
110
|
-
[webKitCorner]: {
|
|
111
|
-
background: trackColor,
|
|
112
108
|
},
|
|
113
109
|
},
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
[firefoxSelector]: {
|
|
117
|
-
scrollbarWidth: 'auto',
|
|
118
|
-
scrollbarColor: `${thumbColor} ${trackColor}`,
|
|
119
|
-
},
|
|
110
|
+
[webKitCorner]: {
|
|
111
|
+
background: trackColor,
|
|
120
112
|
},
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
113
|
+
},
|
|
114
|
+
// Firefox
|
|
115
|
+
'@supports not selector(::-webkit-scrollbar)': {
|
|
116
|
+
[firefoxSelector]: {
|
|
117
|
+
scrollbarWidth: 'auto',
|
|
118
|
+
scrollbarColor: `${thumbColor} ${trackColor}`,
|
|
119
|
+
},
|
|
120
|
+
},
|
|
121
|
+
}}
|
|
122
|
+
/>
|
|
123
|
+
);
|
|
127
124
|
}
|
|
128
125
|
|
|
129
126
|
let injectedCssBaseline = false;
|