From 62b9e3582a26b688ace304cae0bdba51bbe639c4 Mon Sep 17 00:00:00 2001
From: Sean Landsman <sean@thelandsmans.com>
Date: Thu, 10 Aug 2017 15:50:54 +0100
Subject: [PATCH] Add example for keypress in editors
 https://github.com/ag-grid/ag-grid-react/issues/60

---
 src/editorComponentExample/MoodEditor.jsx | 25 +++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/editorComponentExample/MoodEditor.jsx b/src/editorComponentExample/MoodEditor.jsx
index 8950784..53d52b5 100644
--- a/src/editorComponentExample/MoodEditor.jsx
+++ b/src/editorComponentExample/MoodEditor.jsx
@@ -18,9 +18,21 @@ export default class MoodEditor extends Component {
     }
 
     componentDidMount() {
+        this.refs.container.addEventListener('keydown', this.checkAndToggleMoodIfLeftRight);
         this.focus();
     }
 
+    componentWillUnmount() {
+        this.refs.container.removeEventListener('keydown', this.checkAndToggleMoodIfLeftRight);
+    }
+
+    checkAndToggleMoodIfLeftRight = (event) => {
+        if ([37, 39].indexOf(event.keyCode) > -1) { // left and right
+            this.toggleMood();
+            event.stopPropagation();
+        }
+    }
+
     componentDidUpdate() {
         this.focus();
     }
@@ -75,12 +87,11 @@ export default class MoodEditor extends Component {
             background: "#e6e6e6",
             padding: 15,
             textAlign: "center",
-            display: "inline-block",
-            // outline: "none"
+            display: "inline-block"
         };
 
         let unselected = {
-            paddingLleft: 10,
+            paddingLeft: 10,
             paddingRight: 10,
             border: "1px solid transparent",
             padding: 4
@@ -93,12 +104,14 @@ export default class MoodEditor extends Component {
             padding: 4
         };
 
-        let happyStyle = this.state.value === 'Happy' ? selected : unselected;
-        let sadStyle = this.state.value !== 'Happy' ? selected : unselected;
+        let happyStyle = this.state.happy ? selected : unselected;
+        let sadStyle = !this.state.happy  ? selected : unselected;
 
         return (
             <div ref="container"
-                 style={mood}>
+                 style={mood}
+                 tabIndex={1} // important - without this the keypresses wont be caught
+            >
                 <img src="images/smiley.png" onClick={this.onHappyClick} style={happyStyle}/>
                 <img src="images/smiley-sad.png" onClick={this.onSadClick} style={sadStyle}/>
             </div>