@blocklet/ui-react 2.13.42 → 2.13.43

package/lib/UserCenter/components/editable-field.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TooltipProps } from '@mui/material';
+import type { TooltipProps } from '@mui/material/Tooltip';
 interface EditableFieldProps {
     value: string;
     onChange?: (value: string) => void;

package/lib/UserCenter/components/editable-field.js

@@ -1,6 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { Box, TextField, Typography, Tooltip } from "@mui/material";
+import React, { useState } from "react";
+import Box from "@mui/material/Box";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
+import Tooltip from "@mui/material/Tooltip";
+import useTheme from "@mui/material/styles/useTheme";
 import { useCreation, useMemoizedFn } from "ahooks";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { translate } from "@arcblock/ux/lib/Locale/util";
@@ -58,6 +62,8 @@ function EditableField({
   hidePreview = false
 }) {
   const { locale } = useLocaleContext();
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, "en", data);
   });
@@ -194,7 +200,11 @@ function EditableField({
             alignItems: "center",
             gap: 1,
             children: [
-              icon,
+              React.cloneElement(icon, {
+                style: {
+                  filter: isDark ? "brightness(0) saturate(100%) invert(1)" : "none"
+                }
+              }),
               /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "row", alignItems: "center", width: "90%", children: [
                 /* @__PURE__ */ jsx(
                   Typography,

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

@@ -2,6 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 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 useTheme from "@mui/material/styles/useTheme";
 import { useEffect, useMemo, useState } from "react";
 import { translate } from "@arcblock/ux/lib/Locale/util";
 import { useMemoizedFn } from "ahooks";
@@ -115,6 +116,8 @@ function DynamicLinkForm({ links = [], onChange }) {
 function FaviconPreview({ link }) {
   const [favicon, setFavicon] = useState("");
   const [iconError, setIconError] = useState(false);
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
   useEffect(() => {
     try {
       if (link) {
@@ -142,7 +145,7 @@ function FaviconPreview({ link }) {
     return null;
   }
   if (iconError || !favicon) {
-    return /* @__PURE__ */ jsx(LinkIcon, { width: 20, height: 20 });
+    return /* @__PURE__ */ jsx(LinkIcon, { width: 20, height: 20, style: { filter: isDark ? "brightness(0) saturate(100%) invert(1)" : "none" } });
   }
   return /* @__PURE__ */ jsx("img", { src: favicon, alt: "Favicon", width: 20, height: 20 });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.13.42",
+  "version": "2.13.43",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -34,8 +34,8 @@
   "dependencies": {
     "@abtnode/constant": "^1.16.43",
     "@abtnode/util": "^1.16.43",
-    "@arcblock/bridge": "^2.13.42",
-    "@arcblock/react-hooks": "^2.13.42",
+    "@arcblock/bridge": "^2.13.43",
+    "@arcblock/react-hooks": "^2.13.43",
     "@arcblock/ws": "^1.20.11",
     "@blocklet/constant": "^1.16.43",
     "@blocklet/did-space-react": "^1.0.53",
@@ -94,5 +94,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "30e0b6eaccfe6847ba5404894e8ce76b352053e6"
+  "gitHead": "9b65dc9fcef38218cbf4852cb31a1b76afffab33"
 }

package/src/UserCenter/components/editable-field.tsx

@@ -1,5 +1,10 @@
 import React, { useState } from 'react';
-import { Box, TextField, Typography, Tooltip, TooltipProps } from '@mui/material';
+import Box from '@mui/material/Box';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import Tooltip from '@mui/material/Tooltip';
+import type { TooltipProps } from '@mui/material/Tooltip';
+import useTheme from '@mui/material/styles/useTheme';
 import { useCreation, useMemoizedFn } from 'ahooks';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { translate } from '@arcblock/ux/lib/Locale/util';
@@ -83,6 +88,8 @@ function EditableField({
   hidePreview = false,
 }: EditableFieldProps) {
   const { locale } = useLocaleContext();
+  const theme = useTheme();
+  const isDark = theme.palette.mode === 'dark';
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
   });
@@ -223,7 +230,11 @@ function EditableField({
           display="flex"
           alignItems="center"
           gap={1}>
-          {icon}
+          {React.cloneElement(icon as React.ReactElement, {
+            style: {
+              filter: isDark ? 'brightness(0) saturate(100%) invert(1)' : 'none',
+            },
+          })}
           <Box display="flex" flexDirection="row" alignItems="center" width="90%">
             <Typography
               sx={{

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

@@ -1,6 +1,7 @@
 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 useTheme from '@mui/material/styles/useTheme';
 import { ChangeEvent, useEffect, useMemo, useState } from 'react';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import { useMemoizedFn } from 'ahooks';
@@ -147,6 +148,8 @@ function DynamicLinkForm({ links = [], onChange }: { links: string[]; onChange:
 function FaviconPreview({ link }: { link: string }) {
   const [favicon, setFavicon] = useState('');
   const [iconError, setIconError] = useState(false); // 控制是否显示默认图标
+  const theme = useTheme();
+  const isDark = theme.palette.mode === 'dark';
 
   useEffect(() => {
     try {
@@ -180,7 +183,9 @@ function FaviconPreview({ link }: { link: string }) {
   }
 
   if (iconError || !favicon) {
-    return <LinkIcon width={20} height={20} />;
+    return (
+      <LinkIcon width={20} height={20} style={{ filter: isDark ? 'brightness(0) saturate(100%) invert(1)' : 'none' }} />
+    );
   }
 
   return <img src={favicon} alt="Favicon" width={20} height={20} />;