@antdp/antdp-ui/esm/ButtonGroupPro/index.js

基于antd封装的组件

import _extends from "@babel/runtime/helpers/extends";
import { DownOutlined } from '@ant-design/icons';
import { AuthorizedBtn } from '@antdp/authorized';
import { Badge, Button, Dropdown, Menu } from 'antd';
import classNames from 'classnames';
import React, { useEffect, useState } from 'react';
import { getMenusItems } from '../utils';
import './index.css';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var ButtonGroupPro = props => {
  var {
    button,
    className
  } = props;
  var [menuDropdownLabel, setmenuDropdownLabel] = useState({
    label: '',
    key: undefined
  });
  var [ButtonandDropdown, setButtonandDropdown] = useState(false);
  useEffect(() => {
    button && button.length > 0 && button.map(item => {
      if (item.ButtonandDropdown) {
        setButtonandDropdown(true);
      }
    });
  }, []);
  var handleMenuClick = function handleMenuClick(menus, idx, e) {
    if (menus === void 0) {
      menus = [];
    }
    menus.forEach((menu, index) => {
      if (String(index) === (e == null ? void 0 : e.key) && menu.onClick) {
        setmenuDropdownLabel({
          label: menu.label,
          key: idx
        });
        menu.onClick();
      }
    });
  };
  var renderMenu = function renderMenu(menus, idx) {
    if (menus === void 0) {
      menus = [];
    }
    var items = getMenusItems(menus);
    return /*#__PURE__*/_jsx(Menu, {
      items: items || [],
      onClick: e => handleMenuClick(menus, idx, e)
    });
  };
  return /*#__PURE__*/_jsx("div", {
    className: classNames('antdp-ButtonGroup', className),
    children: button && button.length > 0 && button.map((item, idx) => {
      var props = _extends({
        key: idx,
        size: 'middle',
        type: item.type || 'default',
        onClick: item.onClick,
        disabled: item.disabled,
        style: {
          margin: ButtonandDropdown ? '0 0 0 -3px' : "0px " + (idx === button.length - 1 ? 0 : 12) + "px 0px 0px"
        }
      }, item);
      var buttondom = /*#__PURE__*/_jsx(Button, _extends({}, props, {
        children: item.label
      }));
      var badgeaParams = item.badge && item.badge === 'dot' ? {
        dot: true
      } : {
        count: item.badge
      };
      // Menu多选菜单
      if (item.menu && item.menu.length > 0) {
        var DropdownButtonDom = /*#__PURE__*/_jsxs(Button, {
          size: "middle",
          type: props.type || 'default',
          style: {
            margin: ButtonandDropdown ? '0 0 0 -3px' : "0px " + (idx === button.length - 1 ? 0 : 12) + "px 0px 0px"
          },
          children: [menuDropdownLabel.key === idx ? menuDropdownLabel.label : item.label, ' ', /*#__PURE__*/_jsx(DownOutlined, {})]
        });
        return item.path ? /*#__PURE__*/_jsx("div", {
          children: /*#__PURE__*/_jsx(Dropdown, {
            dropdownRender: () => renderMenu(item.menu, idx),
            children: DropdownButtonDom
          })
        }, idx) : /*#__PURE__*/_jsx(Dropdown, {
          dropdownRender: () => renderMenu(item.menu, idx),
          children: DropdownButtonDom
        }, idx);
      }
      // 自定义render
      if (item.render) {
        return item.path ? /*#__PURE__*/_jsx(AuthorizedBtn, {
          path: item.path,
          children: item.render(item.label)
        }, idx) : /*#__PURE__*/_jsx("span", {
          children: item.render(item.label)
        }, idx);
      }
      // 单独Button
      if (item.path) {
        return item.badge ? /*#__PURE__*/_jsx(AuthorizedBtn, {
          path: item.path,
          children: /*#__PURE__*/_jsx(Badge, _extends({}, badgeaParams, {
            style: {
              marginTop: '15px'
            },
            children: buttondom
          }))
        }, idx) : /*#__PURE__*/_jsx(AuthorizedBtn, {
          path: item.path,
          children: buttondom
        }, idx);
      } else {
        return item.badge ? /*#__PURE__*/_jsx("span", {
          children: /*#__PURE__*/_jsx(Badge, _extends({}, badgeaParams, {
            style: {
              marginTop: '15px'
            },
            children: buttondom
          }))
        }, idx) : /*#__PURE__*/_jsx(Button, _extends({}, props, {
          children: item.label
        }));
      }
    })
  });
};
export default ButtonGroupPro;