Alert Service

Alert Service

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

button {
  margin-right: 8px !important;
}

import {render} from 'react-dom';
import React from 'react';
import Button from '@jetbrains/ring-ui/components/button/button';
import alert from '@jetbrains/ring-ui/components/alert-service/alert-service';

class AlertServiceDemo extends React.Component {
  componentDidMount () {
    setTimeout(() => {
      alert.message('A initial message', 5000);
      alert.error('Error message');
    }, 100);
  }

  showError = () => {
    this.lastKey = alert.error('Something wrong happened');
  }

  showRandomWarning = () => {
    this.lastKey = alert.warning(`Warning! Something bad is going to happen (${Math.random()})`, 30000);
  }

  showMessage = () => {
    this.lastKey = alert.message('This is just a message', 5000);
  }

  removeLastAlert = () => {
    alert.remove(this.lastKey);
  }

  render() {
    return (
      <div>
        <Button onClick={this.showError}>Show error</Button>
        <Button onClick={this.showMessage} primary>Show message</Button>
        <Button onClick={this.showRandomWarning}>Show warning</Button>
        <Button onClick={this.removeLastAlert}>Remove last alert</Button>
      </div>
    );
  }
}

render(<AlertServiceDemo/>, document.getElementById('alert-service'));