chowa
Version:
UI component library based on React
89 lines (88 loc) • 3.67 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");
class Alert extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
selfVisible: props.visible
};
this.hideAlertHandler = this.hideAlertHandler.bind(this);
}
hideAlertHandler() {
this.updateVisible(false);
}
updateVisible(v) {
this.setState({
selfVisible: v
}, () => {
if (this.props.onVisibleChange) {
this.props.onVisibleChange(v);
}
});
}
componentDidUpdate(preProps) {
if (preProps.visible !== this.props.visible && this.props.visible !== this.state.selfVisible) {
this.updateVisible(this.props.visible);
}
}
render() {
const { className, style, type, content, title, showIcon, closable, closeText } = this.props;
const { selfVisible } = this.state;
const iconType = utils_1.isExist(title) ? `${type}-fill` : type;
const componentClass = classnames_1.default({
[utils_1.preClass('alert')]: true,
[utils_1.preClass(`alert-${type}`)]: true,
[utils_1.preClass('alert-with-title')]: utils_1.isExist(title),
[className]: utils_1.isExist(className)
});
const typeIconClass = classnames_1.default({
[utils_1.preClass('alert-icon')]: true,
[utils_1.preClass('alert-icon-big')]: utils_1.isExist(title)
});
return (React.createElement(transition_1.default, { enter: utils_1.preClass('slide-down-enter'), appear: utils_1.preClass('slide-down-appear'), leave: utils_1.preClass('slide-down-leave'), visible: selfVisible },
React.createElement("section", { style: style, className: componentClass },
showIcon &&
React.createElement("div", { className: typeIconClass },
React.createElement(icon_1.default, { type: iconType })),
React.createElement("div", { className: utils_1.preClass('alert-inner') },
title && React.createElement("div", { className: utils_1.preClass('alert-title') }, title),
React.createElement("div", { className: utils_1.preClass('alert-content') }, content)),
closable &&
React.createElement("span", { className: utils_1.preClass('alert-close'), onClick: this.hideAlertHandler },
closeText === undefined && React.createElement(icon_1.default, { type: 'close' }),
utils_1.isExist(closeText) && React.createElement("a", null, closeText)))));
}
}
Alert.propTypes = {
className: PropTypes.string,
style: PropTypes.object,
type: PropTypes.oneOf(['info', 'success', 'error', 'warning']),
title: PropTypes.node,
content: PropTypes.node.isRequired,
showIcon: PropTypes.bool,
visible: PropTypes.bool,
closable: PropTypes.bool,
closeText: PropTypes.node,
onVisibleChange: PropTypes.func
};
Alert.defaultProps = {
showIcon: false,
visible: true,
type: 'info',
closable: false
};
exports.default = Alert;