import './demo4.css';
import Message from '..';
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from '../..';

const showSuccess = () => Message.show({
  type: 'success',
  title: 'success',
  closeable: true,
  duration: 0,
});

const showWarning = () => Message.warning('warning');

const showError = () => Message.error({
  title: 'error',
  duration: 0,
});

const showNotice = () => Message.notice({
  title: 'notice',
  closeable: true,
  duration: 0,
});

const showHelp = () => Message.help({
  title: 'message',
  content: 'helphelphelphelphelphelphelphelphelphelphelphelp',
  closeable: true,
  duration: 0,
});

const showLoading = () => Message.loading({
  content: 'loadingloadingloadingloadingloading',
  closeable: true,
  duration: 0,
});

ReactDOM.render(
  <div className="message-toast-quick-demo">
    <Button type="primary" onClick={showSuccess}>
      可关闭success
    </Button>
    <Button type="primary" onClick={showWarning}>
      便捷warning
    </Button>
    <Button type="primary" onClick={showError}>
      不可关闭error
    </Button>
    <br />
    <Button type="primary" onClick={showNotice}>
      可关闭notice
    </Button>
    <Button type="primary" onClick={showHelp}>
      标题+内容help
    </Button>
    <Button type="primary" onClick={showLoading}>
      内容loading
    </Button>
  </div>,
  document.getElementById('message-demo-3'),
);