@arcblock/ux 2.9.91 → 2.10.0

package/es/NavMenu/nav-menu.js

@@ -1,358 +0,0 @@
-import { Children, cloneElement, useEffect, createContext, useContext, useMemo, useState, useRef, useCallback, forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import MenuIcon from '@mui/icons-material/Menu';
-import { useMemoizedFn } from 'ahooks';
-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]);
-  const [hiddenItemCount, setHiddenItemCount] = useState(0);
-  const navMenuRef = useRef();
-  const itemRefs = useRef([]);
-  const moreIconRef = useRef();
-  const isAllItemsHidden = hiddenItemCount === itemRefs.current?.length;
-  const icon = isAllItemsHidden ? /*#__PURE__*/_jsx(MenuIcon, {}) : /*#__PURE__*/_jsx(MoreHorizIcon, {});
-  const style = isAllItemsHidden ? {
-    marginLeft: '0px'
-  } : undefined;
-  const renderChildrenWithRef = childrenElement => {
-    return Children.map(childrenElement, (child, index) => {
-      return /*#__PURE__*/cloneElement(child, {
-        ref: el => {
-          itemRefs.current[index] = el;
-        }
-      });
-    });
-  };
-  const checkItemsFit = useMemoizedFn(() => {
-    let totalWidthUsed = 0;
-    let newHiddenCount = 0;
-    let leftAllHidden = false;
-    const containerWidth = navMenuRef.current?.offsetWidth || 0;
-    const moreIconWidth = moreIconRef.current ? moreIconRef.current.offsetWidth + parseFloat(window.getComputedStyle(moreIconRef.current).marginLeft) : 0;
-    itemRefs.current.forEach((item, index) => {
-      if (item) {
-        item.style.display = 'flex';
-        const marginLeft = index > 0 ? parseFloat(window.getComputedStyle(item).marginLeft) : 0;
-        const currentItemWidth = item.offsetWidth + marginLeft;
-        if (containerWidth - moreIconWidth >= totalWidthUsed + currentItemWidth && !leftAllHidden) {
-          totalWidthUsed += currentItemWidth;
-        } else {
-          item.style.display = 'none';
-          leftAllHidden = true;
-          newHiddenCount++;
-        }
-      }
-    });
-    if (newHiddenCount !== hiddenItemCount) {
-      setHiddenItemCount(newHiddenCount);
-    }
-  }, [hiddenItemCount]);
-  useEffect(() => {
-    if (mode === 'horizontal') {
-      checkItemsFit();
-      window.addEventListener('resize', checkItemsFit);
-      return () => {
-        window.removeEventListener('resize', checkItemsFit);
-      };
-    }
-    return undefined;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [mode]);
-  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, isTopLevel = false) => {
-    if (item?.children) {
-      // 对于 Sub 组件，如果它是顶级组件，则包含 ref
-      return /*#__PURE__*/_jsx(Sub, {
-        id: item.id,
-        icon: item.icon,
-        label: item.label,
-        ref: isTopLevel ? el => {
-          itemRefs.current[index] = el;
-        } : undefined,
-        children: item.children.map((childItem, childIndex) => renderItem(childItem, childIndex, false))
-      }, index);
-    }
-
-    // 顶级 Item 组件总是包含 ref
-    return /*#__PURE__*/_jsx(Item, {
-      id: item.id,
-      icon: item.icon,
-      label: item.label,
-      active: item.active,
-      ref: isTopLevel ? el => {
-        itemRefs.current[index] = el;
-      } : undefined
-    }, index);
-  };
-  const content = items ? items?.slice(-hiddenItemCount).map((item, index) => renderItem(item, index)) : children?.slice(-hiddenItemCount);
-  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__*/_jsxs("ul", {
-        className: "navmenu-root",
-        ref: navMenuRef,
-        children: [items ? items.map((item, index) => renderItem(item, index, true)) : renderChildrenWithRef(children), hiddenItemCount > 0 && /*#__PURE__*/_jsx(Sub, {
-          expandIcon: false,
-          icon: icon,
-          label: "",
-          ref: moreIconRef,
-          style: style,
-          children: content
-        })]
-      })
-    })
-  });
-}
-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
- */
-const Item = /*#__PURE__*/forwardRef(({
-  id: _id,
-  icon,
-  label,
-  active,
-  onClick,
-  ...rest
-}, ref) => {
-  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,
-      ref: ref,
-      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
- */
-const Sub = /*#__PURE__*/forwardRef(({
-  id: _id,
-  icon,
-  label,
-  children,
-  expandIcon,
-  ...rest
-}, ref) => {
-  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,
-    ref: ref,
-    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

@@ -1,181 +0,0 @@
-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;
-  min-width: 50px;
-  flex-grow: 1;
-
-  .navmenu-root {
-    display: flex;
-    align-items: center;
-  }
-  /* 顶级菜单间隔 */
-  .navmenu-root > .navmenu-item,
-  .navmenu-root > .navmenu-sub {
-    margin-left: 24px;
-    white-space: nowrap;
-  }
-  .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 {
-    white-space: nowrap;
-    > .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;
-  }
-`;