@atlaskit/onboarding - npm Package Compare versions

Comparing version 2.0.5 to 2.0.6

CHANGELOG.md

 # @atlaskit/onboarding
 
+## 2.0.6
+- [patch] Refactor autoscroll logic in withScrollMeasurement HOC [2e90a74](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/2e90a74)
+
 ## 2.0.5
@@ -4,0 +7,0 @@

dist/cjs/hoc/withScrollMeasurements.js

@@ -50,2 +50,17 @@ 'use strict';
 /* eslint-disable react/sort-comp, react/no-multi-comp */
+var SCROLLABLE = /auto|scroll/;
+
+function computedStyle(node, prop) {
+  if (!node) return '';
+  return prop ? window.getComputedStyle(node, null)[prop] : window.getComputedStyle(node, null);
+}
+
+function getScrollParent(node) {
+  if (node == null) return null;
+  if (node.scrollHeight > node.clientHeight && (SCROLLABLE.test(computedStyle(node, 'overflow')) || SCROLLABLE.test(computedStyle(node, 'overflowY')))) {
+    return node;
+  }
+  return getScrollParent(node.parentNode);
+}
+
 function elementCropDirection(el) {
@@ -68,8 +83,12 @@ if (!el) return null;
 }
+
 function getScrollY() {
-  return window.pageYOffset ||
-  // $FlowFixMe
-  document.documentElement.scrollTop ||
-  // $FlowFixMe
-  document.body.scrollTop || 0;
+  var node = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window;
+
+  if (node === window) {
+    return window.pageYOffset;
+  }
+  var scrollContainer = getScrollParent(node);
+
+  return scrollContainer ? scrollContainer.scrollTop : window.pageYOffset;
 }
@@ -94,3 +113,3 @@
 
-      return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = SpotlightWrapper.__proto__ || (0, _getPrototypeOf2.default)(SpotlightWrapper)).call.apply(_ref, [this].concat(args))), _this), _this.state = { scrollY: getScrollY() }, _this.measureAndScroll = function (node) {
+      return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = SpotlightWrapper.__proto__ || (0, _getPrototypeOf2.default)(SpotlightWrapper)).call.apply(_ref, [this].concat(args))), _this), _this.state = { scrollY: 0 }, _this.measureAndScroll = function (node) {
         if (!node) {
@@ -106,19 +125,35 @@ throw new Error('\n          It looks like you\'re trying to render a spotlight dialog without a\n          target, or before the target has rendered.\n        ');
 
-        var scrollY = _this.state.scrollY;
+        var gutter = 10; // enough room to be comfortable and not crop the pulse animation
 
-        var gutter = 10; // enough room to be comfortable and not crop the pulse animation
         var top = initialTop;
+        var offsetY = void 0;
+
         var cropDirection = elementCropDirection(node);
+        var scrollParent = getScrollParent(node) || window;
+        if (scrollParent === window) {
+          if (cropDirection === 'top') {
+            offsetY = initialTop - gutter;
+            top = gutter;
+          } else if (cropDirection === 'bottom') {
+            offsetY = initialTop - window.innerHeight + height + gutter;
+            top = window.innerHeight - (height + gutter);
+          }
+        } else {
+          var _scrollParent$getBoun = scrollParent.getBoundingClientRect(),
+              parentHeight = _scrollParent$getBoun.height,
+              parentTop = _scrollParent$getBoun.top;
 
-        // scroll if necessary
-        if (cropDirection === 'top') {
-          var offsetY = scrollY + (initialTop - gutter);
-          top = gutter;
-          window.scrollTo(0, offsetY);
-        } else if (cropDirection === 'bottom') {
-          var _offsetY = initialTop - window.innerHeight + height + gutter;
-          top = initialTop - _offsetY;
-          window.scrollTo(0, scrollY + _offsetY);
+          if (cropDirection === 'top') {
+            // We're using Math.abs here because we need to add
+            // the absolute values of initial top and parent top together
+            // for the specific offsetY value.
+            offsetY = -(Math.abs(initialTop) + Math.abs(parentTop) + gutter);
+            top = parentTop + gutter;
+          } else if (cropDirection === 'bottom') {
+            offsetY = initialTop + height - (parentTop + parentHeight) + gutter;
+            top = parentHeight + parentTop - gutter - height;
+          }
         }
 
+        scrollParent.scrollBy(0, offsetY);
         // get adjusted measurements after scrolling
@@ -136,2 +171,4 @@ _this.setState({
       value: function componentWillMount() {
+        var _this2 = this;
+
         var target = this.props.target;
@@ -146,3 +183,5 @@ var spotlightRegistry = this.context.spotlightRegistry;
         var node = spotlightRegistry.get(target);
-        this.measureAndScroll(node);
+        this.setState({ scrollY: getScrollY(node) }, function () {
+          _this2.measureAndScroll(node);
+        });
       }
@@ -155,3 +194,2 @@ }, {
 
-
         spotlightRegistry.unmount(target);
@@ -158,0 +196,0 @@ }

dist/esm/hoc/withScrollMeasurements.js

@@ -15,2 +15,17 @@ import _extends from 'babel-runtime/helpers/extends';
 
+var SCROLLABLE = /auto|scroll/;
+
+function computedStyle(node, prop) {
+  if (!node) return '';
+  return prop ? window.getComputedStyle(node, null)[prop] : window.getComputedStyle(node, null);
+}
+
+function getScrollParent(node) {
+  if (node == null) return null;
+  if (node.scrollHeight > node.clientHeight && (SCROLLABLE.test(computedStyle(node, 'overflow')) || SCROLLABLE.test(computedStyle(node, 'overflowY')))) {
+    return node;
+  }
+  return getScrollParent(node.parentNode);
+}
+
 function elementCropDirection(el) {
@@ -33,8 +48,12 @@ if (!el) return null;
 }
+
 function getScrollY() {
-  return window.pageYOffset ||
-  // $FlowFixMe
-  document.documentElement.scrollTop ||
-  // $FlowFixMe
-  document.body.scrollTop || 0;
+  var node = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window;
+
+  if (node === window) {
+    return window.pageYOffset;
+  }
+  var scrollContainer = getScrollParent(node);
+
+  return scrollContainer ? scrollContainer.scrollTop : window.pageYOffset;
 }
@@ -59,3 +78,3 @@
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = SpotlightWrapper.__proto__ || _Object$getPrototypeOf(SpotlightWrapper)).call.apply(_ref, [this].concat(args))), _this), _this.state = { scrollY: getScrollY() }, _this.measureAndScroll = function (node) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = SpotlightWrapper.__proto__ || _Object$getPrototypeOf(SpotlightWrapper)).call.apply(_ref, [this].concat(args))), _this), _this.state = { scrollY: 0 }, _this.measureAndScroll = function (node) {
         if (!node) {
@@ -71,19 +90,35 @@ throw new Error('\n          It looks like you\'re trying to render a spotlight dialog without a\n          target, or before the target has rendered.\n        ');
 
-        var scrollY = _this.state.scrollY;
+        var gutter = 10; // enough room to be comfortable and not crop the pulse animation
 
-        var gutter = 10; // enough room to be comfortable and not crop the pulse animation
         var top = initialTop;
+        var offsetY = void 0;
+
         var cropDirection = elementCropDirection(node);
+        var scrollParent = getScrollParent(node) || window;
+        if (scrollParent === window) {
+          if (cropDirection === 'top') {
+            offsetY = initialTop - gutter;
+            top = gutter;
+          } else if (cropDirection === 'bottom') {
+            offsetY = initialTop - window.innerHeight + height + gutter;
+            top = window.innerHeight - (height + gutter);
+          }
+        } else {
+          var _scrollParent$getBoun = scrollParent.getBoundingClientRect(),
+              parentHeight = _scrollParent$getBoun.height,
+              parentTop = _scrollParent$getBoun.top;
 
-        // scroll if necessary
-        if (cropDirection === 'top') {
-          var offsetY = scrollY + (initialTop - gutter);
-          top = gutter;
-          window.scrollTo(0, offsetY);
-        } else if (cropDirection === 'bottom') {
-          var _offsetY = initialTop - window.innerHeight + height + gutter;
-          top = initialTop - _offsetY;
-          window.scrollTo(0, scrollY + _offsetY);
+          if (cropDirection === 'top') {
+            // We're using Math.abs here because we need to add
+            // the absolute values of initial top and parent top together
+            // for the specific offsetY value.
+            offsetY = -(Math.abs(initialTop) + Math.abs(parentTop) + gutter);
+            top = parentTop + gutter;
+          } else if (cropDirection === 'bottom') {
+            offsetY = initialTop + height - (parentTop + parentHeight) + gutter;
+            top = parentHeight + parentTop - gutter - height;
+          }
         }
 
+        scrollParent.scrollBy(0, offsetY);
         // get adjusted measurements after scrolling
@@ -101,2 +136,4 @@ _this.setState({
       value: function componentWillMount() {
+        var _this2 = this;
+
         var target = this.props.target;
@@ -111,3 +148,5 @@ var spotlightRegistry = this.context.spotlightRegistry;
         var node = spotlightRegistry.get(target);
-        this.measureAndScroll(node);
+        this.setState({ scrollY: getScrollY(node) }, function () {
+          _this2.measureAndScroll(node);
+        });
       }
@@ -120,3 +159,2 @@ }, {
 
-
         spotlightRegistry.unmount(target);
@@ -123,0 +161,0 @@ }

dist/package.json

 {
 	"name": "@atlaskit/onboarding",
-	"version": "2.0.4"
+	"version": "2.0.5"
 }

package.json

 {
   "name": "@atlaskit/onboarding",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "description": "Highlight elements of the UI to the user and display a complementary dialog.",
@@ -38,2 +38,2 @@ "license": "Apache-2.0",
   }
-}
+}

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

87903

increased by3.72%

Lines of code

1815

increased by3.54%

No dependency changes