2019-10-19 16:38:07 +02:00
|
|
|
import * as React from 'react';
|
|
|
|
|
import classNames from 'classnames';
|
2018-09-03 16:17:36 +02:00
|
|
|
|
2019-07-17 17:35:29 +02:00
|
|
|
type NotificationType =
|
2019-10-19 16:38:07 +02:00
|
|
|
| 'primary'
|
|
|
|
|
| 'info'
|
|
|
|
|
| 'success'
|
|
|
|
|
| 'warning'
|
|
|
|
|
| 'danger'
|
|
|
|
|
| 'inherit';
|
2018-09-03 16:17:36 +02:00
|
|
|
|
|
|
|
|
type Props = {
|
2019-10-19 16:38:07 +02:00
|
|
|
type: NotificationType;
|
|
|
|
|
onClose?: () => void;
|
|
|
|
|
className?: string;
|
|
|
|
|
children?: React.Node;
|
2018-09-03 16:17:36 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
class Notification extends React.Component<Props> {
|
|
|
|
|
static defaultProps = {
|
2019-10-19 16:38:07 +02:00
|
|
|
type: 'info',
|
2018-09-03 16:17:36 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
renderCloseButton() {
|
|
|
|
|
const { onClose } = this.props;
|
|
|
|
|
if (onClose) {
|
|
|
|
|
return <button className="delete" onClick={onClose} />;
|
|
|
|
|
}
|
2019-10-19 16:38:07 +02:00
|
|
|
return '';
|
2018-09-03 16:17:36 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render() {
|
2019-07-17 17:35:29 +02:00
|
|
|
const { type, className, children } = this.props;
|
|
|
|
|
|
2019-10-19 16:38:07 +02:00
|
|
|
const color = type !== 'inherit' ? 'is-' + type : '';
|
2019-07-17 17:35:29 +02:00
|
|
|
|
2018-09-03 16:17:36 +02:00
|
|
|
return (
|
2019-10-19 16:38:07 +02:00
|
|
|
<div className={classNames('notification', color, className)}>
|
2018-09-03 16:17:36 +02:00
|
|
|
{this.renderCloseButton()}
|
|
|
|
|
{children}
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default Notification;
|