@blocklet/ui-react 2.13.14 → 2.13.15

package/lib/Dashboard/index.js

@@ -6,12 +6,12 @@ import { SessionContext } from "@arcblock/did-connect/lib/Session";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import UxImg from "@arcblock/ux/lib/Img";
 import UxDashboard from "@arcblock/ux/lib/Layout/dashboard";
+import useBlockletLogo from "@arcblock/ux/lib/hooks/use-blocklet-logo";
 import { BlockletMetaProps, SessionManagerProps } from "../types.js";
 import { mapRecursive, flatRecursive, matchPaths } from "../utils.js";
 import { publicPath, formatBlockletInfo, getLocalizedNavigation, filterNavByRole } from "../blocklets.js";
 import HeaderAddons from "../common/header-addons.js";
 import { useWalletHiddenTopbar } from "../common/wallet-hidden-topbar.js";
-import useBlockletLogo from "../hooks/use-blocklet-logo.js";
 function Dashboard({
   meta,
   fallbackUrl,

package/lib/Footer/index.js

@@ -5,13 +5,13 @@ import { styled, useTheme, deepmerge, ThemeProvider } from "@arcblock/ux/lib/The
 import { withErrorBoundary } from "react-error-boundary";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { ErrorFallback } from "@arcblock/ux/lib/ErrorBoundary";
+import useBlockletLogo from "@arcblock/ux/lib/hooks/use-blocklet-logo";
 import omit from "lodash/omit";
 import InternalFooter from "./internal-footer.js";
 import { mapRecursive } from "../utils.js";
 import { formatBlockletInfo, getLocalizedNavigation } from "../blocklets.js";
 import { BlockletMetaProps } from "../types.js";
 import withHideWhenEmbed from "../libs/with-hide-when-embed.js";
-import useBlockletLogo from "../hooks/use-blocklet-logo.js";
 function Footer({ meta, theme: themeOverrides, ...rest }) {
   const { locale } = useLocaleContext() || {};
   const parentTheme = useTheme();

package/lib/Header/index.js

@@ -8,6 +8,7 @@ import { ResponsiveHeader } from "@arcblock/ux/lib/Header";
 import NavMenu, { Products } from "@arcblock/ux/lib/NavMenu";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { translate } from "@arcblock/ux/lib/Locale/util";
+import useBlockletLogo from "@arcblock/ux/lib/hooks/use-blocklet-logo";
 import omit from "lodash/omit";
 import isFinite from "lodash/isFinite";
 import clsx from "clsx";
@@ -17,7 +18,6 @@ import { publicPath, formatBlockletInfo, getLocalizedNavigation } from "../block
 import HeaderAddons from "../common/header-addons.js";
 import { useWalletHiddenTopbar } from "../common/wallet-hidden-topbar.js";
 import withHideWhenEmbed from "../libs/with-hide-when-embed.js";
-import useBlockletLogo from "../hooks/use-blocklet-logo.js";
 const translations = {
   en: {
     products: "Products"

package/lib/UserCenter/components/third-party-login/third-party-item.js

@@ -147,7 +147,22 @@ export default function ThirdPartyItem({
           overflow: "hidden"
         },
         children: [
-          /* @__PURE__ */ jsx(Box, { component: Icon, icon, width: "1em", height: "1em", sx: { flexShrink: 0, fontSize: 16 } }),
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              component: Icon,
+              icon,
+              width: "1em",
+              height: "1em",
+              fill: "currentColor",
+              sx: {
+                flexShrink: 0,
+                fontSize: 16,
+                // githubIcon 不支持变色，dark 模式做一个反色处理
+                filter: ({ palette }) => item?.provider === LOGIN_PROVIDER.GITHUB && palette.mode === "dark" ? "invert(1)" : "none"
+              }
+            }
+          ),
           /* @__PURE__ */ jsx(
             Box,
             {

package/lib/UserCenter/components/user-info/link-preview-input.js

@@ -1,6 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Box, Button, FormControl, IconButton, TextField, Typography } from "@mui/material";
-import styled from "@emotion/styled";
+import { Box, Button, FormControl, IconButton, styled, TextField, Typography } from "@mui/material";
 import RemoveIcon from "@mui/icons-material/Remove";
 import AddIcon from "@mui/icons-material/Add";
 import { useEffect, useMemo, useState } from "react";
@@ -173,14 +172,14 @@ export function LinkPreviewInput({
     link
   )) });
 }
-const LinkDiv = styled.span`
+const LinkDiv = styled("span")`
   flex: 1;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   &,
   & > * {
-    color: #222;
+    color: ${({ theme }) => theme.palette.text.primary};
   }
 
   & > * {

package/lib/UserCenter/components/user-info/user-info.js

@@ -53,11 +53,13 @@ export default function UserInfo({
       title: t("registerFrom"),
       content: readableProvider
     });
-    userInfoListData.push({
-      icon: /* @__PURE__ */ jsx(Icon, { fontSize: 16, icon: CaptivePortalRoundedIcon }),
-      title: t("invitedBy"),
-      content: user?.inviter ? /* @__PURE__ */ jsx(DID, { style: { maxWidth: 260 }, did: user.inviter, showQrcode: true, copyable: true, compact: true, responsive: true, locale }) : "-"
-    });
+    if (user?.inviter) {
+      userInfoListData.push({
+        icon: /* @__PURE__ */ jsx(Icon, { fontSize: 16, icon: CaptivePortalRoundedIcon }),
+        title: t("invitedBy"),
+        content: /* @__PURE__ */ jsx(DID, { style: { maxWidth: 260 }, did: user.inviter, showQrcode: true, copyable: true, compact: true, responsive: true, locale })
+      });
+    }
   }
   return /* @__PURE__ */ jsx(
     Box,

package/lib/UserSessions/components/user-sessions.js

@@ -318,12 +318,10 @@ export default function UserSessions({
         },
         ".MuiTableCell-head": {
           whiteSpace: "nowrap",
-          fontWeight: "bold",
-          backgroundColor: "background.default"
+          fontWeight: "bold"
         },
         ".MuiTableRow-root": {
           border: "unset",
-          backgroundColor: "background.default",
           "&:nth-child(even)": {
             backgroundColor: "grey.50",
             "&:hover": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.13.14",
+  "version": "2.13.15",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -34,8 +34,8 @@
   "dependencies": {
     "@abtnode/constant": "^1.16.42",
     "@abtnode/util": "^1.16.42",
-    "@arcblock/bridge": "^2.13.14",
-    "@arcblock/react-hooks": "^2.13.14",
+    "@arcblock/bridge": "^2.13.15",
+    "@arcblock/react-hooks": "^2.13.15",
     "@arcblock/ws": "^1.20.2",
     "@blocklet/constant": "^1.16.42",
     "@blocklet/did-space-react": "^1.0.48",
@@ -94,5 +94,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "b9f48199169b641a2d3277806501471a56dd496d"
+  "gitHead": "94d15cfb22e13272502bb40863c5b059cb13eab5"
 }

package/src/Dashboard/index.jsx

@@ -7,12 +7,12 @@ import { SessionContext } from '@arcblock/did-connect/lib/Session';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import UxImg from '@arcblock/ux/lib/Img';
 import UxDashboard from '@arcblock/ux/lib/Layout/dashboard';
+import useBlockletLogo from '@arcblock/ux/lib/hooks/use-blocklet-logo';
 import { BlockletMetaProps, SessionManagerProps } from '../types';
 import { mapRecursive, flatRecursive, matchPaths } from '../utils';
 import { publicPath, formatBlockletInfo, getLocalizedNavigation, filterNavByRole } from '../blocklets';
 import HeaderAddons from '../common/header-addons';
 import { useWalletHiddenTopbar } from '../common/wallet-hidden-topbar';
-import useBlockletLogo from '../hooks/use-blocklet-logo';
 
 /**
  * 专门用于 (composable) blocklet 的 Dashboard 组件, 解析 blocklet meta 中 section 为 dashboard 的 navigation 数据, 渲染一个 UX Dashboard

package/src/Footer/index.jsx

@@ -4,6 +4,7 @@ import { styled, useTheme, deepmerge, ThemeProvider } from '@arcblock/ux/lib/The
 import { withErrorBoundary } from 'react-error-boundary';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
+import useBlockletLogo from '@arcblock/ux/lib/hooks/use-blocklet-logo';
 import omit from 'lodash/omit';
 
 import InternalFooter from './internal-footer';
@@ -11,7 +12,6 @@ import { mapRecursive } from '../utils';
 import { formatBlockletInfo, getLocalizedNavigation } from '../blocklets';
 import { BlockletMetaProps } from '../types';
 import withHideWhenEmbed from '../libs/with-hide-when-embed';
-import useBlockletLogo from '../hooks/use-blocklet-logo';
 
 /**
  * 专门用于 (composable) blocklet 的 Footer 组件, 基于 blocklet meta 中的数据渲染

package/src/Header/index.tsx

@@ -7,6 +7,7 @@ import { ResponsiveHeader } from '@arcblock/ux/lib/Header';
 import NavMenu, { Products } from '@arcblock/ux/lib/NavMenu';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { translate } from '@arcblock/ux/lib/Locale/util';
+import useBlockletLogo from '@arcblock/ux/lib/hooks/use-blocklet-logo';
 import omit from 'lodash/omit';
 import isFinite from 'lodash/isFinite';
 import type { BoxProps, Breakpoint } from '@mui/material';
@@ -19,7 +20,6 @@ import HeaderAddons from '../common/header-addons';
 import { useWalletHiddenTopbar } from '../common/wallet-hidden-topbar';
 import { BlockletMetaProps, SessionManagerProps } from '../@types';
 import withHideWhenEmbed from '../libs/with-hide-when-embed';
-import useBlockletLogo from '../hooks/use-blocklet-logo';
 
 const translations = {
   en: {

package/src/UserCenter/components/third-party-login/third-party-item.tsx

@@ -170,7 +170,20 @@ export default function ThirdPartyItem({
           lineHeight: 1,
           overflow: 'hidden',
         }}>
-        <Box component={Icon} icon={icon} width="1em" height="1em" sx={{ flexShrink: 0, fontSize: 16 }} />
+        <Box
+          component={Icon}
+          icon={icon}
+          width="1em"
+          height="1em"
+          fill="currentColor"
+          sx={{
+            flexShrink: 0,
+            fontSize: 16,
+            // githubIcon 不支持变色，dark 模式做一个反色处理
+            filter: ({ palette }) =>
+              item?.provider === LOGIN_PROVIDER.GITHUB && palette.mode === 'dark' ? 'invert(1)' : 'none',
+          }}
+        />
         <Box
           sx={{
             flex: 1,

package/src/UserCenter/components/user-info/link-preview-input.tsx

@@ -1,5 +1,4 @@
-import { Box, Button, FormControl, IconButton, TextField, Typography } from '@mui/material';
-import styled from '@emotion/styled';
+import { Box, Button, FormControl, IconButton, styled, TextField, Typography } from '@mui/material';
 import RemoveIcon from '@mui/icons-material/Remove';
 import AddIcon from '@mui/icons-material/Add';
 import { ChangeEvent, useEffect, useMemo, useState } from 'react';
@@ -224,14 +223,14 @@ export function LinkPreviewInput({
   );
 }
 
-const LinkDiv = styled.span`
+const LinkDiv = styled('span')`
   flex: 1;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   &,
   & > * {
-    color: #222;
+    color: ${({ theme }) => theme.palette.text.primary};
   }
 
   & > * {

package/src/UserCenter/components/user-info/user-info.tsx

@@ -63,15 +63,15 @@ export default function UserInfo({
       title: t('registerFrom'),
       content: readableProvider,
     });
-    userInfoListData.push({
-      icon: <Icon fontSize={16} icon={CaptivePortalRoundedIcon} />,
-      title: t('invitedBy'),
-      content: user?.inviter ? (
-        <DID style={{ maxWidth: 260 }} did={user.inviter} showQrcode copyable compact responsive locale={locale} />
-      ) : (
-        '-'
-      ),
-    });
+    if (user?.inviter) {
+      userInfoListData.push({
+        icon: <Icon fontSize={16} icon={CaptivePortalRoundedIcon} />,
+        title: t('invitedBy'),
+        content: (
+          <DID style={{ maxWidth: 260 }} did={user.inviter} showQrcode copyable compact responsive locale={locale} />
+        ),
+      });
+    }
   }
 
   return (

package/src/UserSessions/components/user-sessions.tsx

@@ -391,11 +391,9 @@ export default function UserSessions({
         '.MuiTableCell-head': {
           whiteSpace: 'nowrap',
           fontWeight: 'bold',
-          backgroundColor: 'background.default',
         },
         '.MuiTableRow-root': {
           border: 'unset',
-          backgroundColor: 'background.default',
           '&:nth-child(even)': {
             backgroundColor: 'grey.50',
             '&:hover': {

package/lib/hooks/use-blocklet-logo.d.ts

@@ -1,8 +0,0 @@
-import { type Breakpoint } from '@mui/material';
-import { type ThemeOptions } from '@blocklet/theme';
-export default function useBlockletLogo({ key, meta, theme: themeOverrides, square, }?: {
-    key?: number | Breakpoint;
-    meta?: any;
-    theme?: ThemeOptions;
-    square?: boolean;
-}): any;

package/lib/hooks/use-blocklet-logo.js

@@ -1,23 +0,0 @@
-import { useTheme } from "@arcblock/ux/lib/Theme";
-import { useCreation } from "ahooks";
-import useMobile from "./use-mobile.js";
-export default function useBlockletLogo({
-  key = "sm",
-  meta = {},
-  theme: themeOverrides = {},
-  square
-} = {}) {
-  const isMobileDevice = useMobile({ key });
-  const theme = useTheme();
-  const mode = useCreation(() => {
-    return themeOverrides?.palette?.mode || theme.palette.mode;
-  }, [theme, themeOverrides]);
-  const finalAppLogo = useCreation(() => {
-    const { appLogo, appLogoDark, appLogoRect, appLogoRectDark } = Object.assign(window.blocklet ?? {}, meta);
-    const isDark = mode === "dark";
-    const squareLogo = (isDark ? appLogoDark : appLogo) || appLogo;
-    const rectLogo = (isDark ? appLogoRectDark || appLogoDark : appLogoRect) || appLogoRect;
-    return isMobileDevice || square ? squareLogo : rectLogo || squareLogo || "";
-  }, [mode, meta, isMobileDevice, square]);
-  return finalAppLogo;
-}

package/src/hooks/use-blocklet-logo.tsx

@@ -1,32 +0,0 @@
-import { type Breakpoint } from '@mui/material';
-import { type ThemeOptions } from '@blocklet/theme';
-import { useTheme } from '@arcblock/ux/lib/Theme';
-import { useCreation } from 'ahooks';
-import useMobile from './use-mobile';
-
-export default function useBlockletLogo({
-  key = 'sm',
-  meta = {},
-  theme: themeOverrides = {},
-  square,
-}: { key?: number | Breakpoint; meta?: any; theme?: ThemeOptions; square?: boolean } = {}) {
-  const isMobileDevice = useMobile({ key });
-  const theme = useTheme();
-
-  const mode = useCreation(() => {
-    return themeOverrides?.palette?.mode || theme.palette.mode;
-  }, [theme, themeOverrides]);
-
-  const finalAppLogo = useCreation(() => {
-    const { appLogo, appLogoDark, appLogoRect, appLogoRectDark } = Object.assign(window.blocklet ?? {}, meta);
-    const isDark = mode === 'dark';
-
-    const squareLogo = (isDark ? appLogoDark : appLogo) || appLogo;
-    // 深色模式尽可能优先使用深色图标
-    const rectLogo = (isDark ? appLogoRectDark || appLogoDark : appLogoRect) || appLogoRect;
-
-    return isMobileDevice || square ? squareLogo : rectLogo || squareLogo || '';
-  }, [mode, meta, isMobileDevice, square]);
-
-  return finalAppLogo;
-}