From 8a0f7d58a136e87f71b790bbbb489af111472796 Mon Sep 17 00:00:00 2001
From: Determinant <ted.sybil@gmail.com>
Date: Sun, 10 Feb 2019 20:01:42 -0500
Subject: render graph data in background; other improvements

---
 src/PatternTable.js | 40 ++++++++++++++++++++++++++--------------
 1 file changed, 26 insertions(+), 14 deletions(-)

(limited to 'src/PatternTable.js')

diff --git a/src/PatternTable.js b/src/PatternTable.js
index 3e16bbf..e054f9e 100644
--- a/src/PatternTable.js
+++ b/src/PatternTable.js
@@ -13,15 +13,19 @@ import { CalendarField, EventField } from './RegexField';
 import theme from './theme';
 
 const styles = theme => ({
-    deleteButtonShow: {
+    deleteButton: {
+        width: '100%',
         position: 'absolute',
+        marginRight: '2em',
         right: 0,
-        height: 48
+        height: 48,
     },
     deleteButtonHide: {
         display: 'none'
     },
+    deleteButtonShow: {},
     deleteIcon: {
+        position: 'absolute',
         height: '100%',
         cursor: 'pointer'
     },
@@ -58,27 +62,35 @@ class PatternTable extends React.Component {
         const { classes, calendars, 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 })}>
+        let rows = patterns.slice(page * rowsPerPage, (page + 1) * rowsPerPage).map((p, i) => {
+            let setActive = () => this.setState({ activePattern: p.idx });
+            let unsetActive = () => this.setState({ activePattern: null });
+            return [<TableRow key={i * 2}
+                onMouseOver={setActive} onMouseOut={unsetActive}
+                className={classes.deleteButton}>
+                <td>
+                    <span className={this.state.activePattern !== p.idx ? classes.deleteButtonHide : classes.deleteButtonShow}>
+                    <DeleteOutlinedIcon
+                        className={classes.deleteIcon}
+                        onClick={() => this.props.onRemovePattern(p.idx)} />
+                    </span>
+                </td>
+            </TableRow>,
+            <TableRow key={i * 2 + 1} onMouseOver={setActive} onMouseOut={unsetActive}>
                 {
-                    patternHead.map(s => {
+                    patternHead.map((s, i) => {
                         const CustomText = s.elem;
                         return (
-                            <TableCell>
+                            <TableCell key={i}>
                                 <CustomText
                                     value={p[s.field]}
                                     calendars={calendars}
                                     onChange={event => this.props.onUpdatePattern(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.props.onRemovePattern(p.idx)} />
-                </span>
-            </TableRow>));
+            </TableRow>]
+        });
+        rows.flat();
 
         return (
             <div>
-- 
cgit v1.2.3-70-g09d2