Improve the look of the contact page.

master
Tom Hacohen 7 years ago
parent 1987ea126d
commit 7067824ccd

@ -19,39 +19,59 @@ class Contact extends React.Component {
} }
const contact = this.props.contact; const contact = this.props.contact;
const uid = contact.comp.getFirstPropertyValue('uid'); const name = contact.fn;
const name = contact.comp.getFirstPropertyValue('fn');
const phoneNumbers = contact.comp.getAllProperties('tel').map((prop, idx) => { let lists = [];
const json = prop.toJSON();
const values = prop.getValues().map((val) => (
<ListItem
key={idx}
leftIcon={<CommunicationCall />}
rightIcon={<CommunicationChatBubble />}
href={'tel:' + val}
primaryText={val}
secondaryText={json[1].type}
/>
));
return values;
});
const emails = contact.comp.getAllProperties('email').map((prop, idx) => { function getAllType(
const json = prop.toJSON(); propName: string,
const values = prop.getValues().map((val) => ( props: any,
<ListItem valueToHref?: (value: string) => string,
key={idx} primaryTransform?: (value: string) => string,
leftIcon={<CommunicationEmail color={indigo500} />} secondaryTransform?: (value: string) => string) {
href={'mailto:' + val}
primaryText={val} return contact.comp.getAllProperties(propName).map((prop, idx) => {
secondaryText={json[1].type} const json = prop.toJSON();
/> const values = prop.getValues().map((val) => (
)); <ListItem
return values; key={idx}
}); href={valueToHref ? valueToHref(val) : undefined}
primaryText={primaryTransform ? primaryTransform(val) : val}
secondaryText={json[1].type}
{...props}
/>
));
return values;
});
}
lists.push(getAllType(
'tel',
{
leftIcon: <CommunicationCall />,
rightIcon: <CommunicationChatBubble />
},
(x) => ('tel:' + x),
));
const skips = ['tel', 'email', 'prodid', 'uid', 'fn', 'n', 'version', 'photo']; lists.push(getAllType(
'email',
{
leftIcon: <CommunicationEmail color={indigo500} />,
},
(x) => ('mailto:' + x),
));
lists.push(getAllType(
'impp',
{
insetChildren: true,
},
(x) => x,
(x) => (x.substring(x.indexOf(':') + 1)),
));
const skips = ['tel', 'email', 'impp', 'prodid', 'uid', 'fn', 'n', 'version', 'photo'];
const theRest = contact.comp.getAllProperties().filter((prop) => ( const theRest = contact.comp.getAllProperties().filter((prop) => (
skips.indexOf(prop.name) === -1 skips.indexOf(prop.name) === -1
)).map((prop, idx) => { )).map((prop, idx) => {
@ -87,9 +107,11 @@ class Contact extends React.Component {
return ( return (
<div> <div>
<h3>{name}</h3> <h3>{name}</h3>
<span>{uid}</span> {lists.map((list, idx) => (
{listIfNotEmpty(phoneNumbers)} <React.Fragment key={idx}>
{listIfNotEmpty(emails)} {listIfNotEmpty(list)}
</React.Fragment>
))}
<List> <List>
{theRest} {theRest}
</List> </List>

Loading…
Cancel
Save