@arcblock/ux 3.0.20 → 3.0.22
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/Passport/passport.js +6 -6
- package/lib/SocialShare/index.d.ts +13 -0
- package/lib/SocialShare/index.js +140 -0
- package/lib/Theme/theme-provider.js +76 -73
- package/lib/index.d.ts +2 -1
- package/lib/index.js +38 -36
- package/package.json +8 -7
- package/src/ContactForm/index.tsx +0 -2
- package/src/Footer/index.tsx +0 -1
- package/src/Header/header.tsx +0 -1
- package/src/Layout/dashboard/sidebar.tsx +0 -1
- package/src/Layout/dashboard-legacy/header.tsx +0 -2
- package/src/Layout/dashboard-legacy/sidebar.tsx +0 -1
- package/src/Passport/passport.tsx +2 -2
- package/src/SessionUser/components/session-user-switch.tsx +0 -1
- package/src/SocialShare/index.tsx +194 -0
- package/src/Theme/theme-provider.tsx +14 -0
- package/src/index.ts +2 -0
- package/src/withTheme/index.tsx +0 -1
package/lib/Passport/passport.js
CHANGED
@@ -2,8 +2,8 @@ import { jsxs as r, jsx as l } from "react/jsx-runtime";
|
|
2
2
|
import f from "lodash/upperFirst";
|
3
3
|
import { Box as i } from "@mui/material";
|
4
4
|
import x from "@arcblock/icons/lib/RevokeIcon";
|
5
|
-
import
|
6
|
-
import { useLocaleContext as
|
5
|
+
import y from "../NFTDisplay/index.js";
|
6
|
+
import { useLocaleContext as u } from "../Locale/context.js";
|
7
7
|
function b({
|
8
8
|
passport: e,
|
9
9
|
user: a,
|
@@ -15,7 +15,7 @@ function b({
|
|
15
15
|
children: d,
|
16
16
|
...m
|
17
17
|
}) {
|
18
|
-
const { t: c } =
|
18
|
+
const { t: c } = u();
|
19
19
|
return /* @__PURE__ */ r(
|
20
20
|
i,
|
21
21
|
{
|
@@ -27,7 +27,7 @@ function b({
|
|
27
27
|
},
|
28
28
|
children: [
|
29
29
|
!!e.display && /* @__PURE__ */ l(i, { className: "passport-item__display", sx: { width: t }, children: /* @__PURE__ */ l(
|
30
|
-
|
30
|
+
y,
|
31
31
|
{
|
32
32
|
address: e.id,
|
33
33
|
data: e.display,
|
@@ -76,7 +76,7 @@ function b({
|
|
76
76
|
fontWeight: 400,
|
77
77
|
fontSize: "16px",
|
78
78
|
lineHeight: 1.1875,
|
79
|
-
color: "
|
79
|
+
color: "text.primary"
|
80
80
|
},
|
81
81
|
children: [
|
82
82
|
f(e.title),
|
@@ -110,7 +110,7 @@ function b({
|
|
110
110
|
fontWeight: 400,
|
111
111
|
fontSize: "16px",
|
112
112
|
lineHeight: 1.1875,
|
113
|
-
color: "
|
113
|
+
color: "text.primary"
|
114
114
|
},
|
115
115
|
children: c("team.passport.validUntil", { date: e.expirationDate })
|
116
116
|
}
|
@@ -0,0 +1,13 @@
|
|
1
|
+
/**
|
2
|
+
* 社交媒体共享组件
|
3
|
+
*/
|
4
|
+
export interface SharedProps {
|
5
|
+
title: string;
|
6
|
+
url: string;
|
7
|
+
}
|
8
|
+
export default function SocialShare({ anchorEl, onClose, sharedProps, locale, }: {
|
9
|
+
anchorEl: HTMLElement | null;
|
10
|
+
onClose: () => void;
|
11
|
+
sharedProps: SharedProps;
|
12
|
+
locale?: string;
|
13
|
+
}): import("react/jsx-runtime").JSX.Element;
|
@@ -0,0 +1,140 @@
|
|
1
|
+
import { jsxs as i, jsx as e } from "react/jsx-runtime";
|
2
|
+
import { useTheme as y, Menu as I, MenuItem as c, Box as n } from "@mui/material";
|
3
|
+
import { useMemoizedFn as S } from "ahooks";
|
4
|
+
import { Icon as B } from "@iconify/react";
|
5
|
+
import { TwitterShareButton as L, XIcon as w, TelegramShareButton as T, TelegramIcon as C, RedditShareButton as F, RedditIcon as R, WeiboShareButton as j, WeiboIcon as z, FacebookShareButton as M, FacebookIcon as W, LinkedinShareButton as v, LinkedinIcon as O } from "react-share";
|
6
|
+
import P from "../Toast/index.js";
|
7
|
+
import { translate as X } from "../Locale/util.js";
|
8
|
+
const a = {
|
9
|
+
display: "flex",
|
10
|
+
alignItems: "center",
|
11
|
+
width: "100%",
|
12
|
+
"& > button": {
|
13
|
+
display: "flex",
|
14
|
+
alignItems: "center",
|
15
|
+
width: "100%",
|
16
|
+
justifyContent: "flex-start"
|
17
|
+
}
|
18
|
+
}, H = {
|
19
|
+
en: {
|
20
|
+
copyLink: "Copy Link",
|
21
|
+
x: "X",
|
22
|
+
telegram: "Telegram",
|
23
|
+
reddit: "Reddit",
|
24
|
+
facebook: "Facebook",
|
25
|
+
weiBo: "Weibo",
|
26
|
+
linkedin: "LinkedIn",
|
27
|
+
copySuccess: "Link copied to clipboard"
|
28
|
+
},
|
29
|
+
zh: {
|
30
|
+
copyLink: "复制链接",
|
31
|
+
x: "X",
|
32
|
+
telegram: "Telegram",
|
33
|
+
reddit: "Reddit",
|
34
|
+
facebook: "Facebook",
|
35
|
+
weiBo: "微博",
|
36
|
+
linkedin: "LinkedIn",
|
37
|
+
copySuccess: "链接已复制到剪贴板"
|
38
|
+
}
|
39
|
+
}, l = {
|
40
|
+
display: "flex",
|
41
|
+
alignItems: "center",
|
42
|
+
gap: 1.5,
|
43
|
+
minWidth: 120,
|
44
|
+
lineHeight: "1!important"
|
45
|
+
}, s = (h) => ({
|
46
|
+
display: "flex",
|
47
|
+
alignItems: "center",
|
48
|
+
justifyContent: "center",
|
49
|
+
width: 22,
|
50
|
+
height: 22,
|
51
|
+
border: 1,
|
52
|
+
borderColor: h.palette.text.secondary,
|
53
|
+
borderRadius: 0.75
|
54
|
+
});
|
55
|
+
function Q({
|
56
|
+
anchorEl: h,
|
57
|
+
onClose: o,
|
58
|
+
sharedProps: u,
|
59
|
+
locale: x = "en"
|
60
|
+
}) {
|
61
|
+
const m = y(), k = !!h, t = S((f, g = {}) => X(H, f, x, "en", g)), d = {
|
62
|
+
bgStyle: { fill: m.palette.background.paper },
|
63
|
+
iconFillColor: m.palette.text.secondary
|
64
|
+
}, { title: p, url: r } = u, b = () => {
|
65
|
+
r && navigator.clipboard.writeText(r).then(() => {
|
66
|
+
P.success(t("copySuccess"));
|
67
|
+
});
|
68
|
+
};
|
69
|
+
return /* @__PURE__ */ i(
|
70
|
+
I,
|
71
|
+
{
|
72
|
+
id: "basic-menu",
|
73
|
+
anchorEl: h,
|
74
|
+
open: k,
|
75
|
+
onClose: o,
|
76
|
+
anchorOrigin: {
|
77
|
+
vertical: "top",
|
78
|
+
horizontal: "right"
|
79
|
+
},
|
80
|
+
transformOrigin: {
|
81
|
+
vertical: "top",
|
82
|
+
horizontal: "left"
|
83
|
+
},
|
84
|
+
sx: {
|
85
|
+
"& .MuiPaper-root": {
|
86
|
+
marginTop: "-140px"
|
87
|
+
// 向上移动菜单
|
88
|
+
}
|
89
|
+
},
|
90
|
+
slotProps: {
|
91
|
+
paper: {
|
92
|
+
"aria-labelledby": "basic-button"
|
93
|
+
}
|
94
|
+
},
|
95
|
+
children: [
|
96
|
+
/* @__PURE__ */ e(
|
97
|
+
c,
|
98
|
+
{
|
99
|
+
onClick: () => {
|
100
|
+
b(), o();
|
101
|
+
},
|
102
|
+
sx: a,
|
103
|
+
children: /* @__PURE__ */ i(n, { sx: l, children: [
|
104
|
+
/* @__PURE__ */ e(n, { sx: s, children: /* @__PURE__ */ e(B, { icon: "tabler:link" }) }),
|
105
|
+
/* @__PURE__ */ e("span", { children: t("copyLink") })
|
106
|
+
] })
|
107
|
+
},
|
108
|
+
"copy-to-clipboard"
|
109
|
+
),
|
110
|
+
/* @__PURE__ */ e(c, { onClick: o, sx: a, children: /* @__PURE__ */ i(n, { component: L, url: r, title: p, sx: l, children: [
|
111
|
+
/* @__PURE__ */ e(n, { component: w, sx: s, round: !0, ...d }),
|
112
|
+
/* @__PURE__ */ e("span", { children: t("x") })
|
113
|
+
] }) }, "share-to-x"),
|
114
|
+
/* @__PURE__ */ e(c, { onClick: o, sx: a, children: /* @__PURE__ */ i(n, { component: T, url: r, title: p, sx: l, children: [
|
115
|
+
/* @__PURE__ */ e(n, { component: C, sx: s, round: !0, ...d }),
|
116
|
+
/* @__PURE__ */ e("span", { children: t("telegram") })
|
117
|
+
] }) }, "share-to-telegram"),
|
118
|
+
/* @__PURE__ */ e(c, { onClick: o, sx: a, children: /* @__PURE__ */ i(n, { component: F, url: r, title: p, sx: l, children: [
|
119
|
+
/* @__PURE__ */ e(n, { component: R, sx: s, round: !0, ...d }),
|
120
|
+
/* @__PURE__ */ e("span", { children: t("reddit") })
|
121
|
+
] }) }, "share-to-reddit"),
|
122
|
+
/* @__PURE__ */ e(c, { onClick: o, sx: a, children: /* @__PURE__ */ i(n, { component: j, url: r, title: p, sx: l, children: [
|
123
|
+
/* @__PURE__ */ e(n, { component: z, sx: s, round: !0, ...d }),
|
124
|
+
/* @__PURE__ */ e("span", { children: t("weiBo") })
|
125
|
+
] }) }, "share-to-weibo"),
|
126
|
+
/* @__PURE__ */ e(c, { onClick: o, sx: a, children: /* @__PURE__ */ i(n, { component: M, url: r, title: p, sx: l, children: [
|
127
|
+
/* @__PURE__ */ e(n, { component: W, sx: s, round: !0, ...d }),
|
128
|
+
/* @__PURE__ */ e("span", { children: t("facebook") })
|
129
|
+
] }) }, "share-to-facebook"),
|
130
|
+
/* @__PURE__ */ e(c, { onClick: o, sx: a, children: /* @__PURE__ */ i(n, { component: v, url: r, title: p, sx: l, children: [
|
131
|
+
/* @__PURE__ */ e(n, { component: O, sx: s, round: !0, ...d }),
|
132
|
+
/* @__PURE__ */ e("span", { children: t("linkedin") })
|
133
|
+
] }) }, "share-to-linkedin")
|
134
|
+
]
|
135
|
+
}
|
136
|
+
);
|
137
|
+
}
|
138
|
+
export {
|
139
|
+
Q as default
|
140
|
+
};
|
@@ -1,39 +1,40 @@
|
|
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 {
|
8
|
-
import {
|
9
|
-
import {
|
10
|
-
|
11
|
-
|
12
|
-
|
1
|
+
import { jsx as m, jsxs as F } from "react/jsx-runtime";
|
2
|
+
import { createContext as G, use as H, useState as y, useRef as I, useMemo as f, useCallback as $, useEffect as b } from "react";
|
3
|
+
import { useTheme as _, StyledEngineProvider as N, ThemeProvider as O, CssBaseline as K, GlobalStyles as V } from "@mui/material";
|
4
|
+
import { deepmerge as W } from "@mui/utils";
|
5
|
+
import B from "lodash/set";
|
6
|
+
import q from "lodash/isUndefined";
|
7
|
+
import { useDebounceFn as z } from "ahooks";
|
8
|
+
import { getBlockletThemeOptions as Y, BLOCKLET_THEME_PREFER_KEY as h, isValidThemeMode as J, getDefaultThemePrefer as M } from "@blocklet/theme";
|
9
|
+
import { useLocationState as Q } from "../hooks/use-location-state.js";
|
10
|
+
import { createTheme as C, lazyCreateDefaultTheme as X, isUxTheme as Z, isTheme as ee } from "./theme.js";
|
11
|
+
const te = C(), L = G({});
|
12
|
+
function R() {
|
13
|
+
return H(L);
|
13
14
|
}
|
14
|
-
const
|
15
|
-
function
|
16
|
-
const t =
|
15
|
+
const P = (l) => l ? l === "system" ? M({ theme: { prefer: "system" } }) : l : M();
|
16
|
+
function oe({ className: l = void 0 }) {
|
17
|
+
const t = _();
|
17
18
|
if (t.palette.mode === "dark") {
|
18
|
-
const
|
19
|
+
const n = "transparent", a = t.palette.grey[300], o = (l || "").trim().split(/\s+/).filter(Boolean).map((u) => u.startsWith(".") ? u : `.${u}`).join(" "), g = o ? `${o}::-webkit-scrollbar, ${o} *::-webkit-scrollbar` : "*::-webkit-scrollbar", r = o ? `${o}::-webkit-scrollbar-track, ${o} *::-webkit-scrollbar-track` : "*::-webkit-scrollbar-track", i = o ? `${o}::-webkit-scrollbar-thumb, ${o} *::-webkit-scrollbar-thumb` : "*::-webkit-scrollbar-thumb", c = o ? `${o}, ${o} *` : "*";
|
19
20
|
return /* @__PURE__ */ m(
|
20
|
-
|
21
|
+
V,
|
21
22
|
{
|
22
23
|
styles: {
|
23
24
|
// Chrome, Safari, Edge
|
24
25
|
"@supports selector(::-webkit-scrollbar)": {
|
25
|
-
[
|
26
|
+
[g]: {
|
26
27
|
width: "12px",
|
27
28
|
height: "12px"
|
28
29
|
},
|
29
|
-
[
|
30
|
-
background:
|
30
|
+
[r]: {
|
31
|
+
background: n
|
31
32
|
},
|
32
|
-
[
|
33
|
+
[i]: {
|
33
34
|
background: a,
|
34
35
|
borderRadius: "6px",
|
35
36
|
border: "2px solid",
|
36
|
-
borderColor:
|
37
|
+
borderColor: n,
|
37
38
|
backgroundClip: "padding-box",
|
38
39
|
"&:hover": {
|
39
40
|
background: t.palette.grey[400],
|
@@ -43,9 +44,9 @@ function Z({ className: l = void 0 }) {
|
|
43
44
|
},
|
44
45
|
// Firefox
|
45
46
|
"@supports not selector(::-webkit-scrollbar)": {
|
46
|
-
[
|
47
|
+
[c]: {
|
47
48
|
scrollbarWidth: "auto",
|
48
|
-
scrollbarColor: `${a} ${
|
49
|
+
scrollbarColor: `${a} ${n}`
|
49
50
|
}
|
50
51
|
}
|
51
52
|
}
|
@@ -54,97 +55,99 @@ function Z({ className: l = void 0 }) {
|
|
54
55
|
}
|
55
56
|
return null;
|
56
57
|
}
|
57
|
-
function
|
58
|
+
function D({
|
58
59
|
children: l = null,
|
59
|
-
theme: t =
|
60
|
-
injectFirst:
|
60
|
+
theme: t = te,
|
61
|
+
injectFirst: n = !0,
|
61
62
|
darkSchemeClass: a = ""
|
62
63
|
}) {
|
63
|
-
const o = f(() => typeof t == "function" ||
|
64
|
+
const o = f(() => typeof t == "function" || ee(t) ? t : C(t), [t]);
|
64
65
|
return (
|
65
66
|
// injectFirst 会影响 makeStyles 自定义样式和 mui styles 覆盖问题
|
66
|
-
/* @__PURE__ */ m(
|
67
|
-
/* @__PURE__ */ m(
|
68
|
-
/* @__PURE__ */ m(
|
67
|
+
/* @__PURE__ */ m(N, { injectFirst: n, children: /* @__PURE__ */ F(O, { theme: o, children: [
|
68
|
+
/* @__PURE__ */ m(K, {}),
|
69
|
+
/* @__PURE__ */ m(oe, { className: a }),
|
69
70
|
l
|
70
71
|
] }) })
|
71
72
|
);
|
72
73
|
}
|
73
|
-
function
|
74
|
+
function re({
|
74
75
|
children: l = null,
|
75
76
|
theme: t = void 0,
|
76
|
-
prefer:
|
77
|
+
prefer: n = void 0,
|
77
78
|
disableBlockletTheme: a = !1,
|
78
79
|
...o
|
79
80
|
}) {
|
80
|
-
const [
|
81
|
+
const g = R(), [r, i] = y(() => P(n)), [c, u] = y(null), k = _(), p = Q(), d = I(null), w = q(g.toggleMode), { run: S } = z(
|
81
82
|
(e) => {
|
82
|
-
|
83
|
+
u(e);
|
83
84
|
},
|
84
85
|
{
|
85
86
|
wait: 200
|
86
87
|
}
|
87
|
-
),
|
88
|
+
), v = f(() => {
|
88
89
|
let e = {};
|
89
90
|
if (t) {
|
90
|
-
const
|
91
|
+
const U = X(r);
|
91
92
|
if (typeof t == "function") {
|
92
|
-
const
|
93
|
-
|
93
|
+
const j = U();
|
94
|
+
Z(k) ? e = { ...t(k, { mode: r }) } : e = { ...t(j, { mode: r }) };
|
94
95
|
} else
|
95
96
|
e = { ...t };
|
96
97
|
}
|
97
|
-
let
|
98
|
-
return c && (
|
99
|
-
}, [
|
100
|
-
const e =
|
101
|
-
i(e), sessionStorage.removeItem(
|
102
|
-
}, [
|
98
|
+
let s = r;
|
99
|
+
return c && (s = c.mode || "light", e = W(e, Y(s, c))), B(e, "palette.mode", s), B(e, "mode", s), e;
|
100
|
+
}, [r, t, k, c]), T = f(() => C({ ...v, disableBlockletTheme: !!c || a }), [v, a, c]), E = $(() => {
|
101
|
+
const e = r === "light" ? "dark" : "light";
|
102
|
+
i(e), sessionStorage.removeItem(h), localStorage.setItem(h, e);
|
103
|
+
}, [r, i]), x = $(
|
103
104
|
(e) => {
|
104
|
-
|
105
|
+
r !== e && (i(e), sessionStorage.removeItem(h), localStorage.setItem(h, e));
|
105
106
|
},
|
106
|
-
[
|
107
|
-
),
|
107
|
+
[r, i]
|
108
|
+
), A = f(
|
108
109
|
() => ({
|
109
|
-
mode:
|
110
|
-
toggleMode:
|
111
|
-
changeMode:
|
112
|
-
prefer:
|
110
|
+
mode: r,
|
111
|
+
toggleMode: E,
|
112
|
+
changeMode: x,
|
113
|
+
prefer: n
|
113
114
|
}),
|
114
|
-
[
|
115
|
+
[r, n, E, x]
|
115
116
|
);
|
116
|
-
return
|
117
|
-
i(
|
118
|
-
}, [
|
119
|
-
const e = new URLSearchParams(
|
120
|
-
|
121
|
-
}, [
|
117
|
+
return b(() => {
|
118
|
+
i(P(n));
|
119
|
+
}, [n, i, p.search]), b(() => {
|
120
|
+
const e = new URLSearchParams(p.search).get("theme");
|
121
|
+
J(e) && sessionStorage.setItem(h, e);
|
122
|
+
}, [p.search]), b(() => {
|
122
123
|
d.current || (d.current = document.querySelector('meta[name="theme-color"]'));
|
123
|
-
const e =
|
124
|
+
const e = T.palette.background.default;
|
124
125
|
if (d.current)
|
125
126
|
d.current.setAttribute("content", e);
|
126
127
|
else {
|
127
|
-
const
|
128
|
-
|
128
|
+
const s = document.createElement("meta");
|
129
|
+
s.name = "theme-color", s.content = e, document.head.appendChild(s), d.current = s;
|
129
130
|
}
|
130
|
-
}, [
|
131
|
-
const e = (
|
132
|
-
|
131
|
+
}, [T.palette.background.default]), b(() => {
|
132
|
+
const e = (s) => {
|
133
|
+
s.origin === window.origin && s.data.type === "THEME_BUILDER_CONFIG_CHANGED" && S(s.data.payload);
|
133
134
|
};
|
134
135
|
return window.addEventListener("message", e), () => window.removeEventListener("message", e);
|
135
|
-
}, [
|
136
|
+
}, [S]), b(() => {
|
137
|
+
w && (r === "dark" ? document.documentElement.setAttribute("data-theme", "dark") : document.documentElement.removeAttribute("data-theme"));
|
138
|
+
}, [w, r]), /* @__PURE__ */ m(L, { value: A, children: /* @__PURE__ */ m(D, { theme: T, ...o, children: l }) });
|
136
139
|
}
|
137
|
-
function
|
140
|
+
function he({
|
138
141
|
children: l = null,
|
139
142
|
prefer: t = void 0,
|
140
|
-
enableColorScheme:
|
143
|
+
enableColorScheme: n = !1,
|
141
144
|
...a
|
142
145
|
}) {
|
143
|
-
const { toggleMode: o } =
|
144
|
-
return
|
146
|
+
const { toggleMode: o } = R();
|
147
|
+
return n || t || !o ? /* @__PURE__ */ m(re, { prefer: t, ...a, children: l }) : /* @__PURE__ */ m(D, { ...a, children: l });
|
145
148
|
}
|
146
149
|
export {
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
+
L as ColorSchemeContext,
|
151
|
+
he as default,
|
152
|
+
R as useColorScheme
|
150
153
|
};
|
package/lib/index.d.ts
CHANGED
@@ -21,6 +21,7 @@ import { default as SessionManager } from './SessionManager';
|
|
21
21
|
import { default as Datatable } from './Datatable';
|
22
22
|
import { default as Dialog } from './Dialog';
|
23
23
|
import { default as DidLogo } from './DidLogo';
|
24
|
+
import { default as SocialShare } from './SocialShare';
|
24
25
|
import { default as Tabs } from './Tabs';
|
25
26
|
import { default as Tag } from './Tag';
|
26
27
|
import { default as TextCollapse } from './TextCollapse';
|
@@ -35,4 +36,4 @@ import { default as withTracker } from './withTracker';
|
|
35
36
|
import { default as Img } from './Img';
|
36
37
|
import * as Theme from './Theme';
|
37
38
|
import * as Util from './Util';
|
38
|
-
export { ActionButton, ActivityIndicator, Address, Alert, AnimationWaiter, Async, Avatar, Badge, Button, ClickToCopy, CodeBlock, ContactForm, CountDown, Earth, Footer, Icon, LocaleSelector, Logo, Tabs, RelativeTime, SessionManager, Datatable, Dialog, DidLogo, Tag, TextCollapse, Theme, Toast, Util, Video, WebWalletSWKeeper, WalletAction, WalletDownload, WechatPrompt, withTheme, withTracker, Img, };
|
39
|
+
export { ActionButton, ActivityIndicator, Address, Alert, AnimationWaiter, Async, Avatar, Badge, Button, ClickToCopy, CodeBlock, ContactForm, CountDown, Earth, Footer, Icon, LocaleSelector, Logo, Tabs, RelativeTime, SessionManager, Datatable, Dialog, DidLogo, SocialShare, Tag, TextCollapse, Theme, Toast, Util, Video, WebWalletSWKeeper, WalletAction, WalletDownload, WechatPrompt, withTheme, withTracker, Img, };
|
package/lib/index.js
CHANGED
@@ -3,13 +3,13 @@ import { default as x } from "./ActivityIndicator/index.js";
|
|
3
3
|
import { default as i } from "./Address/index.js";
|
4
4
|
import { default as c } from "./Alert/index.js";
|
5
5
|
import { default as A } from "./AnimationWaiter/index.js";
|
6
|
-
import { default as
|
6
|
+
import { default as h } from "./Async/index.js";
|
7
7
|
import { default as C } from "./Avatar/index.js";
|
8
|
-
import { default as
|
9
|
-
import { default as
|
10
|
-
import { default as
|
11
|
-
import { default as
|
12
|
-
import { default as
|
8
|
+
import { default as S } from "./Badge/index.js";
|
9
|
+
import { default as B } from "./Button/index.js";
|
10
|
+
import { default as k } from "./ClickToCopy/index.js";
|
11
|
+
import { default as y } from "./CodeBlock/index.js";
|
12
|
+
import { default as L } from "./ContactForm/index.js";
|
13
13
|
import { default as E } from "./CountDown/index.js";
|
14
14
|
import { default as M } from "./Earth/index.js";
|
15
15
|
import { default as R } from "./Footer/index.js";
|
@@ -26,33 +26,34 @@ import "react";
|
|
26
26
|
import "ahooks";
|
27
27
|
import "lodash/noop";
|
28
28
|
import { default as _ } from "./DidLogo/index.js";
|
29
|
-
import { default as to } from "./
|
30
|
-
import { default as ao } from "./
|
31
|
-
import { default as fo } from "./
|
29
|
+
import { default as to } from "./SocialShare/index.js";
|
30
|
+
import { default as ao } from "./Tabs/index.js";
|
31
|
+
import { default as fo } from "./Tag/index.js";
|
32
|
+
import { default as mo } from "./TextCollapse/index.js";
|
32
33
|
import * as f from "./Theme/index.js";
|
33
|
-
import { default as
|
34
|
+
import { default as so } from "./Toast/index.js";
|
34
35
|
import * as l from "./Util/index.js";
|
35
|
-
import { default as
|
36
|
-
import { default as
|
37
|
-
import { default as
|
38
|
-
import { default as
|
39
|
-
import { default as
|
40
|
-
import { default as
|
41
|
-
import { default as
|
42
|
-
import { default as
|
36
|
+
import { default as uo } from "./Video/index.js";
|
37
|
+
import { default as no } from "./WebWalletSWKeeper/index.js";
|
38
|
+
import { default as To } from "./Wallet/Action.js";
|
39
|
+
import { default as go } from "./Wallet/Download.js";
|
40
|
+
import { default as Wo } from "./WechatPrompt/index.js";
|
41
|
+
import { default as Do } from "./withTheme/index.js";
|
42
|
+
import { default as wo } from "./withTracker/index.js";
|
43
|
+
import { default as bo } from "./Img/index.js";
|
43
44
|
export {
|
44
45
|
s as ActionButton,
|
45
46
|
x as ActivityIndicator,
|
46
47
|
i as Address,
|
47
48
|
c as Alert,
|
48
49
|
A as AnimationWaiter,
|
49
|
-
|
50
|
+
h as Async,
|
50
51
|
C as Avatar,
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
52
|
+
S as Badge,
|
53
|
+
B as Button,
|
54
|
+
k as ClickToCopy,
|
55
|
+
y as CodeBlock,
|
56
|
+
L as ContactForm,
|
56
57
|
E as CountDown,
|
57
58
|
Q as Datatable,
|
58
59
|
Y as Dialog,
|
@@ -60,22 +61,23 @@ export {
|
|
60
61
|
M as Earth,
|
61
62
|
R as Footer,
|
62
63
|
V as Icon,
|
63
|
-
|
64
|
+
bo as Img,
|
64
65
|
j as LocaleSelector,
|
65
66
|
z as Logo,
|
66
67
|
H as RelativeTime,
|
67
68
|
N as SessionManager,
|
68
|
-
to as
|
69
|
-
ao as
|
70
|
-
fo as
|
69
|
+
to as SocialShare,
|
70
|
+
ao as Tabs,
|
71
|
+
fo as Tag,
|
72
|
+
mo as TextCollapse,
|
71
73
|
f as Theme,
|
72
|
-
|
74
|
+
so as Toast,
|
73
75
|
l as Util,
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
76
|
+
uo as Video,
|
77
|
+
To as WalletAction,
|
78
|
+
go as WalletDownload,
|
79
|
+
no as WebWalletSWKeeper,
|
80
|
+
Wo as WechatPrompt,
|
81
|
+
Do as withTheme,
|
82
|
+
wo as withTracker
|
81
83
|
};
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@arcblock/ux",
|
3
|
-
"version": "3.0.
|
3
|
+
"version": "3.0.22",
|
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": "21018768a5b825c02861281925afb54efdf0aa4c",
|
64
64
|
"dependencies": {
|
65
|
-
"@arcblock/bridge": "3.0.
|
65
|
+
"@arcblock/bridge": "3.0.22",
|
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.22",
|
69
|
+
"@arcblock/nft-display": "3.0.22",
|
70
|
+
"@arcblock/react-hooks": "3.0.22",
|
71
71
|
"@blocklet/js-sdk": "^1.16.45",
|
72
|
-
"@blocklet/theme": "3.0.
|
72
|
+
"@blocklet/theme": "3.0.22",
|
73
73
|
"@fontsource/roboto": "~5.1.1",
|
74
74
|
"@fontsource/ubuntu-mono": "^5.2.6",
|
75
75
|
"@iconify-icons/logos": "^1.2.36",
|
@@ -112,6 +112,7 @@
|
|
112
112
|
"react-lottie-player": "^1.5.6",
|
113
113
|
"react-player": "^1.15.3",
|
114
114
|
"react-shadow": "^19.1.0",
|
115
|
+
"react-share": "^5.1.0",
|
115
116
|
"react-svg": "^16.3.0",
|
116
117
|
"react-use": "^17.6.0",
|
117
118
|
"rebound": "^0.1.0",
|
@@ -222,7 +222,6 @@ const Form = styled('form', {
|
|
222
222
|
font-size: 30px;
|
223
223
|
text-align: center;
|
224
224
|
color: ${(props) => {
|
225
|
-
// @ts-expect-error
|
226
225
|
return props.theme.typography.color.main;
|
227
226
|
}};
|
228
227
|
}
|
@@ -239,7 +238,6 @@ const Form = styled('form', {
|
|
239
238
|
border: none;
|
240
239
|
border-bottom: 1px solid
|
241
240
|
${(props) => {
|
242
|
-
// @ts-expect-error
|
243
241
|
return props.theme.typography.color.main;
|
244
242
|
}};
|
245
243
|
font-size: 16px;
|
package/src/Footer/index.tsx
CHANGED
package/src/Header/header.tsx
CHANGED
@@ -37,7 +37,6 @@ const StyledAppBar = styled(AppBar)`
|
|
37
37
|
font-size: 24px;
|
38
38
|
font-weight: 800;
|
39
39
|
color: ${(props) => {
|
40
|
-
// @ts-expect-error
|
41
40
|
return props.theme.typography.color.main;
|
42
41
|
}};
|
43
42
|
text-transform: uppercase;
|
@@ -48,7 +47,6 @@ const StyledAppBar = styled(AppBar)`
|
|
48
47
|
font-size: 14px;
|
49
48
|
line-height: 1.71;
|
50
49
|
color: ${(props) => {
|
51
|
-
// @ts-expect-error
|
52
50
|
return props.theme.typography.color.gray;
|
53
51
|
}};
|
54
52
|
}
|
@@ -81,7 +81,7 @@ export default function Passport({
|
|
81
81
|
fontWeight: 400,
|
82
82
|
fontSize: '16px',
|
83
83
|
lineHeight: 1.1875,
|
84
|
-
color: '
|
84
|
+
color: 'text.primary',
|
85
85
|
}}>
|
86
86
|
{upperFirst(passport.title)}
|
87
87
|
<Box
|
@@ -106,7 +106,7 @@ export default function Passport({
|
|
106
106
|
fontWeight: 400,
|
107
107
|
fontSize: '16px',
|
108
108
|
lineHeight: 1.1875,
|
109
|
-
color: '
|
109
|
+
color: 'text.primary',
|
110
110
|
}}>
|
111
111
|
{t('team.passport.validUntil', { date: passport.expirationDate })}
|
112
112
|
</Box>
|
@@ -0,0 +1,194 @@
|
|
1
|
+
/**
|
2
|
+
* 社交媒体共享组件
|
3
|
+
*/
|
4
|
+
|
5
|
+
import { Menu, MenuItem, Box, useTheme } from '@mui/material';
|
6
|
+
import { useMemoizedFn } from 'ahooks';
|
7
|
+
import { Icon } from '@iconify/react';
|
8
|
+
import {
|
9
|
+
FacebookIcon,
|
10
|
+
FacebookShareButton,
|
11
|
+
RedditIcon,
|
12
|
+
RedditShareButton,
|
13
|
+
TelegramIcon,
|
14
|
+
TelegramShareButton,
|
15
|
+
TwitterShareButton,
|
16
|
+
XIcon,
|
17
|
+
WeiboIcon,
|
18
|
+
WeiboShareButton,
|
19
|
+
LinkedinIcon,
|
20
|
+
LinkedinShareButton,
|
21
|
+
} from 'react-share';
|
22
|
+
import Toast from '../Toast';
|
23
|
+
import { translate } from '../Locale/util';
|
24
|
+
|
25
|
+
const shareButtonStyle = {
|
26
|
+
display: 'flex',
|
27
|
+
alignItems: 'center',
|
28
|
+
width: '100%',
|
29
|
+
'& > button': {
|
30
|
+
display: 'flex',
|
31
|
+
alignItems: 'center',
|
32
|
+
width: '100%',
|
33
|
+
justifyContent: 'flex-start',
|
34
|
+
},
|
35
|
+
};
|
36
|
+
|
37
|
+
export interface SharedProps {
|
38
|
+
title: string; // 分享标题
|
39
|
+
url: string; // 分享链接
|
40
|
+
}
|
41
|
+
|
42
|
+
const translations = {
|
43
|
+
en: {
|
44
|
+
copyLink: 'Copy Link',
|
45
|
+
x: 'X',
|
46
|
+
telegram: 'Telegram',
|
47
|
+
reddit: 'Reddit',
|
48
|
+
facebook: 'Facebook',
|
49
|
+
weiBo: 'Weibo',
|
50
|
+
linkedin: 'LinkedIn',
|
51
|
+
copySuccess: 'Link copied to clipboard',
|
52
|
+
},
|
53
|
+
zh: {
|
54
|
+
copyLink: '复制链接',
|
55
|
+
x: 'X',
|
56
|
+
telegram: 'Telegram',
|
57
|
+
reddit: 'Reddit',
|
58
|
+
facebook: 'Facebook',
|
59
|
+
weiBo: '微博',
|
60
|
+
linkedin: 'LinkedIn',
|
61
|
+
copySuccess: '链接已复制到剪贴板',
|
62
|
+
},
|
63
|
+
};
|
64
|
+
|
65
|
+
const buttonSx = {
|
66
|
+
display: 'flex',
|
67
|
+
alignItems: 'center',
|
68
|
+
gap: 1.5,
|
69
|
+
minWidth: 120,
|
70
|
+
lineHeight: '1!important',
|
71
|
+
};
|
72
|
+
|
73
|
+
const itemIconSx = (theme: any) => ({
|
74
|
+
display: 'flex',
|
75
|
+
alignItems: 'center',
|
76
|
+
justifyContent: 'center',
|
77
|
+
width: 22,
|
78
|
+
height: 22,
|
79
|
+
border: 1,
|
80
|
+
borderColor: theme.palette.text.secondary,
|
81
|
+
borderRadius: 0.75,
|
82
|
+
});
|
83
|
+
|
84
|
+
export default function SocialShare({
|
85
|
+
anchorEl,
|
86
|
+
onClose,
|
87
|
+
sharedProps,
|
88
|
+
locale = 'en',
|
89
|
+
}: {
|
90
|
+
anchorEl: HTMLElement | null;
|
91
|
+
onClose: () => void;
|
92
|
+
sharedProps: SharedProps;
|
93
|
+
locale?: string;
|
94
|
+
}) {
|
95
|
+
const theme = useTheme();
|
96
|
+
const shareOpen = Boolean(anchorEl);
|
97
|
+
|
98
|
+
const t = useMemoizedFn((key, data = {}) => {
|
99
|
+
return translate(translations, key, locale, 'en', data);
|
100
|
+
});
|
101
|
+
|
102
|
+
const iconProps = {
|
103
|
+
bgStyle: { fill: theme.palette.background.paper },
|
104
|
+
iconFillColor: theme.palette.text.secondary,
|
105
|
+
};
|
106
|
+
|
107
|
+
const { title, url } = sharedProps;
|
108
|
+
|
109
|
+
const handleCopyLink = () => {
|
110
|
+
if (!url) {
|
111
|
+
return;
|
112
|
+
}
|
113
|
+
navigator.clipboard.writeText(url).then(() => {
|
114
|
+
Toast.success(t('copySuccess'));
|
115
|
+
});
|
116
|
+
};
|
117
|
+
|
118
|
+
return (
|
119
|
+
<Menu
|
120
|
+
id="basic-menu"
|
121
|
+
anchorEl={anchorEl}
|
122
|
+
open={shareOpen}
|
123
|
+
onClose={onClose}
|
124
|
+
anchorOrigin={{
|
125
|
+
vertical: 'top',
|
126
|
+
horizontal: 'right',
|
127
|
+
}}
|
128
|
+
transformOrigin={{
|
129
|
+
vertical: 'top',
|
130
|
+
horizontal: 'left',
|
131
|
+
}}
|
132
|
+
sx={{
|
133
|
+
'& .MuiPaper-root': {
|
134
|
+
marginTop: '-140px', // 向上移动菜单
|
135
|
+
},
|
136
|
+
}}
|
137
|
+
slotProps={{
|
138
|
+
paper: {
|
139
|
+
'aria-labelledby': 'basic-button',
|
140
|
+
},
|
141
|
+
}}>
|
142
|
+
<MenuItem
|
143
|
+
key="copy-to-clipboard"
|
144
|
+
onClick={() => {
|
145
|
+
handleCopyLink();
|
146
|
+
onClose();
|
147
|
+
}}
|
148
|
+
sx={shareButtonStyle}>
|
149
|
+
<Box sx={buttonSx}>
|
150
|
+
<Box sx={itemIconSx}>
|
151
|
+
<Icon icon="tabler:link" />
|
152
|
+
</Box>
|
153
|
+
<span>{t('copyLink')}</span>
|
154
|
+
</Box>
|
155
|
+
</MenuItem>
|
156
|
+
<MenuItem key="share-to-x" onClick={onClose} sx={shareButtonStyle}>
|
157
|
+
<Box component={TwitterShareButton} url={url} title={title} sx={buttonSx}>
|
158
|
+
<Box component={XIcon} sx={itemIconSx} round {...iconProps} />
|
159
|
+
<span>{t('x')}</span>
|
160
|
+
</Box>
|
161
|
+
</MenuItem>
|
162
|
+
<MenuItem key="share-to-telegram" onClick={onClose} sx={shareButtonStyle}>
|
163
|
+
<Box component={TelegramShareButton} url={url} title={title} sx={buttonSx}>
|
164
|
+
<Box component={TelegramIcon} sx={itemIconSx} round {...iconProps} />
|
165
|
+
<span>{t('telegram')}</span>
|
166
|
+
</Box>
|
167
|
+
</MenuItem>
|
168
|
+
<MenuItem key="share-to-reddit" onClick={onClose} sx={shareButtonStyle}>
|
169
|
+
<Box component={RedditShareButton} url={url} title={title} sx={buttonSx}>
|
170
|
+
<Box component={RedditIcon} sx={itemIconSx} round {...iconProps} />
|
171
|
+
<span>{t('reddit')}</span>
|
172
|
+
</Box>
|
173
|
+
</MenuItem>
|
174
|
+
<MenuItem key="share-to-weibo" onClick={onClose} sx={shareButtonStyle}>
|
175
|
+
<Box component={WeiboShareButton} url={url} title={title} sx={buttonSx}>
|
176
|
+
<Box component={WeiboIcon} sx={itemIconSx} round {...iconProps} />
|
177
|
+
<span>{t('weiBo')}</span>
|
178
|
+
</Box>
|
179
|
+
</MenuItem>
|
180
|
+
<MenuItem key="share-to-facebook" onClick={onClose} sx={shareButtonStyle}>
|
181
|
+
<Box component={FacebookShareButton} url={url} title={title} sx={buttonSx}>
|
182
|
+
<Box component={FacebookIcon} sx={itemIconSx} round {...iconProps} />
|
183
|
+
<span>{t('facebook')}</span>
|
184
|
+
</Box>
|
185
|
+
</MenuItem>
|
186
|
+
<MenuItem key="share-to-linkedin" onClick={onClose} sx={shareButtonStyle}>
|
187
|
+
<Box component={LinkedinShareButton} url={url} title={title} sx={buttonSx}>
|
188
|
+
<Box component={LinkedinIcon} sx={itemIconSx} round {...iconProps} />
|
189
|
+
<span>{t('linkedin')}</span>
|
190
|
+
</Box>
|
191
|
+
</MenuItem>
|
192
|
+
</Menu>
|
193
|
+
);
|
194
|
+
}
|
@@ -11,6 +11,7 @@ import {
|
|
11
11
|
} from '@mui/material';
|
12
12
|
import { deepmerge } from '@mui/utils';
|
13
13
|
import set from 'lodash/set';
|
14
|
+
import isUndefined from 'lodash/isUndefined';
|
14
15
|
import { useDebounceFn } from 'ahooks';
|
15
16
|
import {
|
16
17
|
BLOCKLET_THEME_PREFER_KEY,
|
@@ -171,11 +172,13 @@ function ColorSchemeProvider({
|
|
171
172
|
disableBlockletTheme = false,
|
172
173
|
...rest
|
173
174
|
}: ThemeProviderProps) {
|
175
|
+
const parentColorScheme = useColorScheme();
|
174
176
|
const [mode, setMode] = useState<PaletteMode>(() => resolveMode(prefer));
|
175
177
|
const [themeBuilderConfig, setThemeBuilderConfig] = useState<BlockletThemeMeta | null>(null);
|
176
178
|
const parentTheme = useTheme();
|
177
179
|
const location = useLocationState();
|
178
180
|
const metaThemeColorRef = useRef<HTMLMetaElement | null>(null);
|
181
|
+
const isTopColorScheme = isUndefined(parentColorScheme.toggleMode);
|
179
182
|
|
180
183
|
// 使用防抖函数包装 setThemeBuilderConfig,避免过于频繁的主题修改
|
181
184
|
const { run: debouncedSetThemeBuilderConfig } = useDebounceFn(
|
@@ -301,6 +304,17 @@ function ColorSchemeProvider({
|
|
301
304
|
return () => window.removeEventListener('message', handleMessage);
|
302
305
|
}, [debouncedSetThemeBuilderConfig]);
|
303
306
|
|
307
|
+
// 修改 document[data-theme] 属性
|
308
|
+
useEffect(() => {
|
309
|
+
if (isTopColorScheme) {
|
310
|
+
if (mode === 'dark') {
|
311
|
+
document.documentElement.setAttribute('data-theme', 'dark');
|
312
|
+
} else {
|
313
|
+
document.documentElement.removeAttribute('data-theme');
|
314
|
+
}
|
315
|
+
}
|
316
|
+
}, [isTopColorScheme, mode]);
|
317
|
+
|
304
318
|
return (
|
305
319
|
<ColorSchemeContext value={colorSchemeValue}>
|
306
320
|
<BaseThemeProvider theme={theme} {...rest}>
|
package/src/index.ts
CHANGED
@@ -21,6 +21,7 @@ import SessionManager from './SessionManager';
|
|
21
21
|
import Datatable from './Datatable';
|
22
22
|
import Dialog from './Dialog';
|
23
23
|
import DidLogo from './DidLogo';
|
24
|
+
import SocialShare from './SocialShare';
|
24
25
|
import Tabs from './Tabs';
|
25
26
|
import Tag from './Tag';
|
26
27
|
import TextCollapse from './TextCollapse';
|
@@ -61,6 +62,7 @@ export {
|
|
61
62
|
Datatable,
|
62
63
|
Dialog,
|
63
64
|
DidLogo,
|
65
|
+
SocialShare,
|
64
66
|
Tag,
|
65
67
|
TextCollapse,
|
66
68
|
Theme,
|
package/src/withTheme/index.tsx
CHANGED
@@ -17,7 +17,6 @@ function withTheme<P extends object>(
|
|
17
17
|
// @ts-expect-error
|
18
18
|
const theme = createTheme({ mode, pageWidth, palette, typography });
|
19
19
|
|
20
|
-
// @ts-expect-error
|
21
20
|
const color = theme.typography.color.main;
|
22
21
|
const globalStyles = css`
|
23
22
|
font-family: ${theme.typography.fontFamily};
|