react-stickynode - npm Package Compare versions

Comparing version 4.1.1 to 4.2.0

dist/cjs/Sticky.js

@@ -5,26 +5,19 @@ /**
  */
+
 'use strict';
 
-require("core-js/modules/es.object.to-string.js");
-
-require("core-js/modules/es.reflect.construct.js");
-
-require("core-js/modules/es.object.define-property.js");
-
 require("core-js/modules/es.symbol.js");
-
 require("core-js/modules/es.symbol.description.js");
-
 require("core-js/modules/es.symbol.iterator.js");
-
+require("core-js/modules/es.symbol.to-primitive.js");
 require("core-js/modules/es.array.iterator.js");
-
+require("core-js/modules/es.date.to-primitive.js");
+require("core-js/modules/es.number.constructor.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-prototype-of.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.reflect.construct.js");
 require("core-js/modules/es.string.iterator.js");
-
+require("core-js/modules/es.weak-map.js");
 require("core-js/modules/web.dom-collections.iterator.js");
-
-require("core-js/modules/es.weak-map.js");
-
-require("core-js/modules/es.object.get-own-property-descriptor.js");
-
 Object.defineProperty(exports, "__esModule", {
@@ -34,56 +27,33 @@ value: true
 exports.default = void 0;
-
 require("core-js/modules/es.object.set-prototype-of.js");
-
-require("core-js/modules/es.object.get-prototype-of.js");
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _subscribeUiEvent = require("subscribe-ui-event");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _shallowequal = _interopRequireDefault(require("shallowequal"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
 // constants
 var STATUS_ORIGINAL = 0; // The default status, locating at the original position.
-
 var STATUS_RELEASED = 1; // The released status, locating at somewhere on document but not default one.
-
 var STATUS_FIXED = 2; // The sticky status, locating fixed to the top or the bottom of screen.
 
-var TRANSFORM_PROP = 'transform'; // global variable for all instances
+var TRANSFORM_PROP = 'transform';
 
+// global variable for all instances
 var doc;
@@ -93,3 +63,2 @@ var docBody;
 var canEnableTransforms = true; // Use transform by default, so no Sticky on lower-end browser when no Modernizr
-
 var M;
@@ -99,17 +68,10 @@ var scrollDelta = 0;
 var winHeight = -1;
-
 var Sticky = /*#__PURE__*/function (_Component) {
-  _inherits(Sticky, _Component);
-
-  var _super = _createSuper(Sticky);
-
   function Sticky(props, context) {
     var _this;
-
     _classCallCheck(this, Sticky);
-
-    _this = _super.call(this, props, context);
-    _this.handleResize = _this.handleResize.bind(_assertThisInitialized(_this));
-    _this.handleScroll = _this.handleScroll.bind(_assertThisInitialized(_this));
-    _this.handleScrollStart = _this.handleScrollStart.bind(_assertThisInitialized(_this));
+    _this = _callSuper(this, Sticky, [props, context]);
+    _this.handleResize = _this.handleResize.bind(_this);
+    _this.handleScroll = _this.handleScroll.bind(_this);
+    _this.handleScrollStart = _this.handleScrollStart.bind(_this);
     _this.delta = 0;
@@ -146,8 +108,7 @@ _this.stickyTop = 0;
       activated: false // once browser info is available after mounted, it becomes true to avoid checksum error
-
     };
     return _this;
   }
-
-  _createClass(Sticky, [{
+  _inherits(Sticky, _Component);
+  return _createClass(Sticky, [{
     key: "getTargetHeight",
@@ -162,3 +123,2 @@ value: function getTargetHeight(target) {
       top = top || this.props.top || 0;
-
       if (typeof top === 'string') {
@@ -168,6 +128,4 @@ if (!this.topTarget) {
         }
-
         top = this.getTargetHeight(this.topTarget);
       }
-
       return top;
@@ -181,3 +139,2 @@ }
       }
-
       var rect = target.getBoundingClientRect();
@@ -190,8 +147,8 @@ return this.scrollTop + rect.bottom;
       // a bottomBoundary can be provided to avoid reading from the props
-      var boundary = bottomBoundary || this.props.bottomBoundary; // TODO, bottomBoundary was an object, depricate it later.
+      var boundary = bottomBoundary || this.props.bottomBoundary;
 
+      // TODO, bottomBoundary was an object, depricate it later.
       if (_typeof(boundary) === 'object') {
         boundary = boundary.value || boundary.target || 0;
       }
-
       if (typeof boundary === 'string') {
@@ -201,6 +158,4 @@ if (!this.bottomBoundaryTarget) {
         }
-
         boundary = this.getTargetBottom(this.bottomBoundaryTarget);
       }
-
       return boundary && boundary > 0 ? boundary : Infinity;
@@ -232,2 +187,3 @@ }
     }
+
     /**
@@ -237,3 +193,2 @@ * Update the initial position, width, and height. It should update whenever children change.
      */
-
   }, {
@@ -243,7 +198,5 @@ key: "updateInitialDimension",
       options = options || {};
-
       if (!this.outerElement || !this.innerElement) {
         return;
       }
-
       var outerRect = this.outerElement.getBoundingClientRect();
@@ -271,3 +224,2 @@ var innerRect = this.innerElement.getBoundingClientRect();
       }
-
       winHeight = ae.resize.height;
@@ -281,7 +233,5 @@ this.updateInitialDimension();
       this.frozen = this.props.shouldFreeze();
-
       if (this.frozen) {
         return;
       }
-
       if (this.scrollTop === ae.scroll.top) {
@@ -304,3 +254,2 @@ // Scroll position hasn't changed,
       }
-
       scrollDelta = ae.scroll.delta;
@@ -310,6 +259,6 @@ this.scrollTop = ae.scroll.top;
     }
+
     /**
      * Update Sticky position.
      */
-
   }, {
@@ -319,3 +268,2 @@ key: "update",
       var disabled = !this.props.enabled || this.state.bottomBoundary - this.state.topBoundary <= this.state.height || this.state.width === 0 && this.state.height === 0;
-
       if (disabled) {
@@ -325,14 +273,13 @@ if (this.state.status !== STATUS_ORIGINAL) {
         }
-
         return;
       }
-
-      var delta = scrollDelta; // "top" and "bottom" are the positions that this.state.top and this.state.bottom project
+      var delta = scrollDelta;
+      // "top" and "bottom" are the positions that this.state.top and this.state.bottom project
       // on document from viewport.
+      var top = this.scrollTop + this.state.top;
+      var bottom = this.scrollTop + this.state.bottom;
 
-      var top = this.scrollTop + this.state.top;
-      var bottom = this.scrollTop + this.state.bottom; // There are 2 principles to make sure Sticky won't get wrong so much:
+      // There are 2 principles to make sure Sticky won't get wrong so much:
       // 1. Reset Sticky to the original postion when "top" <= topBoundary
       // 2. Release Sticky to the bottom boundary when "bottom" >= bottomBoundary
-
       if (top <= this.state.topBoundary) {
@@ -357,3 +304,3 @@ // #1
             // break;
-
+            /* eslint-disable-next-line no-fallthrough */
             case STATUS_RELEASED:
@@ -364,3 +311,2 @@ // If "top" and "bottom" are inbetween stickyTop and stickyBottom, then Sticky is in
               this.stickyBottom = this.stickyTop + this.state.height;
-
               if (delta > 0 && bottom > this.stickyBottom) {
@@ -371,13 +317,11 @@ this.fix(this.state.bottom - this.state.height);
               }
-
               break;
-
             case STATUS_FIXED:
               var toRelease = true;
               var pos = this.state.pos;
-              var height = this.state.height; // In regular cases, when Sticky is in FIXED status,
+              var height = this.state.height;
+              // In regular cases, when Sticky is in FIXED status,
               // 1. it's top will stick to the screen top,
               // 2. it's bottom will stick to the screen bottom,
               // 3. if not the cases above, then it's height gets changed
-
               if (delta > 0 && pos === this.state.top) {
@@ -402,7 +346,5 @@ // case 1, and scrolling down
               }
-
               if (toRelease) {
                 this.release(this.stickyTop);
               }
-
               break;
@@ -416,3 +358,2 @@ }
       }
-
       this.delta = delta;
@@ -424,3 +365,2 @@ }
       var _this2 = this;
-
       if (prevState.status !== this.state.status && this.props.onStateChange) {
@@ -430,5 +370,5 @@ this.props.onStateChange({
         });
-      } // check if we are up-to-date, is triggered in case of scroll restoration
+      }
 
-
+      // check if we are up-to-date, is triggered in case of scroll restoration
       if (this.state.top !== prevState.top) {
@@ -438,5 +378,3 @@ this.updateInitialDimension();
       }
-
       var arePropsChanged = !(0, _shallowequal.default)(this.props, prevProps);
-
       if (arePropsChanged) {
@@ -450,3 +388,2 @@ // if the props for enabling are toggled, then trigger the update or reset depending on the current props
               _this2.updateInitialDimension();
-
               _this2.update();
@@ -461,3 +398,4 @@ });
           }
-        } // if the top or bottomBoundary props were changed, then trigger the update
+        }
+        // if the top or bottomBoundary props were changed, then trigger the update
         else if (prevProps.top !== this.props.top || prevProps.bottomBoundary !== this.props.bottomBoundary) {
@@ -473,3 +411,2 @@ this.updateInitialDimension();
       var subscribers = this.subscribers || [];
-
       for (var i = subscribers.length - 1; i >= 0; i--) {
@@ -490,4 +427,4 @@ this.subscribers[i].unsubscribe();
         winHeight = win.innerHeight || docEl.clientHeight;
-        M = window.Modernizr; // No Sticky on lower-end browser when no Modernizr
-
+        M = window.Modernizr;
+        // No Sticky on lower-end browser when no Modernizr
         if (M && M.prefixed) {
@@ -497,7 +434,6 @@ canEnableTransforms = M.csstransforms3d;
         }
-      } // when mount, the scrollTop is not necessary on the top
+      }
 
-
+      // when mount, the scrollTop is not necessary on the top
       this.scrollTop = docBody.scrollTop + docEl.scrollTop;
-
       if (this.props.enabled) {
@@ -509,5 +445,4 @@ this.setState({
         this.update();
-      } // bind the listeners regardless if initially enabled - allows the component to toggle sticky functionality
-
-
+      }
+      // bind the listeners regardless if initially enabled - allows the component to toggle sticky functionality
       this.subscribers = [(0, _subscribeUiEvent.subscribe)('scrollStart', this.handleScrollStart.bind(this), {
@@ -526,3 +461,2 @@ useRAF: true
       var enableTransforms = canEnableTransforms && this.props.enableTransforms;
-
       if (enableTransforms && this.state.activated) {
@@ -542,5 +476,3 @@ style[TRANSFORM_PROP] = 'translate3d(0,' + Math.round(pos) + 'px,0)';
     value: function render() {
-      var _classNames,
-          _this3 = this;
-
+      var _this3 = this;
       // TODO, "overflow: auto" prevents collapse, need a good way to get children height
@@ -552,6 +484,6 @@ var innerStyle = {
       };
-      var outerStyle = {}; // always use translate3d to enhance the performance
+      var outerStyle = {};
 
+      // always use translate3d to enhance the performance
       this.translate(innerStyle, this.state.pos);
-
       if (this.state.status !== STATUS_ORIGINAL) {
@@ -561,4 +493,3 @@ innerStyle.width = this.state.width + 'px';
       }
-
-      var outerClasses = (0, _classnames.default)('sticky-outer-wrapper', this.props.className, (_classNames = {}, _defineProperty(_classNames, this.props.activeClass, this.state.status === STATUS_FIXED), _defineProperty(_classNames, this.props.releasedClass, this.state.status === STATUS_RELEASED), _classNames));
+      var outerClasses = (0, _classnames.default)('sticky-outer-wrapper', this.props.className, _defineProperty(_defineProperty({}, this.props.activeClass, this.state.status === STATUS_FIXED), this.props.releasedClass, this.state.status === STATUS_RELEASED));
       var innerClasses = (0, _classnames.default)('sticky-inner-wrapper', this.props.innerClass, _defineProperty({}, this.props.innerActiveClass, this.state.status === STATUS_FIXED));
@@ -583,6 +514,3 @@ var children = this.props.children;
   }]);
-
-  return Sticky;
 }(_react.Component);
-
 Sticky.displayName = 'Sticky';
@@ -603,2 +531,3 @@ Sticky.defaultProps = {
 };
+
 /**
@@ -611,7 +540,8 @@ * @param {Bool} enabled A switch to enable or disable Sticky.
  */
-
 Sticky.propTypes = {
+  children: _propTypes.default.elementType,
   enabled: _propTypes.default.bool,
   top: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  bottomBoundary: _propTypes.default.oneOfType([_propTypes.default.object, // TODO, may remove
+  bottomBoundary: _propTypes.default.oneOfType([_propTypes.default.object,
+  // TODO, may remove
   _propTypes.default.string, _propTypes.default.number]),
@@ -631,4 +561,3 @@ enableTransforms: _propTypes.default.bool,
 Sticky.STATUS_FIXED = STATUS_FIXED;
-var _default = Sticky;
-exports.default = _default;
+var _default = exports.default = Sticky;
 module.exports = exports.default;

dist/es/Sticky.js

@@ -5,40 +5,32 @@ /**
  */
+
 'use strict';
 
-import "core-js/modules/es.object.set-prototype-of.js";
-import "core-js/modules/es.object.get-prototype-of.js";
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.reflect.construct.js";
-import "core-js/modules/es.object.define-property.js";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.symbol.description.js";
 import "core-js/modules/es.symbol.iterator.js";
+import "core-js/modules/es.symbol.to-primitive.js";
 import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/es.date.to-primitive.js";
+import "core-js/modules/es.number.constructor.js";
+import "core-js/modules/es.object.get-prototype-of.js";
+import "core-js/modules/es.object.set-prototype-of.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.reflect.construct.js";
 import "core-js/modules/es.string.iterator.js";
 import "core-js/modules/web.dom-collections.iterator.js";
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
 import React, { Component } from 'react';
@@ -48,12 +40,12 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import shallowEqual from 'shallowequal'; // constants
+import shallowEqual from 'shallowequal';
 
+// constants
 var STATUS_ORIGINAL = 0; // The default status, locating at the original position.
-
 var STATUS_RELEASED = 1; // The released status, locating at somewhere on document but not default one.
-
 var STATUS_FIXED = 2; // The sticky status, locating fixed to the top or the bottom of screen.
 
-var TRANSFORM_PROP = 'transform'; // global variable for all instances
+var TRANSFORM_PROP = 'transform';
 
+// global variable for all instances
 var doc;
@@ -63,3 +55,2 @@ var docBody;
 var canEnableTransforms = true; // Use transform by default, so no Sticky on lower-end browser when no Modernizr
-
 var M;
@@ -69,17 +60,10 @@ var scrollDelta = 0;
 var winHeight = -1;
-
 var Sticky = /*#__PURE__*/function (_Component) {
-  _inherits(Sticky, _Component);
-
-  var _super = _createSuper(Sticky);
-
   function Sticky(props, context) {
     var _this;
-
     _classCallCheck(this, Sticky);
-
-    _this = _super.call(this, props, context);
-    _this.handleResize = _this.handleResize.bind(_assertThisInitialized(_this));
-    _this.handleScroll = _this.handleScroll.bind(_assertThisInitialized(_this));
-    _this.handleScrollStart = _this.handleScrollStart.bind(_assertThisInitialized(_this));
+    _this = _callSuper(this, Sticky, [props, context]);
+    _this.handleResize = _this.handleResize.bind(_this);
+    _this.handleScroll = _this.handleScroll.bind(_this);
+    _this.handleScrollStart = _this.handleScrollStart.bind(_this);
     _this.delta = 0;
@@ -116,8 +100,7 @@ _this.stickyTop = 0;
       activated: false // once browser info is available after mounted, it becomes true to avoid checksum error
-
     };
     return _this;
   }
-
-  _createClass(Sticky, [{
+  _inherits(Sticky, _Component);
+  return _createClass(Sticky, [{
     key: "getTargetHeight",
@@ -132,3 +115,2 @@ value: function getTargetHeight(target) {
       top = top || this.props.top || 0;
-
       if (typeof top === 'string') {
@@ -138,6 +120,4 @@ if (!this.topTarget) {
         }
-
         top = this.getTargetHeight(this.topTarget);
       }
-
       return top;
@@ -151,3 +131,2 @@ }
       }
-
       var rect = target.getBoundingClientRect();
@@ -160,8 +139,8 @@ return this.scrollTop + rect.bottom;
       // a bottomBoundary can be provided to avoid reading from the props
-      var boundary = bottomBoundary || this.props.bottomBoundary; // TODO, bottomBoundary was an object, depricate it later.
+      var boundary = bottomBoundary || this.props.bottomBoundary;
 
+      // TODO, bottomBoundary was an object, depricate it later.
       if (_typeof(boundary) === 'object') {
         boundary = boundary.value || boundary.target || 0;
       }
-
       if (typeof boundary === 'string') {
@@ -171,6 +150,4 @@ if (!this.bottomBoundaryTarget) {
         }
-
         boundary = this.getTargetBottom(this.bottomBoundaryTarget);
       }
-
       return boundary && boundary > 0 ? boundary : Infinity;
@@ -202,2 +179,3 @@ }
     }
+
     /**
@@ -207,3 +185,2 @@ * Update the initial position, width, and height. It should update whenever children change.
      */
-
   }, {
@@ -213,7 +190,5 @@ key: "updateInitialDimension",
       options = options || {};
-
       if (!this.outerElement || !this.innerElement) {
         return;
       }
-
       var outerRect = this.outerElement.getBoundingClientRect();
@@ -241,3 +216,2 @@ var innerRect = this.innerElement.getBoundingClientRect();
       }
-
       winHeight = ae.resize.height;
@@ -251,7 +225,5 @@ this.updateInitialDimension();
       this.frozen = this.props.shouldFreeze();
-
       if (this.frozen) {
         return;
       }
-
       if (this.scrollTop === ae.scroll.top) {
@@ -274,3 +246,2 @@ // Scroll position hasn't changed,
       }
-
       scrollDelta = ae.scroll.delta;
@@ -280,6 +251,6 @@ this.scrollTop = ae.scroll.top;
     }
+
     /**
      * Update Sticky position.
      */
-
   }, {
@@ -289,3 +260,2 @@ key: "update",
       var disabled = !this.props.enabled || this.state.bottomBoundary - this.state.topBoundary <= this.state.height || this.state.width === 0 && this.state.height === 0;
-
       if (disabled) {
@@ -295,14 +265,13 @@ if (this.state.status !== STATUS_ORIGINAL) {
         }
-
         return;
       }
-
-      var delta = scrollDelta; // "top" and "bottom" are the positions that this.state.top and this.state.bottom project
+      var delta = scrollDelta;
+      // "top" and "bottom" are the positions that this.state.top and this.state.bottom project
       // on document from viewport.
+      var top = this.scrollTop + this.state.top;
+      var bottom = this.scrollTop + this.state.bottom;
 
-      var top = this.scrollTop + this.state.top;
-      var bottom = this.scrollTop + this.state.bottom; // There are 2 principles to make sure Sticky won't get wrong so much:
+      // There are 2 principles to make sure Sticky won't get wrong so much:
       // 1. Reset Sticky to the original postion when "top" <= topBoundary
       // 2. Release Sticky to the bottom boundary when "bottom" >= bottomBoundary
-
       if (top <= this.state.topBoundary) {
@@ -327,3 +296,3 @@ // #1
             // break;
-
+            /* eslint-disable-next-line no-fallthrough */
             case STATUS_RELEASED:
@@ -334,3 +303,2 @@ // If "top" and "bottom" are inbetween stickyTop and stickyBottom, then Sticky is in
               this.stickyBottom = this.stickyTop + this.state.height;
-
               if (delta > 0 && bottom > this.stickyBottom) {
@@ -341,13 +309,11 @@ this.fix(this.state.bottom - this.state.height);
               }
-
               break;
-
             case STATUS_FIXED:
               var toRelease = true;
               var pos = this.state.pos;
-              var height = this.state.height; // In regular cases, when Sticky is in FIXED status,
+              var height = this.state.height;
+              // In regular cases, when Sticky is in FIXED status,
               // 1. it's top will stick to the screen top,
               // 2. it's bottom will stick to the screen bottom,
               // 3. if not the cases above, then it's height gets changed
-
               if (delta > 0 && pos === this.state.top) {
@@ -372,7 +338,5 @@ // case 1, and scrolling down
               }
-
               if (toRelease) {
                 this.release(this.stickyTop);
               }
-
               break;
@@ -386,3 +350,2 @@ }
       }
-
       this.delta = delta;
@@ -394,3 +357,2 @@ }
       var _this2 = this;
-
       if (prevState.status !== this.state.status && this.props.onStateChange) {
@@ -400,5 +362,5 @@ this.props.onStateChange({
         });
-      } // check if we are up-to-date, is triggered in case of scroll restoration
+      }
 
-
+      // check if we are up-to-date, is triggered in case of scroll restoration
       if (this.state.top !== prevState.top) {
@@ -408,5 +370,3 @@ this.updateInitialDimension();
       }
-
       var arePropsChanged = !shallowEqual(this.props, prevProps);
-
       if (arePropsChanged) {
@@ -420,3 +380,2 @@ // if the props for enabling are toggled, then trigger the update or reset depending on the current props
               _this2.updateInitialDimension();
-
               _this2.update();
@@ -431,3 +390,4 @@ });
           }
-        } // if the top or bottomBoundary props were changed, then trigger the update
+        }
+        // if the top or bottomBoundary props were changed, then trigger the update
         else if (prevProps.top !== this.props.top || prevProps.bottomBoundary !== this.props.bottomBoundary) {
@@ -443,3 +403,2 @@ this.updateInitialDimension();
       var subscribers = this.subscribers || [];
-
       for (var i = subscribers.length - 1; i >= 0; i--) {
@@ -460,4 +419,4 @@ this.subscribers[i].unsubscribe();
         winHeight = win.innerHeight || docEl.clientHeight;
-        M = window.Modernizr; // No Sticky on lower-end browser when no Modernizr
-
+        M = window.Modernizr;
+        // No Sticky on lower-end browser when no Modernizr
         if (M && M.prefixed) {
@@ -467,7 +426,6 @@ canEnableTransforms = M.csstransforms3d;
         }
-      } // when mount, the scrollTop is not necessary on the top
+      }
 
-
+      // when mount, the scrollTop is not necessary on the top
       this.scrollTop = docBody.scrollTop + docEl.scrollTop;
-
       if (this.props.enabled) {
@@ -479,5 +437,4 @@ this.setState({
         this.update();
-      } // bind the listeners regardless if initially enabled - allows the component to toggle sticky functionality
-
-
+      }
+      // bind the listeners regardless if initially enabled - allows the component to toggle sticky functionality
       this.subscribers = [subscribe('scrollStart', this.handleScrollStart.bind(this), {
@@ -496,3 +453,2 @@ useRAF: true
       var enableTransforms = canEnableTransforms && this.props.enableTransforms;
-
       if (enableTransforms && this.state.activated) {
@@ -512,5 +468,3 @@ style[TRANSFORM_PROP] = 'translate3d(0,' + Math.round(pos) + 'px,0)';
     value: function render() {
-      var _classNames,
-          _this3 = this;
-
+      var _this3 = this;
       // TODO, "overflow: auto" prevents collapse, need a good way to get children height
@@ -522,6 +476,6 @@ var innerStyle = {
       };
-      var outerStyle = {}; // always use translate3d to enhance the performance
+      var outerStyle = {};
 
+      // always use translate3d to enhance the performance
       this.translate(innerStyle, this.state.pos);
-
       if (this.state.status !== STATUS_ORIGINAL) {
@@ -531,4 +485,3 @@ innerStyle.width = this.state.width + 'px';
       }
-
-      var outerClasses = classNames('sticky-outer-wrapper', this.props.className, (_classNames = {}, _defineProperty(_classNames, this.props.activeClass, this.state.status === STATUS_FIXED), _defineProperty(_classNames, this.props.releasedClass, this.state.status === STATUS_RELEASED), _classNames));
+      var outerClasses = classNames('sticky-outer-wrapper', this.props.className, _defineProperty(_defineProperty({}, this.props.activeClass, this.state.status === STATUS_FIXED), this.props.releasedClass, this.state.status === STATUS_RELEASED));
       var innerClasses = classNames('sticky-inner-wrapper', this.props.innerClass, _defineProperty({}, this.props.innerActiveClass, this.state.status === STATUS_FIXED));
@@ -553,6 +506,3 @@ var children = this.props.children;
   }]);
-
-  return Sticky;
 }(Component);
-
 Sticky.displayName = 'Sticky';
@@ -573,2 +523,3 @@ Sticky.defaultProps = {
 };
+
 /**
@@ -581,7 +532,8 @@ * @param {Bool} enabled A switch to enable or disable Sticky.
  */
-
 Sticky.propTypes = {
+  children: PropTypes.elementType,
   enabled: PropTypes.bool,
   top: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  bottomBoundary: PropTypes.oneOfType([PropTypes.object, // TODO, may remove
+  bottomBoundary: PropTypes.oneOfType([PropTypes.object,
+  // TODO, may remove
   PropTypes.string, PropTypes.number]),
@@ -588,0 +540,0 @@ enableTransforms: PropTypes.bool,

LICENSE.md

@@ -9,10 +9,10 @@ # Software License Agreement (BSD License)
 
--   Redistributions of source code must retain the above copyright notice, this
-    list of conditions and the following disclaimer.
--   Redistributions in binary form must reproduce the above copyright notice,
-    this list of conditions and the following disclaimer in the documentation
-    and/or other materials provided with the distribution.
--   Neither the name of Yahoo Inc. nor the names of YUI's contributors may be
-    used to endorse or promote products derived from this software without
-    specific prior written permission of Yahoo Inc.
+- Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+- Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+- Neither the name of Yahoo Inc. nor the names of YUI's contributors may be
+  used to endorse or promote products derived from this software without
+  specific prior written permission of Yahoo Inc.
 
@@ -19,0 +19,0 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND

package.json

 {
   "name": "react-stickynode",
-  "version": "4.1.1",
+  "version": "4.2.0",
   "description": "A performant and comprehensive React sticky component",
@@ -21,3 +21,3 @@ "main": "./dist/cjs/Sticky.js",
     "func:local": "npm run func:build && wdio",
-    "lint": "eslint --ext .js,.jsx . --fix && npm run format:check",
+    "lint": "eslint . --fix && npm run format:check",
     "prepublish": "npm run build",
@@ -62,32 +62,34 @@ "prestart": "npm run prefunc",
     "@babel/register": "^7.9.0",
-    "@testing-library/react": "^14.0.0",
-    "@wdio/cli": "^8.0.5",
-    "@wdio/local-runner": "^8.0.3",
-    "@wdio/mocha-framework": "^8.0.2",
-    "@wdio/sauce-service": "^8.0.2",
-    "@wdio/spec-reporter": "^8.0.0",
-    "@wdio/static-server-service": "^8.0.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@wdio/cli": "^9.4.1",
+    "@wdio/local-runner": "^9.4.1",
+    "@wdio/mocha-framework": "^9.2.8",
+    "@wdio/sauce-service": "^9.4.1",
+    "@wdio/spec-reporter": "^9.2.14",
+    "@wdio/static-server-service": "^9.2.2",
     "atomizer": "^3.9.1",
     "babel-jest": "^29.0.0",
     "babel-plugin-add-module-exports": "^1.0.4",
-    "chromedriver": "^119.0.0",
-    "eslint": "^8.0.0",
-    "eslint-plugin-react": "^7.19.0",
+    "chromedriver": "^131.0.2",
+    "eslint": "^9.0.0",
+    "eslint-plugin-react": "^7.37.1",
     "gh-pages": "^6.0.0",
+    "globals": "^15.10.0",
     "jest": "^29.0.0",
     "jest-environment-jsdom": "^29.0.0",
-    "mocha": "^10.0.0",
+    "mocha": "^11.0.1",
     "pre-commit": "^1.0.0",
-    "prettier": "^3.0.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "react-test-renderer": "^18.0.0",
+    "prettier": "^3.4.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-test-renderer": "^19.0.0",
     "wdio-chromedriver-service": "^8.0.0",
     "webpack": "^5.41.1",
     "webpack-cli": "^5.0.0",
-    "webpack-dev-server": "^4.0.0"
+    "webpack-dev-server": "^5.0.4"
   },
   "peerDependencies": {
-    "react": "^0.14.2 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^0.14.2 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+    "react": "^0.14.2 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^0.14.2 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
@@ -94,0 +96,0 @@ "precommit": [

README.md

@@ -18,8 +18,8 @@ # react-stickynode
 
--   Retrieve `scrollTop` only once for all sticky components.
--   Listen to throttled scrolling to have better performance.
--   Use rAF to update sticky status to have better performance.
--   Support top offset from the top of screen.
--   Support bottom boundary to stop sticky status.
--   Support any sticky target with various width units.
+- Retrieve `scrollTop` only once for all sticky components.
+- Listen to throttled scrolling to have better performance.
+- Use rAF to update sticky status to have better performance.
+- Support top offset from the top of screen.
+- Support bottom boundary to stop sticky status.
+- Support any sticky target with various width units.
 
@@ -26,0 +26,0 @@ ## Usage

No alert changes

Improved metrics

Lines of code

1015

increased by2.01%

Worsened metrics

Total package byte prevSize

57218

decreased by-1.72%

Dev dependency count

33

increased by6.45%

No dependency changes