Update version and overall folder structure. Adds new tests

lveillard · Apr 4, 2017 · 4321ab6 · 4321ab6
1 parent b6f4ceb
commit 4321ab6
Show file tree

Hide file tree

Showing 17 changed files with 2,299 additions and 622 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -0,0 +1,4 @@
+language: node_js
+node_js:
+  - "stable"
+after_success: npm run coverage
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2016 Nadim Islam
+Copyright (c) 2017 Nadim Islam
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -1,51 +1,102 @@
-# React DataSheet 
+# React-Select
+A simple react component to create a spreadsheet. 
+https://nadbm.github.io/react-datasheet/
 
-A simple react component to create a spreadsheet.
-View DEMO https://nadbm.github.io/react-datasheet/
+Current features
 
-## Current features
-1. Select cells, copy-paste cells
-2. Navigation using keyboard keys
-3. Deletion using keyboard keys 
-4. Callbacks for onChange, valueRenderer(visible data), dataRenderer(underlying data in the input, takes the value by default)
-    * more examples to come soon! 
+* Select cells, copy-paste cells
+* Navigation using keyboard keys
+* Deletion using keyboard keys
+* Callbacks for onChange, valueRenderer(visible data)
+* dataRenderer(underlying data in the input, takes the value by default)
 
-## Installation    
-React 15
 
-    npm install react-datasheet --save
+## Installation
 
+Install from npm: 
+```javascript
+$ npm install react-datasheet --save
+```
+Import in your project
+
+```javascript
+import Datasheet from 'react-select';
+// Be sure to include styles at some point, probably during your bootstrapping
+import 'react-datasheet/dist/react-datasheet.css';
+```
 
 ## Usage
-``` javascript
-import React from 'react';
-import ReactDataSheet from 'react-datasheet';
 
-// include styles
-import 'react-datasheet/dist/react-datasheet.css';
+React-Datasheet generates a table with the cells. Double-clicking or typing edits the value and if changed, initiates an onChange callback. 
 
-class App extends React.Component {
+The data provided should be an array of rows, and each row should include the cells.
 
-    constructor(props) {
-        super(props);
-        this.data = [
-			[1 , 2, 3, 4, 5],
-			[6,  7, 8, 9,10],
-			[11,12,13,14,15],
-			[16,17,18,19,20]
-		];
+###Basic Usage
+```javascript
+class App extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      grid: [
+        [{value:  1}, {value:  3}],
+        [{value:  2}, {value:  4}]
+      ]
     }
+  }
+  render () {
+    return (
+      <ReactDataSheet 
+        data={this.state.grid}
+        valueRenderer={(cell) => cell.value}
+        onChange={(cell, colI, rowJ, value) => 
+          this.setState({
+            grid: this.state.grid.map((col, i) => 
+              (i !== colI)
+              ? col
+              : col.map((row, j) => 
+                (j !== rowJ) ? row : ({value: value})
+              )
+            )
+          }) 
+        }
+      />
+    )
+  }
+}
+```
 
-    render() {
-        return (
-            <div>
-			<ReactDataSheet 
-				data={data}
-				valueRenderer={(cell) => cell}
-				onChange={(cell, col, row, value)=> this.data[i][j] = value} />
-            </div>
-        )
+###Cells with underlying data (think formulas under cells)
+```javascript 
+
+class App extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      grid: [
+        [{value:  1}, {value:  3}],
+        [{value:  2}, {value:  4}]
+      ]
     }
+  }
+  render () {
+    return (
+      <ReactDataSheet 
+        data={this.state.grid}
+        valueRenderer={(cell) => cell}
+        dataRenderer={}
+        onChange={(cell, colI, rowJ, value) => 
+          this.setState({
+            grid: this.state.grid.map((col, i) => 
+              (i !== colI)
+              ? col
+              : col.map((row, j) => 
+                (j !== rowJ) ? row : ({value: value})
+              )
+            )
+          }) 
+        }
+      />
+    )
+  }
 }
 ```
-
diff --git a/index.js b/index.js
diff --git a/lib/ComponentCell.js b/lib/ComponentCell.js
@@ -0,0 +1,115 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var ComponentCell = function (_PureComponent) {
+  _inherits(ComponentCell, _PureComponent);
+
+  function ComponentCell(props) {
+    _classCallCheck(this, ComponentCell);
+
+    var _this = _possibleConstructorReturn(this, (ComponentCell.__proto__ || Object.getPrototypeOf(ComponentCell)).call(this, props));
+
+    _this.state = { updated: false };
+    return _this;
+  }
+
+  _createClass(ComponentCell, [{
+    key: 'componentWillUpdate',
+    value: function componentWillUpdate(nextProps) {
+      var _this2 = this;
+
+      var prevProps = this.props;
+      if (nextProps.value !== this.props.value) {
+        this.setState({ updated: true });
+        this.timeout = setTimeout(function () {
+          _this2.setState({ updated: false });
+        }, 700);
+      }
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      clearTimeout(this.timeout);
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this3 = this;
+
+      var _props = this.props,
+          row = _props.row,
+          col = _props.col,
+          readOnly = _props.readOnly,
+          forceComponent = _props.forceComponent,
+          rowSpan = _props.rowSpan,
+          colSpan = _props.colSpan,
+          value = _props.value,
+          className = _props.className,
+          editing = _props.editing,
+          selected = _props.selected,
+          _onMouseDown = _props.onMouseDown,
+          _onMouseOver = _props.onMouseOver,
+          _onDoubleClick = _props.onDoubleClick;
+
+
+      return _react2.default.createElement(
+        'td',
+        { ref: function ref(_ref) {
+            return _this3._container = _ref;
+          },
+          className: [className, 'cell', selected && 'selected', this.state.updated && 'updated'].filter(function (a) {
+            return a;
+          }).join(' '),
+          onMouseDown: function onMouseDown() {
+            return _onMouseDown(row, col);
+          },
+          onDoubleClick: function onDoubleClick() {
+            return _onDoubleClick(row, col);
+          },
+          onMouseOver: function onMouseOver() {
+            return _onMouseOver(row, col);
+          },
+          colSpan: colSpan || 1,
+          rowSpan: rowSpan || 1 },
+        editing && !readOnly || forceComponent ? this.props.component : value
+      );
+    }
+  }]);
+
+  return ComponentCell;
+}(_react.PureComponent);
+
+exports.default = ComponentCell;
+
+
+ComponentCell.propTypes = {
+  row: _react.PropTypes.number.isRequired,
+  col: _react.PropTypes.number.isRequired,
+  colSpan: _react.PropTypes.number,
+  rowSpan: _react.PropTypes.number,
+  className: _react.PropTypes.string,
+  selected: _react.PropTypes.bool.isRequired,
+  editing: _react.PropTypes.bool.isRequired,
+  onMouseDown: _react.PropTypes.func.isRequired,
+  onDoubleClick: _react.PropTypes.func.isRequired,
+  onMouseOver: _react.PropTypes.func.isRequired,
+  updated: _react.PropTypes.bool,
+  forceComponent: _react.PropTypes.bool
+};