first commit

frontend/node_modules/rc-menu/es/SubMenu/index.js

@@ -0,0 +1,298 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["style", "className", "title", "eventKey", "warnKey", "disabled", "internalPopupClose", "children", "itemIcon", "expandIcon", "popupClassName", "popupOffset", "popupStyle", "onClick", "onMouseEnter", "onMouseLeave", "onTitleClick", "onTitleMouseEnter", "onTitleMouseLeave"],
+  _excluded2 = ["active"];
+import * as React from 'react';
+import classNames from 'classnames';
+import Overflow from 'rc-overflow';
+import warning from "rc-util/es/warning";
+import SubMenuList from "./SubMenuList";
+import { parseChildren } from "../utils/commonUtil";
+import MenuContextProvider, { MenuContext } from "../context/MenuContext";
+import useMemoCallback from "../hooks/useMemoCallback";
+import PopupTrigger from "./PopupTrigger";
+import Icon from "../Icon";
+import useActive from "../hooks/useActive";
+import { warnItemProp } from "../utils/warnUtil";
+import useDirectionStyle from "../hooks/useDirectionStyle";
+import InlineSubMenuList from "./InlineSubMenuList";
+import { PathTrackerContext, PathUserContext, useFullPath, useMeasure } from "../context/PathContext";
+import { useMenuId } from "../context/IdContext";
+import PrivateContext from "../context/PrivateContext";
+var InternalSubMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var style = props.style,
+    className = props.className,
+    title = props.title,
+    eventKey = props.eventKey,
+    warnKey = props.warnKey,
+    disabled = props.disabled,
+    internalPopupClose = props.internalPopupClose,
+    children = props.children,
+    itemIcon = props.itemIcon,
+    expandIcon = props.expandIcon,
+    popupClassName = props.popupClassName,
+    popupOffset = props.popupOffset,
+    popupStyle = props.popupStyle,
+    onClick = props.onClick,
+    onMouseEnter = props.onMouseEnter,
+    onMouseLeave = props.onMouseLeave,
+    onTitleClick = props.onTitleClick,
+    onTitleMouseEnter = props.onTitleMouseEnter,
+    onTitleMouseLeave = props.onTitleMouseLeave,
+    restProps = _objectWithoutProperties(props, _excluded);
+  var domDataId = useMenuId(eventKey);
+  var _React$useContext = React.useContext(MenuContext),
+    prefixCls = _React$useContext.prefixCls,
+    mode = _React$useContext.mode,
+    openKeys = _React$useContext.openKeys,
+    contextDisabled = _React$useContext.disabled,
+    overflowDisabled = _React$useContext.overflowDisabled,
+    activeKey = _React$useContext.activeKey,
+    selectedKeys = _React$useContext.selectedKeys,
+    contextItemIcon = _React$useContext.itemIcon,
+    contextExpandIcon = _React$useContext.expandIcon,
+    onItemClick = _React$useContext.onItemClick,
+    onOpenChange = _React$useContext.onOpenChange,
+    onActive = _React$useContext.onActive;
+  var _React$useContext2 = React.useContext(PrivateContext),
+    _internalRenderSubMenuItem = _React$useContext2._internalRenderSubMenuItem;
+  var _React$useContext3 = React.useContext(PathUserContext),
+    isSubPathKey = _React$useContext3.isSubPathKey;
+  var connectedPath = useFullPath();
+  var subMenuPrefixCls = "".concat(prefixCls, "-submenu");
+  var mergedDisabled = contextDisabled || disabled;
+  var elementRef = React.useRef();
+  var popupRef = React.useRef();
+
+  // ================================ Warn ================================
+  if (process.env.NODE_ENV !== 'production' && warnKey) {
+    warning(false, 'SubMenu should not leave undefined `key`.');
+  }
+
+  // ================================ Icon ================================
+  var mergedItemIcon = itemIcon !== null && itemIcon !== void 0 ? itemIcon : contextItemIcon;
+  var mergedExpandIcon = expandIcon !== null && expandIcon !== void 0 ? expandIcon : contextExpandIcon;
+
+  // ================================ Open ================================
+  var originOpen = openKeys.includes(eventKey);
+  var open = !overflowDisabled && originOpen;
+
+  // =============================== Select ===============================
+  var childrenSelected = isSubPathKey(selectedKeys, eventKey);
+
+  // =============================== Active ===============================
+  var _useActive = useActive(eventKey, mergedDisabled, onTitleMouseEnter, onTitleMouseLeave),
+    active = _useActive.active,
+    activeProps = _objectWithoutProperties(_useActive, _excluded2);
+
+  // Fallback of active check to avoid hover on menu title or disabled item
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    childrenActive = _React$useState2[0],
+    setChildrenActive = _React$useState2[1];
+  var triggerChildrenActive = function triggerChildrenActive(newActive) {
+    if (!mergedDisabled) {
+      setChildrenActive(newActive);
+    }
+  };
+  var onInternalMouseEnter = function onInternalMouseEnter(domEvent) {
+    triggerChildrenActive(true);
+    onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter({
+      key: eventKey,
+      domEvent: domEvent
+    });
+  };
+  var onInternalMouseLeave = function onInternalMouseLeave(domEvent) {
+    triggerChildrenActive(false);
+    onMouseLeave === null || onMouseLeave === void 0 || onMouseLeave({
+      key: eventKey,
+      domEvent: domEvent
+    });
+  };
+  var mergedActive = React.useMemo(function () {
+    if (active) {
+      return active;
+    }
+    if (mode !== 'inline') {
+      return childrenActive || isSubPathKey([activeKey], eventKey);
+    }
+    return false;
+  }, [mode, active, activeKey, childrenActive, eventKey, isSubPathKey]);
+
+  // ========================== DirectionStyle ==========================
+  var directionStyle = useDirectionStyle(connectedPath.length);
+
+  // =============================== Events ===============================
+  // >>>> Title click
+  var onInternalTitleClick = function onInternalTitleClick(e) {
+    // Skip if disabled
+    if (mergedDisabled) {
+      return;
+    }
+    onTitleClick === null || onTitleClick === void 0 || onTitleClick({
+      key: eventKey,
+      domEvent: e
+    });
+
+    // Trigger open by click when mode is `inline`
+    if (mode === 'inline') {
+      onOpenChange(eventKey, !originOpen);
+    }
+  };
+
+  // >>>> Context for children click
+  var onMergedItemClick = useMemoCallback(function (info) {
+    onClick === null || onClick === void 0 || onClick(warnItemProp(info));
+    onItemClick(info);
+  });
+
+  // >>>>> Visible change
+  var onPopupVisibleChange = function onPopupVisibleChange(newVisible) {
+    if (mode !== 'inline') {
+      onOpenChange(eventKey, newVisible);
+    }
+  };
+
+  /**
+   * Used for accessibility. Helper will focus element without key board.
+   * We should manually trigger an active
+   */
+  var onInternalFocus = function onInternalFocus() {
+    onActive(eventKey);
+  };
+
+  // =============================== Render ===============================
+  var popupId = domDataId && "".concat(domDataId, "-popup");
+  var expandIconNode = React.useMemo(function () {
+    return /*#__PURE__*/React.createElement(Icon, {
+      icon: mode !== 'horizontal' ? mergedExpandIcon : undefined,
+      props: _objectSpread(_objectSpread({}, props), {}, {
+        isOpen: open,
+        // [Legacy] Not sure why need this mark
+        isSubMenu: true
+      })
+    }, /*#__PURE__*/React.createElement("i", {
+      className: "".concat(subMenuPrefixCls, "-arrow")
+    }));
+  }, [mode, mergedExpandIcon, props, open, subMenuPrefixCls]);
+
+  // >>>>> Title
+  var titleNode = /*#__PURE__*/React.createElement("div", _extends({
+    role: "menuitem",
+    style: directionStyle,
+    className: "".concat(subMenuPrefixCls, "-title"),
+    tabIndex: mergedDisabled ? null : -1,
+    ref: elementRef,
+    title: typeof title === 'string' ? title : null,
+    "data-menu-id": overflowDisabled && domDataId ? null : domDataId,
+    "aria-expanded": open,
+    "aria-haspopup": true,
+    "aria-controls": popupId,
+    "aria-disabled": mergedDisabled,
+    onClick: onInternalTitleClick,
+    onFocus: onInternalFocus
+  }, activeProps), title, expandIconNode);
+
+  // Cache mode if it change to `inline` which do not have popup motion
+  var triggerModeRef = React.useRef(mode);
+  if (mode !== 'inline' && connectedPath.length > 1) {
+    triggerModeRef.current = 'vertical';
+  } else {
+    triggerModeRef.current = mode;
+  }
+  if (!overflowDisabled) {
+    var triggerMode = triggerModeRef.current;
+
+    // Still wrap with Trigger here since we need avoid react re-mount dom node
+    // Which makes motion failed
+    titleNode = /*#__PURE__*/React.createElement(PopupTrigger, {
+      mode: triggerMode,
+      prefixCls: subMenuPrefixCls,
+      visible: !internalPopupClose && open && mode !== 'inline',
+      popupClassName: popupClassName,
+      popupOffset: popupOffset,
+      popupStyle: popupStyle,
+      popup: /*#__PURE__*/React.createElement(MenuContextProvider
+      // Special handle of horizontal mode
+      , {
+        mode: triggerMode === 'horizontal' ? 'vertical' : triggerMode
+      }, /*#__PURE__*/React.createElement(SubMenuList, {
+        id: popupId,
+        ref: popupRef
+      }, children)),
+      disabled: mergedDisabled,
+      onVisibleChange: onPopupVisibleChange
+    }, titleNode);
+  }
+
+  // >>>>> List node
+  var listNode = /*#__PURE__*/React.createElement(Overflow.Item, _extends({
+    ref: ref,
+    role: "none"
+  }, restProps, {
+    component: "li",
+    style: style,
+    className: classNames(subMenuPrefixCls, "".concat(subMenuPrefixCls, "-").concat(mode), className, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(subMenuPrefixCls, "-open"), open), "".concat(subMenuPrefixCls, "-active"), mergedActive), "".concat(subMenuPrefixCls, "-selected"), childrenSelected), "".concat(subMenuPrefixCls, "-disabled"), mergedDisabled)),
+    onMouseEnter: onInternalMouseEnter,
+    onMouseLeave: onInternalMouseLeave
+  }), titleNode, !overflowDisabled && /*#__PURE__*/React.createElement(InlineSubMenuList, {
+    id: popupId,
+    open: open,
+    keyPath: connectedPath
+  }, children));
+  if (_internalRenderSubMenuItem) {
+    listNode = _internalRenderSubMenuItem(listNode, props, {
+      selected: childrenSelected,
+      active: mergedActive,
+      open: open,
+      disabled: mergedDisabled
+    });
+  }
+
+  // >>>>> Render
+  return /*#__PURE__*/React.createElement(MenuContextProvider, {
+    onItemClick: onMergedItemClick,
+    mode: mode === 'horizontal' ? 'vertical' : mode,
+    itemIcon: mergedItemIcon,
+    expandIcon: mergedExpandIcon
+  }, listNode);
+});
+var SubMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var eventKey = props.eventKey,
+    children = props.children;
+  var connectedKeyPath = useFullPath(eventKey);
+  var childList = parseChildren(children, connectedKeyPath);
+
+  // ==================== Record KeyPath ====================
+  var measure = useMeasure();
+
+  // eslint-disable-next-line consistent-return
+  React.useEffect(function () {
+    if (measure) {
+      measure.registerPath(eventKey, connectedKeyPath);
+      return function () {
+        measure.unregisterPath(eventKey, connectedKeyPath);
+      };
+    }
+  }, [connectedKeyPath]);
+  var renderNode;
+
+  // ======================== Render ========================
+  if (measure) {
+    renderNode = childList;
+  } else {
+    renderNode = /*#__PURE__*/React.createElement(InternalSubMenu, _extends({
+      ref: ref
+    }, props), childList);
+  }
+  return /*#__PURE__*/React.createElement(PathTrackerContext.Provider, {
+    value: connectedKeyPath
+  }, renderNode);
+});
+if (process.env.NODE_ENV !== 'production') {
+  SubMenu.displayName = 'SubMenu';
+}
+export default SubMenu;