You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
168 lines
4.3 KiB
TypeScript
168 lines
4.3 KiB
TypeScript
7 years ago
|
import * as React from 'react';
|
||
7 years ago
|
import * as moment from 'moment';
|
||
|
|
||
7 years ago
|
import { List, ListItem, ListDivider as Divider } from '../widgets/List';
|
||
7 years ago
|
import IconHome from 'material-ui/svg-icons/action/home';
|
||
|
import IconDate from 'material-ui/svg-icons/action/date-range';
|
||
7 years ago
|
import CommunicationCall from 'material-ui/svg-icons/communication/call';
|
||
|
import CommunicationChatBubble from 'material-ui/svg-icons/communication/chat-bubble';
|
||
|
import CommunicationEmail from 'material-ui/svg-icons/communication/email';
|
||
|
import { indigo500 } from 'material-ui/styles/colors';
|
||
|
|
||
7 years ago
|
import PimItemHeader from './PimItemHeader';
|
||
|
|
||
7 years ago
|
import { ContactType } from '../pim-types';
|
||
7 years ago
|
|
||
7 years ago
|
class Contact extends React.PureComponent {
|
||
7 years ago
|
props: {
|
||
7 years ago
|
contact?: ContactType,
|
||
7 years ago
|
};
|
||
|
|
||
|
render() {
|
||
|
if (this.props.contact === undefined) {
|
||
7 years ago
|
throw Error('Contact should be defined!');
|
||
7 years ago
|
}
|
||
|
|
||
|
const contact = this.props.contact;
|
||
7 years ago
|
const name = contact.fn;
|
||
7 years ago
|
|
||
7 years ago
|
const revProp = contact.comp.getFirstProperty('rev');
|
||
7 years ago
|
const lastModified = (revProp) ?
|
||
7 years ago
|
'Modified: ' + moment(revProp.getFirstValue().toJSDate()).format('LLLL') : undefined;
|
||
|
|
||
7 years ago
|
let lists = [];
|
||
7 years ago
|
|
||
7 years ago
|
function getAllType(
|
||
|
propName: string,
|
||
|
props: any,
|
||
7 years ago
|
valueToHref?: (value: string, type: string) => string,
|
||
|
primaryTransform?: (value: string, type: string) => string,
|
||
|
secondaryTransform?: (value: string, type: string) => string) {
|
||
7 years ago
|
|
||
|
return contact.comp.getAllProperties(propName).map((prop, idx) => {
|
||
7 years ago
|
const type = prop.toJSON()[1].type;
|
||
7 years ago
|
const values = prop.getValues().map((val) => (
|
||
|
<ListItem
|
||
|
key={idx}
|
||
7 years ago
|
href={valueToHref ? valueToHref(val, type) : undefined}
|
||
|
primaryText={primaryTransform ? primaryTransform(val, type) : val}
|
||
|
secondaryText={secondaryTransform ? secondaryTransform(val, type) : type}
|
||
7 years ago
|
{...props}
|
||
|
/>
|
||
|
));
|
||
|
return values;
|
||
|
});
|
||
|
}
|
||
|
|
||
|
lists.push(getAllType(
|
||
|
'tel',
|
||
|
{
|
||
|
leftIcon: <CommunicationCall />,
|
||
|
rightIcon: <CommunicationChatBubble />
|
||
|
},
|
||
|
(x) => ('tel:' + x),
|
||
|
));
|
||
7 years ago
|
|
||
7 years ago
|
lists.push(getAllType(
|
||
|
'email',
|
||
|
{
|
||
|
leftIcon: <CommunicationEmail color={indigo500} />,
|
||
|
},
|
||
|
(x) => ('mailto:' + x),
|
||
|
));
|
||
|
|
||
|
lists.push(getAllType(
|
||
|
'impp',
|
||
|
{
|
||
7 years ago
|
leftIcon: <CommunicationChatBubble />
|
||
7 years ago
|
},
|
||
|
(x) => x,
|
||
|
(x) => (x.substring(x.indexOf(':') + 1)),
|
||
7 years ago
|
(x) => (x.substring(0, x.indexOf(':'))),
|
||
7 years ago
|
));
|
||
|
|
||
7 years ago
|
lists.push(getAllType(
|
||
|
'adr',
|
||
|
{
|
||
|
leftIcon: <IconHome />
|
||
|
},
|
||
|
));
|
||
|
|
||
|
lists.push(getAllType(
|
||
|
'bday',
|
||
|
{
|
||
|
leftIcon: <IconDate />
|
||
|
},
|
||
|
undefined,
|
||
|
((x) => moment(x).format('dddd, LL')),
|
||
7 years ago
|
() => 'Birthday',
|
||
7 years ago
|
));
|
||
|
|
||
7 years ago
|
lists.push(getAllType(
|
||
|
'anniversary',
|
||
|
{
|
||
|
leftIcon: <IconDate />
|
||
|
},
|
||
|
undefined,
|
||
|
((x) => moment(x).format('dddd, LL')),
|
||
|
() => 'Anniversary',
|
||
|
));
|
||
|
|
||
7 years ago
|
const skips = ['tel', 'email', 'impp', 'adr', 'bday', 'anniversary', 'rev',
|
||
7 years ago
|
'prodid', 'uid', 'fn', 'n', 'version', 'photo'];
|
||
7 years ago
|
const theRest = contact.comp.getAllProperties().filter((prop) => (
|
||
7 years ago
|
skips.indexOf(prop.name) === -1
|
||
|
)).map((prop, idx) => {
|
||
|
const values = prop.getValues().map((_val) => {
|
||
|
const val = (_val instanceof String) ? _val : _val.toString();
|
||
|
return (
|
||
|
<ListItem
|
||
|
key={idx}
|
||
|
insetChildren={true}
|
||
7 years ago
|
primaryText={val}
|
||
7 years ago
|
secondaryText={prop.name}
|
||
|
/>
|
||
|
);
|
||
|
});
|
||
|
return values;
|
||
|
});
|
||
7 years ago
|
|
||
|
function listIfNotEmpty(items: Array<Array<JSX.Element>>) {
|
||
|
if (items.length > 0) {
|
||
|
return (
|
||
7 years ago
|
<React.Fragment>
|
||
7 years ago
|
<List>
|
||
|
{items}
|
||
|
</List>
|
||
7 years ago
|
<List>
|
||
|
<Divider inset={true} />
|
||
|
</List>
|
||
7 years ago
|
</React.Fragment>
|
||
7 years ago
|
);
|
||
|
} else {
|
||
|
return undefined;
|
||
|
}
|
||
|
}
|
||
|
|
||
7 years ago
|
return (
|
||
|
<div>
|
||
7 years ago
|
<PimItemHeader text={name}>
|
||
|
{lastModified && (
|
||
|
<span style={{fontSize: '90%'}}>{lastModified}</span>
|
||
|
)}
|
||
|
</PimItemHeader>
|
||
7 years ago
|
{lists.map((list, idx) => (
|
||
|
<React.Fragment key={idx}>
|
||
|
{listIfNotEmpty(list)}
|
||
|
</React.Fragment>
|
||
|
))}
|
||
7 years ago
|
<List>
|
||
|
{theRest}
|
||
|
</List>
|
||
|
</div>
|
||
|
);
|
||
|
}
|
||
|
}
|
||
7 years ago
|
|
||
7 years ago
|
export default Contact;
|