cluedin-widget/core/components/generics/alert.jsx

This project contains all the pages needed for browsing entities and searching them. The aim is to replace the CluedIn.Webapp project with this one when all the pages ( including the Admin page ) will be ported to REACT.

import React, { Component } from 'react';
import radium from 'radium';
import FontIcon from 'material-ui/FontIcon';
import Close from 'material-ui/svg-icons/navigation/close';

const AlertStyle = {
  alert: {
    fontSize: '14px',
    margin: 0,
    padding: 0,
    boxSizing: 'border-box',
    position: 'relative',
  },
  info: {
    color: '#fff',
    backgroundColor: 'rgb(49, 112, 143)',
    borderColor: 'rgb(49, 112, 143)',
  },
  danger: {
    backgroundColor: '#F44336',
    color: '#fff',
  },
  warning: {
    backgroundColor: '#FF9800',
    color: '#fff',
  },
  success: {
    backgroundColor: '#009688',
    color: '#fff',
  },
};

const closeStyle = {
  fontSize: '20px',
  color: '#fff',
};

const closeWrapperStyle = {
  position: 'absolute',
  cursor: 'pointer',
  right: '30px',
  top: '13px',
  ':hover': {
    opacity: '0.6',
  },
}

const infoStyle = {
  fontSize: '24px',
  color: '#fff',
  position: 'absolute',
  left: '38px',
  top: '13px',
};

const alertMessageStyle = {
  display: 'inline-block',
  lineHeight: '50px',
  boxSizing: 'border-box',
  marginLeft: '65px',
  height: '50px',
  width: '100%',
};

class Alert extends Component {

  constructor(props) {
    super(props);

    this.state = {
      isOpen: true,
    };
  }

  close() {
    this.setState({
      isOpen: false,
    });
  }

  render() {
    const { type, showClose } = this.props;
    const { isOpen } = this.state;

    let classNames = [AlertStyle.alert];
    let closeContent;

    if (showClose) {
      closeContent = (
        <div key="closeIcon" onClick={this.close.bind(this)} style={closeWrapperStyle}><Close style={closeStyle}/>
        </div>);
    }

    if (type === 'danger') {
      classNames.push(AlertStyle.danger);
    } else if (type === 'warning') {
      classNames.push(AlertStyle.warning);
    } else if (type === 'success') {
      classNames.push(AlertStyle.success);
    } else {
      classNames.push(AlertStyle.info);
    }

    if (!isOpen) {
      classNames.push({
        display: 'none',
      });
    }

    return (<div style={classNames}>
      {closeContent}
      <FontIcon style={infoStyle} className="fa fa-info" />
      <div style={alertMessageStyle}>
        {this.props.children}
      </div>
    </div>);
  }
}

export default radium(Alert);