UNPKG

@choerodon/master

Version:
138 lines (121 loc) 6.36 kB
import "choerodon-ui/lib/popover/style"; import _Popover from "choerodon-ui/lib/popover"; import "choerodon-ui/pro/lib/button/style"; import _Button from "choerodon-ui/pro/lib/button"; import "choerodon-ui/lib/icon/style"; import _Icon from "choerodon-ui/lib/icon"; import "choerodon-ui/lib/menu/style"; import _Menu from "choerodon-ui/lib/menu"; import "choerodon-ui/pro/lib/tooltip/style"; import _Tooltip from "choerodon-ui/pro/lib/tooltip"; 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(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } import React, { useCallback, useMemo, useState } from 'react'; import { flatten, map } from 'lodash'; import classNames from 'classnames'; import { Permission } from "../permission"; import "./index.less"; var prefixCls = 'c7ncd-btnGroup'; var BtnGroup = function BtnGroup(props) { var _props$color = props.color, color = _props$color === void 0 ? 'default' : _props$color, icon = props.icon, btnItems = props.btnItems, _props$placement = props.placement, placement = _props$placement === void 0 ? 'bottomLeft' : _props$placement, _props$trigger = props.trigger, trigger = _props$trigger === void 0 ? 'click' : _props$trigger, _props$display = props.display, display = _props$display === void 0 ? true : _props$display, name = props.name, _props$disabled = props.disabled, triggerBtnDisabled = _props$disabled === void 0 ? false : _props$disabled, renderCustomDropDownPanel = props.renderCustomDropDownPanel; var _useState = useState(false), _useState2 = _slicedToArray(_useState, 2), popverVisible = _useState2[0], setVisible = _useState2[1]; var renderMenu = useCallback(function () { if (!(btnItems === null || btnItems === void 0 ? void 0 : btnItems.length)) { return null; } return map(btnItems, function (itemProps, index) { var itemName = itemProps.name, handler = itemProps.handler, permissions = itemProps.permissions, disabled = itemProps.disabled, group = itemProps.group, tooltipsConfig = itemProps.tooltipsConfig; var Item = /*#__PURE__*/React.createElement(_Menu.Item, { disabled: disabled, key: "".concat(name, "-").concat(itemName, "-").concat(index, "-").concat(group) }, /*#__PURE__*/React.createElement(_Tooltip, tooltipsConfig, /*#__PURE__*/React.createElement("span", { role: "none", onClick: disabled ? function () {} : handler }, itemName))); if (permissions === null || permissions === void 0 ? void 0 : permissions.length) { return /*#__PURE__*/React.createElement(Permission, { defaultChildren: /*#__PURE__*/React.cloneElement(Item, { style: { display: 'none' } }), service: permissions }, Item); } return Item; }); }, [btnItems, name]); var renderContent = useCallback(function () { if (renderCustomDropDownPanel && typeof renderCustomDropDownPanel === 'function') { return popverVisible && /*#__PURE__*/React.createElement("div", { className: "".concat(prefixCls, "-customPanel") }, renderCustomDropDownPanel(function () { var isVisible = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false; var e = arguments.length > 1 ? arguments[1] : undefined; e && e.stopPropagation(); setVisible(isVisible); })); } return renderMenu(); }, [popverVisible, renderCustomDropDownPanel, renderMenu]); var menu = useMemo(function () { return /*#__PURE__*/React.createElement(_Menu, { onClick: function onClick() { return setVisible(false); } }, renderContent()); }, [renderContent]); var dropdownBtnCls = classNames(prefixCls); var dropDownIconCls = classNames("".concat(prefixCls, "-dropdownIcon"), "".concat(prefixCls, "-dropdownIcon-").concat(color)); if (!display) { return null; } return /*#__PURE__*/React.createElement(Permission, { service: flatten(btnItems === null || btnItems === void 0 ? void 0 : btnItems.map(function (item) { return (item === null || item === void 0 ? void 0 : item.permissions) || []; })) }, /*#__PURE__*/React.createElement(_Popover, { visible: popverVisible, content: menu, trigger: trigger, placement: placement, overlayClassName: "".concat(prefixCls, "-popver"), onVisibleChange: function onVisibleChange(visible) { return setVisible(visible); } }, /*#__PURE__*/React.createElement(_Button, { className: dropdownBtnCls, color: color, icon: icon, disabled: triggerBtnDisabled }, /*#__PURE__*/React.createElement("span", null, name), /*#__PURE__*/React.createElement(_Icon, { className: dropDownIconCls, type: "expand_more" })))); }; export default BtnGroup;