@arcblock/ux 2.1.15 → 2.1.16

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

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _withTheme = _interopRequireDefault(require("@mui/styles/withTheme"));
+
+var _reactRouterDom = require("react-router-dom");
+
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+
+var _colors = require("@mui/material/colors");
+
+var _image = _interopRequireDefault(require("../../Icon/image"));
+
+var _Logo = _interopRequireDefault(require("../../Logo"));
+
+const _excluded = ["location", "theme", "images", "links", "prefix", "addons", "logo"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function Sidebar(_ref) {
+  let {
+    location,
+    theme,
+    images,
+    links,
+    prefix,
+    addons,
+    logo
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const isSelected = (url, name) => {
+    const pattern = new RegExp("/".concat(name));
+    return pattern.test(location.pathname);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(MenuItems, rest, /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
+    to: "/",
+    className: "sidebar-logo"
+  }, logo || /*#__PURE__*/_react.default.createElement(_Logo.default, {
+    showText: false,
+    size: 20
+  })), links.map(_ref2 => {
+    let {
+      url,
+      name,
+      title,
+      showBadge
+    } = _ref2;
+    const selected = isSelected(url, name);
+    return /*#__PURE__*/_react.default.createElement(MenuItem, {
+      component: _reactRouterDom.Link,
+      key: url,
+      selected: selected,
+      to: url
+    }, /*#__PURE__*/_react.default.createElement(_image.default, {
+      name: images[name],
+      size: 36,
+      color: selected ? '#00c2c4' : theme.typography.color.main,
+      prefix: prefix,
+      showBadge: showBadge
+    }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      component: "span",
+      className: "menu-title"
+    }, title));
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      flex: 1
+    }
+  }), addons);
+}
+
+Sidebar.propTypes = {
+  location: _propTypes.default.object.isRequired,
+  theme: _propTypes.default.object.isRequired,
+  images: _propTypes.default.object.isRequired,
+  links: _propTypes.default.array.isRequired,
+  prefix: _propTypes.default.string,
+  addons: _propTypes.default.any,
+  logo: _propTypes.default.any
+};
+Sidebar.defaultProps = {
+  prefix: '/images',
+  addons: null,
+  logo: null
+};
+
+const MenuItems = /*#__PURE__*/_react.default.memo(_styledComponents.default.div.withConfig({
+  displayName: "sidebar__MenuItems",
+  componentId: "sc-gtwxx4-0"
+})(["flex:1;display:flex;flex-direction:column;&& .sidebar-logo{display:none;border-bottom:1px solid #eee;background:", ";position:sticky;top:0;z-index:1;padding:10px 0;text-align:center;font-size:0;}", "{&& .sidebar-logo{display:block;}}"], props => props.theme.palette.background.default, props => props.theme.breakpoints.down('md')));
+
+const gradient = 'linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))';
+const MenuItem = (0, _styledComponents.default)(_Button.default).withConfig({
+  displayName: "sidebar__MenuItem",
+  componentId: "sc-gtwxx4-1"
+})(["&&{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;transition:all 200ms ease-in-out;background:", ";padding:24px 0;border-left:2px solid ", ";border-radius:0;&:hover{background:", ";border-left-color:", ";}.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.selected ? gradient : '', props => props.selected ? _colors.teal.A700 : 'transparent', gradient, _colors.teal.A700, props => props.theme.palette.text.primary);
+
+var _default = (0, _reactRouterDom.withRouter)((0, _withTheme.default)(Sidebar));
+
+exports.default = _default;

package/lib/NavMenu/nav-menu.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.1.15",
+  "version": "2.1.16",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -52,10 +52,10 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "7cf6582840eac13158ecc4e25ec6ec13cdb97799",
+  "gitHead": "70976be9540deaa5997240659cd5c1dcee44e54f",
   "dependencies": {
-    "@arcblock/icons": "^2.1.15",
-    "@arcblock/react-hooks": "^2.1.15",
+    "@arcblock/icons": "^2.1.16",
+    "@arcblock/react-hooks": "^2.1.16",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",

package/src/Header/header.js

@@ -32,9 +32,10 @@ function Header({ logo, brand, brandAddon, description, children, addons, prepen
 }
 
 Header.propTypes = {
+  // logo img/svg, 可以包裹一个 a 标签
   logo: PropTypes.node,
-  // 相当于 Title
-  brand: PropTypes.string,
+  // 相当于 Title, 可以包裹一个 a 标签
+  brand: PropTypes.node,
   // brand 右侧的内容区域, 可显示一个 badge 或 tag
   brandAddon: PropTypes.node,
   // brand 下方的描述
@@ -58,7 +59,7 @@ Header.defaultProps = {
 
 const Root = styled.div`
   position: relative;
-  z-index: ${props => props.$theme.zIndex.drawer + 1};
+  z-index: ${props => props.$theme.zIndex.appBar};
   font-size: 14px;
   background: ${props => props.$theme.palette.common.white};
   .header-container {
@@ -95,10 +96,15 @@ const Root = styled.div`
     flex-direction: column;
     flex-shrink: 0;
     margin-right: 16px;
+    a {
+      color: inherit;
+      text-decoration: none;
+    }
     .header-brand-title {
       display: flex;
       align-items: center;
       h2 {
+        margin: 0;
         font-size: 16px;
       }
       .header-brand-addon {

package/src/Header/responsive-header.js

@@ -49,7 +49,7 @@ function ResponsiveHeader({ menu, prepend, children, ...rest }) {
         <Drawer
           open={drawerOpen}
           onClose={() => setDrawerOpen(false)}
-          ModalProps={{ disablePortal: true, keepMounted: true }}>
+          ModalProps={{ disablePortal: false, keepMounted: true }}>
           <Sidebar>
             <div className="header-sidebar-head">
               <div className="header-sidebar-logo">{logo}</div>

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;