Addressbook: add a searchable address book that lets us filter the list

master
Tom Hacohen 7 years ago
parent c6df5c800a
commit ee34109d14

@ -1,7 +1,7 @@
import * as React from 'react';
import { Tabs, Tab } from 'material-ui/Tabs';
import AddressBook from '../components/AddressBook';
import SearchableAddressBook from '../components/SearchableAddressBook';
import Contact from '../components/Contact';
import Calendar from '../components/Calendar';
import Event from '../components/Event';
@ -29,7 +29,7 @@ interface PropsType {
interface PropsTypeInner extends PropsType {
}
const JournalAddressBook = journalView(AddressBook, Contact);
const JournalAddressBook = journalView(SearchableAddressBook, Contact);
const PersistCalendar = historyPersistor('Calendar')(Calendar);
const JournalCalendar = journalView(PersistCalendar, Event);

@ -9,7 +9,7 @@ import { Location, History } from 'history';
import Container from '../widgets/Container';
import AddressBook from '../components/AddressBook';
import SearchableAddressBook from '../components/SearchableAddressBook';
import Calendar from '../components/Calendar';
import { EventType, ContactType } from '../pim-types';
@ -92,7 +92,7 @@ class PimMain extends React.PureComponent {
label={addressBookTitle}
>
<Container>
<AddressBook entries={this.props.contacts} onItemClick={this.contactClicked} />
<SearchableAddressBook entries={this.props.contacts} onItemClick={this.contactClicked} />
</Container>
</Tab>
<Tab

@ -0,0 +1,67 @@
import * as React from 'react';
import TextField from 'material-ui/TextField';
import IconButton from 'material-ui/IconButton';
import IconClear from 'material-ui/svg-icons/content/clear';
import { ContactType } from '../pim-types';
import AddressBook from '../components/AddressBook';
import { getPalette } from '../App';
class SearchableAddressBook extends React.PureComponent {
props: {
entries: Array<ContactType>,
onItemClick: (contact: ContactType) => void,
};
state: {
searchQuery: string;
};
constructor(props: any) {
super(props);
this.state = {searchQuery: ''};
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event: React.ChangeEvent<any>) {
const name = event.target.name;
const value = event.target.value;
this.setState({
[name]: value
});
}
render() {
const {
entries,
...rest,
} = this.props;
const reg = new RegExp(this.state.searchQuery, 'i');
return (
<React.Fragment>
<TextField
name="searchQuery"
value={this.state.searchQuery}
style={{fontSize: '120%', marginLeft: 20}}
hintText="Find Contacts"
hintStyle={{color: getPalette('accent1Color')}}
onChange={this.handleInputChange}
/>
{this.state.searchQuery &&
<IconButton onClick={() => this.setState({'searchQuery': ''})}>
<IconClear />
</IconButton>
}
<AddressBook entries={entries} filter={(ent: ContactType) => ent.fn.match(reg)} {...rest} />
</React.Fragment>
);
}
}
export default SearchableAddressBook;
Loading…
Cancel
Save