@blocklet/ui-react 2.12.12 → 2.12.14

package/src/UserCenter/components/status-dialog/index.tsx

@@ -0,0 +1,280 @@
+import { useEffect, useState, createElement, Suspense, useMemo } from 'react';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  ListItemIcon,
+  Box,
+  Typography,
+  IconButton,
+} from '@mui/material';
+import dayjs from 'dayjs';
+import CloseIcon from '@mui/icons-material/Close';
+import { translate } from '@arcblock/ux/lib/Locale/util';
+import { useMemoizedFn } from 'ahooks';
+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 { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { DurationEnum, UserMetadata } from '../../../@types';
+import { StatusItem } from '../status-selector/menu-item';
+import { translations } from '../../libs/locales';
+import DateTimeInput from './date-picker';
+import { defaultButtonStyle, primaryButtonStyle } from '../user-info/utils';
+
+const selectStyle = {
+  padding: '8px 16px',
+  borderRadius: '8px',
+  '&:hover': {
+    'fieldset.MuiOutlinedInput-notchedOutline': {
+      borderColor: colors.dividerColor,
+    },
+  },
+  'fieldset.MuiOutlinedInput-notchedOutline': {
+    borderColor: colors.dividerColor,
+    borderRadius: '8px',
+  },
+  '.MuiSelect-select': {
+    padding: '0 !important',
+    display: 'flex',
+    alignItems: 'center',
+  },
+};
+interface StatusDialogProps {
+  open: boolean;
+  onClose: () => void;
+  data: Array<StatusItem>;
+  selected: UserMetadata['status'];
+  onSelect: (v: UserMetadata['status']) => void;
+  timezone?: string;
+}
+
+export default function StatusDialog({ open, onClose, data, selected, onSelect, timezone }: StatusDialogProps) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, _data = {}) => {
+    return translate(translations, key, locale, 'en', _data);
+  });
+
+  const [status, setStatus] = useState(selected?.value || '');
+  const [duration, setDuration] = useState(selected?.duration || '');
+  const [customDate, setCustomDate] = useState(selected?.dateRange?.[1] || '');
+  const [changed, setChanged] = useState(false);
+
+  useEffect(() => {
+    setStatus(selected?.value || '');
+    setDuration(selected?.duration || '');
+    setCustomDate(selected?.dateRange?.[1] || '');
+  }, [selected]);
+
+  const isValid = useMemo(() => {
+    return status && duration;
+  }, [status, duration]);
+
+  const selectedStatus = data.find((item) => item.id === status);
+
+  const handleQuickSettingClick = (item: StatusItem) => {
+    onSelect({
+      value: item.id,
+      ...(item.duration ? { duration: item.duration as DurationEnum } : {}),
+    });
+    onClose();
+  };
+
+  const handleSubmit = (clean = false) => {
+    if (clean) {
+      onSelect(undefined);
+    } else {
+      const current = dayjs();
+      onSelect({
+        value: status,
+        ...(duration ? { duration: duration as DurationEnum } : {}),
+        ...(duration === DurationEnum.Custom && customDate
+          ? { dateRange: [current.toDate(), dayjs(customDate).toDate()] }
+          : {}),
+      });
+    }
+    onClose();
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      maxWidth="xs"
+      fullWidth
+      PaperProps={{
+        sx: {
+          borderRadius: '8px',
+        },
+      }}>
+      <DialogTitle sx={{ borderBottom: `1px solid ${colors.dividerColor}` }}>
+        <Typography variant="h6" sx={{ fontSize: '16px !important', mb: 0 }}>
+          {t('profile.setStatus')}
+        </Typography>
+        <IconButton
+          aria-label="close"
+          onClick={onClose}
+          sx={{
+            position: 'absolute',
+            right: 8,
+            top: 8,
+            color: (theme) => theme.palette.grey[500],
+          }}>
+          <CloseIcon />
+        </IconButton>
+      </DialogTitle>
+      <DialogContent>
+        <FormControl fullWidth sx={{ mt: 2 }}>
+          <InputLabel size="small" sx={{ fontSize: '14px' }}>
+            {t('profile.setStatus')}
+          </InputLabel>
+          <Select
+            value={status}
+            label={t('profile.setStatus')}
+            onChange={(e) => {
+              setStatus(e.target.value);
+              setChanged(true);
+            }}
+            variant="outlined"
+            // eslint-disable-next-line react/no-unstable-nested-components
+            IconComponent={(props) => <ArrowDownwardIcon {...props} width={20} height={20} />}
+            sx={selectStyle}>
+            {data.map((item) => (
+              <MenuItem key={item.id} value={item.id}>
+                <Suspense fallback={null}>
+                  {item.icon && (
+                    <ListItemIcon style={{ minWidth: '24px' }}>
+                      {createElement(item.icon, {
+                        style: { fontSize: '16px', width: '16px', height: '16px' },
+                      })}
+                    </ListItemIcon>
+                  )}
+                  {item.name}
+                </Suspense>
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+
+        {!status ? (
+          <Box sx={{ mt: '24px' }}>
+            <Typography variant="body2" color="text.secondary">
+              {t('profile.quickSettings')}
+            </Typography>
+            {data.map((item) => (
+              <Box
+                key={item.id}
+                onClick={() => handleQuickSettingClick(item)}
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '4px',
+                  p: '4px',
+                  cursor: 'pointer',
+                  borderRadius: '8px',
+                  '&:hover': {
+                    bgcolor: 'action.hover',
+                  },
+                }}>
+                <Suspense fallback={null}>
+                  {item.icon && (
+                    <ListItemIcon style={{ minWidth: '24px' }}>
+                      {createElement(item.icon, {
+                        style: { fontSize: '16px', width: '16px', height: '16px' },
+                      })}
+                    </ListItemIcon>
+                  )}
+                  {item.name}
+                  {item.durationName && (
+                    <Typography variant="body2" color="text.secondary">
+                      - {item.durationName}
+                    </Typography>
+                  )}
+                </Suspense>
+              </Box>
+            ))}
+          </Box>
+        ) : (
+          <FormControl fullWidth sx={{ mt: '24px' }}>
+            <InputLabel size="small" sx={{ fontSize: '14px' }}>
+              {t('profile.removeStatusAfter')}
+            </InputLabel>
+            <Select
+              value={duration}
+              label={t('profile.removeStatusAfter')}
+              onChange={(e) => {
+                const { value } = e.target;
+                setDuration(value);
+                if (value === DurationEnum.Custom) {
+                  setCustomDate(dayjs().toDate());
+                }
+                setChanged(true);
+              }}
+              variant="outlined"
+              // eslint-disable-next-line react/no-unstable-nested-components
+              IconComponent={(props) => <ArrowDownwardIcon {...props} width={20} height={20} />}
+              sx={selectStyle}>
+              {selectedStatus?.children?.map((item) => (
+                <MenuItem key={item.id} value={item.id}>
+                  {item.name}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        )}
+        {duration === DurationEnum.Custom && (
+          <Box sx={{ mt: '24px' }}>
+            <DateTimeInput
+              value={customDate as Date}
+              onChange={(e) => {
+                setCustomDate(e);
+                setChanged(true);
+              }}
+              label={t('profile.selectEndTime')}
+              timezone={timezone}
+              error={duration === DurationEnum.Custom && !customDate}
+              helperText={duration === DurationEnum.Custom && !customDate ? t('profile.pleaseSelectTime') : undefined}
+            />
+          </Box>
+        )}
+      </DialogContent>
+      <DialogActions sx={{ p: '16px 24px', borderTop: `1px solid ${colors.dividerColor}` }}>
+        {selected?.value && !changed ? (
+          <Button
+            sx={{ ...defaultButtonStyle, minWidth: '54px' }}
+            size="small"
+            variant="outlined"
+            onClick={() => handleSubmit(true)}>
+            {t('profile.cleanStatus')}
+          </Button>
+        ) : (
+          <>
+            <Button size="small" variant="outlined" sx={{ ...defaultButtonStyle, minWidth: '54px' }} onClick={onClose}>
+              {t('common.cancel')}
+            </Button>
+            <Button
+              sx={{
+                ...primaryButtonStyle,
+                minWidth: '54px',
+                '&.Mui-disabled': {
+                  backgroundColor: 'rgba(0, 0, 0, 0.12)',
+                },
+              }}
+              disabled={!isValid}
+              onClick={() => handleSubmit(false)}
+              size="small"
+              variant="outlined">
+              {t('common.confirm')}
+            </Button>
+          </>
+        )}
+      </DialogActions>
+    </Dialog>
+  );
+}

package/src/UserCenter/components/status-selector/menu-item.tsx

@@ -43,6 +43,8 @@ export interface StatusItem {
   id: string;
   name: string;
   icon?: React.FC<SvgIconProps>;
+  duration?: string;
+  durationName?: string;
   children?: Array<StatusItem>;
 }
 

package/src/UserCenter/components/user-center.tsx

@@ -62,6 +62,11 @@ const ContentWrapper = styled(Box)(({ theme }) => ({
   [theme.breakpoints.up('md')]: {
     flex: 1,
   },
+  '@media (min-width: 850px) and (max-width: 1050px)': {
+    '& .user-center-tabs': {
+      maxWidth: '500px',
+    },
+  },
 }));
 
 export default function UserCenter({
@@ -227,7 +232,7 @@ export default function UserCenter({
           label: x.title || x.label,
           url: x.link || x.url,
           protected: privacyState?.data?.[value] ?? false,
-          isPrivate: x.isPrivate || x._rawLink === '/payment-kit/customer', // FIXME: HACK: 隐藏 payment-kit/customer 菜单, 需要一个通用的解决方案，在嵌入的时候就决定是否是私有的
+          isPrivate: x.isPrivate || x.private || x._rawLink.includes('/customer'), // FIXME: HACK: 隐藏 /customer 菜单, 需要一个通用的解决方案，在嵌入的时候就决定是否是私有的
           // icon: x.icon,
         };
       })
@@ -453,7 +458,7 @@ export default function UserCenter({
 
     return (
       <ContentWrapper display="flex" flexDirection={isMobile ? 'column' : 'row'}>
-        <Box flex="1" order={isMobile ? 2 : 'unset'}>
+        <Box flex="1" className="user-center-tabs" order={isMobile ? 2 : 'unset'}>
           {userCenterTabs.length > 0 && currentTab ? (
             <Box
               display="flex"

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

@@ -4,12 +4,13 @@ import utc from 'dayjs/plugin/utc';
 import timezonePlugin from 'dayjs/plugin/timezone';
 import { formatToDatetime } from '@arcblock/ux/lib/Util';
 import { useCreation } from 'ahooks';
+import { currentTimezone } from './utils';
 
 dayjs.extend(utc);
 dayjs.extend(timezonePlugin);
 
-export default function Clock({ timezone = 'utc', locale = 'zh' }: { timezone?: string; locale?: string }) {
-  const [time, setTime] = useState(dayjs().tz(timezone));
+export default function Clock({ timezone = currentTimezone, locale = 'zh' }: { timezone?: string; locale?: string }) {
+  const [time, setTime] = useState(dayjs().tz(timezone || currentTimezone));
 
   useEffect(() => {
     const timerId = setInterval(() => {

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

@@ -2,16 +2,15 @@
 /* eslint-disable import/no-extraneous-dependencies */
 
 import Box from '@mui/material/Box';
-import MenuItem from '@mui/material/MenuItem';
-import Select, { SelectChangeEvent } from '@mui/material/Select';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import SwipeableDrawer from '@mui/material/SwipeableDrawer';
 import Backdrop, { BackdropProps } from '@mui/material/Backdrop';
+
 import styled from '@emotion/styled';
 import { joinURL } from 'ufo';
 import Button from '@arcblock/ux/lib/Button';
 import cloneDeep from 'lodash/cloneDeep';
-import { temp as colors } from '@arcblock/ux/lib/Colors';
+
 import { useCreation, useMemoizedFn, useReactive } from 'ahooks';
 import { useMemo, useRef, useState, memo, forwardRef, useEffect, lazy } from 'react';
 import { translate } from '@arcblock/ux/lib/Locale/util';
@@ -19,46 +18,20 @@ 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';
 import EditableField from '../editable-field';
 import { LinkPreviewInput } from './link-preview-input';
-import { getTimezones } from './utils';
+import { currentTimezone, defaultButtonStyle, primaryButtonStyle } from './utils';
 import Clock from './clock';
-
-const timezones = getTimezones();
+import { TimezoneSelect } from './timezone-select';
 
 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 defaultButtonStyle = {
-  color: colors.foregroundsFgBase,
-  borderColor: colors.strokeBorderBase,
-  backgroundColor: colors.buttonsButtonNeutral,
-  '&:hover': {
-    borderColor: colors.strokeBorderBase,
-    backgroundColor: colors.buttonsButtonNeutralHover,
-  },
-  py: 0.5,
-  borderRadius: 2,
-};
-
-const primaryButtonStyle = {
-  color: colors.buttonsButtonNeutral,
-  borderColor: colors.foregroundsFgInteractive,
-  backgroundColor: colors.foregroundsFgInteractive,
-  '&:hover': {
-    borderColor: colors.foregroundsFgInteractive,
-    backgroundColor: colors.foregroundsFgInteractive,
-  },
-  py: 0.5,
-  borderRadius: 2,
-};
-
 const iconSize = {
   width: 20,
   height: 20,
@@ -201,6 +174,9 @@ export default function UserMetadataComponent({
       if (k === 'bio') {
         metadata[k] = metadata[k]?.slice(0, bioMaxLength);
       }
+      if (k === 'timezone') {
+        metadata[k] = (value as string) || currentTimezone;
+      }
     });
 
     onSave(metadata);
@@ -219,6 +195,7 @@ export default function UserMetadataComponent({
           component="textarea"
           inline={false}
           rows={3}
+          label={t('profile.bio')}
           maxLength={bioMaxLength}
           style={{
             ...(editing ? { marginBottom: 8 } : {}),
@@ -249,7 +226,7 @@ export default function UserMetadataComponent({
         />
 
         <EditableField
-          value={metadata.timezone ?? ''}
+          value={metadata.timezone || currentTimezone}
           onChange={(value) => onChange(value, 'timezone')}
           editable={editing}
           placeholder="timezone"
@@ -261,48 +238,17 @@ export default function UserMetadataComponent({
               <Clock timezone={metadata.timezone} locale={locale} />
             </p>
           }>
-          <Select
-            className={`timezone-select ${editing ? '' : 'disabled'}`}
-            value={metadata.timezone}
-            onChange={(e: SelectChangeEvent) => onChange(e.target.value, 'timezone')}
+          <TimezoneSelect
+            value={metadata.timezone || currentTimezone}
+            onChange={(value) => onChange(value, 'timezone')}
             disabled={!editing}
-            displayEmpty
-            variant="outlined"
-            placeholder="Timezone"
-            IconComponent={(props) => <ArrowDownwardIcon {...props} width={20} height={20} />}
-            MenuProps={{
-              PaperProps: {
-                style: {
-                  maxHeight: '400px',
-                },
-              },
-              style: {
-                zIndex: mode === 'drawer' ? 9999 : 1300,
-              },
-            }}
-            sx={{
-              width: '100%',
-
-              '&:hover': {
-                'fieldset.MuiOutlinedInput-notchedOutline': {
-                  borderColor: colors.dividerColor,
-                },
-              },
-              fieldset: {
-                borderColor: colors.dividerColor,
-              },
-            }}>
-            {timezones.map((tz) => (
-              <MenuItem key={tz.value} value={tz.value}>
-                {tz.label}
-              </MenuItem>
-            ))}
-          </Select>
+          />
         </EditableField>
 
         <EditableField
           value={metadata.email ?? user?.email ?? ''}
-          editable={editing && !emailVerified}
+          editable={editing}
+          canEdit={!emailVerified}
           verified={emailVerified}
           placeholder="Email"
           icon={<EmailIcon {...iconSize} />}
@@ -320,7 +266,8 @@ export default function UserMetadataComponent({
 
         <EditableField
           value={metadata.phone ?? user?.phone ?? ''}
-          editable={editing && !phoneVerified}
+          editable={editing}
+          canEdit={!phoneVerified}
           verified={phoneVerified}
           placeholder="Phone"
           icon={<PhoneIcon {...iconSize} />}

package/src/UserCenter/components/user-info/timezone-select.tsx

@@ -0,0 +1,114 @@
+import { useState, useEffect, useMemo } from 'react';
+import MenuItem from '@mui/material/MenuItem';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import ListSubheader from '@mui/material/ListSubheader';
+import TextField from '@mui/material/TextField';
+import debounce from 'lodash/debounce';
+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 { getTimezones } from './utils';
+
+const timezones = getTimezones();
+
+interface TimezoneSelectProps {
+  value: string;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+  mode?: 'drawer' | 'self';
+}
+
+export function TimezoneSelect({ value, onChange, disabled = false, mode = 'self' }: TimezoneSelectProps) {
+  const [timezoneData, setTimezoneData] = useState(timezones);
+  const [searchText, setSearchText] = useState('');
+
+  const timezoneDebounce = useMemo(
+    () =>
+      debounce((v: string) => {
+        return v ? timezones.filter((tz) => tz.value.toLowerCase().includes(v.toLowerCase())) : timezones;
+      }, 300),
+    []
+  );
+
+  useEffect(() => {
+    const data = timezoneDebounce(searchText);
+    setTimezoneData(data ?? timezones);
+  }, [searchText, timezoneDebounce]);
+
+  useEffect(() => {
+    return () => {
+      timezoneDebounce.cancel();
+    };
+  }, [timezoneDebounce]);
+
+  return (
+    <Select
+      className={`timezone-select ${disabled ? 'disabled' : ''}`}
+      value={value}
+      onChange={(e: SelectChangeEvent) => onChange(e.target.value)}
+      disabled={disabled}
+      displayEmpty
+      variant="outlined"
+      placeholder="Timezone"
+      // eslint-disable-next-line react/no-unstable-nested-components
+      IconComponent={(props) => <ArrowDownwardIcon {...props} width={20} height={20} />}
+      MenuProps={{
+        PaperProps: {
+          style: {
+            maxHeight: '400px',
+          },
+        },
+        style: {
+          zIndex: mode === 'drawer' ? 9999 : 1300,
+        },
+      }}
+      sx={{
+        width: '100%',
+        '&:hover': {
+          'fieldset.MuiOutlinedInput-notchedOutline': {
+            borderColor: colors.dividerColor,
+          },
+        },
+        'fieldset.MuiOutlinedInput-notchedOutline': {
+          borderColor: colors.dividerColor,
+        },
+      }}>
+      <ListSubheader>
+        <TextField
+          autoFocus
+          value={searchText}
+          placeholder="Timezone"
+          variant="outlined"
+          size="small"
+          fullWidth
+          onChange={(event) => setSearchText(event.target.value)}
+          onKeyDown={(e) => {
+            if (e.key !== 'Escape') {
+              e.stopPropagation();
+            }
+          }}
+          sx={{
+            marginTop: '8px',
+            '& .MuiOutlinedInput-root': {
+              '& fieldset': {
+                borderColor: colors.dividerColor,
+                borderWidth: '1px',
+              },
+              '&:hover fieldset': {
+                borderColor: colors.dividerColor,
+              },
+              '&.Mui-focused fieldset': {
+                borderColor: colors.dividerColor,
+              },
+            },
+          }}
+        />
+      </ListSubheader>
+      {timezoneData.map((tz) => (
+        <MenuItem key={tz.value} value={tz.value}>
+          {tz.label}
+        </MenuItem>
+      ))}
+    </Select>
+  );
+}

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

@@ -15,7 +15,7 @@ import { parseURL, joinURL } from 'ufo';
 import { translations } from '../../libs/locales';
 import type { User, UserMetadata } from '../../../@types';
 import { formatAxiosError } from '../../libs/utils';
-import { getStatusDuration, isValidUrl } from './utils';
+import { currentTimezone, getStatusDuration, isValidUrl } from './utils';
 import SwitchRole from './switch-role';
 import UserMetadataComponent from './metadata';
 import UserStatus from './user-status';
@@ -63,7 +63,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) {
@@ -162,6 +162,7 @@ export default function UserBasicInfo({
             isMobile={isMobile}
             size={rest.size || (isMobile ? 64 : 100)}
             isMyself={isMyself}
+            timezone={user?.metadata?.timezone || currentTimezone}
             status={userStatus}
             onChange={onUpdateUserStatus}
           />
@@ -183,15 +184,7 @@ export default function UserBasicInfo({
             {user?.fullName}
             {isMyself ? <SwitchRole user={user} switchPassport={switchPassport} /> : null}
           </Typography>
-          <DID
-            did={user.did}
-            showQrcode
-            copyable
-            compact={!showFullDid}
-            responsive={!showFullDid}
-            locale={locale}
-            style={{ maxWidth: 260 }}
-          />
+          <DID did={user.did} showQrcode copyable compact={!showFullDid} responsive={!showFullDid} locale={locale} />
         </Box>
       </Box>
       <UserMetadataComponent isMyself={isMyself} user={user} onSave={onSave} />