Remove bind usage + create Escapable component

Author: valentinewallace

src/component/escapable.js

@@ -0,0 +1,28 @@
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+
+class Escapable extends Component {
+  componentDidMount() {
+    if (document) {
+      document.addEventListener('keydown', e => this.handleKeyDown(e));
+    }
+  }
+
+  componentWillUnmount() {
+    if (document) {
+      document.removeEventListener('keydown', e => this.handleKeyDown(e));
+    }
+  }
+
+  handleKeyDown(event) {
+    if (event.keyCode === 27) {
+      this.props.onClose();
+    }
+  }
+}
+
+Escapable.propTypes = {
+  onClose: PropTypes.func.isRequired,
+};
+
+export default Escapable;

src/component/modal.js

@@ -1,9 +1,10 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { View, ViewPropTypes, StyleSheet } from 'react-native';
 import PropTypes from 'prop-types';
-import { Button } from '../../src/component/button';
+import { Button } from './button';
 import { H4Text } from './text';
 import Icon from './icon';
+import Escapable from './escapable';
 import { color } from './style';
 
 const styles = StyleSheet.create({
@@ -34,28 +35,9 @@ const styles = StyleSheet.create({
   },
 });
 
-class Modal extends Component {
-  constructor(props) {
-    props.title = props.title || '';
-    super(props);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-  }
-  componentDidMount() {
-    document.addEventListener('keydown', this.handleKeyDown);
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('keydown', this.handleKeyDown);
-  }
-
-  handleKeyDown(event) {
-    if (event.keyCode === 27) {
-      this.props.onClose();
-    }
-  }
-
+class Modal extends Escapable {
   render() {
-    const { title, style, onClose, children } = this.props;
+    const { title = '', style, onClose, children } = this.props;
     return (
       <View style={[styles.modal, style]}>
         <H4Text style={styles.title}>{title.toUpperCase()}</H4Text>