DropdownMenu 下拉菜单

默认效果

鼠标 Hover效果

dropdown下拉菜单文档
https://ant-design.antgroup.com/components/dropdown-cn

import React from "react";
import { node, object, string } from "prop-types";
import { Dropdown } from 'antd';
import ChildNode from "./ChildNode";
const items = [
  {
    key: '1',
    label: '待开始',
  },
  {
    key: '2',
    label: '进行中',
  },
  {
    key: '3',
    label: '已完成',
  },
];
DropDownMenu.propTypes = {
  element: node,
  buttonProps: object,
  trigger: string,
};
DropDownMenu.defaultProps = {
  trigger: 'click',
}
function DropDownMenu(props) {
  const {
    element,
    buttonProps,
    trigger,
  } = props;
  const handleClick = () => {
  }
  return (
    <Dropdown
      menu={{
        items,
        selectable: true, // 支持选择
        defaultSelectedKeys: ['3'],
      }}
    >
      <ChildNode
        element={element}
        buttonProps={buttonProps}
        trigger={trigger}
      />
    </Dropdown>
  );
}
export default DropDownMenu;

merge 属性

lodash.merge 合并参数

function App() {
  const handleClick = ({ item, key, keyPath, domEvent }) => {
    console.log({ item, key, keyPath, domEvent })
  }
  return (
      <DropDownList
      onClick={handleClick}
      menu={{
        items: [
          {key: 'nj', label: '南京'}, 
          {key: 'sh', label: '上海'}
        ]
      }}
      // element={<a>批处理</a>}
    />
  )
}

ChildNode

子节点支持动态参数

import React, { cloneElement, isValidElement } from "react";
import { node, object } from "prop-types";
import { Button } from "antd";
import { DownOutlined } from "@ant-design/icons";
import { isObject } from "lodash-es";
/**
 * dropdown 有额外的属性，需要传递到子节点
 * className: "ant-dropdown-trigger ant-dropdown-open"
 * onMouseEnter
 * onMouseLeave
 * onClick
 */
ChildNode.propTypes = {
  element: node,
  buttonProps: object,
};
ChildNode.defaultProps = {
  buttonProps: {
    type: "primary",
    children: "批量操作",
    icon: <DownOutlined />
  },
};
function ChildNode(props) {
  const {
    element,
    buttonProps,
    ...restProps
  } = props;
  // element优先级大于 buttonProps
  if (isValidElement(element)) {
    return cloneElement(element, restProps);
  }
  // 默认显示 Button
  if (isObject(buttonProps)) {
    const { children, icon, ...restButton } = buttonProps;
    return (
      <Button
        {...restButton}
        {...restProps}
      >
        {children}{icon}
      </Button>
    );
  }
  return null;
}
// function propsEqual(prevProps, nextProps) {
//   return isEqual(prevProps, nextProps)
// }
// export default memo(ChildNode, propsEqual);
export default ChildNode;