@blocklet/ui-react 2.12.12 → 2.12.14

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

@@ -2,7 +2,7 @@
 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';
@@ -11,9 +11,10 @@ import { SvgIconProps } from '@mui/material/SvgIcon';
 import { formatToDatetime } from '@arcblock/ux/lib/Util';
 import type { UserMetadata } from '../../../@types';
 import { DurationEnum, StatusEnum } from '../../../@types';
-import StatusSelector from '../status-selector';
+import StatusDialog from '../status-dialog';
 import { translations } from '../../libs/locales';
 import { getTimeRemaining, isWithinTimeRange } from './utils';
+import { StatusItem } from '../status-selector/menu-item';
 
 const MeetingIcon = lazy(() => import('@arcblock/icons/lib/Meeting'));
 const CommunityIcon = lazy(() => import('@arcblock/icons/lib/Community'));
@@ -29,18 +30,43 @@ const StatusIconMap: Record<StatusEnum, React.FC<SvgIconProps> | undefined> = {
   [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,
+  timezone,
 }: {
   isMobile?: boolean;
   size: number;
   isMyself: boolean;
   status: UserMetadata['status'];
   onChange: (v: UserMetadata['status']) => void;
+  timezone?: string;
 }) {
   const { locale } = useLocaleContext();
   const t = useMemoizedFn((key, data = {}) => {
@@ -94,12 +120,17 @@ export default function UserStatus({
 
   const statusData = useCreation(() => {
     const durationData = getDurationData();
-    return Object.keys(StatusEnum).map((key) => ({
-      id: StatusEnum[key as keyof typeof StatusEnum],
-      name: t(`userStatus.${key}`),
-      icon: StatusIconMap[StatusEnum[key as keyof typeof StatusEnum]],
-      children: durationData,
-    }));
+    return Object.keys(StatusEnum).map((key) => {
+      const quickSetting = QuickSettings[StatusEnum[key as keyof typeof StatusEnum]];
+
+      return {
+        id: StatusEnum[key as keyof typeof StatusEnum],
+        name: t(`userStatus.${key}`),
+        icon: StatusIconMap[StatusEnum[key as keyof typeof StatusEnum]],
+        ...(quickSetting ? { duration: quickSetting.duration, durationName: t(quickSetting.durationName) } : {}),
+        children: durationData,
+      };
+    });
   }, [t, getDurationData]);
 
   const onOpenStatusSelector = (event: React.MouseEvent<HTMLDivElement>) => {
@@ -117,9 +148,7 @@ export default function UserStatus({
     if (!isMyself) {
       return;
     }
-    if (v) {
-      onChange(v);
-    }
+    onChange(v);
     onCloseStatusSelector();
   };
 
@@ -148,10 +177,25 @@ export default function UserStatus({
           alignItems="center"
           justifyContent="center"
           onClick={onOpenStatusSelector}>
-          {StatusIcon ? <StatusIcon style={{ width: 16, height: 16 }} /> : <Badge color="success" variant="dot" />}
+          {StatusIcon ? (
+            <Suspense fallback={null}>
+              <StatusIcon style={{ width: 16, height: 16 }} />
+            </Suspense>
+          ) : (
+            <Badge color="success" variant="dot" />
+          )}
         </Box>
       </Tooltip>
-      <StatusSelector selected={status} data={statusData} open={open} onSelect={onStatusChange} anchorEl={anchorEl} />
+      {open && (
+        <StatusDialog
+          selected={status}
+          data={statusData as StatusItem[]}
+          open={open}
+          onSelect={onStatusChange}
+          onClose={onCloseStatusSelector}
+          timezone={timezone}
+        />
+      )}
     </StatusDiv>
   );
 }

package/src/UserCenter/components/user-info/utils.ts

@@ -1,5 +1,6 @@
 import moment from 'moment-timezone';
 import dayjs from 'dayjs';
+import { temp as colors } from '@arcblock/ux/lib/Colors';
 import { DurationEnum, UserMetadata } from '../../../@types';
 
 const HOUR = 3600;
@@ -8,6 +9,9 @@ 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();
 
@@ -46,7 +50,7 @@ export const isValidUrl = (url: string) => {
  * @returns
  */
 export const getStatusDuration = (status: UserMetadata['status']) => {
-  let dateRange: dayjs.Dayjs[] = [];
+  let dateRange: dayjs.Dayjs[] = status?.dateRange?.map((d) => dayjs(d)) ?? [];
   const current = dayjs();
   switch (status?.duration) {
     case DurationEnum.ThirtyMinutes:
@@ -112,3 +116,27 @@ export const getTimeRemaining = (date: Date) => {
 
   return 0; // 如果时间已过期，返回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/src/UserCenter/libs/locales.ts

@@ -112,12 +112,14 @@ export const translations = {
         FourHours: '4小时',
         Today: '今天',
         ThisWeek: '本周',
+        Custom: '自定义时间',
       },
     },
     profile: {
       addLink: '添加连接',
       location: '位置',
       timezone: '时区',
+      bio: '个人简介',
       setStatus: '设置状态',
       localTime: '当地时间:',
       email: '邮箱地址',
@@ -125,8 +127,12 @@ export const translations = {
       phone: '电话号码',
       phoneInvalid: '电话号码格式不正确',
       editProfile: '编辑资料',
-      removeStatusAfter: '移除状态',
+      removeStatusAfter: '在...之后移除状态',
       justForYou: '仅对您可见',
+      cleanStatus: '清除状态',
+      quickSettings: '快捷设置',
+      selectEndTime: '选择结束时间',
+      pleaseSelectTime: '请选择时间',
     },
   },
   en: {
@@ -242,12 +248,14 @@ export const translations = {
         FourHours: '4 hours',
         Today: 'Today',
         ThisWeek: 'This Week',
+        Custom: 'Custom',
       },
     },
     profile: {
       addLink: 'Add link',
       location: 'Location',
       timezone: 'Timezone',
+      bio: 'Bio',
       setStatus: 'Set a Status',
       localTime: 'Local Time: ',
       email: 'Email',
@@ -255,9 +263,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',
+      selectEndTime: 'Select end time',
+      pleaseSelectTime: 'Please select time',
+      cleanStatus: 'Clean status',
+      quickSettings: 'Quick Settings',
     },
   },
 };

package/src/blocklets.js

@@ -45,15 +45,12 @@ export const getLocalizedNavigation = (navigation, locale = 'en') => {
   if (!navigation?.length) {
     return navigation;
   }
-  // eslint-disable-next-line no-shadow
-  const getTitle = (title, _locale) => {
-    if (typeof title === 'string') {
-      return title;
+  const trans = (text, _locale) => {
+    if (text && typeof text === 'object') {
+      return text[_locale] || text?.en || text?.zh;
     }
-    if (typeof title === 'object') {
-      return title[_locale] || title?.en || title?.zh;
-    }
-    return title;
+
+    return text;
   };
 
   return mapRecursive(
@@ -61,7 +58,8 @@ export const getLocalizedNavigation = (navigation, locale = 'en') => {
     (item) => {
       return {
         ...item,
-        title: getTitle(item.title, locale),
+        title: trans(item.title, locale),
+        description: trans(item.description, locale),
         // 仅对叶结点进行处理
         link: !item.items?.length ? getLink(item.link, locale) : item.link,
         _rawLink: item.link,