goldfish-search/src/components/persona/Persona.jsx

A SharePoint 2013 inline People Search component

import React from 'react';
import cssModules from 'react-css-modules';
import styles from './persona.css';
require('./lync');

/*
  Antonio Lopes | ISC License
  antonio.lopes@arup.com
*/
class Persona extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      presence: 'offline',
    };

    this.updatePresence = this.updatePresence.bind(this);
  }

  componentDidMount() {
    window.addEventListener('LyncStatusUpdate', this.updatePresence.bind(this));

    const contactRequest = new CustomEvent('createLyncContact',
      { detail: { sip: this.props.member.email } }
    );

    window.dispatchEvent(contactRequest);
  }

  componentDidUpdate() {
    if (this.state === null) {
      this.state = {
        presence: 'offline',
      };
    }

    const syncPersonaCard = new CustomEvent('syncPersonaCard',
      { detail: { presence: this.state.presence } }
    );

    window.dispatchEvent(syncPersonaCard);
  }

  componentWillUnmount() {
    window.removeEventListener('LyncStatusUpdate', this.updatePresence);
  }

  updatePresence(e) {
    if (this.props.member.email === e.detail.sip) {
      this.setState({ presence: e.detail.status });
    }
  }

  getBase64DefaultThumbnail() {
    return `data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQyMS4xOTcgNDIxLjE5NyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDIxLjE5NyA0MjEuMTk3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCI+CjxnPgoJPGc+CgkJPHBhdGggc3R5bGU9ImZpbGw6I0ZGRDdBMzsiIGQ9Ik0xMzguMjEyLDI2MS40NjJjMTQuNzE2LTkuNDc1LDEzLjA3LTM3LjY3NSwxMy4wNy00NC4yNTVoMTE4LjQ0NmMwLDYuNTgtMS44MjUsMzQuNzgsMTIuODksNDQuMjU1ICAgIGwtNzIuMTEzLDgwLjc3MUwxMzguMjEyLDI2MS40NjJ6Ii8+Cgk8L2c+Cgk8Zz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojRkRDODhFOyIgZD0iTTI1Ni41NjgsMjg5LjU5bDI2LjA1MS0yOC4xMjljLTE0LjcxNi05LjQ3NC0xMi44OS0zNy42NzUtMTIuODktNDQuMjU1SDE1MS4yODMgICAgQzE1OS43ODEsMjQxLjYzOSwyMTUuOTg5LDI4My41NTgsMjU2LjU2OCwyODkuNTl6Ii8+Cgk8L2c+Cgk8Zz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojRkZFMUIyOyIgZD0iTTMwMi42MywxMzEuNjYzYzAsNTIuNjk2LTMwLjM0MywxMTguNDQ2LTkyLjEyNCwxMTguNDQ2cy05Mi4xMjQtNjUuNzUtOTIuMTI0LTExOC40NDYgICAgczQxLjI0Ni03Mi4zODQsOTIuMTI0LTcyLjM4NFMzMDIuNjMsNzguOTY3LDMwMi42MywxMzEuNjYzeiIvPgoJPC9nPgoJPGc+CgkJPHBhdGggc3R5bGU9ImZpbGw6I0EyQ0RFMjsiIGQ9Ik0zNjEuODUzLDQyMS4xOTdjMTAuOTAzLDAsMTkuNzQxLTguODM4LDE5Ljc0MS0xOS43NDF2LTYzLjQ2MyAgICBjMC0yOC45NTQtMjIuNTYyLTU5Ljg2NC01MC4xMzgtNjguNjg3bC00MS4xNjgtMTMuMTczYy0yMi4xNDksMTYuOTM2LTUzLjgwMiw0MC4wMzktNzkuNzgyLDQwLjAzOXMtNTcuNjMzLTIzLjEwMy03OS43ODItNDAuMDM5ICAgIGwtNDEuMTY4LDEzLjE3M2MtMjcuNTc2LDguODIzLTUwLjEzOCwzOS43MzMtNTAuMTM4LDY4LjY4N3Y2My40NjNjMCwxMC45MDMsOC44MzgsMTkuNzQxLDE5Ljc0MSwxOS43NDFIMzYxLjg1M3oiLz4KCTwvZz4KCTxnPgoJCTxwYXRoIHN0eWxlPSJmaWxsOiM1NDU0NjU7IiBkPSJNMTcxLjAyNCwxOS43OTdjLTYuMTY5LDAtNi44NzUsMC0xMy4xNjEsMGMtMjUuNDM5LDAtNDYuMDYyLDIwLjg1Ni00Ni4wNjIsNDYuMjk2ICAgIGMwLDIzLjYyLDYuNTgsNjUuNTcsNi41OCw2NS41N3M3LjQwMy0zMy4zMTMsMzkuNDgyLTQ2LjA2MkMxNzcuNDY3LDc3LjgwOSwxNzEuMDI0LDE5Ljc5NywxNzEuMDI0LDE5Ljc5N3oiLz4KCTwvZz4KCTxnPgoJCTxwYXRoIHN0eWxlPSJmaWxsOiM1NDU0NjU7IiBkPSJNMTY0LjQ0NCwyMC4wMzFjMjYuNDU4LTQwLjY3NSw5NC41OTItNi44MTQsMTM4LjE4Ny02LjgxNGM2LjU4LDkuNDU5LDExLjEwNCw4MS4wMiwwLDExOC40NDYgICAgbC0xOS43NDEtMzIuOTAyYzAsMC02MC4zMiwyMi4xNjgtMTI1LjAyNi0xMi45MjciLz4KCTwvZz4KCTxnPgoJCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkUxQjI7IiBkPSJNMTIxLjU0NywxNDQuODIzYy05Ljg2NC0yLjQ2OC0xNi4zMjYsMi44MDUtMTYuMzI2LDEzLjE2MWMwLDEzLjcwOSwxMy4yNjUsNDcuMjk2LDI3LjIxLDI2LjMyMSAgICBTMTIxLjU0NywxNDQuODIzLDEyMS41NDcsMTQ0LjgyM3oiLz4KCTwvZz4KCTxnPgoJCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkUxQjI7IiBkPSJNMjk3Ljk3LDE0NC44MjNjMTAuNzY3LTIuNDY4LDE3LjgyMSwyLjgwNSwxNy44MjEsMTMuMTYxYzAsMTMuNzA5LTE0LjQ3OSw0Ny4yOTYtMjkuNzAxLDI2LjMyMSAgICBDMjcwLjg2OCwxNjMuMzMsMjk3Ljk3LDE0NC44MjMsMjk3Ljk3LDE0NC44MjN6Ii8+Cgk8L2c+Cgk8Zz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojMjkzOTRBOyIgZD0iTTIyMy42NjYsMzE2LjI4MmMwLDMuNjE5LTIuOTYxLDYuNTgtNi41OCw2LjU4aC0xMy4xNjFjLTMuNjE5LDAtNi41OC0yLjk2MS02LjU4LTYuNTh2LTEzLjE2MSAgICBjMC0zLjYxOSwyLjk2MS02LjU4LDYuNTgtNi41OGgxMy4xNjFjMy42MTksMCw2LjU4LDIuOTYxLDYuNTgsNi41OFYzMTYuMjgyeiIvPgoJPC9nPgoJPGc+CgkJPHBvbHlnb24gc3R5bGU9ImZpbGw6IzI5Mzk0QTsiIHBvaW50cz0iMjE5LjU0NiwzMTkuMTYxIDIxMC41MDYsMzIyLjg2MiAyMDEuNDY1LDMxOS4xNjEgMTk3LjM0NSw0MjAuNzk4IDIyMy42NjYsNDIwLjc5OCAgICIvPgoJPC9nPgoJPGc+CgkJPHBhdGggc3R5bGU9ImZpbGw6I0I1RTBGMDsiIGQ9Ik0yMTAuNTA2LDI5Ni4xNzFsLTI3LjQ1NiwyNy40NTZjLTIuODU5LDIuODU5LTcuNTk2LDIuNDg3LTkuOTc1LTAuNzgzbC00OC4xMTMtNjYuMTU2ICAgIGwxNS4zMjYtMTUuMzI2YzIuNDc1LTIuNDc1LDYuNDU0LTIuNTc5LDkuMDU1LTAuMjM4TDIxMC41MDYsMjk2LjE3MXoiLz4KCTwvZz4KCTxnPgoJCTxwYXRoIHN0eWxlPSJmaWxsOiNCNUUwRjA7IiBkPSJNMjEwLjUwNiwyOTYuMTcxbDI3LjQ1NiwyNy40NTZjMi44NTksMi44NTksNy41OTYsMi40ODcsOS45NzUtMC43ODNsNDguMTEzLTY2LjE1NmwtMTUuMzI2LTE1LjMyNiAgICBjLTIuNDc1LTIuNDc1LTYuNDU0LTIuNTc5LTkuMDU1LTAuMjM4TDIxMC41MDYsMjk2LjE3MXoiLz4KCTwvZz4KCTxnPgoJCTxwYXRoIHN0eWxlPSJmaWxsOiM0QTY5OEU7IiBkPSJNMzMxLjY0MSwyNjkuMzA1bC0zNS44NzctMTEuNDhsLTAuMDAyLDBsLTg1LjE2MywxMDUuMDEybC04NS4xNjQtMTA1LjAxMmwtMC4wMDIsMGwtMzUuODc3LDExLjQ4ICAgIGMtMjcuNTc2LDguODIzLTUwLjEzOCwzOS43MzMtNTAuMTM4LDY4LjY4N3Y2My40NjRjMCwxMC4xMDgsNy42MjcsMTguMzQ3LDE3LjQyMywxOS41MDdoMTUzLjQ4aDAuNTU2aDE1My40OCAgICBjOS43OTctMS4xNiwxNy40MjMtOS4zOTksMTcuNDIzLTE5LjUwN3YtNjMuNDY0QzM4MS43NzksMzA5LjAzOCwzNTkuMjE3LDI3OC4xMjgsMzMxLjY0MSwyNjkuMzA1eiIvPgoJPC9nPgoJPGc+CgkJPGc+CgkJCTxwb2x5Z29uIHN0eWxlPSJmaWxsOiM0MTYxODU7IiBwb2ludHM9IjI1OC43MSw0MjAuOTYzIDI2NS4yOSw0MjAuOTYzIDI2NS4yOSwyOTUuMzk4IDI1OC43MSwzMDMuNTEzICAgICIvPgoJCTwvZz4KCQk8Zz4KCQkJPHBvbHlnb24gc3R5bGU9ImZpbGw6IzQxNjE4NTsiIHBvaW50cz0iMjE3LjU4OSw0MjAuOTYzIDIyNC4xNjksNDIwLjk2MyAyMjQuMTY5LDM0Ni4xMDQgMjE3LjU4OSwzNTQuMjE4ICAgICIvPgoJCTwvZz4KCQk8Zz4KCQkJPHBvbHlnb24gc3R5bGU9ImZpbGw6IzQxNjE4NTsiIHBvaW50cz0iMjM4LjE0OSw0MjAuOTYzIDI0NC43Myw0MjAuOTYzIDI0NC43MywzMjAuNzUxIDIzOC4xNDksMzI4Ljg2NSAgICAiLz4KCQk8L2c+CgkJPGc+CgkJCTxwb2x5Z29uIHN0eWxlPSJmaWxsOiM0MTYxODU7IiBwb2ludHM9IjI5OS44MzEsNDIwLjk2MyAzMDYuNDExLDQyMC45NjMgMzA2LjQxMSwyNjEuMjMyIDI5OS44MzEsMjU5LjEyNiAgICAiLz4KCQk8L2c+CgkJPGc+CgkJCTxwb2x5Z29uIHN0eWxlPSJmaWxsOiM0MTYxODU7IiBwb2ludHM9IjE5Ny4wMjgsNDIwLjk2MyAyMDMuNjA5LDQyMC45NjMgMjAzLjYwOSwzNTQuMjE4IDE5Ny4wMjgsMzQ2LjEwNCAgICAiLz4KCQk8L2c+CgkJPGc+CgkJCTxwYXRoIHN0eWxlPSJmaWxsOiM0MTYxODU7IiBkPSJNMzQwLjk1MiwyNzMuMjM2djE0Ny43MjdoNi41OFYyNzcuMTYyQzM0NS4zOTYsMjc1LjcyMiwzNDMuMjA0LDI3NC40MDYsMzQwLjk1MiwyNzMuMjM2eiIvPgoJCTwvZz4KCQk8Zz4KCQkJPHBvbHlnb24gc3R5bGU9ImZpbGw6IzQxNjE4NTsiIHBvaW50cz0iMzIwLjM5MiwyNjUuNzA1IDMyMC4zOTIsNDIwLjk2MyAzMjYuOTcyLDQyMC45NjMgMzI2Ljk3MiwyNjcuODExICAgICIvPgoJCTwvZz4KCQk8Zz4KCQkJPHBvbHlnb24gc3R5bGU9ImZpbGw6IzQxNjE4NTsiIHBvaW50cz0iMjc5LjI3MSwyNzguMTYgMjc5LjI3MSw0MjAuOTYzIDI4NS44NTEsNDIwLjk2MyAyODUuODUxLDI3MC4wNDUgICAgIi8+CgkJPC9nPgoJCTxnPgoJCQk8cG9seWdvbiBzdHlsZT0iZmlsbDojNDE2MTg1OyIgcG9pbnRzPSI5NC4yMjUsNDIwLjk2MyAxMDAuODA2LDQyMC45NjMgMTAwLjgwNiwyNjUuNzA1IDk0LjIyNSwyNjcuODExICAgICIvPgoJCTwvZz4KCQk8Zz4KCQkJPHBvbHlnb24gc3R5bGU9ImZpbGw6IzQxNjE4NTsiIHBvaW50cz0iMTc2LjQ2OCw0MjAuOTYzIDE4My4wNDgsNDIwLjk2MyAxODMuMDQ4LDMyOC44NjUgMTc2LjQ2OCwzMjAuNzUxICAgICIvPgoJCTwvZz4KCQk8Zz4KCQkJPHBhdGggc3R5bGU9ImZpbGw6IzQxNjE4NTsiIGQ9Ik01My4xMDQsMjk3LjYzNXYxMjIuNDk5YzEuMjAyLDAuMzg2LDIuNDQ3LDAuNjc2LDMuNzM2LDAuODI5aDIuODQ0VjI4OS4zNzEgICAgIEM1Ny4zMjMsMjkxLjk4LDU1LjEyMSwyOTQuNzM4LDUzLjEwNCwyOTcuNjM1eiIvPgoJCTwvZz4KCQk8Zz4KCQkJPHBhdGggc3R5bGU9ImZpbGw6IzQxNjE4NTsiIGQ9Ik0zNjEuNTEzLDQyMC45NjNoMi44NDRjMS4yOS0wLjE1MywyLjUzNS0wLjQ0MywzLjczNy0wLjgyOVYyOTcuNjM1ICAgICBjLTIuMDE3LTIuODk3LTQuMjE5LTUuNjU1LTYuNTgtOC4yNjRWNDIwLjk2M3oiLz4KCQk8L2c+CgkJPGc+CgkJCTxwYXRoIHN0eWxlPSJmaWxsOiM0MTYxODU7IiBkPSJNNzMuNjY1LDI3Ny4xNjJ2MTQzLjgwMWg2LjU4VjI3My4yMzZDNzcuOTkzLDI3NC40MDYsNzUuODAxLDI3NS43MjIsNzMuNjY1LDI3Ny4xNjJ6Ii8+CgkJPC9nPgoJCTxnPgoJCQk8cG9seWdvbiBzdHlsZT0iZmlsbDojNDE2MTg1OyIgcG9pbnRzPSIxNTUuOTA3LDQyMC45NjMgMTYyLjQ4Nyw0MjAuOTYzIDE2Mi40ODcsMzAzLjUxMyAxNTUuOTA3LDI5NS4zOTkgICAgIi8+CgkJPC9nPgoJCTxnPgoJCQk8cG9seWdvbiBzdHlsZT0iZmlsbDojNDE2MTg1OyIgcG9pbnRzPSIxMzUuMzQ2LDQyMC45NjMgMTQxLjkyNiw0MjAuOTYzIDE0MS45MjYsMjc4LjE2IDEzNS4zNDYsMjcwLjA0NiAgICAiLz4KCQk8L2c+CgkJPGc+CgkJCTxwb2x5Z29uIHN0eWxlPSJmaWxsOiM0MTYxODU7IiBwb2ludHM9IjExNC43ODYsMjYxLjIzMiAxMTQuNzg2LDQyMC45NjMgMTIxLjM2Niw0MjAuOTYzIDEyMS4zNjYsMjU5LjEyNiAgICAiLz4KCQk8L2c+Cgk8L2c+Cgk8Zz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojMzk1QTdGOyIgZD0iTTk3LjgyNCwyOTcuMjYybDIzLjEyNywyLjg5MXYxNy4wMTdjMCwyLjEyNywxLjAyOCw0LjEyMiwyLjc1OSw1LjM1N2w4Ni43OTUsNjEuOTAybDAuMDkzLTIxLjU5MiAgICBsLTg1LjYzNy0xMDYuMTQ4TDkyLjA2LDI2OC43MjV2MjIuMDA4QzkyLjA2LDI5NC4wNTEsOTQuNTMxLDI5Ni44NSw5Ny44MjQsMjk3LjI2MnoiLz4KCTwvZz4KCTxnPgoJCTxwYXRoIHN0eWxlPSJmaWxsOiMzOTVBN0Y7IiBkPSJNMzIzLjE5LDI5Ny4yNjJsLTIzLjEyNywyLjg5MXYxNy4wMTdjMCwyLjEyNy0xLjAyOCw0LjEyMi0yLjc1OSw1LjM1N2wtODYuNzk1LDYxLjkwMiAgICBsLTAuMDkzLTIxLjU5Mmw4NS42MzctMTA2LjE0OGwzMi45MDIsMTIuMDM2djIyLjAwOEMzMjguOTU0LDI5NC4wNTEsMzI2LjQ4MywyOTYuODUsMzIzLjE5LDI5Ny4yNjJ6Ii8+Cgk8L2c+Cgk8Zz4KCQk8cG9seWdvbiBzdHlsZT0iZmlsbDojMzk1QTdGOyIgcG9pbnRzPSIyMTAuNDE1LDM3MC41NjMgMjAxLjQ1OCwzNjkuOTggMjA3LjQ5LDQyMC45NjMgMjEwLjQxNSw0MjAuOTYzIDIxMy4zNDEsNDIwLjk2MyAgICAgMjE5LjM3MywzNjkuOTggICAiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K`;
  }

  render() {
    if (this.state !== null) {
      const presence = `ms-Persona--${this.state.presence}`;
      const img = typeof window.fakeAjaxCalls !== 'undefined' ? this.getBase64DefaultThumbnail() : `/_layouts/15/userphoto.aspx?size=S&username=${this.props.member.email}`;

      return (
        <div className="contact" title={this.state.name}>
          <div className={`ms-Persona ms-Persona--square ${presence} ms-Persona--xs`}>
            <div className="ms-Persona-imageArea">
              <i className="ms-Persona-placeholder ms-Icon ms-Icon--person"></i>
                <img className="ms-Persona-image" src={img} />
            </div>
            <div className="ms-Persona-presence"></div>
            { this.props.names === false ? <div className="ms-Persona-details">
              <div className="ms-Persona-primaryText">
                {this.props.member.name}
              </div>
            </div> : null }
          </div>
        </div>
      );
    }
  }
}

Persona.propTypes = {
  names: React.PropTypes.bool,
  member: React.PropTypes.object.isRequired,
};

export default cssModules(Persona, styles, { allowMultiple: true });