chowa
Version:
UI component library based on React
155 lines (154 loc) • 6.06 kB
JavaScript
/**
* @license chowa v1.1.3
*
* Copyright (c) Chowa Techonlogies Co.,Ltd.(http://www.chowa.cn).
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const PropTypes = require("prop-types");
const classnames_1 = require("classnames");
const utils_1 = require("../utils");
const menu_item_1 = require("./menu-item");
const menu_group_1 = require("./menu-group");
const menu_submenu_1 = require("./menu-submenu");
const tool_1 = require("./tool");
const menu_record_dispatch_1 = require("./menu-record-dispatch");
class Menu extends React.PureComponent {
constructor(props) {
super(props);
const renderData = tool_1.transformReactNodeToData(props.children);
const collapseManager = tool_1.initCollapseManager(renderData, props.accordion, this.props.activeIndex);
this.state = {
renderData,
collapseManager,
selfActiveIndex: props.activeIndex
};
[
'setActiveIndex',
'updateCollapseManager',
'reCollectionRenderData',
'adaptiveLayout'
].forEach((fn) => {
this[fn] = this[fn].bind(this);
});
}
componentDidUpdate(preProps) {
if (preProps.activeIndex !== this.props.activeIndex && this.state.selfActiveIndex !== this.props.activeIndex) {
this.setState({
selfActiveIndex: this.props.activeIndex,
collapseManager: tool_1.initCollapseManager(this.state.renderData, this.props.accordion, this.props.activeIndex)
});
}
if (!utils_1.isEqual(preProps.children, this.props.children) || this.props.mode !== preProps.mode) {
this.reCollectionRenderData();
}
}
componentDidMount() {
utils_1.doms.on(window, 'resize', this.reCollectionRenderData);
setTimeout(this.adaptiveLayout, 500);
}
componentWillUnmount() {
utils_1.doms.off(window, 'resize', this.reCollectionRenderData);
}
reCollectionRenderData() {
const { children } = this.props;
const renderData = tool_1.transformReactNodeToData(children);
this.setState({
renderData
}, this.adaptiveLayout);
}
adaptiveLayout() {
const { mode } = this.props;
if (mode !== 'horizontal') {
return;
}
const { width: clientWidth } = utils_1.doms.rect(this.wrapperEle);
const recordNodes = this.wrapperEle.querySelectorAll('li');
if (!utils_1.isExist(recordNodes)) {
return;
}
let amountWidth = 0;
let index = -1;
for (let i = 0; i < recordNodes.length; i++) {
const { width } = utils_1.doms.rect(recordNodes[i]);
amountWidth += width;
if (amountWidth > clientWidth) {
index = i > 0 && amountWidth - width + 52 > clientWidth ? i - 1 : i;
break;
}
}
if (index === -1) {
return;
}
this.setState({
renderData: tool_1.mergeOuterItemToSubmenu(this.state.renderData, index)
});
}
setActiveIndex(activeIndex) {
this.setState({ selfActiveIndex: activeIndex });
if (this.props.onChange) {
this.props.onChange(activeIndex);
}
}
updateCollapseManager(parentKey, collapseKey) {
const collapseManager = tool_1.cloneManager(this.state.collapseManager);
const { accordion } = this.props;
if (!utils_1.hasProperty(collapseManager, parentKey)) {
collapseManager[parentKey] = [collapseKey];
}
else {
if (collapseManager[parentKey].includes(collapseKey)) {
collapseManager[parentKey].splice(collapseManager[parentKey].indexOf(collapseKey));
}
else {
if (accordion) {
collapseManager[parentKey] = [collapseKey];
}
else {
collapseManager[parentKey].push(collapseKey);
}
}
}
this.setState({ collapseManager });
}
render() {
const { className, style, mode, collapse, theme } = this.props;
const { renderData, selfActiveIndex, collapseManager } = this.state;
const realCollapse = mode === 'vertical' && collapse;
const inOverlay = realCollapse || mode === 'horizontal';
const componentClass = classnames_1.default({
[utils_1.preClass('menu')]: true,
[utils_1.preClass('menu-collapse')]: realCollapse,
[utils_1.preClass(`menu-${mode}`)]: true,
[utils_1.preClass(`menu-${theme}`)]: theme,
[className]: utils_1.isExist(className)
});
return (React.createElement("ul", { style: style, className: componentClass, ref: (ele) => {
this.wrapperEle = ele;
} }, renderData.map((record, key) => (React.createElement(menu_record_dispatch_1.default, { key: key, record: record, collapse: realCollapse, activeIndex: selfActiveIndex, mode: mode, theme: theme, inOverlay: inOverlay, collapseManager: collapseManager, updateCollapseManager: this.updateCollapseManager, setActiveIndex: this.setActiveIndex })))));
}
}
Menu.propTypes = {
className: PropTypes.string,
style: PropTypes.object,
mode: PropTypes.oneOf(['horizontal', 'vertical']),
collapse: PropTypes.bool,
accordion: PropTypes.bool,
theme: PropTypes.oneOf(['light', 'dark', 'primary']),
activeIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
onChange: PropTypes.func
};
Menu.defaultProps = {
mode: 'horizontal',
theme: 'light',
collapse: false,
accordion: true
};
Menu.Item = menu_item_1.default;
Menu.Submenu = menu_submenu_1.default;
Menu.Group = menu_group_1.default;
exports.default = Menu;