ns-base-module 2.0.5 → 2.0.7

package/dist/scroll/index.js

@@ -0,0 +1,281 @@
+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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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, _toPropertyKey(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(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(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); }
+import React, { Component } from "react";
+import { throttle } from "throttle-debounce";
+import { ThresholdUnits, parseThreshold } from "./utils/threshold";
+var InfiniteScroll = /*#__PURE__*/function (_Component) {
+  _inherits(InfiniteScroll, _Component);
+  var _super = _createSuper(InfiniteScroll);
+  function InfiniteScroll(props) {
+    var _this;
+    _classCallCheck(this, InfiniteScroll);
+    _this = _super.call(this, props);
+    _defineProperty(_assertThisInitialized(_this), "throttledOnScrollListener", void 0);
+    _defineProperty(_assertThisInitialized(_this), "_scrollableNode", void 0);
+    _defineProperty(_assertThisInitialized(_this), "el", void 0);
+    _defineProperty(_assertThisInitialized(_this), "_infScroll", void 0);
+    _defineProperty(_assertThisInitialized(_this), "lastScrollTop", 0);
+    _defineProperty(_assertThisInitialized(_this), "actionTriggered", false);
+    _defineProperty(_assertThisInitialized(_this), "_pullDown", void 0);
+    // variables to keep track of pull down behaviour
+    _defineProperty(_assertThisInitialized(_this), "startY", 0);
+    _defineProperty(_assertThisInitialized(_this), "currentY", 0);
+    _defineProperty(_assertThisInitialized(_this), "dragging", false);
+    // will be populated in componentDidMount
+    // based on the height of the pull down element
+    _defineProperty(_assertThisInitialized(_this), "maxPullDownDistance", 0);
+    _defineProperty(_assertThisInitialized(_this), "getScrollableTarget", function () {
+      console.log("document.getElementById(this.props.scrollableTarget):", _this.props.scrollableTarget, document.getElementById(_this.props.scrollableTarget));
+      if (_this.props.scrollableTarget instanceof HTMLElement) return _this.props.scrollableTarget;
+      if (typeof _this.props.scrollableTarget === "string") {
+        return document.getElementById(_this.props.scrollableTarget);
+      }
+      if (_this.props.scrollableTarget === null) {
+        console.warn("You are trying to pass scrollableTarget but it is null. This might\n        happen because the element may not have been added to DOM yet.\n        See https://github.com/ankeetmaini/react-infinite-scroll-component/issues/59 for more info.\n      ");
+      }
+      return null;
+    });
+    _defineProperty(_assertThisInitialized(_this), "onStart", function (evt) {
+      if (_this.lastScrollTop) return;
+      _this.dragging = true;
+      if (evt instanceof MouseEvent) {
+        _this.startY = evt.pageY;
+      } else if (evt instanceof TouchEvent) {
+        _this.startY = evt.touches[0].pageY;
+      }
+      _this.currentY = _this.startY;
+      if (_this._infScroll) {
+        _this._infScroll.style.willChange = "transform";
+        _this._infScroll.style.transition = "transform 0.2s cubic-bezier(0,0,0.31,1)";
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "onMove", function (evt) {
+      if (!_this.dragging) return;
+      if (evt instanceof MouseEvent) {
+        _this.currentY = evt.pageY;
+      } else if (evt instanceof TouchEvent) {
+        _this.currentY = evt.touches[0].pageY;
+      }
+
+      // user is scrolling down to up
+      if (_this.currentY < _this.startY) return;
+      if (_this.currentY - _this.startY >= Number(_this.props.pullDownToRefreshThreshold)) {
+        _this.setState({
+          pullToRefreshThresholdBreached: true
+        });
+      }
+
+      // so you can drag upto 1.5 times of the maxPullDownDistance
+      if (_this.currentY - _this.startY > _this.maxPullDownDistance * 1.5) return;
+      if (_this._infScroll) {
+        _this._infScroll.style.overflow = "visible";
+        _this._infScroll.style.transform = "translate3d(0px, ".concat(_this.currentY - _this.startY, "px, 0px)");
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "onEnd", function () {
+      _this.startY = 0;
+      _this.currentY = 0;
+      _this.dragging = false;
+      if (_this.state.pullToRefreshThresholdBreached) {
+        _this.props.refreshFunction && _this.props.refreshFunction();
+        _this.setState({
+          pullToRefreshThresholdBreached: false
+        });
+      }
+      requestAnimationFrame(function () {
+        // this._infScroll
+        if (_this._infScroll) {
+          _this._infScroll.style.overflow = "auto";
+          _this._infScroll.style.transform = "none";
+          _this._infScroll.style.willChange = "unset";
+        }
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "onScrollListener", function (event) {
+      debugger;
+      if (typeof _this.props.onScroll === "function") {
+        // Execute this callback in next tick so that it does not affect the
+        // functionality of the library.
+        setTimeout(function () {
+          return _this.props.onScroll && _this.props.onScroll(event);
+        }, 0);
+      }
+      var target = _this.props.height || _this._scrollableNode ? event.target : document.documentElement.scrollTop ? document.documentElement : document.body;
+
+      // return immediately if the action has already been triggered,
+      // prevents multiple triggers.
+      if (_this.actionTriggered) return;
+      var atBottom = _this.props.inverse ? _this.isElementAtTop(target, _this.props.scrollThreshold) : _this.isElementAtBottom(target, _this.props.scrollThreshold);
+
+      // call the `next` function in the props to trigger the next data fetch
+      if (atBottom && _this.props.hasMore) {
+        _this.actionTriggered = true;
+        _this.setState({
+          showLoader: true
+        });
+        _this.props.next && _this.props.next();
+      }
+      _this.lastScrollTop = target.scrollTop;
+    });
+    _this.state = {
+      showLoader: false,
+      pullToRefreshThresholdBreached: false,
+      prevDataLength: props.dataLength
+    };
+    _this.throttledOnScrollListener = throttle(150, _this.onScrollListener).bind(_assertThisInitialized(_this));
+    _this.onStart = _this.onStart.bind(_assertThisInitialized(_this));
+    _this.onMove = _this.onMove.bind(_assertThisInitialized(_this));
+    _this.onEnd = _this.onEnd.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+  _createClass(InfiniteScroll, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (typeof this.props.dataLength === "undefined") {
+        throw new Error("mandatory prop \"dataLength\" is missing. The prop is needed" + " when loading more content. Check README.md for usage");
+      }
+      this._scrollableNode = this.getScrollableTarget();
+      this.el = this.props.height ? this._infScroll : this._scrollableNode || window;
+      if (this.el) {
+        this.el.addEventListener("scroll", this.throttledOnScrollListener);
+      }
+      if (typeof this.props.initialScrollY === "number" && this.el && this.el instanceof HTMLElement && this.el.scrollHeight > this.props.initialScrollY) {
+        this.el.scrollTo(0, this.props.initialScrollY);
+      }
+      if (this.props.pullDownToRefresh && this.el) {
+        this.el.addEventListener("touchstart", this.onStart);
+        this.el.addEventListener("touchmove", this.onMove);
+        this.el.addEventListener("touchend", this.onEnd);
+        this.el.addEventListener("mousedown", this.onStart);
+        this.el.addEventListener("mousemove", this.onMove);
+        this.el.addEventListener("mouseup", this.onEnd);
+
+        // get BCR of pullDown element to position it above
+        this.maxPullDownDistance = this._pullDown && this._pullDown.firstChild && this._pullDown.firstChild.getBoundingClientRect().height || 0;
+        this.forceUpdate();
+        if (typeof this.props.refreshFunction !== "function") {
+          throw new Error("Mandatory prop \"refreshFunction\" missing.\n          Pull Down To Refresh functionality will not work\n          as expected. Check README.md for usage'");
+        }
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this.el) {
+        this.el.removeEventListener("scroll", this.throttledOnScrollListener);
+        if (this.props.pullDownToRefresh) {
+          this.el.removeEventListener("touchstart", this.onStart);
+          this.el.removeEventListener("touchmove", this.onMove);
+          this.el.removeEventListener("touchend", this.onEnd);
+          this.el.removeEventListener("mousedown", this.onStart);
+          this.el.removeEventListener("mousemove", this.onMove);
+          this.el.removeEventListener("mouseup", this.onEnd);
+        }
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      // do nothing when dataLength is unchanged
+      if (this.props.dataLength === prevProps.dataLength) return;
+      this.actionTriggered = false;
+
+      // update state when new data was sent in
+      this.setState({
+        showLoader: false
+      });
+    }
+  }, {
+    key: "isElementAtTop",
+    value: function isElementAtTop(target) {
+      var scrollThreshold = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.8;
+      var clientHeight = target === document.body || target === document.documentElement ? window.screen.availHeight : target.clientHeight;
+      var threshold = parseThreshold(scrollThreshold);
+      if (threshold.unit === ThresholdUnits.Pixel) {
+        return target.scrollTop <= threshold.value + clientHeight - target.scrollHeight + 1;
+      }
+      return target.scrollTop <= threshold.value / 100 + clientHeight - target.scrollHeight + 1;
+    }
+  }, {
+    key: "isElementAtBottom",
+    value: function isElementAtBottom(target) {
+      var scrollThreshold = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.8;
+      var clientHeight = target === document.body || target === document.documentElement ? window.screen.availHeight : target.clientHeight;
+      var threshold = parseThreshold(scrollThreshold);
+      if (threshold.unit === ThresholdUnits.Pixel) {
+        return target.scrollTop + clientHeight >= target.scrollHeight - threshold.value;
+      }
+      return target.scrollTop + clientHeight >= threshold.value / 100 * target.scrollHeight;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var style = _objectSpread({
+        height: this.props.height || "auto",
+        overflow: "auto",
+        WebkitOverflowScrolling: "touch"
+      }, this.props.style);
+      var hasChildren = this.props.hasChildren || !!(this.props.children && this.props.children instanceof Array && this.props.children.length);
+
+      // because heighted infiniteScroll visualy breaks
+      // on drag down as overflow becomes visible
+      var outerDivStyle = this.props.pullDownToRefresh && this.props.height ? {
+        overflow: "auto"
+      } : {};
+      return /*#__PURE__*/React.createElement("div", {
+        style: outerDivStyle,
+        className: "infinite-scroll-component__outerdiv"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "infinite-scroll-component ".concat(this.props.className || ""),
+        ref: function ref(infScroll) {
+          return _this2._infScroll = infScroll;
+        },
+        style: style
+      }, this.props.pullDownToRefresh && /*#__PURE__*/React.createElement("div", {
+        style: {
+          position: "relative"
+        },
+        ref: function ref(pullDown) {
+          return _this2._pullDown = pullDown;
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        style: {
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: -1 * this.maxPullDownDistance
+        }
+      }, this.state.pullToRefreshThresholdBreached ? this.props.releaseToRefreshContent : this.props.pullDownToRefreshContent)), this.props.children, !this.state.showLoader && !hasChildren && this.props.hasMore && this.props.loader, this.state.showLoader && this.props.hasMore && this.props.loader, !this.props.hasMore && this.props.endMessage));
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(nextProps, prevState) {
+      var dataLengthChanged = nextProps.dataLength !== prevState.prevDataLength;
+
+      // reset when data changes
+      if (dataLengthChanged) {
+        return _objectSpread(_objectSpread({}, prevState), {}, {
+          prevDataLength: nextProps.dataLength
+        });
+      }
+      return null;
+    }
+  }]);
+  return InfiniteScroll;
+}(Component);
+export { InfiniteScroll as default };

package/dist/scroll/stories/InfiniteScrollWithHeight.js

@@ -0,0 +1,84 @@
+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(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, _toPropertyKey(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(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(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); }
+import React from 'react';
+import { render } from 'react-dom';
+import InfiniteScroll from "../index";
+var style = {
+  height: 30,
+  border: '1px solid green',
+  margin: 6,
+  padding: 8
+};
+var App = /*#__PURE__*/function (_React$Component) {
+  _inherits(App, _React$Component);
+  var _super = _createSuper(App);
+  function App() {
+    var _this;
+    _classCallCheck(this, App);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      items: Array.from({
+        length: 20
+      }),
+      hasMore: true
+    });
+    _defineProperty(_assertThisInitialized(_this), "fetchMoreData", function () {
+      if (_this.state.items.length >= 500) {
+        _this.setState({
+          hasMore: false
+        });
+        return;
+      }
+      // a fake async api call like which sends
+      // 20 more records in .5 secs
+      setTimeout(function () {
+        _this.setState({
+          items: _this.state.items.concat(Array.from({
+            length: 20
+          }))
+        });
+      }, 500);
+    });
+    return _this;
+  }
+  _createClass(App, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", null, "demo: Infinite Scroll with fixed height"), /*#__PURE__*/React.createElement("hr", null), /*#__PURE__*/React.createElement(InfiniteScroll, {
+        dataLength: this.state.items.length,
+        next: this.fetchMoreData,
+        hasMore: this.state.hasMore,
+        loader: /*#__PURE__*/React.createElement("h4", null, "Loading..."),
+        height: 400,
+        endMessage: /*#__PURE__*/React.createElement("p", {
+          style: {
+            textAlign: 'center'
+          }
+        }, /*#__PURE__*/React.createElement("b", null, "Yay! You have seen it all"))
+      }, this.state.items.map(function (_, index) {
+        return /*#__PURE__*/React.createElement("div", {
+          style: style,
+          key: index
+        }, "div - #", index);
+      })));
+    }
+  }]);
+  return App;
+}(React.Component);
+export { App as default };
+render( /*#__PURE__*/React.createElement(App, null), document.getElementById('root'));

package/dist/scroll/stories/PullDownToRefreshInfScroll.js

@@ -0,0 +1,83 @@
+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(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, _toPropertyKey(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(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(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); }
+import React from 'react';
+import { render } from 'react-dom';
+import InfiniteScroll from "../index";
+var style = {
+  height: 30,
+  border: '1px solid green',
+  margin: 6,
+  padding: 8
+};
+var App = /*#__PURE__*/function (_React$Component) {
+  _inherits(App, _React$Component);
+  var _super = _createSuper(App);
+  function App() {
+    var _this;
+    _classCallCheck(this, App);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      items: Array.from({
+        length: 20
+      })
+    });
+    _defineProperty(_assertThisInitialized(_this), "fetchMoreData", function () {
+      // a fake async api call like which sends
+      // 20 more records in 1.5 secs
+      setTimeout(function () {
+        _this.setState({
+          items: _this.state.items.concat(Array.from({
+            length: 20
+          }))
+        });
+      }, 1500);
+    });
+    return _this;
+  }
+  _createClass(App, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", null, "demo: Pull down to refresh"), /*#__PURE__*/React.createElement("hr", null), /*#__PURE__*/React.createElement(InfiniteScroll, {
+        dataLength: this.state.items.length,
+        next: this.fetchMoreData,
+        hasMore: true,
+        loader: /*#__PURE__*/React.createElement("h4", null, "Loading..."),
+        pullDownToRefresh: true,
+        pullDownToRefreshContent: /*#__PURE__*/React.createElement("h3", {
+          style: {
+            textAlign: 'center'
+          }
+        }, "\u2193 Pull down to refresh"),
+        releaseToRefreshContent: /*#__PURE__*/React.createElement("h3", {
+          style: {
+            textAlign: 'center'
+          }
+        }, "\u2191 Release to refresh"),
+        refreshFunction: this.fetchMoreData
+      }, this.state.items.map(function (_, index) {
+        return /*#__PURE__*/React.createElement("div", {
+          style: style,
+          key: index
+        }, "div - #", index);
+      })));
+    }
+  }]);
+  return App;
+}(React.Component);
+export { App as default };
+render( /*#__PURE__*/React.createElement(App, null), document.getElementById('root'));

package/dist/scroll/stories/ScrollableTargetInfScroll.js

@@ -0,0 +1,78 @@
+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(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, _toPropertyKey(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(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(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); }
+import React from 'react';
+import { render } from 'react-dom';
+import InfiniteScroll from "../index";
+var style = {
+  height: 30,
+  border: '1px solid green',
+  margin: 6,
+  padding: 8
+};
+var App = /*#__PURE__*/function (_React$Component) {
+  _inherits(App, _React$Component);
+  var _super = _createSuper(App);
+  function App() {
+    var _this;
+    _classCallCheck(this, App);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      items: Array.from({
+        length: 20
+      })
+    });
+    _defineProperty(_assertThisInitialized(_this), "fetchMoreData", function () {
+      // a fake async api call like which sends
+      // 20 more records in 1.5 secs
+      setTimeout(function () {
+        _this.setState({
+          items: _this.state.items.concat(Array.from({
+            length: 20
+          }))
+        });
+      }, 1500);
+    });
+    return _this;
+  }
+  _createClass(App, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", null, "demo: Infinite Scroll with scrollable target"), /*#__PURE__*/React.createElement("hr", null), /*#__PURE__*/React.createElement("div", {
+        id: "scrollableDiv",
+        style: {
+          height: 300,
+          overflow: 'auto'
+        }
+      }, /*#__PURE__*/React.createElement(InfiniteScroll, {
+        dataLength: this.state.items.length,
+        next: this.fetchMoreData,
+        hasMore: true,
+        loader: /*#__PURE__*/React.createElement("h4", null, "Loading..."),
+        scrollableTarget: "scrollableDiv"
+      }, this.state.items.map(function (_, index) {
+        return /*#__PURE__*/React.createElement("div", {
+          style: style,
+          key: index
+        }, "div - #", index);
+      }))));
+    }
+  }]);
+  return App;
+}(React.Component);
+export { App as default };
+render( /*#__PURE__*/React.createElement(App, null), document.getElementById('root'));

package/dist/scroll/stories/ScrolleableTop.js

@@ -0,0 +1,86 @@
+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(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, _toPropertyKey(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(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(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); }
+import React from 'react';
+import { render } from 'react-dom';
+import InfiniteScroll from "../index";
+var style = {
+  height: 30,
+  border: '1px solid green',
+  margin: 6,
+  padding: 8
+};
+var App = /*#__PURE__*/function (_React$Component) {
+  _inherits(App, _React$Component);
+  var _super = _createSuper(App);
+  function App() {
+    var _this;
+    _classCallCheck(this, App);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      items: Array.from({
+        length: 20
+      })
+    });
+    _defineProperty(_assertThisInitialized(_this), "fetchMoreData", function () {
+      // a fake async api call like which sends
+      // 20 more records in 1.5 secs
+      setTimeout(function () {
+        _this.setState({
+          items: _this.state.items.concat(Array.from({
+            length: 20
+          }))
+        });
+      }, 1500);
+    });
+    return _this;
+  }
+  _createClass(App, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", null, "demo: Infinite Scroll on top"), /*#__PURE__*/React.createElement("hr", null), /*#__PURE__*/React.createElement("div", {
+        id: "scrollableDiv",
+        style: {
+          height: 300,
+          overflow: 'auto',
+          display: 'flex',
+          flexDirection: 'column-reverse'
+        }
+      }, /*#__PURE__*/React.createElement(InfiniteScroll, {
+        dataLength: this.state.items.length,
+        next: this.fetchMoreData,
+        style: {
+          display: 'flex',
+          flexDirection: 'column-reverse'
+        } //To put endMessage and loader to the top.
+        ,
+        inverse: true,
+        hasMore: true,
+        loader: /*#__PURE__*/React.createElement("h4", null, "Loading..."),
+        scrollableTarget: "scrollableDiv"
+      }, this.state.items.map(function (_, index) {
+        return /*#__PURE__*/React.createElement("div", {
+          style: style,
+          key: index
+        }, "div - #", index);
+      }))));
+    }
+  }]);
+  return App;
+}(React.Component);
+export { App as default };
+render( /*#__PURE__*/React.createElement(App, null), document.getElementById('root'));