@arcblock/ux 3.0.19 → 3.0.21

package/lib/Passport/passport.js

@@ -2,8 +2,8 @@ import { jsxs as r, jsx as l } from "react/jsx-runtime";
 import f from "lodash/upperFirst";
 import { Box as i } from "@mui/material";
 import x from "@arcblock/icons/lib/RevokeIcon";
-import u from "../NFTDisplay/index.js";
-import { useLocaleContext as y } from "../Locale/context.js";
+import y from "../NFTDisplay/index.js";
+import { useLocaleContext as u } from "../Locale/context.js";
 function b({
   passport: e,
   user: a,
@@ -15,7 +15,7 @@ function b({
   children: d,
   ...m
 }) {
-  const { t: c } = y();
+  const { t: c } = u();
   return /* @__PURE__ */ r(
     i,
     {
@@ -27,7 +27,7 @@ function b({
       },
       children: [
         !!e.display && /* @__PURE__ */ l(i, { className: "passport-item__display", sx: { width: t }, children: /* @__PURE__ */ l(
-          u,
+          y,
           {
             address: e.id,
             data: e.display,
@@ -76,7 +76,7 @@ function b({
                     fontWeight: 400,
                     fontSize: "16px",
                     lineHeight: 1.1875,
-                    color: "#222222"
+                    color: "text.primary"
                   },
                   children: [
                     f(e.title),
@@ -110,7 +110,7 @@ function b({
                     fontWeight: 400,
                     fontSize: "16px",
                     lineHeight: 1.1875,
-                    color: "#222222"
+                    color: "text.primary"
                   },
                   children: c("team.passport.validUntil", { date: e.expirationDate })
                 }

package/lib/SocialShare/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 社交媒体共享组件
+ */
+export interface SharedProps {
+    title: string;
+    url: string;
+}
+export default function SocialShare({ anchorEl, onClose, sharedProps, locale, }: {
+    anchorEl: HTMLElement | null;
+    onClose: () => void;
+    sharedProps: SharedProps;
+    locale?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/SocialShare/index.js

@@ -0,0 +1,140 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { useTheme as y, Menu as I, MenuItem as c, Box as n } from "@mui/material";
+import { useMemoizedFn as S } from "ahooks";
+import { Icon as B } from "@iconify/react";
+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";
+import P from "../Toast/index.js";
+import { translate as X } from "../Locale/util.js";
+const a = {
+  display: "flex",
+  alignItems: "center",
+  width: "100%",
+  "& > button": {
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    justifyContent: "flex-start"
+  }
+}, H = {
+  en: {
+    copyLink: "Copy Link",
+    x: "X",
+    telegram: "Telegram",
+    reddit: "Reddit",
+    facebook: "Facebook",
+    weiBo: "Weibo",
+    linkedin: "LinkedIn",
+    copySuccess: "Link copied to clipboard"
+  },
+  zh: {
+    copyLink: "复制链接",
+    x: "X",
+    telegram: "Telegram",
+    reddit: "Reddit",
+    facebook: "Facebook",
+    weiBo: "微博",
+    linkedin: "LinkedIn",
+    copySuccess: "链接已复制到剪贴板"
+  }
+}, l = {
+  display: "flex",
+  alignItems: "center",
+  gap: 1.5,
+  minWidth: 120,
+  lineHeight: "1!important"
+}, s = (h) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: 22,
+  height: 22,
+  border: 1,
+  borderColor: h.palette.text.secondary,
+  borderRadius: 0.75
+});
+function Q({
+  anchorEl: h,
+  onClose: o,
+  sharedProps: u,
+  locale: x = "en"
+}) {
+  const m = y(), k = !!h, t = S((f, g = {}) => X(H, f, x, "en", g)), d = {
+    bgStyle: { fill: m.palette.background.paper },
+    iconFillColor: m.palette.text.secondary
+  }, { title: p, url: r } = u, b = () => {
+    r && navigator.clipboard.writeText(r).then(() => {
+      P.success(t("copySuccess"));
+    });
+  };
+  return /* @__PURE__ */ i(
+    I,
+    {
+      id: "basic-menu",
+      anchorEl: h,
+      open: k,
+      onClose: o,
+      anchorOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "left"
+      },
+      sx: {
+        "& .MuiPaper-root": {
+          marginTop: "-140px"
+          // 向上移动菜单
+        }
+      },
+      slotProps: {
+        paper: {
+          "aria-labelledby": "basic-button"
+        }
+      },
+      children: [
+        /* @__PURE__ */ e(
+          c,
+          {
+            onClick: () => {
+              b(), o();
+            },
+            sx: a,
+            children: /* @__PURE__ */ i(n, { sx: l, children: [
+              /* @__PURE__ */ e(n, { sx: s, children: /* @__PURE__ */ e(B, { icon: "tabler:link" }) }),
+              /* @__PURE__ */ e("span", { children: t("copyLink") })
+            ] })
+          },
+          "copy-to-clipboard"
+        ),
+        /* @__PURE__ */ e(c, { onClick: o, sx: a, children: /* @__PURE__ */ i(n, { component: L, url: r, title: p, sx: l, children: [
+          /* @__PURE__ */ e(n, { component: w, sx: s, round: !0, ...d }),
+          /* @__PURE__ */ e("span", { children: t("x") })
+        ] }) }, "share-to-x"),
+        /* @__PURE__ */ e(c, { onClick: o, sx: a, children: /* @__PURE__ */ i(n, { component: T, url: r, title: p, sx: l, children: [
+          /* @__PURE__ */ e(n, { component: C, sx: s, round: !0, ...d }),
+          /* @__PURE__ */ e("span", { children: t("telegram") })
+        ] }) }, "share-to-telegram"),
+        /* @__PURE__ */ e(c, { onClick: o, sx: a, children: /* @__PURE__ */ i(n, { component: F, url: r, title: p, sx: l, children: [
+          /* @__PURE__ */ e(n, { component: R, sx: s, round: !0, ...d }),
+          /* @__PURE__ */ e("span", { children: t("reddit") })
+        ] }) }, "share-to-reddit"),
+        /* @__PURE__ */ e(c, { onClick: o, sx: a, children: /* @__PURE__ */ i(n, { component: j, url: r, title: p, sx: l, children: [
+          /* @__PURE__ */ e(n, { component: z, sx: s, round: !0, ...d }),
+          /* @__PURE__ */ e("span", { children: t("weiBo") })
+        ] }) }, "share-to-weibo"),
+        /* @__PURE__ */ e(c, { onClick: o, sx: a, children: /* @__PURE__ */ i(n, { component: M, url: r, title: p, sx: l, children: [
+          /* @__PURE__ */ e(n, { component: W, sx: s, round: !0, ...d }),
+          /* @__PURE__ */ e("span", { children: t("facebook") })
+        ] }) }, "share-to-facebook"),
+        /* @__PURE__ */ e(c, { onClick: o, sx: a, children: /* @__PURE__ */ i(n, { component: v, url: r, title: p, sx: l, children: [
+          /* @__PURE__ */ e(n, { component: O, sx: s, round: !0, ...d }),
+          /* @__PURE__ */ e("span", { children: t("linkedin") })
+        ] }) }, "share-to-linkedin")
+      ]
+    }
+  );
+}
+export {
+  Q as default
+};

package/lib/index.d.ts

@@ -21,6 +21,7 @@ import { default as SessionManager } from './SessionManager';
 import { default as Datatable } from './Datatable';
 import { default as Dialog } from './Dialog';
 import { default as DidLogo } from './DidLogo';
+import { default as SocialShare } from './SocialShare';
 import { default as Tabs } from './Tabs';
 import { default as Tag } from './Tag';
 import { default as TextCollapse } from './TextCollapse';
@@ -35,4 +36,4 @@ import { default as withTracker } from './withTracker';
 import { default as Img } from './Img';
 import * as Theme from './Theme';
 import * as Util from './Util';
-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, };
+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

@@ -3,13 +3,13 @@ import { default as x } from "./ActivityIndicator/index.js";
 import { default as i } from "./Address/index.js";
 import { default as c } from "./Alert/index.js";
 import { default as A } from "./AnimationWaiter/index.js";
-import { default as W } from "./Async/index.js";
+import { default as h } from "./Async/index.js";
 import { default as C } from "./Avatar/index.js";
-import { default as w } from "./Badge/index.js";
-import { default as b } from "./Button/index.js";
-import { default as v } from "./ClickToCopy/index.js";
-import { default as I } from "./CodeBlock/index.js";
-import { default as S } from "./ContactForm/index.js";
+import { default as S } from "./Badge/index.js";
+import { default as B } from "./Button/index.js";
+import { default as k } from "./ClickToCopy/index.js";
+import { default as y } from "./CodeBlock/index.js";
+import { default as L } from "./ContactForm/index.js";
 import { default as E } from "./CountDown/index.js";
 import { default as M } from "./Earth/index.js";
 import { default as R } from "./Footer/index.js";
@@ -26,33 +26,34 @@ import "react";
 import "ahooks";
 import "lodash/noop";
 import { default as _ } from "./DidLogo/index.js";
-import { default as to } from "./Tabs/index.js";
-import { default as ao } from "./Tag/index.js";
-import { default as fo } from "./TextCollapse/index.js";
+import { default as to } from "./SocialShare/index.js";
+import { default as ao } from "./Tabs/index.js";
+import { default as fo } from "./Tag/index.js";
+import { default as mo } from "./TextCollapse/index.js";
 import * as f from "./Theme/index.js";
-import { default as mo } from "./Toast/index.js";
+import { default as so } from "./Toast/index.js";
 import * as l from "./Util/index.js";
-import { default as so } from "./Video/index.js";
-import { default as uo } from "./WebWalletSWKeeper/index.js";
-import { default as no } from "./Wallet/Action.js";
-import { default as To } from "./Wallet/Download.js";
-import { default as go } from "./WechatPrompt/index.js";
-import { default as ho } from "./withTheme/index.js";
-import { default as Do } from "./withTracker/index.js";
-import { default as Bo } from "./Img/index.js";
+import { default as uo } from "./Video/index.js";
+import { default as no } from "./WebWalletSWKeeper/index.js";
+import { default as To } from "./Wallet/Action.js";
+import { default as go } from "./Wallet/Download.js";
+import { default as Wo } from "./WechatPrompt/index.js";
+import { default as Do } from "./withTheme/index.js";
+import { default as wo } from "./withTracker/index.js";
+import { default as bo } from "./Img/index.js";
 export {
   s as ActionButton,
   x as ActivityIndicator,
   i as Address,
   c as Alert,
   A as AnimationWaiter,
-  W as Async,
+  h as Async,
   C as Avatar,
-  w as Badge,
-  b as Button,
-  v as ClickToCopy,
-  I as CodeBlock,
-  S as ContactForm,
+  S as Badge,
+  B as Button,
+  k as ClickToCopy,
+  y as CodeBlock,
+  L as ContactForm,
   E as CountDown,
   Q as Datatable,
   Y as Dialog,
@@ -60,22 +61,23 @@ export {
   M as Earth,
   R as Footer,
   V as Icon,
-  Bo as Img,
+  bo as Img,
   j as LocaleSelector,
   z as Logo,
   H as RelativeTime,
   N as SessionManager,
-  to as Tabs,
-  ao as Tag,
-  fo as TextCollapse,
+  to as SocialShare,
+  ao as Tabs,
+  fo as Tag,
+  mo as TextCollapse,
   f as Theme,
-  mo as Toast,
+  so as Toast,
   l as Util,
-  so as Video,
-  no as WalletAction,
-  To as WalletDownload,
-  uo as WebWalletSWKeeper,
-  go as WechatPrompt,
-  ho as withTheme,
-  Do as withTracker
+  uo as Video,
+  To as WalletAction,
+  go as WalletDownload,
+  no as WebWalletSWKeeper,
+  Wo as WechatPrompt,
+  Do as withTheme,
+  wo as withTracker
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "3.0.19",
+  "version": "3.0.21",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -60,16 +60,16 @@
     "react": "^19.0.0",
     "react-router-dom": "^6.22.3"
   },
-  "gitHead": "c7886f76502bc62236cc1dd28aa26c050a702d1c",
+  "gitHead": "c14ba0a6dd6fef59a623fd3b0e07855b9dc55076",
   "dependencies": {
-    "@arcblock/bridge": "3.0.19",
+    "@arcblock/bridge": "3.0.21",
     "@arcblock/did": "^1.20.15",
     "@arcblock/did-motif": "^1.1.14",
-    "@arcblock/icons": "3.0.19",
-    "@arcblock/nft-display": "3.0.19",
-    "@arcblock/react-hooks": "3.0.19",
+    "@arcblock/icons": "3.0.21",
+    "@arcblock/nft-display": "3.0.21",
+    "@arcblock/react-hooks": "3.0.21",
     "@blocklet/js-sdk": "^1.16.45",
-    "@blocklet/theme": "3.0.19",
+    "@blocklet/theme": "3.0.21",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.2.6",
     "@iconify-icons/logos": "^1.2.36",
@@ -112,6 +112,7 @@
     "react-lottie-player": "^1.5.6",
     "react-player": "^1.15.3",
     "react-shadow": "^19.1.0",
+    "react-share": "^5.1.0",
     "react-svg": "^16.3.0",
     "react-use": "^17.6.0",
     "rebound": "^0.1.0",

package/src/Passport/passport.tsx

@@ -81,7 +81,7 @@ export default function Passport({
             fontWeight: 400,
             fontSize: '16px',
             lineHeight: 1.1875,
-            color: '#222222',
+            color: 'text.primary',
           }}>
           {upperFirst(passport.title)}
           <Box
@@ -106,7 +106,7 @@ export default function Passport({
               fontWeight: 400,
               fontSize: '16px',
               lineHeight: 1.1875,
-              color: '#222222',
+              color: 'text.primary',
             }}>
             {t('team.passport.validUntil', { date: passport.expirationDate })}
           </Box>

package/src/SocialShare/index.tsx

@@ -0,0 +1,194 @@
+/**
+ * 社交媒体共享组件
+ */
+
+import { Menu, MenuItem, Box, useTheme } from '@mui/material';
+import { useMemoizedFn } from 'ahooks';
+import { Icon } from '@iconify/react';
+import {
+  FacebookIcon,
+  FacebookShareButton,
+  RedditIcon,
+  RedditShareButton,
+  TelegramIcon,
+  TelegramShareButton,
+  TwitterShareButton,
+  XIcon,
+  WeiboIcon,
+  WeiboShareButton,
+  LinkedinIcon,
+  LinkedinShareButton,
+} from 'react-share';
+import Toast from '../Toast';
+import { translate } from '../Locale/util';
+
+const shareButtonStyle = {
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
+  '& > button': {
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    justifyContent: 'flex-start',
+  },
+};
+
+export interface SharedProps {
+  title: string; // 分享标题
+  url: string; // 分享链接
+}
+
+const translations = {
+  en: {
+    copyLink: 'Copy Link',
+    x: 'X',
+    telegram: 'Telegram',
+    reddit: 'Reddit',
+    facebook: 'Facebook',
+    weiBo: 'Weibo',
+    linkedin: 'LinkedIn',
+    copySuccess: 'Link copied to clipboard',
+  },
+  zh: {
+    copyLink: '复制链接',
+    x: 'X',
+    telegram: 'Telegram',
+    reddit: 'Reddit',
+    facebook: 'Facebook',
+    weiBo: '微博',
+    linkedin: 'LinkedIn',
+    copySuccess: '链接已复制到剪贴板',
+  },
+};
+
+const buttonSx = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 1.5,
+  minWidth: 120,
+  lineHeight: '1!important',
+};
+
+const itemIconSx = (theme: any) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: 22,
+  height: 22,
+  border: 1,
+  borderColor: theme.palette.text.secondary,
+  borderRadius: 0.75,
+});
+
+export default function SocialShare({
+  anchorEl,
+  onClose,
+  sharedProps,
+  locale = 'en',
+}: {
+  anchorEl: HTMLElement | null;
+  onClose: () => void;
+  sharedProps: SharedProps;
+  locale?: string;
+}) {
+  const theme = useTheme();
+  const shareOpen = Boolean(anchorEl);
+
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+
+  const iconProps = {
+    bgStyle: { fill: theme.palette.background.paper },
+    iconFillColor: theme.palette.text.secondary,
+  };
+
+  const { title, url } = sharedProps;
+
+  const handleCopyLink = () => {
+    if (!url) {
+      return;
+    }
+    navigator.clipboard.writeText(url).then(() => {
+      Toast.success(t('copySuccess'));
+    });
+  };
+
+  return (
+    <Menu
+      id="basic-menu"
+      anchorEl={anchorEl}
+      open={shareOpen}
+      onClose={onClose}
+      anchorOrigin={{
+        vertical: 'top',
+        horizontal: 'right',
+      }}
+      transformOrigin={{
+        vertical: 'top',
+        horizontal: 'left',
+      }}
+      sx={{
+        '& .MuiPaper-root': {
+          marginTop: '-140px', // 向上移动菜单
+        },
+      }}
+      slotProps={{
+        paper: {
+          'aria-labelledby': 'basic-button',
+        },
+      }}>
+      <MenuItem
+        key="copy-to-clipboard"
+        onClick={() => {
+          handleCopyLink();
+          onClose();
+        }}
+        sx={shareButtonStyle}>
+        <Box sx={buttonSx}>
+          <Box sx={itemIconSx}>
+            <Icon icon="tabler:link" />
+          </Box>
+          <span>{t('copyLink')}</span>
+        </Box>
+      </MenuItem>
+      <MenuItem key="share-to-x" onClick={onClose} sx={shareButtonStyle}>
+        <Box component={TwitterShareButton} url={url} title={title} sx={buttonSx}>
+          <Box component={XIcon} sx={itemIconSx} round {...iconProps} />
+          <span>{t('x')}</span>
+        </Box>
+      </MenuItem>
+      <MenuItem key="share-to-telegram" onClick={onClose} sx={shareButtonStyle}>
+        <Box component={TelegramShareButton} url={url} title={title} sx={buttonSx}>
+          <Box component={TelegramIcon} sx={itemIconSx} round {...iconProps} />
+          <span>{t('telegram')}</span>
+        </Box>
+      </MenuItem>
+      <MenuItem key="share-to-reddit" onClick={onClose} sx={shareButtonStyle}>
+        <Box component={RedditShareButton} url={url} title={title} sx={buttonSx}>
+          <Box component={RedditIcon} sx={itemIconSx} round {...iconProps} />
+          <span>{t('reddit')}</span>
+        </Box>
+      </MenuItem>
+      <MenuItem key="share-to-weibo" onClick={onClose} sx={shareButtonStyle}>
+        <Box component={WeiboShareButton} url={url} title={title} sx={buttonSx}>
+          <Box component={WeiboIcon} sx={itemIconSx} round {...iconProps} />
+          <span>{t('weiBo')}</span>
+        </Box>
+      </MenuItem>
+      <MenuItem key="share-to-facebook" onClick={onClose} sx={shareButtonStyle}>
+        <Box component={FacebookShareButton} url={url} title={title} sx={buttonSx}>
+          <Box component={FacebookIcon} sx={itemIconSx} round {...iconProps} />
+          <span>{t('facebook')}</span>
+        </Box>
+      </MenuItem>
+      <MenuItem key="share-to-linkedin" onClick={onClose} sx={shareButtonStyle}>
+        <Box component={LinkedinShareButton} url={url} title={title} sx={buttonSx}>
+          <Box component={LinkedinIcon} sx={itemIconSx} round {...iconProps} />
+          <span>{t('linkedin')}</span>
+        </Box>
+      </MenuItem>
+    </Menu>
+  );
+}

package/src/index.ts

@@ -21,6 +21,7 @@ import SessionManager from './SessionManager';
 import Datatable from './Datatable';
 import Dialog from './Dialog';
 import DidLogo from './DidLogo';
+import SocialShare from './SocialShare';
 import Tabs from './Tabs';
 import Tag from './Tag';
 import TextCollapse from './TextCollapse';
@@ -61,6 +62,7 @@ export {
   Datatable,
   Dialog,
   DidLogo,
+  SocialShare,
   Tag,
   TextCollapse,
   Theme,