@arcblock/ux 3.4.14 → 3.5.0

package/src/Layout/Layout.stories.jsx

@@ -1,24 +0,0 @@
-export { default as Basic } from './demo/basic';
-export { default as CustomElement } from './demo/custom-element';
-export { default as Dashboard } from './demo/dashboard';
-export { default as DashboardGroupedNav } from './demo/dashboard-grouped-nav';
-export { default as FullPage } from './demo/full-page';
-export { default as DashboardLegacy } from './demo/dashboard-legacy';
-export { default as DashboardLegacyCustomLogo } from './demo/dashboard-legacy-custom-logo';
-
-export default {
-  title: 'Layout/Layout',
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component:
-          'Dashboard Layout is a generic, customizable layout component that includes a header, navigation, and footer, it can be used to quickly build management pages.',
-      },
-    },
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/E8TSBWCOyXzETmVOjzbqvw/ArcBlock-UI-Kit?node-id=1504%3A5211',
-    },
-  },
-};

package/src/Layout/dashboard/external-link.tsx

@@ -1,59 +0,0 @@
-import { type NavLinkRenderProps, Link as RouterLink, NavLink as RouterNavLink } from 'react-router-dom';
-
-type RouterLinkProps = React.ComponentProps<typeof RouterLink>;
-type RouterNavLinkProps = React.ComponentProps<typeof RouterNavLink>;
-type ExternalLinkProps = {
-  external?: false | true;
-} & (
-  | ({
-      routerLinkComponent: typeof RouterLink;
-    } & RouterLinkProps)
-  | ({
-      routerLinkComponent: typeof RouterNavLink;
-    } & RouterNavLinkProps)
-);
-
-// 包裹 router Link/NavLink 组件, 支持 external link (external 为 true 时渲染为 a 标签)
-function ExternalLink({
-  routerLinkComponent: RouterLinkComponent,
-  to,
-  external = false,
-  children,
-  ...rest
-}: ExternalLinkProps) {
-  if (external) {
-    return (
-      // @ts-expect-error
-      <a href={to} {...rest}>
-        {/* @ts-expect-error */}
-        {children}
-      </a>
-    );
-  }
-  return (
-    // @ts-ignore
-    <RouterLinkComponent to={to} {...rest}>
-      {/* @ts-expect-error */}
-      {children}
-    </RouterLinkComponent>
-  );
-}
-
-export interface LinkProps extends RouterLinkProps {
-  external?: false | true;
-}
-
-export function Link({ ...props }: LinkProps) {
-  return <ExternalLink routerLinkComponent={RouterLink} {...props} />;
-}
-
-export interface NavLinkProps extends Omit<RouterNavLinkProps, 'className'> {
-  className?: string | ((props: Partial<NavLinkRenderProps>) => string | undefined);
-  external?: false | true;
-}
-
-export function NavLink({ className = '', ...rest }: NavLinkProps) {
-  // NavLink#className 支持 function
-  const classes = rest.external && typeof className === 'function' ? className({}) : className;
-  return <ExternalLink routerLinkComponent={RouterNavLink} className={classes} {...rest} />;
-}

package/src/Layout/dashboard/full-page.tsx

@@ -1,58 +0,0 @@
-import { useState, use, createContext, useMemo, useLayoutEffect } from 'react';
-
-type FullPageState = {
-  inFullPage: boolean;
-  showToggleButton: boolean;
-  headerVisibleInFullPage: boolean;
-  footerVisibleInFullPage: boolean;
-  sidebarVisibleInFullPage: boolean;
-};
-
-type FullPageContextValue = FullPageState & {
-  headerVisible: boolean;
-  footerVisible: boolean;
-  sidebarVisible: boolean;
-  toggleFullPage: () => void;
-  configure: (params: Partial<FullPageState>) => void;
-};
-
-export const FullPageContext = createContext<FullPageContextValue>(null!);
-
-export const useFullPage = (initialState?: FullPageState) => {
-  const ctx = use(FullPageContext);
-  useLayoutEffect(() => {
-    if (initialState) {
-      ctx.configure(initialState);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  return ctx;
-};
-
-export function FullPageProvider({ children = undefined, ...rest }: { children?: React.ReactNode }) {
-  const [state, setState] = useState({
-    inFullPage: false,
-    showToggleButton: false,
-    headerVisibleInFullPage: true,
-    footerVisibleInFullPage: false,
-    sidebarVisibleInFullPage: false,
-  });
-  const toggleFullPage = () => {
-    setState((prev) => ({ ...prev, inFullPage: !prev.inFullPage }));
-  };
-  const value = useMemo<FullPageContextValue>(() => {
-    return {
-      ...state,
-      headerVisible: !state.inFullPage || state.headerVisibleInFullPage,
-      footerVisible: !state.inFullPage || state.footerVisibleInFullPage,
-      sidebarVisible: !state.inFullPage || state.sidebarVisibleInFullPage,
-      toggleFullPage,
-      configure: (params) => setState((prev) => ({ ...prev, ...params })),
-    };
-  }, [state]);
-  return (
-    <FullPageContext value={value} {...rest}>
-      {children}
-    </FullPageContext>
-  );
-}

package/src/Layout/dashboard/index.tsx

@@ -1,260 +0,0 @@
-import { useEffect, useMemo } from 'react';
-import { useLocation, matchPath, type Location } from 'react-router-dom';
-import Helmet from 'react-helmet';
-import { Container, Box, type SxProps } from '@mui/material';
-import clsx from 'clsx';
-import { OpenInFull as OpenInFullIcon, CloseFullscreen as CloseFullscreenIcon } from '@mui/icons-material';
-import DashboardLegacy from '../dashboard-legacy';
-import { ResponsiveHeader } from '../../Header';
-import NavMenu from '../../NavMenu';
-import Footer, { type FooterProps } from '../../Footer';
-import Sidebar, { type LinkItem } from './sidebar';
-import { styled, useTheme } from '../../Theme';
-import { Link } from './external-link';
-import { FullPageProvider, useFullPage } from './full-page';
-import { NavMenuProps } from '../../NavMenu/nav-menu';
-import { type DashboardProps as DashboardLegacyProps } from '../dashboard-legacy';
-
-// 监听 location 变化并关闭 header 中的 menu (确保 drawer - disablePortal:false, keepMounted:true)
-// 直接监听 menu 中 link 点击来触发 closeMenu 会有问题 (Suspense & lazy)
-function NavMenuWrapper({ closeMenu, ...rest }: { closeMenu: () => void } & NavMenuProps) {
-  const location = useLocation();
-  useEffect(() => {
-    closeMenu();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [location]);
-  return <NavMenu {...rest} />;
-}
-
-function formatLinks(links: LinkItem[], location: Location): LinkItem[] {
-  return links.map((link) => {
-    if (link.children?.length) {
-      return {
-        ...link,
-        label: link.title,
-        children: formatLinks(link.children, location),
-      };
-    }
-    return {
-      ...link,
-      label: (
-        <Link to={link.url} external={link.external}>
-          {link.title}
-        </Link>
-      ),
-      // external = true 时 active 状态由传入 links 的调用方决定 (适用于 blocklet ui dashboard 的情况)
-      active: link.external ? link.active : !!matchPath({ path: link.url, end: false }, location.pathname),
-    };
-  });
-}
-
-export interface DashboardProps extends React.HTMLAttributes<HTMLDivElement> {
-  title?: string;
-  headerProps?: object;
-  /** 支持分组, links item 如果是数组, 则视为一个 group */
-  links?: LinkItem[];
-  sidebarWidth?: number;
-  fullWidth?: false | true;
-  /** sidenav 稠密一些的布局, 纵向空间占用较少, 默认为 auto, 当 links 个数 > 8 时自动启用 */
-  dense?: 'auto' | boolean;
-  footerProps?: FooterProps;
-  sx?: SxProps;
-  /** 是否隐藏 html title, 默认不隐藏, 避免重复导致 html title 失效 */
-  hideHtmlTitle?: boolean;
-}
-
-function Dashboard({
-  title = 'Home',
-  headerProps = {},
-  links = [],
-  sidebarWidth = 120,
-  fullWidth = false,
-  dense = 'auto',
-  footerProps = {},
-  sx = {},
-  children,
-  hideHtmlTitle = false,
-  ...rest
-}: DashboardProps) {
-  const theme = useTheme();
-  const { inFullPage, showToggleButton, headerVisible, footerVisible, sidebarVisible, toggleFullPage } = useFullPage();
-  const location = useLocation();
-  const navItems = useMemo(() => formatLinks(links, location), [location, links]);
-  const isGroupedMode = navItems.some((item) => !!item.children?.length);
-  // 一级菜单数量 > 8 或都分组模式, 都启用 dense 布局
-  const _dense = dense === 'auto' ? navItems.length >= 8 || isGroupedMode : dense;
-  const classes = clsx('dashboard', { 'dashboard-dense': _dense }, rest.className);
-  const defaultHomeLink = (content: React.ReactNode) => <Link to={window.blocklet?.prefix || '/'}>{content}</Link>;
-  const _headerProps = {
-    homeLink: defaultHomeLink,
-    ...headerProps,
-  };
-
-  useEffect(() => {
-    const { searchParams } = new URL(window.location.href);
-    if (searchParams.get('inviter')) {
-      window.localStorage.setItem('inviter', searchParams.get('inviter')!);
-    }
-  }, []);
-
-  return (
-    <Wrapper sx={sx} {...rest} className={classes} sidebarWidth={sidebarWidth}>
-      {!hideHtmlTitle && <Helmet title={title} key={title} />}
-      {headerVisible && (
-        <StyledUxHeader {..._headerProps} className="dashboard-header">
-          {links?.length
-            ? ({ isMobile, closeMenu }) => {
-                if (isMobile) {
-                  return (
-                    <NavMenuWrapper
-                      mode="inline"
-                      items={navItems}
-                      closeMenu={closeMenu}
-                      bgColor="transparent"
-                      activeTextColor={theme.palette.primary.main}
-                    />
-                  );
-                }
-                return null;
-              }
-            : null}
-        </StyledUxHeader>
-      )}
-      <Box
-        className="dashboard-body"
-        sx={{
-          display: 'flex',
-        }}>
-        {!!links?.length && sidebarVisible && (
-          <Box
-            className="dashboard-sidebar"
-            sx={{
-              display: {
-                xs: 'none',
-                md: 'block',
-              },
-            }}>
-            {_dense ? (
-              <Sidebar links={links} dense={_dense} />
-            ) : (
-              <Box className="dashboard-sidebar-container">
-                <Sidebar links={links} dense={_dense} />
-              </Box>
-            )}
-          </Box>
-        )}
-        <Box className="dashboard-main" id="arc__dashboard-main">
-          {showToggleButton && (
-            <Box
-              sx={{
-                position: 'absolute',
-                top: 4,
-                right: 4,
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                width: 24,
-                height: 24,
-                color: '#fff',
-                bgcolor: 'rgba(158,158,158, 0.6);',
-                borderRadius: 1,
-                cursor: 'pointer',
-              }}
-              onClick={toggleFullPage}>
-              {inFullPage ? (
-                <CloseFullscreenIcon style={{ fontSize: 18 }} />
-              ) : (
-                <OpenInFullIcon style={{ fontSize: 18 }} />
-              )}
-            </Box>
-          )}
-          <Container className="dashboard-content" id="arc__dashboard-content" {...(fullWidth && { maxWidth: false })}>
-            {children}
-          </Container>
-          {footerVisible && <Footer {...{ dark: theme.palette.mode === 'dark', ...footerProps }} />}
-        </Box>
-      </Box>
-    </Wrapper>
-  );
-}
-
-type WrapperProps = React.HTMLAttributes<HTMLDivElement> & { sidebarWidth: number };
-
-const Wrapper = styled(Box)<WrapperProps>`
-  &.dashboard {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-    background-color: ${({ theme }) => theme.palette.background.default};
-  }
-  .dashboard-body {
-    overflow: hidden;
-    flex: 1;
-  }
-  .dashboard-sidebar {
-    box-sizing: border-box;
-    flex: 0 0 auto;
-    width: ${(props) => props.sidebarWidth}px;
-    overflow: hidden;
-    &:hover {
-      overflow-y: auto;
-    }
-  }
-  .dashboard-sidebar-container {
-    width: ${(props) => props.sidebarWidth}px;
-  }
-  .dashboard-main {
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
-    flex: 1;
-    position: relative;
-  }
-  .dashboard-content {
-    flex: 1;
-  }
-  &.dashboard-dense {
-    .dashboard-header {
-      border-bottom: 1px solid;
-      border-color: ${({ theme }) => theme.palette.divider};
-    }
-    .dashboard-sidebar {
-      width: 256px;
-      border-right: 1px solid;
-      border-color: ${({ theme }) => theme.palette.divider};
-    }
-  }
-  ${(props) => props.theme.breakpoints.up('md')} {
-    .header-logo {
-      display: flex;
-      justify-content: center;
-    }
-    &.dashboard-dense {
-      .header-logo {
-        /* dense = true 时 logo 与 sidenav icons 不需要对齐 */
-        width: auto;
-      }
-    }
-  }
-`;
-
-const StyledUxHeader = styled(ResponsiveHeader)`
-  .header-container {
-    max-width: 100%;
-  }
-`;
-
-// 兼容旧版 dashboard
-export default function DashboardWrapper<T extends boolean = true>({
-  legacy = true as T,
-  ...rest
-}: T extends true ? { legacy?: T } & DashboardLegacyProps : { legacy?: T } & DashboardProps) {
-  if (legacy) {
-    return <DashboardLegacy {...(rest as unknown as DashboardLegacyProps)} />;
-  }
-  return (
-    <FullPageProvider>
-      <Dashboard {...rest} />
-    </FullPageProvider>
-  );
-}

package/src/Layout/dashboard/sidebar.tsx

@@ -1,198 +0,0 @@
-import { Typography } from '@mui/material';
-import clsx from 'clsx';
-import { styled } from '../../Theme';
-import { NavLink } from './external-link';
-
-export type LinkItem = {
-  url: string;
-  title: React.ReactNode;
-  icon?: React.ReactNode;
-  iconZoom?: number;
-  color?: string;
-  showBadge?: false | true;
-  external?: false | true;
-  active?: boolean;
-  children?: LinkItem[];
-};
-
-function renderItem(item: LinkItem, index: number) {
-  if (item.children?.length) {
-    // eslint-disable-next-line no-use-before-define
-    return renderGroup(item, index);
-  }
-  const { url, icon, title, showBadge, external, active } = item;
-  // external = true 时 link active 状态由传入 links 的调用方决定 (适用于 blocklet ui dashboard 的情况)
-  return (
-    <li key={`${url}-${index}`} className="layout-sidebar-item">
-      <NavLink
-        external={external}
-        to={url}
-        className={({ isActive }) =>
-          clsx('layout-sidebar-link', { 'layout-sidebar-link--active': external ? active : isActive })
-        }>
-        {icon && <span className={`layout-sidebar-icon ${showBadge ? 'layout-sidebar-badge' : ''}`}>{icon}</span>}
-        <Typography component="span" className="layout-sidebar-link-text">
-          {title}
-        </Typography>
-      </NavLink>
-    </li>
-  );
-}
-
-function renderGroup(item: LinkItem, index: number) {
-  return (
-    <li key={`group-${item.title}-${index}`} className="layout-sidebar-group">
-      <span className="layout-sidebar-group-title">{item.title}</span>
-      <ul>{item.children!.map(renderItem)}</ul>
-    </li>
-  );
-}
-
-export interface SidebarProps {
-  links: LinkItem[];
-  addons?: React.ReactNode;
-  dense?: false | true;
-}
-
-function Sidebar({ links, addons = undefined, dense = false, ...rest }: SidebarProps) {
-  return (
-    <Root {...rest} className={clsx({ 'layout-sidebar-dense': dense })}>
-      <ul>{links.map(renderItem)}</ul>
-      <div style={{ flex: 1 }} />
-      {addons}
-    </Root>
-  );
-}
-
-const gradient = 'linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))';
-
-const Root = styled('div')`
-  display: flex;
-  flex-direction: column;
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-  .layout-sidebar-link {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 22px 24px;
-    color: ${(props) => props.theme.palette.text.secondary};
-    text-decoration: none;
-
-    &:hover,
-    &.layout-sidebar-link--active {
-      color: ${(props) => props.theme.palette.primary.main};
-      background: ${gradient};
-      border-left-color: ${(props) => props.theme.palette.primary.main};
-    }
-  }
-  .layout-sidebar-icon {
-    display: inline-block;
-    width: 32px;
-    height: 32px;
-    > img,
-    > svg {
-      width: 32px;
-      height: 32px;
-    }
-  }
-  .layout-sidebar-badge {
-    position: relative;
-    &:after {
-      content: '';
-      position: absolute;
-      width: 10px;
-      height: 10px;
-      border-radius: 10px;
-      background-color: #fe4e44;
-      right: -2px;
-      top: 0;
-      box-shadow:
-        0px 1px 4px rgba(0, 0, 0, 0.3),
-        0px 0px 20px rgba(0, 0, 0, 0.1);
-    }
-  }
-  .layout-sidebar-link-text {
-    margin-top: 8px;
-    font-size: 12px;
-    font-weight: 500;
-    text-align: center;
-    text-transform: capitalize;
-    letter-spacing: normal;
-  }
-  /* dense=false 时隐藏 group title */
-  .layout-sidebar-group-title {
-    display: none;
-  }
-  &.layout-sidebar-dense {
-    box-sizing: border-box;
-    padding: 20px 0;
-    font-weight: bold;
-    .layout-sidebar-item {
-      padding: 0 16px;
-    }
-    .layout-sidebar-item + .layout-sidebar-item {
-      margin-top: 1px;
-    }
-    .layout-sidebar-link {
-      box-sizing: border-box;
-      flex-direction: row;
-      align-items: center;
-      width: 100%;
-      padding: 8px;
-      &:hover,
-      &.layout-sidebar-link--active {
-        color: ${(props) => props.theme.palette.grey[900]};
-        background: ${(props) => props.theme.palette.grey[100]};
-        border: 0;
-        border-radius: 4px;
-      }
-    }
-    .layout-sidebar-icon {
-      display: inline-block;
-      width: 20px;
-      height: 20px;
-      margin-right: 8px;
-      > img,
-      > svg {
-        width: 20px;
-        height: 20px;
-      }
-    }
-    .layout-sidebar-badge {
-      &:after {
-        width: 6px;
-        height: 6px;
-        border-radius: 6px;
-        right: -2px;
-        top: 0;
-      }
-    }
-    .layout-sidebar-link-text {
-      margin-top: 0;
-      font-size: 14px;
-      line-height: 1;
-    }
-    .layout-sidebar-group {
-      color: ${(props) => {
-        return props.theme.palette.text.hint;
-      }};
-      .layout-sidebar-group-title {
-        display: inline-block;
-        padding: 8px 0 8px 24px;
-        font-size: 13px;
-        text-transform: uppercase;
-      }
-    }
-    .layout-sidebar-group + .layout-sidebar-group,
-    .layout-sidebar-group + .layout-sidebar-item,
-    .layout-sidebar-item + .layout-sidebar-group {
-      margin-top: 16px;
-    }
-  }
-`;
-
-export default Sidebar;