unmount on click outside container

Author: jessepollak

src/commands/Emoji/Emoji.scss

@@ -1,11 +1,12 @@
 .emoji {
-  height: 300px;
+  height: 310px;
 }
 .tip {
   font-size: 12px;
   color: #aaa;
   margin: 0;
-  margin-bottom: 5px;
+  margin-bottom: 10px;
+  padding: 0;
 }
 .emojiContainer {
   overflow: scroll;

src/commands/mount.js

@@ -27,7 +27,8 @@ export function mountReactComponent(Component, field, onDone, onInsert) {
       left={caretOffset.left}
       onInsert={onInsert}
       onDone={_onDone}
+      container={container}
     />,
-    getContainer()
+    container
   )
 }

src/components/Container.jsx

@@ -1,5 +1,8 @@
+import $ from 'jquery'
 import React from 'react'
+import ReactDOM from 'react-dom'
 import classnames from 'classnames'
+import NativeListener from 'react-native-listener'
 
 import * as Extension from 'lib/extension'
 import styles from './Container.scss'
@@ -20,20 +23,41 @@ let Version = (props) => {
     )
 }
 
-let Container = (props) => {
-  let style = {
-    top: props.top,
-    left: props.left
+class Container extends React.Component {
+  constructor(props) {
+    super(props)
+    this.unmountOnClickOutside = this.unmountOnClickOutside.bind(this)
   }
-  let classes = classnames(styles.container, props.className)
 
-  return (
-    <div className={classes} style={style}>
-      { props.children }
-      <Icon />
-      <Version />
-    </div>
-  )
+  componentWillMount() {
+    $('html').on('click', this.unmountOnClickOutside)
+  }
+
+  componentWillUnmount() {
+    $('html').off('click', this.unmountOnClickOutside)
+  }
+
+  unmountOnClickOutside(evt) {
+    if (!this.props.container.contains(evt.target)) {
+      ReactDOM.unmountComponentAtNode(this.props.container)
+    }
+  }
+
+  render() {
+    let style = {
+      top: this.props.top,
+      left: this.props.left
+    }
+    let classes = classnames(styles.container, this.props.className)
+
+    return (
+      <div className={classes} style={style} >
+        { this.props.children }
+        <Icon />
+        <Version />
+      </div>
+    )
+  }
 }
 Container.propTypes = {
   top: React.PropTypes.number.isRequired,