chowa
Version:
UI component library based on React
158 lines (157 loc) • 8.24 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 classnames_1 = require("classnames");
const transition_1 = require("../transition");
const dropdown_1 = require("../dropdown");
const icon_1 = require("../icon");
const utils_1 = require("../utils");
const tool_1 = require("./tool");
const menu_record_dispatch_1 = require("./menu-record-dispatch");
class MenuSubmenuRecord extends React.PureComponent {
constructor(props) {
super(props);
this.timer = null;
this.state = {
dropdownVisible: false,
relatedVisible: false,
hasActiveChild: tool_1.hasActiveRecord(props.data, props.activeIndex)
};
[
'onVisibleChange',
'onMouseEnterHandler',
'onMouseLeaveHanlder'
].forEach((fn) => {
this[fn] = this[fn].bind(this);
});
}
componentDidUpdate(preProps) {
if (preProps.activeIndex !== this.props.activeIndex
|| !utils_1.isEqual(preProps.data, this.props.data)) {
this.setState({
hasActiveChild: tool_1.hasActiveRecord(this.props.data, this.props.activeIndex),
dropdownVisible: false
});
}
}
componentWillUnmount() {
if (this.timer !== null) {
clearTimeout(this.timer);
}
}
onVisibleChange(v) {
this.setState({ dropdownVisible: v });
}
onMouseEnterHandler() {
if (this.timer !== null) {
clearTimeout(this.timer);
}
if (this.state.relatedVisible) {
return;
}
this.setState({
relatedVisible: true
});
}
onMouseLeaveHanlder() {
if (this.timer !== null) {
clearTimeout(this.timer);
}
this.timer = window.setTimeout(() => {
this.timer = null;
this.setState({
relatedVisible: false
});
}, 300);
}
renderContent() {
const { activeIndex, inSubmenu, mode, collapse, theme, data, setActiveIndex, inOverlay, collapseManager, updateCollapseManager } = this.props;
const contentInOverlay = inOverlay
|| (inSubmenu && inOverlay)
|| mode === 'horizontal'
|| (mode === 'vertical' && collapse);
const contentClass = classnames_1.default({
[utils_1.preClass('menu-submenu-collapse')]: !contentInOverlay,
[utils_1.preClass('menu-overlay-submenu')]: contentInOverlay,
[utils_1.preClass(`menu-overlay-submenu-${theme}`)]: contentInOverlay
});
return (React.createElement("ul", { className: contentClass }, data.map((record, key) => (React.createElement(menu_record_dispatch_1.default, { key: key, record: record, collapse: collapse, activeIndex: activeIndex, inOverlay: contentInOverlay, mode: mode, theme: theme, collapseManager: collapseManager, updateCollapseManager: updateCollapseManager, setActiveIndex: setActiveIndex })))));
}
renderCollapseSubmenu() {
const { className, style, disabled, title, collapse, tier, collapseManager, parentKey, collapseKey, updateCollapseManager } = this.props;
const { hasActiveChild } = this.state;
const collapseStatus = tool_1.isActiveCollpase(collapseManager, parentKey, collapseKey);
const wrapperClass = classnames_1.default({
[utils_1.preClass('menu-submenu')]: true,
[utils_1.preClass('menu-submenu-active')]: collapseStatus && !collapse
});
const triggerClass = classnames_1.default({
[utils_1.preClass('menu-submenu-trigger')]: true,
[utils_1.preClass('menu-disabled')]: disabled,
[utils_1.preClass('menu-active')]: hasActiveChild && !collapseStatus,
[className]: utils_1.isExist(className)
});
return (React.createElement("li", { style: style, className: wrapperClass },
React.createElement("div", { onClick: disabled ? null : updateCollapseManager.bind(this, parentKey, collapseKey), style: tier > 1 ? { paddingLeft: tier * tool_1.tierSpace } : {}, className: triggerClass },
React.createElement("div", { className: utils_1.preClass('menu-submenu-title') }, title),
React.createElement("span", { className: classnames_1.default({
[utils_1.preClass('menu-submenu-arrow')]: true,
[utils_1.preClass('menu-submenu-arrow-active')]: collapseStatus
}) },
React.createElement(icon_1.default, { type: 'arrow-down' }))),
React.createElement(transition_1.default, { appear: utils_1.preClass('slide-down-appear'), enter: utils_1.preClass('slide-down-enter'), leave: utils_1.preClass('slide-down-leave'), visible: collapseStatus }, this.renderContent())));
}
renderRelatedSubmenu() {
const { className, style, disabled, title } = this.props;
const { relatedVisible, hasActiveChild } = this.state;
const triggerClass = classnames_1.default({
[utils_1.preClass('menu-submenu-related-trigger')]: true,
[utils_1.preClass('menu-submenu-related-active')]: relatedVisible,
[utils_1.preClass('menu-disabled')]: disabled,
[utils_1.preClass('menu-active')]: hasActiveChild,
[className]: utils_1.isExist(className)
});
return (React.createElement("li", { style: style, className: utils_1.preClass('menu-submenu-related') },
React.createElement("div", { onMouseEnter: disabled ? null : this.onMouseEnterHandler, onMouseLeave: disabled ? null : this.onMouseLeaveHanlder, className: triggerClass },
React.createElement("div", { className: utils_1.preClass('menu-submenu-title') }, title),
React.createElement("span", { className: utils_1.preClass('menu-submenu-arrow') },
React.createElement(icon_1.default, { type: 'arrow-right' }))),
React.createElement(transition_1.default, { visible: relatedVisible, enter: utils_1.preClass('zoom-right-enter'), appear: utils_1.preClass('zoom-appear'), leave: utils_1.preClass('zoom-right-leave') },
React.createElement("div", { onMouseEnter: disabled ? null : this.onMouseEnterHandler, onMouseLeave: disabled ? null : this.onMouseLeaveHanlder, className: utils_1.preClass('menu-submenu-related-inner') }, this.renderContent()))));
}
renderDropSubmenu() {
const { className, style, disabled, title, mode, extras, placement } = this.props;
const { icon } = extras;
const { hasActiveChild, dropdownVisible } = this.state;
const triggerClass = classnames_1.default({
[utils_1.preClass('menu-submenu-trigger')]: true,
[utils_1.preClass('menu-submenu-active')]: dropdownVisible,
[utils_1.preClass('menu-active')]: hasActiveChild,
[utils_1.preClass('menu-disabled')]: disabled,
[className]: utils_1.isExist(className)
});
return (React.createElement(dropdown_1.default, { placement: mode === 'horizontal'
? placement === 'center' ? 'bottom' : `bottom-${placement}`
: 'right-top', visible: dropdownVisible, fixSpace: 2, transparent: true, disabled: disabled, content: this.renderContent(), onVisibleChange: this.onVisibleChange, externalWheelHide: false, role: 'menu', trigger: 'hover' },
React.createElement("li", { style: style, className: triggerClass }, mode === 'horizontal' ? title : icon)));
}
render() {
const { mode, inSubmenu, inOverlay } = this.props;
if (inSubmenu && inOverlay) {
return this.renderRelatedSubmenu();
}
if (mode === 'horizontal' || inOverlay) {
return this.renderDropSubmenu();
}
return this.renderCollapseSubmenu();
}
}
exports.default = MenuSubmenuRecord;