react-stick - npm Package Compare versions

Comparing version 2.2.0 to 2.2.1

demo/src/regressions/Regressions.js

@@ -9,2 +9,3 @@ import React from 'react'
 import StyledWithDataAttributes from './StyledWithDataAttributes'
+import TransportToFixedContainer from './TransportToFixedContainer'
 
@@ -22,4 +23,5 @@ export default function Regressions() {
       <StyledWithDataAttributes />
+      <TransportToFixedContainer />
     </div>
   )
 }

lib/getDefaultAlign.js

@@ -6,13 +6,17 @@ 'use strict';
 
+var defaultAligns = {
+  'top left': 'bottom left',
+  'top center': 'bottom center',
+  'top right': 'bottom right',
+  'middle left': 'middle right',
+  'middle center': 'middle center',
+  'middle right': 'middle left',
+  'bottom left': 'top left',
+  'bottom center': 'top center',
+  'bottom right': 'top right'
+};
+
+
 var getDefaultAlign = function getDefaultAlign(position) {
-  return position.split(' ').map(function (positionPart) {
-    return {
-      top: 'bottom',
-      middle: 'middle',
-      bottom: 'top',
-      left: position.indexOf('middle') ? 'left' : 'right',
-      center: 'center',
-      right: position.indexOf('middle') ? 'right' : 'left'
-    }[positionPart];
-  }).join(' ');
+  return defaultAligns[position];
 };
@@ -19,0 +23,0 @@

lib/StickPortal.js

@@ -233,6 +233,7 @@ 'use strict';
     var boundingRect = (0, _getBoundingClientRect2.default)(this);
+    var isFixed = hasFixedPosition(this.host);
 
     var newStyle = {
-      top: calculateTop(this.props.position, boundingRect),
-      left: calculateLeft(this.props.position, boundingRect)
+      top: calculateTop(this.props.position, boundingRect, isFixed),
+      left: calculateLeft(this.props.position, boundingRect, isFixed)
     };
@@ -250,3 +251,3 @@
 
-function calculateTop(position, _ref2) {
+function calculateTop(position, _ref2, isFixed) {
   var top = _ref2.top,
@@ -266,6 +267,6 @@ height = _ref2.height,
   }
-  return result + (0, _scroll.scrollY)();
+  return result + (isFixed ? 0 : (0, _scroll.scrollY)());
 }
 
-function calculateLeft(position, _ref3) {
+function calculateLeft(position, _ref3, isFixed) {
   var left = _ref3.left,
@@ -285,3 +286,3 @@ width = _ref3.width,
   }
-  return result + (0, _scroll.scrollX)();
+  return result + (isFixed ? 0 : (0, _scroll.scrollX)());
 }
@@ -295,2 +296,12 @@
 }
+
+function hasFixedPosition(element) {
+  if (element.nodeName === 'BODY' || element.nodeName === 'HTML') {
+    return false;
+  }
+  if (getComputedStyle(element).position === 'fixed') {
+    return true;
+  }
+  return element.parentNode instanceof Element ? hasFixedPosition(element.parentNode) : false;
+}
 module.exports = exports['default'];

package.json

 {
   "name": "react-stick",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "React component to stick a portaled node to an anchor node",
@@ -16,3 +16,3 @@ "main": "lib/index.js",
     "clean": "nwb clean-module && nwb clean-demo",
-    "flow": "flow",
+    "flow": "flow check",
     "format": "prettier --write --no-semi --single-quote --trailing-comma es5 \"{src,stories}/**/*.js\"",
@@ -29,3 +29,2 @@ "lint": "eslint --max-warnings=0 --ext .js src tests demo/src",
   "dependencies": {
-    "flow-bin": "^0.66.0",
     "lodash": "^4.17.4",
@@ -46,2 +45,3 @@ "prop-types": "^15.6.0",
     "eslint-plugin-react": "^7.1.0",
+    "flow-bin": "^0.75.0",
     "flow-copy-source": "^1.3.0",
@@ -48,0 +48,0 @@ "gh-pages": "^1.1.0",

src/defaultPosition.js

@@ -0,3 +1,4 @@
+// @flow
 const DEFAULT_POSITION = 'bottom left'
 
 export default DEFAULT_POSITION

src/getDefaultAlign.js

@@ -0,19 +1,19 @@
+// @flow
 import type { PositionT } from './flowTypes'
 
-const getDefaultAlign = (position: PositionT) =>
-  position
-    .split(' ')
-    .map(
-      (positionPart: string) =>
-        ({
-          top: 'bottom',
-          middle: 'middle',
-          bottom: 'top',
-          left: position.indexOf('middle') ? 'left' : 'right',
-          center: 'center',
-          right: position.indexOf('middle') ? 'right' : 'left',
-        }[positionPart])
-    )
-    .join(' ')
+const defaultAligns = {
+  'top left': 'bottom left',
+  'top center': 'bottom center',
+  'top right': 'bottom right',
+  'middle left': 'middle right',
+  'middle center': 'middle center',
+  'middle right': 'middle left',
+  'bottom left': 'top left',
+  'bottom center': 'top center',
+  'bottom right': 'top right',
+}
 
+const getDefaultAlign = (position: PositionT): PositionT =>
+  defaultAligns[position]
+
 export default getDefaultAlign

src/index.js

@@ -0,1 +1,2 @@
+// @flow
 import Stick from './Stick'
@@ -2,0 +3,0 @@ import type { PublicPropsT } from './flowTypes'

src/StickPortal.js

@@ -197,6 +197,7 @@ // @flow
     const boundingRect = getBoundingClientRect(this)
+    const isFixed = hasFixedPosition(this.host)
 
     const newStyle = {
-      top: calculateTop(this.props.position, boundingRect),
-      left: calculateLeft(this.props.position, boundingRect),
+      top: calculateTop(this.props.position, boundingRect, isFixed),
+      left: calculateLeft(this.props.position, boundingRect, isFixed),
     }
@@ -214,3 +215,4 @@
   position: PositionT,
-  { top, height, bottom }: ClientRect
+  { top, height, bottom }: ClientRect,
+  isFixed: boolean
 ) {
@@ -227,3 +229,3 @@ let result = 0
   }
-  return result + scrollY()
+  return result + (isFixed ? 0 : scrollY())
 }
@@ -233,3 +235,4 @@
   position: PositionT,
-  { left, width, right }: ClientRect
+  { left, width, right }: ClientRect,
+  isFixed: boolean
 ) {
@@ -246,3 +249,3 @@ let result = 0
   }
-  return result + scrollX()
+  return result + (isFixed ? 0 : scrollX())
 }
@@ -253,1 +256,13 @@
 }
+
+function hasFixedPosition(element: Element) {
+  if (element.nodeName === 'BODY' || element.nodeName === 'HTML') {
+    return false
+  }
+  if (getComputedStyle(element).position === 'fixed') {
+    return true
+  }
+  return element.parentNode instanceof Element
+    ? hasFixedPosition(element.parentNode)
+    : false
+}

tests/nodeWidth.test.js

@@ -19,5 +19,4 @@ import expect from 'expect'
     renderBase(
-      // set documentElement's the scroll width to 1008
+      // sets documentElement's scroll width to 1008
       <div style={{ width: 1000, height: 9999 }}>
-        <span>asd</span>
         <div style={{ position: 'absolute', width: 100, left: 100 }}>
@@ -24,0 +23,0 @@ {cloneElement(stick, {

No alert changes

Improved metrics

Total package byte prevSize

436663

increased by1.39%

Dependency count

6

decreased by-14.29%

Number of package files

62

increased by3.33%

Lines of code

2642

increased by6.45%

Worsened metrics

Dev dependency count

21

increased by5%

Dependency changes

• - Removedflow-bin@^0.66.0

• - Removedflow-bin@0.66.0(transitive)