ns-base-module 1.1.72 → 1.1.73

package/dist/TableHeaderConfigPopover/index.js

@@ -1,5 +1,6 @@
 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); }
-var _excluded = ["menuCode", "formTemplateCode"];
+var _excluded = ["menuCode", "formTemplateCode"],
+  _excluded2 = ["children"];
 function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + obj); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -30,7 +31,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  */
 // import { crossContext } from "@/my-context";
 // import { initLang } from "@/utils/language";
-import { CopyOutlined, DeleteOutlined, PlusOutlined, SettingOutlined, ShareAltOutlined, UserOutlined } from "@ant-design/icons";
+import { CopyOutlined, DeleteOutlined, PlusOutlined, SettingOutlined } from "@ant-design/icons";
 import { Button, Checkbox, Input, message, Popconfirm, Popover, Radio, Tooltip, Tree } from "antd";
 import { cloneDeep, get, isArray, isEmpty } from "lodash";
 import React, { memo, useEffect, useMemo, useState } from "react";
@@ -38,6 +39,7 @@ import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import Dustbin from "./Dustbin";
 import "../../style/components/TableHeaderConfigPopover.scss";
+import IconCreate from "../Icon";
 import { initLang } from "../utils/language";
 import { queryColumnsConfig, setFormTemplates } from "../utils/services/global";
 import { adapterColumns, sortColums } from "./utils";
@@ -492,9 +494,8 @@ var ColumnsToolbarRender = /*#__PURE__*/memo(function (props) {
         title: d.customizable === false ? d.title : /*#__PURE__*/React.createElement(Dustbin, {
           item: d,
           onChange: changeTableHeader,
-          onFixed: onFixed
-          // showArrows={showArrows}
-          ,
+          onFixed: onFixed,
+          showArrows: showArrows,
           onDrop: d.customizable === false ? null : onDrop // 子动态列 不能拖拽
         }),
         children: titleChildren(d.children, showArrows)
@@ -531,7 +532,7 @@ var ColumnsToolbarRender = /*#__PURE__*/memo(function (props) {
     onChange: changeInput
   }), /*#__PURE__*/React.createElement(Radio.Group, {
     style: {
-      paddingTop: 6
+      paddingTop: 12
     },
     onChange: function onChange(e) {
       setPermsType(e.target.value);
@@ -560,11 +561,7 @@ var ColumnsToolbarRender = /*#__PURE__*/memo(function (props) {
     indeterminate: indeterminate,
     onChange: selectAllChange,
     className: "tree_selectall"
-  }, /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "#0273b0"
-    }
-  }, initLang({
+  }, /*#__PURE__*/React.createElement("span", null, initLang({
     id: "app.search.modal.selectAll"
   }))), !!leftFixed.length && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     className: "columns-fixed-title"
@@ -605,7 +602,7 @@ var ColumnsToolbarRender = /*#__PURE__*/memo(function (props) {
     showLine: true,
     rootStyle: {
       overflowY: "auto",
-      maxHeight: "500px"
+      maxHeight: "400px"
     },
     checkedKeys: flatColumns(unFixed, true).filter(function (col) {
       return col.checked;
@@ -800,11 +797,11 @@ var ColumnsToolbar = function ColumnsToolbar(_ref4) {
                 }
                 if (item.is_default === "Y") {
                   hasDefault = true;
-                  setValue(item.value);
+                  updateValue(item.value);
                   setCurItem(item);
                 }
                 if (item.is_default_public === "Y" && !hasDefault) {
-                  setValue(item.value);
+                  updateValue(item.value);
                   setCurItem(item);
                 }
               });
@@ -908,8 +905,13 @@ var ColumnsToolbar = function ColumnsToolbar(_ref4) {
       return _ref7.apply(this, arguments);
     };
   }();
+  var updateValue = function updateValue(_value) {
+    var _props$onChange;
+    setValue(_value);
+    (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, _value);
+  };
   var onChange = function onChange(e) {
-    setValue(e.target.value);
+    updateValue(e.target.value);
     var arr = [].concat(_toConsumableArray(templateUser), _toConsumableArray(template));
     arr.forEach(function (item) {
       if (item.value === e.target.value) {
@@ -1001,7 +1003,7 @@ var ColumnsToolbar = function ColumnsToolbar(_ref4) {
 
   // 取消选择 恢复默认
   var cancelSelect = function cancelSelect() {
-    setValue("");
+    updateValue("");
     setCurItem({});
     restColumns("cancel");
   };
@@ -1022,12 +1024,9 @@ var ColumnsToolbar = function ColumnsToolbar(_ref4) {
     props.updateColumns(_columns);
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: "popover-body",
-    style: {
-      width: "500px"
-    }
+    className: "popover-body ".concat(showConfig ? "config-body" : "")
   }, /*#__PURE__*/React.createElement("div", {
-    className: "top-wrap"
+    className: "top-wrap "
   }, /*#__PURE__*/React.createElement("span", {
     className: "title"
   }, initLang({
@@ -1067,7 +1066,8 @@ var ColumnsToolbar = function ColumnsToolbar(_ref4) {
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: "list-title"
-  }, /*#__PURE__*/React.createElement(UserOutlined, {
+  }, /*#__PURE__*/React.createElement(IconCreate, {
+    type: "icon-ns-gerenmoban",
     className: "list-title-icon"
   }), initLang({
     id: "prompt.personalTemplate"
@@ -1117,7 +1117,8 @@ var ColumnsToolbar = function ColumnsToolbar(_ref4) {
     }))));
   })), /*#__PURE__*/React.createElement("div", {
     className: "list-title"
-  }, /*#__PURE__*/React.createElement(ShareAltOutlined, {
+  }, /*#__PURE__*/React.createElement(IconCreate, {
+    type: "icon-ns-gonggongmoban",
     className: "list-title-icon"
   }), initLang({
     id: "prompt.publicTemplate"
@@ -1178,10 +1179,10 @@ var ColumnsToolbar = function ColumnsToolbar(_ref4) {
   }))), /*#__PURE__*/React.createElement("div", {
     style: {
       position: "absolute",
-      right: 12,
+      left: 12,
       bottom: 16
     }
-  }, (curItem === null || curItem === void 0 ? void 0 : curItem.perms_type) == "private" && /*#__PURE__*/React.createElement(React.Fragment, null, (curItem === null || curItem === void 0 ? void 0 : curItem.is_default) === "Y" ? /*#__PURE__*/React.createElement(Button, {
+  }, (curItem === null || curItem === void 0 ? void 0 : curItem.perms_type) !== "public" && /*#__PURE__*/React.createElement(React.Fragment, null, (curItem === null || curItem === void 0 ? void 0 : curItem.is_default) === "Y" ? /*#__PURE__*/React.createElement(Button, {
     onClick: function onClick() {
       return handleSaveDefault("N");
     },
@@ -1228,6 +1229,8 @@ var ColumnsToolbar = function ColumnsToolbar(_ref4) {
 };
 var Index = function Index(_ref9) {
   var props = Object.assign({}, (_objectDestructuringEmpty(_ref9), _ref9));
+  var children = props.children,
+    arg = _objectWithoutProperties(props, _excluded2);
   useEffect(function () {
     if (props.init) {
       getColumnsFilter();
@@ -1289,8 +1292,8 @@ var Index = function Index(_ref9) {
     placement: "bottomLeft",
     trigger: "click",
     title: "",
-    content: /*#__PURE__*/React.createElement(ColumnsToolbar, props)
-  }, /*#__PURE__*/React.createElement(Tooltip, {
+    content: /*#__PURE__*/React.createElement(ColumnsToolbar, arg)
+  }, children ? children : /*#__PURE__*/React.createElement(Tooltip, {
     placement: "left",
     title: initLang({
       id: "prompt.setTemplate"

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'));