chowa
Version:
UI component library based on React
83 lines (82 loc) • 3.15 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.
*/
;
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 drawer_header_1 = require("./drawer-header");
const drawer_body_1 = require("./drawer-body");
const drawer_footer_1 = require("./drawer-footer");
class Drawer extends React.PureComponent {
constructor(props) {
super(props);
[
'onMaskClickHandler'
].forEach((fn) => {
this[fn] = this[fn].bind(this);
});
}
onMaskClickHandler(e) {
if (this.props.onClose && e.target.isEqualNode(e.currentTarget)) {
this.props.onClose();
}
}
componentDidUpdate(preProps) {
const { visible, scrollDisabled } = this.props;
if (preProps.visible !== visible && scrollDisabled) {
if (visible) {
utils_1.doms.css(document.documentElement, 'overflow', 'hidden');
}
else {
utils_1.doms.removeStyle(document.documentElement, 'overflow');
}
}
}
render() {
const { children, style, className, visible, placement, maskClosable, bordered, withMask } = this.props;
const fragments = [];
const componentClass = classnames_1.default({
[utils_1.preClass('drawer')]: true,
[utils_1.preClass('drawer-bordered')]: bordered,
[utils_1.preClass(`drawer-${placement}`)]: true,
[className]: utils_1.isExist(className)
});
if (withMask) {
fragments.push(React.createElement(overlay_1.default, { key: 'drawer-mask', visible: visible, className: utils_1.preClass('drawer-mask'), onClick: maskClosable ? this.onMaskClickHandler : null, role: 'drawer-mask' }));
}
fragments.push(React.createElement(overlay_1.default, { key: 'drawer-main', enter: utils_1.preClass(`drawer-${placement}-enter`), appear: utils_1.preClass('drawer-appear'), leave: utils_1.preClass(`drawer-${placement}-leave`), visible: visible, className: componentClass, style: style, role: 'drawer' }, children));
return fragments;
}
}
Drawer.propTypes = {
className: PropTypes.string,
style: PropTypes.object,
visible: PropTypes.bool,
maskClosable: PropTypes.bool,
withMask: PropTypes.bool,
scrollDisabled: PropTypes.bool,
placement: PropTypes.oneOf(['top', 'left', 'right', 'bottom']),
onClose: PropTypes.func,
bordered: PropTypes.bool
};
Drawer.defaultProps = {
visible: false,
scrollDisabled: false,
maskClosable: true,
withMask: true,
placement: 'right',
bordered: true
};
Drawer.Header = drawer_header_1.default;
Drawer.Body = drawer_body_1.default;
Drawer.Footer = drawer_footer_1.default;
exports.default = Drawer;