@blocklet/ui-react 2.12.32 → 2.12.34

package/lib/@types/index.d.ts

@@ -81,7 +81,8 @@ export type UserAddress = {
     country?: string;
     province?: string;
     city?: string;
-    detailedAddress?: string;
+    line1?: string;
+    line2?: string;
     postalCode?: string;
 };
 export type User = UserPublicInfo & {

package/lib/UserCenter/components/nft.js

@@ -41,9 +41,10 @@ export default function Nft({ user }) {
   };
   const content = useCreation(() => {
     if (loading) {
+      const skeletonItems = ["skeleton-1", "skeleton-2", "skeleton-3", "skeleton-4", "skeleton-5"].map((id) => /* @__PURE__ */ jsx(Skeleton, { variant: "rectangular", width: "15%", height: 166, sx: { borderRadius: 2, flexShrink: 0 } }, id));
       return /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", gap: 2, children: [
         /* @__PURE__ */ jsx(Skeleton, { width: "20%" }),
-        /* @__PURE__ */ jsx(Skeleton, { variant: "rectangular", height: 200, sx: { borderRadius: 2 } })
+        /* @__PURE__ */ jsx(Box, { display: "flex", flexDirection: "row", gap: 2, flexWrap: "nowrap", children: skeletonItems })
       ] });
     }
     return /* @__PURE__ */ jsxs(Fragment, { children: [

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

@@ -3,7 +3,8 @@ interface AddressErrors {
     country?: string;
     province?: string;
     city?: string;
-    detailedAddress?: string;
+    line1?: string;
+    line2?: string;
     postalCode?: string;
 }
 export default function AddressEditor({ address, errors, handleChange, defaultCountry, }: {

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

@@ -89,14 +89,27 @@ export default function AddressEditor({
     /* @__PURE__ */ jsx(
       EditableField,
       {
-        value: address.detailedAddress || "",
-        onChange: (value) => handleChange("detailedAddress", value),
-        placeholder: t("profile.address.detailedAddress"),
-        label: t("profile.address.detailedAddress"),
+        value: address.line1 || "",
+        onChange: (value) => handleChange("line1", value),
+        placeholder: t("profile.address.line1"),
+        label: t("profile.address.line1"),
         component: "textarea",
         editable: true,
-        rows: 3,
-        errorMsg: errors.detailedAddress
+        rows: 2,
+        errorMsg: errors.line1
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      EditableField,
+      {
+        value: address.line2 || "",
+        onChange: (value) => handleChange("line2", value),
+        placeholder: t("profile.address.line2"),
+        label: t("profile.address.line2"),
+        component: "textarea",
+        editable: true,
+        rows: 2,
+        errorMsg: errors.line2
       }
     ),
     /* @__PURE__ */ jsx(

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

@@ -10,6 +10,7 @@ import { joinURL } from "ufo";
 import Button from "@arcblock/ux/lib/Button";
 import PhoneInput, { validatePhoneNumber } from "@arcblock/ux/lib/PhoneInput";
 import cloneDeep from "lodash/cloneDeep";
+import omit from "lodash/omit";
 import { mergeSx } from "@arcblock/ux/lib/Util/style";
 import { useCreation, useMemoizedFn, useReactive } from "ahooks";
 import { useMemo, useRef, useState, memo, forwardRef, useEffect, lazy } from "react";
@@ -72,7 +73,8 @@ export default function UserMetadataComponent({
     country: "",
     province: "",
     city: "",
-    detailedAddress: "",
+    line1: "",
+    line2: "",
     postalCode: ""
   });
   useEffect(() => {
@@ -105,7 +107,8 @@ export default function UserMetadataComponent({
       country: "",
       province: "",
       city: "",
-      detailedAddress: "",
+      line1: "",
+      line2: "",
       postalCode: ""
     }
   );
@@ -232,7 +235,8 @@ export default function UserMetadataComponent({
     if ([validateMsg, addressValidateMsg].some((o) => Object.values(o).some((e) => e))) {
       return;
     }
-    onSave({ metadata, address });
+    const newAddress = omit(address, "detailedAddress");
+    onSave({ metadata, address: newAddress });
     setEditable(false);
     setVisible(false);
   };
@@ -296,10 +300,16 @@ export default function UserMetadataComponent({
               editable: editing,
               placeholder: "Location",
               label: t("profile.location"),
-              tooltip: isMyself ? /* @__PURE__ */ jsxs(Box, { fontSize: "14px", children: [
-                /* @__PURE__ */ jsx(Typography, { variant: "caption", component: "p", fontWeight: 600, children: t("profile.address.detailedAddress") }),
-                /* @__PURE__ */ jsx(Typography, { variant: "caption", component: "span", children: address.detailedAddress })
-              ] }) : null,
+              tooltip: isMyself ? /* @__PURE__ */ jsx(Fragment, { children: ["line1", "line2"].map((k) => {
+                const value = address[k];
+                if (!value) {
+                  return null;
+                }
+                return /* @__PURE__ */ jsxs(Box, { children: [
+                  /* @__PURE__ */ jsx(Typography, { variant: "caption", component: "p", fontWeight: 600, sx: { mb: 0 }, children: t(`profile.address.${k}`) }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "caption", component: "span", children: address[k] })
+                ] }, k);
+              }) }) : null,
               renderValue: () => {
                 const fullLocation = [address.country, address.province, address.city || metadata.location || ""].filter(Boolean).join(" ");
                 return /* @__PURE__ */ jsx(Typography, { component: "span", children: fullLocation });

package/lib/UserCenter/libs/locales.d.ts

@@ -144,6 +144,8 @@ export declare const translations: {
                 country: string;
                 province: string;
                 city: string;
+                line1: string;
+                line2: string;
                 detailedAddress: string;
                 postalCode: string;
                 invalidPostalCode: string;
@@ -296,6 +298,8 @@ export declare const translations: {
                 country: string;
                 province: string;
                 city: string;
+                line1: string;
+                line2: string;
                 detailedAddress: string;
                 postalCode: string;
                 invalidPostalCode: string;

package/lib/UserCenter/libs/locales.js

@@ -144,6 +144,8 @@ export const translations = {
         country: "\u56FD\u5BB6/\u5730\u533A",
         province: "\u5DDE/\u7701",
         city: "\u57CE\u5E02/\u9547",
+        line1: "\u5730\u5740",
+        line2: "\u5730\u57402",
         detailedAddress: "\u8BE6\u7EC6\u5730\u5740",
         postalCode: "\u90AE\u653F\u7F16\u7801",
         invalidPostalCode: "\u90AE\u653F\u7F16\u7801\u683C\u5F0F\u4E0D\u6B63\u786E"
@@ -296,6 +298,8 @@ export const translations = {
         country: "Country/Region",
         province: "State/Province",
         city: "City/Town",
+        line1: "Address",
+        line2: "Address 2",
         detailedAddress: "Detailed Address",
         postalCode: "Postal Code",
         invalidPostalCode: "Postal code is invalid"

package/package.json

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

package/src/@types/index.ts

@@ -93,7 +93,8 @@ export type UserAddress = {
   country?: string;
   province?: string;
   city?: string;
-  detailedAddress?: string;
+  line1?: string;
+  line2?: string;
   postalCode?: string;
 };
 

package/src/UserCenter/components/nft.tsx

@@ -64,10 +64,16 @@ export default function Nft({ user }: { user: User }) {
 
   const content = useCreation(() => {
     if (loading) {
+      const skeletonItems = ['skeleton-1', 'skeleton-2', 'skeleton-3', 'skeleton-4', 'skeleton-5'].map((id) => (
+        <Skeleton key={id} variant="rectangular" width="15%" height={166} sx={{ borderRadius: 2, flexShrink: 0 }} />
+      ));
+
       return (
         <Box display="flex" flexDirection="column" gap={2}>
           <Skeleton width="20%" />
-          <Skeleton variant="rectangular" height={200} sx={{ borderRadius: 2 }} />
+          <Box display="flex" flexDirection="row" gap={2} flexWrap="nowrap">
+            {skeletonItems}
+          </Box>
         </Box>
       );
     }

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

@@ -36,7 +36,8 @@ interface AddressErrors {
   country?: string;
   province?: string;
   city?: string;
-  detailedAddress?: string;
+  line1?: string;
+  line2?: string;
   postalCode?: string;
 }
 
@@ -98,14 +99,25 @@ export default function AddressEditor({
       </Box>
 
       <EditableField
-        value={address.detailedAddress || ''}
-        onChange={(value) => handleChange('detailedAddress', value)}
-        placeholder={t('profile.address.detailedAddress')}
-        label={t('profile.address.detailedAddress')}
+        value={address.line1 || ''}
+        onChange={(value) => handleChange('line1', value)}
+        placeholder={t('profile.address.line1')}
+        label={t('profile.address.line1')}
         component="textarea"
         editable
-        rows={3}
-        errorMsg={errors.detailedAddress}
+        rows={2}
+        errorMsg={errors.line1}
+      />
+
+      <EditableField
+        value={address.line2 || ''}
+        onChange={(value) => handleChange('line2', value)}
+        placeholder={t('profile.address.line2')}
+        label={t('profile.address.line2')}
+        component="textarea"
+        editable
+        rows={2}
+        errorMsg={errors.line2}
       />
 
       <EditableField

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

@@ -11,6 +11,7 @@ import { joinURL } from 'ufo';
 import Button from '@arcblock/ux/lib/Button';
 import PhoneInput, { PhoneValue, validatePhoneNumber } from '@arcblock/ux/lib/PhoneInput';
 import cloneDeep from 'lodash/cloneDeep';
+import omit from 'lodash/omit';
 import { mergeSx } from '@arcblock/ux/lib/Util/style';
 
 import { useCreation, useMemoizedFn, useReactive } from 'ahooks';
@@ -86,7 +87,8 @@ export default function UserMetadataComponent({
     country: '',
     province: '',
     city: '',
-    detailedAddress: '',
+    line1: '',
+    line2: '',
     postalCode: '',
   });
 
@@ -129,7 +131,8 @@ export default function UserMetadataComponent({
           country: '',
           province: '',
           city: '',
-          detailedAddress: '',
+          line1: '',
+          line2: '',
           postalCode: '',
         }
   );
@@ -288,7 +291,10 @@ export default function UserMetadataComponent({
       return;
     }
 
-    onSave({ metadata, address });
+    // 兼容代码。移除之前的 detailedAddress 字段
+    const newAddress = omit(address, 'detailedAddress');
+
+    onSave({ metadata, address: newAddress });
     setEditable(false);
     setVisible(false);
   };
@@ -348,14 +354,24 @@ export default function UserMetadataComponent({
             label={t('profile.location')}
             tooltip={
               isMyself ? (
-                <Box fontSize="14px">
-                  <Typography variant="caption" component="p" fontWeight={600}>
-                    {t('profile.address.detailedAddress')}
-                  </Typography>
-                  <Typography variant="caption" component="span">
-                    {address.detailedAddress}
-                  </Typography>
-                </Box>
+                <>
+                  {['line1', 'line2'].map((k) => {
+                    const value = address[k as keyof UserAddress];
+                    if (!value) {
+                      return null;
+                    }
+                    return (
+                      <Box key={k}>
+                        <Typography variant="caption" component="p" fontWeight={600} sx={{ mb: 0 }}>
+                          {t(`profile.address.${k}`)}
+                        </Typography>
+                        <Typography variant="caption" component="span">
+                          {address[k as keyof UserAddress]}
+                        </Typography>
+                      </Box>
+                    );
+                  })}
+                </>
               ) : null
             }
             renderValue={() => {

package/src/UserCenter/libs/locales.ts

@@ -146,6 +146,8 @@ export const translations = {
         country: '国家/地区',
         province: '州/省',
         city: '城市/镇',
+        line1: '地址',
+        line2: '地址2',
         detailedAddress: '详细地址',
         postalCode: '邮政编码',
         invalidPostalCode: '邮政编码格式不正确',
@@ -300,6 +302,8 @@ export const translations = {
         country: 'Country/Region',
         province: 'State/Province',
         city: 'City/Town',
+        line1: 'Address',
+        line2: 'Address 2',
         detailedAddress: 'Detailed Address',
         postalCode: 'Postal Code',
         invalidPostalCode: 'Postal code is invalid',