diff options
Diffstat (limited to 'src/RegexField.js')
-rw-r--r-- | src/RegexField.js | 95 |
1 files changed, 57 insertions, 38 deletions
diff --git a/src/RegexField.js b/src/RegexField.js index 104512e..926a3bc 100644 --- a/src/RegexField.js +++ b/src/RegexField.js @@ -1,54 +1,75 @@ import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; import Select from '@material-ui/core/Select'; import MenuItem from '@material-ui/core/MenuItem'; import TextField from '@material-ui/core/TextField'; import FormControl from '@material-ui/core/FormControl'; import { Pattern } from './pattern'; +const styles = theme => ({ + fieldNoRegex: { + width: 200 + }, + fieldRegex: { + marginRight: '0.5em' + } +}); + class RegexField extends React.Component { render() { - var pitems = this.props.options; - var p0 = new Pattern.emptyPattern(); + const { classes } = this.props; let items = []; + var pitems = this.props.options; + const p0 = new Pattern.emptyPattern(); pitems[p0.id] = p0; for (let id in pitems) - items.push( - <MenuItem key={id} value={id}> - {!pitems[id].isEmpty ? - pitems[id].label : - <span style={{color: this.props.theme.palette.primary.dark}}>Custom</span>} - </MenuItem>); + { + const label = !pitems[id].isEmpty ? pitems[id].label : + <span style={{color: this.props.theme.palette.primary.dark}}>Custom</span>; + items.push(<MenuItem key={id} value={id}>{label}</MenuItem>); + } + const selectOnClick = event => { + let value; + if (pitems[event.target.value].label == null) { + value = new Pattern(0, true, + this.props.value.isRegex ? + this.props.value.value : + `^${this.props.value.value}$`, null); + } else { + value = pitems[event.target.value]; + } + this.props.onChange({target: {value}}); + }; + + const regexTextOnChange = event => this.props.onChange({ + target: { value: new Pattern(0, true, event.target.value, null)}}); + + const className = this.props.value.isRegex ? classes.fieldRegex: classes.fieldNoRegex; return ( <FormControl> - <span> - <Select - value={this.props.value.id} - onChange={event => { - let value; - if (pitems[event.target.value].label == null) { - value = new Pattern(0, true, - this.props.value.isRegex ? - this.props.value.value : - `^${this.props.value.value}$`, null); - } else { - value = pitems[event.target.value]; - } - this.props.onChange({target: {value}}); - }} - className={this.props.value.isRegex ? - this.props.fieldStyles.regex : - this.props.fieldStyles.noRegex}>{items}</Select> - {this.props.value.label == null && ( - <TextField - value={this.props.value.value} - onChange={event => - this.props.onChange({target: { value: new Pattern(0, true, event.target.value, null)}})} /> - )} - </span> + <span> + <Select + value={this.props.value.id} + onChange={selectOnClick} + className={className}>{items} + </Select> + {this.props.value.label == null && ( + <TextField + value={this.props.value.value} + onChange={regexTextOnChange} /> + )} + </span> </FormControl>); } } +RegexField.propTypes = { + classes: PropTypes.object.isRequired, +}; + +const RegexFieldWithStyles = withStyles(styles)(RegexField); + export function CalendarField(props) { let options = {}; for (let id in props.cached.calendars) { @@ -57,10 +78,9 @@ export function CalendarField(props) { props.cached.calendars[id].name); } return ( - <RegexField + <RegexFieldWithStyles value={props.value} options={options} - fieldStyles={props.fieldStyles} onChange={props.onChange} theme={props.theme} />); } @@ -70,10 +90,9 @@ export function EventField(props) { let options = {}; options[any.id] = any; return ( - <RegexField + <RegexFieldWithStyles value={props.value} options={options} - fieldStyles={props.fieldStyles} onChange={props.onChange} - theme={props.theme}/>); + theme={props.theme} />); } |