preact-arco-design/es/Menu/sub-menu/pop.js

Arco Design React UI Library.

var __assign = this && this.__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];

      for (var p in s) {
        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
      }
    }

    return t;
  };

  return __assign.apply(this, arguments);
};

var __read = this && this.__read || function (o, n) {
  var m = typeof Symbol === "function" && o[Symbol.iterator];
  if (!m) return o;
  var i = m.call(o),
      r,
      ar = [],
      e;

  try {
    while ((n === void 0 || n-- > 0) && !(r = i.next()).done) {
      ar.push(r.value);
    }
  } catch (error) {
    e = {
      error: error
    };
  } finally {
    try {
      if (r && !r.done && (m = i["return"])) m.call(i);
    } finally {
      if (e) throw e.error;
    }
  }

  return ar;
};

import React, { useContext, useMemo, useState } from "preact/compat";
import cs from "../../_util/classNames";
import IconRight from "../../../icon/react-icon/IconRight";
import IconLeft from "../../../icon/react-icon/IconLeft";
import IconDown from "../../../icon/react-icon/IconDown";
import { isChildrenSelected } from "../util";
import omit from "../../_util/omit";
import Dropdown from "../../Dropdown";
import Menu from "../index";
import MenuIndent from "../indent";
import MenuContext from "../context";
import { ConfigContext } from "../../ConfigProvider";
import { Enter } from "../../_util/keycode";
var globalPopSubMenuIndex = 0;

var SubMenuPop = function SubMenuPop(props) {
  var _a;

  var _key = props._key,
      children = props.children,
      style = props.style,
      className = props.className,
      title = props.title,
      level = props.level,
      selectable = props.selectable,
      forwardedRef = props.forwardedRef,
      propTriggerProps = props.triggerProps;

  var _b = useContext(MenuContext),
      menuId = _b.id,
      prefixCls = _b.prefixCls,
      mode = _b.mode,
      inDropdown = _b.inDropdown,
      levelIndent = _b.levelIndent,
      _c = _b.selectedKeys,
      selectedKeys = _c === void 0 ? [] : _c,
      icons = _b.icons,
      contextTriggerProps = _b.triggerProps,
      onClickSubMenu = _b.onClickSubMenu,
      _onClickMenuItem = _b.onClickMenuItem;

  var rtl = useContext(ConfigContext).rtl;

  var triggerProps = __assign(__assign({}, contextTriggerProps), propTriggerProps);

  var _d = __read(useState(false), 2),
      popupVisible = _d[0],
      setPopupVisible = _d[1];

  var baseClassName = "".concat(prefixCls, "-pop");
  var isSelected = selectable && selectedKeys.indexOf(props._key) > -1;
  var needPopOnBottom = mode === 'horizontal' && !inDropdown; // Unique ID of this instance

  var instanceId = useMemo(function () {
    var id = "".concat(menuId, "-submenu-pop-").concat(globalPopSubMenuIndex);
    globalPopSubMenuIndex++;
    return id;
  }, []);

  var renderSuffix = function renderSuffix() {
    var MergedIconRight = icons && icons.popArrowRight ? icons.popArrowRight : rtl ? React.createElement(IconLeft, null) : React.createElement(IconRight, null);
    var MergedIconDown = icons && icons.horizontalArrowDown ? icons.horizontalArrowDown : React.createElement(IconDown, null);
    return React.createElement("span", {
      className: "".concat(prefixCls, "-icon-suffix")
    }, needPopOnBottom ? MergedIconDown : MergedIconRight);
  };

  var hasSelectedStatus = isChildrenSelected(children, selectedKeys) || isSelected;
  var popPosition = rtl ? ['br', 'lt'] : ['bl', 'rt'];

  var subMenuClickHandler = function subMenuClickHandler(event) {
    onClickSubMenu(_key, level, 'pop');
    selectable && _onClickMenuItem(_key, event);
  };

  return React.createElement(Dropdown, {
    trigger: "hover",
    onVisibleChange: function onVisibleChange(visible) {
      return setPopupVisible(visible);
    },
    droplist: React.createElement(Menu, {
      id: instanceId,
      selectedKeys: selectedKeys,
      onClickMenuItem: function onClickMenuItem(key, event) {
        _onClickMenuItem(key, event);

        setPopupVisible(false);
      }
    }, children),
    triggerProps: __assign({
      position: needPopOnBottom ? popPosition[0] : popPosition[1],
      popupVisible: popupVisible,
      showArrow: true,
      autoAlignPopupMinWidth: true,
      classNames: 'fadeIn',
      duration: 100,
      mouseEnterDelay: 50,
      mouseLeaveDelay: 50,
      className: cs("".concat(baseClassName, "-trigger"), triggerProps && triggerProps.className)
    }, omit(triggerProps, ['className']))
  }, React.createElement("div", {
    tabIndex: 0,
    "aria-haspopup": true,
    "aria-expanded": popupVisible,
    "aria-controls": instanceId,
    ref: forwardedRef,
    style: style,
    className: cs(baseClassName, "".concat(baseClassName, "-header"), (_a = {}, _a["".concat(prefixCls, "-selected")] = hasSelectedStatus, _a), className),
    onClick: subMenuClickHandler,
    onKeyDown: function onKeyDown(event) {
      var keyCode = event.keyCode || event.which;

      if (keyCode === Enter.code) {
        subMenuClickHandler(event);
      }
    }
  }, React.createElement(MenuIndent, {
    prefixCls: prefixCls,
    levelIndent: levelIndent,
    level: level
  }), title, renderSuffix(), hasSelectedStatus && mode === 'horizontal' ? React.createElement("div", {
    className: "".concat(prefixCls, "-selected-label")
  }) : null));
};

export default SubMenuPop;