scripts/apps/contacts/components/ContactInfo.tsx
import React from 'react';
import PropTypes from 'prop-types';
import {ItemContainer} from 'apps/contacts/components';
import {ContactName, Notes, JobTitle} from 'apps/contacts/components/fields';
import {isEmpty, findKey} from 'lodash';
import {gettext} from 'core/utils';
/**
* Media Contact Info - renders contact's information
*/
export const ContactInfo: React.StatelessComponent<any> = ({item, labelInactive}) => {
const meta = [];
const info = [];
const contactJobTitle = item.job_title ? <JobTitle item={item} /> : null;
const contactOrg = item.first_name && item.organisation ?
<span>{item.organisation}</span> : null;
info.push(
<div className="contact-header__container" key="contact-container">
<h3 key="contact-name">
<ContactName item={item} />
{contactJobTitle && <span title={item.job_title}>{contactJobTitle}</span>}
</h3>
<div key="contact-org">
<span className="item-info">{contactOrg}</span>
{!item.is_active && labelInactive && (
<span
title="inactive"
className="label label--draft label--hollow pull-right"
>
{gettext('Inactive')}
</span>
)}
</div>
</div>,
);
meta.push(
<li className="simple-list__item simple-list__item--with-icon" key="l-1">
<span key="2"><i key="2.1" className="icon-envelope" /></span>
<span key="3">
{!isEmpty(item.contact_email) && (<ItemContainer item={item} field="contact_email" />)}
</span>
</li>,
);
meta.push(
<li className="simple-list__item simple-list__item--with-icon" key="l-2">
<span key="10"><i key="10.1" className="icon-globe" /></span>
<span key="11">
{item.website && (<ItemContainer item={item} field="website" />)}
</span>
</li>,
);
meta.push(
<li className="simple-list__item simple-list__item--with-icon" key="l-3">
<span key="4"><i key="4.1" className="icon-phone" /></span>
<span key="5" className="dark">
{!isEmpty(item.contact_phone) && findKey(item.contact_phone, 'number') &&
(<ItemContainer item={item} field="contact_phone" />)
}
</span>
</li>,
);
meta.push(
<li className="simple-list__item simple-list__item--with-icon" key="l-4">
<span key="mobile-dt"><i key="mobile-icon" className="icon-mobile" /></span>
<span key="mobile-dd" className="dark">
{!isEmpty(item.mobile) && findKey(item.mobile, 'number') &&
(<ItemContainer item={item} field="mobile" />)
}
</span>
</li>,
);
meta.push(
<li className="simple-list__item simple-list__item--with-icon" key="l-5">
<span key="address-dt"><i key="address-link" className="icon-map-marker" /></span>
<span key="address-dd">
{item && (<ItemContainer item={item} field="location" />)}
</span>
</li>,
);
info.push(
<ul className="simple-list simple-list--dotted simple-list--no-border-b simple-list--no-padding-b" key="dl">
{meta}
<li className="simple-list__item simple-list__item--with-icon" key="l-6">
<i key="12.1" className="icon-info-sign" />
<span key="12.2">
{item.notes && (<Notes item={item} />)}
</span>
</li>
</ul>,
);
return (
<div className="sd-grid-item__content" x-ms-format-detection="none">{info}</div>
);
};
ContactInfo.propTypes = {
item: PropTypes.object,
labelInactive: PropTypes.bool,
};