@arcblock/ux 2.6.8 → 2.7.0

package/es/NavMenu/nav-menu.js

@@ -0,0 +1,286 @@
+import { Children, useEffect, createContext, useContext, useMemo, useState, useRef, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { HorizontalStyle, InlineStyle } from './style';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const NavMenuContext = /*#__PURE__*/createContext();
+
+// 过滤 children 中的 Item/Sub, 忽略其它类型的 element
+function filterItems(children) {
+  if (children) {
+    return Children.toArray(children).filter(child => child.type === Item || child.type === Sub);
+  }
+  return null;
+}
+function useUniqueId(id) {
+  const _id = useRef(id || `navmenu-item-id-${Math.random().toString(36).slice(2)}`);
+  return _id.current;
+}
+
+/**
+ * NavMenu, 导航组件, 可用于 header/footer/sidebar
+ */
+function NavMenu({
+  items,
+  mode,
+  children,
+  activeId,
+  textColor,
+  activeTextColor,
+  bgColor,
+  onSelected,
+  ...rest
+}) {
+  // eslint-disable-next-line no-param-reassign
+  children = filterItems(children);
+  if (!items?.length && !children?.length) {
+    throw new Error("One of 'items' or 'children' is required by NavMenu component.");
+  }
+  const [state, setState] = useState({
+    activeId,
+    openedIds: []
+  });
+  const activate = useCallback(id => {
+    setState(prev => ({
+      ...prev,
+      activeId: id
+    }));
+    onSelected?.(id);
+  }, [onSelected]);
+  const open = useCallback(id => {
+    setState(prev => ({
+      ...prev,
+      openedIds: [...prev.openedIds, id]
+    }));
+  }, []);
+  const close = useCallback(id => {
+    setState(prev => ({
+      ...prev,
+      openedIds: prev.openedIds.filter(item => item !== id)
+    }));
+  }, []);
+  const contextValue = useMemo(() => {
+    return {
+      ...state,
+      mode,
+      activate,
+      open,
+      close
+    };
+  }, [state, mode, activate, open, close]);
+  useEffect(() => {
+    // NavMenu#activeId 和 Item#active prop 都可以用来控制激活状态 (一般不会混用这两种方式)
+    // 如果未传入 NavMenu#activeId, 应该避免设置一个空值的 activeId 状态 (会与 Item#active 冲突)
+    if (activeId !== undefined && activeId !== null) {
+      setState(prev => ({
+        ...prev,
+        activeId
+      }));
+    }
+  }, [activeId]);
+  const classes = clsx('navmenu', `navmenu--${mode}`, rest.className);
+  const renderItem = (item, index) => {
+    if (item.children) {
+      return /*#__PURE__*/_jsx(Sub, {
+        id: item.id,
+        icon: item.icon,
+        label: item.label,
+        children: item.children.map(renderItem)
+      }, index);
+    }
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line react/no-array-index-key
+      _jsx(Item, {
+        id: item.id,
+        icon: item.icon,
+        label: item.label,
+        active: item.active
+      }, index)
+    );
+  };
+  const StyledRoot = mode === 'inline' ? InlineStyle : HorizontalStyle;
+  return /*#__PURE__*/_jsx(NavMenuContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx(StyledRoot, {
+      ...rest,
+      className: classes,
+      $textColor: textColor,
+      $activeTextColor: activeTextColor,
+      $bgColor: bgColor,
+      children: /*#__PURE__*/_jsx("ul", {
+        className: "navmenu-root",
+        children: items ? items.map(renderItem) : children
+      })
+    })
+  });
+}
+NavMenu.propTypes = {
+  items: PropTypes.array,
+  // 默认水平方向布局,
+  // inline 模式: 垂直布局, 且通过 click 事件来收缩/伸展子菜单, 适用于移动端
+  mode: PropTypes.oneOf(['horizontal', 'vertical', 'inline']),
+  children: PropTypes.array,
+  activeId: PropTypes.string,
+  textColor: PropTypes.string,
+  activeTextColor: PropTypes.string,
+  bgColor: PropTypes.string,
+  onSelected: PropTypes.func
+};
+NavMenu.defaultProps = {
+  items: null,
+  mode: 'horizontal',
+  children: null,
+  activeId: null,
+  textColor: '#9397a1',
+  activeTextColor: '#25292f',
+  bgColor: '#fff',
+  onSelected: null
+};
+
+/**
+ * Item
+ */
+function Item({
+  id: _id,
+  icon,
+  label,
+  active,
+  onClick,
+  ...rest
+}) {
+  const id = useUniqueId(_id);
+  const {
+    activeId,
+    activate
+  } = useContext(NavMenuContext);
+  const classes = clsx('navmenu-item', {
+    'navmenu-item--active': activeId === id
+  }, rest.className);
+  useEffect(() => {
+    if (active) {
+      activate(id);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [active]);
+  const handleClick = () => {
+    onClick?.();
+    activate(id);
+  };
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    _jsxs("li", {
+      ...rest,
+      className: classes,
+      onClick: handleClick,
+      children: [icon && /*#__PURE__*/_jsx("span", {
+        className: "navmenu-item-icon",
+        children: icon
+      }), /*#__PURE__*/_jsx("span", {
+        className: "navmenu-item-label",
+        children: label
+      })]
+    })
+  );
+}
+Item.propTypes = {
+  id: PropTypes.string,
+  icon: PropTypes.element,
+  label: PropTypes.node,
+  active: PropTypes.bool,
+  onClick: PropTypes.func
+};
+Item.defaultProps = {
+  id: null,
+  icon: null,
+  label: '',
+  active: false,
+  onClick: null
+};
+
+/**
+ * Sub
+ */
+function Sub({
+  id: _id,
+  icon,
+  label,
+  children,
+  expandIcon,
+  ...rest
+}) {
+  const id = useUniqueId(_id);
+  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 /*#__PURE__*/_jsxs("li", {
+    ...rest,
+    className: classes,
+    ...props,
+    children: [icon && /*#__PURE__*/_jsx("span", {
+      className: "navmenu-sub-icon",
+      children: icon
+    }), /*#__PURE__*/_jsx("span", {
+      className: "navmenu-sub-label",
+      children: label
+    }), expandIcon && /*#__PURE__*/_jsx("span", {
+      className: "navmenu-sub-expand-icon",
+      children: expandIcon?.({
+        isOpen
+      }) || expandIcon
+    }), /*#__PURE__*/_jsx("div", {
+      className: "navmenu-sub-container",
+      ...containerProps,
+      children: /*#__PURE__*/_jsx("ul", {
+        className: "navmenu-sub-list",
+        children: filterItems(children)
+      })
+    })]
+  });
+}
+Sub.propTypes = {
+  id: PropTypes.string,
+  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 /*#__PURE__*/_jsx(ExpandMoreIcon, {
+      style: {
+        transform: `rotate(${isOpen ? 180 : 0}deg)`
+      }
+    });
+  }
+};
+NavMenu.Item = Item;
+NavMenu.Sub = Sub;
+export default NavMenu;

package/es/NavMenu/style.js

@@ -0,0 +1,176 @@
+import { styled } from '../Theme';
+const NavMenuBase = styled('nav')`
+  background-color: ${props => props.$bgColor};
+  font-size: 16px;
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .navmenu-item,
+  .navmenu-sub {
+    display: flex;
+    align-items: center;
+  }
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+  /* active/hover */
+  .navmenu-item,
+  .navmenu-sub {
+    color: ${props => props.$textColor};
+  }
+  .navmenu-item--active,
+  .navmenu-item:hover,
+  .navmenu-sub--opened {
+    color: ${props => props.$activeTextColor};
+  }
+
+  .navmenu-item {
+    position: relative;
+    cursor: pointer;
+    transition: color 0.2s ease-in-out;
+    a {
+      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 > * {
+    width: auto;
+    height: 22px;
+    max-height: 22px;
+    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-of-type,
+  .navmenu-root > .navmenu-sub:first-of-type {
+    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)`
+  font-size: 16px;
+  .navmenu-root {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .navmenu-item,
+  .navmenu-sub {
+    padding: 0 16px;
+  }
+  & .navmenu-sub {
+    flex-wrap: wrap;
+  }
+  /* 顶级 */
+  .navmenu-root > .navmenu-item,
+  .navmenu-root > .navmenu-sub {
+    line-height: 48px;
+    border-bottom: 1px solid #eee;
+  }
+  /* icon */
+  .navmenu-item-icon,
+  .navmenu-sub-icon {
+    width: 30px;
+    margin: 0;
+  }
+  .navmenu-sub-expand-icon {
+    margin-left: auto;
+  }
+  /* 子级列表 */
+  .navmenu-sub-container {
+    display: none;
+    flex: 1 0 100%;
+    margin: 0 -16px;
+    padding-bottom: 8px;
+    .navmenu-item,
+    .navmenu-sub {
+      line-height: 32px;
+    }
+  }
+  .navmenu-sub-list {
+    padding-left: 16px;
+    .navmenu-item,
+    .navmenu-sub {
+      padding-left: 30px;
+      font-size: 13px;
+    }
+  }
+  /* 二级 menu */
+  .navmenu-sub--opened > .navmenu-sub-container {
+    display: block;
+  }
+`;