cluedin-widget/core/components/entities/personDetailed.jsx

This is the project for creating and managing widgets in CluedIn.

import React, { Component } from 'react'
import ProviderIcons from '../entityRelated/providerIcons.jsx'
import EntityIcon from '../entityRelated/EntityIcon.jsx'
import EntitySubject from '../entityRelated/EntitySubject.jsx'
import EntityLink from '../entityRelated/EntityLink.jsx'
import EntityProfileImageLink from '../entityRelated/EntityProfileImageLink.jsx'
import SocialMenu from '../entityRelated/SocialMenu.jsx'
import { findFromKey } from '../../helpers/properties.jsx'
const NA = 'N/A';
export default class PersonDetailed extends Component {

    render() {
        const { entity } = this.props;
        let locationHtml;

        var jobtitleProp = findFromKey( entity.properties, 'jobtitle' );
        var locationProp = findFromKey( entity.properties, 'location' );

        var jobtitleValue = jobtitleProp ? jobtitleProp.value : NA;
        var locationValue = locationProp ? locationProp.value : NA;

        if ( locationValue ) {
            locationHtml = (<div className="cluedIn_entity_person_list_address">
                <i className="fa fa-map-marker"></i><span>{locationValue || NA}</span>
            </div>)
        }

        return (<div className="cluedIn_entity_person_list_item">
            <div className="cluedIn_row">
                <div className="cluedIn_col s2">
                    <EntityProfileImageLink entity={entity}></EntityProfileImageLink>
                </div>
                <div className="cluedIn_col s10">
                    <div className="cluedIn_entity_person_list_name">
                        <EntityLink entity={entity}></EntityLink>
                    </div>
                    <div className="cluedIn_entity_person_list_title">{jobtitleValue}</div>
                    {locationHtml}
                    <SocialMenu social={entity.social}></SocialMenu>
                </div>
            </div>
        </div>);
    }
}