@arcblock/ux 2.9.90 → 2.10.0

package/es/Layout/dashboard/index.js

@@ -1,282 +0,0 @@
-import { useEffect, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import { useLocation, matchPath } from 'react-router-dom';
-import Helmet from 'react-helmet';
-import Container from '@mui/material/Container';
-import Hidden from '@mui/material/Hidden';
-import Box from '@mui/material/Box';
-import clsx from 'clsx';
-import OpenInFullIcon from '@mui/icons-material/OpenInFull';
-import CloseFullscreenIcon from '@mui/icons-material/CloseFullscreen';
-import DashboardLegacy from '../dashboard-legacy';
-import { ResponsiveHeader } from '../../Header';
-import NavMenu from '../../NavMenu';
-import Footer from '../../Footer';
-import Sidebar from './sidebar';
-import { styled, useTheme } from '../../Theme';
-import { Link } from './external-link';
-import { FullPageProvider, useFullPage } from './full-page';
-
-// 监听 location 变化并关闭 header 中的 menu (确保 drawer - disablePortal:false, keepMounted:true)
-// 直接监听 menu 中 link 点击来触发 closeMenu 会有问题 (Suspense & lazy)
-// eslint-disable-next-line react/prop-types
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-function NavMenuWrapper({
-  closeMenu,
-  ...rest
-}) {
-  const location = useLocation();
-  useEffect(() => {
-    closeMenu();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [location]);
-  return /*#__PURE__*/_jsx(NavMenu, {
-    ...rest
-  });
-}
-function formatLinks(links, location) {
-  return links.map(link => {
-    if (link.children?.length) {
-      return {
-        ...link,
-        label: link.title,
-        children: formatLinks(link.children, location)
-      };
-    }
-    return {
-      ...link,
-      label: /*#__PURE__*/_jsx(Link, {
-        to: link.url,
-        external: link.external,
-        children: link.title
-      }),
-      // external = true 时 active 状态由传入 links 的调用方决定 (适用于 blocklet ui dashboard 的情况)
-      active: link.external ? link.active : !!matchPath({
-        path: link.url,
-        end: false
-      }, location.pathname)
-    };
-  });
-}
-function Dashboard({
-  children,
-  title,
-  headerProps,
-  links = [],
-  fullWidth,
-  dense,
-  footerProps,
-  ...rest
-}) {
-  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 => /*#__PURE__*/_jsx(Link, {
-    to: window.blocklet?.prefix || '/',
-    children: content
-  });
-  const _headerProps = {
-    homeLink: defaultHomeLink,
-    ...headerProps
-  };
-  return /*#__PURE__*/_jsxs(Wrapper, {
-    ...rest,
-    className: classes,
-    children: [/*#__PURE__*/_jsx(Helmet, {
-      title: title
-    }, title), headerVisible && /*#__PURE__*/_jsx(StyledUxHeader, {
-      ..._headerProps,
-      className: "dashboard-header",
-      children: links?.length ? ({
-        isMobile,
-        closeMenu
-      }) => {
-        if (isMobile) {
-          return /*#__PURE__*/_jsx(NavMenuWrapper, {
-            mode: "inline",
-            items: navItems,
-            closeMenu: closeMenu,
-            bgColor: "transparent",
-            activeTextColor: theme.palette.primary.main
-          });
-        }
-        return null;
-      } : null
-    }), /*#__PURE__*/_jsxs(Box, {
-      display: "flex",
-      className: "dashboard-body",
-      children: [/*#__PURE__*/_jsx(Hidden, {
-        mdDown: true,
-        children: !!links?.length && sidebarVisible && /*#__PURE__*/_jsx(Box, {
-          className: "dashboard-sidebar",
-          children: _dense ? /*#__PURE__*/_jsx(Sidebar, {
-            links: links,
-            dense: _dense
-          }) : /*#__PURE__*/_jsx(Box, {
-            className: "dashboard-sidebar-container",
-            children: /*#__PURE__*/_jsx(Sidebar, {
-              links: links,
-              dense: _dense
-            })
-          })
-        })
-      }), /*#__PURE__*/_jsxs(Box, {
-        className: "dashboard-main",
-        children: [showToggleButton && /*#__PURE__*/_jsx(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,
-          children: inFullPage ? /*#__PURE__*/_jsx(CloseFullscreenIcon, {
-            style: {
-              fontSize: 18
-            }
-          }) : /*#__PURE__*/_jsx(OpenInFullIcon, {
-            style: {
-              fontSize: 18
-            }
-          })
-        }), /*#__PURE__*/_jsx(Container, {
-          className: "dashboard-content",
-          ...(fullWidth && {
-            maxWidth: false
-          }),
-          children: children
-        }), footerVisible && /*#__PURE__*/_jsx(Footer, {
-          ...footerProps
-        })]
-      })]
-    })]
-  });
-}
-Dashboard.propTypes = {
-  children: PropTypes.any.isRequired,
-  title: PropTypes.string,
-  // 支持分组, links item 如果是数组, 则视为一个 group
-  links: PropTypes.array.isRequired,
-  headerProps: PropTypes.object,
-  fullWidth: PropTypes.bool,
-  sidebarWidth: PropTypes.number,
-  // sidenav 稠密一些的布局, 纵向空间占用较少, 默认为 auto, 当 links 个数 > 8 时自动启用
-  dense: PropTypes.oneOf([true, false, 'auto'])
-};
-Dashboard.defaultProps = {
-  title: 'Home',
-  headerProps: {},
-  fullWidth: false,
-  sidebarWidth: 120,
-  dense: 'auto'
-};
-const Wrapper = styled('div', {
-  shouldForwardProp: prop => prop !== 'sidebarWidth'
-})`
-  &.dashboard {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-  }
-  .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 #eee;
-    }
-    .dashboard-sidebar {
-      width: 256px;
-      border-right: 1px solid #eee;
-    }
-  }
-  ${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({
-  legacy,
-  ...rest
-}) {
-  if (legacy) {
-    return /*#__PURE__*/_jsx(DashboardLegacy, {
-      ...rest
-    });
-  }
-  return /*#__PURE__*/_jsx(FullPageProvider, {
-    children: /*#__PURE__*/_jsx(Dashboard, {
-      ...rest
-    })
-  });
-}
-DashboardWrapper.propTypes = {
-  ...Dashboard.propTypes,
-  legacy: PropTypes.bool,
-  footerProps: PropTypes.shape(Footer.propTypes)
-};
-DashboardWrapper.defaultProps = {
-  ...Dashboard.defaultProps,
-  legacy: true
-};

package/es/Layout/dashboard/sidebar.js

@@ -1,209 +0,0 @@
-/* eslint-disable react/no-array-index-key */
-import PropTypes from 'prop-types';
-import Typography from '@mui/material/Typography';
-import { teal } from '@mui/material/colors';
-import clsx from 'clsx';
-import { styled } from '../../Theme';
-import { NavLink } from './external-link';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-function renderGroup(item, index) {
-  return /*#__PURE__*/_jsxs("li", {
-    className: "layout-sidebar-group",
-    children: [/*#__PURE__*/_jsx("span", {
-      className: "layout-sidebar-group-title",
-      children: item.title
-    }), /*#__PURE__*/_jsx("ul", {
-      children: item.children.map(renderItem)
-    })]
-  }, `group-${item.title}-${index}`);
-}
-function renderItem(item, index) {
-  if (item.children?.length) {
-    return renderGroup(item, index);
-  }
-  const {
-    url,
-    icon,
-    title,
-    showBadge,
-    external,
-    active
-  } = item;
-  // external = true 时 link active 状态由传入 links 的调用方决定 (适用于 blocklet ui dashboard 的情况)
-  return /*#__PURE__*/_jsx("li", {
-    className: "layout-sidebar-item",
-    children: /*#__PURE__*/_jsxs(NavLink, {
-      external: external,
-      to: url,
-      className: ({
-        isActive
-      }) => clsx('layout-sidebar-link', {
-        'layout-sidebar-link--active': external ? active : isActive
-      }),
-      children: [icon && /*#__PURE__*/_jsx("span", {
-        className: `layout-sidebar-icon ${showBadge ? 'layout-sidebar-badge' : ''}`,
-        children: icon
-      }), /*#__PURE__*/_jsx(Typography, {
-        component: "span",
-        className: "layout-sidebar-link-text",
-        children: title
-      })]
-    })
-  }, `${url}-${index}`);
-}
-function Sidebar({
-  links,
-  addons,
-  dense,
-  ...rest
-}) {
-  return /*#__PURE__*/_jsxs(Root, {
-    ...rest,
-    className: clsx({
-      'layout-sidebar-dense': dense
-    }),
-    children: [/*#__PURE__*/_jsx("ul", {
-      children: links.map(renderItem)
-    }), /*#__PURE__*/_jsx("div", {
-      style: {
-        flex: 1
-      }
-    }), addons]
-  });
-}
-Sidebar.propTypes = {
-  links: PropTypes.array.isRequired,
-  addons: PropTypes.any,
-  dense: PropTypes.bool
-};
-Sidebar.defaultProps = {
-  addons: null,
-  dense: false
-};
-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: ${teal.A700};
-    }
-  }
-  .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 => 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;

package/es/Layout/dashboard-legacy/header.js

@@ -1,174 +0,0 @@
-import PropTypes from 'prop-types';
-import Button from '@mui/material/IconButton';
-import AppBar from '@mui/material/AppBar';
-import Toolbar from '@mui/material/Toolbar';
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-import Hidden from '@mui/material/Hidden';
-import MenuIcon from '@mui/icons-material/Menu';
-import { Link } from 'react-router-dom';
-import Logo from '../../Logo';
-import { styled } from '../../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-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 => 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 => 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;
-    }
-  }
-`;
-
-/*
-  自定义 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({
-  children,
-  brand,
-  brandAddon,
-  description,
-  addons,
-  onToggleMenu,
-  homeUrl,
-  logo,
-  ...rest
-}) {
-  return /*#__PURE__*/_jsx(StyledAppBar, {
-    position: "sticky",
-    className: "header",
-    ...rest,
-    children: /*#__PURE__*/_jsxs(Toolbar, {
-      disableGutters: false,
-      className: "header-toolbar",
-      children: [/*#__PURE__*/_jsx(Button, {
-        color: "inherit",
-        "aria-label": "open drawer",
-        edge: "start",
-        className: "header-menu",
-        "aira-label": "header menu button",
-        onClick: onToggleMenu,
-        children: /*#__PURE__*/_jsx(MenuIcon, {})
-      }), /*#__PURE__*/_jsxs(Link, {
-        to: homeUrl,
-        className: "header-link",
-        children: [/*#__PURE__*/_jsx(Hidden, {
-          mdDown: true,
-          children: /*#__PURE__*/_jsx("div", {
-            className: "header-logo",
-            children: logo || /*#__PURE__*/_jsx(Logo, {
-              showText: false
-            })
-          })
-        }), /*#__PURE__*/_jsxs("div", {
-          className: "header-title",
-          children: [/*#__PURE__*/_jsxs(Typography, {
-            component: "h2",
-            noWrap: true,
-            className: "header-title__primary",
-            children: [brand, brandAddon]
-          }), /*#__PURE__*/_jsx(Typography, {
-            component: "p",
-            noWrap: true,
-            className: "header-title__secondary",
-            children: description
-          })]
-        })]
-      }), /*#__PURE__*/_jsx(Box, {
-        flexGrow: 1
-      }), !!children && /*#__PURE__*/_jsx("div", {
-        className: "header-children",
-        children: children
-      }), /*#__PURE__*/_jsx("div", {
-        className: "header-addons",
-        children: addons
-      })]
-    })
-  });
-}
-Header.propTypes = {
-  onToggleMenu: PropTypes.func.isRequired,
-  brand: PropTypes.string.isRequired,
-  brandAddon: PropTypes.object,
-  description: PropTypes.any.isRequired,
-  children: PropTypes.any,
-  addons: PropTypes.any,
-  homeUrl: PropTypes.string,
-  logo: PropTypes.any
-};
-Header.defaultProps = {
-  children: null,
-  addons: null,
-  brandAddon: null,
-  homeUrl: '/',
-  logo: null
-};