react-sheet - npm Package Compare versions

Comparing version 0.0.23 to 0.0.24

es/Body.js

@@ -83,3 +83,3 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
         className: 'table-body-row',
-        style: { width: width || '1075px' },
+        style: { width: width || '1075px', height: bodyHeight || '' },
         id: 'react-sheet-body'
@@ -86,0 +86,0 @@ },

es/Hagrid.js

@@ -9,7 +9,6 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 import React, { Component } from 'react';
+import classnames from 'classnames';
 
 import Body from './Body';
-import Input from './Input';
 import Header from './Header';
-import Select from './Select';
 import { Scrollbars } from 'react-custom-scrollbars';
@@ -26,7 +25,19 @@
     _this.setWidth = function (width) {
-      _this.setState({ width: width });
+      _this.setState({ headerWidth: width });
     };
 
+    _this.setHeight = function (height) {
+      _this.setState({ headerHeight: height });
+    };
+
+    _this.setTableHeight = function (height) {
+      _this.setState({
+        tableHeight: _this.props.height || _this.dataTable.offsetHeight
+      });
+    };
+
     _this.state = {
-      width: null
+      tableHeight: null,
+      headerWidth: null,
+      headerHeight: null
     };
@@ -37,2 +48,6 @@ _this.body;
 
+  Hagrid.prototype.componentDidMount = function componentDidMount() {
+    this.setTableHeight();
+  };
+
   Hagrid.prototype.render = function render() {
@@ -47,2 +62,4 @@ var _this2 = this;
         selection = _props.selection,
+        height = _props.height,
+        className = _props.className,
         setSelection = _props.setSelection,
@@ -52,3 +69,6 @@ focus = _props.focus,
         focusedCell = _props.focusedCell;
-    var width = this.state.width;
+    var _state = this.state,
+        headerWidth = _state.headerWidth,
+        headerHeight = _state.headerHeight;
+    var tableHeight = this.state.tableHeight;
 
@@ -58,28 +78,33 @@
       'div',
-      { ref: function ref(elem) {
-          return _this2.grid = elem;
-        }, className: 'container' },
+      {
+        ref: function ref(elem) {
+          return _this2.dataTable = elem;
+        },
+        className: classnames('data-table', className),
+        style: { height: tableHeight || '' }
+      },
       React.createElement(
-        'div',
-        { className: 'data-table' },
-        React.createElement(
-          Scrollbars,
-          null,
-          React.createElement(Header, { width: width, columns: columns, setWidth: this.setWidth }),
-          React.createElement(Body, {
-            ref: function ref(elem) {
-              return _this2.body = elem;
-            },
-            data: data,
-            width: width,
-            focus: focus,
-            onEnter: onEnter,
-            columns: columns,
-            rowHeight: rowHeight,
-            selection: selection,
-            bodyHeight: bodyHeight,
-            focusedCell: focusedCell,
-            setSelection: setSelection
-          })
-        )
+        Scrollbars,
+        null,
+        React.createElement(Header, {
+          width: headerWidth,
+          columns: columns,
+          setWidth: this.setWidth,
+          setHeight: this.setHeight
+        }),
+        React.createElement(Body, {
+          ref: function ref(elem) {
+            return _this2.body = elem;
+          },
+          data: data,
+          width: headerWidth,
+          focus: focus,
+          onEnter: onEnter,
+          columns: columns,
+          rowHeight: rowHeight,
+          selection: selection,
+          bodyHeight: tableHeight - headerHeight,
+          focusedCell: focusedCell,
+          setSelection: setSelection
+        })
       )
@@ -86,0 +111,0 @@ );

es/Header.js

@@ -24,2 +24,3 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
     this.addWidth();
+    this.addHeight();
   };
@@ -44,2 +45,10 @@
 
+  Header.prototype.addHeight = function addHeight() {
+    var setHeight = this.props.setHeight;
+
+    var height = document.querySelector('#rs-header').offsetHeight;
+
+    setHeight(height);
+  };
+
   Header.prototype.render = function render() {
@@ -46,0 +55,0 @@ var _props2 = this.props,

lib/Body.js

@@ -95,3 +95,3 @@ 'use strict';
         className: 'table-body-row',
-        style: { width: width || '1075px' },
+        style: { width: width || '1075px', height: bodyHeight || '' },
         id: 'react-sheet-body'
@@ -98,0 +98,0 @@ },

lib/Hagrid.js

@@ -11,2 +11,6 @@ 'use strict';
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 var _Body = require('./Body');
@@ -16,6 +20,2 @@
 
-var _Input = require('./Input');
-
-var _Input2 = _interopRequireDefault(_Input);
-
 var _Header = require('./Header');
@@ -25,6 +25,2 @@
 
-var _Select = require('./Select');
-
-var _Select2 = _interopRequireDefault(_Select);
-
 var _reactCustomScrollbars = require('react-custom-scrollbars');
@@ -49,7 +45,19 @@
     _this.setWidth = function (width) {
-      _this.setState({ width: width });
+      _this.setState({ headerWidth: width });
     };
 
+    _this.setHeight = function (height) {
+      _this.setState({ headerHeight: height });
+    };
+
+    _this.setTableHeight = function (height) {
+      _this.setState({
+        tableHeight: _this.props.height || _this.dataTable.offsetHeight
+      });
+    };
+
     _this.state = {
-      width: null
+      tableHeight: null,
+      headerWidth: null,
+      headerHeight: null
     };
@@ -60,2 +68,6 @@ _this.body;
 
+  Hagrid.prototype.componentDidMount = function componentDidMount() {
+    this.setTableHeight();
+  };
+
   Hagrid.prototype.render = function render() {
@@ -70,2 +82,4 @@ var _this2 = this;
         selection = _props.selection,
+        height = _props.height,
+        className = _props.className,
         setSelection = _props.setSelection,
@@ -75,3 +89,6 @@ focus = _props.focus,
         focusedCell = _props.focusedCell;
-    var width = this.state.width;
+    var _state = this.state,
+        headerWidth = _state.headerWidth,
+        headerHeight = _state.headerHeight;
+    var tableHeight = this.state.tableHeight;
 
@@ -81,28 +98,33 @@
       'div',
-      { ref: function ref(elem) {
-          return _this2.grid = elem;
-        }, className: 'container' },
+      {
+        ref: function ref(elem) {
+          return _this2.dataTable = elem;
+        },
+        className: (0, _classnames2.default)('data-table', className),
+        style: { height: tableHeight || '' }
+      },
       _react2.default.createElement(
-        'div',
-        { className: 'data-table' },
-        _react2.default.createElement(
-          _reactCustomScrollbars.Scrollbars,
-          null,
-          _react2.default.createElement(_Header2.default, { width: width, columns: columns, setWidth: this.setWidth }),
-          _react2.default.createElement(_Body2.default, {
-            ref: function ref(elem) {
-              return _this2.body = elem;
-            },
-            data: data,
-            width: width,
-            focus: focus,
-            onEnter: onEnter,
-            columns: columns,
-            rowHeight: rowHeight,
-            selection: selection,
-            bodyHeight: bodyHeight,
-            focusedCell: focusedCell,
-            setSelection: setSelection
-          })
-        )
+        _reactCustomScrollbars.Scrollbars,
+        null,
+        _react2.default.createElement(_Header2.default, {
+          width: headerWidth,
+          columns: columns,
+          setWidth: this.setWidth,
+          setHeight: this.setHeight
+        }),
+        _react2.default.createElement(_Body2.default, {
+          ref: function ref(elem) {
+            return _this2.body = elem;
+          },
+          data: data,
+          width: headerWidth,
+          focus: focus,
+          onEnter: onEnter,
+          columns: columns,
+          rowHeight: rowHeight,
+          selection: selection,
+          bodyHeight: tableHeight - headerHeight,
+          focusedCell: focusedCell,
+          setSelection: setSelection
+        })
       )
@@ -109,0 +131,0 @@ );

lib/Header.js

@@ -34,2 +34,3 @@ 'use strict';
     this.addWidth();
+    this.addHeight();
   };
@@ -54,2 +55,10 @@
 
+  Header.prototype.addHeight = function addHeight() {
+    var setHeight = this.props.setHeight;
+
+    var height = document.querySelector('#rs-header').offsetHeight;
+
+    setHeight(height);
+  };
+
   Header.prototype.render = function render() {
@@ -56,0 +65,0 @@ var _props2 = this.props,

package.json

 {
   "name": "react-sheet",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "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

3170537

increased by0.16%

Lines of code

38161

increased by0.22%

No dependency changes