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

Loading…
Cancel
Save