@arcblock/ux 3.4.14 → 3.5.0

package/src/Screenshot/index.tsx

@@ -1,300 +0,0 @@
-import { createElement, Children, cloneElement, useEffect, useRef, useState } from 'react';
-import { type SxProps } from '@mui/material';
-import isUndefined from 'lodash/isUndefined';
-
-import { mergeProps } from '../Util';
-import { styled } from '../Theme';
-import BaseScreenshot from './BaseScreenshot';
-
-import './devices.css';
-
-type DeviceStyles = {
-  borderRadius: number;
-  width: number;
-  scale: number;
-  zIndex?: number;
-};
-
-const types = {
-  'iphone-x': {
-    borderRadius: 32,
-    width: 342,
-    scale: 0.78,
-  },
-  'iphone-8': {
-    borderRadius: 0,
-    width: 336,
-    scale: 0.78,
-  },
-  'ipad-pro': {
-    borderRadius: 0,
-    width: 560,
-    scale: 0.62,
-  },
-  'imac-pro': {
-    borderRadius: 0,
-    width: 624,
-    scale: 0.56,
-  },
-  macbook: {
-    borderRadius: 0,
-    width: 740,
-    scale: 0.47,
-  },
-  'macbook-pro': {
-    borderRadius: 0,
-    width: 740,
-    scale: 0.47,
-  },
-  'surface-pro': {
-    borderRadius: 0,
-    width: 561,
-    scale: 0.62,
-  },
-  'surface-book': {
-    borderRadius: 0,
-    width: 728,
-    scale: 0.47,
-  },
-  'surface-studio': {
-    borderRadius: 0,
-    width: 640,
-    scale: 0.55,
-  },
-  'galaxy-s8': {
-    borderRadius: 0,
-    width: 321,
-    scale: 0.8,
-  },
-  'google-pixel': {
-    borderRadius: 0,
-    width: 360,
-    scale: 0.72,
-  },
-  'google-pixel-2-xl': {
-    borderRadius: 0,
-    width: 360,
-    scale: 0.72,
-  },
-  'apple-watch': {
-    borderRadius: 0,
-    width: 200,
-    scale: 1,
-  },
-};
-
-const childProps = {
-  img: ['alt', 'title', 'src', 'srcSet', 'sizes', 'loading', 'key', 'children'],
-  video: ['alt', 'title', 'muted', 'autoplay', 'loop', 'key', 'children'],
-};
-
-const createChild = (child: React.ReactElement<any>) => [
-  createElement(
-    child.type,
-    childProps[child.type as keyof typeof childProps].reduce((acc: Record<string, any>, x: string) => {
-      acc[x] = child.props[x];
-      return acc;
-    }, {})
-  ),
-];
-
-const findChildren = (
-  children: React.ReactElement<any>[],
-  returnArgWhenNotFound = true
-): React.ReactElement<any>[] | null => {
-  for (let i = 0; i < children.length; i++) {
-    const child = children[i];
-
-    if (['img', 'video'].includes(child.type as string)) {
-      return createChild(child);
-    }
-
-    if (child.props && child.props.children) {
-      const subChildren = Children.toArray(child.props.children) as React.ReactElement<any>[];
-      const result = findChildren(subChildren, false);
-      if (result) {
-        return result;
-      }
-    }
-  }
-
-  if (returnArgWhenNotFound) {
-    return children;
-  }
-
-  return null;
-};
-
-export interface OldScreenshotProps extends React.ComponentProps<'div'> {
-  type: keyof typeof types;
-  className?: string;
-  style?: React.CSSProperties;
-  width?: number;
-  height?: number;
-  sx?: SxProps;
-}
-
-// This component is built upon the awesome device.css lib
-// By default it will find and only render img/video tags in the children
-// If neither of them are found, the whole child tree is rendered
-function OldScreenshot(rawProps: OldScreenshotProps) {
-  const props = Object.assign({}, rawProps);
-  // eslint-disable-next-line react/prop-types
-  if (isUndefined(props.type)) {
-    props.type = 'iphone-x';
-  }
-  // eslint-disable-next-line react/prop-types
-  if (isUndefined(props.className)) {
-    props.className = '';
-  }
-  // eslint-disable-next-line react/prop-types
-  if (isUndefined(props.style)) {
-    props.style = {};
-  }
-  // eslint-disable-next-line react/prop-types
-  if (isUndefined(props.width)) {
-    props.width = 0;
-  }
-  // eslint-disable-next-line react/prop-types
-  if (isUndefined(props.height)) {
-    props.height = 0;
-  }
-  const newProps = mergeProps(props, OldScreenshot, ['style', 'width', 'height']) as OldScreenshotProps;
-  const { type, children, style, className, width, height, ...rest } = newProps;
-  const { zIndex = 0, borderRadius = 0 } = (types[type!] || {}) as DeviceStyles;
-
-  return (
-    <Div
-      {...rest}
-      type={type!}
-      className={`device device-${type} ${className}`.trim()}
-      style={style}
-      contentRadius={borderRadius}
-      contentZIndex={zIndex}>
-      <div className="device-frame">
-        <div className="device-content">
-          {/* eslint-disable-next-line react/no-array-index-key */}
-          {findChildren(Children.toArray(children) as React.ReactElement<any>[])?.map((item: any, index: number) => {
-            // eslint-disable-next-line react/no-array-index-key
-            return cloneElement(item, { key: index });
-          })}
-        </div>
-      </div>
-      <div className="device-stripe" />
-      <div className="device-header" />
-      <div className="device-sensors" />
-      <div className="device-btns" />
-      <div className="device-power" />
-    </Div>
-  );
-}
-
-type DivProps = {
-  type: keyof typeof types;
-  contentRadius: number;
-  contentZIndex: number;
-};
-
-const Div = styled('div')<DivProps>`
-  @media (max-width: ${(props) => types[props.type].width}px) {
-    transform-origin: 0 0;
-    transform: scale(${(props) => types[props.type].scale});
-  }
-  .device-content {
-    overflow: hidden;
-  }
-  .device-content video,
-  .device-content img {
-    border-radius: ${(props) => props.contentRadius}px;
-    background-color: #fff;
-    background-position: center center;
-    background-size: cover;
-    object-fit: cover;
-    width: 100.1%;
-    height: 100.1%;
-  }
-`;
-
-export interface ScreenFixerProps extends OldScreenshotProps {}
-
-/**
- * 用于修正旧版 Screenshot 无法匹配尺寸的问题
- * @param {*} props params to OldScreenshot
- * @returns <OldScreenshot />
- */
-function ScreenFixer({ ...props }: ScreenFixerProps) {
-  const screenEl = useRef<HTMLDivElement>(null);
-  const [height, setHeight] = useState<number>();
-  const [scale, setScale] = useState<number | null>(null);
-
-  useEffect(() => {
-    let resizeObs: ResizeObserver | null = null;
-
-    const fixSize = () => {
-      const { clientWidth } = screenEl.current!;
-
-      // 获取内部元素的宽高
-      const { clientWidth: targetWidth, clientHeight: targetHeight } = screenEl.current!.children[0];
-
-      const realScale = clientWidth / targetWidth;
-      if (realScale < 1) {
-        setScale(realScale);
-        setHeight(realScale * targetHeight);
-      } else {
-        setScale(null);
-        setHeight(undefined);
-      }
-    };
-
-    if (screenEl.current) {
-      resizeObs = new ResizeObserver(fixSize);
-      resizeObs.observe(screenEl.current);
-    }
-
-    return () => {
-      if (resizeObs) {
-        resizeObs.disconnect();
-      }
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [screenEl.current]);
-
-  return (
-    <ReScreen ref={screenEl} style={{ height }}>
-      <OldScreenshot {...props} style={{ transform: scale ? `scale(${scale})` : undefined }} />
-    </ReScreen>
-  );
-}
-
-const ReScreen = styled('div')`
-  div[type] {
-    transform: scale(1);
-    transform-origin: 0 0;
-  }
-`;
-
-export interface ScreenShotProps extends ScreenFixerProps {
-  type: keyof typeof types;
-  src?: string;
-}
-
-function Screenshot({ type, src = '', children, sx = {}, ...rest }: ScreenShotProps) {
-  const _type = type.toLowerCase();
-
-  // 新版采用容器采用BaseScreenshot，svg集成，更容易拓展，响应式更好
-  if (['phone', 'macbook'].includes(_type)) {
-    return (
-      <BaseScreenshot type={_type} sx={sx} {...rest}>
-        {children || (src ? <img src={src} alt="screenshot" /> : null)}
-      </BaseScreenshot>
-    );
-  }
-
-  // 旧版采用纯css制作，定制性欠缺，暂时保留使用
-  return (
-    <ScreenFixer type={type} sx={{ ...sx, margin: 'auto' }} {...rest}>
-      {children || (src ? <img src={src} alt="screenshot" /> : null)}
-    </ScreenFixer>
-  );
-}
-export default Screenshot;

package/src/SessionBlocklet/index.tsx

@@ -1,178 +0,0 @@
-import { useRef } from 'react';
-import {
-  Box,
-  type BoxProps,
-  ClickAwayListener,
-  Fade,
-  IconButton,
-  List,
-  ListItem,
-  ListItemButton,
-  Paper,
-  Popper,
-  Typography,
-  useTheme,
-} from '@mui/material';
-import { Icon } from '@iconify/react';
-import DashboardOutlineRoundedIcon from 'iconify-icons-material-symbols-400/dashboard-outline-rounded';
-import WidgetsOutlineRoundedIcon from '@iconify-icons/material-symbols/widgets-outline-rounded';
-import { useMemoizedFn, useReactive } from 'ahooks';
-
-import Button from '../Button';
-import { BLOCKLET_SERVICE_PATH_PREFIX, NAVIGATION_URL } from '../Util/constant';
-import SessionPermission from '../SessionPermission';
-import { getTranslation } from '../Util';
-import type { Locale } from '../type';
-
-export interface SessionBlockletProps extends Omit<BoxProps, 'onClick' | 'onMouseEnter' | 'onMouseLeave'> {
-  session: Record<string, any>;
-  locale?: Locale;
-  size?: number;
-  popperType?: 'hover' | 'click';
-}
-
-export default function SessionBlocklet({
-  session,
-  locale = 'zh',
-  size = 24,
-  popperType = 'click',
-  sx,
-  ...rest
-}: SessionBlockletProps) {
-  const blocklet = window?.blocklet || {};
-  const sessionMenuList = (blocklet.navigation || [])
-    // HACK 过滤掉默认插入的 /sessionManager 菜单
-    .filter((item) => item.section === 'sessionManager' && !['/sessionManager'].includes(item.id))
-    .filter((item) => {
-      if ((item?.role || []).includes(session?.user?.role || 'guest')) {
-        return true;
-      }
-      return false;
-    })
-    .map((item) => {
-      const component = (blocklet?.componentMountPoints || []).find((x) => item.component === x.name);
-      return {
-        ...item,
-        component,
-      };
-    });
-  const theme = useTheme();
-  const popperAnchorRef = useRef(null);
-  const currentState = useReactive({
-    open: false,
-  });
-  const onTogglePopper = useMemoizedFn((value = !currentState.open) => {
-    currentState.open = value;
-  });
-  const handleEventProps =
-    popperType === 'hover'
-      ? { onMouseEnter: () => onTogglePopper(true), onMouseLeave: () => onTogglePopper(false) }
-      : { onClick: () => onTogglePopper() };
-
-  if (sessionMenuList.length === 0 || !session?.user) {
-    return null;
-  }
-
-  return (
-    <Box
-      sx={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', ...sx }}
-      {...rest}
-      {...handleEventProps}>
-      <IconButton size="medium" ref={popperAnchorRef}>
-        <Icon icon={DashboardOutlineRoundedIcon} fontSize={size} style={{ transform: 'scale(1.08)' }} />
-      </IconButton>
-      <Popper
-        open={currentState.open}
-        anchorEl={popperAnchorRef.current}
-        transition
-        placement="bottom-end"
-        sx={{ zIndex: 1600 }}>
-        {({ TransitionProps }) => (
-          <ClickAwayListener
-            onClickAway={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              onTogglePopper(false);
-            }}>
-            <Fade {...TransitionProps} timeout={350}>
-              <Paper
-                variant="outlined"
-                sx={{
-                  borderRadius: 1.5,
-                  width: 350,
-                  maxWidth: '90vw',
-                  p: 2,
-                }}>
-                <List
-                  sx={{
-                    display: 'grid',
-                    gridTemplateColumns: 'repeat(auto-fill, 100px)',
-                    gridAutoRows: 'minmax(100px, max-content)',
-                    justifyContent: 'space-between',
-                    maxHeight: 350,
-                    overflowY: 'auto',
-                    p: 0,
-                  }}>
-                  {sessionMenuList.map((item) => (
-                    <ListItem key={item.id} disablePadding>
-                      <ListItemButton
-                        href={getTranslation(item.link, locale)}
-                        sx={{
-                          p: 1,
-                          display: 'flex',
-                          flexDirection: 'column',
-                          alignItems: 'center',
-                          gap: 1,
-                          width: '100%',
-                          height: '100%',
-                          borderRadius: 1,
-                          '&:hover': {
-                            backgroundColor: 'action.hover',
-                          },
-                        }}>
-                        {item?.component?.did ? (
-                          <Box
-                            component="img"
-                            src={`${BLOCKLET_SERVICE_PATH_PREFIX}/blocklet/logo-bundle/${item.component.did}`}
-                            sx={{
-                              borderRadius: 1,
-                              width: 50,
-                              height: 50,
-                              objectFit: 'contain',
-                            }}
-                            alt="SessionBlocklet component icon"
-                          />
-                        ) : (
-                          <Icon
-                            fontSize={50}
-                            icon={item.icon || WidgetsOutlineRoundedIcon}
-                            color={theme.palette.text.secondary}
-                          />
-                        )}
-
-                        <Typography
-                          sx={{
-                            fontSize: '12px',
-                            color: 'text.primary',
-                            textAlign: 'center',
-                            lineHeight: 'normal',
-                          }}>
-                          {getTranslation(item.title, locale)}
-                        </Typography>
-                      </ListItemButton>
-                    </ListItem>
-                  ))}
-                </List>
-                <SessionPermission session={session}>
-                  <Button variant="outlined" fullWidth href={NAVIGATION_URL} sx={{ mt: 1 }}>
-                    {locale === 'zh' ? '管理' : 'Manage'}
-                  </Button>
-                </SessionPermission>
-              </Paper>
-            </Fade>
-          </ClickAwayListener>
-        )}
-      </Popper>
-    </Box>
-  );
-}

package/src/SessionManager/SessionManager.stories.jsx

@@ -1,9 +0,0 @@
-export { default as HasLogin } from './demo/has-login';
-export { default as NotLogin } from './demo/not-login';
-export { default as Callback } from './demo/callback';
-export { default as DarkMode } from './demo/dark-mode';
-export { default as Size } from './demo/size';
-
-export default {
-  title: 'DID/SessionManager',
-};

package/src/SessionManager/index.tsx

@@ -1,3 +0,0 @@
-import SessionUser from '../SessionUser';
-
-export default SessionUser;

package/src/SessionPermission/index.tsx

@@ -1,26 +0,0 @@
-import type { JSX } from 'react';
-import { useCreation } from 'ahooks';
-
-const roleList = ['owner', 'admin', 'member', 'guest'] as const;
-
-export interface SessionPermissionProps {
-  session: Record<string, any>;
-  roles?: (typeof roleList)[number][];
-  children: ((props: { hasPermission: boolean }) => JSX.Element | null) | JSX.Element;
-}
-
-export default function SessionPermission({ session, roles = ['owner', 'admin'], children }: SessionPermissionProps) {
-  const hasPermission = useCreation(() => {
-    return roles.includes(session?.user?.role || 'guest');
-  }, [session?.user?.role, roles]);
-
-  if (typeof children === 'function') {
-    return children({ hasPermission });
-  }
-
-  if (hasPermission) {
-    return children;
-  }
-
-  return null;
-}

package/src/SessionUser/components/did-space.tsx

@@ -1,68 +0,0 @@
-import { useState } from 'react';
-import { useMemoizedFn } from 'ahooks';
-import { MenuItem, BoxProps, Divider, useTheme } from '@mui/material';
-import { Icon } from '@iconify/react';
-import LensIcon from '@iconify-icons/material-symbols/lens';
-import { Locale, Session } from '../../type';
-import { translate } from '../../Locale/util';
-import { translations } from '../libs/translation';
-import { DID_SPACE_URL } from '../../Util/constant';
-import { TBox } from '../../MuiWrap';
-import Typography from '../../Typography';
-import DIDLogo from '../../DIDLogo';
-
-export interface DidSpaceProps extends BoxProps {
-  session: Session;
-  locale?: Locale;
-}
-
-export default function DidSpace({ session, locale = 'en', ...rest }: DidSpaceProps) {
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-  const theme = useTheme();
-
-  const didSpace = session.user?.didSpace ?? {};
-  const [offset, setOffset] = useState(0);
-  const onShrink = useMemoizedFn(({ fontSize, initialSize }: { fontSize: number; initialSize: number }) => {
-    setOffset(Math.ceil((initialSize - fontSize) / 4));
-  });
-
-  return (
-    <>
-      <TBox component="a" href={DID_SPACE_URL} sx={{ p: 0.5, display: 'block', textDecoration: 'none' }} {...rest}>
-        <MenuItem
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: 0.5,
-            py: 1,
-          }}>
-          <div style={{ display: 'flex', alignItems: 'center' }}>
-            <DIDLogo name="spaces" size={20} dark={theme.palette.mode === 'dark'} fontSize={40} />
-          </div>
-          <span style={{ color: theme.palette.text.secondary }}>:</span>
-          <div
-            style={{
-              flexGrow: 1,
-              minWidth: 0,
-              color: didSpace.did ? theme.palette.text.primary : theme.palette.text.secondary,
-              overflow: 'hidden',
-              whiteSpace: 'nowrap',
-            }}>
-            <Typography fontSize="auto" minFontSize={1} sx={{ marginTop: `${offset}px` }} onShrink={onShrink}>
-              {didSpace.did ? didSpace.name : t('disconnected')}
-            </Typography>
-          </div>
-          <Icon
-            style={{ marginTop: `${offset}px`, flexShrink: 0 }}
-            icon={LensIcon}
-            fontSize={8}
-            color={didSpace.did ? theme.palette.success.main : theme.palette.grey[200]}
-          />
-        </MenuItem>
-      </TBox>
-      <Divider />
-    </>
-  );
-}