diff --git a/src/Journal/index.tsx b/src/Journal/index.tsx
index b9a92cb..73f9cc2 100644
--- a/src/Journal/index.tsx
+++ b/src/Journal/index.tsx
@@ -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);
diff --git a/src/Pim/PimMain.tsx b/src/Pim/PimMain.tsx
index b890c6a..9f363b2 100644
--- a/src/Pim/PimMain.tsx
+++ b/src/Pim/PimMain.tsx
@@ -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}
>
-
+
,
+ 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) {
+ 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 (
+
+
+ {this.state.searchQuery &&
+ this.setState({'searchQuery': ''})}>
+
+
+ }
+ ent.fn.match(reg)} {...rest} />
+
+ );
+ }
+}
+
+export default SearchableAddressBook;