react-scrollable-feed - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

CHANGELOG.md

@@ -6,1 +6,5 @@ # Change Log
 * Updated dependencies
+
+<a name="1.0.3"></a>
+## [1.0.3](https://github.com/dizco/react-scrollable-feed/compare/v1.0.2...v1.0.3) (2019-01-30)
+* Fixed issue with the automatic bottom detection ([#7](https://github.com/dizco/react-scrollable-feed/issues/7))

dist/index.d.ts

@@ -8,2 +8,3 @@ import * as React from 'react';
     changeDetectionFilter?: (previousProps: ScrollableFeedComponentProps, newProps: ScrollableFeedComponentProps) => boolean;
+    viewableDetectionEpsilon?: number;
 };
@@ -31,2 +32,3 @@ declare type ScrollableFeedComponentProps = Readonly<{
      * @param child
+     * @param epsilon
      */
@@ -33,0 +35,0 @@ private static isViewable;

dist/index.es.js

@@ -72,3 +72,4 @@ function __$styleInject(css, ref) {
         if (this.wrapperRef.current && this.bottomRef.current) {
-            return ScrollableFeed.isViewable(this.wrapperRef.current, this.bottomRef.current); //This argument is passed down to componentDidUpdate as 3rd parameter
+            var viewableDetectionEpsilon = this.props.viewableDetectionEpsilon;
+            return ScrollableFeed.isViewable(this.wrapperRef.current, this.bottomRef.current, viewableDetectionEpsilon); //This argument is passed down to componentDidUpdate as 3rd parameter
         }
@@ -96,6 +97,7 @@ return false;
     ScrollableFeed.prototype.scrollParentToChild = function (parent, child) {
-        //Source: https://stackoverflow.com/a/45411081/6316091
-        var parentRect = parent.getBoundingClientRect();
-        var childRect = child.getBoundingClientRect();
-        if (!ScrollableFeed.isViewable(parent, child)) {
+        var viewableDetectionEpsilon = this.props.viewableDetectionEpsilon;
+        if (!ScrollableFeed.isViewable(parent, child, viewableDetectionEpsilon)) {
+            //Source: https://stackoverflow.com/a/45411081/6316091
+            var parentRect = parent.getBoundingClientRect();
+            var childRect = child.getBoundingClientRect();
             //Scroll by offset relative to parent
@@ -114,8 +116,12 @@ var scrollOffset = (childRect.top + parent.scrollTop) - parentRect.top;
      * @param child
+     * @param epsilon
      */
-    ScrollableFeed.isViewable = function (parent, child) {
+    ScrollableFeed.isViewable = function (parent, child, epsilon) {
+        epsilon = epsilon || 0;
         //Source: https://stackoverflow.com/a/45411081/6316091
         var parentRect = parent.getBoundingClientRect();
         var childRect = child.getBoundingClientRect();
-        return (childRect.top >= parentRect.top) && (childRect.top <= parentRect.top + parent.clientHeight);
+        var childTopIsViewable = (childRect.top >= parentRect.top);
+        var childBottomIsViewable = (Math.abs(parentRect.top + parent.clientHeight - childRect.top) <= epsilon); //Use epsilon because getBoundingClientRect might return floats https://stackoverflow.com/a/40879359/6316091
+        return childTopIsViewable && childBottomIsViewable;
     };
@@ -135,2 +141,3 @@ ScrollableFeed.prototype.render = function () {
         changeDetectionFilter: function () { return true; },
+        viewableDetectionEpsilon: 2,
     };
@@ -137,0 +144,0 @@ return ScrollableFeed;

dist/index.js

@@ -78,3 +78,4 @@ 'use strict';
         if (this.wrapperRef.current && this.bottomRef.current) {
-            return ScrollableFeed.isViewable(this.wrapperRef.current, this.bottomRef.current); //This argument is passed down to componentDidUpdate as 3rd parameter
+            var viewableDetectionEpsilon = this.props.viewableDetectionEpsilon;
+            return ScrollableFeed.isViewable(this.wrapperRef.current, this.bottomRef.current, viewableDetectionEpsilon); //This argument is passed down to componentDidUpdate as 3rd parameter
         }
@@ -102,6 +103,7 @@ return false;
     ScrollableFeed.prototype.scrollParentToChild = function (parent, child) {
-        //Source: https://stackoverflow.com/a/45411081/6316091
-        var parentRect = parent.getBoundingClientRect();
-        var childRect = child.getBoundingClientRect();
-        if (!ScrollableFeed.isViewable(parent, child)) {
+        var viewableDetectionEpsilon = this.props.viewableDetectionEpsilon;
+        if (!ScrollableFeed.isViewable(parent, child, viewableDetectionEpsilon)) {
+            //Source: https://stackoverflow.com/a/45411081/6316091
+            var parentRect = parent.getBoundingClientRect();
+            var childRect = child.getBoundingClientRect();
             //Scroll by offset relative to parent
@@ -120,8 +122,12 @@ var scrollOffset = (childRect.top + parent.scrollTop) - parentRect.top;
      * @param child
+     * @param epsilon
      */
-    ScrollableFeed.isViewable = function (parent, child) {
+    ScrollableFeed.isViewable = function (parent, child, epsilon) {
+        epsilon = epsilon || 0;
         //Source: https://stackoverflow.com/a/45411081/6316091
         var parentRect = parent.getBoundingClientRect();
         var childRect = child.getBoundingClientRect();
-        return (childRect.top >= parentRect.top) && (childRect.top <= parentRect.top + parent.clientHeight);
+        var childTopIsViewable = (childRect.top >= parentRect.top);
+        var childBottomIsViewable = (Math.abs(parentRect.top + parent.clientHeight - childRect.top) <= epsilon); //Use epsilon because getBoundingClientRect might return floats https://stackoverflow.com/a/40879359/6316091
+        return childTopIsViewable && childBottomIsViewable;
     };
@@ -141,2 +147,3 @@ ScrollableFeed.prototype.render = function () {
         changeDetectionFilter: function () { return true; },
+        viewableDetectionEpsilon: 2,
     };
@@ -143,0 +150,0 @@ return ScrollableFeed;

package.json

 {
   "name": "react-scrollable-feed",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "",
@@ -5,0 +5,0 @@ "author": "dizco",

README.md

@@ -111,2 +111,9 @@ # react-scrollable-feed
 
+### `viewableDetectionEpsilon`
+
+- Type: `number`
+- Default: `2`
+
+Indicates the number of pixels of difference between the actual bottom and the current position that can be tolerated. The default setting should be fine for most use cases.
+
 ## For more details
@@ -113,0 +120,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

55552

increased by6.34%

Lines of code

301

increased by5.61%

Number of lines in readme file

125

increased by5.93%

No dependency changes