@blocklet/ui-react 2.12.13 → 2.12.14

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

@@ -12,7 +12,7 @@ import { temp as colors } from "@arcblock/ux/lib/Colors";
 import { parseURL, joinURL } from "ufo";
 import { translations } from "../../libs/locales.js";
 import { formatAxiosError } from "../../libs/utils.js";
-import { getStatusDuration, isValidUrl } from "./utils.js";
+import { currentTimezone, getStatusDuration, isValidUrl } from "./utils.js";
 import SwitchRole from "./switch-role.js";
 import UserMetadataComponent from "./metadata.js";
 import UserStatus from "./user-status.js";
@@ -49,7 +49,7 @@ export default function UserBasicInfo({
         // @ts-ignore
         metadata: {
           ...user?.metadata ?? { joinedAt: user?.createdAt, email: user?.email, phone: user?.phone },
-          status: v
+          status: v || {}
         }
       });
     } catch (err) {
@@ -146,6 +146,7 @@ export default function UserBasicInfo({
                     isMobile,
                     size: rest.size || (isMobile ? 64 : 100),
                     isMyself,
+                    timezone: user?.metadata?.timezone || currentTimezone,
                     status: userStatus,
                     onChange: onUpdateUserStatus
                   }
@@ -178,18 +179,7 @@ export default function UserBasicInfo({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx(
-                  DID,
-                  {
-                    did: user.did,
-                    showQrcode: true,
-                    copyable: true,
-                    compact: !showFullDid,
-                    responsive: !showFullDid,
-                    locale,
-                    style: { maxWidth: 260 }
-                  }
-                )
+                /* @__PURE__ */ jsx(DID, { did: user.did, showQrcode: true, copyable: true, compact: !showFullDid, responsive: !showFullDid, locale })
               ]
             }
           )

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

@@ -1,8 +1,9 @@
 import type { UserMetadata } from '../../../@types';
-export default function UserStatus({ isMobile, size, isMyself, status, onChange, }: {
+export default function UserStatus({ isMobile, size, isMyself, status, onChange, timezone, }: {
     isMobile?: boolean;
     size: number;
     isMyself: boolean;
     status: UserMetadata['status'];
     onChange: (v: UserMetadata['status']) => void;
+    timezone?: string;
 }): import("react").JSX.Element;

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

@@ -2,14 +2,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import Badge from "@mui/material/Badge";
 import Box from "@mui/material/Box";
 import styled from "@emotion/styled";
-import { lazy, useCallback, useEffect, useMemo, useState } from "react";
+import { lazy, Suspense, useCallback, useEffect, useMemo, useState } from "react";
 import { useCreation, useMemoizedFn, useInterval, useUnmount } from "ahooks";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import Tooltip from "@mui/material/Tooltip";
 import { translate } from "@arcblock/ux/lib/Locale/util";
 import { formatToDatetime } from "@arcblock/ux/lib/Util";
 import { DurationEnum, StatusEnum } from "../../../@types/index.js";
-import StatusSelector from "../status-selector/index.js";
+import StatusDialog from "../status-dialog/index.js";
 import { translations } from "../../libs/locales.js";
 import { getTimeRemaining, isWithinTimeRange } from "./utils.js";
 const MeetingIcon = lazy(() => import("@arcblock/icons/lib/Meeting"));
@@ -24,12 +24,35 @@ const StatusIconMap = {
   [StatusEnum.OffSick]: OffSickIcon,
   [StatusEnum.WorkingRemotely]: WorkingRemotelyIcon
 };
+const QuickSettings = {
+  [StatusEnum.Meeting]: {
+    duration: DurationEnum.OneHour,
+    durationName: "userStatus.duration.OneHour"
+  },
+  [StatusEnum.Community]: {
+    duration: DurationEnum.ThirtyMinutes,
+    durationName: "userStatus.duration.ThirtyMinutes"
+  },
+  [StatusEnum.Holiday]: {
+    duration: DurationEnum.ThisWeek,
+    durationName: "userStatus.duration.ThisWeek"
+  },
+  [StatusEnum.OffSick]: {
+    duration: DurationEnum.Today,
+    durationName: "userStatus.duration.Today"
+  },
+  [StatusEnum.WorkingRemotely]: {
+    duration: DurationEnum.ThisWeek,
+    durationName: "userStatus.duration.ThisWeek"
+  }
+};
 export default function UserStatus({
   isMobile,
   size,
   isMyself,
   status,
-  onChange
+  onChange,
+  timezone
 }) {
   const { locale } = useLocaleContext();
   const t = useMemoizedFn((key, data = {}) => {
@@ -74,12 +97,16 @@ export default function UserStatus({
   }, [t]);
   const statusData = useCreation(() => {
     const durationData = getDurationData();
-    return Object.keys(StatusEnum).map((key) => ({
-      id: StatusEnum[key],
-      name: t(`userStatus.${key}`),
-      icon: StatusIconMap[StatusEnum[key]],
-      children: durationData
-    }));
+    return Object.keys(StatusEnum).map((key) => {
+      const quickSetting = QuickSettings[StatusEnum[key]];
+      return {
+        id: StatusEnum[key],
+        name: t(`userStatus.${key}`),
+        icon: StatusIconMap[StatusEnum[key]],
+        ...quickSetting ? { duration: quickSetting.duration, durationName: t(quickSetting.durationName) } : {},
+        children: durationData
+      };
+    });
   }, [t, getDurationData]);
   const onOpenStatusSelector = (event) => {
     if (!isMyself) {
@@ -94,9 +121,7 @@ export default function UserStatus({
     if (!isMyself) {
       return;
     }
-    if (v) {
-      onChange(v);
-    }
+    onChange(v);
     onCloseStatusSelector();
   };
   const StatusIcon = StatusIconMap[status?.value];
@@ -121,10 +146,20 @@ export default function UserStatus({
         alignItems: "center",
         justifyContent: "center",
         onClick: onOpenStatusSelector,
-        children: StatusIcon ? /* @__PURE__ */ jsx(StatusIcon, { style: { width: 16, height: 16 } }) : /* @__PURE__ */ jsx(Badge, { color: "success", variant: "dot" })
+        children: StatusIcon ? /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(StatusIcon, { style: { width: 16, height: 16 } }) }) : /* @__PURE__ */ jsx(Badge, { color: "success", variant: "dot" })
       }
     ) }),
-    /* @__PURE__ */ jsx(StatusSelector, { selected: status, data: statusData, open, onSelect: onStatusChange, anchorEl })
+    open && /* @__PURE__ */ jsx(
+      StatusDialog,
+      {
+        selected: status,
+        data: statusData,
+        open,
+        onSelect: onStatusChange,
+        onClose: onCloseStatusSelector,
+        timezone
+      }
+    )
   ] });
 }
 const StatusDiv = styled("div")`

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

@@ -1,4 +1,5 @@
 import { UserMetadata } from '../../../@types';
+export declare const currentTimezone: any;
 export declare const getTimezones: () => any;
 export declare const isValidUrl: (url: string) => boolean;
 /**
@@ -17,3 +18,25 @@ export declare const isWithinTimeRange: (dateRange: [Date, Date]) => any;
  * 获取当前时间距离结束时间还有多久
  */
 export declare const getTimeRemaining: (date: Date) => number;
+export declare const defaultButtonStyle: {
+    color: string;
+    borderColor: string;
+    backgroundColor: string;
+    '&:hover': {
+        borderColor: string;
+        backgroundColor: string;
+    };
+    py: number;
+    borderRadius: string;
+};
+export declare const primaryButtonStyle: {
+    color: string;
+    borderColor: string;
+    backgroundColor: string;
+    '&:hover': {
+        borderColor: string;
+        backgroundColor: string;
+    };
+    py: number;
+    borderRadius: string;
+};

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

@@ -1,5 +1,6 @@
 import moment from "moment-timezone";
 import dayjs from "dayjs";
+import { temp as colors } from "@arcblock/ux/lib/Colors";
 import { DurationEnum } from "../../../@types/index.js";
 const HOUR = 3600;
 const MINUTES_30 = 1800;
@@ -7,6 +8,7 @@ const MINUTES_10 = 600;
 const MINUTES_5 = 300;
 const MINUTES_1 = 60;
 const SECOND = 1;
+export const currentTimezone = moment.tz.guess();
 export const getTimezones = () => {
   const timezones = moment.tz.names();
   const formattedTimezones = timezones.map((tz) => {
@@ -32,7 +34,7 @@ export const isValidUrl = (url) => {
   return urlPattern.test(url);
 };
 export const getStatusDuration = (status) => {
-  let dateRange = [];
+  let dateRange = status?.dateRange?.map((d) => dayjs(d)) ?? [];
   const current = dayjs();
   switch (status?.duration) {
     case DurationEnum.ThirtyMinutes:
@@ -84,3 +86,25 @@ export const getTimeRemaining = (date) => {
   }
   return 0;
 };
+export const defaultButtonStyle = {
+  color: colors.foregroundsFgBase,
+  borderColor: colors.strokeBorderBase,
+  backgroundColor: colors.buttonsButtonNeutral,
+  "&:hover": {
+    borderColor: colors.strokeBorderBase,
+    backgroundColor: colors.buttonsButtonNeutralHover
+  },
+  py: 0.5,
+  borderRadius: "8px"
+};
+export const primaryButtonStyle = {
+  color: colors.buttonsButtonNeutral,
+  borderColor: colors.foregroundsFgInteractive,
+  backgroundColor: colors.foregroundsFgInteractive,
+  "&:hover": {
+    borderColor: colors.foregroundsFgInteractive,
+    backgroundColor: colors.foregroundsFgInteractive
+  },
+  py: 0.5,
+  borderRadius: "8px"
+};

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

@@ -110,12 +110,14 @@ export declare const translations: {
                 FourHours: string;
                 Today: string;
                 ThisWeek: string;
+                Custom: string;
             };
         };
         profile: {
             addLink: string;
             location: string;
             timezone: string;
+            bio: string;
             setStatus: string;
             localTime: string;
             email: string;
@@ -125,6 +127,10 @@ export declare const translations: {
             editProfile: string;
             removeStatusAfter: string;
             justForYou: string;
+            cleanStatus: string;
+            quickSettings: string;
+            selectEndTime: string;
+            pleaseSelectTime: string;
         };
     };
     en: {
@@ -238,12 +244,14 @@ export declare const translations: {
                 FourHours: string;
                 Today: string;
                 ThisWeek: string;
+                Custom: string;
             };
         };
         profile: {
             addLink: string;
             location: string;
             timezone: string;
+            bio: string;
             setStatus: string;
             localTime: string;
             email: string;
@@ -254,6 +262,10 @@ export declare const translations: {
             removeStatusAfter: string;
             justForYou: string;
             maxInputLength: string;
+            selectEndTime: string;
+            pleaseSelectTime: string;
+            cleanStatus: string;
+            quickSettings: string;
         };
     };
 };

package/lib/UserCenter/libs/locales.js

@@ -109,13 +109,15 @@ export const translations = {
         OneHour: "1\u5C0F\u65F6",
         FourHours: "4\u5C0F\u65F6",
         Today: "\u4ECA\u5929",
-        ThisWeek: "\u672C\u5468"
+        ThisWeek: "\u672C\u5468",
+        Custom: "\u81EA\u5B9A\u4E49\u65F6\u95F4"
       }
     },
     profile: {
       addLink: "\u6DFB\u52A0\u8FDE\u63A5",
       location: "\u4F4D\u7F6E",
       timezone: "\u65F6\u533A",
+      bio: "\u4E2A\u4EBA\u7B80\u4ECB",
       setStatus: "\u8BBE\u7F6E\u72B6\u6001",
       localTime: "\u5F53\u5730\u65F6\u95F4:",
       email: "\u90AE\u7BB1\u5730\u5740",
@@ -123,8 +125,12 @@ export const translations = {
       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"
+      removeStatusAfter: "\u5728...\u4E4B\u540E\u79FB\u9664\u72B6\u6001",
+      justForYou: "\u4EC5\u5BF9\u60A8\u53EF\u89C1",
+      cleanStatus: "\u6E05\u9664\u72B6\u6001",
+      quickSettings: "\u5FEB\u6377\u8BBE\u7F6E",
+      selectEndTime: "\u9009\u62E9\u7ED3\u675F\u65F6\u95F4",
+      pleaseSelectTime: "\u8BF7\u9009\u62E9\u65F6\u95F4"
     }
   },
   en: {
@@ -237,13 +243,15 @@ export const translations = {
         OneHour: "1 hour",
         FourHours: "4 hours",
         Today: "Today",
-        ThisWeek: "This Week"
+        ThisWeek: "This Week",
+        Custom: "Custom"
       }
     },
     profile: {
       addLink: "Add link",
       location: "Location",
       timezone: "Timezone",
+      bio: "Bio",
       setStatus: "Set a Status",
       localTime: "Local Time: ",
       email: "Email",
@@ -251,9 +259,13 @@ export const translations = {
       phone: "Phone",
       phoneInvalid: "Phone number is invalid",
       editProfile: "Edit Profile",
-      removeStatusAfter: "Remove status after",
+      removeStatusAfter: "Remove status after...",
       justForYou: "Visible to you only",
-      maxInputLength: "Max input length is"
+      maxInputLength: "Max input length is",
+      selectEndTime: "Select end time",
+      pleaseSelectTime: "Please select time",
+      cleanStatus: "Clean status",
+      quickSettings: "Quick Settings"
     }
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.12.13",
+  "version": "2.12.14",
   "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.13",
-    "@arcblock/react-hooks": "^2.12.13",
+    "@arcblock/bridge": "^2.12.14",
+    "@arcblock/react-hooks": "^2.12.14",
     "@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": "82ab8092972356c7746cb2b1c77bd133ef00ebca"
+  "gitHead": "ac2b40cdc5ca3cf446e5a1ced41d5eada7860cbd"
 }

package/src/@types/index.ts

@@ -55,6 +55,7 @@ export enum DurationEnum {
   FourHours = '4_hours',
   Today = 'today',
   ThisWeek = 'this_week',
+  Custom = 'custom',
 }
 
 export enum StatusEnum {

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

@@ -24,6 +24,7 @@ interface EditableFieldProps {
   style?: React.CSSProperties;
   verified?: boolean;
   errorMsg?: string;
+  canEdit?: boolean;
 }
 
 const inputFieldStyle = {
@@ -63,6 +64,7 @@ function EditableField({
   inline = true,
   style = {},
   verified = false,
+  canEdit = true,
 }: EditableFieldProps) {
   const { locale } = useLocaleContext();
   const t = useMemoizedFn((key, data = {}) => {
@@ -131,6 +133,10 @@ function EditableField({
     );
   }, [value, handleChange, component, placeholder, rows, children]);
 
+  if (!canEdit && editable) {
+    return null;
+  }
+
   if (!editable) {
     return value ? (
       <Tooltip title={tooltip} placement="top">

package/src/UserCenter/components/status-dialog/date-picker.tsx

@@ -0,0 +1,67 @@
+import React, { useRef } from 'react';
+import { TextField, FormControl, FormHelperText } from '@mui/material';
+import dayjs from 'dayjs';
+import { useCreation } from 'ahooks';
+
+interface DateTimeInputProps {
+  value: Date;
+  onChange: (value: Date) => void;
+  error?: boolean;
+  helperText?: string;
+  label?: string;
+  timezone?: string;
+}
+
+export default function DateTimeInput({ value, onChange, error, helperText, label, timezone }: DateTimeInputProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const minDateTime = dayjs().format('YYYY-MM-DDTHH:mm');
+
+  const formatValue = useCreation(() => {
+    let date = dayjs();
+    if (value) {
+      date = timezone ? dayjs(value).tz(timezone) : dayjs(value);
+    }
+
+    return date.format('YYYY-MM-DD HH:mm');
+  }, [value, timezone]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(new Date(e.target.value));
+  };
+
+  // 处理点击事件
+  const handleClick = () => {
+    // 通过编程方式触发原生日期选择器
+    inputRef.current?.showPicker();
+  };
+
+  return (
+    <FormControl fullWidth error={error}>
+      <TextField
+        inputRef={inputRef}
+        type="datetime-local"
+        value={formatValue}
+        onChange={handleChange}
+        inputProps={{
+          min: minDateTime,
+          style: { cursor: 'pointer' },
+        }}
+        label={label}
+        error={error}
+        onClick={handleClick}
+        InputLabelProps={{
+          shrink: true,
+        }}
+        sx={{
+          '& .MuiInputBase-root': {
+            cursor: 'pointer',
+          },
+          '& .MuiOutlinedInput-notchedOutline': {
+            cursor: 'pointer',
+          },
+        }}
+      />
+      {helperText && <FormHelperText>{helperText}</FormHelperText>}
+    </FormControl>
+  );
+}