@arcblock/ux 2.1.15 → 2.1.16

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,
+};

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

@@ -0,0 +1,120 @@
+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 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);
+  };
+
+  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>
+  );
+}
+
+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;
+  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))';
+
+const MenuItem = styled(Button)`
+  && {
+    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};
+    }
+  }
+`;
+
+export default withRouter(withTheme(Sidebar));

package/src/NavMenu/nav-menu.js

@@ -120,7 +120,7 @@ function Item({ id: _id, icon, label, active, onClick, ...rest }) {
     if (active) {
       activate(id);
     }
-  }, []);
+  }, [active]);
   const handleClick = () => {
     onClick?.();
     activate(id);
@@ -138,8 +138,6 @@ Item.propTypes = {
   id: PropTypes.string,
   icon: PropTypes.element,
   label: PropTypes.node,
-  // 未显式指定各个 item#id 时, 不方便设置 NavMenu#defaultActiveId, 此时可以给 item 指定 active, 表示 nav menu 默认激活该 item
-  // (仅在初始化时有效, 后续更新无效)
   active: PropTypes.bool,
   onClick: PropTypes.func,
 };