react-stick - npm Package Compare versions

Comparing version 3.0.2 to 3.0.3

demo/src/regressions/TransportToFixedContainer.js

@@ -1,2 +0,2 @@
-import React, { Component } from 'react'
+import React, { useState } from 'react'
 
@@ -6,47 +6,41 @@ import Stick from '../../../src'
 
-export default class TransportToFixedContainer extends Component {
-  state = { isOpen: false, container: null }
+export default function TransportToFixedContainer() {
+  const [isOpen, setIsOpen] = useState(false)
+  const [container, setContainer] = useState()
 
-  render() {
-    const { isOpen, container } = this.state
-    return (
-      <Regression
-        allBrowsers
-        fixed
-        version="2.2.0"
-        title="Transport to fixed position container"
-        description="The stick should be positioned correctly when transported to a container with `position: fixed`"
-      >
-        <button onClick={() => this.setState({ isOpen: !isOpen })}>
-          {isOpen ? 'close fixed container' : 'open fixed container'}
-        </button>{' '}
-        (The fixed container will open at the top left. The sticked node should
-        be attached correctly regardless of the page scroll position)
-        {isOpen && (
-          <div
-            style={{
-              position: 'fixed',
-              top: 0,
-              left: 0,
-              padding: 32,
-              backgroundColor: 'white',
-              border: '1px solid silver',
-              zIndex: 100,
-            }}
-            ref={this.setContainer}
-          >
-            {container != null && (
-              <Stick transportTo={container} node="Yes, here it is!">
-                <div>There should be a line of text below me</div>
-              </Stick>
-            )}
-          </div>
-        )}
-      </Regression>
-    )
-  }
-
-  setContainer = container => {
-    this.setState({ container })
-  }
+  return (
+    <Regression
+      allBrowsers
+      fixed
+      version="2.2.0"
+      title="Transport to fixed position container"
+      description="The stick should be positioned correctly when transported to a container with `position: fixed`"
+    >
+      <button onClick={() => setIsOpen(!isOpen)}>
+        {isOpen ? 'close fixed container' : 'open fixed container'}
+      </button>{' '}
+      (The fixed container will open at the top left. The sticked node should be
+      attached correctly regardless of the page scroll position)
+      {isOpen && (
+        <div
+          style={{
+            position: 'fixed',
+            top: 20,
+            left: 20,
+            padding: 32,
+            backgroundColor: 'white',
+            border: '1px solid silver',
+            zIndex: 100,
+          }}
+          ref={node => setContainer(node)}
+        >
+          {container != null && (
+            <Stick transportTo={container} node="Yes, here it is!">
+              <div>There should be a line of text below me</div>
+            </Stick>
+          )}
+        </div>
+      )}
+    </Regression>
+  )
 }

lib/StickPortal.js

@@ -59,5 +59,4 @@ "use strict";
     var boundingRect = nodeRef.current.getBoundingClientRect();
-    var isFixed = hasFixedPosition(host);
-    var newTop = calculateTop(position, boundingRect, isFixed);
-    var newLeft = calculateLeft(nodeRef.current, position, boundingRect, isFixed);
+    var newTop = calculateTop(position, boundingRect, getFixedParent(host));
+    var newLeft = calculateLeft(nodeRef.current, position, boundingRect, getFixedParent(host));
 
@@ -134,3 +133,3 @@ if (newTop !== top) {
 
-function calculateTop(position, _ref3, isFixed) {
+function calculateTop(position, _ref3, fixedHost) {
   var top = _ref3.top,
@@ -153,6 +152,13 @@ height = _ref3.height,
 
-  return result + (isFixed ? 0 : (0, _utils.scrollY)());
+  if (fixedHost) {
+    var _fixedHost$getBoundin = fixedHost.getBoundingClientRect(),
+        hostTop = _fixedHost$getBoundin.top;
+
+    return result - hostTop;
+  }
+
+  return result + (0, _utils.scrollY)();
 }
 
-function calculateLeft(nodeRef, position, _ref4, isFixed) {
+function calculateLeft(nodeRef, position, _ref4, fixedHost) {
   var left = _ref4.left,
@@ -175,17 +181,24 @@ width = _ref4.width,
 
-  return result + (isFixed ? 0 : (0, _utils.scrollX)(nodeRef));
+  if (fixedHost) {
+    var _fixedHost$getBoundin2 = fixedHost.getBoundingClientRect(),
+        hostLeft = _fixedHost$getBoundin2.left;
+
+    return result - hostLeft;
+  }
+
+  return result + (0, _utils.scrollX)(nodeRef);
 }
 
-function hasFixedPosition(element) {
+function getFixedParent(element) {
   if (element.nodeName === 'BODY' || element.nodeName === 'HTML') {
-    return false;
+    return null;
   }
 
   if (getComputedStyle(element).position === 'fixed') {
-    return true;
+    return element;
   }
 
-  return element.parentNode instanceof Element ? hasFixedPosition(element.parentNode) : false;
+  return element.parentNode instanceof Element ? getFixedParent(element.parentNode) : null;
 }
 
 module.exports = exports.default;

package.json

 {
   "name": "react-stick",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "React component to stick a portaled node to an anchor node",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

src/StickPortal.js

@@ -53,5 +53,4 @@ // @flow
     const boundingRect = nodeRef.current.getBoundingClientRect()
-    const isFixed = hasFixedPosition(host)
 
-    const newTop = calculateTop(position, boundingRect, isFixed)
+    const newTop = calculateTop(position, boundingRect, getFixedParent(host))
     const newLeft = calculateLeft(
@@ -61,3 +60,3 @@ nodeRef.current,
       boundingRect,
-      isFixed
+      getFixedParent(host)
     )
@@ -148,3 +147,3 @@
   { top, height, bottom }: ClientRect,
-  isFixed: boolean
+  fixedHost: ?Element
 ) {
@@ -161,3 +160,10 @@ let result = 0
   }
-  return result + (isFixed ? 0 : scrollY())
+
+  if (fixedHost) {
+    const { top: hostTop } = fixedHost.getBoundingClientRect()
+
+    return result - hostTop
+  }
+
+  return result + scrollY()
 }
@@ -169,3 +175,3 @@
   { left, width, right }: ClientRect,
-  isFixed: boolean
+  fixedHost: ?Element
 ) {
@@ -182,15 +188,24 @@ let result = 0
   }
-  return result + (isFixed ? 0 : scrollX(nodeRef))
+
+  if (fixedHost) {
+    const { left: hostLeft } = fixedHost.getBoundingClientRect()
+
+    return result - hostLeft
+  }
+
+  return result + scrollX(nodeRef)
 }
 
-function hasFixedPosition(element: Element) {
+function getFixedParent(element: Element): ?Element {
   if (element.nodeName === 'BODY' || element.nodeName === 'HTML') {
-    return false
+    return null
   }
+
   if (getComputedStyle(element).position === 'fixed') {
-    return true
+    return element
   }
+
   return element.parentNode instanceof Element
-    ? hasFixedPosition(element.parentNode)
-    : false
+    ? getFixedParent(element.parentNode)
+    : null
 }

No alert changes

Improved metrics

Total package byte prevSize

358080

increased by0.15%

Lines of code

9001

increased by0.12%

No dependency changes