@qsxy/element-plus-react 1.0.0-next.21 → 1.0.0-next.22

package/dist/Menu/SubMenu.js

@@ -0,0 +1,242 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+var _excluded = ["activeIndex", "parentIndex", "mode", "menuTrigger", "onOpen", "onClose", "addItems", "addSubMenu", "handleSubMenuClick", "showTimeout", "hideTimeout", "themeStyle", "popperOffset"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import classNames from 'classnames';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import Icon from "../Icon/Icon";
+import Tooltip from "../Tooltip/Tooltip";
+import Transition from "../Transition/Transition";
+import { mergeDefaultProps } from "../Util";
+import { useClassNames } from "../hooks";
+import { MenuContext, useMenuContext } from "./MenuContext";
+import { afterEnter, afterLeave, beforeEnter, beforeLeave, onEnter, onLeave } from "./SubMenuCollapseTransition";
+var SubMenu = function SubMenu(props) {
+  props = mergeDefaultProps({
+    popperOffset: 5
+  }, props);
+  var _props = props,
+    _props$classPrefix = _props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'sub-menu' : _props$classPrefix,
+    title = _props.title,
+    index = _props.index,
+    popperClass = _props.popperClass,
+    disabled = _props.disabled;
+  var _useClassNames = useClassNames('menu'),
+    mb = _useClassNames.b,
+    mm = _useClassNames.m;
+  var _useClassNames2 = useClassNames(classPrefix),
+    b = _useClassNames2.b,
+    e = _useClassNames2.e,
+    is = _useClassNames2.is;
+  var _useMenuContext = useMenuContext(),
+    activeIndex = _useMenuContext.activeIndex,
+    parentIndex = _useMenuContext.parentIndex,
+    mode = _useMenuContext.mode,
+    menuTrigger = _useMenuContext.menuTrigger,
+    onOpen = _useMenuContext.onOpen,
+    onClose = _useMenuContext.onClose,
+    addItems = _useMenuContext.addItems,
+    addSubMenu = _useMenuContext.addSubMenu,
+    handleSubMenuClick = _useMenuContext.handleSubMenuClick,
+    showTimeout = _useMenuContext.showTimeout,
+    hideTimeout = _useMenuContext.hideTimeout,
+    themeStyle = _useMenuContext.themeStyle,
+    popperOffset = _useMenuContext.popperOffset,
+    ohter = _objectWithoutProperties(_useMenuContext, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var indexPath = useMemo(function () {
+    return [].concat(_toConsumableArray(parentIndex), [index]);
+  }, [index, parentIndex]);
+  var level = useMemo(function () {
+    return indexPath.length;
+  }, [indexPath.length]);
+  var tooltipRef = useRef();
+  var ulRef = useRef(null);
+  var inited = useRef(false);
+  var handleMouseEnter = useCallback(function () {
+    setOpen(true);
+  }, []);
+  var handleMouseLeave = useCallback(function () {
+    setOpen(false);
+  }, []);
+
+  /**
+   * 隐藏子菜单的回调函数
+   * 该函数用于处理子菜单的隐藏逻辑，包括触发子菜单点击处理和隐藏工具提示
+   *
+   * @remarks
+   * 依赖项: handleSubMenuClick - 子菜单点击处理函数
+   *
+   * @returns {void}
+   */
+  var hideSubMenu = useCallback(function () {
+    var _tooltipRef$current;
+    (_tooltipRef$current = tooltipRef.current) === null || _tooltipRef$current === void 0 || _tooltipRef$current.hide();
+    handleSubMenuClick === null || handleSubMenuClick === void 0 || handleSubMenuClick();
+  }, [handleSubMenuClick]);
+  var handleSubMenuItemClick = useCallback(function (evt) {
+    evt.stopPropagation();
+    if (disabled) {
+      return;
+    }
+    if (mode === 'vertical') {
+      setOpen(!open);
+      if (!open) {
+        onOpen === null || onOpen === void 0 || onOpen(index, indexPath, {
+          index: index,
+          indexPath: indexPath
+        });
+      } else {
+        onClose === null || onClose === void 0 || onClose(index, indexPath, {
+          index: index,
+          indexPath: indexPath
+        });
+      }
+    }
+  }, [disabled, index, indexPath, mode, onClose, onOpen, open]);
+  useEffect(function () {
+    if (!inited.current) {
+      inited.current = true;
+      addItems({
+        index: index,
+        indexPath: indexPath
+      });
+      addSubMenu({
+        index: index,
+        indexPath: indexPath,
+        openMenu: function openMenu(index, indexPath) {
+          // if (mode === 'horizontal') {
+          //     tooltipRef.current?.onOpen();
+          // }
+          setOpen(true);
+        },
+        closeMenu: function closeMenu(index, indexPath) {
+          // if (mode === 'horizontal') {
+          //     tooltipRef.current?.hide();
+          // }
+          setOpen(false);
+        }
+      });
+    }
+  });
+  return /*#__PURE__*/React.createElement("li", {
+    className: classNames(b(), is({
+      disabled: disabled,
+      opened: open,
+      active: activeIndex.includes(index)
+    }), _defineProperty({}, e(_templateObject || (_templateObject = _taggedTemplateLiteral(["hide-arrow"]))), index === '__el__more'), props.className),
+    onClick: handleSubMenuItemClick,
+    style: props.style,
+    role: "menuitem"
+  }, mode === 'horizontal' ? /*#__PURE__*/React.createElement(Tooltip, {
+    ref: tooltipRef,
+    disabled: disabled,
+    className: e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["title"]))),
+    trigger: level > 1 ? 'hover' : menuTrigger,
+    popperClass: classNames(is('pure'), popperClass),
+    popperStyle: themeStyle,
+    offset: popperOffset !== null && popperOffset !== void 0 ? popperOffset : props.popperOffset,
+    showAfter: level > 1 ? 0 : showTimeout !== null && showTimeout !== void 0 ? showTimeout : props.showTimeout,
+    hideAfter: hideTimeout !== null && hideTimeout !== void 0 ? hideTimeout : props.hideTimeout,
+    unmountOnExit: false,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    content: /*#__PURE__*/React.createElement(MenuContext.Provider, {
+      value: _objectSpread({
+        activeIndex: activeIndex,
+        parentIndex: [].concat(_toConsumableArray(parentIndex), [index]),
+        mode: mode,
+        menuTrigger: menuTrigger,
+        handleSubMenuClick: hideSubMenu,
+        addItems: addItems,
+        addSubMenu: addSubMenu,
+        showTimeout: showTimeout,
+        hideTimeout: hideTimeout,
+        themeStyle: themeStyle,
+        popperOffset: popperOffset
+      }, ohter)
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classNames(mm(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["horizontal"]))), mm(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["popup-container"]))))
+    }, /*#__PURE__*/React.createElement("ul", {
+      className: "el-menu el-menu--popup el-menu--popup-bottom-start",
+      style: {
+        '--el-menu-level': level
+      }
+    }, props.children))),
+    showArrow: false,
+    placement: level > 1 ? 'right-start' : 'bottom-start',
+    effect: "light"
+  }, /*#__PURE__*/React.createElement("div", null, title, /*#__PURE__*/React.createElement(Icon, {
+    className: e(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["icon-arrow"]))),
+    name: level > 1 ? 'angle-right' : 'angle-down',
+    prefix: "fal",
+    style: {
+      transform: open ? 'rotateZ(180deg)' : 'none'
+    }
+  }))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: classNames(e(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["title"]))))
+  }, title, /*#__PURE__*/React.createElement(Icon, {
+    className: e(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["icon-arrow"]))),
+    name: "angle-down",
+    prefix: "fal",
+    style: {
+      transform: open ? 'rotateZ(180deg)' : 'none'
+    }
+  })), /*#__PURE__*/React.createElement(Transition, {
+    name: "el-menu-collapse",
+    nodeRef: ulRef,
+    disabled: disabled,
+    duration: 300,
+    visible: open,
+    beforeEnter: beforeEnter,
+    onEnter: onEnter,
+    afterEnter: afterEnter,
+    beforeLeave: beforeLeave,
+    onLeave: onLeave,
+    afterLeave: afterLeave
+  }, /*#__PURE__*/React.createElement("ul", {
+    ref: ulRef,
+    className: classNames(mb(), mm(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["inline"])))),
+    style: {
+      '--el-menu-level': level
+    }
+  }, /*#__PURE__*/React.createElement(MenuContext.Provider, {
+    value: _objectSpread({
+      activeIndex: activeIndex,
+      parentIndex: [].concat(_toConsumableArray(parentIndex), [index]),
+      mode: mode,
+      menuTrigger: menuTrigger,
+      onOpen: onOpen,
+      onClose: onClose,
+      addItems: addItems,
+      addSubMenu: addSubMenu,
+      handleSubMenuClick: hideSubMenu,
+      showTimeout: showTimeout,
+      hideTimeout: hideTimeout,
+      themeStyle: themeStyle,
+      popperOffset: popperOffset
+    }, ohter)
+  }, props.children)))));
+};
+export default SubMenu;

package/dist/Menu/SubMenuCollapseTransition.d.ts

@@ -0,0 +1,6 @@
+export declare const beforeEnter: (el: any) => void;
+export declare const onEnter: (el: HTMLElement) => void;
+export declare const afterEnter: (el: HTMLElement) => void;
+export declare const beforeLeave: (el: any) => void;
+export declare const onLeave: (el: any) => void;
+export declare const afterLeave: (el: any) => void;

package/dist/Menu/SubMenuCollapseTransition.js

@@ -0,0 +1,52 @@
+import { addClass, removeClass } from 'dom-lib';
+export var beforeEnter = function beforeEnter(el) {
+  el.style.height = '0';
+  el.style.opacity = '0';
+};
+export var onEnter = function onEnter(el) {
+  addClass(el, 'collapse-transition');
+  el.dataset.oldOverflow = el.style.overflow;
+  if (el.scrollHeight !== 0) {
+    el.style.height = "".concat(el.scrollHeight, "px");
+  } else {
+    el.style.height = '';
+  }
+  el.style.overflow = 'hidden';
+  el.style.opacity = '1';
+  addClass(closest(el, 'li'), 'open');
+};
+export var afterEnter = function afterEnter(el) {
+  removeClass(el, 'collapse-transition');
+  el.style.height = '';
+  el.style.overflow = el.dataset.oldOverflow;
+};
+export var beforeLeave = function beforeLeave(el) {
+  addClass(el, 'collapse-transition');
+  if (!el.dataset) {
+    el.dataset = {};
+  }
+  el.dataset.oldOverflow = el.style.overflow;
+  el.style.height = "".concat(el.scrollHeight, "px");
+  el.style.overflow = 'hidden';
+  el.style.margin = 0;
+};
+export var onLeave = function onLeave(el) {
+  el.style.transitionProperty = 'height';
+  el.style.height = 0;
+};
+export var afterLeave = function afterLeave(el) {
+  el.style.height = '';
+  el.style.overflow = el.dataset.oldOverflow;
+  el.style.display = '';
+  removeClass(closest(el, 'li'), 'open');
+};
+var closest = function closest(el, selector) {
+  var matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
+  while (el) {
+    if (matchesSelector.call(el, selector)) {
+      break;
+    }
+    el = el.parentElement;
+  }
+  return el;
+};

package/dist/Menu/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Menu } from './Menu';
+export { default as MenuItem } from './MenuItem';
+export { default as MenuItemGroup } from './MenuItemGroup';
+export { default as SubMenu } from './SubMenu';
+export type { MenuCloseEvent, MenuItemClicked, MenuItemGroupProps, MenuItemProps, MenuItemRegistered, MenuOpenEvent, MenuProps, MenuRef, MenuSelectEvent, SubMenuProps, } from './typings';

package/dist/Menu/index.js

@@ -0,0 +1,4 @@
+export { default as Menu } from "./Menu";
+export { default as MenuItem } from "./MenuItem";
+export { default as MenuItemGroup } from "./MenuItemGroup";
+export { default as SubMenu } from "./SubMenu";

package/dist/Menu/typings.d.ts

@@ -0,0 +1,121 @@
+import React from 'react';
+import { IconName } from '../Icon';
+import { BaseProps, NativeProps } from '../types/common';
+export interface MenuRef {
+    open: MenuOpenEvent;
+    close: MenuCloseEvent;
+}
+export interface MenuProps extends BaseProps, NativeProps<'--el-menu-active-color' | '--el-menu-text-color' | '--el-menu-hover-text-color' | '--el-menu-bg-color' | '--el-menu-hover-bg-color' | '--el-menu-item-height' | '--el-menu-sub-item-height' | '--el-menu-horizontal-height' | '--el-menu-horizontal-sub-item-height' | '--el-menu-item-font-size' | '--el-menu-item-hover-fill' | '--el-menu-border-color' | '--el-menu-base-level-padding' | '--el-menu-level-padding' | '--el-menu-icon-width'> {
+    /** 菜单展示模式 */
+    mode?: 'horizontal' | 'vertical';
+    /** 页面加载时默认激活菜单的 index */
+    defaultActive?: string;
+    /** 是否水平折叠收起菜单（仅在 mode 为 vertical 时可用） */
+    collapse?: boolean;
+    /** 是否省略多余的子项（仅在横向模式生效） */
+    ellipsis?: boolean;
+    /** 自定义省略图标 (仅在水平模式下可用)	 */
+    ellipsisIcon?: string | React.ReactElement;
+    /** 弹出层的偏移量(对所有子菜单有效) */
+    popperOffset?: number;
+    /** 默认打开的 subMenu 的 index 的数组 */
+    defaultOpeneds?: string[];
+    /** 是否只保持一个子菜单的展开 */
+    uniqueOpened?: boolean;
+    /** 子菜单打开的触发方式，只在 mode 为 horizontal 时有效 */
+    menuTrigger?: 'hover' | 'click';
+    /** 是否启用 vue-router 模式。 启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 defaultActive 来设置加载时的激活项。 */
+    router?: boolean;
+    /** 是否开启折叠动画 */
+    collapseTransition?: boolean;
+    /** 是Tooltip 主题，内置了 dark / light 两种主题，当菜单折叠时生效。 */
+    popperEffect?: 'dark' | 'light' | string;
+    /** 可选，单击外部时是否折叠菜单 */
+    closeOnClickOutside?: boolean;
+    /** 为 popper 添加类名 */
+    popperClass?: string;
+    /** 菜单出现前的延迟 */
+    showTimeout?: number;
+    /** 菜单消失前的延迟 */
+    hideTimeout?: number;
+    /** 菜单激活回调 */
+    onSelect?: MenuSelectEvent;
+    /** sub-menu 展开的回调 */
+    onOpen?: MenuSelectEvent;
+    /** sub-menu 收起的回调 */
+    onClose?: MenuSelectEvent;
+}
+export interface SubMenuProps extends BaseProps, NativeProps {
+    /** 唯一标志 */
+    index: string;
+    title: string | React.ReactElement;
+    /** 为 popper 添加类名 */
+    popperClass?: string;
+    /** 子菜单出现之前的延迟，(继承 menu 的 `showTimeout` 配置) */
+    showTimeout?: number;
+    /** 子菜单消失之前的延迟，(继承 menu 的 `hideTimeout` 配置) */
+    hideTimeout?: number;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否将弹出菜单挂载到 body 上，第一级 SubMenu 默认值为 true，其他 SubMenus 的值为 false */
+    appendToBody?: boolean;
+    /** 弹出窗口的偏移量 (覆盖 `popper`的菜单) */
+    popperOffset?: number;
+    /** 父菜单展开且子菜单关闭时的图标， `expandCloseIcon` 和 `expandOpenIcon` 需要一起配置才能生效 */
+    expandCloseIcon?: IconName | React.ReactElement;
+    /** 父菜单展开且子菜单打开时的图标， `expandOpenIcon` 和 `expandCloseIcon` 需要一起配置才能生效 */
+    expandOpenIcon?: IconName | React.ReactElement;
+    /** 父菜单收起且子菜单关闭时的图标， `collapseCloseIcon` 和 `collapseOpenIcon` 需要一起配置才能生效 */
+    collapseCloseIcon?: IconName | React.ReactElement;
+    /** 父菜单收起且子菜单打开时的图标， `collapseOpenIcon` 和 `collapseCloseIcon` 需要一起配置才能生效 */
+    collapseOpenIcon?: IconName | React.ReactElement;
+}
+export interface MenuItemProps extends BaseProps, NativeProps {
+    /** 唯一标志 */
+    index: string;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** react-router-dom 路由位置参数 */
+    route?: string;
+    /** 点击菜单项时回调函数, 参数为菜单项实例 */
+    onClick?: (item: MenuItemRegistered) => void;
+}
+export interface MenuItemGroupProps extends BaseProps, NativeProps {
+    /** 组标题 */
+    title: string;
+}
+/**
+ * @param index index of activated menu
+ * @param indexPath index path of activated menu
+ * @param item the selected menu item
+ * @param routerResult result returned by `vue-router` if `router` is enabled
+ */
+export type MenuSelectEvent = (index: string, indexPath: string[], item: MenuItemClicked) => void;
+/**
+ * @param index index of expanded sub-menu
+ * @param indexPath index path of expanded sub-menu
+ */
+export type MenuOpenEvent = (index: string, indexPath: string[]) => void;
+/**
+ * @param index index of collapsed sub-menu
+ * @param indexPath index path of collapsed sub-menu
+ */
+export type MenuCloseEvent = (index: string, indexPath: string[]) => void;
+export interface MenuItemRegistered {
+    index: string;
+    indexPath: string[];
+    active?: boolean;
+}
+export interface MenuItemClicked {
+    index: string;
+    indexPath: string[];
+    route?: string;
+}
+export interface SubMenuProvider {
+    index: string;
+    indexPath: string[];
+    /** 打开菜单 */
+    openMenu: MenuOpenEvent;
+    /** 关闭菜单 */
+    closeMenu: MenuCloseEvent;
+}

package/dist/Menu/typings.js

@@ -0,0 +1 @@
+export {};

package/dist/Menu/useEllipsis.d.ts

@@ -0,0 +1,6 @@
+import { RefObject } from 'react';
+import { MenuProps } from './typings';
+declare const useEllipsis: (menuRef: RefObject<HTMLUListElement | null>, props: MenuProps) => {
+    sliceIndex: number;
+};
+export default useEllipsis;

package/dist/Menu/useEllipsis.js

@@ -0,0 +1,82 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useEffect, useRef, useState } from 'react';
+import { useResizeObserver } from "../hooks/useResizeObserver";
+var useEllipsis = function useEllipsis(menuRef, props) {
+  var _useState = useState(-1),
+    _useState2 = _slicedToArray(_useState, 2),
+    sliceIndex = _useState2[0],
+    setSliceIndex = _useState2[1];
+  var isFirstTimeRender = useRef(true);
+  var calcMenuItemWidth = function calcMenuItemWidth(menuItem) {
+    var computedStyle = getComputedStyle(menuItem);
+    var marginLeft = Number.parseInt(computedStyle.marginLeft, 10);
+    var marginRight = Number.parseInt(computedStyle.marginRight, 10);
+    return menuItem.offsetWidth + marginLeft + marginRight || 0;
+  };
+  var calcSliceIndex = function calcSliceIndex() {
+    var _menuRef$current$chil, _menuRef$current;
+    if (!menuRef.current) {
+      return -1;
+    }
+    var items = Array.from((_menuRef$current$chil = (_menuRef$current = menuRef.current) === null || _menuRef$current === void 0 ? void 0 : _menuRef$current.childNodes) !== null && _menuRef$current$chil !== void 0 ? _menuRef$current$chil : []).filter(function (item) {
+      return item.nodeName !== '#text' || item.nodeValue;
+    });
+    var moreItemWidth = 64;
+    var computedMenuStyle = getComputedStyle(menuRef.current);
+    var paddingLeft = Number.parseInt(computedMenuStyle.paddingLeft, 10);
+    var paddingRight = Number.parseInt(computedMenuStyle.paddingRight, 10);
+    var menuWidth = menuRef.current.clientWidth - paddingLeft - paddingRight;
+    var calcWidth = 0;
+    var _sliceIndex = 0;
+    items.forEach(function (item, index) {
+      if (item.nodeName === '#comment') {
+        return;
+      }
+      calcWidth += calcMenuItemWidth(item);
+      if (calcWidth <= menuWidth - moreItemWidth) {
+        _sliceIndex = index + 1;
+      }
+    });
+    return _sliceIndex === items.length ? -1 : _sliceIndex;
+  };
+  var debounce = function debounce(fn) {
+    var wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 33.34;
+    var timmer;
+    return function () {
+      timmer && clearTimeout(timmer);
+      timmer = setTimeout(function () {
+        fn();
+      }, wait);
+    };
+  };
+  var handleResize = function handleResize() {
+    if (props.mode === 'horizontal' && props.ellipsis) {
+      // if (sliceIndex === calcSliceIndex()) {
+      //     return;
+      // }
+      var callback = function callback() {
+        setSliceIndex(-1);
+        requestAnimationFrame(function () {
+          setSliceIndex(calcSliceIndex());
+        });
+      };
+      // execute callback directly when first time resize to avoid shaking
+      isFirstTimeRender.current ? callback() : debounce(callback)();
+      isFirstTimeRender.current = false;
+    }
+  };
+  var _useResizeObserver = useResizeObserver(menuRef, handleResize),
+    resizeStopper = _useResizeObserver.stop;
+  useEffect(function () {
+    return resizeStopper;
+  }, []);
+  return {
+    sliceIndex: sliceIndex
+  };
+};
+export default useEllipsis;

package/dist/Popper/Popper.js

@@ -1,6 +1,6 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _templateObject;
-var _excluded = ["id", "visible", "onDestroy", "referenceElement", "children", "appendToBody", "appendTo", "className", "popperClass", "showArrow", "popperStyle", "popperInstRef", "onMouseEnter", "onMouseLeave", "effect"];
+var _excluded = ["visible", "onDestroy", "referenceElement", "children", "appendToBody", "appendTo", "className", "popperClass", "showArrow", "popperStyle", "popperInstRef", "onMouseEnter", "onMouseLeave", "effect"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -40,8 +40,6 @@ var Popper = /*#__PURE__*/forwardRef(function (props, ref) {
     strategy: 'absolute'
   }, props);
   var _props = props,
-    _props$id = _props.id,
-    id = _props$id === void 0 ? randomCode(5) : _props$id,
     visible = _props.visible,
     onDestroy = _props.onDestroy,
     referenceElement = _props.referenceElement,
@@ -62,6 +60,13 @@ var Popper = /*#__PURE__*/forwardRef(function (props, ref) {
   var _partitionAnimationPr = partitionAnimationProps(rest),
     _partitionAnimationPr2 = _slicedToArray(_partitionAnimationPr, 1),
     transitionProps = _partitionAnimationPr2[0];
+  var id = useMemo(function () {
+    var _props$id;
+    return (_props$id = props.id) !== null && _props$id !== void 0 ? _props$id : randomCode(5);
+  }, [props.id]);
+  var zIndex = useMemo(function () {
+    return PopupManager.nextZIndex();
+  }, []);
   var _useClassNames = useClassNames('popper'),
     b = _useClassNames.b,
     e = _useClassNames.e,
@@ -150,7 +155,7 @@ var Popper = /*#__PURE__*/forwardRef(function (props, ref) {
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave,
       style: _objectSpread(_objectSpread(_objectSpread({}, styles.popper), popperStyle), {}, {
-        zIndex: PopupManager.nextZIndex()
+        zIndex: zIndex
       })
     }, attributes.popper, {
       ref: setPopperElement

package/dist/Popper/popperOptions.d.ts

@@ -1,4 +1,4 @@
-import { Options, Placement, StrictModifiers } from '@popperjs/core';
+import { Options, Placement, State, StrictModifiers } from '@popperjs/core';
 interface IUsePopperProps {
     popperOptions?: Options;
     arrowOffset?: number;
@@ -17,7 +17,7 @@ export default function usePopperOptions(props: IUsePopperProps, arrowElement: a
     modifiers: StrictModifiers[];
     placement: Placement;
     strategy: import("@popperjs/core").PositioningStrategy;
-    onFirstUpdate?: (arg0: Partial<import("@popperjs/core").State>) => void;
+    onFirstUpdate?: (arg0: Partial<State>) => void;
 };
 export declare function buildModifier(props: ModifierProps, externalModifiers?: StrictModifiers[]): StrictModifiers[];
 export {};

package/dist/Popper/popperOptions.js

@@ -10,6 +10,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import fromPairs from 'lodash/fromPairs';
 import { useMemo } from 'react';
 export default function usePopperOptions(props, arrowElement) {
   return useMemo(function () {
@@ -28,6 +29,32 @@ export default function usePopperOptions(props, arrowElement) {
     });
   }, [arrowElement, props.arrowOffset, props.gpuAcceleration, props.offset, props.placement, props.popperOptions]);
 }
+function deriveState(state) {
+  var elements = Object.keys(state.elements);
+  var styles = fromPairs(elements.map(function (element) {
+    return [element, state.styles[element] || {}];
+  }));
+  var attributes = fromPairs(elements.map(function (element) {
+    return [element, state.attributes[element]];
+  }));
+  return {
+    styles: styles,
+    attributes: attributes
+  };
+}
+var states = {
+  styles: {
+    popper: {
+      position: 'absolute',
+      left: '0',
+      top: '0'
+    },
+    arrow: {
+      position: 'absolute'
+    }
+  },
+  attributes: {}
+};
 export function buildModifier(props) {
   var externalModifiers = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   var arrow = props.arrow,
@@ -50,6 +77,16 @@ export function buildModifier(props) {
         right: 5
       }
     }
+  }, {
+    name: 'updateState',
+    enabled: true,
+    phase: 'write',
+    fn: function fn(_ref) {
+      var state = _ref.state;
+      var derivedState = deriveState(state);
+      Object.assign(states, derivedState);
+    },
+    requires: ['computeStyles']
   }, {
     name: 'flip',
     options: {
@@ -67,11 +104,13 @@ export function buildModifier(props) {
       gpuAcceleration: gpuAcceleration,
       adaptive: gpuAcceleration
     }
-  }, {
+  },
+  // { name: 'applyStyles', enabled: false },
+  {
     name: 'eventListeners',
     enabled: true,
     options: {
-      scroll: true,
+      scroll: false,
       resize: true
     }
   }