[bugfix] when in edit mode, copying only copied previously held cell data and not selected text

Author: nadbm

lib/DataSheet.js

@@ -114,43 +114,44 @@ var DataSheet = function (_PureComponent) {
   }, {
     key: 'handleCopy',
     value: function handleCopy(e) {
-      e.preventDefault();
-      var _props = this.props,
-          dataRenderer = _props.dataRenderer,
-          valueRenderer = _props.valueRenderer,
-          data = _props.data;
-      var _state = this.state,
-          start = _state.start,
-          end = _state.end;
-
-
-      var text = range(start.i, end.i).map(function (i) {
-        return range(start.j, end.j).map(function (j) {
-          return data[i][j];
-        }).map(function (cell) {
-          var value = dataRenderer ? dataRenderer(cell) : null;
-          if (value === '' || value === null || typeof value === 'undefined') {
-            return valueRenderer(cell);
-          }
-          return value;
-        }).join('\t');
-      }).join('\n');
-      e.clipboardData.setData('text/plain', text);
-      document.removeEventListener('copy', this.handlePaste);
+      if (isEmpty(this.state.editing)) {
+        e.preventDefault();
+        var _props = this.props,
+            dataRenderer = _props.dataRenderer,
+            valueRenderer = _props.valueRenderer,
+            data = _props.data;
+        var _state = this.state,
+            start = _state.start,
+            end = _state.end;
+
+
+        var text = range(start.i, end.i).map(function (i) {
+          return range(start.j, end.j).map(function (j) {
+            return data[i][j];
+          }).map(function (cell) {
+            var value = dataRenderer ? dataRenderer(cell) : null;
+            if (value === '' || value === null || typeof value === 'undefined') {
+              return valueRenderer(cell);
+            }
+            return value;
+          }).join('\t');
+        }).join('\n');
+        e.clipboardData.setData('text/plain', text);
+      }
     }
   }, {
     key: 'handlePaste',
     value: function handlePaste(e) {
       var _this2 = this;
 
-      this.dgDom.removeEventListener('paste', this.handlePaste);
-
       if (isEmpty(this.state.editing)) {
         var start = this.state.start;
+
         var pastedMap = [];
         var pasteData = e.clipboardData.getData('text/plain').split(/\n|\r/).map(function (row) {
           return row.split('\t');
         });
+        var end = {};
 
         pasteData.map(function (row, i) {
           var rowData = [];
@@ -159,12 +160,13 @@ var DataSheet = function (_PureComponent) {
             rowData.push({ cell: cell, data: pastedData });
             if (cell && !cell.readOnly && !_this2.props.onPaste) {
               _this2.onChange(start.i + i, start.j + j, pastedData);
+              end = { i: start.i + i, j: start.j + j };
             }
           });
           pastedMap.push(rowData);
         });
         this.props.onPaste && this.props.onPaste(pastedMap);
-        this.setState(this.defaultState);
+        this.setState({ end: end });
       }
     }
   }, {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-datasheet",
-  "version": "1.2.8",
+  "version": "1.2.9",
   "description": "Excel-like data grid for React",
   "repository": {
     "type": "git",

src/DataSheet.js

@@ -73,35 +73,36 @@ export default class DataSheet extends PureComponent {
   }
 
   handleCopy(e) {
-    e.preventDefault();
-    const {dataRenderer, valueRenderer, data} = this.props;
-    const {start, end} = this.state;
+    if(isEmpty(this.state.editing)) {
+      e.preventDefault();
+      const {dataRenderer, valueRenderer, data} = this.props;
+      const {start, end} = this.state;
 
 
-    const text = range(start.i, end.i).map((i) =>
-      range(start.j, end.j).map(j => data[i][j])
-        .map(cell => {
-          let value = dataRenderer ? dataRenderer(cell) : null;
-          if (value === '' || value === null || typeof(value) === 'undefined') {
-            return valueRenderer(cell);
-          }
-          return value;
-        }).join('\t')
-    ).join('\n');
-    e.clipboardData.setData('text/plain', text);
-    document.removeEventListener('copy', this.handlePaste);
+      const text = range(start.i, end.i).map((i) =>
+        range(start.j, end.j).map(j => data[i][j])
+          .map(cell => {
+            let value = dataRenderer ? dataRenderer(cell) : null;
+            if (value === '' || value === null || typeof(value) === 'undefined') {
+              return valueRenderer(cell);
+            }
+            return value;
+          }).join('\t')
+      ).join('\n');
+      e.clipboardData.setData('text/plain', text);
+    }
   }
 
   handlePaste(e) {
-    this.dgDom.removeEventListener('paste', this.handlePaste);
-    
     if(isEmpty(this.state.editing)) {
       const start = this.state.start;
+      
       const pastedMap = [];
       const pasteData = e.clipboardData
         .getData('text/plain')
         .split(/\n|\r/)
         .map((row) => row.split('\t'));
+      let end = {};
 
       pasteData.map((row, i) => {
         const rowData = [];
@@ -110,12 +111,14 @@ export default class DataSheet extends PureComponent {
           rowData.push({cell: cell, data: pastedData});
           if (cell && !cell.readOnly && !this.props.onPaste) {
             this.onChange(start.i + i, start.j + j, pastedData);
+            end = {i: start.i + i, j: start.j + j};
           }
+          
         });
         pastedMap.push(rowData);
       });
       this.props.onPaste && this.props.onPaste(pastedMap);
-      this.setState(this.defaultState);
+      this.setState({end: end});
     }
   }
 
@@ -190,6 +193,7 @@ export default class DataSheet extends PureComponent {
       return true;
     }
 
+
     if (deleteKeysPressed && !isEditing) {
       this.getSelectedCells(data, start, end).map(({cell, i, j}) =>
         (!cell.readOnly) ? this.onChange(i, j, '') : null

test/Datasheet.js

@@ -795,12 +795,17 @@ describe('Component', () => {
       });
       it('pastes data properly', () => {
           cells.at(0).simulate('mouseDown');
+          expect(wrapper.state('end')).toEqual({i: 0, j: 0});
+          
           const evt = document.createEvent("HTMLEvents");
           evt.initEvent("paste", false, true);
           evt.clipboardData = { getData: (type)=> '99\t100\n1001\t1002'};
           document.dispatchEvent(evt);
+
           expect(data[0].map(d => d.data)).toEqual(['99', '100']);
           expect(data[1].map(d => d.data)).toEqual(['1001', '1002']);
+          expect(wrapper.state('end')).toEqual({i: 1, j: 1});
+
       });
 
       it('pastes data properly on a different cell', () => {