@blocklet/ui-react 2.12.9 → 2.12.11

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

@@ -121,7 +121,7 @@ function EditableField({
       Typography,
       {
         variant: "subtitle1",
-        component: "p",
+        component: "div",
         gutterBottom: true,
         sx: {
           width: "100%",

package/lib/UserCenter/components/user-info/metadata.d.ts

@@ -3,5 +3,4 @@ export default function UserMetadataComponent({ isMyself, user, onSave, }: {
     isMyself: boolean;
     user: User;
     onSave: (v: UserMetadata) => void;
-    isMobile?: boolean;
 }): import("react").JSX.Element;

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

@@ -17,17 +17,18 @@ import { translate } from "@arcblock/ux/lib/Locale/util";
 import isEmail from "validator/lib/isEmail";
 import isMobilePhone from "validator/lib/isMobilePhone";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import ArrowDownwardIcon from "@arcblock/icons/lib/ArrowDown";
 import { useBrowser } from "@arcblock/react-hooks";
 import { translations } from "../../libs/locales.js";
 import EditableField from "../editable-field.js";
 import { LinkPreviewInput } from "./link-preview-input.js";
 import { getTimezones } from "./utils.js";
 import Clock from "./clock.js";
+const timezones = getTimezones();
 const LocationIcon = lazy(() => import("@arcblock/icons/lib/Location"));
 const TimezoneIcon = lazy(() => import("@arcblock/icons/lib/Timezone"));
 const EmailIcon = lazy(() => import("@arcblock/icons/lib/Email"));
 const PhoneIcon = lazy(() => import("@arcblock/icons/lib/Phone"));
-const ArrowDownwardIcon = lazy(() => import("@arcblock/icons/lib/ArrowDown"));
 const defaultButtonStyle = {
   color: colors.foregroundsFgBase,
   borderColor: colors.strokeBorderBase,
@@ -113,7 +114,6 @@ export default function UserMetadataComponent({
   const onChange = (v, field) => {
     metadata[field] = v;
   };
-  const timezones = getTimezones();
   const onEdit = () => {
     if (!isMobileView) {
       setEditable(true);
@@ -247,6 +247,11 @@ export default function UserMetadataComponent({
               placeholder: "Timezone",
               IconComponent: (props) => /* @__PURE__ */ jsx(ArrowDownwardIcon, { ...props, width: 20, height: 20 }),
               MenuProps: {
+                PaperProps: {
+                  style: {
+                    maxHeight: "400px"
+                  }
+                },
                 style: {
                   zIndex: mode === "drawer" ? 9999 : 1300
                 }

package/lib/UserCenter/components/user-info/user-basic-info.d.ts

@@ -1,6 +1,6 @@
 import type { BoxProps } from '@mui/material';
 import type { User } from '../../../@types';
-export default function UserBasicInfo({ user, isMyself, showFullDid, switchPassport, switchProfile, ...rest }: {
+export default function UserBasicInfo({ user, isMyself, showFullDid, switchPassport, switchProfile, isMobile, ...rest }: {
     user: User;
     isMyself?: boolean;
     showFullDid?: boolean;

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

@@ -24,6 +24,7 @@ export default function UserBasicInfo({
   showFullDid = true,
   switchPassport,
   switchProfile,
+  isMobile = false,
   ...rest
 }) {
   const { locale } = useLocaleContext();
@@ -94,7 +95,7 @@ export default function UserBasicInfo({
         ...rest.sx ?? {}
       },
       children: [
-        /* @__PURE__ */ jsxs(Box, { className: "user-info", display: "flex", flexDirection: rest.isMobile ? "row" : "column", gap: 2, children: [
+        /* @__PURE__ */ jsxs(Box, { className: "user-info", display: "flex", flexDirection: isMobile ? "row" : "column", gap: 2, children: [
           /* @__PURE__ */ jsxs(
             Box,
             {
@@ -109,7 +110,7 @@ export default function UserBasicInfo({
                   {
                     src: user?.avatar,
                     did: user?.did,
-                    size: rest.size || (rest.isMobile ? 64 : 100),
+                    size: rest.size || (isMobile ? 64 : 100),
                     variant: "circle",
                     shape: "circle",
                     sx: {
@@ -142,8 +143,8 @@ export default function UserBasicInfo({
                 /* @__PURE__ */ jsx(
                   UserStatus,
                   {
-                    isMobile: rest.isMobile,
-                    size: rest.size || (rest.isMobile ? 64 : 100),
+                    isMobile,
+                    size: rest.size || (isMobile ? 64 : 100),
                     isMyself,
                     status: userStatus,
                     onChange: onUpdateUserStatus
@@ -193,7 +194,7 @@ export default function UserBasicInfo({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx(UserMetadataComponent, { isMobile: rest.isMobile, isMyself, user, onSave }),
+        /* @__PURE__ */ jsx(UserMetadataComponent, { isMyself, user, onSave }),
         isMyself ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Divider, { sx: { my: 3, borderColor: colors.dividerColor } }),
           /* @__PURE__ */ jsx(Typography, { component: "p", color: "text.secondary", fontSize: "14px", mb: 2, children: t("profile.justForYou") }),

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

@@ -127,7 +127,7 @@ export default function UserStatus({
     /* @__PURE__ */ jsx(StatusSelector, { selected: status, data: statusData, open, onSelect: onStatusChange, anchorEl })
   ] });
 }
-const StatusDiv = styled(Box)`
+const StatusDiv = styled("div")`
   position: absolute;
   left: ${({ size }) => `${size * 3 / 4}px`};
   top: ${({ size }) => `${size * 0.65}px`};
@@ -148,6 +148,5 @@ const StatusDiv = styled(Box)`
     height: ${({ isMobile }) => isMobile ? "16px" : "26px"};
     border-radius: ${({ isMobile }) => isMobile ? "8px" : "13px"};
     background-color: #eff1f5;
-    // background-color: #39b380;
   }
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.12.9",
+  "version": "2.12.11",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -33,8 +33,8 @@
   },
   "dependencies": {
     "@abtnode/constant": "^1.16.39",
-    "@arcblock/bridge": "^2.12.9",
-    "@arcblock/react-hooks": "^2.12.9",
+    "@arcblock/bridge": "^2.12.11",
+    "@arcblock/react-hooks": "^2.12.11",
     "@arcblock/ws": "^1.19.15",
     "@blocklet/did-space-react": "^1.0.26",
     "@iconify-icons/logos": "^1.2.36",
@@ -87,5 +87,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "70e427c9ce212734adf54b38890880ec28856d37"
+  "gitHead": "5da393fc86f84a367e809b75d55fa27be2350c6c"
 }

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

@@ -136,7 +136,7 @@ function EditableField({
       <Tooltip title={tooltip} placement="top">
         <Typography
           variant="subtitle1"
-          component="p"
+          component="div"
           gutterBottom
           sx={{
             width: '100%',

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

@@ -19,6 +19,7 @@ import isEmail from 'validator/lib/isEmail';
 import isMobilePhone from 'validator/lib/isMobilePhone';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 
+import ArrowDownwardIcon from '@arcblock/icons/lib/ArrowDown';
 import { useBrowser } from '@arcblock/react-hooks';
 import { translations } from '../../libs/locales';
 import type { User, UserMetadata } from '../../../@types';
@@ -27,11 +28,12 @@ import { LinkPreviewInput } from './link-preview-input';
 import { getTimezones } from './utils';
 import Clock from './clock';
 
+const timezones = getTimezones();
+
 const LocationIcon = lazy(() => import('@arcblock/icons/lib/Location'));
 const TimezoneIcon = lazy(() => import('@arcblock/icons/lib/Timezone'));
 const EmailIcon = lazy(() => import('@arcblock/icons/lib/Email'));
 const PhoneIcon = lazy(() => import('@arcblock/icons/lib/Phone'));
-const ArrowDownwardIcon = lazy(() => import('@arcblock/icons/lib/ArrowDown'));
 
 const defaultButtonStyle = {
   color: colors.foregroundsFgBase,
@@ -93,7 +95,6 @@ export default function UserMetadataComponent({
   isMyself: boolean;
   user: User;
   onSave: (v: UserMetadata) => void;
-  isMobile?: boolean;
 }) {
   const [editable, setEditable] = useState(false);
   const [visible, setVisible] = useState(false);
@@ -138,8 +139,6 @@ export default function UserMetadataComponent({
     metadata[field] = v;
   };
 
-  const timezones = getTimezones();
-
   const onEdit = () => {
     if (!isMobileView) {
       setEditable(true);
@@ -272,6 +271,11 @@ export default function UserMetadataComponent({
             placeholder="Timezone"
             IconComponent={(props) => <ArrowDownwardIcon {...props} width={20} height={20} />}
             MenuProps={{
+              PaperProps: {
+                style: {
+                  maxHeight: '400px',
+                },
+              },
               style: {
                 zIndex: mode === 'drawer' ? 9999 : 1300,
               },

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

@@ -28,6 +28,7 @@ export default function UserBasicInfo({
   showFullDid = true,
   switchPassport,
   switchProfile,
+  isMobile = false,
   ...rest
 }: {
   user: User;
@@ -115,7 +116,7 @@ export default function UserBasicInfo({
         position: 'relative',
         ...(rest.sx ?? {}),
       }}>
-      <Box className="user-info" display="flex" flexDirection={rest.isMobile ? 'row' : 'column'} gap={2}>
+      <Box className="user-info" display="flex" flexDirection={isMobile ? 'row' : 'column'} gap={2}>
         <Box
           className="user-avatar"
           position="relative"
@@ -126,7 +127,7 @@ export default function UserBasicInfo({
             //  @ts-ignore
             src={user?.avatar}
             did={user?.did}
-            size={rest.size || (rest.isMobile ? 64 : 100)}
+            size={rest.size || (isMobile ? 64 : 100)}
             variant="circle"
             shape="circle"
             sx={{
@@ -158,8 +159,8 @@ export default function UserBasicInfo({
             onClick={isMyself ? switchProfile : noop}
           />
           <UserStatus
-            isMobile={rest.isMobile}
-            size={rest.size || (rest.isMobile ? 64 : 100)}
+            isMobile={isMobile}
+            size={rest.size || (isMobile ? 64 : 100)}
             isMyself={isMyself}
             status={userStatus}
             onChange={onUpdateUserStatus}
@@ -193,7 +194,7 @@ export default function UserBasicInfo({
           />
         </Box>
       </Box>
-      <UserMetadataComponent isMobile={rest.isMobile} isMyself={isMyself} user={user} onSave={onSave} />
+      <UserMetadataComponent isMyself={isMyself} user={user} onSave={onSave} />
       {isMyself ? (
         <>
           <Divider sx={{ my: 3, borderColor: colors.dividerColor }} />

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

@@ -156,7 +156,7 @@ export default function UserStatus({
   );
 }
 
-const StatusDiv = styled(Box)<{ size: number; isMobile?: boolean }>`
+const StatusDiv = styled('div')<{ size: number; isMobile?: boolean }>`
   position: absolute;
   left: ${({ size }) => `${(size * 3) / 4}px`};
   top: ${({ size }) => `${size * 0.65}px`};
@@ -177,6 +177,5 @@ const StatusDiv = styled(Box)<{ size: number; isMobile?: boolean }>`
     height: ${({ isMobile }) => (isMobile ? '16px' : '26px')};
     border-radius: ${({ isMobile }) => (isMobile ? '8px' : '13px')};
     background-color: #eff1f5;
-    // background-color: #39b380;
   }
 `;