@ucloud-pccl/react-components
Version:
UCloud pccl react components
98 lines (97 loc) • 5.53 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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
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 _Popover = _interopRequireDefault(require("../../components/Popover"));
var _Collapse = _interopRequireDefault(require("../../components/Collapse"));
var _Checkbox = _interopRequireDefault(require("../../components/Checkbox"));
var _placements = require("../../components/Popover/placements");
var _group = require("../../hooks/group");
var _style = require("./style");
var _MenuContext = _interopRequireDefault(require("./MenuContext"));
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; }
var placements = (0, _placements.getPlacements)(0);
var getPopoverContainer = function getPopoverContainer(triggerNode) {
var _triggerNode$parentNo;
(0, _newArrowCheck2.default)(this, _this);
return (_triggerNode$parentNo = triggerNode.parentNode) === null || _triggerNode$parentNo === void 0 ? void 0 : _triggerNode$parentNo.parentNode;
}.bind(void 0);
var SubMenu = function SubMenu(_ref) {
var _this2 = this;
(0, _newArrowCheck2.default)(this, _this);
var title = _ref.title,
_ref$styleType = _ref.styleType,
styleType = _ref$styleType === void 0 ? 'collapse' : _ref$styleType,
subMenuKey = _ref.subMenuKey,
children = _ref.children,
className = _ref.className,
disabled = _ref.disabled,
isFirst = _ref.isFirst,
isLast = _ref.isLast;
var menuContext = (0, _react.useContext)(_MenuContext.default);
var _useSubGroup = (0, _group.useSubGroup)(subMenuKey || '', menuContext),
_useSubGroup2 = (0, _slicedToArray2.default)(_useSubGroup, 2),
selectedStatus = _useSubGroup2[0],
toggleAllItems = _useSubGroup2[1];
var multiple = menuContext.multiple,
locale = menuContext.locale;
var selectAllCheckbox = multiple && /*#__PURE__*/_react.default.createElement("div", {
className: (0, _classnames.default)(_style.selectallWrapCls, disabled && _style.disabledCls)
}, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
size: "lg",
className: _style.checkboxCls,
checked: selectedStatus === 'ALL',
indeterminate: selectedStatus === 'PART',
onChange: toggleAllItems,
disabled: disabled
}, locale.selectAll));
return styleType === 'collapse' ? /*#__PURE__*/_react.default.createElement(_Collapse.default.Panel, {
className: (0, _classnames.default)(_style.collapseWrapCls, className, isFirst && _style.firstCls, isLast && _style.lastCls),
title: function (_ref2) {
(0, _newArrowCheck2.default)(this, _this2);
var open = _ref2.open;
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _classnames.default)(_style.collapseTitleCls, selectedStatus !== 'NONE' && _style.selectedCls)
}, title, /*#__PURE__*/_react.default.createElement(_style.SubMenuIcon, {
size: "14px",
type: open ? 'arrow-up' : 'arrow-down'
}));
}.bind(this),
panelKey: subMenuKey
}, selectAllCheckbox, children) : /*#__PURE__*/_react.default.createElement(_Popover.default, {
popup: /*#__PURE__*/_react.default.createElement(_style.PopupMenuWrap, {
className: _style.popupWrapCls
}, /*#__PURE__*/_react.default.createElement("div", {
className: _style.popupContentCls
}, selectAllCheckbox, children)),
getPopupContainer: getPopoverContainer,
builtinPlacements: placements,
placement: "rightTop"
}, /*#__PURE__*/_react.default.createElement("div", {
className: (0, _classnames.default)(className, isFirst && _style.firstCls, isLast && _style.lastCls)
}, /*#__PURE__*/_react.default.createElement("div", {
className: (0, _classnames.default)(_style.popupTitleCls, selectedStatus !== 'NONE' && _style.selectedCls)
}, title, /*#__PURE__*/_react.default.createElement(_style.SubMenuIcon, {
type: "triangle-right"
}))));
}.bind(void 0);
SubMenu.propTypes = {
title: _propTypes.default.node.isRequired,
styleType: _propTypes.default.oneOf(['collapse', 'popover']),
disabled: _propTypes.default.bool,
isFirst: _propTypes.default.bool,
isLast: _propTypes.default.bool
};
var MemoSubMenu = /*#__PURE__*/_react.default.memo(SubMenu);
MemoSubMenu.isMenuSubMenu = true;
var _default = exports.default = MemoSubMenu;