@arcblock/ux 1.17.14 → 1.17.15

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