add feature to hide edit dialog when user clicks somewhere outside

HBM · Feb 3, 2017 · f9e6d4b · f9e6d4b
1 parent a5aa689
commit f9e6d4b
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 12 deletions.
diff --git a/src/js/table/index.js b/src/js/table/index.js
@@ -25,15 +25,32 @@ class EditDialog extends React.Component {
   }
 
   onKeyUp = (event) => {
-    // hide box and return old value
+    // hide box on escape key
     if (event.which === keycode('escape')) {
-      this.props.onSubmit(this.props.value)
+      this.props.onCancel()
     }
   }
 
+  onClick = (event) => {
+    // make sure click happened outside of component
+    const element = this.c
+    // https://github.com/tj/react-click-outside/blob/master/index.js#L25
+    if (!element.contains(event.target)) {
+      this.props.onCancel()
+    }
+  }
+
+  componentDidMount = () => {
+    document.addEventListener('click', this.onClick)
+  }
+
+  componentWillUnmount = () => {
+    document.removeEventListener('click', this.onClick)
+  }
+
   render () {
     return (
-      <div className='Table-edit'>
+      <div className='Table-edit' ref={c => { this.c = c }}>
         <form onSubmit={this.onSubmit} className='Table-edit-container'>
           <Textfield
             onChange={this.onChange}
@@ -116,10 +133,14 @@ export class TableBodyCell extends React.Component {
     })
   }
 
-  onSubmit = (value) => {
+  hide = () => {
     this.setState({
       isEditing: false
     })
+  }
+
+  onSubmit = (value) => {
+    this.hide()
     this.props.onSubmit(value)
   }
 
@@ -128,7 +149,7 @@ export class TableBodyCell extends React.Component {
     return (
       <td className={classnames('Table-body-row-cell', className)} {...rest}>
         {this.state.isEditing
-          ? <EditDialog onSubmit={this.onSubmit} value={children} />
+          ? <EditDialog onSubmit={this.onSubmit} onCancel={this.hide} value={children} />
           : null
         }
         { editable

diff --git a/src/js/table/test/test.js b/src/js/table/test/test.js
@@ -1,4 +1,4 @@
-/* global describe, it */
+/* global describe, it, Event */
 
 import assert from 'assert'
 import React from 'react'
@@ -263,16 +263,12 @@ describe('Table', () => {
     wrapper.find('.Table-edit-container').simulate('submit')
   })
 
-  it('should show the old value when escape is pressed', (done) => {
-    const onSubmit = (value) => {
-      assert.equal(value, 'hello world')
-      done()
-    }
+  it('should cancel when escape is pressed', () => {
     const table = (
       <table>
         <tbody>
           <tr>
-            <TableBodyCell editable onSubmit={onSubmit}>
+            <TableBodyCell editable>
               hello world
             </TableBodyCell>
           </tr>
@@ -291,5 +287,37 @@ describe('Table', () => {
     wrapper.find('.Textfield-input').simulate('keyup', {
       which: 27
     })
+    // make sure old value is still present
+    assert.equal(wrapper.find('.Table-body-row-cell-edit-wrapper').text(), 'hello world')
+    // make sure overlay isn't visible anymore
+    assert.equal(wrapper.find('.Table-edit').length, 0)
+  })
+
+  it('should cancel when mouse click happened outside of edit dialog', () => {
+    const table = (
+      <table>
+        <tbody>
+          <tr>
+            <TableBodyCell editable>
+              hello world
+            </TableBodyCell>
+          </tr>
+        </tbody>
+      </table>
+    )
+    const wrapper = mount(table)
+    wrapper.find('.Table-body-row-cell-edit-wrapper').simulate('click')
+    // enter some new text
+    wrapper.find('.Textfield-input').simulate('change', {
+      target: {
+        value: 'beep bopp'
+      }
+    })
+    // simulate click outside of component
+    document.dispatchEvent(new Event('click'))
+    // make sure old value is still present
+    assert.equal(wrapper.find('.Table-body-row-cell-edit-wrapper').text(), 'hello world')
+    // make sure overlay isn't visible anymore
+    assert.equal(wrapper.find('.Table-edit').length, 0)
   })
 })