@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.
@@ -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 u from "../NFTDisplay/index.js";
6
- import { useLocaleContext as y } from "../Locale/context.js";
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 } = y();
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
- u,
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: "#222222"
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: "#222222"
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 j } from "react/jsx-runtime";
2
- import { createContext as F, use as G, useState as E, useRef as H, useMemo as f, useCallback as x, useEffect as h } from "react";
3
- import { useTheme as M, StyledEngineProvider as I, ThemeProvider as N, CssBaseline as O, GlobalStyles as U } from "@mui/material";
4
- import { deepmerge as A } from "@mui/utils";
5
- import y from "lodash/set";
6
- import { useDebounceFn as K } from "ahooks";
7
- import { getBlockletThemeOptions as V, BLOCKLET_THEME_PREFER_KEY as b, isValidThemeMode as W, getDefaultThemePrefer as $ } from "@blocklet/theme";
8
- import { useLocationState as q } from "../hooks/use-location-state.js";
9
- import { createTheme as T, lazyCreateDefaultTheme as z, isUxTheme as Y, isTheme as J } from "./theme.js";
10
- const Q = T(), P = F({});
11
- function X() {
12
- return G(P);
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 B = (l) => l ? l === "system" ? $({ theme: { prefer: "system" } }) : l : $();
15
- function Z({ className: l = void 0 }) {
16
- const t = M();
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 r = "transparent", a = t.palette.grey[300], o = (l || "").trim().split(/\s+/).filter(Boolean).map((u) => u.startsWith(".") ? u : `.${u}`).join(" "), s = o ? `${o}::-webkit-scrollbar, ${o} *::-webkit-scrollbar` : "*::-webkit-scrollbar", i = o ? `${o}::-webkit-scrollbar-track, ${o} *::-webkit-scrollbar-track` : "*::-webkit-scrollbar-track", c = o ? `${o}::-webkit-scrollbar-thumb, ${o} *::-webkit-scrollbar-thumb` : "*::-webkit-scrollbar-thumb", g = o ? `${o}, ${o} *` : "*";
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
- U,
21
+ V,
21
22
  {
22
23
  styles: {
23
24
  // Chrome, Safari, Edge
24
25
  "@supports selector(::-webkit-scrollbar)": {
25
- [s]: {
26
+ [g]: {
26
27
  width: "12px",
27
28
  height: "12px"
28
29
  },
29
- [i]: {
30
- background: r
30
+ [r]: {
31
+ background: n
31
32
  },
32
- [c]: {
33
+ [i]: {
33
34
  background: a,
34
35
  borderRadius: "6px",
35
36
  border: "2px solid",
36
- borderColor: r,
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
- [g]: {
47
+ [c]: {
47
48
  scrollbarWidth: "auto",
48
- scrollbarColor: `${a} ${r}`
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 = Q,
60
- injectFirst: r = !0,
60
+ theme: t = te,
61
+ injectFirst: n = !0,
61
62
  darkSchemeClass: a = ""
62
63
  }) {
63
- const o = f(() => typeof t == "function" || J(t) ? t : T(t), [t]);
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(I, { injectFirst: r, children: /* @__PURE__ */ j(N, { theme: o, children: [
67
- /* @__PURE__ */ m(O, {}),
68
- /* @__PURE__ */ m(Z, { className: a }),
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 ee({
74
+ function re({
74
75
  children: l = null,
75
76
  theme: t = void 0,
76
- prefer: r = void 0,
77
+ prefer: n = void 0,
77
78
  disableBlockletTheme: a = !1,
78
79
  ...o
79
80
  }) {
80
- const [s, i] = E(() => B(r)), [c, g] = E(null), u = M(), k = q(), d = H(null), { run: w } = K(
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
- g(e);
83
+ u(e);
83
84
  },
84
85
  {
85
86
  wait: 200
86
87
  }
87
- ), C = f(() => {
88
+ ), v = f(() => {
88
89
  let e = {};
89
90
  if (t) {
90
- const R = z(s);
91
+ const U = X(r);
91
92
  if (typeof t == "function") {
92
- const D = R();
93
- Y(u) ? e = { ...t(u, { mode: s }) } : e = { ...t(D, { mode: s }) };
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 n = s;
98
- return c && (n = c.mode || "light", e = A(e, V(n, c))), y(e, "palette.mode", n), y(e, "mode", n), e;
99
- }, [s, t, u, c]), p = f(() => T({ ...C, disableBlockletTheme: !!c || a }), [C, a, c]), S = x(() => {
100
- const e = s === "light" ? "dark" : "light";
101
- i(e), sessionStorage.removeItem(b), localStorage.setItem(b, e);
102
- }, [s, i]), v = x(
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
- s !== e && (i(e), sessionStorage.removeItem(b), localStorage.setItem(b, e));
105
+ r !== e && (i(e), sessionStorage.removeItem(h), localStorage.setItem(h, e));
105
106
  },
106
- [s, i]
107
- ), L = f(
107
+ [r, i]
108
+ ), A = f(
108
109
  () => ({
109
- mode: s,
110
- toggleMode: S,
111
- changeMode: v,
112
- prefer: r
110
+ mode: r,
111
+ toggleMode: E,
112
+ changeMode: x,
113
+ prefer: n
113
114
  }),
114
- [s, r, S, v]
115
+ [r, n, E, x]
115
116
  );
116
- return h(() => {
117
- i(B(r));
118
- }, [r, i, k.search]), h(() => {
119
- const e = new URLSearchParams(k.search).get("theme");
120
- W(e) && sessionStorage.setItem(b, e);
121
- }, [k.search]), h(() => {
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 = p.palette.background.default;
124
+ const e = T.palette.background.default;
124
125
  if (d.current)
125
126
  d.current.setAttribute("content", e);
126
127
  else {
127
- const n = document.createElement("meta");
128
- n.name = "theme-color", n.content = e, document.head.appendChild(n), d.current = n;
128
+ const s = document.createElement("meta");
129
+ s.name = "theme-color", s.content = e, document.head.appendChild(s), d.current = s;
129
130
  }
130
- }, [p.palette.background.default]), h(() => {
131
- const e = (n) => {
132
- n.origin === window.origin && n.data.type === "THEME_BUILDER_CONFIG_CHANGED" && w(n.data.payload);
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
- }, [w]), /* @__PURE__ */ m(P, { value: L, children: /* @__PURE__ */ m(_, { theme: p, ...o, children: l }) });
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 me({
140
+ function he({
138
141
  children: l = null,
139
142
  prefer: t = void 0,
140
- enableColorScheme: r = !1,
143
+ enableColorScheme: n = !1,
141
144
  ...a
142
145
  }) {
143
- const { toggleMode: o } = X();
144
- return r || t || !o ? /* @__PURE__ */ m(ee, { prefer: t, ...a, children: l }) : /* @__PURE__ */ m(_, { ...a, children: l });
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
- P as ColorSchemeContext,
148
- me as default,
149
- X as useColorScheme
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 W } from "./Async/index.js";
6
+ import { default as h } from "./Async/index.js";
7
7
  import { default as C } from "./Avatar/index.js";
8
- import { default as w } from "./Badge/index.js";
9
- import { default as b } from "./Button/index.js";
10
- import { default as v } from "./ClickToCopy/index.js";
11
- import { default as I } from "./CodeBlock/index.js";
12
- import { default as S } from "./ContactForm/index.js";
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 "./Tabs/index.js";
30
- import { default as ao } from "./Tag/index.js";
31
- import { default as fo } from "./TextCollapse/index.js";
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 mo } from "./Toast/index.js";
34
+ import { default as so } from "./Toast/index.js";
34
35
  import * as l from "./Util/index.js";
35
- import { default as so } from "./Video/index.js";
36
- import { default as uo } from "./WebWalletSWKeeper/index.js";
37
- import { default as no } from "./Wallet/Action.js";
38
- import { default as To } from "./Wallet/Download.js";
39
- import { default as go } from "./WechatPrompt/index.js";
40
- import { default as ho } from "./withTheme/index.js";
41
- import { default as Do } from "./withTracker/index.js";
42
- import { default as Bo } from "./Img/index.js";
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
- W as Async,
50
+ h as Async,
50
51
  C as Avatar,
51
- w as Badge,
52
- b as Button,
53
- v as ClickToCopy,
54
- I as CodeBlock,
55
- S as ContactForm,
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
- Bo as Img,
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 Tabs,
69
- ao as Tag,
70
- fo as TextCollapse,
69
+ to as SocialShare,
70
+ ao as Tabs,
71
+ fo as Tag,
72
+ mo as TextCollapse,
71
73
  f as Theme,
72
- mo as Toast,
74
+ so as Toast,
73
75
  l as Util,
74
- so as Video,
75
- no as WalletAction,
76
- To as WalletDownload,
77
- uo as WebWalletSWKeeper,
78
- go as WechatPrompt,
79
- ho as withTheme,
80
- Do as withTracker
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.20",
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": "09d1c4320e150a72604e31f2320537641f8f4464",
63
+ "gitHead": "21018768a5b825c02861281925afb54efdf0aa4c",
64
64
  "dependencies": {
65
- "@arcblock/bridge": "3.0.20",
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.20",
69
- "@arcblock/nft-display": "3.0.20",
70
- "@arcblock/react-hooks": "3.0.20",
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.20",
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;
@@ -85,7 +85,6 @@ const Container = styled('div', {
85
85
 
86
86
  .footer-item {
87
87
  color: ${(props) => {
88
- // @ts-expect-error
89
88
  return props.theme.palette.text.hint;
90
89
  }};
91
90
  display: flex;
@@ -167,7 +167,6 @@ const Root = styled(Box)`
167
167
  .header-brand-desc {
168
168
  margin-top: 4px;
169
169
  color: ${({ theme }) => {
170
- // @ts-expect-error
171
170
  return theme.palette.text.hint;
172
171
  }};
173
172
  }
@@ -178,7 +178,6 @@ const Root = styled('div')`
178
178
  }
179
179
  .layout-sidebar-group {
180
180
  color: ${(props) => {
181
- // @ts-expect-error
182
181
  return props.theme.palette.text.hint;
183
182
  }};
184
183
  .layout-sidebar-group-title {
@@ -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
  }
@@ -52,7 +52,6 @@ export default function Sidebar({
52
52
  <ImageIcon
53
53
  name={images[name]}
54
54
  size={36}
55
- // @ts-expect-error
56
55
  color={selected ? '#00c2c4' : theme.typography.color.main}
57
56
  prefix={prefix}
58
57
  showBadge={showBadge}
@@ -81,7 +81,7 @@ export default function Passport({
81
81
  fontWeight: 400,
82
82
  fontSize: '16px',
83
83
  lineHeight: 1.1875,
84
- color: '#222222',
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: '#222222',
109
+ color: 'text.primary',
110
110
  }}>
111
111
  {t('team.passport.validUntil', { date: passport.expirationDate })}
112
112
  </Box>
@@ -106,7 +106,6 @@ export default function SessionUserSwitch({
106
106
  return (
107
107
  <SessionUserItem
108
108
  sessionItem={currentSession}
109
- // @ts-expect-error
110
109
  statusContent={<Icon icon={SwapHorizRoundedIcon} color={palette.text.hint} />}
111
110
  sx={{
112
111
  borderRadius: 1,
@@ -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,
@@ -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};