chowa
Version:
UI component library based on React
125 lines (124 loc) • 4.63 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 transition_1 = require("../transition");
const _notification_1 = require("./$notification");
class Notification extends React.PureComponent {
constructor(props) {
super(props);
this.timer = null;
this.state = {
visible: false
};
[
'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, placement } = this.props;
if (onHide) {
onHide(index, placement);
}
}
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, title, content, closable, placement } = this.props;
const { visible } = this.state;
const transPlacement = placement.split('-').pop();
const componentClass = classnames_1.default({
[utils_1.preClass('notification')]: true,
[className]: utils_1.isExist(className)
});
const iconClass = classnames_1.default({
[utils_1.preClass('notification-icon')]: true,
[utils_1.preClass('notification-icon-bigger')]: utils_1.isExist(content),
[utils_1.preClass(`notification-${type}`)]: type
});
return (React.createElement(transition_1.default, { visible: visible, enter: utils_1.preClass(`notification-${transPlacement}-enter`), appear: utils_1.preClass('notification-appear'), leave: utils_1.preClass(`notification-${transPlacement}-leave`), onHide: this.onHideHandler },
React.createElement("div", { style: style, className: componentClass, onMouseEnter: this.onMouseEnterHandler, onMouseLeave: this.onMouseLeaveHandler },
utils_1.isExist(type) &&
React.createElement("span", { className: iconClass },
React.createElement(icon_1.default, { type: utils_1.isExist(content) ? type : `${type}-fill` })),
React.createElement("div", { className: utils_1.preClass('notification-inner') },
React.createElement("p", { className: utils_1.preClass('notification-title') }, title),
content && React.createElement("p", { className: utils_1.preClass('notification-content') }, content)),
closable &&
React.createElement("button", { className: utils_1.preClass('notification-close'), onClick: this.closeHandler },
React.createElement(icon_1.default, { type: 'close' })))));
}
}
Notification.propTypes = {
className: PropTypes.string,
style: PropTypes.object,
type: PropTypes.oneOf(['info', 'success', 'error', 'warning']),
title: PropTypes.string.isRequired,
content: PropTypes.node,
closable: PropTypes.bool,
delay: PropTypes.number,
index: PropTypes.number,
placement: PropTypes.oneOf(['top-right', 'top-left', 'bottom-right', 'bottom-left']),
onHide: PropTypes.func
};
Notification.defaultProps = {
closable: false,
delay: 3000,
placement: 'top-right'
};
Notification.$notification = _notification_1.default;
exports.default = Notification;