@jannie-shao/components-antd4/es/dropdown-menu/index.js

基于 Antd 4 的组件封装

import "antd/es/dropdown/style";
import _Dropdown from "antd/es/dropdown";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["className", "trigger", "children", "onClick", "menuItems"];
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { rootPrefix } from "../style/config";
var DropdownMenu = function DropdownMenu(_ref) {
  var _ref$className = _ref.className,
    className = _ref$className === void 0 ? '' : _ref$className,
    trigger = _ref.trigger,
    children = _ref.children,
    onClick = _ref.onClick,
    menuItems = _ref.menuItems,
    props = _objectWithoutPropertiesLoose(_ref, _excluded);
  var _useState = useState(false),
    visible = _useState[0],
    setVisible = _useState[1];
  var _useState2 = useState(0),
    itvId = _useState2[0],
    setItvId = _useState2[1];
  var handleClick = function handleClick(e) {
    setVisible(false);
    onClick(e.key);
  };
  var handleVisibleChange = function handleVisibleChange(v) {
    setVisible(v);
  };
  var handleLeave = function handleLeave() {
    if (itvId) {
      clearTimeout(itvId);
    }
    var tempId = setTimeout(function () {
      return handleVisibleChange(false);
    }, 500);
    setItvId(tempId);
  };
  var handleEnter = function handleEnter() {
    if (itvId) {
      clearTimeout(itvId);
      setItvId(0);
    }
  };
  return /*#__PURE__*/React.createElement("div", {
    className: classnames(rootPrefix + "-dropdown-menu", className),
    onMouseLeave: handleLeave
  }, /*#__PURE__*/React.createElement(_Dropdown, _extends({
    open: visible,
    onOpenChange: handleVisibleChange,
    menu: {
      onClick: handleClick,
      onMouseEnter: handleEnter,
      items: menuItems.map(function (m) {
        return {
          key: m.value,
          label: m.label
        };
      })
    },
    trigger: trigger
  }, props), children));
};
DropdownMenu.propTypes = {
  trigger: PropTypes.string,
  children: PropTypes.node,
  onClick: PropTypes.func,
  menuItems: PropTypes.array
};
DropdownMenu.defaultProps = {
  trigger: 'hover',
  children: /*#__PURE__*/React.createElement(React.Fragment, null),
  onClick: function onClick() {},
  menuItems: []
};
export default DropdownMenu;