import React from 'react';
import {render} from 'react-dom';
import Alert from '@jetbrains/ring-ui/components/alert/alert';
import Link from '@jetbrains/ring-ui/components/link/link';
class AlertDemo extends React.Component {
state = {
show: true,
isClosing: false
};
onClose = () => {
this.setState({show: false});
}
onCloseRequest = () => {
this.setState({isClosing: true});
}
render() {
const {show, isClosing} = this.state;
if (!show) {
return null;
}
return
Sample alert with link
;
}
}
render(, document.querySelector('#alert'));
import {render} from 'react-dom';
import React from 'react';
import Button from '@jetbrains/ring-ui/components/button/button';
import Link from '@jetbrains/ring-ui/components/link/link';
import Alert, {Container} from '@jetbrains/ring-ui/components/alert/alert';
class AlertContainerDemo extends React.Component {
state = {
alerts: [
{type: Alert.Type.WARNING, key: 1, message: 'Test warning', isClosing: false},
{type: Alert.Type.LOADING, key: 2, message: 'Test loading', isClosing: false},
{type: Alert.Type.MESSAGE, key: 3, message: 'Test message', isClosing: false},
{type: Alert.Type.MESSAGE, key: 3, message: Message with link, isClosing: false},
]
};
yetAnotherMessage = () => {
this.setState({
alerts: [{
type: Alert.Type.MESSAGE,
key: Date.now(),
message: 'Another message at ' + new Date()
},
...this.state.alerts
]
});
}
onCloseAlert = (closedAlert) => {
this.setState({
alerts: this.state.alerts.filter(alert => alert !== closedAlert)
});
}
onCloseAlertClick = (alert) => {
const alertToClose = this.state.alerts.filter(it => alert.key === it.key)[0]
alertToClose.isClosing = true;
this.setState({alerts: [...this.state.alerts]});
}
render() {
return (
{this.state.alerts.map(alert => {
const {message, ...rest} = alert;
return (
this.onCloseAlertClick(alert)}
onClose={() => this.onCloseAlert(alert)}
>
{message}
);
})}
);
}
}
render(, document.getElementById('alert-container'));