@ucloud-pccl/react-components
Version:
UCloud pccl react components
294 lines (293 loc) • 16 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof3 = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.strictGroupChildrenAsDataSource = exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
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 _Checkbox = _interopRequireDefault(require("../../components/Checkbox"));
var _useLocale = _interopRequireDefault(require("../../components/LocaleProvider/useLocale"));
var _hooks = require("../../components/Collapse/hooks");
var _CollapseContext = _interopRequireDefault(require("../../components/Collapse/CollapseContext"));
var _group4 = require("../../hooks/group");
var _useUncontrolled3 = _interopRequireDefault(require("../../hooks/useUncontrolled"));
var _noop = _interopRequireDefault(require("../../utils/noop"));
var _once = _interopRequireDefault(require("../../utils/once"));
var _useVirtualList3 = _interopRequireDefault(require("../../hooks/useVirtualList"));
var _useSimpleVirtualList3 = _interopRequireDefault(require("../../hooks/useSimpleVirtualList"));
var _style = require("./style");
var _MenuContext = _interopRequireDefault(require("./MenuContext"));
var _zh_CN = _interopRequireDefault(require("./locale/zh_CN"));
var _excluded = ["selectedKeys", "defaultSelectedKeys", "onChange", "selectable", "multiple", "showSelectAll", "disabled", "block", "locale", "className", "children", "dataSource", "collapseProps", "virtualList"];
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" != _typeof3(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 warn = (0, _once.default)(function () {
(0, _newArrowCheck2.default)(this, _this);
return console.warn("Virtual menu only support popover type of SubMenu");
}.bind(void 0));
var strictGroupChildrenAsDataSource = exports.strictGroupChildrenAsDataSource = function strictGroupChildrenAsDataSource(children) {
var _this2 = this;
var globalDisabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
itemTag: 'isItem',
subGroupTag: 'isSubGroup',
itemKeyName: 'itemKey',
subGroupKeyName: 'subGroupKey'
},
itemTag = _ref.itemTag,
subGroupTag = _ref.subGroupTag,
itemKeyName = _ref.itemKeyName,
subGroupKeyName = _ref.subGroupKeyName;
var subGroupMap = new Map();
var childrenMap = new Map();
var _group = function group(children, disabled, prefix) {
var _this3 = this;
(0, _newArrowCheck2.default)(this, _this2);
var validKeys = [];
var disabledKeys = [];
var l = _react.default.Children.count(children);
var renderChildren = [];
_react.default.Children.forEach(children, function (child, i) {
(0, _newArrowCheck2.default)(this, _this3);
var isFirst = i === 0;
var isLast = i === l - 1;
if (/*#__PURE__*/_react.default.isValidElement(child)) {
var _child$type, _child$type2;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
if ((_child$type = child.type) !== null && _child$type !== void 0 && _child$type[itemTag]) {
var _props$itemKeyName;
var props = child.props;
var key = (_props$itemKeyName = props[itemKeyName]) !== null && _props$itemKeyName !== void 0 ? _props$itemKeyName : child.key;
var isDisabled = disabled || props.disabled;
if (isDisabled) {
disabledKeys.push(key);
} else {
validKeys.push(key);
}
childrenMap.set(key, props.children);
renderChildren.push(/*#__PURE__*/_react.default.cloneElement(child, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, itemKeyName, key), "disabled", globalDisabled || isDisabled), "isFirst", isFirst), "isLast", isLast)));
return;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
} else if (subGroupTag && subGroupKeyName && (_child$type2 = child.type) !== null && _child$type2 !== void 0 && _child$type2[subGroupTag]) {
var _props = child.props;
var _key = _props[subGroupKeyName] || child.key || "".concat(prefix, "-").concat(i);
var _isDisabled = disabled || _props.disabled;
var _group2 = _group(child.props.children, _isDisabled, _key),
_group3 = (0, _slicedToArray2.default)(_group2, 3),
subValidKeys = _group3[0],
subDisabledKeys = _group3[1],
subRenderChildren = _group3[2];
subGroupMap.set(_key, {
validKeys: subValidKeys,
disabledKeys: subDisabledKeys
});
validKeys.push.apply(validKeys, (0, _toConsumableArray2.default)(subValidKeys));
disabledKeys.push.apply(disabledKeys, (0, _toConsumableArray2.default)(subDisabledKeys));
if (_props.styleType === 'collapse') warn();
return renderChildren.push(/*#__PURE__*/_react.default.cloneElement(child, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
disabled: globalDisabled || _isDisabled
}, subGroupKeyName, _key), "isFirst", isFirst), "isLast", isLast), "styleType", 'popover'), subRenderChildren));
}
renderChildren.push(child);
return;
}
}.bind(this));
return [validKeys, disabledKeys, renderChildren];
}.bind(this);
return [].concat((0, _toConsumableArray2.default)(_group(children, false, 'group-root')), [subGroupMap, childrenMap]);
};
var Menu = function Menu(_ref2) {
var _this4 = this;
(0, _newArrowCheck2.default)(this, _this);
var _selectedKeys = _ref2.selectedKeys,
_ref2$defaultSelected = _ref2.defaultSelectedKeys,
defaultSelectedKeys = _ref2$defaultSelected === void 0 ? [] : _ref2$defaultSelected,
_onChange = _ref2.onChange,
_ref2$selectable = _ref2.selectable,
selectable = _ref2$selectable === void 0 ? true : _ref2$selectable,
_ref2$multiple = _ref2.multiple,
multiple = _ref2$multiple === void 0 ? false : _ref2$multiple,
showSelectAll = _ref2.showSelectAll,
disabled = _ref2.disabled,
block = _ref2.block,
_locale = _ref2.locale,
className = _ref2.className,
children = _ref2.children,
dataSource = _ref2.dataSource,
collapseProps = _ref2.collapseProps,
virtualList = _ref2.virtualList,
rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
var _useUncontrolled = (0, _useUncontrolled3.default)(_selectedKeys, defaultSelectedKeys, _onChange),
_useUncontrolled2 = (0, _slicedToArray2.default)(_useUncontrolled, 2),
selectedKeys = _useUncontrolled2[0],
onSelectedKeysChange = _useUncontrolled2[1];
// clean selectedStatus here
var onChange = (0, _react.useCallback)(function (keys) {
(0, _newArrowCheck2.default)(this, _this4);
return onSelectedKeysChange(keys);
}.bind(this), [onSelectedKeysChange]);
if (!selectable) {
// when unselectable clean selectedKeys and onChange handle
selectedKeys = [];
onChange = _noop.default;
}
var locale = (0, _useLocale.default)(_zh_CN.default, 'Menu', _locale);
var _useMemo = (0, _react.useMemo)(function () {
(0, _newArrowCheck2.default)(this, _this4);
return dataSource ? dataSource : (virtualList ? strictGroupChildrenAsDataSource : _group4.groupChildrenAsDataSource)(children, disabled, {
itemTag: 'isMenuItem',
subGroupTag: 'isMenuSubMenu',
itemKeyName: 'itemKey',
subGroupKeyName: 'subMenuKey'
});
}.bind(this), [children, dataSource, disabled, virtualList]),
_useMemo2 = (0, _slicedToArray2.default)(_useMemo, 4),
validKeys = _useMemo2[0],
disabledKeys = _useMemo2[1],
renderChildren = _useMemo2[2],
subGroupMap = _useMemo2[3];
var _useCollapse = (0, _hooks.useCollapse)(collapseProps || {}),
_useCollapse2 = (0, _slicedToArray2.default)(_useCollapse, 1),
collapseContext = _useCollapse2[0];
var _useGroup = (0, _group4.useGroup)(selectedKeys, onChange, multiple, validKeys, disabledKeys, subGroupMap),
_useGroup2 = (0, _slicedToArray2.default)(_useGroup, 3),
groupContext = _useGroup2[0],
selectedStatus = _useGroup2[1],
toggleAllItems = _useGroup2[2];
var selectAllCheckbox = (0, _react.useMemo)(function () {
(0, _newArrowCheck2.default)(this, _this4);
return selectable && multiple && showSelectAll && /*#__PURE__*/_react.default.createElement("div", {
className: (0, _classnames.default)(_style.selectallWrapCls, disabled && _style.disabledCls),
key: "menu-select-all"
}, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
className: _style.checkboxCls,
checked: selectedStatus === 'ALL',
indeterminate: selectedStatus === 'PART',
onChange: toggleAllItems,
size: "lg",
disabled: disabled
}, locale.selectAll));
}.bind(this), [disabled, locale.selectAll, multiple, selectable, selectedStatus, showSelectAll, toggleAllItems]);
var renderList = (0, _react.useMemo)(function () {
(0, _newArrowCheck2.default)(this, _this4);
if (virtualList) {
var _virtualInfo$height, _virtualInfo$height2;
var virtualRenderChildren = (selectAllCheckbox ? [selectAllCheckbox] : []).concat(renderChildren);
var virtualInfo = (0, _typeof2.default)(virtualList) === 'object' ? virtualList : {
simple: false,
height: 200
};
return virtualInfo.simple ? /*#__PURE__*/_react.default.createElement(SimpleVirtualScrollList, {
height: (_virtualInfo$height = virtualInfo.height) !== null && _virtualInfo$height !== void 0 ? _virtualInfo$height : 200,
width: "100%"
}, virtualRenderChildren) : /*#__PURE__*/_react.default.createElement(VirtualScrollList, {
height: (_virtualInfo$height2 = virtualInfo.height) !== null && _virtualInfo$height2 !== void 0 ? _virtualInfo$height2 : 200,
width: "100%"
}, virtualRenderChildren);
} else {
return /*#__PURE__*/_react.default.createElement("div", null, selectAllCheckbox, renderChildren);
}
}.bind(this), [renderChildren, selectAllCheckbox, virtualList]);
return /*#__PURE__*/_react.default.createElement(_CollapseContext.default.Provider, {
value: collapseContext
}, /*#__PURE__*/_react.default.createElement(_MenuContext.default.Provider, {
value: _objectSpread(_objectSpread({}, groupContext), {}, {
locale: locale
})
}, /*#__PURE__*/_react.default.createElement(_style.MenuWrap, (0, _extends2.default)({
className: (0, _classnames.default)(className, _style.prefixCls, multiple ? _style.multipleCls : _style.singleCls, block && _style.blockCls)
}, rest), renderList)));
}.bind(void 0);
Menu.propTypes = {
selectedKeys: _propTypes.default.array,
defaultSelectedKeys: _propTypes.default.array,
onChange: _propTypes.default.func,
multiple: _propTypes.default.bool,
selectable: _propTypes.default.bool,
showSelectAll: _propTypes.default.bool,
block: _propTypes.default.bool,
disabled: _propTypes.default.bool,
virtualList: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.shape({
simple: _propTypes.default.oneOf([true]),
height: _propTypes.default.number
})]),
customStyle: _propTypes.default.shape({
maxHeight: _propTypes.default.string,
maxWidth: _propTypes.default.string
}),
locale: _propTypes.default.any
};
var VirtualScrollList = function VirtualScrollList(_ref3) {
(0, _newArrowCheck2.default)(this, _this);
var children = _ref3.children,
height = _ref3.height,
width = _ref3.width;
var scrollerRef = (0, _react.useRef)(null);
var heightWrapperRef = (0, _react.useRef)(null);
var wrapperRef = (0, _react.useRef)(null);
var _useVirtualList = (0, _useVirtualList3.default)(scrollerRef, wrapperRef, heightWrapperRef, children, {
clientHeight: height
}),
_useVirtualList2 = (0, _slicedToArray2.default)(_useVirtualList, 2),
renderChildren = _useVirtualList2[0],
offsetTop = _useVirtualList2[1];
return /*#__PURE__*/_react.default.createElement("div", {
ref: scrollerRef,
style: {
maxHeight: height,
width: width,
overflowY: 'auto'
}
}, /*#__PURE__*/_react.default.createElement("div", {
ref: heightWrapperRef
}, /*#__PURE__*/_react.default.createElement("div", {
ref: wrapperRef,
style: {
transform: "translate(0, ".concat(offsetTop, "px)")
}
}, renderChildren)));
}.bind(void 0);
var SimpleVirtualScrollList = function SimpleVirtualScrollList(_ref4) {
(0, _newArrowCheck2.default)(this, _this);
var children = _ref4.children,
height = _ref4.height,
width = _ref4.width;
var scrollerRef = (0, _react.useRef)(null);
var heightWrapperRef = (0, _react.useRef)(null);
var wrapperRef = (0, _react.useRef)(null);
var _useSimpleVirtualList = (0, _useSimpleVirtualList3.default)(scrollerRef, wrapperRef, heightWrapperRef, children, {
clientHeight: height
}),
_useSimpleVirtualList2 = (0, _slicedToArray2.default)(_useSimpleVirtualList, 2),
renderChildren = _useSimpleVirtualList2[0],
offsetTop = _useSimpleVirtualList2[1];
return /*#__PURE__*/_react.default.createElement("div", {
ref: scrollerRef,
style: {
maxHeight: height,
width: width,
overflowY: 'auto'
}
}, /*#__PURE__*/_react.default.createElement("div", {
ref: heightWrapperRef
}, /*#__PURE__*/_react.default.createElement("div", {
ref: wrapperRef,
style: {
transform: "translate(0, ".concat(offsetTop, "px)")
}
}, renderChildren)));
}.bind(void 0);
var _default = exports.default = /*#__PURE__*/_react.default.memo(Menu);