Alert

Alert is a component for displaying contextual notifications. If you want to display a stack of notifications, use Alerts instead.

Alert

Example

<div id="alert"></div>

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 <Alert
         type={Alert.Type.SUCCESS}
         onClose={this.onClose}
         showWithAnimation={false}
         onCloseRequest={this.onCloseRequest}
         isClosing={isClosing}
       >
         Sample alert <Link>with link</Link>
       </Alert>;
   }
}

render(<AlertDemo/>, document.querySelector('#alert'));

Alert Container

Example

<div id="alert-container"></div>

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: <span>Message <Link href="#">with link</Link></span>, 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 (
      <div>
        <Button onClick={this.yetAnotherMessage}>Create another message</Button>

        <Container>
          {this.state.alerts.map(alert => {
            const {message, ...rest} = alert;
            return (
              <Alert
                {...rest}
                onCloseRequest={() => this.onCloseAlertClick(alert)}
                onClose={() => this.onCloseAlert(alert)}
              >
                {message}
              </Alert>
            );
          })}
        </Container>
      </div>
    );
  }
}

render(<AlertContainerDemo/>, document.getElementById('alert-container'));