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.
85 lines
1.8 KiB
TypeScript
85 lines
1.8 KiB
TypeScript
import * as React from 'react';
|
|
|
|
import * as colors from 'material-ui/styles/colors';
|
|
|
|
import { Avatar } from '../widgets/Avatar';
|
|
import { List, ListItem } from '../widgets/List';
|
|
|
|
import { ContactType } from '../pim-types';
|
|
|
|
class AddressBook extends React.PureComponent {
|
|
props: {
|
|
entries: Array<ContactType>,
|
|
onItemClick: (contact: ContactType) => void,
|
|
};
|
|
|
|
render() {
|
|
let entries = this.props.entries.sort((_a, _b) => {
|
|
const a = _a.fn;
|
|
const b = _b.fn;
|
|
|
|
if (a < b) {
|
|
return -1;
|
|
} else if (a > b) {
|
|
return 1;
|
|
} else {
|
|
return 0;
|
|
}
|
|
});
|
|
|
|
function getContactColor(contact: ContactType) {
|
|
const colorOptions = [
|
|
colors.red500,
|
|
colors.pink500,
|
|
colors.purple500,
|
|
colors.deepPurple500,
|
|
colors.indigo500,
|
|
colors.blue500,
|
|
colors.lightBlue500,
|
|
colors.cyan500,
|
|
colors.teal500,
|
|
colors.green500,
|
|
colors.lightGreen500,
|
|
colors.lime500,
|
|
colors.yellow500,
|
|
colors.amber500,
|
|
colors.orange500,
|
|
colors.deepOrange500,
|
|
];
|
|
|
|
let sum = 0;
|
|
const uid = contact.uid;
|
|
for (let i = 0 ; i < uid.length ; i++) {
|
|
sum += uid.charCodeAt(i);
|
|
}
|
|
|
|
return colorOptions[sum % colorOptions.length];
|
|
}
|
|
|
|
let itemList = entries.map((entry, idx, array) => {
|
|
const uid = entry.uid;
|
|
const name = entry.fn;
|
|
|
|
return (
|
|
<ListItem
|
|
key={uid}
|
|
leftIcon={
|
|
<Avatar style={{backgroundColor: getContactColor(entry)}}>
|
|
{name[0].toUpperCase()}
|
|
</Avatar>}
|
|
primaryText={name}
|
|
onClick={(e: any) => this.props.onItemClick(entry)}
|
|
/>
|
|
);
|
|
});
|
|
|
|
return (
|
|
<List>
|
|
{itemList}
|
|
</List>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default AddressBook;
|