@arcblock/ux 3.4.14 → 3.5.0

package/src/Layout/dashboard-legacy/header.tsx

@@ -1,156 +0,0 @@
-import { Menu as MenuIcon } from '@mui/icons-material';
-import { AppBar, type AppBarProps, Toolbar, Box, Typography, Button } from '@mui/material';
-import { Link } from 'react-router-dom';
-
-import Logo from '../../Logo';
-import { styled } from '../../Theme';
-
-const StyledAppBar = styled(AppBar)`
-  && {
-    z-index: ${(props) => props.theme.zIndex.drawer};
-    background: ${(props) => props.theme.palette.background.default};
-    box-shadow: none;
-    top: 0;
-    height: auto;
-  }
-  .header-toolbar {
-    background: ${(props) => props.theme.palette.background.default};
-    color: ${(props) => props.theme.palette.text.primary};
-    margin: ${(props) => props.theme.spacing(1)}px 0;
-  }
-  .header-link {
-    display: flex;
-    text-decoration: none;
-    flex-shrink: 1;
-    overflow: hidden;
-  }
-  .header-logo {
-    margin-right: 20px;
-  }
-  .header-title {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-  }
-  .header-title__primary {
-    font-size: 24px;
-    font-weight: 800;
-    color: ${(props) => {
-      return props.theme.typography.color.main;
-    }};
-    text-transform: uppercase;
-    display: flex;
-    align-items: center;
-  }
-  .header-title__secondary {
-    font-size: 14px;
-    line-height: 1.71;
-    color: ${(props) => {
-      return props.theme.typography.color.gray;
-    }};
-  }
-
-  .header-addons {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-shrink: 9999999;
-
-    .user-addon {
-      .header-avatar {
-        width: 32px;
-        border-radius: 16px;
-        height: auto;
-      }
-    }
-  }
-  .header-menu {
-    display: none;
-  }
-  ${(props) => props.theme.breakpoints.down('md')} {
-    .header-title {
-      display: none;
-    }
-    .header-title__primary {
-      font-size: 20px;
-    }
-    .header-menu {
-      display: block;
-    }
-  }
-`;
-
-export interface HeaderProps extends AppBarProps {
-  onToggleMenu: () => void;
-  brand?: string;
-  description?: React.ReactNode;
-  addons?: React.ReactNode;
-  brandAddon?: React.ReactNode;
-  homeUrl?: string;
-  logo?: React.ReactNode;
-}
-
-/*
-  自定义 logo 相关:
-  如果为 logo prop 传入一个自定义的 svg, 并且 svg 中的元素通过 id 引用了 defs 中的元素 (比如 linearGradient),
-  这种情况下因为 header 和 sidebar 中会各有一个相同的 svg, defs 中元素的 id 会出现冲突,
-  当屏幕较窄时, header 会通过设置 display:none 将 svg logo 隐藏,
-  这会导致 svg defs 中的元素不能被正常引用 (比如 fill 引用的 color 失效), 这会进一步导致 sidebar 中的 logo 不能正常显示.
-  考虑到上述问题, 目前使用 Hidden 组件控制 logo 的显示/隐藏
-  参考: https://blog.patw.me/archives/1820/inline-svg-same-id-and-display-none-issue/
-*/
-export default function Header({
-  onToggleMenu,
-  brand = undefined,
-  description = undefined,
-  addons = undefined,
-  brandAddon = undefined,
-  homeUrl = '/',
-  logo = undefined,
-  children,
-  ...rest
-}: HeaderProps) {
-  return (
-    <StyledAppBar position="sticky" className="header" {...rest}>
-      <Toolbar disableGutters={false} className="header-toolbar">
-        <Button
-          color="inherit"
-          aria-label="open drawer"
-          className="header-menu"
-          aira-label="header menu button"
-          onClick={onToggleMenu}>
-          <MenuIcon />
-        </Button>
-        <Link to={homeUrl} className="header-link">
-          <Box
-            sx={{
-              display: {
-                xs: 'none',
-                md: 'block',
-              },
-            }}
-            className="header-logo">
-            {logo || <Logo showText={false} />}
-          </Box>
-          <div className="header-title">
-            <Typography component="h2" noWrap className="header-title__primary">
-              {brand}
-              {brandAddon}
-            </Typography>
-            <Typography component="p" noWrap className="header-title__secondary">
-              {description}
-            </Typography>
-          </div>
-        </Link>
-        <Box
-          sx={{
-            flexGrow: 1,
-          }}
-        />
-        {!!children && <div className="header-children">{children}</div>}
-        <div className="header-addons">{addons}</div>
-      </Toolbar>
-    </StyledAppBar>
-  );
-}

package/src/Layout/dashboard-legacy/index.tsx

@@ -1,127 +0,0 @@
-import { useEffect, useState } from 'react';
-import Helmet from 'react-helmet';
-import { Container, Box, type SxProps, Drawer, type DrawerProps } from '@mui/material';
-import { useSize } from 'ahooks';
-
-import Sidebar, { type LinkItem } from './sidebar';
-import Header from './header';
-import Footer from '../../Footer';
-import { styled } from '../../Theme';
-
-const Wrapper = styled('div')`
-  &.dashboard {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-  }
-  .dashboard__body {
-    overflow: hidden;
-    flex: 1;
-  }
-  .dashboard__main {
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
-    flex: 1;
-  }
-  .dashboard__content {
-    flex: 1;
-  }
-
-  .drawerPaper {
-    position: relative;
-    white-space: nowrap;
-    width: 120px;
-    background: ${(props) => props.theme.palette.background.default};
-    box-shadow: 2px 16px 10px 0 rgba(0, 0, 0, ${(props) => (props.theme.palette.mode === 'light' ? 0.05 : 0.5)});
-    border: 0;
-  }
-`;
-
-export interface DashboardProps extends React.HTMLAttributes<HTMLDivElement> {
-  links?: LinkItem[];
-  brand?: string;
-  description?: React.ReactNode;
-  images: Record<string, string>;
-  title?: string;
-  brandAddon?: React.ReactNode;
-  headerAddon?: React.ReactNode;
-  prefix?: string;
-  fullWidth?: false | true;
-  contentLayout?: 'row' | 'column';
-  homeUrl?: string;
-  logo?: React.ReactNode;
-  sx?: SxProps;
-}
-
-export default function Dashboard({
-  links = [],
-  brand = '',
-  description = '',
-  images,
-  title = 'Home',
-  brandAddon = undefined,
-  headerAddon = undefined,
-  prefix = '/images',
-  fullWidth = false,
-  contentLayout = 'column',
-  className = '',
-  homeUrl = '/',
-  logo = undefined,
-  children,
-  ...rest
-}: DashboardProps) {
-  const breakpoint = 960;
-  const size = useSize(document.body);
-  const width = size?.width || 0;
-  const [drawerMode, setDrawerMode] = useState<DrawerProps['variant']>(width >= breakpoint ? 'permanent' : 'temporary');
-  const [drawerOpen, setDrawerOpen] = useState(drawerMode === 'permanent');
-
-  useEffect(() => {
-    const newMode = width >= breakpoint ? 'permanent' : 'temporary';
-    setDrawerMode(newMode);
-    setDrawerOpen(newMode !== 'temporary');
-  }, [width]);
-
-  const onToggleDrawer = () => {
-    setDrawerOpen(!drawerOpen);
-  };
-  const isFullWidth = fullWidth || contentLayout === 'row';
-
-  return (
-    <Wrapper className={`dashboard ${className}`} {...rest}>
-      <Helmet title={`${title}-${brand}`} />
-      <Header
-        className="dashboard__header"
-        onToggleMenu={onToggleDrawer}
-        brand={brand}
-        brandAddon={brandAddon}
-        description={description}
-        addons={headerAddon}
-        homeUrl={homeUrl}
-        logo={logo}
-      />
-      <Box
-        className="dashboard__body"
-        sx={{
-          display: 'flex',
-        }}>
-        <Drawer
-          variant={drawerMode}
-          className="drawer"
-          classes={{ paper: 'drawerPaper' }}
-          open={drawerOpen}
-          onClose={onToggleDrawer}
-          ModalProps={{ disablePortal: true, keepMounted: true }}>
-          <Sidebar className="dashboard__sidebar" images={images} links={links} prefix={prefix} logo={logo} />
-        </Drawer>
-        <Box className="dashboard__main">
-          <Container maxWidth={isFullWidth ? false : 'lg'} className="dashboard__content">
-            {children}
-          </Container>
-          <Footer />
-        </Box>
-      </Box>
-    </Wrapper>
-  );
-}

package/src/Layout/dashboard-legacy/sidebar.tsx

@@ -1,129 +0,0 @@
-import { memo } from 'react';
-import { Link, useLocation } from 'react-router-dom';
-import { Button, Typography, type SxProps, type ButtonProps } from '@mui/material';
-import { teal } from '@mui/material/colors';
-
-import ImageIcon from '../../Icon/image';
-import Logo from '../../Logo';
-import { styled, useTheme } from '../../Theme';
-
-export type LinkItem = {
-  url: string;
-  title: React.ReactNode;
-  name: string;
-  showBadge?: false | true;
-};
-
-// const a: LinkItem = {};
-
-export interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
-  images: Record<string, string>;
-  links: LinkItem[];
-  prefix?: string;
-  addons?: React.ReactNode;
-  logo?: React.ReactNode;
-  sx?: SxProps;
-}
-
-export default function Sidebar({
-  images,
-  links,
-  prefix = '/images',
-  addons = undefined,
-  logo = undefined,
-  ...rest
-}: SidebarProps) {
-  const theme = useTheme();
-  const location = useLocation();
-  const isSelected = (_: string, name: string) => {
-    const pattern = new RegExp(`/${name}`);
-    return pattern.test(location.pathname);
-  };
-
-  return (
-    <MenuItems {...rest}>
-      <Link to="/" className="sidebar-logo">
-        {logo || <Logo showText={false} size={20} />}
-      </Link>
-      {links.map(({ url, name, title, showBadge }) => {
-        const selected = isSelected(url, name);
-        return (
-          <MenuItem component={Link} key={url} selected={selected} to={url}>
-            <ImageIcon
-              name={images[name]}
-              size={36}
-              color={selected ? '#00c2c4' : theme.typography.color.main}
-              prefix={prefix}
-              showBadge={showBadge}
-            />
-            <Typography component="span" className="menu-title">
-              {title}
-            </Typography>
-          </MenuItem>
-        );
-      })}
-      <div style={{ flex: 1 }} />
-      {addons}
-    </MenuItems>
-  );
-}
-
-const MenuItems = memo(styled('div')`
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-
-  && .sidebar-logo {
-    display: none;
-    border-bottom: 1px solid #eee;
-    background: ${(props) => props.theme.palette.background.default};
-    position: sticky;
-    top: 0;
-    z-index: 1;
-    padding: 10px 0;
-    text-align: center;
-    font-size: 0;
-  }
-  ${(props) => props.theme.breakpoints.down('md')} {
-    && .sidebar-logo {
-      display: block;
-    }
-  }
-`);
-
-const gradient = 'linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))';
-
-type MenuItemProps = {
-  selected: boolean;
-};
-
-const MenuItem = styled(Button)<MenuItemProps & ButtonProps<typeof Link, { component: typeof Link }>>`
-  && {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    transition: all 200ms ease-in-out;
-    background: ${(props) => (props.selected ? gradient : '')};
-    padding: 24px 0;
-    border-left: 2px solid ${(props) => (props.selected ? teal.A700 : 'transparent')};
-    border-radius: 0;
-
-    &:hover {
-      background: ${gradient};
-      border-left-color: ${teal.A700};
-    }
-
-    .menu-title {
-      margin-top: 8px;
-      font-size: 12px;
-      font-weight: 500;
-      text-align: center;
-      text-transform: capitalize;
-      letter-spacing: normal;
-      width: 80%;
-      color: ${(props) => props.theme.palette.text.primary};
-    }
-  }
-`;

package/src/Layout/index.tsx

@@ -1,310 +0,0 @@
-import { useEffect, useState } from 'react';
-import Helmet from 'react-helmet';
-import {
-  AppBar,
-  Container,
-  Drawer,
-  Divider,
-  IconButton,
-  Link,
-  List,
-  ListItemText,
-  Toolbar,
-  Typography,
-  type SxProps,
-  ListItemButton,
-} from '@mui/material';
-import { Menu as MenuIcon } from '@mui/icons-material';
-
-import Footer from '../Footer';
-import OpenInWallet from '../Wallet/Open';
-import Icon from '../Icon';
-import Logo from '../Logo';
-import { styled } from '../Theme';
-import { type LinkItem } from './dashboard/sidebar';
-
-export interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {
-  title: string;
-  brand: React.ReactNode;
-  description?: React.ReactNode;
-  links?: LinkItem[];
-  logo?: React.ReactNode;
-  showLogo?: false | true;
-  addons?: React.ReactNode;
-  footer?: React.ReactNode;
-  baseUrl?: string;
-  homeUrl?: string;
-  variant?: 'shadow' | 'border';
-  contentOnly?: false | true;
-  sx?: SxProps;
-}
-
-export default function Layout({
-  title,
-  brand,
-  description = undefined,
-  links = [],
-  logo = <Logo showText={false} style={{ width: '40px', height: '40px' }} />,
-  showLogo = false,
-  addons = undefined,
-  footer = (
-    <Container>
-      <Footer />
-    </Container>
-  ),
-  baseUrl = '',
-  homeUrl = '/',
-  variant = 'shadow',
-  contentOnly = false,
-  children,
-  ...rest
-}: LayoutProps) {
-  const [drawerOpen, setDrawerOpen] = useState(false);
-  const onToggleDrawer = () => {
-    setDrawerOpen(!drawerOpen);
-  };
-
-  useEffect(() => {
-    const { searchParams } = new URL(window.location.href);
-    const inviter = searchParams.get('inviter');
-    if (inviter) {
-      window.localStorage.setItem('inviter', inviter);
-    }
-  }, []);
-
-  if (contentOnly) {
-    return <Container>{children}</Container>;
-  }
-
-  let activeLink = '';
-  // @ts-expect-error
-  const { pathname: currentPath } = new URL(window.location);
-  links.forEach((link) => {
-    if (currentPath.startsWith(link.url) && link.url.length > activeLink.length) {
-      activeLink = link.url;
-    }
-  });
-
-  const drawer = (
-    <div>
-      <Toolbar className="toolbar toolbar--drawer">
-        {!!showLogo && <div className="menu-logo">{logo}</div>}
-        <div style={{ flexGrow: 1, overflow: 'hidden', textOverflow: 'ellipsis' }}>{brand}</div>
-      </Toolbar>
-      <Divider />
-      <List>
-        {links.map((x) => (
-          <Link className="nav-link" key={x.url} href={x.url} underline="hover">
-            <ListItemButton className={activeLink === x.url ? 'drawer-highlight-nav' : ''}>
-              <ListItemText>
-                {typeof x.icon === 'string' ? (
-                  <Icon name={x.icon} size={18 * (x.iconZoom || 1)} color="inherit" style={{ marginRight: '5px' }} />
-                ) : (
-                  x.icon
-                )}
-                {x.title}
-              </ListItemText>
-            </ListItemButton>
-          </Link>
-        ))}
-      </List>
-    </div>
-  );
-
-  return (
-    <>
-      <Div {...rest}>
-        <Helmet title={title} />
-        <AppBar position="fixed" className={`appbar appbar--${variant}`} color="default" style={{ height: 56 }}>
-          <Container disableGutters>
-            <Toolbar className="toolbar">
-              <IconButton
-                color="inherit"
-                aria-label="open drawer"
-                edge="start"
-                onClick={onToggleDrawer}
-                className="menu-button"
-                size="large">
-                <MenuIcon />
-              </IconButton>
-              {!!showLogo && <div className="menu-logo">{logo}</div>}
-              <Typography
-                href={homeUrl}
-                component="a"
-                variant="h5"
-                color="inherit"
-                noWrap
-                className="brand"
-                sx={{
-                  display: 'block',
-                }}>
-                {brand}
-              </Typography>
-              {description && (
-                <Typography component="small" variant="subtitle2" color="inherit" noWrap className="description">
-                  {description}
-                </Typography>
-              )}
-              <div style={{ flexGrow: 1 }} />
-              <div className="nav-links">
-                {links.map((x) => (
-                  <Link
-                    key={x.url}
-                    href={x.url}
-                    className={`nav-link ${activeLink === x.url ? 'highlight-nav' : ''}`}
-                    color={x.color}
-                    underline="hover">
-                    {typeof x.icon === 'string' ? (
-                      <Icon
-                        name={x.icon}
-                        size={20 * (x.iconZoom || 1)}
-                        color="inherit"
-                        style={{ marginRight: '5px' }}
-                      />
-                    ) : (
-                      x.icon
-                    )}
-                    {x.title}
-                  </Link>
-                ))}
-              </div>
-              {addons}
-            </Toolbar>
-          </Container>
-        </AppBar>
-        <div className="toolbar" />
-        <Container style={{ marginTop: 16, flex: 1 }}>{children}</Container>
-        {footer}
-        {!!baseUrl && <OpenInWallet locale="zh" link={baseUrl} />}
-      </Div>
-      <DrawerDiv>
-        <Drawer
-          variant="temporary"
-          open={drawerOpen}
-          onClose={onToggleDrawer}
-          classes={{
-            paper: 'drawer-paper',
-          }}
-          ModalProps={{
-            keepMounted: true, // Better open performance on mobile.
-            disablePortal: true,
-          }}>
-          {drawer}
-        </Drawer>
-      </DrawerDiv>
-    </>
-  );
-}
-
-const Div = styled('div')`
-  width: 100%;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  .appbar {
-    &.appbar--border {
-      box-shadow: none;
-      &::before {
-        content: '';
-        position: absolute;
-        left: 0;
-        right: 0;
-        height: 1px;
-        bottom: -1px;
-        display: block;
-        background-color: rgba(0, 0, 0, 0.12);
-      }
-    }
-  }
-
-  .toolbar {
-    min-height: 56px;
-    background: inherit;
-    white-space: nowrap;
-    .menu-logo {
-      font-size: 0;
-      margin-right: 8px;
-    }
-
-    .nav-links {
-      display: flex;
-      align-items: center;
-      .nav-link {
-        margin: 8px 12px;
-        font-size: 16px;
-        display: flex;
-        align-items: center;
-      }
-
-      .highlight-nav {
-        font-weight: bolder;
-      }
-    }
-    .brand {
-      cursor: pointer;
-      text-decoration: none;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      flex-shrink: 1;
-    }
-    .description {
-      color: #999;
-      font-size: 15px;
-      margin-left: 10px;
-      font-weight: normal;
-      flex-shrink: 999999;
-    }
-  }
-
-  ${(props) => props.theme.breakpoints.up('md')} {
-    .toolbar {
-      .menu-button {
-        display: none;
-      }
-      .menu-logo {
-        & + .brand {
-          padding-left: 45px;
-          margin-left: -45px;
-        }
-      }
-    }
-  }
-
-  ${(props) => props.theme.breakpoints.down('md')} {
-    .toolbar {
-      .nav-links,
-      .menu-logo,
-      .description {
-        display: none;
-      }
-    }
-  }
-`;
-
-const DrawerDiv = styled('nav')`
-  width: 240px;
-  .drawer-paper {
-    width: 240px;
-  }
-  .toolbar {
-    min-height: 56px;
-  }
-
-  a:hover,
-  a:active,
-  a:visited,
-  a:focus {
-    text-decoration: none;
-  }
-
-  .drawer-highlight-nav {
-    background-color: #eee;
-  }
-
-  .toolbar--drawer {
-    font-size: 18px;
-    .menu-logo {
-      display: inline-flex;
-    }
-  }
-`;