react-sheet - npm Package Compare versions

Comparing version 0.0.7 to 0.0.8

es/Body.js

@@ -42,44 +42,44 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
       { className: 'table-body-row', style: { width: '1075px' } },
-      React.createElement(
-        Scrollbars,
-        null,
-        data.map(function (row, rowIndex) {
-          return React.createElement(
-            'div',
-            { key: rowIndex, className: 'table-row' },
-            columns.map(function (column, colIndex) {
-              var Cell = column.Cell,
-                  width = column.width,
-                  className = column.className;
+      data.map(function (row, rowIndex) {
+        return React.createElement(
+          'div',
+          { key: rowIndex, className: 'table-row' },
+          columns.map(function (column, colIndex) {
+            var Cell = column.Cell,
+                width = column.width,
+                className = column.className;
 
 
-              var rowData = {
-                index: rowIndex,
-                original: row,
-                value: _get(row, column.accessor, '')
-              };
+            var rowData = {
+              index: rowIndex,
+              original: row,
+              value: _get(row, column.accessor, '')
+            };
 
-              var customCell = Cell && Cell(rowData, {
-                isFocused: rowIndex == focusedRow && colIndex == focusedColumn
-              });
+            var isFocused = rowIndex == focusedRow && colIndex == focusedColumn;
+            var isSelected = selectedRow == rowIndex && selectedColumn == colIndex;
+            var customCell = Cell && Cell(rowData, {
+              isFocused: isFocused
+            });
 
-              return React.createElement(CustomCell, {
-                ref: function ref(elem) {
-                  return _this2['cell-' + rowIndex + '-' + colIndex] = elem;
-                },
-                key: rowIndex + '-' + colIndex,
-                style: { width: width },
-                rowData: rowData,
-                customCell: customCell,
-                className: classNames('t-columns', className, {
-                  selected: selectedRow == rowIndex && selectedColumn == colIndex
-                }),
-                onMouseDown: function onMouseDown() {
-                  return setSelection(rowIndex, colIndex);
-                }
-              });
-            })
-          );
-        })
-      )
+            return React.createElement(CustomCell, {
+              ref: function ref(elem) {
+                return _this2['cell-' + rowIndex + '-' + colIndex] = elem;
+              },
+              key: rowIndex + '-' + colIndex,
+              style: { width: width },
+              rowData: rowData,
+              isFocused: isFocused,
+              isSelected: isSelected,
+              customCell: customCell,
+              className: classNames('t-columns', className, {
+                selected: isSelected
+              }),
+              onMouseDown: function onMouseDown() {
+                return setSelection(rowIndex, colIndex);
+              }
+            });
+          })
+        );
+      })
     );
@@ -86,0 +86,0 @@ };

es/CustomCell.js

@@ -18,2 +18,10 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
+  CustomCell.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
+    if (this.props.isSelected !== nextProps.isSelected || nextProps.isFocused) {
+      return true;
+    }
+
+    return false;
+  };
+
   CustomCell.prototype.render = function render() {
@@ -20,0 +28,0 @@ var _props = this.props,

es/Hagrid.js

@@ -47,17 +47,13 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
         { className: 'data-table' },
-        React.createElement(
-          Scrollbars,
-          null,
-          React.createElement(Header, { columns: columns }),
-          React.createElement(Body, {
-            ref: function ref(elem) {
-              return _this2.body = elem;
-            },
-            data: data,
-            columns: columns,
-            selection: selection,
-            focusedCell: focusedCell,
-            setSelection: setSelection
-          })
-        )
+        React.createElement(Header, { columns: columns }),
+        React.createElement(Body, {
+          ref: function ref(elem) {
+            return _this2.body = elem;
+          },
+          data: data,
+          columns: columns,
+          selection: selection,
+          focusedCell: focusedCell,
+          setSelection: setSelection
+        })
       )
@@ -64,0 +60,0 @@ );

es/Header.js

@@ -1,4 +0,5 @@
-import classNames from 'classnames';
-import React, { Component } from 'react';
+import React from 'react';
 
+import HeaderCell from './HeaderCell';
+
 var Header = function Header(_ref) {
@@ -12,16 +13,4 @@ var columns = _ref.columns;
       { className: 'table-row table-header-group' },
-      columns.map(function (column) {
-        var width = column.width,
-            headerClassname = column.headerClassname;
-
-
-        return React.createElement(
-          'div',
-          {
-            key: column.Header,
-            style: { width: width, maxWidth: width },
-            className: classNames('t-head', headerClassname)
-          },
-          column.Header
-        );
+      columns.map(function (column, index) {
+        return React.createElement(HeaderCell, { key: index, column: column });
       })
@@ -28,0 +17,0 @@ )

es/hoc/withKeyEvents.js

@@ -42,5 +42,5 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
       _this.onKeyPress = function (e) {
-        var charCode = e.charCode;
-
-        _this.focus();
+        if (!_this.isFocused()) {
+          _this.focus();
+        }
       };
@@ -54,3 +54,2 @@
 
-          _this.setFocus(null, null);
           _this.addListeners();
@@ -70,2 +69,6 @@ _this.removeEscapeListener();
         _this.setState({
+          focusedCell: {
+            row: null,
+            column: null
+          },
           selection: {
@@ -78,2 +81,15 @@ row: row,
 
+      _this.isFocused = function () {
+        var _this$state$focusedCe = _this.state.focusedCell,
+            row = _this$state$focusedCe.row,
+            column = _this$state$focusedCe.column;
+
+
+        if (row && column) {
+          return true;
+        }
+
+        return false;
+      };
+
       _this.setFocus = function (row, column) {
@@ -99,3 +115,3 @@ _this.setState({
 
-        _this.setFocus(null, null);
+        // this.setFocus(null, null);
 
@@ -151,3 +167,2 @@ var press = (_press = {}, _press[keys.UP] = _this.moveUp, _press[keys.DOWN] = _this.moveDown, _press[keys.LEFT] = _this.moveLeft, _press[keys.RIGHT] = _this.moveRight, _press[keys.ENTER] = _this.focus, _press);
 
-        console.log(selection.row, selection.column);
 
@@ -186,2 +201,7 @@ var customCell = _this.keyWrapper.body['cell-' + selection.row + '-' + selection.column].props.customCell;
 
+    /**
+     * Focus while directly typing on selection.
+     */
+
+
     KeyWrapper.prototype.render = function render() {
@@ -188,0 +208,0 @@ var _this2 = this;

es/Select.js

@@ -125,2 +125,10 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
+  Select.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
+    if (this.props.value !== nextProps.value) {
+      return true;
+    }
+
+    return false;
+  };
+
   Select.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
@@ -127,0 +135,0 @@ if (nextProps.isFocused !== this.props.isFocused) {

lib/Body.js

@@ -59,44 +59,44 @@ 'use strict';
       { className: 'table-body-row', style: { width: '1075px' } },
-      _react2.default.createElement(
-        _reactCustomScrollbars.Scrollbars,
-        null,
-        data.map(function (row, rowIndex) {
-          return _react2.default.createElement(
-            'div',
-            { key: rowIndex, className: 'table-row' },
-            columns.map(function (column, colIndex) {
-              var Cell = column.Cell,
-                  width = column.width,
-                  className = column.className;
+      data.map(function (row, rowIndex) {
+        return _react2.default.createElement(
+          'div',
+          { key: rowIndex, className: 'table-row' },
+          columns.map(function (column, colIndex) {
+            var Cell = column.Cell,
+                width = column.width,
+                className = column.className;
 
 
-              var rowData = {
-                index: rowIndex,
-                original: row,
-                value: (0, _get3.default)(row, column.accessor, '')
-              };
+            var rowData = {
+              index: rowIndex,
+              original: row,
+              value: (0, _get3.default)(row, column.accessor, '')
+            };
 
-              var customCell = Cell && Cell(rowData, {
-                isFocused: rowIndex == focusedRow && colIndex == focusedColumn
-              });
+            var isFocused = rowIndex == focusedRow && colIndex == focusedColumn;
+            var isSelected = selectedRow == rowIndex && selectedColumn == colIndex;
+            var customCell = Cell && Cell(rowData, {
+              isFocused: isFocused
+            });
 
-              return _react2.default.createElement(_CustomCell2.default, {
-                ref: function ref(elem) {
-                  return _this2['cell-' + rowIndex + '-' + colIndex] = elem;
-                },
-                key: rowIndex + '-' + colIndex,
-                style: { width: width },
-                rowData: rowData,
-                customCell: customCell,
-                className: (0, _classnames2.default)('t-columns', className, {
-                  selected: selectedRow == rowIndex && selectedColumn == colIndex
-                }),
-                onMouseDown: function onMouseDown() {
-                  return setSelection(rowIndex, colIndex);
-                }
-              });
-            })
-          );
-        })
-      )
+            return _react2.default.createElement(_CustomCell2.default, {
+              ref: function ref(elem) {
+                return _this2['cell-' + rowIndex + '-' + colIndex] = elem;
+              },
+              key: rowIndex + '-' + colIndex,
+              style: { width: width },
+              rowData: rowData,
+              isFocused: isFocused,
+              isSelected: isSelected,
+              customCell: customCell,
+              className: (0, _classnames2.default)('t-columns', className, {
+                selected: isSelected
+              }),
+              onMouseDown: function onMouseDown() {
+                return setSelection(rowIndex, colIndex);
+              }
+            });
+          })
+        );
+      })
     );
@@ -103,0 +103,0 @@ };

lib/CustomCell.js

@@ -26,2 +26,10 @@ 'use strict';
 
+  CustomCell.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
+    if (this.props.isSelected !== nextProps.isSelected || nextProps.isFocused) {
+      return true;
+    }
+
+    return false;
+  };
+
   CustomCell.prototype.render = function render() {
@@ -28,0 +36,0 @@ var _props = this.props,

lib/Hagrid.js

@@ -68,17 +68,13 @@ 'use strict';
         { className: 'data-table' },
-        _react2.default.createElement(
-          _reactCustomScrollbars.Scrollbars,
-          null,
-          _react2.default.createElement(_Header2.default, { columns: columns }),
-          _react2.default.createElement(_Body2.default, {
-            ref: function ref(elem) {
-              return _this2.body = elem;
-            },
-            data: data,
-            columns: columns,
-            selection: selection,
-            focusedCell: focusedCell,
-            setSelection: setSelection
-          })
-        )
+        _react2.default.createElement(_Header2.default, { columns: columns }),
+        _react2.default.createElement(_Body2.default, {
+          ref: function ref(elem) {
+            return _this2.body = elem;
+          },
+          data: data,
+          columns: columns,
+          selection: selection,
+          focusedCell: focusedCell,
+          setSelection: setSelection
+        })
       )
@@ -85,0 +81,0 @@ );

lib/Header.js

@@ -5,6 +5,2 @@ 'use strict';
 
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
 var _react = require('react');
@@ -14,2 +10,6 @@
 
+var _HeaderCell = require('./HeaderCell');
+
+var _HeaderCell2 = _interopRequireDefault(_HeaderCell);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -25,16 +25,4 @@
       { className: 'table-row table-header-group' },
-      columns.map(function (column) {
-        var width = column.width,
-            headerClassname = column.headerClassname;
-
-
-        return _react2.default.createElement(
-          'div',
-          {
-            key: column.Header,
-            style: { width: width, maxWidth: width },
-            className: (0, _classnames2.default)('t-head', headerClassname)
-          },
-          column.Header
-        );
+      columns.map(function (column, index) {
+        return _react2.default.createElement(_HeaderCell2.default, { key: index, column: column });
       })
@@ -41,0 +29,0 @@ )

lib/hoc/withKeyEvents.js

@@ -54,5 +54,5 @@ 'use strict';
       _this.onKeyPress = function (e) {
-        var charCode = e.charCode;
-
-        _this.focus();
+        if (!_this.isFocused()) {
+          _this.focus();
+        }
       };
@@ -66,3 +66,2 @@
 
-          _this.setFocus(null, null);
           _this.addListeners();
@@ -82,2 +81,6 @@ _this.removeEscapeListener();
         _this.setState({
+          focusedCell: {
+            row: null,
+            column: null
+          },
           selection: {
@@ -90,2 +93,15 @@ row: row,
 
+      _this.isFocused = function () {
+        var _this$state$focusedCe = _this.state.focusedCell,
+            row = _this$state$focusedCe.row,
+            column = _this$state$focusedCe.column;
+
+
+        if (row && column) {
+          return true;
+        }
+
+        return false;
+      };
+
       _this.setFocus = function (row, column) {
@@ -111,3 +127,3 @@ _this.setState({
 
-        _this.setFocus(null, null);
+        // this.setFocus(null, null);
 
@@ -163,3 +179,2 @@ var press = (_press = {}, _press[keys.UP] = _this.moveUp, _press[keys.DOWN] = _this.moveDown, _press[keys.LEFT] = _this.moveLeft, _press[keys.RIGHT] = _this.moveRight, _press[keys.ENTER] = _this.focus, _press);
 
-        console.log(selection.row, selection.column);
 
@@ -198,2 +213,7 @@ var customCell = _this.keyWrapper.body['cell-' + selection.row + '-' + selection.column].props.customCell;
 
+    /**
+     * Focus while directly typing on selection.
+     */
+
+
     KeyWrapper.prototype.render = function render() {
@@ -200,0 +220,0 @@ var _this2 = this;

lib/Select.js

@@ -141,2 +141,10 @@ 'use strict';
 
+  Select.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
+    if (this.props.value !== nextProps.value) {
+      return true;
+    }
+
+    return false;
+  };
+
   Select.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
@@ -143,0 +151,0 @@ if (nextProps.isFocused !== this.props.isFocused) {

package.json

 {
   "name": "react-sheet",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Spreadsheet component for react",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1770629

increased by0.57%

Number of package files

29

increased by7.41%

Lines of code

24986

increased by0.66%

No dependency changes