infra
/
etesync
2
0
Fork 0
Code Issues Pull Requests Packages Activity

Contact edit: upgrade material-ui.

Browse Source
master
Tom Hacohen 6 years ago
parent 40ad15673d
commit 6a0b94fa0e
1 changed files with 66 additions and 58 deletions
Show Stats Download Patch File Download Diff File

124
src/components/ContactEdit.tsx
Unescape Escape View File

@ -1,16 +1,18 @@
import * as React from 'react'; import * as React from 'react';
import IconButton from 'material-ui/IconButton'; import IconButton from '@material-ui/core/IconButton';
import RaisedButton from 'material-ui/RaisedButton'; import Button from '@material-ui/core/Button';
import TextField from 'material-ui/TextField'; import TextField from '@material-ui/core/TextField';
import SelectField from 'material-ui/SelectField'; import Select from '@material-ui/core/Select';
import MenuItem from 'material-ui/MenuItem'; import MenuItem from '@material-ui/core/MenuItem';
import { red500, fullWhite } from 'material-ui/styles/colors'; import FormControl from '@material-ui/core/FormControl';
import IconDelete from 'material-ui/svg-icons/action/delete'; import InputLabel from '@material-ui/core/InputLabel';
import * as colors from '@material-ui/core/colors';
import IconAdd from 'material-ui/svg-icons/content/add';
import IconClear from 'material-ui/svg-icons/content/clear'; import IconDelete from '@material-ui/icons/Delete';
import IconCancel from 'material-ui/svg-icons/content/clear'; import IconAdd from '@material-ui/icons/Add';
import IconSave from 'material-ui/svg-icons/content/save'; import IconClear from '@material-ui/icons/Clear';
import IconCancel from '@material-ui/icons/Clear';
import IconSave from '@material-ui/icons/Save';
import ConfirmationDialog from '../widgets/ConfirmationDialog'; import ConfirmationDialog from '../widgets/ConfirmationDialog';
@ -46,15 +48,15 @@ const TypeSelector = (props: any) => {
const types = props.types as {type: string}[]; const types = props.types as {type: string}[];
return ( return (
<SelectField <Select
style={props.style} style={props.style}
value={props.value} value={props.value}
onChange={props.onChange} onChange={props.onChange}
> >
{types.map((x) => ( {types.map((x) => (
<MenuItem key={x.type} value={x.type.toLowerCase()} primaryText={x.type} /> <MenuItem key={x.type} value={x.type.toLowerCase()}>{x.type}</MenuItem>
))} ))}
</SelectField> </Select>
); );
}; };
@ -74,7 +76,7 @@ interface ValueTypeComponentProps {
types: {type: string}[]; types: {type: string}[];
name: string; name: string;
hintText: string; placeholder: string;
value: ValueType; value: ValueType;
onClearRequest: (name: string) => void; onClearRequest: (name: string) => void;
onChange: (name: string, type: string, value: string) => void; onChange: (name: string, type: string, value: string) => void;
@ -86,14 +88,14 @@ const ValueTypeComponent = (props: ValueTypeComponentProps) => {
<TextField <TextField
type={props.type} type={props.type}
name={props.name} name={props.name}
hintText={props.hintText} placeholder={props.placeholder}
style={props.style} style={props.style}
value={props.value.value} value={props.value.value}
onChange={(event: React.ChangeEvent<any>) => props.onChange(props.name, props.value.type, event.target.value)} onChange={(event: React.ChangeEvent<any>) => props.onChange(props.name, props.value.type, event.target.value)}
/> />
<IconButton <IconButton
onClick={() => props.onClearRequest(props.name)} onClick={() => props.onClearRequest(props.name)}
tooltip="Remove" title="Remove"
> >
<IconClear /> <IconClear />
</IconButton> </IconButton>
@ -334,21 +336,23 @@ class ContactEdit extends React.PureComponent {
{this.props.item ? 'Edit Contact' : 'New Contact'} {this.props.item ? 'Edit Contact' : 'New Contact'}
</h2> </h2>
<form style={styles.form} onSubmit={this.onSubmit}> <form style={styles.form} onSubmit={this.onSubmit}>
<SelectField <FormControl disabled={this.props.item !== undefined} style={styles.fullWidth} >
style={styles.fullWidth} <InputLabel>
value={this.state.journalUid} Saving to
floatingLabelText="Saving to" </InputLabel>
disabled={this.props.item !== undefined} <Select
onChange={(contact: object, key: number, payload: any) => this.handleChange('journalUid', payload)} value={this.state.journalUid}
> onChange={this.handleInputChange}
{this.props.collections.map((x) => ( >
<MenuItem key={x.uid} value={x.uid} primaryText={x.displayName} /> {this.props.collections.map((x) => (
))} <MenuItem key={x.uid} value={x.uid}>{x.displayName}</MenuItem>
</SelectField> ))}
</Select>
</FormControl>
<TextField <TextField
name="fn" name="fn"
hintText="Name" placeholder="Name"
style={styles.fullWidth} style={styles.fullWidth}
value={this.state.fn} value={this.state.fn}
onChange={this.handleInputChange} onChange={this.handleInputChange}
@ -358,7 +362,7 @@ class ContactEdit extends React.PureComponent {
Phone numbers Phone numbers
<IconButton <IconButton
onClick={() => this.addValueType('phone')} onClick={() => this.addValueType('phone')}
tooltip="Add phone number" title="Add phone number"
> >
<IconAdd /> <IconAdd />
</IconButton> </IconButton>
@ -367,7 +371,7 @@ class ContactEdit extends React.PureComponent {
<ValueTypeComponent <ValueTypeComponent
key={idx} key={idx}
name="phone" name="phone"
hintText="Phone" placeholder="Phone"
types={telTypes} types={telTypes}
value={this.state.phone[idx]} value={this.state.phone[idx]}
onClearRequest={(name: string) => this.removeValueType(name, idx)} onClearRequest={(name: string) => this.removeValueType(name, idx)}
@ -381,7 +385,7 @@ class ContactEdit extends React.PureComponent {
Emails Emails
<IconButton <IconButton
onClick={() => this.addValueType('email')} onClick={() => this.addValueType('email')}
tooltip="Add email address" title="Add email address"
> >
<IconAdd /> <IconAdd />
</IconButton> </IconButton>
@ -390,7 +394,7 @@ class ContactEdit extends React.PureComponent {
<ValueTypeComponent <ValueTypeComponent
key={idx} key={idx}
name="email" name="email"
hintText="Email" placeholder="Email"
types={emailTypes} types={emailTypes}
value={this.state.email[idx]} value={this.state.email[idx]}
onClearRequest={(name: string) => this.removeValueType(name, idx)} onClearRequest={(name: string) => this.removeValueType(name, idx)}
@ -404,7 +408,7 @@ class ContactEdit extends React.PureComponent {
IMPP IMPP
<IconButton <IconButton
onClick={() => this.addValueType('impp', 'jabber')} onClick={() => this.addValueType('impp', 'jabber')}
tooltip="Add impp address" title="Add impp address"
> >
<IconAdd /> <IconAdd />
</IconButton> </IconButton>
@ -413,7 +417,7 @@ class ContactEdit extends React.PureComponent {
<ValueTypeComponent <ValueTypeComponent
key={idx} key={idx}
name="impp" name="impp"
hintText="IMPP" placeholder="IMPP"
types={imppTypes} types={imppTypes}
value={this.state.impp[idx]} value={this.state.impp[idx]}
onClearRequest={(name: string) => this.removeValueType(name, idx)} onClearRequest={(name: string) => this.removeValueType(name, idx)}
@ -427,7 +431,7 @@ class ContactEdit extends React.PureComponent {
Addresses Addresses
<IconButton <IconButton
onClick={() => this.addValueType('address')} onClick={() => this.addValueType('address')}
tooltip="Add address" title="Add address"
> >
<IconAdd /> <IconAdd />
</IconButton> </IconButton>
@ -436,7 +440,7 @@ class ContactEdit extends React.PureComponent {
<ValueTypeComponent <ValueTypeComponent
key={idx} key={idx}
name="address" name="address"
hintText="Address" placeholder="Address"
types={addressTypes} types={addressTypes}
value={this.state.address[idx]} value={this.state.address[idx]}
onClearRequest={(name: string) => this.removeValueType(name, idx)} onClearRequest={(name: string) => this.removeValueType(name, idx)}
@ -448,7 +452,7 @@ class ContactEdit extends React.PureComponent {
<TextField <TextField
name="org" name="org"
hintText="Organization" placeholder="Organization"
style={styles.fullWidth} style={styles.fullWidth}
value={this.state.org} value={this.state.org}
onChange={this.handleInputChange} onChange={this.handleInputChange}
@ -456,7 +460,7 @@ class ContactEdit extends React.PureComponent {
<TextField <TextField
name="title" name="title"
hintText="Title" placeholder="Title"
style={styles.fullWidth} style={styles.fullWidth}
value={this.state.title} value={this.state.title}
onChange={this.handleInputChange} onChange={this.handleInputChange}
@ -464,38 +468,42 @@ class ContactEdit extends React.PureComponent {
<TextField <TextField
name="note" name="note"
multiLine={true} multiline={true}
hintText="Note" placeholder="Note"
style={styles.fullWidth} style={styles.fullWidth}
value={this.state.note} value={this.state.note}
onChange={this.handleInputChange} onChange={this.handleInputChange}
/> />
<div style={styles.submit}> <div style={styles.submit}>
<RaisedButton <Button
label="Cancel" variant="raised"
onClick={this.props.onCancel} onClick={this.props.onCancel}
icon={<IconCancel />} >
/> <IconCancel style={{marginRight: 8}} />
Cancel
</Button>
{this.props.item && {this.props.item &&
<RaisedButton <Button
label="Delete" variant="raised"
labelColor={fullWhite} style={{marginLeft: 15, backgroundColor: colors.red[500], color: 'white'}}
backgroundColor={red500}
style={{marginLeft: 15}}
icon={<IconDelete color={fullWhite} />}
onClick={this.onDeleteRequest} onClick={this.onDeleteRequest}
/> >
<IconDelete style={{marginRight: 8}} />
Delete
</Button>
} }
<RaisedButton <Button
type="submit" type="submit"
label="Save" variant="raised"
secondary={true} color="secondary"
icon={<IconSave />}
style={{marginLeft: 15}} style={{marginLeft: 15}}
/> >
<IconSave style={{marginRight: 8}} />
Save
</Button>
</div> </div>
<div> <div>

Write Preview
Loading…
Cancel
Save