@blocklet/ui-react 2.12.8 → 2.12.10

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

@@ -39,7 +39,10 @@ export declare const translations: {
             required: string;
             invalid: string;
             setting: string;
+            save: string;
             profile: string;
+            nft: string;
+            noNFT: string;
         };
         toPublic: string;
         currentPassport: string;
@@ -94,6 +97,35 @@ export declare const translations: {
             title: string;
             locale: string;
         };
+        userStatus: {
+            Online: string;
+            Meeting: string;
+            Community: string;
+            Holiday: string;
+            OffSick: string;
+            WorkingRemotely: string;
+            duration: {
+                ThirtyMinutes: string;
+                OneHour: string;
+                FourHours: string;
+                Today: string;
+                ThisWeek: string;
+            };
+        };
+        profile: {
+            addLink: string;
+            location: string;
+            timezone: string;
+            setStatus: string;
+            localTime: string;
+            email: string;
+            emailInvalid: string;
+            phone: string;
+            phoneInvalid: string;
+            editProfile: string;
+            removeStatusAfter: string;
+            justForYou: string;
+        };
     };
     en: {
         settings: string;
@@ -135,7 +167,10 @@ export declare const translations: {
             required: string;
             invalid: string;
             setting: string;
+            save: string;
             profile: string;
+            nft: string;
+            noNFT: string;
         };
         toPublic: string;
         currentPassport: string;
@@ -190,5 +225,35 @@ export declare const translations: {
             title: string;
             locale: string;
         };
+        userStatus: {
+            Online: string;
+            Meeting: string;
+            Community: string;
+            Holiday: string;
+            OffSick: string;
+            WorkingRemotely: string;
+            duration: {
+                ThirtyMinutes: string;
+                OneHour: string;
+                FourHours: string;
+                Today: string;
+                ThisWeek: string;
+            };
+        };
+        profile: {
+            addLink: string;
+            location: string;
+            timezone: string;
+            setStatus: string;
+            localTime: string;
+            email: string;
+            emailInvalid: string;
+            phone: string;
+            phoneInvalid: string;
+            editProfile: string;
+            removeStatusAfter: string;
+            justForYou: string;
+            maxInputLength: string;
+        };
     };
 };

package/lib/UserCenter/libs/locales.js

@@ -39,7 +39,10 @@ export const translations = {
       required: "\u5FC5\u586B\u7684",
       invalid: "\u65E0\u6548",
       setting: "\u8BBE\u7F6E",
-      profile: "\u4FE1\u606F"
+      save: "\u4FDD\u5B58",
+      profile: "\u4FE1\u606F",
+      nft: "NFTs",
+      noNFT: "\u6682\u65E0 NFT"
     },
     toPublic: "\u516C\u5F00 \u201C{name}\u201D \u9875\u9762",
     currentPassport: "\u5F53\u524D\u4F7F\u7528\u7684\u901A\u884C\u8BC1",
@@ -93,6 +96,35 @@ export const translations = {
     commonSetting: {
       title: "\u901A\u7528\u8BBE\u7F6E",
       locale: "\u504F\u597D\u8BED\u8A00"
+    },
+    userStatus: {
+      Online: "\u5728\u7EBF",
+      Meeting: "\u5F00\u4F1A\u4E2D",
+      Community: "\u901A\u52E4\u4E2D",
+      Holiday: "\u4F11\u5047",
+      OffSick: "\u75C5\u5047",
+      WorkingRemotely: "\u8FDC\u7A0B\u5DE5\u4F5C",
+      duration: {
+        ThirtyMinutes: "30\u5206\u949F",
+        OneHour: "1\u5C0F\u65F6",
+        FourHours: "4\u5C0F\u65F6",
+        Today: "\u4ECA\u5929",
+        ThisWeek: "\u672C\u5468"
+      }
+    },
+    profile: {
+      addLink: "\u6DFB\u52A0\u8FDE\u63A5",
+      location: "\u4F4D\u7F6E",
+      timezone: "\u65F6\u533A",
+      setStatus: "\u8BBE\u7F6E\u72B6\u6001",
+      localTime: "\u5F53\u5730\u65F6\u95F4:",
+      email: "\u90AE\u7BB1\u5730\u5740",
+      emailInvalid: "\u90AE\u7BB1\u683C\u5F0F\u4E0D\u6B63\u786E",
+      phone: "\u7535\u8BDD\u53F7\u7801",
+      phoneInvalid: "\u7535\u8BDD\u53F7\u7801\u683C\u5F0F\u4E0D\u6B63\u786E",
+      editProfile: "\u7F16\u8F91\u8D44\u6599",
+      removeStatusAfter: "\u79FB\u9664\u72B6\u6001",
+      justForYou: "\u4EC5\u5BF9\u60A8\u53EF\u89C1"
     }
   },
   en: {
@@ -135,7 +167,10 @@ export const translations = {
       required: "Required",
       invalid: "Invalid",
       setting: "Settings",
-      profile: "Profile"
+      save: "Save",
+      profile: "Profile",
+      nft: "NFTs",
+      noNFT: "No NFT"
     },
     toPublic: 'Public "{name}" page',
     currentPassport: "Passport currently in use",
@@ -189,6 +224,36 @@ export const translations = {
     commonSetting: {
       title: "Common Settings",
       locale: "Preferred language"
+    },
+    userStatus: {
+      Online: "Online",
+      Meeting: "In a Meeting",
+      Community: "Commuting",
+      Holiday: "On Holiday",
+      OffSick: "Off Sick",
+      WorkingRemotely: "Working Remotely",
+      duration: {
+        ThirtyMinutes: "30 minutes",
+        OneHour: "1 hour",
+        FourHours: "4 hours",
+        Today: "Today",
+        ThisWeek: "This Week"
+      }
+    },
+    profile: {
+      addLink: "Add link",
+      location: "Location",
+      timezone: "Timezone",
+      setStatus: "Set a Status",
+      localTime: "Local Time: ",
+      email: "Email",
+      emailInvalid: "Email is invalid",
+      phone: "Phone",
+      phoneInvalid: "Phone number is invalid",
+      editProfile: "Edit Profile",
+      removeStatusAfter: "Remove status after",
+      justForYou: "Visible to you only",
+      maxInputLength: "Max input length is"
     }
   }
 };

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

@@ -8,6 +8,7 @@ import sortBy from "lodash/sortBy";
 import UAParser from "ua-parser-js";
 import { getVisitorId } from "@arcblock/ux/lib/Util";
 import { useConfirm } from "@arcblock/ux/lib/Dialog";
+import { temp as colors } from "@arcblock/ux/lib/Colors";
 import pAll from "p-all";
 import PQueue from "p-queue";
 import { Box, Button, CircularProgress, Tooltip, Typography, useMediaQuery } from "@mui/material";
@@ -27,7 +28,7 @@ const parseUa = (ua) => {
   return result;
 };
 const queue = new PQueue({ concurrency: 1 });
-const UserSessionIp = memo(({ userSession }) => {
+const UserSessionIp = memo(({ userSession, isMobile = false }) => {
   const currentState = useReactive({
     loading: true,
     ipRegion: ""
@@ -42,7 +43,7 @@ const UserSessionIp = memo(({ userSession }) => {
       }
     });
   }, [currentState, userSession.lastLoginIp]);
-  return /* @__PURE__ */ jsx(Box, { children: currentState.ipRegion ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsx(Box, { ...isMobile && { display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 1 }, children: currentState.ipRegion ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Typography, { variant: "body2", children: currentState.ipRegion }),
     /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "grey", children: userSession.lastLoginIp || t("unknown") })
   ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -165,7 +166,7 @@ export default function UserSessions({
         customBodyRenderLite: (rawIndex) => {
           const x = safeData[rawIndex];
           const result = parseUa(x.ua);
-          return /* @__PURE__ */ jsx(Box, { children: [result.os?.name, result.os?.version].filter(Boolean).join("/") || t("unknown") });
+          return /* @__PURE__ */ jsx(Box, { sx: isMobile ? { textAlign: "right" } : {}, children: [result.os?.name, result.os?.version].filter(Boolean).join("/") || t("unknown") });
         }
       }
     },
@@ -176,7 +177,7 @@ export default function UserSessions({
         customBodyRenderLite: (rawIndex) => {
           const x = safeData[rawIndex];
           const result = parseUa(x.ua);
-          return /* @__PURE__ */ jsx(Box, { children: [result.browser?.name, result.browser?.version].filter(Boolean).join("/") || t("unknown") });
+          return /* @__PURE__ */ jsx(Box, { sx: isMobile ? { textAlign: "right" } : {}, children: [result.browser?.name, result.browser?.version].filter(Boolean).join("/") || t("unknown") });
         }
       }
     },
@@ -186,7 +187,7 @@ export default function UserSessions({
       options: {
         customBodyRenderLite: (rawIndex) => {
           const x = safeData[rawIndex];
-          return /* @__PURE__ */ jsx(Box, { children: x.extra?.walletOS || t("unknown") });
+          return /* @__PURE__ */ jsx(Box, { sx: isMobile ? { textAlign: "right" } : {}, children: x.extra?.walletOS || t("unknown") });
         }
       }
     },
@@ -196,7 +197,7 @@ export default function UserSessions({
       options: {
         customBodyRenderLite: (rawIndex) => {
           const x = safeData[rawIndex];
-          return /* @__PURE__ */ jsx(Box, { sx: { minWidth: 150, maxWidth: 250 }, children: /* @__PURE__ */ jsx(UserSessionInfo, { sessionUser: x.user, user }) });
+          return /* @__PURE__ */ jsx(Box, { sx: { minWidth: 150, maxWidth: 250, ...isMobile && { textAlign: "right" } }, children: /* @__PURE__ */ jsx(UserSessionInfo, { sessionUser: x.user, user }) });
         }
       }
     },
@@ -206,7 +207,7 @@ export default function UserSessions({
       options: {
         customBodyRenderLite: (rawIndex) => {
           const x = safeData[rawIndex];
-          return x.createdAt ? /* @__PURE__ */ jsx(RelativeTime, { value: x.createdAt, relativeRange: 3 * 86400 * 1e3, locale }) : t("unknown");
+          return /* @__PURE__ */ jsx(Box, { sx: isMobile ? { textAlign: "right" } : {}, children: x.createdAt ? /* @__PURE__ */ jsx(RelativeTime, { value: x.createdAt, relativeRange: 3 * 86400 * 1e3, locale }) : t("unknown") });
         }
       }
     },
@@ -216,7 +217,7 @@ export default function UserSessions({
       options: {
         customBodyRenderLite: (rawIndex) => {
           const x = safeData[rawIndex];
-          return x.status === "expired" ? t("expired") : /* @__PURE__ */ jsx(RelativeTime, { value: x.updatedAt, relativeRange: 3 * 86400 * 1e3, locale });
+          return /* @__PURE__ */ jsx(Box, { sx: isMobile ? { textAlign: "right" } : {}, children: x.status === "expired" ? t("expired") : /* @__PURE__ */ jsx(RelativeTime, { value: x.updatedAt, relativeRange: 3 * 86400 * 1e3, locale }) });
         }
       }
     },
@@ -226,7 +227,7 @@ export default function UserSessions({
       options: {
         customBodyRenderLite: (rawIndex) => {
           const x = safeData[rawIndex];
-          return /* @__PURE__ */ jsx(UserSessionIp, { userSession: x });
+          return /* @__PURE__ */ jsx(UserSessionIp, { userSession: x, isMobile });
         }
       }
     },
@@ -236,12 +237,13 @@ export default function UserSessions({
       options: {
         customBodyRenderLite: (rawIndex) => {
           const x = safeData[rawIndex];
-          return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+          return /* @__PURE__ */ jsx(Box, { sx: isMobile ? { textAlign: "right" } : {}, children: /* @__PURE__ */ jsx(
             Button,
             {
               sx: {
                 whiteSpace: "nowrap",
-                fontSize: "12px",
+                fontSize: "12px !important",
+                lineHeight: "1.25",
                 px: 1
               },
               disabled: currentVisitorId === x.visitorId,
@@ -259,14 +261,45 @@ export default function UserSessions({
   return /* @__PURE__ */ jsxs(
     Box,
     {
+      className: "pc-user-sessions",
       sx: {
-        maxWidth: isMobile ? "unset" : isLg ? "calc(100vw - 300px)" : "920px",
+        maxWidth: isMobile ? "unset" : isLg ? "calc(100vw - 300px)" : "100%",
+        ...isMobile && {
+          ".pc-user-sessions-table > div:nth-child(2)": {
+            border: `1px solid ${colors.dividerColor}`,
+            borderRadius: "8px"
+          }
+        },
         ".MuiTableCell-head": {
           whiteSpace: "nowrap",
           fontWeight: "bold"
         },
+        ".MuiTableRow-root": {
+          border: "unset",
+          "&:nth-child(even)": {
+            backgroundColor: "#F9FAFB",
+            "&:hover": {
+              backgroundColor: "#F9FAFB !important"
+            }
+          }
+        },
+        ".MuiTableRow-hover": {
+          "&:hover": {
+            backgroundColor: "inherit !important"
+          }
+        },
         ".MuiTableCell-root": {
-          paddingRight: "8px"
+          paddingRight: "8px",
+          paddingLeft: "8px",
+          ...isMobile && {
+            padding: "8px !important",
+            "&:first-child": {
+              paddingTop: "20px!important"
+            },
+            "&:last-child": {
+              paddingBottom: "20px!important"
+            }
+          }
         }
       },
       children: [
@@ -279,7 +312,8 @@ export default function UserSessions({
             columns,
             customButtons,
             options: tableOptions,
-            loading: pageState.loading
+            loading: pageState.loading,
+            className: "pc-user-sessions-table"
           }
         )
       ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.12.8",
+  "version": "2.12.10",
   "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.8",
-    "@arcblock/react-hooks": "^2.12.8",
+    "@arcblock/bridge": "^2.12.10",
+    "@arcblock/react-hooks": "^2.12.10",
     "@arcblock/ws": "^1.19.15",
     "@blocklet/did-space-react": "^1.0.26",
     "@iconify-icons/logos": "^1.2.36",
@@ -44,11 +44,13 @@
     "axios": "^1.7.5",
     "clsx": "^2.1.0",
     "core-js": "^3.25.5",
+    "dayjs": "^1.11.5",
     "iconify-icon": "^1.0.8",
     "iconify-icons-material-symbols-400": "^0.0.1",
     "is-url": "^1.2.4",
     "js-cookie": "^2.2.1",
     "lodash": "^4.17.21",
+    "moment-timezone": "^0.5.37",
     "p-all": "^5.0.0",
     "p-queue": "^6.6.2",
     "p-wait-for": "^5.0.2",
@@ -57,7 +59,8 @@
     "react-placeholder": "^4.1.0",
     "type-fest": "^4.22.0",
     "ua-parser-js": "^1.0.37",
-    "ufo": "^1.5.3"
+    "ufo": "^1.5.3",
+    "validator": "^13.9.0"
   },
   "peerDependencies": {
     "@arcblock/did-connect": "^2.11.48",
@@ -84,5 +87,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "4cfeed31d56495f1368b96adfae11f938e68ef46"
+  "gitHead": "a4e740e658ec69a4889872ce0c4f1ef6746fa57b"
 }

package/src/@types/index.ts

@@ -44,6 +44,44 @@ export type NFTAccount = {
 
 export type ConnectedAccount = OAuthAccount | WalletAccount | NFTAccount;
 
+export type UserMetadataLink = {
+  url: string;
+  favicon?: string;
+};
+
+export enum DurationEnum {
+  ThirtyMinutes = '30_minutes',
+  OneHour = '1_hour',
+  FourHours = '4_hours',
+  Today = 'today',
+  ThisWeek = 'this_week',
+}
+
+export enum StatusEnum {
+  Meeting = 'meeting',
+  Community = 'community',
+  Holiday = 'holiday',
+  OffSick = 'off_sick',
+  WorkingRemotely = 'working_remotely',
+}
+
+export type UserMetadata = {
+  bio?: string;
+  location?: string;
+  timezone?: string;
+  joinedAt?: string;
+  status?: {
+    value: string;
+    duration?: DurationEnum;
+    dateRange?: Date[];
+  };
+  links?: UserMetadataLink[];
+  cover?: string;
+  // 这两个字段是 User, 方便数据更新，在保存时同步
+  email?: string;
+  phone?: string;
+};
+
 export type User = UserPublicInfo & {
   role: string;
   email?: string;
@@ -61,6 +99,7 @@ export type User = UserPublicInfo & {
   inviter?: string;
   emailVerified?: boolean;
   phoneVerified?: boolean;
+  metadata?: UserMetadata;
 };
 
 export type UserCenterTab = {

package/src/@types/shims.d.ts

@@ -6,6 +6,7 @@ declare module '@arcblock/ux/lib/ErrorBoundary';
 
 declare module '@arcblock/did-connect/*';
 declare module '@arcblock/did-connect/lib/Session';
+declare module '@abtnode/constant';
 
 declare module 'is-url';
 

package/src/UserCenter/components/config-profile.tsx

@@ -3,6 +3,9 @@ import { useMemoizedFn, useReactive } from 'ahooks';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
+import { temp as colors } from '@arcblock/ux/lib/Colors';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import ArrowDownwardIcon from '@arcblock/icons/lib/ArrowDown';
 
 import { translations } from '../libs/locales';
 import { client } from '../../libs/client';
@@ -60,7 +63,23 @@ export default function ConfigProfile({ user, onSave }: { user: User; onSave: (t
             height: 2,
           }}
         />
-        <Select value={currentState.locale} onChange={handleChange} size="small" sx={{ minWidth: 300 }}>
+        <Select
+          value={currentState.locale}
+          onChange={handleChange}
+          size="small"
+          // eslint-disable-next-line react/no-unstable-nested-components
+          IconComponent={(props) => <ArrowDownwardIcon {...props} width={20} height={20} />}
+          sx={{
+            minWidth: 300,
+            '&:hover': {
+              'fieldset.MuiOutlinedInput-notchedOutline': {
+                borderColor: colors.dividerColor,
+              },
+            },
+            fieldset: {
+              borderColor: colors.dividerColor,
+            },
+          }}>
           {(window.blocklet.languages || languages).map((x: { name: string; code: string }) => (
             <MenuItem value={x.code} key={x.code}>
               {x.name}

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

@@ -0,0 +1,180 @@
+import React from 'react';
+import { Box, TextField, Typography, Tooltip, TooltipProps } from '@mui/material';
+import { useCreation, useMemoizedFn } from 'ahooks';
+import { temp as colors } from '@arcblock/ux/lib/Colors';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { translate } from '@arcblock/ux/lib/Locale/util';
+import VerifiedIcon from '@mui/icons-material/Verified';
+import { translations } from '../libs/locales';
+
+interface EditableFieldProps {
+  value: string;
+  onChange?: (value: string) => void;
+  onValueValidate?: (value: string) => void;
+  editable: boolean;
+  component?: 'input' | 'textarea';
+  placeholder?: string;
+  rows?: number;
+  maxLength?: number; // 最大字符数
+  icon?: React.ReactNode;
+  label?: string;
+  children?: React.ReactNode;
+  tooltip?: TooltipProps['title'];
+  inline?: boolean;
+  style?: React.CSSProperties;
+  verified?: boolean;
+  errorMsg?: string;
+}
+
+const inputFieldStyle = {
+  width: '100%',
+  '.MuiOutlinedInput-root': {
+    '&:hover': {
+      fieldset: {
+        borderColor: colors.dividerColor,
+      },
+    },
+    '&.Mui-focused': {
+      fieldset: {
+        borderColor: colors.dividerColor,
+      },
+    },
+  },
+
+  fieldset: {
+    borderColor: colors.dividerColor,
+  },
+};
+
+function EditableField({
+  value,
+  onChange = () => {},
+  onValueValidate = () => {},
+  errorMsg = '',
+  editable = false,
+  component = 'input',
+  placeholder = '',
+  rows = 2,
+  maxLength,
+  icon,
+  label = '',
+  children,
+  tooltip,
+  inline = true,
+  style = {},
+  verified = false,
+}: EditableFieldProps) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+
+  const handleChange = useMemoizedFn((v: string) => {
+    if (onChange) {
+      onChange(v);
+    }
+    if (onValueValidate) {
+      onValueValidate(v);
+    }
+  });
+
+  const content = useCreation(() => {
+    if (children) {
+      return children;
+    }
+    if (component === 'input') {
+      return (
+        <TextField
+          variant="outlined"
+          className="editable-field"
+          InputProps={{
+            sx: { backgroundColor: 'transparent' },
+            placeholder,
+          }}
+          value={value}
+          onChange={(e) => handleChange(e.target.value)}
+          sx={inputFieldStyle}
+          error={Boolean(errorMsg)}
+          helperText={errorMsg}
+        />
+      );
+    }
+
+    const isTooLong = value.length > (maxLength || 300);
+    return (
+      <Box position="relative">
+        <TextField
+          variant="outlined"
+          InputProps={{
+            multiline: true,
+            minRows: rows,
+            placeholder,
+          }}
+          sx={inputFieldStyle}
+          value={value}
+          onChange={(e) => handleChange(e.target.value)}
+          error={Boolean(errorMsg)}
+          helperText={errorMsg}
+        />
+        <Typography
+          position="absolute"
+          bottom={-22}
+          right={2}
+          variant="caption"
+          fontSize="12px"
+          component="span"
+          color={isTooLong ? 'error' : 'text.secondary'}>
+          {isTooLong ? `(${t('profile.maxInputLength')} ${maxLength}) ` : ''}
+          {value.length} / {maxLength}
+        </Typography>
+      </Box>
+    );
+  }, [value, handleChange, component, placeholder, rows, children]);
+
+  if (!editable) {
+    return value ? (
+      <Tooltip title={tooltip} placement="top">
+        <Typography
+          variant="subtitle1"
+          component="p"
+          gutterBottom
+          sx={{
+            width: '100%',
+            mb: 0,
+            lineHeight: 1.4,
+            overflow: 'hidden',
+          }}
+          display="flex"
+          alignItems="center"
+          gap={1}>
+          {icon}
+          <Box display="flex" flexDirection="row" alignItems="center" width="90%">
+            <Typography
+              sx={{
+                whiteSpace: 'pre-wrap',
+                ...(inline ? { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } : {}),
+              }}>
+              {value}
+            </Typography>
+            {verified && (
+              <VerifiedIcon color="success" style={{ fontSize: 16, width: 16, marginLeft: 4, flexShrink: 0 }} />
+            )}
+          </Box>
+        </Typography>
+      </Tooltip>
+    ) : null;
+  }
+
+  return (
+    <Box sx={{ width: '100%' }} style={style}>
+      {label && (
+        <Typography variant="subtitle1" gutterBottom sx={{ mb: 0.5, fontSize: '12px', color: '#4B5563' }}>
+          {label}
+        </Typography>
+      )}
+      {content}
+    </Box>
+  );
+}
+
+export default EditableField;