@blocklet/ui-react 3.4.15 → 3.5.0

package/src/UserCenter/components/settings.tsx

@@ -1,170 +0,0 @@
-import { useEffect } from 'react';
-import { Box, Typography } from '@mui/material';
-import type { BoxProps } from '@mui/material';
-import { ROLES } from '@abtnode/constant';
-import { useCreation, useMemoizedFn } from 'ahooks';
-import { translate } from '@arcblock/ux/lib/Locale/util';
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { mergeSx } from '@arcblock/ux/lib/Util/style';
-import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
-import { getBlockletSDK } from '@blocklet/js-sdk';
-
-import { translations } from '../libs/locales';
-import Notification from './notification';
-import Privacy from './privacy';
-import { User, UserCenterTab } from '../../@types';
-import { UserSessions } from '../../UserSessions';
-import ThirdPartyLogin from './third-party-login';
-import ConfigProfile from './config-profile';
-import DangerZone from './danger-zone';
-
-export default function Settings({
-  user,
-  settings,
-  onSave,
-  isMobile,
-  ...rest
-}: {
-  user: User;
-  onSave: (type: 'privacy' | 'profile') => void;
-  settings: {
-    userCenterTabs: UserCenterTab[];
-  };
-  isMobile: boolean;
-  onDestroySelf?: () => void;
-} & BoxProps) {
-  const client = getBlockletSDK();
-  const { locale } = useLocaleContext();
-  const browser = useBrowser();
-  const isArcSphere = browser.arcSphere;
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-
-  const isOwner = useCreation(() => {
-    return user.passports?.some((x) => x.role === ROLES.OWNER);
-  }, [user]);
-
-  const privacyConfigList = useCreation(() => {
-    const userCenterTabs = settings?.userCenterTabs || [];
-    return userCenterTabs.map((item) => {
-      return {
-        key: item.value,
-        name: item.label,
-        value: item.protected,
-        isPrivate: item.isPrivate,
-      };
-    });
-  }, [settings?.userCenterTabs]);
-  const tabs = useCreation(() => {
-    return [
-      !isArcSphere
-        ? {
-            label: t('commonSetting.title'),
-            value: 'common',
-            content: <ConfigProfile user={user} onSave={onSave} />,
-          }
-        : undefined,
-      {
-        label: t('notificationManagement'),
-        value: 'notification',
-        content: <Notification user={user} isMobile={isMobile} />,
-      },
-      {
-        label: t('thirdPartyLogin.title'),
-        value: 'thirdPartyLogin',
-        content: <ThirdPartyLogin user={user} />,
-      },
-      {
-        label: t('privacyManagement'),
-        value: 'privacy',
-        // @ts-ignore
-        content: <Privacy configList={privacyConfigList} onSave={onSave} />,
-      },
-      {
-        label: t('sessionManagement'),
-        value: 'session',
-        content: (
-          <UserSessions
-            user={user}
-            showUser={false}
-            getUserSessions={(params) => {
-              return client.userSession.getMyLoginSessions({}, params);
-            }}
-          />
-        ),
-      },
-      !isOwner && rest.onDestroySelf && typeof rest.onDestroySelf === 'function'
-        ? {
-            label: t('dangerZone.title'),
-            value: 'dangerZone',
-            content: <DangerZone onDestroySelf={rest.onDestroySelf} />,
-            sx: {
-              borderColor: 'error.main',
-            },
-          }
-        : null,
-    ].filter(Boolean);
-  }, [user, privacyConfigList, isMobile]);
-
-  // 支持 hash 锚点定位
-  useEffect(() => {
-    const id = window.location.hash.slice(1);
-    if (id) {
-      const element = document.getElementById(id);
-      element?.scrollIntoView({ behavior: 'smooth' });
-    }
-  }, []);
-
-  return (
-    <Box
-      {...rest}
-      sx={{
-        ...rest?.sx,
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 2.5,
-        minWidth: {
-          md: 500,
-        },
-        maxWidth: '100%',
-      }}>
-      {tabs.map((tab) => {
-        if (!tab) {
-          return null;
-        }
-        return (
-          <Box
-            id={tab.value}
-            key={tab.value}
-            sx={mergeSx(
-              {
-                border: '1px solid',
-                borderColor: 'divider',
-                borderRadius: 1,
-                p: 2,
-                '&:last-child': {
-                  mb: 5,
-                },
-              },
-              tab.sx
-            )}>
-            <Typography
-              sx={{
-                color: 'text.primary',
-                fontWeight: 600,
-              }}>
-              {tab.label}
-            </Typography>
-            <Box
-              sx={{
-                mt: 2.5,
-              }}>
-              {tab.content}
-            </Box>
-          </Box>
-        );
-      })}
-    </Box>
-  );
-}

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

@@ -1,77 +0,0 @@
-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 = undefined,
-  helperText = undefined,
-  label = undefined,
-  timezone = undefined,
-}: 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}
-        label={label}
-        error={error}
-        onClick={handleClick}
-        sx={{
-          '& .MuiInputBase-root': {
-            cursor: 'pointer',
-          },
-          '& .MuiOutlinedInput-notchedOutline': {
-            cursor: 'pointer',
-          },
-        }}
-        slotProps={{
-          htmlInput: {
-            min: minDateTime,
-            style: { cursor: 'pointer' },
-          },
-
-          inputLabel: {
-            shrink: true,
-          },
-        }}
-      />
-      {helperText && <FormHelperText>{helperText}</FormHelperText>}
-    </FormControl>
-  );
-}

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

@@ -1,293 +0,0 @@
-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 { Close as CloseIcon } from '@mui/icons-material';
-import { translate } from '@arcblock/ux/lib/Locale/util';
-import { useMemoizedFn } from 'ahooks';
-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: 'divider',
-    },
-  },
-  'fieldset.MuiOutlinedInput-notchedOutline': {
-    borderColor: 'divider',
-    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 = undefined,
-}: 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', borderColor: 'divider' }}>
-        <Typography variant="body1" 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"
-              sx={{
-                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"
-                      sx={{
-                        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', borderColor: 'divider' }}>
-        {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/duration-menu.tsx

@@ -1,90 +0,0 @@
-import { Menu, styled, Typography } from '@mui/material';
-import { useState } from 'react';
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { useMemoizedFn } from 'ahooks';
-import { translate } from '@arcblock/ux/lib/Locale/util';
-import { translations } from '../../libs/locales';
-import { DurationEnum } from '../../../@types';
-import StatusMenuItem, { BaseStatusProps, StatusItem, StyledMenu } from './menu-item';
-
-interface StatusDurationMenuProps extends BaseStatusProps {
-  data: StatusItem;
-}
-function DurationMenu({ data, selected, onSelect }: StatusDurationMenuProps) {
-  const { locale } = useLocaleContext();
-  const t = useMemoizedFn((key, _data = {}) => {
-    return translate(translations, key, locale, 'en', _data);
-  });
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-
-  const open = Boolean(anchorEl);
-
-  const openSubMenu = (e: React.MouseEvent<HTMLElement>) => {
-    setAnchorEl(e.currentTarget);
-  };
-
-  const closeSubMenu = () => {
-    setAnchorEl(null);
-  };
-
-  const onSelectStatus = (e: React.MouseEvent<HTMLElement>) => {
-    openSubMenu(e);
-  };
-
-  const onSelectDuration = (e: React.MouseEvent<HTMLElement>, item: StatusItem) => {
-    onSelect({
-      ...(selected ?? {}),
-      value: data.id,
-      duration: item.id as DurationEnum,
-    });
-    closeSubMenu();
-  };
-  return (
-    <>
-      <StatusMenuItem icon={data.icon} selected={selected?.value === data.id} onClick={onSelectStatus}>
-        {data.name}
-      </StatusMenuItem>
-      <StyledMenu
-        anchorOrigin={{
-          vertical: 'top',
-          horizontal: 'right',
-        }}
-        transformOrigin={{
-          vertical: 'top',
-          horizontal: 'left',
-        }}
-        open={open}
-        onClose={closeSubMenu}
-        anchorEl={anchorEl}>
-        <Typography
-          component="span"
-          sx={{
-            color: 'text.secondary',
-            pl: 2,
-            fontSize: '14px',
-          }}>
-          {t('profile.removeStatusAfter')}
-        </Typography>
-        {data.children?.map((item) => (
-          <StatusMenuItem
-            key={item.id}
-            selected={selected?.duration === item.id}
-            onClick={(e) => onSelectDuration(e, item)}>
-            {item.name}
-          </StatusMenuItem>
-        ))}
-      </StyledMenu>
-    </>
-  );
-}
-
-export default DurationMenu;
-
-export const MenuDiv = styled(Menu)`
-  .MuiList-root {
-    min-width: 160px;
-  }
-  .selected {
-    background-color: ${({ theme }) => theme.palette.grey[50]};
-  }
-`;

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

@@ -1,58 +0,0 @@
-import { PopoverProps, Typography } from '@mui/material';
-import { translate } from '@arcblock/ux/lib/Locale/util';
-import { useMemoizedFn } from 'ahooks';
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { UserMetadata } from '../../../@types';
-import StatusDurationMenu from './duration-menu';
-import StatusMenuItem, { BaseStatusProps, StatusItem, StyledMenu } from './menu-item';
-import { translations } from '../../libs/locales';
-
-interface StatusSelectorProps extends BaseStatusProps {
-  data: Array<StatusItem>;
-  open: boolean;
-  anchorEl?: PopoverProps['anchorEl'];
-}
-
-function StatusSelector({ data, open, onSelect, anchorEl = undefined, selected }: StatusSelectorProps) {
-  const { locale } = useLocaleContext();
-  const t = useMemoizedFn((key, _data = {}) => {
-    return translate(translations, key, locale, 'en', _data);
-  });
-  const onSelectStatus = (v?: UserMetadata['status']) => {
-    onSelect(v);
-  };
-
-  const renderMenuItems = () => {
-    return data.map((item) => {
-      if (item.children) {
-        return <StatusDurationMenu key={item.id} data={item} selected={selected} onSelect={onSelectStatus} />;
-      }
-      return (
-        <StatusMenuItem
-          key={item.id}
-          icon={item.icon}
-          selected={selected?.value === item.id}
-          onClick={() => onSelectStatus({ value: item.id })}>
-          {item.name}
-        </StatusMenuItem>
-      );
-    });
-  };
-
-  return (
-    <StyledMenu open={open} onClose={() => onSelectStatus()} anchorEl={anchorEl}>
-      <Typography
-        component="span"
-        sx={{
-          color: 'text.secondary',
-          pl: 2,
-          fontSize: '14px',
-        }}>
-        {t('profile.setStatus')}
-      </Typography>
-      {renderMenuItems()}
-    </StyledMenu>
-  );
-}
-
-export default StatusSelector;