@arcblock/ux 2.13.70 → 3.0.0

package/lib/NavMenu/nav-menu.js

@@ -1,369 +1,233 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, cloneElement, useEffect, useRef, forwardRef, useLayoutEffect, isValidElement } from 'react';
-import { ClickAwayListener } from '@mui/material';
-import clsx from 'clsx';
-import { MoreHoriz as MoreHorizIcon, ExpandMore as ExpandMoreIcon, Menu as MenuIcon } from '@mui/icons-material';
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
-import { useCreation, useMemoizedFn, useReactive, useSize, useThrottleFn } from 'ahooks';
-import { NavMenuProvider, useNavMenuContext } from './nav-menu-context';
-import { NavMenuRoot, NavMenuItem, NavMenuSub, NavMenuSubList, NavMenuStyled } from './style';
-import { SubContainer } from './sub-container';
-import { useTheme } from '../Theme';
-
-// 过滤 children 中的 Item/Sub, 忽略其它类型的 element
-function filterItems(children) {
-  if (children) {
-    // eslint-disable-next-line no-use-before-define
-    return Children.toArray(children).filter(child => {
-      if (! /*#__PURE__*/isValidElement(child)) {
-        return false;
-      }
-      return child.type === Item || child.type === Sub;
-    });
-  }
-  return null;
+import { jsx as o, jsxs as M } from "react/jsx-runtime";
+import { useRef as T, useLayoutEffect as ne, useEffect as j, Children as V, isValidElement as te, cloneElement as re } from "react";
+import { useTheme as oe, ClickAwayListener as ae } from "@mui/material";
+import F from "clsx";
+import { Menu as le, MoreHoriz as ie, ArrowForward as se, ExpandMore as ue } from "@mui/icons-material";
+import { useCreation as L, useReactive as ce, useMemoizedFn as A, useSize as de, useThrottleFn as me } from "ahooks";
+import fe from "lodash/noop";
+import { NavMenuProvider as ve, useNavMenuContext as B } from "./nav-menu-context.js";
+import { NavMenuStyled as pe, NavMenuRoot as he, NavMenuItem as Ce, NavMenuSub as Ne, NavMenuSubList as _e } from "./style.js";
+import { SubContainer as be } from "./sub-container.js";
+import "../Theme/theme.js";
+import "../Theme/theme-provider.js";
+function D(n) {
+  return n ? V.toArray(n).filter((a) => te(a) ? a.type === k || a.type === E : !1) : null;
 }
-function useUniqueId(id) {
-  const _id = useRef(id || `navmenu-item-id-${Math.random().toString(36).slice(2)}`);
-  return _id.current;
+function G(n) {
+  return T(n || `navmenu-item-id-${Math.random().toString(36).slice(2)}`).current;
 }
-/**
- * NavMenu, 导航组件, 可用于 header/footer/sidebar
- */
-function NavMenu({
-  items = [],
-  mode = 'horizontal',
-  children: _childs = null,
-  activeId = null,
-  textColor,
-  activeTextColor,
-  bgColor,
-  onSelected,
-  ...rest
+function J({
+  items: n = [],
+  mode: a = "horizontal",
+  children: C = null,
+  activeId: m = null,
+  textColor: y,
+  activeTextColor: g,
+  bgColor: I,
+  onSelected: s,
+  ...f
 }) {
-  const theme = useTheme();
-  const $textColor = useCreation(() => theme.palette.text.secondary, [theme]);
-  const $activeTextColor = useCreation(() => theme.palette.text.primary, [theme]);
-  const $bgColor = useCreation(() => theme.palette.background.default, [theme]);
-  // eslint-disable-next-line no-param-reassign
-  const children = filterItems(_childs);
-  if (!items?.length && !children?.length) {
+  var O;
+  const r = oe(), u = L(() => r.palette.text.secondary, [r]), v = L(() => r.palette.text.primary, [r]), l = L(() => r.palette.background.default, [r]), c = D(C);
+  if (!(n != null && n.length) && !(c != null && c.length))
     throw new Error("One of 'items' or 'children' is required by NavMenu component.");
-  }
-  const currentState = useReactive({
-    activeId,
+  const t = ce({
+    activeId: m,
     openedIds: [],
     hiddenItemCount: 0
-  });
-  const activate = useMemoizedFn(id => {
-    currentState.activeId = id;
-    onSelected?.(id);
-  });
-  const open = useMemoizedFn(id => {
-    currentState.openedIds.push(id);
-  });
-  const close = useMemoizedFn(id => {
-    currentState.openedIds = currentState.openedIds.filter(item => item !== id);
-  });
-  const contextValue = useCreation(() => {
-    return {
-      ...currentState,
-      mode,
-      textColor: $textColor,
-      activeTextColor: $activeTextColor,
-      bgColor: $bgColor,
-      activate,
-      open,
-      close
-    };
-  }, [currentState.activeId, currentState.hiddenItemCount, currentState.openedIds, mode, $textColor, $activeTextColor, $bgColor, activate, open, close]);
-  const navMenuRef = useRef(null);
-  const itemRefs = useRef([]);
-  const moreIconRef = useRef(null);
-  const containerWidth = useRef(0);
-  const isAllItemsHidden = currentState.hiddenItemCount === itemRefs.current?.length;
-  const style = isAllItemsHidden ? {
-    marginLeft: '0px'
-  } : undefined;
-  const icon = useCreation(() => {
-    return isAllItemsHidden ? /*#__PURE__*/_jsx(MenuIcon, {}) : /*#__PURE__*/_jsx(MoreHorizIcon, {});
-  }, [isAllItemsHidden]);
-  const renderChildrenWithRef = childrenElement => {
-    return Children.map(childrenElement, (child, index) => {
-      return /*#__PURE__*/cloneElement(child, {
-        ref: el => {
-          itemRefs.current[index] = el;
-        }
-      });
-    });
-  };
-  const containerSize = useSize(navMenuRef.current);
-  const {
-    run: checkItemsFit
-  } = useThrottleFn(useMemoizedFn(() => {
-    let totalWidthUsed = 0;
-    let newHiddenCount = 0;
-    let leftAllHidden = false;
-    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.current - moreIconWidth >= totalWidthUsed + currentItemWidth && !leftAllHidden) {
-          totalWidthUsed += currentItemWidth;
-        } else {
-          item.style.display = 'none';
-          leftAllHidden = true;
-          newHiddenCount++;
-        }
-      }
-    });
-    if (newHiddenCount !== currentState.hiddenItemCount) {
-      currentState.hiddenItemCount = newHiddenCount;
-    }
-  }), {
-    wait: 100
-  });
-  useLayoutEffect(() => {
-    containerWidth.current = containerSize?.width || navMenuRef.current?.clientWidth || 0;
-    if (mode === 'horizontal') {
-      checkItemsFit();
+  }), N = A((e) => {
+    t.activeId = e, s == null || s(e);
+  }), _ = A((e) => {
+    t.openedIds.push(e);
+  }), W = A((e) => {
+    t.openedIds = t.openedIds.filter((i) => i !== e);
+  }), z = L(() => ({
+    ...t,
+    mode: a,
+    textColor: u,
+    activeTextColor: v,
+    bgColor: l,
+    activate: N,
+    open: _,
+    close: W
+  }), [
+    t.activeId,
+    t.hiddenItemCount,
+    t.openedIds,
+    a,
+    u,
+    v,
+    l,
+    N,
+    _,
+    W
+  ]), $ = T(null), p = T([]), w = T(null), q = T(0), S = t.hiddenItemCount === ((O = p.current) == null ? void 0 : O.length), K = S ? { marginLeft: "0px" } : void 0, Q = L(() => S ? /* @__PURE__ */ o(le, {}) : /* @__PURE__ */ o(ie, {}), [S]), X = (e) => V.map(e, (i, h) => re(i, {
+    ref: (b) => {
+      p.current[h] = b;
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [containerSize?.width, mode]);
-  useEffect(() => {
-    if (mode === 'horizontal') {
-      checkItemsFit();
-      window.addEventListener('resize', checkItemsFit);
-      return () => {
-        window.removeEventListener('resize', checkItemsFit);
+  })), x = de($.current), { run: R } = me(
+    A(() => {
+      let e = 0, i = 0, h = !1;
+      const b = w.current ? w.current.offsetWidth + parseFloat(window.getComputedStyle(w.current).marginLeft) : 0;
+      p.current.forEach((d, P) => {
+        if (d) {
+          d.style.display = "flex";
+          const ee = P > 0 ? parseFloat(window.getComputedStyle(d).marginLeft) : 0, U = d.offsetWidth + ee;
+          q.current - b >= e + U && !h ? e += U : (d.style.display = "none", h = !0, i++);
+        }
+      }), i !== t.hiddenItemCount && (t.hiddenItemCount = i);
+    }),
+    { wait: 100 }
+  );
+  ne(() => {
+    var e;
+    q.current = (x == null ? void 0 : x.width) || ((e = $.current) == null ? void 0 : e.clientWidth) || 0, a === "horizontal" && R();
+  }, [x == null ? void 0 : x.width, a]), j(() => {
+    if (a === "horizontal")
+      return R(), window.addEventListener("resize", R), () => {
+        window.removeEventListener("resize", R);
       };
-    }
-    return undefined;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [mode, items]);
-  useEffect(() => {
-    // NavMenu#activeId 和 Item#active prop 都可以用来控制激活状态 (一般不会混用这两种方式)
-    // 如果未传入 NavMenu#activeId, 应该避免设置一个空值的 activeId 状态 (会与 Item#active 冲突)
-    if (activeId !== undefined && activeId !== null) {
-      currentState.activeId = activeId;
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [activeId]);
-  const classes = clsx('navmenu', `navmenu--${mode}`, rest.className);
-  const renderItem = (item, index, level = 0) => {
-    const isTopLevel = level === 0;
-    if (item?.children) {
-      // 只渲染两级子菜单
-      if (level > 0) {
-        return null;
-      }
-
-      // 对于 Sub 组件，如果它是顶级组件，则包含 ref
-      return /*#__PURE__*/_jsx(Sub, {
-        id: item.id,
-        icon: item.icon,
-        label: item.label,
-        variant: isTopLevel ? 'default' : 'panel',
-        ref: isTopLevel ? el => {
-          itemRefs.current[index] = el;
-        } : undefined,
-        children: typeof item.children === 'function' ? item.children : item.children.map((childItem, childIndex) => renderItem({
-          ...childItem,
-          variant: 'panel'
-        }, childIndex, level + 1))
-      }, item.id);
-    }
-
-    // 顶级 Item 组件总是包含 ref
-    return /*#__PURE__*/_jsx(Item, {
-      id: item.id,
-      icon: item.icon,
-      label: item.label,
-      description: item.description,
-      active: item.active,
-      variant: item.variant,
-      ref: isTopLevel ? el => {
-        itemRefs.current[index] = el;
-      } : undefined
-    }, item.id);
-  };
-  const content = items ? items?.slice(-currentState.hiddenItemCount).map((item, index) => renderItem(item, index, 1)) : children?.slice(-currentState.hiddenItemCount);
-
-  // 当前展开的子菜单
-  const openedId = currentState.openedIds[0];
-  return /*#__PURE__*/_jsx(NavMenuProvider, {
-    value: contextValue,
-    children: /*#__PURE__*/_jsx(NavMenuStyled, {
-      ...rest,
-      className: classes,
-      $textColor: $textColor,
-      $bgColor: $bgColor,
-      children: /*#__PURE__*/_jsxs(NavMenuRoot, {
-        className: clsx('navmenu-root', `navmenu-root--${mode}`),
-        ref: navMenuRef,
-        children: [items ? items.map((item, index) => renderItem(item, index)) : renderChildrenWithRef(children || []), currentState.hiddenItemCount > 0 && /*#__PURE__*/_jsx(Sub, {
-          expandIcon: false,
-          icon: icon,
-          label: "",
-          ref: moreIconRef,
-          style: style,
-          children: content
-        })]
-      })
-    })
-  });
+  }, [a, n]), j(() => {
+    m != null && (t.activeId = m);
+  }, [m]);
+  const Y = F("navmenu", `navmenu--${a}`, f.className), H = (e, i, h = 0) => {
+    const b = h === 0;
+    return e != null && e.children ? h > 0 ? null : /* @__PURE__ */ o(
+      E,
+      {
+        id: e.id,
+        icon: e.icon,
+        label: e.label,
+        variant: b ? "default" : "panel",
+        ref: b ? (d) => {
+          p.current[i] = d;
+        } : void 0,
+        children: typeof e.children == "function" ? e.children : e.children.map(
+          (d, P) => H({ ...d, variant: "panel" }, P, h + 1)
+        )
+      },
+      e.id
+    ) : /* @__PURE__ */ o(
+      k,
+      {
+        id: e.id,
+        icon: e.icon,
+        label: e.label,
+        description: e.description,
+        active: e.active,
+        variant: e.variant,
+        ref: b ? (d) => {
+          p.current[i] = d;
+        } : void 0
+      },
+      e.id
+    );
+  }, Z = n ? n == null ? void 0 : n.slice(-t.hiddenItemCount).map((e, i) => H(e, i, 1)) : c == null ? void 0 : c.slice(-t.hiddenItemCount);
+  return /* @__PURE__ */ o(ve, { value: z, children: /* @__PURE__ */ o(pe, { ...f, className: Y, $textColor: u, $bgColor: l, children: /* @__PURE__ */ M(he, { className: F("navmenu-root", `navmenu-root--${a}`), ref: $, children: [
+    n ? n.map((e, i) => H(e, i)) : X(c || []),
+    t.hiddenItemCount > 0 && /* @__PURE__ */ o(E, { expandIcon: !1, icon: Q, label: "", ref: w, style: K, children: Z })
+  ] }) }) });
 }
-export const Item = /*#__PURE__*/forwardRef(({
-  id: _id = '',
-  icon = null,
-  label = '',
-  description,
-  active = false,
-  variant = 'default',
-  onClick = null,
-  ...rest
-}, ref) => {
-  const id = useUniqueId(_id);
-  const {
-    mode,
-    activeId,
-    activate,
-    activeTextColor
-  } = useNavMenuContext();
-  const classes = clsx('navmenu-item', {
-    'navmenu-item--active': activeId === id
-  }, `navmenu-item--${mode}`, `navmenu-item--${variant}`, rest.className);
-  useEffect(() => {
-    if (active) {
-      activate?.(id);
+function k({
+  ref: n,
+  id: a = "",
+  icon: C = null,
+  label: m = "",
+  description: y,
+  active: g = !1,
+  variant: I = "default",
+  onClick: s = fe,
+  ...f
+}) {
+  const r = G(a), { mode: u, activeId: v, activate: l, activeTextColor: c } = B(), t = F(
+    "navmenu-item",
+    { "navmenu-item--active": v === r },
+    `navmenu-item--${u}`,
+    `navmenu-item--${I}`,
+    f.className
+  );
+  return j(() => {
+    g && (l == null || l(r));
+  }, [g]), // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+  /* @__PURE__ */ M(
+    Ce,
+    {
+      ...f,
+      className: t,
+      ref: n,
+      $activeTextColor: c,
+      onClick: () => {
+        s == null || s(), l == null || l(r);
+      },
+      children: [
+        C && /* @__PURE__ */ o("span", { className: "navmenu-item__icon", children: C }),
+        /* @__PURE__ */ M("div", { className: "navmenu-item__content", children: [
+          /* @__PURE__ */ M("span", { className: "navmenu-item__label", children: [
+            m,
+            " ",
+            /* @__PURE__ */ o(se, { className: "navmenu-item__label-arrow" })
+          ] }),
+          y && /* @__PURE__ */ o("span", { className: "navmenu-item__desc", children: y })
+        ] })
+      ]
     }
-    // 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(NavMenuItem, {
-      ...rest,
-      className: classes,
-      ref: ref,
-      $activeTextColor: activeTextColor,
-      onClick: handleClick,
-      children: [icon && /*#__PURE__*/_jsx("span", {
-        className: "navmenu-item__icon",
-        children: icon
-      }), /*#__PURE__*/_jsxs("div", {
-        className: "navmenu-item__content",
-        children: [/*#__PURE__*/_jsxs("span", {
-          className: "navmenu-item__label",
-          children: [label, " ", /*#__PURE__*/_jsx(ArrowForwardIcon, {
-            className: "navmenu-item__label-arrow"
-          })]
-        }), description && /*#__PURE__*/_jsx("span", {
-          className: "navmenu-item__desc",
-          children: description
-        })]
-      })]
-    })
   );
-});
-Item.displayName = 'NavMenu.Item';
-export const Sub = /*#__PURE__*/forwardRef(({
-  id: _id = '',
-  icon = null,
-  label = null,
-  description,
-  variant = 'default',
-  children,
-  expandIcon = ({
-    isOpen
-  }) => /*#__PURE__*/_jsx(ExpandMoreIcon, {
-    style: {
-      transform: `rotate(${isOpen ? 180 : 0}deg)`
+}
+k.displayName = "NavMenu.Item";
+function E({
+  ref: n,
+  id: a = "",
+  icon: C = null,
+  label: m = null,
+  description: y,
+  variant: g = "default",
+  children: I,
+  expandIcon: s = ({ isOpen: r }) => /* @__PURE__ */ o(
+    ue,
+    {
+      style: {
+        transform: `rotate(${r ? 180 : 0}deg)`
+      }
     }
-  }),
-  ...rest
-}, ref) => {
-  const id = useUniqueId(_id);
-  const {
-    openedIds,
-    open,
-    close,
-    mode,
-    activeTextColor
-  } = useNavMenuContext();
-  const isOpen = openedIds?.includes(id) ?? false;
-  const isInlineMode = mode === 'inline';
-  const classes = clsx('navmenu-sub', 'navmenu-item', {
-    'navmenu-item--panel': variant === 'panel'
-  }, {
-    'navmenu-sub--opened': isOpen,
-    'navmenu-item--inline': isInlineMode
-  }, rest.className);
-
-  // 统一使用 click 事件控制收缩/伸展子菜单
-  const props = {
+  ),
+  ...f
+}) {
+  const r = G(a), { openedIds: u, open: v, close: l, mode: c, activeTextColor: t } = B(), N = (u == null ? void 0 : u.includes(r)) ?? !1, _ = c === "inline", W = F(
+    "navmenu-sub",
+    "navmenu-item",
+    { "navmenu-item--panel": g === "panel" },
+    { "navmenu-sub--opened": N, "navmenu-item--inline": _ },
+    f.className
+  ), z = {
     onClick: () => {
-      if (openedIds?.includes(id)) {
-        close?.(id);
-      } else {
-        open?.(id);
-      }
+      u != null && u.includes(r) ? l == null || l(r) : v == null || v(r);
+    }
+  }, $ = _ ? { onClick: (w) => w.stopPropagation() } : {}, p = /* @__PURE__ */ M(
+    Ne,
+    {
+      ...f,
+      className: W,
+      ...z,
+      ref: n,
+      $activeTextColor: t,
+      children: [
+        C && /* @__PURE__ */ o("span", { className: "navmenu-item__icon", children: C }),
+        /* @__PURE__ */ M("div", { className: "navmenu-item__content", children: [
+          /* @__PURE__ */ o("span", { className: "navmenu-item__label", children: m }),
+          y && /* @__PURE__ */ o("span", { className: "navmenu-item__desc", children: y })
+        ] }),
+        s && /* @__PURE__ */ o("span", { className: "navmenu-sub__expand-icon", children: typeof s == "function" ? s({ isOpen: N }) : s }),
+        /* @__PURE__ */ o(be, { inline: _, ...$, children: typeof I == "function" ? I({ isOpen: N }) : /* @__PURE__ */ o(_e, { className: "navmenu-sub__list", children: D(I) }) })
+      ]
     }
-  };
-  // inline mode, 避免点击子菜单项时触发父菜单的 open/close
-  const containerProps = isInlineMode ? {
-    onClick: e => e.stopPropagation()
-  } : {};
-  const menu = /*#__PURE__*/_jsxs(NavMenuSub, {
-    ...rest,
-    className: classes,
-    ...props,
-    ref: ref,
-    $activeTextColor: activeTextColor,
-    children: [icon && /*#__PURE__*/_jsx("span", {
-      className: "navmenu-item__icon",
-      children: icon
-    }), /*#__PURE__*/_jsxs("div", {
-      className: "navmenu-item__content",
-      children: [/*#__PURE__*/_jsx("span", {
-        className: "navmenu-item__label",
-        children: label
-      }), description && /*#__PURE__*/_jsx("span", {
-        className: "navmenu-item__desc",
-        children: description
-      })]
-    }), expandIcon && /*#__PURE__*/_jsx("span", {
-      className: "navmenu-sub__expand-icon",
-      children: typeof expandIcon === 'function' ? expandIcon({
-        isOpen
-      }) : expandIcon
-    }), /*#__PURE__*/_jsx(SubContainer, {
-      inline: isInlineMode,
-      ...containerProps,
-      children: typeof children === 'function' ? children({
-        isOpen
-      }) // 自定义渲染
-      : /*#__PURE__*/_jsx(NavMenuSubList, {
-        className: "navmenu-sub__list",
-        children: filterItems(children)
-      })
-    })]
-  });
-  if (isInlineMode) {
-    return menu;
-  }
-  return /*#__PURE__*/_jsx(ClickAwayListener, {
-    onClickAway: () => close?.(id),
-    children: menu
-  });
-});
-Sub.displayName = 'NavMenu.Sub';
-NavMenu.Item = Item;
-NavMenu.Sub = Sub;
-export default NavMenu;
+  );
+  return _ ? p : /* @__PURE__ */ o(ae, { onClickAway: () => l == null ? void 0 : l(r), children: p });
+}
+E.displayName = "NavMenu.Sub";
+J.Item = k;
+J.Sub = E;
+export {
+  k as Item,
+  E as Sub,
+  J as default
+};