diff options
Diffstat (limited to 'src/PatternTable.js')
-rw-r--r-- | src/PatternTable.js | 121 |
1 files changed, 121 insertions, 0 deletions
diff --git a/src/PatternTable.js b/src/PatternTable.js new file mode 100644 index 0000000..001c468 --- /dev/null +++ b/src/PatternTable.js @@ -0,0 +1,121 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles, withTheme } from '@material-ui/core/styles'; +import TextField from '@material-ui/core/TextField'; +import Table from '@material-ui/core/Table'; +import TableBody from '@material-ui/core/TableBody'; +import TableRow from '@material-ui/core/TableRow'; +import TableCell from '@material-ui/core/TableCell'; +import TableHead from '@material-ui/core/TableHead'; +import TablePagination from '@material-ui/core/TablePagination'; +import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined'; +import { CalendarField, EventField } from './RegexField'; +import theme from './theme'; + +const styles = theme => ({ + deleteButtonShow: { + position: 'absolute', + right: 0, + height: 48 + }, + deleteButtonHide: { + display: 'none' + }, + deleteIcon: { + height: '100%', + cursor: 'pointer' + }, + patternTableWrapper: { + overflowX: 'auto', + overflowY: 'hidden' + }, + patternTable: { + minWidth: 600 + } +}); + +const patternHead = [ + {label: "Name", field: "name", elem: TextField}, + {label: "Calendar", field: "cal", elem: withTheme(theme)(CalendarField)}, + {label: "Event", field: 'event', elem: withTheme(theme)(EventField)}]; + +class PatternTable extends React.Component { + state = { + page: 0, + rowsPerPage: 5, + }; + + handleChangePage(event, page) { + this.setState({ page }); + } + + handleChangeRowsPerPage(event) { + this.setState({ rowsPerPage: event.target.value }); + } + + render() { + const { classes, cached, patterns } = this.props; + const { rowsPerPage, page } = this.state; + const nDummy = rowsPerPage - Math.min(rowsPerPage, patterns.length - page * rowsPerPage); + let rows = patterns.slice(page * rowsPerPage, (page + 1) * rowsPerPage).map(p => ( + <TableRow + onMouseOver={() => this.setState({ activePattern: p.idx })} + onMouseOut={() => this.setState({ activePattern: null })}> + { + patternHead.map(s => { + const CustomText = s.elem; + return ( + <TableCell> + <CustomText + value={p[s.field]} + cached={cached} + onChange={event => this.updatePattern(s.field, p.idx, event.target.value)}/> + </TableCell>)}) + } + <span className={this.state.activePattern === p.idx ? classes.deleteButtonShow : classes.deleteButtonHide}> + <DeleteOutlinedIcon + className={classes.deleteIcon} + onClick={() => this.removePattern(p.idx)} /> + </span> + </TableRow>)); + + return ( + <div> + <div className={classes.patternTableWrapper}> + <Table className={classes.patternTable}> + <TableHead> + <TableRow>{patternHead.map((s, i) => (<TableCell key={i}>{s.label}</TableCell>))}</TableRow> + </TableHead> + <TableBody> + {rows} + { + nDummy > 0 && ( + <TableRow style={{ height: 48 * nDummy }}> + <TableCell colSpan={patternHead.length} /> + </TableRow>) + } + </TableBody> + </Table> + </div> + <TablePagination + rowsPerPageOptions={[5, 10, 25]} + component="div" + count={patterns.length} + rowsPerPage={rowsPerPage} + page={page} + backIconButtonProps={{'aria-label': 'Previous Page'}} + nextIconButtonProps={{'aria-label': 'Next Page'}} + onChangePage={this.handleChangePage} + onChangeRowsPerPage={this.handleChangeRowsPerPage} /> + </div>); + } +} + + +PatternTable.propTypes = { + classes: PropTypes.object.isRequired, + patterns: PropTypes.array.isRequired, + cached: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(PatternTable); |