Event Edit: upgrade material-ui.

master
Tom Hacohen 6 years ago
parent 6a0b94fa0e
commit c1d446551b

@ -1,14 +1,20 @@
import * as React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
import Toggle from 'material-ui/Toggle';
import TextField from 'material-ui/TextField';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';
import { red500, fullWhite } from 'material-ui/styles/colors';
import IconDelete from 'material-ui/svg-icons/action/delete';
import IconCancel from 'material-ui/svg-icons/content/clear';
import IconSave from 'material-ui/svg-icons/content/save';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Switch from '@material-ui/core/Switch';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import InputLabel from '@material-ui/core/InputLabel';
import * as colors from '@material-ui/core/colors';
import IconDelete from '@material-ui/icons/Delete';
import IconCancel from '@material-ui/icons/Clear';
import IconSave from '@material-ui/icons/Save';
import DateTimePicker from '../widgets/DateTimePicker';
@ -197,6 +203,7 @@ class EventEdit extends React.PureComponent {
fullWidth: {
width: '100%',
boxSizing: 'border-box' as any,
marginTop: 16,
},
submit: {
marginTop: 40,
@ -225,30 +232,40 @@ class EventEdit extends React.PureComponent {
<form style={styles.form} onSubmit={this.onSubmit}>
<TextField
name="title"
hintText="Enter title"
placeholder="Enter title"
style={styles.fullWidth}
value={this.state.title}
onChange={this.handleInputChange}
/>
<SelectField
style={styles.fullWidth}
value={this.state.journalUid}
floatingLabelText="Saving to"
disabled={this.props.item !== undefined}
onChange={(event: object, key: number, payload: any) => this.handleChange('journalUid', payload)}
>
{this.props.collections.map((x) => (
<MenuItem key={x.uid} value={x.uid} primaryText={x.displayName} />
))}
</SelectField>
<Toggle
label="All Day"
name="allDay"
toggled={this.state.allDay}
onToggle={this.toggleAllDay}
/>
<FormControl disabled={this.props.item !== undefined} style={styles.fullWidth} >
<InputLabel>
Saving to
</InputLabel>
<Select
value={this.state.journalUid}
disabled={this.props.item !== undefined}
onChange={this.handleInputChange}
>
{this.props.collections.map((x) => (
<MenuItem key={x.uid} value={x.uid}>{x.displayName}</MenuItem>
))}
</Select>
</FormControl>
<FormGroup>
<FormControlLabel
control={
<Switch
name="allDay"
checked={this.state.allDay}
onChange={this.toggleAllDay}
color="primary"
/>
}
label="All Day"
/>
</FormGroup>
<div>
<DateTimePicker
@ -270,7 +287,7 @@ class EventEdit extends React.PureComponent {
<TextField
name="location"
hintText="Add location"
placeholder="Add location"
style={styles.fullWidth}
value={this.state.location}
onChange={this.handleInputChange}
@ -278,38 +295,42 @@ class EventEdit extends React.PureComponent {
<TextField
name="description"
hintText="Add description"
multiLine={true}
placeholder="Add description"
multiline={true}
style={styles.fullWidth}
value={this.state.description}
onChange={this.handleInputChange}
/>
<div style={styles.submit}>
<RaisedButton
label="Cancel"
icon={<IconCancel />}
<Button
variant="raised"
onClick={this.props.onCancel}
/>
>
<IconCancel style={{marginRight: 8}} />
Cancel
</Button>
{this.props.item &&
<RaisedButton
label="Delete"
labelColor={fullWhite}
backgroundColor={red500}
style={{marginLeft: 15}}
icon={<IconDelete color={fullWhite} />}
<Button
variant="raised"
style={{marginLeft: 15, backgroundColor: colors.red[500], color: 'white'}}
onClick={this.onDeleteRequest}
/>
>
<IconDelete style={{marginRight: 8}} />
Delete
</Button>
}
<RaisedButton
<Button
type="submit"
label="Save"
secondary={true}
icon={<IconSave />}
variant="raised"
color="secondary"
style={{marginLeft: 15}}
/>
>
<IconSave style={{marginRight: 8}} />
Save
</Button>
</div>
<div>

Loading…
Cancel
Save