@ucloud-pccl/react-components
Version:
UCloud pccl react components
231 lines (230 loc) • 11 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _Button = _interopRequireDefault(require("../../components/Button"));
var _Menu = _interopRequireDefault(require("../../components/Menu"));
var _Popover = _interopRequireDefault(require("../../components/Popover"));
var _Tooltip = _interopRequireDefault(require("../../components/Tooltip"));
var _Combine = _interopRequireDefault(require("../../components/Combine"));
var _SvgIcon = _interopRequireDefault(require("../../components/SvgIcon"));
var _usePopoverConfig = _interopRequireDefault(require("../../hooks/usePopoverConfig"));
var _style = require("./style");
var _excluded = ["onClick", "disabled", "handleHide"],
_excluded2 = ["label", "tooltip"],
_excluded3 = ["label", "disabled", "onClick"],
_excluded4 = ["actionList", "exposeCount", "size", "smart", "buttonStyleType", "popoverProps", "dropdownButton", "className", "dropdownNoButton"];
var _this = void 0;
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
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) { (0, _defineProperty2.default)(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; }
var SubMenuItem = function SubMenuItem(_ref) {
var _this2 = this;
(0, _newArrowCheck2.default)(this, _this);
var onClick = _ref.onClick,
disabled = _ref.disabled,
handleHide = _ref.handleHide,
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
var clickHandler = (0, _react.useCallback)(function (e) {
(0, _newArrowCheck2.default)(this, _this2);
if (disabled) return;
if (onClick) {
onClick(e);
handleHide === null || handleHide === void 0 || handleHide();
}
}.bind(this), [disabled, handleHide, onClick]);
return /*#__PURE__*/_react.default.createElement(_Menu.default.Item, (0, _extends2.default)({
onClick: clickHandler,
disabled: disabled
}, rest));
}.bind(void 0);
SubMenuItem.propTypes = {
disabled: _propTypes.default.bool,
onClick: _propTypes.default.func,
handleHide: _propTypes.default.func,
children: _propTypes.default.node.isRequired
};
var renderActionButtonList = function renderActionButtonList(_ref2) {
var _this3 = this;
(0, _newArrowCheck2.default)(this, _this);
var list = _ref2.list,
size = _ref2.size,
buttonStyleType = _ref2.buttonStyleType;
return list.map(function (info, i) {
(0, _newArrowCheck2.default)(this, _this3);
var label = info.label,
tooltip = info.tooltip,
rest = (0, _objectWithoutProperties2.default)(info, _excluded2);
var button = /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({
key: i,
size: size,
styleType: buttonStyleType,
fakeDisabled: !!tooltip
}, rest), label);
return tooltip ? typeof tooltip === 'string' || /*#__PURE__*/_react.default.isValidElement(tooltip) ? /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
popup: tooltip,
placement: "topRight",
key: i
}, button) : /*#__PURE__*/_react.default.createElement(_Tooltip.default, (0, _extends2.default)({
placement: "topRight",
key: i
}, tooltip), button) : button;
}.bind(this));
}.bind(void 0);
var ActionMenu = function ActionMenu(_ref3) {
var _this4 = this;
(0, _newArrowCheck2.default)(this, _this);
var list = _ref3.list,
size = _ref3.size,
buttonStyleType = _ref3.buttonStyleType,
dropdownButton = _ref3.dropdownButton,
popoverProps = _ref3.popoverProps,
dropdownNoButton = _ref3.dropdownNoButton;
var popoverConfigProps = (0, _usePopoverConfig.default)();
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
visible = _useState2[0],
setVisible = _useState2[1];
var hide = (0, _react.useCallback)(function () {
(0, _newArrowCheck2.default)(this, _this4);
setVisible(false);
}.bind(this), []);
if (!list.length) return null;
var _renderList = function renderList(list) {
var _this5 = this;
(0, _newArrowCheck2.default)(this, _this4);
return list.map(function (info, i) {
(0, _newArrowCheck2.default)(this, _this5);
if (info.children) {
return /*#__PURE__*/_react.default.createElement(_Menu.default.SubMenu, {
key: i,
styleType: "popover",
title: info.label
}, _renderList(info.children));
}
var label = info.label,
disabled = info.disabled,
onClick = info.onClick,
rest = (0, _objectWithoutProperties2.default)(info, _excluded3);
return /*#__PURE__*/_react.default.createElement(SubMenuItem, (0, _extends2.default)({
key: i,
disabled: disabled,
onClick: onClick,
handleHide: hide
}, rest), label);
}.bind(this));
}.bind(this);
return /*#__PURE__*/_react.default.createElement(_Popover.default, (0, _extends2.default)({
trigger: ['click'],
popup: /*#__PURE__*/_react.default.createElement(_Menu.default, {
selectable: false,
customStyle: {
maxHeight: '380px'
}
}, _renderList(list))
}, popoverConfigProps, popoverProps, {
visible: visible,
onVisibleChange: setVisible
}), dropdownButton ? typeof dropdownButton === 'string' || /*#__PURE__*/_react.default.isValidElement(dropdownButton) ? dropdownNoButton ? dropdownButton : /*#__PURE__*/_react.default.createElement(_Button.default, {
size: size,
styleType: buttonStyleType
}, dropdownButton) : /*#__PURE__*/_react.default.createElement(_Button.default, dropdownButton) : /*#__PURE__*/_react.default.createElement(_Button.default, {
size: size,
styleType: buttonStyleType,
icon: /*#__PURE__*/_react.default.createElement(_SvgIcon.default, {
type: "ellipsis"
})
}));
}.bind(void 0);
var ActionList = function ActionList(_ref4) {
(0, _newArrowCheck2.default)(this, _this);
var _ref4$actionList = _ref4.actionList,
actionList = _ref4$actionList === void 0 ? [] : _ref4$actionList,
_ref4$exposeCount = _ref4.exposeCount,
exposeCount = _ref4$exposeCount === void 0 ? 3 : _ref4$exposeCount,
_ref4$size = _ref4.size,
size = _ref4$size === void 0 ? 'lg' : _ref4$size,
_ref4$smart = _ref4.smart,
smart = _ref4$smart === void 0 ? true : _ref4$smart,
_ref4$buttonStyleType = _ref4.buttonStyleType,
buttonStyleType = _ref4$buttonStyleType === void 0 ? 'border' : _ref4$buttonStyleType,
popoverProps = _ref4.popoverProps,
dropdownButton = _ref4.dropdownButton,
className = _ref4.className,
dropdownNoButton = _ref4.dropdownNoButton,
rest = (0, _objectWithoutProperties2.default)(_ref4, _excluded4);
var l = actionList.length;
var buttonList, menuList;
if (l > exposeCount + 1) {
buttonList = actionList.slice(0, exposeCount);
menuList = actionList.slice(exposeCount);
} else if (l === exposeCount + 1) {
if (smart) {
buttonList = actionList;
menuList = [];
} else {
buttonList = actionList.slice(0, exposeCount);
menuList = actionList.slice(exposeCount);
}
} else {
buttonList = actionList;
menuList = [];
}
var sharedProps = {
size: size,
buttonStyleType: buttonStyleType
};
return /*#__PURE__*/_react.default.createElement(_Combine.default, (0, _extends2.default)({}, rest, {
className: (0, _classnames.default)(_style.prefixCls, className),
sharedProps: {
size: size
},
spacing: "smart"
}), renderActionButtonList(_objectSpread({
list: buttonList
}, sharedProps)), menuList.length ? /*#__PURE__*/_react.default.createElement(ActionMenu, (0, _extends2.default)({
list: menuList
}, sharedProps, {
dropdownButton: dropdownButton,
popoverProps: popoverProps,
dropdownNoButton: dropdownNoButton
})) : null);
}.bind(void 0);
ActionList.propTypes = {
actionList: _propTypes.default.arrayOf(_propTypes.default.shape({
label: _propTypes.default.node,
onClick: _propTypes.default.func,
children: _propTypes.default.arrayOf(_propTypes.default.shape({
label: _propTypes.default.node,
onClick: _propTypes.default.func,
children: _propTypes.default.arrayOf(_propTypes.default.shape({
label: _propTypes.default.node,
onClick: _propTypes.default.func,
children: _propTypes.default.arrayOf(_propTypes.default.object),
tooltip: _propTypes.default.any,
disabled: _propTypes.default.bool
})),
tooltip: _propTypes.default.any,
disabled: _propTypes.default.bool
})),
tooltip: _propTypes.default.any,
disabled: _propTypes.default.bool
})).isRequired,
exposeCount: _propTypes.default.number,
smart: _propTypes.default.bool,
popoverProps: _propTypes.default.any,
dropdownNoButton: _propTypes.default.bool
};
var _default = exports.default = /*#__PURE__*/_react.default.memo(ActionList);