content: import React from 'react';
  
  import {PureComponent} from '../base-components';
  import {decorate} from '../utils/plugins';
  
  import Notification_ from './notification';
  
  const Notification = decorate(Notification_);
  
  export default class Notifications extends PureComponent {
    template(css) {
      return (
        <div className={css('view')}>
          {this.props.customChildrenBefore}
          {this.props.fontShowing && (
            <Notification
              key="font"
              backgroundColor="rgba(255, 255, 255, .2)"
              text={`${this.props.fontSize}px`}
              userDismissable={false}
              onDismiss={this.props.onDismissFont}
              dismissAfter={1000}
            />
          )}
  
          {this.props.resizeShowing && (
            <Notification
              key="resize"
              backgroundColor="rgba(255, 255, 255, .2)"
              text={`${this.props.cols}x${this.props.rows}`}
              userDismissable={false}
              onDismiss={this.props.onDismissResize}
              dismissAfter={1000}
            />
          )}
  
          {this.props.messageShowing && (
            <Notification
              key="message"
              backgroundColor="#FE354E"
              text={this.props.messageText}
              onDismiss={this.props.onDismissMessage}
              userDismissable={this.props.messageDismissable}
              userDismissColor="#AA2D3C"
            >
              {this.props.messageURL ? (
                [
                  this.props.messageText,
                  ' (',
                  <a
                    key="link"
                    style={{color: '#fff'}}
                    onClick={ev => {
                      window.require('electron').shell.openExternal(ev.target.href);
                      ev.preventDefault();
                    }}
                    href={this.props.messageURL}
                  >
                    more
                  </a>,
                  ')'
                ]
              ) : null}
            </Notification>
          )}
  
          {this.props.updateShowing && (
            <Notification
              key="update"
              backgroundColor="#7ED321"
              text={`Version ${this.props.updateVersion} ready`}
              onDismiss={this.props.onDismissUpdate}
              userDismissable
            >
              Version <b>{this.props.updateVersion}</b> ready.
              {this.props.updateNote && ` ${this.props.updateNote.trim().replace(/\.$/, '')}`} (<a
                style={{color: '#fff'}}
                onClick={ev => {
                  window.require('electron').shell.openExternal(ev.target.href);
                  ev.preventDefault();
                }}
                href={`https://github.com/zeit/hyper/releases/tag/${this.props.updateVersion}`}
              >
                notes
              </a>).{' '}
              <a
                style={{
                  cursor: 'pointer',
                  textDecoration: 'underline',
                  fontWeight: 'bold'
                }}
                onClick={this.props.onUpdateInstall}
              >
                Restart
              </a>.{' '}
            </Notification>
          )}
          {this.props.customChildren}
        </div>
      );
    }
  
    styles() {
      return {
        view: {
          position: 'fixed',
          bottom: '20px',
          right: '20px'
        }
      };
    }
  }
  