UNPKG

cluedin-widget

Version:

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

99 lines (83 loc) 4.14 kB
import React, { Component } from 'react'; import Widget from '../../../core/components/generics/widget.jsx'; import Overlay from '../../../core/components/generics/overlay.jsx'; import NoEntities from '../../../core/components/entityRelated/NoEntities.jsx'; import registry from '../../../core/registry'; import config from '../../../core/config'; import { connect } from 'react-redux'; import EntityLink from '../../../core/components/entityRelated/EntityLink.jsx' import iso from '../../../iso'; import SocialMenu from '../../../core/components/entityRelated/SocialMenu.jsx'; import PropertyViewer from '../../../core/components/entityRelated/EntityPropertyViewer.jsx'; import { findFromKey, makeGoogleMapUrl } from '../../../core/helpers/properties.jsx' import FollowWidget from '../../../core/components/entityRelated/FollowWidget.jsx'; import Loading from '../../../core/components/generics/loading.jsx'; const collectionHelper = iso.collection; class PersonProfile extends Component { render() { let locationHtml; const { isFetchingEntity, entity } = this.props; if ( !entity ) { var isLoading = true; var style = { height: '400px' }; return (<Widget loading={isLoading}> <div style={style}><Loading></Loading></div> </Widget>); } if ( !entity.hasPreview ) { entity.logoUrl = config.image.defaultProfile; } var jobtitleProp = findFromKey( entity.properties, 'jobtitle' ); var locationProp = findFromKey( entity.properties, 'location' ); var emailProp = findFromKey( entity.properties, 'email' ); var phoneNumberProp = findFromKey( entity.properties, 'phonenumber' ); var emailHtml = ( emailProp && emailProp.value ) ? ( <div className="cluedIn_personProfile_withIcon cluedIn_personProfile_email"> <a target="__blank" href={ "mailto:" + emailProp.value }><i className="fa fa-envelope-o"></i><span>{emailProp.value}</span></a> </div>) : ''; var jobTitleHtml = jobtitleProp ? ( <div className="cluedIn_personProfile_jobTitle">{jobtitleProp.value}</div>) : ''; var locationValue = locationProp ? locationProp.value : ''; if ( locationValue ) { locationHtml = (<div className="cluedIn_personProfile_withIcon cluedIn_personProfile_address"> <a target="__blank" href={makeGoogleMapUrl(locationValue)}><i className="fa fa-map-marker"></i><span>{locationValue || NA}</span></a> </div>) } var phoneNumberPropHtml = (phoneNumberProp && phoneNumberProp.value) ? ( <div className="cluedIn_personProfile_withIcon cluedIn_personProfile_phone"> <a target="__blank" href={ "tel:" + phoneNumberProp.value }><i className="fa fa-phone"></i><span>{phoneNumberProp.value}</span></a> </div>) : ''; return (<Widget> <div className="cluedIn_personProfile"> <div className="cluedIn_personProfile_image"> <img className="cluedIn_img_responsive" src={entity.logoUrl}/> </div> <div className="cluedIn_personProfile_name"> <EntityLink entity={entity}></EntityLink> </div> {jobTitleHtml} {emailHtml} {phoneNumberPropHtml} {locationHtml} <div className="cluedIn_personProfile_social"> <SocialMenu social={entity.social}></SocialMenu> </div> <FollowWidget entity={entity}></FollowWidget> <PropertyViewer entity={entity}></PropertyViewer> </div> </Widget>); } } function select( state ) { return { entity: state.entity.selectedEntity, isFetchingEntity: state.entity.isFetchingEntity }; } registry.register( 'PersonProfile', connect( select )( PersonProfile ) );