@arcblock/ux 3.0.26 → 3.0.27
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/CodeBlock/index.js +70 -67
- package/lib/Config/config-provider.d.ts +1 -1
- package/lib/Config/config-provider.js +22 -20
- package/lib/NavMenu/style.js +1 -1
- package/lib/Tag/index.js +12 -12
- package/lib/Theme/theme-provider.d.ts +4 -2
- package/lib/Theme/theme-provider.js +83 -79
- package/package.json +7 -7
- package/src/CodeBlock/index.tsx +7 -4
- package/src/Config/config-provider.tsx +3 -1
- package/src/NavMenu/style.ts +1 -1
- package/src/Tag/index.jsx +1 -1
- package/src/Theme/Theme.stories.jsx +1 -0
- package/src/Theme/theme-provider.tsx +19 -12
package/lib/CodeBlock/index.js
CHANGED
@@ -1,88 +1,90 @@
|
|
1
|
-
import { jsxs as
|
1
|
+
import { jsxs as i, jsx as o, Fragment as u } from "react/jsx-runtime";
|
2
2
|
import { useState as N } from "react";
|
3
3
|
import C from "copy-to-clipboard";
|
4
4
|
import e from "highlight.js/lib/core";
|
5
|
-
import
|
6
|
-
import
|
5
|
+
import s from "highlight.js/lib/languages/javascript";
|
6
|
+
import l from "highlight.js/lib/languages/typescript";
|
7
7
|
import _ from "highlight.js/lib/languages/json";
|
8
8
|
import z from "highlight.js/lib/languages/elixir";
|
9
9
|
import F from "highlight.js/lib/languages/java";
|
10
10
|
import M from "highlight.js/lib/languages/swift";
|
11
|
-
import
|
11
|
+
import d from "highlight.js/lib/languages/objectivec";
|
12
12
|
import f from "highlight.js/lib/languages/kotlin";
|
13
|
-
import
|
14
|
-
import
|
15
|
-
import
|
16
|
-
import
|
17
|
-
import
|
18
|
-
import
|
13
|
+
import h from "highlight.js/lib/languages/protobuf";
|
14
|
+
import x from "highlight.js/lib/languages/python";
|
15
|
+
import y from "highlight.js/lib/languages/yaml";
|
16
|
+
import L from "highlight.js/lib/languages/shell";
|
17
|
+
import b from "highlight.js/lib/languages/diff";
|
18
|
+
import w from "highlight.js/lib/languages/plaintext";
|
19
19
|
import B from "highlight.js/lib/languages/markdown";
|
20
20
|
import "highlight.js/styles/atom-one-dark.css";
|
21
|
-
import { FileCopy as
|
22
|
-
import
|
23
|
-
import { styled as
|
24
|
-
import
|
25
|
-
e.registerLanguage("javascript",
|
26
|
-
e.registerLanguage("js",
|
27
|
-
e.registerLanguage("jsx",
|
28
|
-
e.registerLanguage("typescript",
|
29
|
-
e.registerLanguage("ts",
|
30
|
-
e.registerLanguage("tsx",
|
21
|
+
import { FileCopy as P, Check as S } from "@mui/icons-material";
|
22
|
+
import t from "../Colors/themes/default.js";
|
23
|
+
import { styled as T } from "../Theme/index.js";
|
24
|
+
import A from "./LightBox.js";
|
25
|
+
e.registerLanguage("javascript", s);
|
26
|
+
e.registerLanguage("js", s);
|
27
|
+
e.registerLanguage("jsx", s);
|
28
|
+
e.registerLanguage("typescript", l);
|
29
|
+
e.registerLanguage("ts", l);
|
30
|
+
e.registerLanguage("tsx", l);
|
31
31
|
e.registerLanguage("json", _);
|
32
32
|
e.registerLanguage("elixir", z);
|
33
33
|
e.registerLanguage("java", F);
|
34
34
|
e.registerLanguage("kotlin", f);
|
35
35
|
e.registerLanguage("kt", f);
|
36
|
-
e.registerLanguage("protobuf",
|
37
|
-
e.registerLanguage("protobuffer",
|
38
|
-
e.registerLanguage("python",
|
39
|
-
e.registerLanguage("py",
|
40
|
-
e.registerLanguage("yaml",
|
41
|
-
e.registerLanguage("yml",
|
42
|
-
e.registerLanguage("shell",
|
43
|
-
e.registerLanguage("sh",
|
44
|
-
e.registerLanguage("plaintext",
|
45
|
-
e.registerLanguage("text",
|
46
|
-
e.registerLanguage("patch",
|
47
|
-
e.registerLanguage("diff",
|
36
|
+
e.registerLanguage("protobuf", h);
|
37
|
+
e.registerLanguage("protobuffer", h);
|
38
|
+
e.registerLanguage("python", x);
|
39
|
+
e.registerLanguage("py", x);
|
40
|
+
e.registerLanguage("yaml", y);
|
41
|
+
e.registerLanguage("yml", y);
|
42
|
+
e.registerLanguage("shell", L);
|
43
|
+
e.registerLanguage("sh", L);
|
44
|
+
e.registerLanguage("plaintext", w);
|
45
|
+
e.registerLanguage("text", w);
|
46
|
+
e.registerLanguage("patch", b);
|
47
|
+
e.registerLanguage("diff", b);
|
48
48
|
e.registerLanguage("swift", M);
|
49
|
-
e.registerLanguage("objectivec",
|
50
|
-
e.registerLanguage("oc",
|
49
|
+
e.registerLanguage("objectivec", d);
|
50
|
+
e.registerLanguage("oc", d);
|
51
51
|
e.registerLanguage("markdown", B);
|
52
|
-
function
|
53
|
-
code:
|
54
|
-
language:
|
52
|
+
function le({
|
53
|
+
code: r = "",
|
54
|
+
language: a = "text",
|
55
55
|
children: k = null,
|
56
56
|
dark: j = !0,
|
57
57
|
...v
|
58
58
|
}) {
|
59
|
-
const [g,
|
60
|
-
g || (C(
|
61
|
-
|
59
|
+
const [g, p] = N(!1), c = r || k, $ = () => {
|
60
|
+
g || (C(c), p(!0), setTimeout(() => {
|
61
|
+
p(!1);
|
62
62
|
}, 1500));
|
63
|
-
}, m = /* @__PURE__ */
|
64
|
-
/* @__PURE__ */
|
63
|
+
}, m = /* @__PURE__ */ i(E, { ...v, children: [
|
64
|
+
/* @__PURE__ */ o("span", { className: "codeblock__inner", children: /* @__PURE__ */ o(
|
65
65
|
"code",
|
66
66
|
{
|
67
|
-
className: `hljs ${
|
68
|
-
dangerouslySetInnerHTML: { __html: e.highlightAuto(
|
67
|
+
className: `hljs ${a}`,
|
68
|
+
dangerouslySetInnerHTML: { __html: e.highlightAuto(c, [a]).value }
|
69
69
|
}
|
70
70
|
) }),
|
71
|
-
/* @__PURE__ */
|
72
|
-
/* @__PURE__ */
|
73
|
-
/* @__PURE__ */
|
74
|
-
/* @__PURE__ */
|
75
|
-
/* @__PURE__ */
|
76
|
-
] }) : /* @__PURE__ */
|
77
|
-
/* @__PURE__ */
|
78
|
-
/* @__PURE__ */
|
71
|
+
/* @__PURE__ */ i("div", { className: "copy-button", onClick: $, children: [
|
72
|
+
/* @__PURE__ */ o("span", { className: "default-text", children: a }),
|
73
|
+
/* @__PURE__ */ o("span", { className: "hover-text", children: g ? /* @__PURE__ */ i(u, { children: [
|
74
|
+
/* @__PURE__ */ o(S, { className: "copy-icon" }),
|
75
|
+
/* @__PURE__ */ o("span", { className: "button-lang-text", children: "copied" })
|
76
|
+
] }) : /* @__PURE__ */ i(u, { children: [
|
77
|
+
/* @__PURE__ */ o(P, { className: "copy-icon" }),
|
78
|
+
/* @__PURE__ */ o("span", { className: "button-lang-text", children: "copy" })
|
79
79
|
] }) })
|
80
80
|
] })
|
81
81
|
] });
|
82
|
-
return j ? m : /* @__PURE__ */
|
82
|
+
return j ? m : /* @__PURE__ */ o(A, { children: m });
|
83
83
|
}
|
84
|
-
const
|
85
|
-
|
84
|
+
const n = "source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace !important", E = T("pre", {
|
85
|
+
shouldForwardProp: (r) => r !== "sx"
|
86
|
+
})`
|
87
|
+
font-family: ${n};
|
86
88
|
display: block;
|
87
89
|
font-size: 14px;
|
88
90
|
line-height: 1.42857143;
|
@@ -91,9 +93,10 @@ const a = "source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace !imp
|
|
91
93
|
word-wrap: break-word;
|
92
94
|
text-align: left;
|
93
95
|
border-radius: 5px;
|
94
|
-
border: 1px solid
|
95
|
-
|
96
|
-
|
96
|
+
border: 1px solid;
|
97
|
+
border-color: ${({ theme: r }) => r.palette.divider};
|
98
|
+
background: ${({ theme: r }) => r.palette.background.default};
|
99
|
+
color: ${({ theme: r }) => r.palette.common.white};
|
97
100
|
position: relative;
|
98
101
|
|
99
102
|
.codeblock__inner {
|
@@ -120,7 +123,7 @@ const a = "source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace !imp
|
|
120
123
|
|
121
124
|
.copy-icon {
|
122
125
|
font-size: 16px;
|
123
|
-
color: ${
|
126
|
+
color: ${t.common.white};
|
124
127
|
}
|
125
128
|
|
126
129
|
.hover-text {
|
@@ -128,20 +131,20 @@ const a = "source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace !imp
|
|
128
131
|
}
|
129
132
|
.default-text {
|
130
133
|
font-size: 12px;
|
131
|
-
color: ${
|
134
|
+
color: ${t.common.white};
|
132
135
|
}
|
133
136
|
}
|
134
137
|
|
135
138
|
&:hover {
|
136
139
|
.copy-button {
|
137
140
|
display: flex;
|
138
|
-
background: ${
|
141
|
+
background: ${t.primary.main};
|
139
142
|
|
140
143
|
.hover-text {
|
141
144
|
display: flex;
|
142
145
|
justify-content: center;
|
143
146
|
align-items: center;
|
144
|
-
color: ${
|
147
|
+
color: ${t.common.white};
|
145
148
|
}
|
146
149
|
.default-text {
|
147
150
|
display: none;
|
@@ -153,17 +156,17 @@ const a = "source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace !imp
|
|
153
156
|
.button-lang-text {
|
154
157
|
margin-left: 4px;
|
155
158
|
font-size: 12px;
|
156
|
-
color: ${
|
159
|
+
color: ${t.common.white};
|
157
160
|
}
|
158
161
|
|
159
162
|
code {
|
160
163
|
counter-reset: line;
|
161
164
|
counter-increment: line;
|
162
165
|
padding: 16px;
|
163
|
-
font-family: ${
|
164
|
-
color: ${
|
166
|
+
font-family: ${n};
|
167
|
+
color: ${t.common.white};
|
165
168
|
* {
|
166
|
-
font-family: ${
|
169
|
+
font-family: ${n};
|
167
170
|
}
|
168
171
|
}
|
169
172
|
|
@@ -172,5 +175,5 @@ const a = "source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace !imp
|
|
172
175
|
}
|
173
176
|
`;
|
174
177
|
export {
|
175
|
-
|
178
|
+
le as default
|
176
179
|
};
|
@@ -8,7 +8,7 @@ export interface ConfigProviderProps extends Omit<LocaleProviderProps, 'translat
|
|
8
8
|
/**
|
9
9
|
* 集中化配置
|
10
10
|
*/
|
11
|
-
export declare function ConfigProvider({ children, theme, injectFirst, darkSchemeClass, prefer, disableBlockletTheme, enableColorScheme, locale, fallbackLocale, translations, languages, onLoadingTranslation, }: ConfigProviderProps): import("react/jsx-runtime").JSX.Element;
|
11
|
+
export declare function ConfigProvider({ children, theme, injectFirst, darkSchemeClass, prefer, disableBlockletTheme, enableColorScheme, disableStyleCache, locale, fallbackLocale, translations, languages, onLoadingTranslation, }: ConfigProviderProps): import("react/jsx-runtime").JSX.Element;
|
12
12
|
export declare function useConfig(): {
|
13
13
|
mode: import('@mui/material').PaletteMode;
|
14
14
|
toggleMode: () => void;
|
@@ -1,9 +1,9 @@
|
|
1
1
|
import { jsx as t } from "react/jsx-runtime";
|
2
|
-
import { LocaleProvider as
|
3
|
-
import
|
4
|
-
import { useTheme as
|
2
|
+
import { LocaleProvider as C, useLocaleContext as x } from "../Locale/context.js";
|
3
|
+
import a, { useColorScheme as d } from "../Theme/theme-provider.js";
|
4
|
+
import { useTheme as v } from "@mui/material";
|
5
5
|
import "../Theme/theme.js";
|
6
|
-
function
|
6
|
+
function j({
|
7
7
|
children: o,
|
8
8
|
// theme provider
|
9
9
|
theme: e,
|
@@ -12,15 +12,16 @@ function T({
|
|
12
12
|
prefer: i,
|
13
13
|
disableBlockletTheme: n = !1,
|
14
14
|
enableColorScheme: c,
|
15
|
+
disableStyleCache: f,
|
15
16
|
// locale provider
|
16
|
-
locale:
|
17
|
-
fallbackLocale:
|
18
|
-
translations:
|
19
|
-
languages:
|
20
|
-
onLoadingTranslation:
|
17
|
+
locale: s,
|
18
|
+
fallbackLocale: l,
|
19
|
+
translations: u = {},
|
20
|
+
languages: h,
|
21
|
+
onLoadingTranslation: p
|
21
22
|
}) {
|
22
23
|
return /* @__PURE__ */ t(
|
23
|
-
|
24
|
+
a,
|
24
25
|
{
|
25
26
|
theme: e,
|
26
27
|
injectFirst: r,
|
@@ -28,22 +29,23 @@ function T({
|
|
28
29
|
prefer: i,
|
29
30
|
disableBlockletTheme: n,
|
30
31
|
enableColorScheme: c,
|
32
|
+
disableStyleCache: f,
|
31
33
|
children: /* @__PURE__ */ t(
|
32
|
-
|
34
|
+
C,
|
33
35
|
{
|
34
|
-
locale:
|
35
|
-
fallbackLocale:
|
36
|
-
translations:
|
37
|
-
onLoadingTranslation:
|
38
|
-
languages:
|
36
|
+
locale: s,
|
37
|
+
fallbackLocale: l,
|
38
|
+
translations: u,
|
39
|
+
onLoadingTranslation: p,
|
40
|
+
languages: h,
|
39
41
|
children: o
|
40
42
|
}
|
41
43
|
)
|
42
44
|
}
|
43
45
|
);
|
44
46
|
}
|
45
|
-
function
|
46
|
-
const o =
|
47
|
+
function b() {
|
48
|
+
const o = v(), e = x(), r = d();
|
47
49
|
return {
|
48
50
|
theme: o,
|
49
51
|
...e,
|
@@ -51,6 +53,6 @@ function j() {
|
|
51
53
|
};
|
52
54
|
}
|
53
55
|
export {
|
54
|
-
|
55
|
-
|
56
|
+
j as ConfigProvider,
|
57
|
+
b as useConfig
|
56
58
|
};
|
package/lib/NavMenu/style.js
CHANGED
package/lib/Tag/index.js
CHANGED
@@ -5,7 +5,7 @@ import n from "lodash/isUndefined";
|
|
5
5
|
import { mergeProps as x } from "../Util/index.js";
|
6
6
|
import e from "../Colors/themes/default.js";
|
7
7
|
import { styled as w } from "../Theme/index.js";
|
8
|
-
const
|
8
|
+
const c = {
|
9
9
|
error: {
|
10
10
|
color: e.common.white,
|
11
11
|
backgroundColor: e.error.main
|
@@ -27,18 +27,18 @@ const i = {
|
|
27
27
|
backgroundColor: "#222"
|
28
28
|
}
|
29
29
|
};
|
30
|
-
function
|
31
|
-
const o = Object.assign({},
|
30
|
+
function p({ ...s }) {
|
31
|
+
const o = Object.assign({}, s);
|
32
32
|
n(o.type) && (o.type = "primary"), n(o.content) && (o.content = ""), n(o.style) && (o.style = {}), n(o.className) && (o.className = "");
|
33
|
-
const
|
34
|
-
return
|
35
|
-
color:
|
36
|
-
backgroundColor:
|
37
|
-
}), /* @__PURE__ */ h(j, { component: "span", className: g, style:
|
33
|
+
const m = x(o, p, ["style"]), { type: t, content: l, children: y, style: f, className: g, ...d } = m, { palette: i } = b(), a = Object.assign({}, c[t] || c.primary, f);
|
34
|
+
return i[t] && Object.assign(a, {
|
35
|
+
color: i[t].contrastText || e.common.white,
|
36
|
+
backgroundColor: i[t].main
|
37
|
+
}), /* @__PURE__ */ h(j, { component: "span", className: g, style: a, ...d, children: l || y });
|
38
38
|
}
|
39
|
-
|
39
|
+
p.propTypes = {
|
40
40
|
children: r.any.isRequired,
|
41
|
-
type: r.oneOf(Object.keys(
|
41
|
+
type: r.oneOf(Object.keys(c)),
|
42
42
|
content: r.string,
|
43
43
|
className: r.string,
|
44
44
|
style: r.oneOfType([r.object, r.string])
|
@@ -53,9 +53,9 @@ const j = w(u)`
|
|
53
53
|
line-height: 20px;
|
54
54
|
font-size: 12px;
|
55
55
|
font-weight: 500;
|
56
|
-
border-radius:
|
56
|
+
border-radius: ${({ theme: s }) => s.shape.borderRadius * 0.5}px;
|
57
57
|
}
|
58
58
|
`;
|
59
59
|
export {
|
60
|
-
|
60
|
+
p as default
|
61
61
|
};
|
@@ -6,18 +6,20 @@ export interface ColorSchemeContextType {
|
|
6
6
|
changeMode: (mode: PaletteMode) => void;
|
7
7
|
prefer?: Prefer;
|
8
8
|
}
|
9
|
-
export declare const ColorSchemeContext: import('react').Context<ColorSchemeContextType>;
|
10
|
-
export declare function useColorScheme(): ColorSchemeContextType;
|
11
9
|
export type UxTheme = ThemeOptions | ((parentTheme: Theme, context?: {
|
12
10
|
mode: PaletteMode;
|
13
11
|
}) => Theme);
|
14
12
|
export type Prefer = 'light' | 'dark' | 'system';
|
13
|
+
export declare const ColorSchemeContext: import('react').Context<ColorSchemeContextType>;
|
14
|
+
export declare function useColorScheme(): ColorSchemeContextType;
|
15
15
|
interface BaseThemeProviderProps {
|
16
16
|
children?: React.ReactNode;
|
17
17
|
theme?: UxTheme;
|
18
18
|
injectFirst?: boolean;
|
19
19
|
/** 指定一个类名,DarkSchemeStyles 只会作用于带有该类的元素及其后代 */
|
20
20
|
darkSchemeClass?: string;
|
21
|
+
/** 禁用样式缓存 */
|
22
|
+
disableStyleCache?: boolean;
|
21
23
|
}
|
22
24
|
interface ColorSchemeProviderProps extends BaseThemeProviderProps {
|
23
25
|
prefer?: Prefer;
|
@@ -1,50 +1,53 @@
|
|
1
|
-
import { jsx 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
|
11
|
-
const
|
12
|
-
function
|
13
|
-
return
|
1
|
+
import { jsx as a, jsxs as K } from "react/jsx-runtime";
|
2
|
+
import { createContext as O, use as V, useState as $, useRef as W, useMemo as g, useCallback as y, useEffect as f } from "react";
|
3
|
+
import { useTheme as A, CssBaseline as B, StyledEngineProvider as q, ThemeProvider as z, GlobalStyles as Y } from "@mui/material";
|
4
|
+
import { deepmerge as J } from "@mui/utils";
|
5
|
+
import M from "lodash/set";
|
6
|
+
import Q from "lodash/isUndefined";
|
7
|
+
import { useDebounceFn as X, useCreation as P } from "ahooks";
|
8
|
+
import { getBlockletThemeOptions as Z, BLOCKLET_THEME_PREFER_KEY as h, isValidThemeMode as ee, getDefaultThemePrefer as _ } from "@blocklet/theme";
|
9
|
+
import { useLocationState as te } from "../hooks/use-location-state.js";
|
10
|
+
import { createTheme as T, lazyCreateDefaultTheme as re, isUxTheme as oe, isTheme as ne } from "./theme.js";
|
11
|
+
const se = T(), N = O({});
|
12
|
+
function U() {
|
13
|
+
return V(N);
|
14
14
|
}
|
15
|
-
const
|
16
|
-
function
|
17
|
-
const
|
18
|
-
if (
|
19
|
-
const n = "transparent", s =
|
20
|
-
return /* @__PURE__ */
|
21
|
-
|
15
|
+
const D = (i) => i ? i === "system" ? _({ theme: { prefer: "system" } }) : i : _();
|
16
|
+
function L({ className: i = void 0 }) {
|
17
|
+
const r = A();
|
18
|
+
if (r.palette.mode === "dark") {
|
19
|
+
const n = "transparent", s = r.palette.grey[300], t = (i || "").trim().split(/\s+/).filter(Boolean).map((m) => m.startsWith(".") ? m : `.${m}`).join(" "), d = t ? `${t}::-webkit-scrollbar, ${t} *::-webkit-scrollbar` : "*::-webkit-scrollbar", o = t ? `${t}::-webkit-scrollbar-track, ${t} *::-webkit-scrollbar-track` : "*::-webkit-scrollbar-track", c = 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} *` : "*";
|
20
|
+
return /* @__PURE__ */ a(
|
21
|
+
Y,
|
22
22
|
{
|
23
23
|
styles: {
|
24
24
|
// Chrome, Safari, Edge
|
25
25
|
"@supports selector(::-webkit-scrollbar)": {
|
26
|
-
[
|
26
|
+
[d]: {
|
27
27
|
width: "12px",
|
28
28
|
height: "12px"
|
29
29
|
},
|
30
|
-
[
|
30
|
+
[o]: {
|
31
31
|
background: n
|
32
32
|
},
|
33
|
-
[
|
33
|
+
[c]: {
|
34
34
|
background: s,
|
35
35
|
borderRadius: "6px",
|
36
36
|
border: "2px solid",
|
37
37
|
borderColor: n,
|
38
38
|
backgroundClip: "padding-box",
|
39
39
|
"&:hover": {
|
40
|
-
background:
|
40
|
+
background: r.palette.grey[400],
|
41
41
|
backgroundClip: "padding-box"
|
42
42
|
}
|
43
|
+
},
|
44
|
+
[u]: {
|
45
|
+
background: n
|
43
46
|
}
|
44
47
|
},
|
45
48
|
// Firefox
|
46
49
|
"@supports not selector(::-webkit-scrollbar)": {
|
47
|
-
[
|
50
|
+
[k]: {
|
48
51
|
scrollbarWidth: "auto",
|
49
52
|
scrollbarColor: `${s} ${n}`
|
50
53
|
}
|
@@ -55,101 +58,102 @@ function se({ className: i = void 0 }) {
|
|
55
58
|
}
|
56
59
|
return null;
|
57
60
|
}
|
58
|
-
let
|
59
|
-
const
|
60
|
-
function
|
61
|
+
let R = !1;
|
62
|
+
const j = {};
|
63
|
+
function F({
|
61
64
|
children: i = null,
|
62
|
-
theme:
|
65
|
+
theme: r = se,
|
63
66
|
injectFirst: n = !0,
|
64
|
-
darkSchemeClass: s = ""
|
67
|
+
darkSchemeClass: s = "",
|
68
|
+
disableStyleCache: t = !1
|
65
69
|
}) {
|
66
|
-
const
|
70
|
+
const d = g(() => typeof r == "function" || ne(r) ? r : T(r), [r]), o = P(() => t ? /* @__PURE__ */ a(B, {}) : R ? null : (R = !0, /* @__PURE__ */ a(B, {})), [t]), c = P(() => t ? /* @__PURE__ */ a(L, { className: s }) : j[s] ? null : (j[s] = !0, /* @__PURE__ */ a(L, { className: s })), [s, t]);
|
67
71
|
return (
|
68
72
|
// injectFirst 会影响 makeStyles 自定义样式和 mui styles 覆盖问题
|
69
|
-
/* @__PURE__ */
|
70
|
-
|
71
|
-
|
73
|
+
/* @__PURE__ */ a(q, { injectFirst: n, children: /* @__PURE__ */ K(z, { theme: d, children: [
|
74
|
+
o,
|
75
|
+
c,
|
72
76
|
i
|
73
77
|
] }) })
|
74
78
|
);
|
75
79
|
}
|
76
80
|
function le({
|
77
81
|
children: i = null,
|
78
|
-
theme:
|
82
|
+
theme: r = void 0,
|
79
83
|
prefer: n = void 0,
|
80
84
|
disableBlockletTheme: s = !1,
|
81
|
-
...
|
85
|
+
...t
|
82
86
|
}) {
|
83
|
-
const
|
87
|
+
const d = U(), [o, c] = $(() => D(n)), [u, k] = $(null), m = A(), p = te(), b = W(null), C = Q(d.toggleMode), { run: S } = X(
|
84
88
|
(e) => {
|
85
|
-
|
89
|
+
k(e);
|
86
90
|
},
|
87
91
|
{
|
88
92
|
wait: 200
|
89
93
|
}
|
90
94
|
), v = g(() => {
|
91
95
|
let e = {};
|
92
|
-
if (
|
93
|
-
const
|
94
|
-
if (typeof
|
95
|
-
const
|
96
|
-
oe(
|
96
|
+
if (r) {
|
97
|
+
const H = re(o);
|
98
|
+
if (typeof r == "function") {
|
99
|
+
const I = H();
|
100
|
+
oe(m) ? e = { ...r(m, { mode: o }) } : e = { ...r(I, { mode: o }) };
|
97
101
|
} else
|
98
|
-
e = { ...
|
102
|
+
e = { ...r };
|
99
103
|
}
|
100
|
-
let l =
|
101
|
-
return
|
102
|
-
}, [
|
103
|
-
const e =
|
104
|
-
|
105
|
-
}, [
|
104
|
+
let l = o;
|
105
|
+
return u && (l = u.mode || "light", e = J(e, Z(l, u))), M(e, "palette.mode", l), M(e, "mode", l), e;
|
106
|
+
}, [o, r, m, u]), w = g(() => T({ ...v, disableBlockletTheme: !!u || s }), [v, s, u]), E = y(() => {
|
107
|
+
const e = o === "light" ? "dark" : "light";
|
108
|
+
c(e), sessionStorage.removeItem(h), localStorage.setItem(h, e);
|
109
|
+
}, [o, c]), x = y(
|
106
110
|
(e) => {
|
107
|
-
|
111
|
+
o !== e && (c(e), sessionStorage.removeItem(h), localStorage.setItem(h, e));
|
108
112
|
},
|
109
|
-
[
|
110
|
-
),
|
113
|
+
[o, c]
|
114
|
+
), G = g(
|
111
115
|
() => ({
|
112
|
-
mode:
|
116
|
+
mode: o,
|
113
117
|
toggleMode: E,
|
114
|
-
changeMode:
|
118
|
+
changeMode: x,
|
115
119
|
prefer: n
|
116
120
|
}),
|
117
|
-
[
|
121
|
+
[o, n, E, x]
|
118
122
|
);
|
119
|
-
return
|
120
|
-
|
121
|
-
}, [n,
|
122
|
-
const e = new URLSearchParams(
|
123
|
-
|
124
|
-
}, [
|
125
|
-
|
126
|
-
const e =
|
127
|
-
if (
|
128
|
-
|
123
|
+
return f(() => {
|
124
|
+
c(D(n));
|
125
|
+
}, [n, c, p.search]), f(() => {
|
126
|
+
const e = new URLSearchParams(p.search).get("theme");
|
127
|
+
ee(e) && sessionStorage.setItem(h, e);
|
128
|
+
}, [p.search]), f(() => {
|
129
|
+
b.current || (b.current = document.querySelector('meta[name="theme-color"]'));
|
130
|
+
const e = w.palette.background.default;
|
131
|
+
if (b.current)
|
132
|
+
b.current.setAttribute("content", e);
|
129
133
|
else {
|
130
134
|
const l = document.createElement("meta");
|
131
|
-
l.name = "theme-color", l.content = e, document.head.appendChild(l),
|
135
|
+
l.name = "theme-color", l.content = e, document.head.appendChild(l), b.current = l;
|
132
136
|
}
|
133
|
-
}, [
|
137
|
+
}, [w.palette.background.default]), f(() => {
|
134
138
|
const e = (l) => {
|
135
|
-
l.origin === window.origin && l.data.type === "THEME_BUILDER_CONFIG_CHANGED" &&
|
139
|
+
l.origin === window.origin && l.data.type === "THEME_BUILDER_CONFIG_CHANGED" && S(l.data.payload);
|
136
140
|
};
|
137
141
|
return window.addEventListener("message", e), () => window.removeEventListener("message", e);
|
138
|
-
}, [
|
139
|
-
|
140
|
-
}, [
|
142
|
+
}, [S]), f(() => {
|
143
|
+
C && (o === "dark" ? document.documentElement.setAttribute("data-theme", "dark") : document.documentElement.removeAttribute("data-theme"));
|
144
|
+
}, [C, o]), /* @__PURE__ */ a(N, { value: G, children: /* @__PURE__ */ a(F, { theme: w, ...t, children: i }) });
|
141
145
|
}
|
142
|
-
function
|
146
|
+
function ke({
|
143
147
|
children: i = null,
|
144
|
-
prefer:
|
148
|
+
prefer: r = void 0,
|
145
149
|
enableColorScheme: n = !1,
|
146
150
|
...s
|
147
151
|
}) {
|
148
|
-
const { toggleMode:
|
149
|
-
return n ||
|
152
|
+
const { toggleMode: t } = U();
|
153
|
+
return n || r || !t ? /* @__PURE__ */ a(le, { prefer: r, ...s, children: i }) : /* @__PURE__ */ a(F, { ...s, children: i });
|
150
154
|
}
|
151
155
|
export {
|
152
|
-
|
153
|
-
|
154
|
-
|
156
|
+
N as ColorSchemeContext,
|
157
|
+
ke as default,
|
158
|
+
U as useColorScheme
|
155
159
|
};
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@arcblock/ux",
|
3
|
-
"version": "3.0.
|
3
|
+
"version": "3.0.27",
|
4
4
|
"description": "Common used react components for arcblock products",
|
5
5
|
"keywords": [
|
6
6
|
"react",
|
@@ -60,16 +60,16 @@
|
|
60
60
|
"react": "^19.0.0",
|
61
61
|
"react-router-dom": "^6.22.3"
|
62
62
|
},
|
63
|
-
"gitHead": "
|
63
|
+
"gitHead": "b1e137e0c74f4b58af16b1d75a65166b163cf65d",
|
64
64
|
"dependencies": {
|
65
|
-
"@arcblock/bridge": "3.0.
|
65
|
+
"@arcblock/bridge": "3.0.27",
|
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.
|
68
|
+
"@arcblock/icons": "3.0.27",
|
69
|
+
"@arcblock/nft-display": "3.0.27",
|
70
|
+
"@arcblock/react-hooks": "3.0.27",
|
71
71
|
"@blocklet/js-sdk": "^1.16.46",
|
72
|
-
"@blocklet/theme": "3.0.
|
72
|
+
"@blocklet/theme": "3.0.27",
|
73
73
|
"@fontsource/roboto": "~5.1.1",
|
74
74
|
"@fontsource/ubuntu-mono": "^5.2.6",
|
75
75
|
"@iconify-icons/logos": "^1.2.36",
|
package/src/CodeBlock/index.tsx
CHANGED
@@ -120,7 +120,9 @@ export default function CodeBlock({
|
|
120
120
|
}
|
121
121
|
|
122
122
|
const fontFamily = 'source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace !important';
|
123
|
-
const Pre = styled('pre'
|
123
|
+
const Pre = styled('pre', {
|
124
|
+
shouldForwardProp: (prop) => prop !== 'sx',
|
125
|
+
})`
|
124
126
|
font-family: ${fontFamily};
|
125
127
|
display: block;
|
126
128
|
font-size: 14px;
|
@@ -130,9 +132,10 @@ const Pre = styled('pre')`
|
|
130
132
|
word-wrap: break-word;
|
131
133
|
text-align: left;
|
132
134
|
border-radius: 5px;
|
133
|
-
border: 1px solid
|
134
|
-
|
135
|
-
|
135
|
+
border: 1px solid;
|
136
|
+
border-color: ${({ theme }) => theme.palette.divider};
|
137
|
+
background: ${({ theme }) => theme.palette.background.default};
|
138
|
+
color: ${({ theme }) => theme.palette.common.white};
|
136
139
|
position: relative;
|
137
140
|
|
138
141
|
.codeblock__inner {
|
@@ -20,6 +20,7 @@ export function ConfigProvider({
|
|
20
20
|
prefer,
|
21
21
|
disableBlockletTheme = false,
|
22
22
|
enableColorScheme,
|
23
|
+
disableStyleCache,
|
23
24
|
// locale provider
|
24
25
|
locale,
|
25
26
|
fallbackLocale,
|
@@ -34,7 +35,8 @@ export function ConfigProvider({
|
|
34
35
|
darkSchemeClass={darkSchemeClass}
|
35
36
|
prefer={prefer}
|
36
37
|
disableBlockletTheme={disableBlockletTheme}
|
37
|
-
enableColorScheme={enableColorScheme}
|
38
|
+
enableColorScheme={enableColorScheme}
|
39
|
+
disableStyleCache={disableStyleCache}>
|
38
40
|
<LocaleProvider
|
39
41
|
locale={locale}
|
40
42
|
fallbackLocale={fallbackLocale}
|
package/src/NavMenu/style.ts
CHANGED
@@ -141,7 +141,7 @@ export const NavMenuItem = styled('li', {
|
|
141
141
|
'.navmenu-item__desc': {
|
142
142
|
fontSize: '12px',
|
143
143
|
lineHeight: 1,
|
144
|
-
color: theme.palette.
|
144
|
+
color: theme.palette.text.secondary,
|
145
145
|
},
|
146
146
|
'&:hover': {
|
147
147
|
background: theme.palette.action.hover,
|
package/src/Tag/index.jsx
CHANGED
@@ -4,6 +4,7 @@ export { default as Shadows } from './demo/shadows';
|
|
4
4
|
export { default as WithCustomKey } from './demo/with-custom-key';
|
5
5
|
export { default as CustomFonts } from './demo/custom-fonts';
|
6
6
|
export { default as UrlTheme } from './demo/url-theme';
|
7
|
+
export { default as CodeBlock } from './demo/code-block';
|
7
8
|
|
8
9
|
export default {
|
9
10
|
title: 'Theme/Theme',
|
@@ -33,6 +33,8 @@ export interface ColorSchemeContextType {
|
|
33
33
|
changeMode: (mode: PaletteMode) => void;
|
34
34
|
prefer?: Prefer;
|
35
35
|
}
|
36
|
+
export type UxTheme = ThemeOptions | ((parentTheme: Theme, context?: { mode: PaletteMode }) => Theme);
|
37
|
+
export type Prefer = 'light' | 'dark' | 'system';
|
36
38
|
|
37
39
|
export const ColorSchemeContext = createContext<ColorSchemeContextType>({} as ColorSchemeContextType);
|
38
40
|
export function useColorScheme() {
|
@@ -77,6 +79,9 @@ function DarkSchemeStyles({ className = undefined }: { className?: string }) {
|
|
77
79
|
const webkitThumb = prefix
|
78
80
|
? `${prefix}::-webkit-scrollbar-thumb, ${prefix} *::-webkit-scrollbar-thumb`
|
79
81
|
: '*::-webkit-scrollbar-thumb';
|
82
|
+
const webKitCorner = prefix
|
83
|
+
? `${prefix}::-webkit-scrollbar-corner, ${prefix} *::-webkit-scrollbar-corner`
|
84
|
+
: '*::-webkit-scrollbar-corner';
|
80
85
|
const firefoxSelector = prefix ? `${prefix}, ${prefix} *` : '*';
|
81
86
|
|
82
87
|
return (
|
@@ -102,6 +107,9 @@ function DarkSchemeStyles({ className = undefined }: { className?: string }) {
|
|
102
107
|
backgroundClip: 'padding-box',
|
103
108
|
},
|
104
109
|
},
|
110
|
+
[webKitCorner]: {
|
111
|
+
background: trackColor,
|
112
|
+
},
|
105
113
|
},
|
106
114
|
// Firefox
|
107
115
|
'@supports not selector(::-webkit-scrollbar)': {
|
@@ -118,8 +126,8 @@ function DarkSchemeStyles({ className = undefined }: { className?: string }) {
|
|
118
126
|
return null;
|
119
127
|
}
|
120
128
|
|
121
|
-
|
122
|
-
|
129
|
+
let injectedCssBaseline = false;
|
130
|
+
const injectedDarkSchemeStylesMap: Record<string, boolean> = {};
|
123
131
|
|
124
132
|
interface BaseThemeProviderProps {
|
125
133
|
children?: React.ReactNode;
|
@@ -127,17 +135,16 @@ interface BaseThemeProviderProps {
|
|
127
135
|
injectFirst?: boolean;
|
128
136
|
/** 指定一个类名,DarkSchemeStyles 只会作用于带有该类的元素及其后代 */
|
129
137
|
darkSchemeClass?: string;
|
138
|
+
/** 禁用样式缓存 */
|
139
|
+
disableStyleCache?: boolean;
|
130
140
|
}
|
131
|
-
|
132
|
-
let injectedCssBaseline = false;
|
133
|
-
const injectedDarkSchemeStylesMap: Record<string, boolean> = {};
|
134
|
-
|
135
141
|
/** 快速配置 MUI 主题 */
|
136
142
|
function BaseThemeProvider({
|
137
143
|
children = null,
|
138
144
|
theme = defaultTheme,
|
139
145
|
injectFirst = true,
|
140
146
|
darkSchemeClass = '',
|
147
|
+
disableStyleCache = false,
|
141
148
|
}: BaseThemeProviderProps) {
|
142
149
|
const _theme = useMemo(() => {
|
143
150
|
if (typeof theme === 'function') {
|
@@ -151,18 +158,20 @@ function BaseThemeProvider({
|
|
151
158
|
}, [theme]);
|
152
159
|
|
153
160
|
const cssBaseline = useCreation(() => {
|
154
|
-
if (
|
161
|
+
if (disableStyleCache) return <CssBaseline />;
|
155
162
|
|
163
|
+
if (injectedCssBaseline) return null;
|
156
164
|
injectedCssBaseline = true;
|
157
165
|
return <CssBaseline />;
|
158
|
-
}, []);
|
166
|
+
}, [disableStyleCache]);
|
159
167
|
|
160
168
|
const darkSchemeStyles = useCreation(() => {
|
161
|
-
if (
|
169
|
+
if (disableStyleCache) return <DarkSchemeStyles className={darkSchemeClass} />;
|
162
170
|
|
171
|
+
if (injectedDarkSchemeStylesMap[darkSchemeClass]) return null;
|
163
172
|
injectedDarkSchemeStylesMap[darkSchemeClass] = true;
|
164
173
|
return <DarkSchemeStyles className={darkSchemeClass} />;
|
165
|
-
}, [darkSchemeClass]);
|
174
|
+
}, [darkSchemeClass, disableStyleCache]);
|
166
175
|
|
167
176
|
return (
|
168
177
|
// injectFirst 会影响 makeStyles 自定义样式和 mui styles 覆盖问题
|
@@ -180,7 +189,6 @@ interface ColorSchemeProviderProps extends BaseThemeProviderProps {
|
|
180
189
|
prefer?: Prefer;
|
181
190
|
disableBlockletTheme?: boolean;
|
182
191
|
}
|
183
|
-
|
184
192
|
/** 配置带颜色模式切换功能的 MUI 主题 */
|
185
193
|
function ColorSchemeProvider({
|
186
194
|
children = null,
|
@@ -349,7 +357,6 @@ export interface ThemeProviderProps extends ColorSchemeProviderProps {
|
|
349
357
|
*/
|
350
358
|
enableColorScheme?: boolean;
|
351
359
|
}
|
352
|
-
|
353
360
|
export default function ThemeProvider({
|
354
361
|
children = null,
|
355
362
|
prefer = undefined,
|