react-sticky-table - npm Package Compare versions

Comparing version 5.0.0 to 5.1.2

.storybook/addons.js

@@ -1,2 +0,1 @@
-import '@storybook/addon-actions/register';
-import '@storybook/addon-links/register';
+import '@storybook/addon-knobs/register';

package.json

 {
   "name": "react-sticky-table",
   "description": "Dynamically sized fixed header and columns for tables",
-  "version": "5.0.0",
+  "version": "5.1.2",
   "author": "Henrybuilt",
@@ -10,3 +10,3 @@ "bugs": {
   "dependencies": {
-    "styled-components": "^4.3.2"
+    "styled-components": "^5.1.0"
   },
@@ -22,6 +22,5 @@ "devDependencies": {
     "@babel/runtime": "7.4.5",
-    "@storybook/addon-actions": "^5.3.13",
-    "@storybook/addon-links": "^5.3.13",
-    "@storybook/addons": "^5.3.13",
-    "@storybook/react": "^5.3.13",
+    "@storybook/addon-knobs": "^5.3.18",
+    "@storybook/addons": "^5.3.18",
+    "@storybook/react": "^5.3.18",
     "babel-eslint": "10.0.2",
@@ -39,8 +38,8 @@ "babel-loader": "8.0.6",
     "jsdom-global": "^3.0.2",
-    "mocha": "6.1.4",
+    "mocha": "^7.1.2",
     "nodemon": "^1.9.1",
     "prop-types": "^15.5.7",
-    "react": "^16.8.6",
+    "react": "^16.13.1",
     "react-addons-test-utils": "^15.5.1",
-    "react-dom": "^16.8.6",
+    "react-dom": "^16.13.1",
     "regenerator-runtime": "^0.13.2",
@@ -47,0 +46,0 @@ "sinon": "7.3.2"

src/index.js

@@ -6,5 +6,5 @@ import React from 'react';
 
-const Table = styled('div').attrs({
+const Table = styled('div').attrs(() => ({
   className: 'sticky-table-table'
-})`
+}))`
   white-space: nowrap;
@@ -17,5 +17,5 @@ display: table;
 
-const Cell = styled('div').attrs({
+const Cell = styled('div').attrs(() => ({
   className: 'sticky-table-cell'
-})`
+}))`
   display: table-cell;
@@ -29,5 +29,5 @@ box-sizing: border-box;
 
-const Row = styled('div').attrs({
+const Row = styled('div').attrs(() => ({
   className: 'sticky-table-row'
-})`
+}))`
   display: table-row;
@@ -38,5 +38,5 @@ `;
 
-const Wrapper = styled('div').attrs({
+const Wrapper = styled('div').attrs(() => ({
   className: 'sticky-table'
-})`
+}))`
   position: relative;
@@ -167,2 +167,3 @@ overflow: auto;
     var {props, tableNode} = this;
+    var rowNodes = tableNode.querySelectorAll('.sticky-table-row');
     var cellNodes = tableNode.querySelectorAll('.sticky-table-cell');
@@ -176,17 +177,36 @@
     ].forEach(([stickyKey, sizeKey, countPropKey]) => {
-      var insets = [0];
-      var count = props[countPropKey];
-      var netInset = 0;
+      var insets = [];
 
-      //HINT we only want this loop for the second sticky and up
-      for (s = 1; s < count; s++) {
-        var node = stickyKey === 'header' || stickyKey === 'leftColumn' ? cellNodes[0] : cellNodes[cellNodes.length - 1];
+      if (props[countPropKey] > 1) {
+        insets = [0]
+        var count = props[countPropKey];
+        var netInset = 0;
 
-        if (node) {
-          var boundingRect = node.getBoundingClientRect();
+        // HINT we only want this loop for the second sticky and up
+        for (s = 1; s < count; s++) {
+          var node = undefined;
 
-          netInset += boundingRect[sizeKey];
+          switch (stickyKey) {
+          case 'header':
+            node = rowNodes[s - 1].childNodes[0];
+            break;
+          case 'footer':
+            node = rowNodes[rowNodes.length - s].childNodes[0];
+            break;
+          case 'leftColumn':
+            node = cellNodes[s - 1];
+            break;
+          case 'rightColumn':
+            node = cellNodes[cellNodes.length - s];
+            break;
+          }
+
+          if (node) {
+            var boundingRect = node.getBoundingClientRect();
+
+            netInset += boundingRect[sizeKey];
+          }
+
+          insets.push(netInset);
         }
-
-        insets.push(netInset);
       }
@@ -207,3 +227,3 @@
 
-  render () {
+  render() {
     var {leftStickyColumnCount=1, stickyHeaderCount=1, wrapperRef, children, ...restProps} = this.props;
@@ -210,0 +230,0 @@

stories/index.stories.js

 import React from 'react';
 import { storiesOf } from '@storybook/react';
+import { withKnobs, number, text } from '@storybook/addon-knobs/react'
 
@@ -16,3 +17,5 @@ import './demo.css';
 import MultipleChangingStickies from './MultipleChangingStickies/index';
+import Playground from './Playground/index';
 
+
 storiesOf('Basic', module)
@@ -28,3 +31,12 @@ .add('basic', () => <Basic />)
   .add('no borders', () => <NoBorders />)
-  .add('custom z-index', () => <CustomZ />);
+  .add('custom z-index', () => <CustomZ />)
+  .addDecorator(withKnobs)
+  .add('playground', () => <Playground
+    stickyHeaderCount={number('HeaderSticky', 0, { min: 0 })}
+    leftStickyColumnCount={number('LeftSticky', 0, { min: 0 })}
+    rightStickyColumnCount={number('RightSticky', 0, { min: 0 })}
+    stickyFooterCount={number('FooterSticky', 0, { min: 0 })}
+    width={text('width', '100%')}
+    height={text('height', '200px')}
+  />);
 

stories/MultipleChangingStickies/index.js

@@ -26,3 +26,3 @@ import React, { Component } from 'react';
         <div style={{width: '100%', height: '400px'}}>
-          <StickyTable leftStickyColumnCount={2} rightStickyColumnCount={2} stickyHeaderCount={2} stickyFooterCount={2}>
+          <StickyTable leftStickyColumnCount={3} rightStickyColumnCount={3} stickyHeaderCount={3} stickyFooterCount={3}>
             {rows}
@@ -29,0 +29,0 @@ </StickyTable>

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

6090192

increased by0.03%

Dev dependency count

31

decreased by-3.12%

Number of package files

52

increased by1.96%

Lines of code

14279

increased by0.42%

Dependency changes

• + Added@emotion/is-prop-valid@1.3.1(transitive)

• + Added@emotion/memoize@0.9.0(transitive)

• + Added@emotion/stylis@0.8.5(transitive)

• + Addedcss-to-react-native@3.2.0(transitive)

• + Addedhoist-non-react-statics@3.3.2(transitive)

• + Addedpostcss-value-parser@4.2.0(transitive)

• + Addedshallowequal@1.1.0(transitive)

• + Addedstyled-components@5.3.11(transitive)

• - Removed@emotion/is-prop-valid@0.8.8(transitive)

• - Removed@emotion/memoize@0.7.4(transitive)

• - Removedcss-to-react-native@2.3.2(transitive)

• - Removedis-what@3.14.1(transitive)

• - Removedmemoize-one@5.2.1(transitive)

• - Removedmerge-anything@2.4.4(transitive)

• - Removedpostcss-value-parser@3.3.1(transitive)

• - Removedstyled-components@4.4.1(transitive)

• - Removedstylis@3.5.4(transitive)

• - Removedstylis-rule-sheet@0.0.10(transitive)

• Updatedstyled-components@^5.1.0