Pim Main: upgrade materail-ui.

master
Tom Hacohen 6 years ago
parent 291b8ae8a6
commit a33bde29d4

@ -1,7 +1,9 @@
import * as React from 'react'; import * as React from 'react';
import FloatingActionButton from 'material-ui/FloatingActionButton'; import Button from '@material-ui/core/Button';
import ContentAdd from 'material-ui/svg-icons/content/add'; import ContentAdd from '@material-ui/icons/Add';
import { Tabs, Tab } from 'material-ui/Tabs'; import Tab from '@material-ui/core/Tab';
import Tabs from '@material-ui/core/Tabs';
import { Theme, withTheme } from '@material-ui/core/styles';
import * as ICAL from 'ical.js'; import * as ICAL from 'ical.js';
@ -23,21 +25,22 @@ const calendarTitle = 'Calendar';
const PersistCalendar = historyPersistor('Calendar')(Calendar); const PersistCalendar = historyPersistor('Calendar')(Calendar);
class PimMain extends React.PureComponent { interface PropsType {
props: { contacts: Array<ContactType>;
contacts: Array<ContactType>, events: Array<EventType>;
events: Array<EventType>, location?: Location;
location?: Location, history?: History;
history?: History, theme: Theme;
}; }
class PimMain extends React.PureComponent<PropsType> {
state: { state: {
tab: string; tab: number;
}; };
constructor(props: any) { constructor(props: any) {
super(props); super(props);
this.state = {tab: addressBookTitle}; this.state = {tab: 0};
this.eventClicked = this.eventClicked.bind(this); this.eventClicked = this.eventClicked.bind(this);
this.contactClicked = this.contactClicked.bind(this); this.contactClicked = this.contactClicked.bind(this);
this.floatingButtonClicked = this.floatingButtonClicked.bind(this); this.floatingButtonClicked = this.floatingButtonClicked.bind(this);
@ -66,16 +69,18 @@ class PimMain extends React.PureComponent {
} }
floatingButtonClicked() { floatingButtonClicked() {
if (this.state.tab === addressBookTitle) { if (this.state.tab === 0) {
this.props.history!.push( this.props.history!.push(
routeResolver.getRoute('pim.contacts.new') routeResolver.getRoute('pim.contacts.new')
); );
} else if (this.state.tab === calendarTitle) { } else if (this.state.tab === 1) {
this.newEvent(); this.newEvent();
} }
} }
render() { render() {
const { theme } = this.props;
const { tab } = this.state;
const style = { const style = {
floatingButton: { floatingButton: {
margin: 0, margin: 0,
@ -90,40 +95,44 @@ class PimMain extends React.PureComponent {
return ( return (
<React.Fragment> <React.Fragment>
<Tabs <Tabs
value={this.state.tab} fullWidth={true}
onChange={(value) => this.setState({tab: value})} style={{ backgroundColor: theme.palette.primary.main, color: 'white' }}
value={tab}
onChange={(event, value) => this.setState({tab: value})}
> >
<Tab <Tab
value={addressBookTitle}
label={addressBookTitle} label={addressBookTitle}
> />
<Container>
<SearchableAddressBook entries={this.props.contacts} onItemClick={this.contactClicked} />
</Container>
</Tab>
<Tab <Tab
value={calendarTitle}
label={calendarTitle} label={calendarTitle}
> />
<Container>
<PersistCalendar
entries={this.props.events}
onItemClick={this.eventClicked}
onSlotClick={this.newEvent}
/>
</Container>
</Tab>
</Tabs> </Tabs>
{ tab === 0 &&
<FloatingActionButton <Container>
<SearchableAddressBook entries={this.props.contacts} onItemClick={this.contactClicked} />
</Container>
}
{ tab === 1 &&
<Container>
<PersistCalendar
entries={this.props.events}
onItemClick={this.eventClicked}
onSlotClick={this.newEvent}
/>
</Container>
}
<Button
variant="fab"
color="primary"
style={style.floatingButton} style={style.floatingButton}
onClick={this.floatingButtonClicked} onClick={this.floatingButtonClicked}
> >
<ContentAdd /> <ContentAdd />
</FloatingActionButton> </Button>
</React.Fragment> </React.Fragment>
); );
} }
} }
export default historyPersistor('PimMain')(PimMain); export default withTheme()(historyPersistor('PimMain')(PimMain));

Loading…
Cancel
Save