chowa
Version:
UI component library based on React
122 lines (121 loc) • 4.34 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 icon_1 = require("../icon");
const overlay_1 = require("../overlay");
const transition_1 = require("../transition");
const spin_1 = require("../spin");
const _message_1 = require("./$message");
class Message extends React.PureComponent {
constructor(props) {
super(props);
this.timer = null;
this.state = {
visible: false,
zIndex: overlay_1.default.getZIndex()
};
[
'onMouseEnterHandler',
'onMouseLeaveHandler',
'closeHandler',
'onHideHandler'
].forEach((fn) => {
this[fn] = this[fn].bind(this);
});
}
onMouseEnterHandler() {
const { closable } = this.props;
if (closable) {
this.clearCrontab();
}
}
onMouseLeaveHandler() {
const { closable } = this.props;
if (closable) {
this.crontab();
}
}
closeHandler() {
this.setState({
visible: false
}, () => {
this.clearCrontab();
});
}
onHideHandler() {
const { onHide, index } = this.props;
if (onHide) {
onHide(index);
}
}
clearCrontab() {
if (this.timer !== null) {
clearTimeout(this.timer);
this.timer = null;
}
}
crontab() {
const { delay } = this.props;
if (delay > 0) {
this.timer = window.setTimeout(() => {
this.closeHandler();
}, delay);
}
}
componentDidMount() {
this.crontab();
this.setState({ visible: true });
}
componentWillUnmount() {
this.clearCrontab();
}
render() {
const { className, style, type, content, closable, top } = this.props;
const { zIndex, visible } = this.state;
const componentClass = classnames_1.default({
[utils_1.preClass('message')]: true,
[utils_1.preClass(`message-${type}`)]: true,
[className]: utils_1.isExist(className)
});
return (React.createElement(transition_1.default, { visible: visible, enter: utils_1.preClass('message-enter'), appear: utils_1.preClass('message-appear'), leave: utils_1.preClass('message-leave'), onHide: this.onHideHandler },
React.createElement("div", { className: utils_1.preClass('message-wrapper'), style: { top, zIndex } },
React.createElement("div", { style: style, className: componentClass, onMouseEnter: visible ? this.onMouseEnterHandler : null, onMouseLeave: visible ? this.onMouseLeaveHandler : null },
React.createElement("span", { className: utils_1.preClass('message-icon') },
type !== 'fetching' && React.createElement(icon_1.default, { type: type === 'process' ? type : `${type}-fill` }),
type === 'fetching' && React.createElement(spin_1.default, { md: 'mr', type: 'primary' })),
React.createElement("p", { className: utils_1.preClass('message-text') }, content),
closable &&
React.createElement("span", { className: utils_1.preClass('message-close'), onClick: this.closeHandler },
React.createElement(icon_1.default, { type: 'close' }))))));
}
}
Message.propTypes = {
className: PropTypes.string,
style: PropTypes.object,
type: PropTypes.oneOf(['info', 'success', 'error', 'warning', 'process', 'fetching']),
content: PropTypes.node.isRequired,
closable: PropTypes.bool,
delay: PropTypes.number,
index: PropTypes.number,
top: PropTypes.number,
onHide: PropTypes.func
};
Message.defaultProps = {
type: 'info',
closable: false,
delay: 3000,
top: 65
};
Message.$message = _message_1.default;
exports.default = Message;