zent
Version:
一套前端设计语言和基于React的实现
105 lines (104 loc) • 4.23 kB
JavaScript
import { __assign, __extends, __spreadArray } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import cx from 'classnames';
import { Children } from 'react';
import isEqual from '../utils/isEqual';
import noop from '../utils/noop';
import CommonMenu from './CommonMenu';
import MenuItem from './MenuItem';
import SubMenu from './SubMenu';
var Menu = (function (_super) {
__extends(Menu, _super);
function Menu(props) {
var _a, _b, _c;
var _this = _super.call(this, props) || this;
_this.toggleExpand = function (key) {
var _a, _b;
var expandedKeys = _this.state.expandedKeys;
var isCurrentKeyExpand = expandedKeys.indexOf(key) !== -1;
var newExpandKeys = isCurrentKeyExpand
? expandedKeys.filter(function (item) { return item !== key; })
: __spreadArray([key], expandedKeys);
_this.setState({
expandedKeys: newExpandKeys,
});
(_b = (_a = _this.props).onExpandChange) === null || _b === void 0 ? void 0 : _b.call(_a, newExpandKeys);
};
_this.handleSelect = function (key) {
var _a, _b;
_this.setState({
selectedKey: key,
});
(_b = (_a = _this.props).onSelectChange) === null || _b === void 0 ? void 0 : _b.call(_a, key);
};
_this.handleClick = function (e, key) {
var onClick = _this.props.onClick;
onClick && onClick(e, key);
};
_this.renderMenuItem = function (component, index) {
if (!component) {
return null;
}
return _this.renderCommonMenuItem(component, index, undefined, {
depth: 1,
isInline: _this.props.mode === 'inline',
inlineIndent: _this.props.inlineIndent,
selectedKey: _this.state.selectedKey,
expandKeys: _this.state.expandedKeys,
handleSelect: _this.handleSelect,
toggleExpand: _this.toggleExpand,
onSubMenuClick: _this.props.onSubMenuClick,
});
};
if (props.mode === 'inline') {
_this.state = {
selectedKey: (_a = props.selectedKey) !== null && _a !== void 0 ? _a : props.defaultSelectedKey,
expandedKeys: (_c = (_b = props.expandedKeys) !== null && _b !== void 0 ? _b : props.defaultExpandedKeys) !== null && _c !== void 0 ? _c : props.defaultExpandKeys,
prevExpandedKeysProp: props.expandedKeys,
prevSelectedKeyProp: props.selectedKey,
};
}
else {
_this.state = {};
}
return _this;
}
Menu.getDerivedStateFromProps = function (props, state) {
if (props.mode !== 'inline') {
return null;
}
var newState = {
prevSelectedKeyProp: props.selectedKey,
prevExpandedKeysProp: props.expandedKeys,
};
if (props.selectedKey !== state.prevSelectedKeyProp &&
props.selectedKey !== state.selectedKey) {
newState.selectedKey = props.selectedKey;
}
if (!isEqual(props.expandedKeys, state.prevExpandedKeysProp) &&
!isEqual(props.expandedKeys, state.expandedKeys)) {
newState.expandedKeys = props.expandedKeys;
}
return newState;
};
Menu.prototype.render = function () {
var _a = this.props, children = _a.children, className = _a.className, style = _a.style, mode = _a.mode;
var isInline = mode === 'inline';
var classString = cx('zent-menu', className, {
'zent-menu__inline': isInline,
});
return (_jsx("ul", __assign({ className: classString, style: style, "data-zv": '10.0.17' }, { children: Children.map(children, this.renderMenuItem) }), void 0));
};
Menu.MenuItem = MenuItem;
Menu.SubMenu = SubMenu;
Menu.defaultProps = {
onClick: noop,
mode: 'pop',
inlineIndent: 24,
defaultExpandKeys: [],
onSubMenuClick: noop,
};
return Menu;
}(CommonMenu));
export { Menu };
export default Menu;