make showUserDetails modal close on click outside

ts/components/UserDetailsDialog.tsx

@@ -18,6 +18,8 @@ interface Props {
 }
 
 export class UserDetailsDialog extends React.Component<Props> {
+  private modalRef: any;
+
   constructor(props: any) {
     super(props);
 
@@ -25,6 +27,15 @@ export class UserDetailsDialog extends React.Component<Props> {
     this.onKeyUp = this.onKeyUp.bind(this);
     this.onClickStartConversation = this.onClickStartConversation.bind(this);
     window.addEventListener('keyup', this.onKeyUp);
+    this.modalRef = React.createRef();
+  }
+
+  public componentWillMount() {
+    document.addEventListener('mousedown', this.handleClick, false);
+  }
+
+  public componentWillUnmount() {
+    document.removeEventListener('mousedown', this.handleClick, false);
   }
 
   public render() {
@@ -34,25 +45,27 @@ export class UserDetailsDialog extends React.Component<Props> {
     const startConversation = i18n('startConversation');
 
     return (
-      <div className="content">
-        <div className="avatar-center">
-          <div className="avatar-center-inner">{this.renderAvatar()}</div>
-        </div>
-        <div className="profile-name">{this.props.profileName}</div>
-        <div className="message">{this.props.pubkey}</div>
-
-        <div className="buttons">
-          <button className="cancel" tabIndex={0} onClick={this.closeDialog}>
-            {cancelText}
-          </button>
-
-          <button
-            className="ok"
-            tabIndex={0}
-            onClick={this.onClickStartConversation}
-          >
-            {startConversation}
-          </button>
+      <div ref={element => (this.modalRef = element)}>
+        <div className="content">
+          <div className="avatar-center">
+            <div className="avatar-center-inner">{this.renderAvatar()}</div>
+          </div>
+          <div className="profile-name">{this.props.profileName}</div>
+          <div className="message">{this.props.pubkey}</div>
+
+          <div className="buttons">
+            <button className="cancel" tabIndex={0} onClick={this.closeDialog}>
+              {cancelText}
+            </button>
+
+            <button
+              className="ok"
+              tabIndex={0}
+              onClick={this.onClickStartConversation}
+            >
+              {startConversation}
+            </button>
+          </div>
         </div>
       </div>
     );
@@ -98,4 +111,11 @@ export class UserDetailsDialog extends React.Component<Props> {
     this.props.onStartConversation();
     this.closeDialog();
   }
+
+  private readonly handleClick = (e: any) => {
+    if (this.modalRef.contains(e.target)) {
+      return;
+    }
+    this.closeDialog();
+  };
 }