chowa
Version:
UI component library based on React
121 lines (120 loc) • 4.65 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 overlay_1 = require("../overlay");
const dropdown_menu_1 = require("./dropdown-menu");
const dropdown_button_1 = require("./dropdown-button");
class Dropdown extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
dropVisible: props.visible || props.defaultVisible
};
this.onVisibleChangeHandler = this.onVisibleChangeHandler.bind(this);
}
componentDidUpdate(preProps) {
if (preProps.visible !== this.props.visible && this.props.visible !== this.state.dropVisible) {
this.setState({
dropVisible: this.props.visible
});
}
}
onVisibleChangeHandler(v) {
this.setState({
dropVisible: v
});
if (this.props.onVisibleChange) {
this.props.onVisibleChange(v);
}
}
render() {
const { children, role, className, style, content, placement, trigger, fixSpace, offsetX, offsetY, transparent, disabled, externalWheelHide, matchTriggerWidth, delay, withArrow, onShow, onHide, onEnter, onLeave } = this.props;
const { dropVisible } = this.state;
const zoomPlacement = placement.split('-').shift();
let triggerNode = children;
if (utils_1.isReactElement(triggerNode) && triggerNode.type === dropdown_button_1.default) {
triggerNode = React.cloneElement(triggerNode, {
open: dropVisible
});
}
const componentClass = classnames_1.default({
[utils_1.preClass('dropdown')]: true,
[utils_1.preClass(`dropdown-${placement}`)]: withArrow && !transparent,
[className]: utils_1.isExist(className)
});
const contentNode = transparent
? content
: (React.createElement("div", { className: utils_1.preClass('dropdown-content') }, content));
return (React.createElement(overlay_1.default, { role: role, trigger: triggerNode, visible: dropVisible, enter: utils_1.preClass(`zoom-${zoomPlacement}-enter`), appear: utils_1.preClass('zoom-appear'), leave: utils_1.preClass(`zoom-${zoomPlacement}-leave`), onVisibleChange: this.onVisibleChangeHandler, placement: placement, action: trigger, delay: delay, fixSpace: fixSpace, offsetX: offsetX, offsetY: offsetY, disabled: disabled || triggerNode.props.disabled, externalWheelHide: externalWheelHide, onShow: onShow, onHide: onHide, onEnter: onEnter, onLeave: onLeave, className: componentClass, style: style, matchTriggerWidth: matchTriggerWidth },
withArrow && !transparent &&
React.createElement("span", { className: utils_1.preClass('dropdown-arrow') }),
contentNode));
}
}
Dropdown.propTypes = {
className: PropTypes.string,
style: PropTypes.object,
visible: PropTypes.bool,
defaultVisible: PropTypes.bool,
role: PropTypes.string,
trigger: PropTypes.oneOf(['click', 'hover', 'focus', 'contextMenu']),
placement: PropTypes.oneOf([
'top',
'left',
'bottom',
'right',
'left-top',
'left-bottom',
'right-top',
'right-bottom',
'top-left',
'top-right',
'bottom-left',
'bottom-right'
]),
onVisibleChange: PropTypes.func,
fixSpace: PropTypes.number,
offsetX: PropTypes.number,
offsetY: PropTypes.number,
transparent: PropTypes.bool,
disabled: PropTypes.bool,
externalWheelHide: PropTypes.bool,
content: PropTypes.node,
matchTriggerWidth: PropTypes.bool,
delay: PropTypes.number,
withArrow: PropTypes.bool,
onShow: PropTypes.func,
onHide: PropTypes.func,
onEnter: PropTypes.func,
onLeave: PropTypes.func
};
Dropdown.defaultProps = {
visible: false,
defaultVisible: false,
role: 'dropdown',
fixSpace: 2,
offsetX: 0,
offsetY: 0,
transparent: false,
disabled: false,
externalWheelHide: true,
placement: 'bottom-left',
trigger: 'click',
matchTriggerWidth: false,
delay: 200,
withArrow: false
};
Dropdown.Menu = dropdown_menu_1.default;
Dropdown.Button = dropdown_button_1.default;
exports.default = Dropdown;