Address book: make a component out of the list item.

master
Tom Hacohen 7 years ago
parent cec318f41f
commit a77e9077bf

@ -1,5 +1,7 @@
import * as React from 'react'; import * as React from 'react';
import { pure } from 'recompose';
import * as colors from 'material-ui/styles/colors'; import * as colors from 'material-ui/styles/colors';
import { Avatar } from '../widgets/Avatar'; import { Avatar } from '../widgets/Avatar';
@ -7,27 +9,7 @@ import { List, ListItem } from '../widgets/List';
import { ContactType } from '../pim-types'; import { ContactType } from '../pim-types';
class AddressBook extends React.PureComponent { function getContactColor(contact: ContactType) {
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 = [ const colorOptions = [
colors.red500, colors.red500,
colors.pink500, colors.pink500,
@ -54,21 +36,55 @@ class AddressBook extends React.PureComponent {
} }
return colorOptions[sum % colorOptions.length]; return colorOptions[sum % colorOptions.length];
} }
let itemList = entries.map((entry, idx, array) => { const AddressBookItem = pure((_props: any) => {
const uid = entry.uid; const {
entry,
onClick,
} = _props;
const name = entry.fn; const name = entry.fn;
return ( return (
<ListItem <ListItem
key={uid}
leftIcon={ leftIcon={
<Avatar style={{backgroundColor: getContactColor(entry)}}> <Avatar style={{backgroundColor: getContactColor(entry)}}>
{name[0].toUpperCase()} {name[0].toUpperCase()}
</Avatar>} </Avatar>}
primaryText={name} primaryText={name}
onClick={(e: any) => this.props.onItemClick(entry)} onClick={() => onClick(entry)}
/>
);
});
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;
}
});
let itemList = entries.map((entry, idx, array) => {
const uid = entry.uid;
return (
<AddressBookItem
key={uid}
entry={entry}
onClick={this.props.onItemClick}
/> />
); );
}); });

Loading…
Cancel
Save