Pim Main keep tabs in state.

master
Tom Hacohen 7 years ago
parent d8a57b821b
commit c9cc26cf84

@ -10,6 +10,9 @@ import { EventType, ContactType } from './pim-types';
import { routeResolver } from './App'; import { routeResolver } from './App';
const addressBookTitle = 'Address Book';
const calendarTitle = 'Calendar';
class Pim extends React.Component { class Pim extends React.Component {
props: { props: {
contacts: Array<ContactType>, contacts: Array<ContactType>,
@ -17,8 +20,13 @@ class Pim extends React.Component {
history?: any, history?: any,
}; };
state: {
tab?: string;
};
constructor(props: any) { constructor(props: any) {
super(props); super(props);
this.state = {};
this.eventClicked = this.eventClicked.bind(this); this.eventClicked = this.eventClicked.bind(this);
this.contactClicked = this.contactClicked.bind(this); this.contactClicked = this.contactClicked.bind(this);
} }
@ -40,11 +48,20 @@ class Pim extends React.Component {
render() { render() {
return ( return (
<Tabs> <Tabs
<Tab label="Address Book"> value={this.state.tab}
onChange={(value) => this.setState({tab: value})}
>
<Tab
value={addressBookTitle}
label={addressBookTitle}
>
<AddressBook entries={this.props.contacts} onItemClick={this.contactClicked} /> <AddressBook entries={this.props.contacts} onItemClick={this.contactClicked} />
</Tab> </Tab>
<Tab label="Calendar"> <Tab
value={calendarTitle}
label={calendarTitle}
>
<Calendar entries={this.props.events} onItemClick={this.eventClicked} /> <Calendar entries={this.props.events} onItemClick={this.eventClicked} />
</Tab> </Tab>
</Tabs> </Tabs>

Loading…
Cancel
Save