cluedin-widget/core/components/entityRelated/EntityMainBar.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, PropTypes } from 'react';
import radium from 'radium';
import ContentCopy from 'material-ui/svg-icons/content/content-copy';
import BookMarkEmpty from 'material-ui/svg-icons/action/bookmark-border';
import ArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
import GridIcon from 'material-ui/svg-icons/image/grid-on';
import { getName, getIcon } from '../../helpers/entity';

const EntityMainBarStyle = {
  mainBar: {
    background: '#fff',
    width: '100%',
    position: 'relative',
    lineHeight: '40px',
    boxSizing: 'border-box',
    padding: 0,
    marginBottom: '5px',
    height: '40px',
    boxShadow: '0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)',
  },
  actions: {
    position: 'absolute',
    right: 0,
    top: 0,
    paddingRight: '15px',
  },
  mainBarList: {
    margin: 0,
    padding: 0,
  },
  mainBarListItem: {
    listStyle: 'none',
    float: 'left',
    padding: 0,
    margin: 0,
  },
  mainBarListItemLink: {
    lineHeight: '40px',
    color: '#666',
    padding: '13px 15px 13px 15px',
    ':hover': {
      background: '#f2f2f2',
    },
  },
};

const copyToClipboard = (value) => {
  // Create a "hidden" input
  var aux = document.createElement('input');

  // Assign it the value of the specified element
  aux.setAttribute('value', value);

  // Append it to the body
  document.body.appendChild(aux);

  // Highlight its content
  aux.select();

  // Copy the highlighted text
  document.execCommand('copy');

  // Remove it from the body
  document.body.removeChild(aux);
};

class EntityMainBar extends Component {
  copyLink() {
    copyToClipboard(window.location.href);
  }

  render() {
    const {
      widgetConfiguration,
      onConfigureLayoutClick,
      onBack,
      entity,
    } = this.props;

    let backIcon;
    let iconStyle = {verticalAlign: 'middle', paddingRight: '5px', width: '14px'};
    let followers;
    let pin;
    let entityName;
    let entityTitleContent = (
      <li key="loading" style={[EntityMainBarStyle.mainBarListItem, { padding: '0 15px' }]}>
        loading...
      </li>
    );

    if (widgetConfiguration.entityType === 'HomeScreen') {
      entityTitleContent = (
        <li key="loading" style={[EntityMainBarStyle.mainBarListItem, { padding: '0 15px' }]}>
          HomeScreen
        </li>
      );
    } else {

      if (entity) {

        const icon = getIcon(entity.data.entityType);
        let name = getName(entity.data.entityType);

        entityName = (
          <span style={{ fontStyle: 'italic', marginLeft: '15px' }}>
          {entity.name}
        </span>
        );

        entityTitleContent = (
          <li key="name" style={[EntityMainBarStyle.mainBarListItem, { padding: '0 15px' }]}>
            <span dangerouslySetInnerHTML={{ __html: icon }}></span>
            <span
              style={{
                fontSize: '12px',
                marginLeft: '5px',
                color: '#666',
                fontWeight: 'bold',
                letterSpacing: '0.04375em',
                textTransform: 'uppercase',
              }}
            >
              {name}
            </span>
            {entityName}
          </li>
        );
        followers = (
          <li key="followers" style={EntityMainBarStyle.mainBarListItem}>
            <a key="followersLink" style={EntityMainBarStyle.mainBarListItemLink} href="#">
              <strong style={{ marginRight: '5px' }}>
                {entity.NumberOfFollowers}
              </strong>
              Followers
            </a>
          </li>
        );

        pin = (
          <li key="pin" style={EntityMainBarStyle.mainBarListItem}>
            <a key="pinLink" onClick={()=>{alert('toto')}} style={EntityMainBarStyle.mainBarListItemLink}>
              <BookMarkEmpty style={iconStyle}/>
              Pin
            </a>
          </li>
        );
      } else {
        entityName = (<span>Loading...</span>);
      }

      backIcon = (
        <li key="back" style={[EntityMainBarStyle.mainBarListItem, { borderRight: '1px solid #ccc' }]}>
          <a key="backLink" onClick={onBack} style={EntityMainBarStyle.mainBarListItemLink}>
            <ArrowBack style={iconStyle}/>
          </a>
        </li>
      );
    }

    return (
      <div style={EntityMainBarStyle.mainBar}>
        <ul style={EntityMainBarStyle.mainBarList}>
          {backIcon}
          {entityTitleContent}
        </ul>
        <div style={EntityMainBarStyle.actions} styleName="EntityMainBarActions">
          <ul
            style={EntityMainBarStyle.mainBarList}
          >
            {followers}
            {pin}
            <li key="copy" style={EntityMainBarStyle.mainBarListItem}>
              <a
                onClick={this.copyLink.bind(this)}
                key="copyLink"
                style={EntityMainBarStyle.mainBarListItemLink}
              >
                <ContentCopy style={iconStyle}/>
                Copy Link
              </a>
            </li>
            <li key="configureLayout" style={EntityMainBarStyle.mainBarListItem}>
              <a key="configureLayoutLink"
                 style={EntityMainBarStyle.mainBarListItemLink}
                 onClick={onConfigureLayoutClick}
              >
                <GridIcon style={iconStyle}/>
                Configure Layout
              </a>
            </li>
          </ul>
        </div>
      </div>
    );
  }
}

EntityMainBar.propTypes = {
  widgetConfiguration: PropTypes.object,
  onConfigureLayoutClick: PropTypes.func,
  onBack: PropTypes.func,
};

export default radium(EntityMainBar);