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'));