@arcblock/ux 2.1.15 → 2.1.18

package/src/Layout/dashboard/index.js

@@ -1,15 +1,89 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
+import { withRouter, Link, useLocation, matchPath } from 'react-router-dom';
 import Helmet from 'react-helmet';
 import styled from 'styled-components';
+import useTheme from '@mui/styles/useTheme';
 import Container from '@mui/material/Container';
+import Hidden from '@mui/material/Hidden';
 import Box from '@mui/material/Box';
-import Drawer from '@mui/material/Drawer';
-import useWindowSize from 'react-use/lib/useWindowSize';
-
-import Sidebar from './sidebar';
-import Header from './header';
+import DashboardLegacy from '../dashboard-legacy';
+import { ResponsiveHeader } from '../../Header';
+import NavMenu from '../../NavMenu';
 import Footer from '../../Footer';
+import Sidebar from './sidebar';
+
+// 监听 location 变化并关闭 header 中的 menu (确保 drawer - disablePortal:false, keepMounted:true)
+// 直接监听 menu 中 link 点击来触发 closeMenu 会有问题 (Suspense & lazy)
+// eslint-disable-next-line react/prop-types
+function NavMenuWrapper({ closeMenu, ...rest }) {
+  const location = useLocation();
+  useEffect(() => {
+    closeMenu();
+  }, [location]);
+  return <NavMenu {...rest} />;
+}
+
+function Dashboard({ children, title, headerProps, links, ...rest }) {
+  const theme = useTheme();
+  const location = useLocation();
+  const navItems = useMemo(
+    () =>
+      links.map(link => ({
+        ...link,
+        label: <Link to={link.url}>{link.title}</Link>,
+        active: !!matchPath(location.pathname, { path: link.url, exact: false }),
+      })),
+    [location, links]
+  );
+
+  return (
+    <Wrapper {...rest} className={`dashboard ${rest.className}`}>
+      <Helmet title={title} key={title} />
+
+      <StyledUxHeader {...headerProps}>
+        {({ isMobile, closeMenu }) => {
+          if (isMobile) {
+            return (
+              <NavMenuWrapper
+                mode="inline"
+                items={navItems}
+                closeMenu={closeMenu}
+                bgColor="transparent"
+                activeTextColor={theme.palette.primary.main}
+              />
+            );
+          }
+          return null;
+        }}
+      </StyledUxHeader>
+
+      <Box display="flex" className="dashboard-body">
+        <Hidden mdDown>
+          <Box className="dashboard-sidebar">
+            <Sidebar links={links} />
+          </Box>
+        </Hidden>
+        <Box className="dashboard-main">
+          <Container className="dashboard-content">{children}</Container>
+          <Footer className="dashboard-footer" />
+        </Box>
+      </Box>
+    </Wrapper>
+  );
+}
+
+Dashboard.propTypes = {
+  children: PropTypes.any.isRequired,
+  title: PropTypes.string,
+  links: PropTypes.array.isRequired,
+  headerProps: PropTypes.object,
+};
+
+Dashboard.defaultProps = {
+  title: 'Home',
+  headerProps: {},
+};
 
 const Wrapper = styled.div`
   &.dashboard {
@@ -17,134 +91,61 @@ const Wrapper = styled.div`
     flex-direction: column;
     height: 100vh;
   }
-  .dashboard__body {
+  .dashboard-body {
     overflow: hidden;
     flex: 1;
   }
-  .dashboard__main {
+  .dashboard-sidebar {
+    box-sizing: border-box;
+    flex: 0 0 auto;
+    width: 104px;
+    padding: 0 24px;
+    &:hover {
+      overflow-y: auto;
+    }
+  }
+  .dashboard-main {
     display: flex;
     flex-direction: column;
     overflow: auto;
     flex: 1;
   }
-  .dashboard__content {
+  .dashboard-content {
     flex: 1;
   }
-  .dashboard__footer {
+  .dashboard-footer {
     padding-left: 30px;
   }
+`;
 
-  .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.mode === 'light' ? 0.05 : 0.5)});
-    border: 0;
+const StyledUxHeader = styled(ResponsiveHeader)`
+  .header-container {
+    max-width: 100%;
+  }
+  .header-logo {
+    display: flex;
+    justify-content: center;
+    /* logo 与 sidebar 中的 icon 垂直对齐, 104 - 24 * 2 = 56 */
+    width: 56px;
   }
 `;
 
-export default function Dashboard({
-  children,
-  title,
-  brand,
-  description,
-  brandAddon,
-  headerAddon,
-  images,
-  links,
-  prefix,
-  fullWidth,
-  contentLayout,
-  className,
-  homeUrl,
-  logo,
-  ...rest
-}) {
-  const breakpoint = 960;
-  const { width } = useWindowSize();
-  const [drawerMode, setDrawerMode] = useState(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 display="flex" className="dashboard__body">
-        <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 className="dashboard__footer" />
-        </Box>
-      </Box>
-    </Wrapper>
-  );
+// 兼容旧版 dashboard
+function DashboardWrapper({ legacy, ...rest }) {
+  if (legacy) {
+    return <DashboardLegacy {...rest} />;
+  }
+  return <Dashboard {...rest} />;
 }
 
-Dashboard.propTypes = {
-  children: PropTypes.any.isRequired,
-  title: PropTypes.string,
-  brand: PropTypes.string.isRequired,
-  links: PropTypes.array.isRequired,
-  images: PropTypes.object.isRequired,
-  brandAddon: PropTypes.object,
-  description: PropTypes.any.isRequired,
-  headerAddon: PropTypes.any,
-  prefix: PropTypes.string,
-  // 兼容旧版的设置，新版使用 fullWidth 进行设置
-  contentLayout: PropTypes.oneOf(['row', 'column']),
-  fullWidth: PropTypes.bool,
-  className: PropTypes.string,
-  homeUrl: PropTypes.string,
-  logo: PropTypes.any,
+DashboardWrapper.propTypes = {
+  ...Dashboard.propTypes,
+  legacy: PropTypes.bool,
 };
 
-Dashboard.defaultProps = {
-  title: 'Home',
-  contentLayout: 'column',
-  headerAddon: null,
-  brandAddon: null,
-  prefix: '/images',
-  fullWidth: false,
-  className: '',
-  homeUrl: '/',
-  logo: null,
+DashboardWrapper.defaultProps = {
+  ...Dashboard.defaultProps,
+  legacy: true,
 };
+
+export default withRouter(DashboardWrapper);

package/src/Layout/dashboard/sidebar.js

@@ -1,120 +1,105 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import withTheme from '@mui/styles/withTheme';
 
-import { withRouter, Link } from 'react-router-dom';
-import Button from '@mui/material/Button';
+import { NavLink } from 'react-router-dom';
 import Typography from '@mui/material/Typography';
 import { teal } from '@mui/material/colors';
 
-import ImageIcon from '../../Icon/image';
-import Logo from '../../Logo';
-
-function Sidebar({ location, theme, images, links, prefix, addons, logo, ...rest }) {
-  const isSelected = (url, name) => {
-    const pattern = new RegExp(`/${name}`);
-    return pattern.test(location.pathname);
-  };
-
+function Sidebar({ links, addons, ...rest }) {
   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>
-        );
-      })}
+    <Root {...rest}>
+      <ul>
+        {links.map(({ url, icon, title, showBadge }) => {
+          return (
+            <li key={url}>
+              <NavLink
+                to={url}
+                className="layout-sidebar-link"
+                activeClassName="layout-sidebar-link--active">
+                <span className={`layout-sidebar-icon ${showBadge ? 'layout-sidebar-badge' : ''}`}>
+                  {icon}
+                </span>
+                <Typography component="span" className="layout-sidebar-link-text">
+                  {title}
+                </Typography>
+              </NavLink>
+            </li>
+          );
+        })}
+      </ul>
       <div style={{ flex: 1 }} />
       {addons}
-    </MenuItems>
+    </Root>
   );
 }
 
 Sidebar.propTypes = {
-  location: PropTypes.object.isRequired,
-  theme: PropTypes.object.isRequired,
-  images: PropTypes.object.isRequired,
   links: PropTypes.array.isRequired,
-  prefix: PropTypes.string,
   addons: PropTypes.any,
-  logo: PropTypes.any,
 };
 
 Sidebar.defaultProps = {
-  prefix: '/images',
   addons: null,
-  logo: null,
 };
 
-const MenuItems = React.memo(styled.div`
-  flex: 1;
+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;
-
-  && .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;
-    }
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
   }
-`);
-
-const gradient = 'linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))';
-
-const MenuItem = styled(Button)`
-  && {
+  .layout-sidebar-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;
+    padding: 16px 0;
+    color: ${props => props.theme.palette.text.secondary};
+    text-decoration: none;
 
-    &:hover {
+    &:hover,
+    &.layout-sidebar-link--active {
+      color: ${props => props.theme.palette.primary.main};
       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};
+  }
+  .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;
+  }
 `;
 
-export default withRouter(withTheme(Sidebar));
+export default Sidebar;

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

@@ -0,0 +1,150 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import Helmet from 'react-helmet';
+import styled from 'styled-components';
+import Container from '@mui/material/Container';
+import Box from '@mui/material/Box';
+import Drawer from '@mui/material/Drawer';
+import useWindowSize from 'react-use/lib/useWindowSize';
+
+import Sidebar from './sidebar';
+import Header from './header';
+import Footer from '../../Footer';
+
+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;
+  }
+  .dashboard__footer {
+    padding-left: 30px;
+  }
+
+  .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.mode === 'light' ? 0.05 : 0.5)});
+    border: 0;
+  }
+`;
+
+export default function Dashboard({
+  children,
+  title,
+  brand,
+  description,
+  brandAddon,
+  headerAddon,
+  images,
+  links,
+  prefix,
+  fullWidth,
+  contentLayout,
+  className,
+  homeUrl,
+  logo,
+  ...rest
+}) {
+  const breakpoint = 960;
+  const { width } = useWindowSize();
+  const [drawerMode, setDrawerMode] = useState(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 display="flex" className="dashboard__body">
+        <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 className="dashboard__footer" />
+        </Box>
+      </Box>
+    </Wrapper>
+  );
+}
+
+Dashboard.propTypes = {
+  children: PropTypes.any.isRequired,
+  title: PropTypes.string,
+  brand: PropTypes.string.isRequired,
+  links: PropTypes.array.isRequired,
+  images: PropTypes.object.isRequired,
+  brandAddon: PropTypes.object,
+  description: PropTypes.any.isRequired,
+  headerAddon: PropTypes.any,
+  prefix: PropTypes.string,
+  // 兼容旧版的设置，新版使用 fullWidth 进行设置
+  contentLayout: PropTypes.oneOf(['row', 'column']),
+  fullWidth: PropTypes.bool,
+  className: PropTypes.string,
+  homeUrl: PropTypes.string,
+  logo: PropTypes.any,
+};
+
+Dashboard.defaultProps = {
+  title: 'Home',
+  contentLayout: 'column',
+  headerAddon: null,
+  brandAddon: null,
+  prefix: '/images',
+  fullWidth: false,
+  className: '',
+  homeUrl: '/',
+  logo: null,
+};