@arcblock/ux 1.17.13 → 1.17.16

package/src/Header/responsive-header.js

@@ -0,0 +1,136 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import MenuIcon from '@material-ui/icons/Menu';
+import Button from '@material-ui/core/IconButton';
+import useTheme from '@material-ui/core/styles/useTheme';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+import Drawer from '@material-ui/core/Drawer';
+import Header from './header';
+
+/**
+ * ResponsiveHeader
+ * - 窄屏下显示 burge menu
+ * - 窄屏下将 children 区域显示到 menu 中
+ *
+ * 注意: 暂时不要通过 display: none 隐藏 logo, https://blog.patw.me/archives/1820/inline-svg-same-id-and-display-none-issue/
+ */
+function ResponsiveHeader({ menu, prepend, children, ...rest }) {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const _children =
+    typeof children === 'function'
+      ? children({ isMobile, closeMenu: () => setDrawerOpen(false) })
+      : children;
+  const { logo, brand, brandAddon, description } = rest;
+  // 如果 children 没有值, 则使用普通的 Header 组件渲染 (此时并没有什么内容需要在 menu 中显示)
+  if (!children) {
+    return <Header prepend={prepend} {...rest} />;
+  }
+  return (
+    <Root
+      prepend={
+        prepend || (
+          <Button
+            color="inherit"
+            edge="start"
+            className="header-menu"
+            onClick={() => setDrawerOpen(true)}>
+            <MenuIcon />
+          </Button>
+        )
+      }
+      {...rest}
+      logo={isMobile ? null : logo}
+      $theme={theme}>
+      {!isMobile && _children}
+      {isMobile && (
+        <Drawer
+          open={drawerOpen}
+          onClose={() => setDrawerOpen(false)}
+          ModalProps={{ disablePortal: true, keepMounted: true }}>
+          <Sidebar>
+            <div className="header-sidebar-head">
+              <div className="header-sidebar-logo">{logo}</div>
+              {brand && <h2>{brand}</h2>}
+              {description && <p className="header-sidebar-description">{description}</p>}
+              {brandAddon && <div className="header-sidebar-brandaddon">{brandAddon}</div>}
+            </div>
+            <div className="header-sidebar-content">{_children}</div>
+          </Sidebar>
+        </Drawer>
+      )}
+    </Root>
+  );
+}
+
+ResponsiveHeader.propTypes = {
+  ...Header.PropTypes,
+  // 如果是 function, 则
+  // - 会传入一个 isMobile 参数, isMobile 为 true 时, 表示 children 会显示在 menu 中, 可以根据 isMobile 参数调整要渲染的内容, 比如如果 isMobile 为 true 则使用 inline 模式的 NavMenu (适用于移动端)
+  // - 会传入一个 closeMenu 参数, 可以关闭 menu
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+};
+
+ResponsiveHeader.defaultProps = {
+  ...Header.defaultProps,
+};
+
+const Root = styled(Header)`
+  .header-menu {
+    display: none;
+  }
+  ${props => props.$theme.breakpoints.down('sm')} {
+    .header-menu {
+      display: block;
+    }
+  }
+`;
+
+/**
+ * Sidebar
+ */
+const Sidebar = styled.div`
+  min-width: 280px;
+  font-size: 14px;
+  .header-sidebar-head {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 24px 0;
+    border-bottom: 1px solid #eee;
+    font-size: 12px;
+    .header-sidebar-logo {
+      min-width: 44px;
+      height: 44px;
+      font-size: 44px;
+      > * {
+        width: auto;
+        height: 100%;
+      }
+      > a {
+        display: block;
+      }
+      img {
+        max-width: 100%;
+        max-height: 100%;
+      }
+    }
+    h2 {
+      margin-top: 12px;
+      font-size: 14px;
+    }
+    .header-sidebar-description {
+      margin: 2px 0 0 0;
+    }
+    .header-sidebar-brandaddon {
+      margin-top: 8px;
+    }
+  }
+  .header-sidebar-content {
+    padding: 16px 0;
+  }
+`;
+
+export default ResponsiveHeader;

package/src/NavMenu/nav-menu.js

@@ -1,8 +1,8 @@
 import React, { createContext, useContext, useMemo, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import clsx from 'clsx';
-import './style.css';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import { HorizontalStyle, InlineStyle } from './style';
 
 const NavMenuContext = createContext();
 
@@ -26,12 +26,13 @@ function useUniqueId(id) {
  */
 function NavMenu({
   items,
-  orientation,
+  mode,
   children,
   defaultActiveId,
   textColor,
   activeTextColor,
   bgColor,
+  onSelected,
   ...rest
 }) {
   // eslint-disable-next-line no-param-reassign
@@ -43,8 +44,10 @@ function NavMenu({
   const contextValue = useMemo(() => {
     return {
       ...state,
+      mode,
       activate: id => {
         setState(prev => ({ ...prev, activeId: id }));
+        onSelected?.(id);
       },
       open: id => {
         setState(prev => ({ ...prev, openedIds: [...prev.openedIds, id] }));
@@ -54,7 +57,7 @@ function NavMenu({
       },
     };
   }, [state]);
-  const classes = clsx('navmenu', `navmenu--${orientation}`, rest.className);
+  const classes = clsx('navmenu', `navmenu--${mode}`, rest.className);
   const renderItem = (item, index) => {
     if (item.children) {
       return (
@@ -68,67 +71,44 @@ function NavMenu({
       <Item key={index} id={item.id} icon={item.icon} label={item.label} active={item.active} />
     );
   };
+  const StyledRoot = mode === 'inline' ? InlineStyle : HorizontalStyle;
   return (
     <NavMenuContext.Provider value={contextValue}>
-      <Root
+      <StyledRoot
         {...rest}
         className={classes}
         $textColor={textColor}
         $activeTextColor={activeTextColor}
         $bgColor={bgColor}>
         <ul className="navmenu-root">{items ? items.map(renderItem) : children}</ul>
-      </Root>
+      </StyledRoot>
     </NavMenuContext.Provider>
   );
 }
 
 NavMenu.propTypes = {
   items: PropTypes.array,
-  // 默认水平方向布局
-  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+  // 默认水平方向布局,
+  // inline 模式: 垂直布局, 且通过 click 事件来收缩/伸展子菜单, 适用于移动端
+  mode: PropTypes.oneOf(['horizontal', 'vertical', 'inline']),
   children: PropTypes.array,
   defaultActiveId: PropTypes.string,
   textColor: PropTypes.string,
   activeTextColor: PropTypes.string,
   bgColor: PropTypes.string,
+  onSelected: PropTypes.func,
 };
 NavMenu.defaultProps = {
   items: null,
-  orientation: 'horizontal',
+  mode: 'horizontal',
   children: null,
   defaultActiveId: null,
   textColor: '#9397a1',
   activeTextColor: '#25292f',
   bgColor: '#fff',
+  onSelected: null,
 };
 
-const Root = styled.nav`
-  --text-color: ${props => props.$textColor};
-  --active-text-color: ${props => props.$activeTextColor};
-  --bg-color: ${props => props.$bgColor};
-
-  padding: 8px 16px;
-  background-color: var(--bg-color);
-  font-size: 14px;
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-  .navmenu-item,
-  .navmenu-item a,
-  .navmenu-sub {
-    color: var(--text-color);
-  }
-  .navmenu-item--active,
-  .navmenu-item:hover,
-  .navmenu-item:hover a,
-  .navmenu-item--active a,
-  .navmenu-sub--opened {
-    color: var(--active-text-color);
-  }
-`;
-
 /**
  * Item
  */
@@ -146,10 +126,11 @@ function Item({ id: _id, icon, label, active, onClick, ...rest }) {
     activate(id);
   };
   return (
-    <ItemRoot {...rest} className={classes} onClick={handleClick}>
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    <li {...rest} className={classes} onClick={handleClick}>
       {icon && <span className="navmenu-item-icon">{icon}</span>}
-      <span className="navmenu-item-content">{label}</span>
-    </ItemRoot>
+      <span className="navmenu-item-label">{label}</span>
+    </li>
   );
 }
 
@@ -171,47 +152,39 @@ Item.defaultProps = {
   onClick: null,
 };
 
-const ItemRoot = styled.li`
-  position: relative;
-  cursor: pointer;
-  a {
-    text-decoration: none;
-    white-space: nowrap;
-  }
-  a::before {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-color: transparent;
-    content: '';
-  }
-`;
-
 /**
  * Sub
  */
-function Sub({ id: _id, icon, label, children, ...rest }) {
+function Sub({ id: _id, icon, label, children, expandIcon, ...rest }) {
   const id = useUniqueId(_id);
-  const { openedIds, open, close } = useContext(NavMenuContext);
-  const classes = clsx(
-    'navmenu-sub',
-    { 'navmenu-sub--opened': openedIds.includes(id) },
-    rest.className
-  );
+  const { openedIds, open, close, mode } = useContext(NavMenuContext);
+  const isOpen = openedIds.includes(id);
+  const classes = clsx('navmenu-sub', { 'navmenu-sub--opened': isOpen }, rest.className);
+  const isInlineMode = mode === 'inline';
+  // inline mode 时使用 click 事件控制收缩/伸展子菜单
+  const props = isInlineMode
+    ? { onClick: () => (openedIds.includes(id) ? close(id) : open(id)) }
+    : {
+        onMouseEnter: () => open(id),
+        onMouseLeave: () => close(id),
+      };
+  // inline mode, 避免点击子菜单项时触发父菜单的 open/close
+  const containerProps = isInlineMode
+    ? {
+        onClick: e => e.stopPropagation(),
+      }
+    : {};
   return (
-    <SubRoot
-      {...rest}
-      className={classes}
-      onMouseEnter={() => open(id)}
-      onMouseLeave={() => close(id)}>
+    <li {...rest} className={classes} {...props}>
       {icon && <span className="navmenu-sub-icon">{icon}</span>}
-      <span className="navmenu-sub-content">{label}</span>
-      <div className="navmenu-sub-container">
+      <span className="navmenu-sub-label">{label}</span>
+      {expandIcon && (
+        <span className="navmenu-sub-expand-icon">{expandIcon?.({ isOpen }) || expandIcon}</span>
+      )}
+      <div className="navmenu-sub-container" {...containerProps}>
         <ul className="navmenu-sub-list">{filterItems(children)}</ul>
       </div>
-    </SubRoot>
+    </li>
   );
 }
 
@@ -220,26 +193,24 @@ Sub.propTypes = {
   icon: PropTypes.element,
   label: PropTypes.node.isRequired,
   children: PropTypes.array.isRequired,
+  expandIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
 };
 
 Sub.defaultProps = {
   id: null,
   icon: null,
+  // eslint-disable-next-line react/prop-types
+  expandIcon: ({ isOpen }) => {
+    return (
+      <ExpandMoreIcon
+        style={{
+          transform: `rotate(${isOpen ? 180 : 0}deg)`,
+        }}
+      />
+    );
+  },
 };
 
-const SubRoot = styled.li`
-  position: relative;
-  cursor: pointer;
-  .navmenu-sub-container {
-    display: none;
-    position: absolute;
-  }
-  &.navmenu-sub--opened > .navmenu-sub-container {
-    display: block;
-    top: 100%;
-  }
-`;
-
 NavMenu.Item = Item;
 NavMenu.Sub = Sub;
 

package/src/NavMenu/style.js

@@ -0,0 +1,182 @@
+import styled from 'styled-components';
+
+const NavMenuBase = styled.nav`
+  --text-color: ${props => props.$textColor};
+  --active-text-color: ${props => props.$activeTextColor};
+  --bg-color: ${props => props.$bgColor};
+
+  background-color: var(--bg-color);
+  font-size: 14px;
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .navmenu-item,
+  .navmenu-sub {
+    display: flex;
+    align-items: center;
+  }
+  // active/hover
+  .navmenu-item,
+  .navmenu-item a,
+  .navmenu-sub {
+    color: var(--text-color);
+  }
+  .navmenu-item--active,
+  .navmenu-item:hover,
+  .navmenu-item:hover a,
+  .navmenu-item--active a,
+  .navmenu-sub--opened {
+    color: var(--active-text-color);
+  }
+
+  .navmenu-item {
+    position: relative;
+    cursor: pointer;
+    a {
+      text-decoration: none;
+      white-space: nowrap;
+    }
+    a::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background-color: transparent;
+      content: '';
+    }
+  }
+
+  .navmenu-sub {
+    position: relative;
+    cursor: pointer;
+  }
+  // icon & expand icon
+  .navmenu-item-icon,
+  .navmenu-sub-icon,
+  .navmenu-sub-expand-icon {
+    display: flex;
+    line-height: 1;
+  }
+  .navmenu-item-icon,
+  .navmenu-sub-icon {
+    margin-right: 4px;
+  }
+  .navmenu-item-icon > *,
+  .navmenu-sub-icon > * {
+    font-size: 1.5em;
+  }
+  .navmenu-sub-expand-icon {
+    margin-left: 8px;
+    > * {
+      width: 0.8em;
+      height: 0.8em;
+      transition: transform 0.2s ease-in-out;
+    }
+  }
+`;
+
+export const HorizontalStyle = styled(NavMenuBase)`
+  padding: 8px 16px;
+  .navmenu-root {
+    display: flex;
+    align-items: center;
+  }
+  // 顶级菜单间隔
+  .navmenu-root > .navmenu-item,
+  .navmenu-root > .navmenu-sub {
+    margin-left: 24px;
+  }
+  .navmenu-root > .navmenu-item:first-child,
+  .navmenu-root > .navmenu-sub:first-child {
+    margin-left: 0;
+  }
+
+  /* 子级列表 */
+  .navmenu-sub-container {
+    display: none;
+    position: absolute;
+    top: 100%;
+  }
+  .navmenu-sub-list {
+    padding: 16px;
+    border-radius: 4px;
+    background: #fff;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    .navmenu-item + .navmenu-item {
+      margin-top: 8px;
+    }
+  }
+  // 二级 sub menu
+  .navmenu-root > .navmenu-sub {
+    > .navmenu-sub-container {
+      left: 50%;
+      transform: translateX(-50%);
+      padding-top: 16px;
+    }
+    &.navmenu-sub--opened > .navmenu-sub-container {
+      display: block;
+    }
+  }
+`;
+
+/* inline mode */
+export const InlineStyle = styled(NavMenuBase)`
+  .navmenu-root {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .navmenu-item,
+  .navmenu-sub {
+    padding: 0 16px;
+  }
+  // 顶级
+  .navmenu-root > .navmenu-item,
+  .navmenu-root > .navmenu-sub {
+    height: 48px;
+    line-height: 48px;
+    border-bottom: 1px solid #eee;
+  }
+  // icon
+  .navmenu-item-icon,
+  .navmenu-sub-icon {
+    width: 32px;
+    margin: 0;
+  }
+  .navmenu-sub-expand-icon {
+    margin-left: auto;
+  }
+  /* 子级列表 */
+  .navmenu-sub-container {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    .navmenu-item,
+    .navmenu-sub {
+      line-height: 24px;
+    }
+  }
+  .navmenu-sub-list {
+    padding-left: 16px;
+    .navmenu-item,
+    .navmenu-sub {
+      padding-left: 32px;
+      margin-top: 8px;
+      font-size: 13px;
+    }
+  }
+  // 二级 menu
+  .navmenu-root > .navmenu-sub {
+    &.navmenu-sub--opened {
+      background: #eee;
+    }
+  }
+  .navmenu-sub--opened > .navmenu-sub-container {
+    display: block;
+  }
+`;

package/lib/NavMenu/style.css

@@ -1,48 +0,0 @@
-.navmenu .navmenu-root {
-  display: flex;
-  align-items: center;
-}
-.navmenu-item,
-.navmenu-sub {
-  display: flex;
-  align-items: center;
-}
-.navmenu-root > .navmenu-item,
-.navmenu-root > .navmenu-sub {
-  margin-left: 24px;
-}
-.navmenu-root > .navmenu-item:first-child,
-.navmenu-root > .navmenu-sub:first-child {
-  margin-left: 0;
-}
-.navmenu-item-icon,
-.navmenu-sub-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 20px;
-  line-height: 1;
-}
-.navmenu-item-icon > *,
-.navmenu-sub-icon > * {
-  width: auto !important;
-  height: 100% !important;
-}
-.navmenu-item-icon {
-  margin-right: 4px;
-}
-
-/* 二级列表 */
-.navmenu-root > .navmenu-sub > .navmenu-sub-container {
-  left: 50%;
-  transform: translateX(-50%);
-  padding-top: 16px;
-}
-.navmenu-root .navmenu-sub-list {
-  padding: 16px;
-  border-radius: 4px;
-  background: #fff;
-}
-.navmenu-sub-list > .navmenu-item + .navmenu-item {
-  margin-top: 8px;
-}

package/src/NavMenu/style.css

@@ -1,48 +0,0 @@
-.navmenu .navmenu-root {
-  display: flex;
-  align-items: center;
-}
-.navmenu-item,
-.navmenu-sub {
-  display: flex;
-  align-items: center;
-}
-.navmenu-root > .navmenu-item,
-.navmenu-root > .navmenu-sub {
-  margin-left: 24px;
-}
-.navmenu-root > .navmenu-item:first-child,
-.navmenu-root > .navmenu-sub:first-child {
-  margin-left: 0;
-}
-.navmenu-item-icon,
-.navmenu-sub-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 20px;
-  line-height: 1;
-}
-.navmenu-item-icon > *,
-.navmenu-sub-icon > * {
-  width: auto !important;
-  height: 100% !important;
-}
-.navmenu-item-icon {
-  margin-right: 4px;
-}
-
-/* 二级列表 */
-.navmenu-root > .navmenu-sub > .navmenu-sub-container {
-  left: 50%;
-  transform: translateX(-50%);
-  padding-top: 16px;
-}
-.navmenu-root .navmenu-sub-list {
-  padding: 16px;
-  border-radius: 4px;
-  background: #fff;
-}
-.navmenu-sub-list > .navmenu-item + .navmenu-item {
-  margin-top: 8px;
-}