Merge branch 'master' into master

Author: nadbm

README.md

@@ -3,12 +3,12 @@
 [![Coverage Status](https://coveralls.io/repos/github/nadbm/react-datasheet/badge.svg)](https://coveralls.io/github/nadbm/react-datasheet) 
 # React-Datasheet
 A simple react component to create a spreadsheet. 
-Demo here: https://nadbm.github.io/react-datasheet/
-Examples are located in https://github.com/nadbm/react-datasheet/tree/master/docs/src/examples
 
+Demo here: https://nadbm.github.io/react-datasheet/
 
-Current features
+Examples are located in https://github.com/nadbm/react-datasheet/tree/master/docs/src/examples
 
+Current features:
 * Select cells, copy-paste cells
 * Navigation using keyboard keys
 * Deletion using keyboard keys
@@ -19,10 +19,10 @@ Current features
 ## Installation
 
 Install from npm: 
-```javascript
+```bash
 $ npm install react-datasheet --save
 ```
-Import in your project
+Import in your project:
 
 ```javascript
 import ReactDataSheet from 'react-datasheet';
@@ -73,39 +73,36 @@ class App extends React.Component {
 There are two values that each cell shows. The first is via ```valueRenderer``` and the second is via ```dataRenderer```. When a cell is in *edit mode*, it will show the value returned from ```dataRenderer```. It needs to return a string as this value is set in an input field.
 
 ```jsx 
-  const grid = [
-     [{value:  5, expr: '1 + 4'}, {value:  6, expr: '6'}],
-     [{value:  5, expr: '1 + 4'}, {value:  5, expr: '1 + 4'}]
-  ]
-  const onChange = (cell, i, j, newValue) => console.log("New expression :" + newValue)
-  <ReactDataSheet 
-    data={grid}
-    valueRenderer={(cell) => cell.value}
-    dataRenderer={(cell) => cell.expr}
-    onChange={} 
-  />
-    )
-  }
-}
+const grid = [
+   [{value:  5, expr: '1 + 4'}, {value:  6, expr: '6'}],
+   [{value:  5, expr: '1 + 4'}, {value:  5, expr: '1 + 4'}]
+]
+const onChange = (cell, i, j, newValue) => console.log("New expression :" + newValue)
+<ReactDataSheet 
+  data={grid}
+  valueRenderer={(cell) => cell.value}
+  dataRenderer={(cell) => cell.expr}
+  onChange={} 
+/>
 ```
 
 ### Cells with underlying component
 
 ```jsx 
-  const grid = [
-     [{
-      value:  5, 
-        component: ( 
-          <button onClick={() => console.log("clicked")}}>
-            Rendered
-          </button>
-        )
-      }]
-  ]
-  <ReactDataSheet 
-    data={grid}
-    valueRenderer={(cell) => cell.value}
-  />
+const grid = [
+   [{
+    value:  5, 
+      component: ( 
+        <button onClick={() => console.log("clicked")}}>
+          Rendered
+        </button>
+      )
+    }]
+]
+<ReactDataSheet 
+  data={grid}
+  valueRenderer={(cell) => cell.value}
+/>
 ```
 This renders a single cell with the value 5. Once in edit mode, the button will appear.
 
@@ -117,6 +114,7 @@ data | Array | Array of rows and each row should contain the cell objects to dis
 valueRenderer | func | Method to render the value of the cell `function(cell)`. This is visible by default
 dataRenderer | func | Method to render the underlying value of the cell `function(cell)`. This data is visible once in edit mode.
 onChange | func | onChange handler: `function(cell, i, j, newValue) {}`
+onPaste | func | onPaste handler: `function(array) {}` If set, the function will be called with an array of rows. Each row has an array of objects containing the cell and raw pasted value. If the pasted value cannot be matched with a cell, the cell value will be undefined
 
 ## Cell Options
 
@@ -126,8 +124,8 @@ Option | Type | Default |  Description
 :--- | :--- | :--- | :--
 readOnly | Bool | false | Cell will never go in edit mode
 key | String | undefined | By default, each cell is given the key of col number and row number. This would override that key
-className | String | undefined | Additional class names for cells. 
+className | String | undefined | Additional class names for cells.
 component | ReactElement | undefined | Insert a react element or JSX to this field. This will render on edit mode
-forceComponent | bool | false | Renders whats in component at all times, even when not in edit mode
+forceComponent | bool | false | Renders what's in component at all times, even when not in edit mode
 colSpan | number | 1 | The colSpan of the cell's td element
 rowSpan | number | 1 | The rowSpan of the cell's td element

docs/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "react-datasheet",
+  "name": "react-datasheet-example",
   "version": "0.1.0",
   "private": true,
   "homepage": "http://nadbm.github.io/react-datasheet",
@@ -9,13 +9,16 @@
   "dependencies": {
     "mathjs": "^3.10.0",
     "react": "^15.4.2",
+    "react-datasheet": "^1.2.3",
     "react-dom": "^15.4.2",
     "react-select": "^1.0.0-rc.3"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build"
   }
 }

docs/public/favicon.ico

@@ -15,7 +15,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>React Datasheet Component</title>
   </head>
   <body>
 

docs/public/index.html

@@ -1,5 +1,5 @@
 import _ from 'lodash'
-import Datasheet from '../../../lib'; 
+import Datasheet from 'react-datasheet';  
 import React from 'react';
 
 export default class BasicSheet extends React.Component {

docs/src/examples/BasicSheet.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import Select from 'react-select'
 import _ from 'lodash'
-import Datasheet from '../../../lib'; 
+import Datasheet from 'react-datasheet';  
 
 export default class ComponentSheet extends React.Component {
   constructor (props) {

docs/src/examples/ComponentSheet.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import _ from 'lodash'
-import Datasheet from '../../../lib';  
+import Datasheet from 'react-datasheet';  
 import mathjs from 'mathjs';
 
 
@@ -79,7 +79,7 @@ export default class MathSheet extends React.Component {
   }
 
   cellUpdate(state, changeCell, expr) {
-    const scope = _.mapValues(state, (val) => isNaN(val.value) ? 0 : parseInt(val.value))
+    const scope = _.mapValues(state, (val) => isNaN(val.value) ? 0 : parseFloat(val.value))
     const updatedCell = _.assign({}, changeCell, this.computeExpr(changeCell.key, expr, scope))
     state[changeCell.key] = updatedCell
 

docs/src/examples/MathSheet.js

@@ -50,7 +50,7 @@ body {
 }
 
 .container {
-  width: 600px;
+  max-width: 600px;
   margin: auto;
 }
 table.data-grid {
@@ -74,15 +74,17 @@ table.data-grid {
 .sheet-container {
   display: block;
   padding: 5px;
-  box-shadow: 0px 0px 2px #CCC;
+
+  box-shadow: 2px 4px 6px #CCC; 
   margin: auto;
   width: 500px;
   margin-top: 20px;
-  transition: box-shadow 0.2s ease-in;
+  transition: box-shadow 0.5s ease-in;
 }
 .sheet-container:hover {
-  transition: box-shadow 0.5s ease-in;
-  box-shadow: 2px 4px 6px #CCC; 
+  transition: box-shadow 0.2s ease-in;
+
+  box-shadow: 0px 0px 2px #CCC;
 }
 .sheet-container table.data-grid tr td.cell:not(.selected){
   border: 1px solid #ececec;

docs/src/index.css

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App';
+import App from './app';
 import './index.css';
 
 ReactDOM.render(

docs/src/index.js

@@ -140,30 +140,28 @@ var DataSheet = function (_PureComponent) {
     value: function handlePaste(e) {
       var _this2 = this;
 
-      var pasteData = e.clipboardData.getData('text/plain').split('\n').map(function (row) {
+      this.dgDom.removeEventListener('paste', this.handlePaste);
+
+      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 columnMaps = [];
-      var start = this.state.start;
 
       pasteData.map(function (row, i) {
-        var rowMap = [];
+        var rowData = [];
         row.map(function (pastedData, j) {
           var cell = _this2.props.data[start.i + i] && _this2.props.data[start.i + i][start.j + j];
-          rowMap.push({ cell: cell, data: pastedData });
+          rowData.push({ cell: cell, data: pastedData });
           if (cell && !cell.readOnly && !_this2.props.onPaste) {
             _this2.onChange(start.i + i, start.j + j, pastedData);
           }
         });
-        columnMaps.push(rowMap);
+        pastedMap.push(rowData);
       });
 
-      if (this.props.onPaste) {
-        this.props.onPaste(columnMaps);
-      }
-      ;
+      this.props.onPaste && this.props.onPaste(pastedMap);
       this.setState(this.defaultState);
-      this.dgDom.removeEventListener('paste', this.handlePaste);
     }
   }, {
     key: 'handleKeyboardCellMovement',