@dnb/eufemia 9.16.2 → 9.17.2

package/cjs/components/pagination/PaginationInfinity.js

@@ -6,8 +6,18 @@ require("core-js/modules/es.object.get-prototype-of.js");
 
 require("core-js/modules/es.reflect.construct.js");
 
+require("core-js/modules/es.object.keys.js");
+
 require("core-js/modules/es.symbol.js");
 
+require("core-js/modules/es.array.filter.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+
+require("core-js/modules/es.object.assign.js");
+
 require("core-js/modules/es.symbol.description.js");
 
 require("core-js/modules/es.symbol.iterator.js");
@@ -18,23 +28,13 @@ require("core-js/modules/es.string.iterator.js");
 
 require("core-js/modules/web.dom-collections.iterator.js");
 
-require("core-js/modules/es.array.from.js");
-
 require("core-js/modules/es.array.slice.js");
 
 require("core-js/modules/es.function.name.js");
 
-require("core-js/modules/es.regexp.exec.js");
-
-require("core-js/modules/es.object.keys.js");
-
-require("core-js/modules/es.array.filter.js");
-
-require("core-js/modules/es.object.get-own-property-descriptor.js");
-
-require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.array.from.js");
 
-require("core-js/modules/es.object.assign.js");
+require("core-js/modules/es.regexp.exec.js");
 
 require("core-js/modules/es.array.index-of.js");
 
@@ -83,6 +83,10 @@ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArra
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
 function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
@@ -93,18 +97,6 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 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); } }
@@ -144,15 +136,20 @@ var InfinityScroller = function (_React$PureComponent) {
           startupPage = _this$context$paginat.startupPage,
           startup_count = _this$context$paginat.startup_count;
       var startupCount = parseFloat(startup_count);
+      var newPageNo, skipObserver, callStartupEvent, preventWaitForDelay;
 
-      for (var i = 0, newPageNo; i < startupCount; ++i) {
+      for (var i = 0; i < startupCount; ++i) {
         newPageNo = startupPage + i;
+        skipObserver = newPageNo < startupCount;
+        callStartupEvent = i === 0;
+        preventWaitForDelay = i <= startupCount - 1;
 
         _this.getNewContent(newPageNo, {
           position: 'after',
-          skipObserver: newPageNo < startupCount
+          skipObserver: skipObserver
         }, {
-          isStartup: i === 0
+          callStartupEvent: callStartupEvent,
+          preventWaitForDelay: preventWaitForDelay
         });
       }
     });
@@ -161,8 +158,10 @@ var InfinityScroller = function (_React$PureComponent) {
       var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
       var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
-          _ref$isStartup = _ref.isStartup,
-          isStartup = _ref$isStartup === void 0 ? false : _ref$isStartup;
+          _ref$callStartupEvent = _ref.callStartupEvent,
+          callStartupEvent = _ref$callStartupEvent === void 0 ? false : _ref$callStartupEvent,
+          _ref$preventWaitForDe = _ref.preventWaitForDelay,
+          preventWaitForDelay = _ref$preventWaitForDe === void 0 ? false : _ref$preventWaitForDe;
 
       var _this$context$paginat2 = _this.context.pagination,
           pageCount = _this$context$paginat2.pageCount,
@@ -183,8 +182,9 @@ var InfinityScroller = function (_React$PureComponent) {
       var items = _this.context.pagination.prefillItems(newPageNo, props);
 
       _this.context.pagination.setItems(items, function () {
-        return _this.callEventHandler(newPageNo, {
-          isStartup: isStartup
+        _this.callEventHandler(newPageNo, {
+          callStartupEvent: callStartupEvent,
+          preventWaitForDelay: preventWaitForDelay
         });
       });
     });
@@ -207,61 +207,80 @@ var InfinityScroller = function (_React$PureComponent) {
     }
   }, {
     key: "waitForReachedTime",
-    value: function waitForReachedTime(fn) {
+    value: function waitForReachedTime(fn, params) {
       this.callbackBuffer = this.callbackBuffer || [];
-
-      for (var _len = arguments.length, props = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-        props[_key - 1] = arguments[_key];
-      }
-
       this.callbackBuffer.push({
         fn: fn,
-        props: props
+        params: params
+      });
+      this.callBuffer({
+        minTime: params.preventWaitForDelay ? -1 : this.context.pagination.minTime
       });
-      this.callBuffer();
     }
   }, {
     key: "callBuffer",
     value: function callBuffer() {
       var _this2 = this;
 
-      var minTime = this.context.pagination.minTime;
+      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          _ref2$minTime = _ref2.minTime,
+          minTime = _ref2$minTime === void 0 ? this.context.pagination.minTime : _ref2$minTime;
+
+      if (this.callbackBuffer.length === 0) {
+        return;
+      }
+
       var diff = this._lastCall > 0 ? new Date().getTime() - this._lastCall : 0;
       var waitTime = diff < minTime ? minTime : 0;
-      clearTimeout(this._bufferTimeout);
-      this._bufferTimeout = setTimeout(function () {
+
+      var nextTick = function nextTick() {
         if (_this2.callbackBuffer.length > 0) {
           _this2._lastCall = new Date().getTime();
 
           var _this2$callbackBuffer = _this2.callbackBuffer.shift(),
               fn = _this2$callbackBuffer.fn,
-              props = _this2$callbackBuffer.props;
+              params = _this2$callbackBuffer.params;
 
-          fn.apply(void 0, _toConsumableArray(props));
+          fn(params);
 
-          _this2.callBuffer();
+          _this2.callBuffer({
+            minTime: params.preventWaitForDelay ? -1 : minTime
+          });
         }
-      }, waitTime);
+      };
+
+      if (minTime > 0) {
+        clearTimeout(this._bufferTimeout);
+        this._bufferTimeout = setTimeout(nextTick, waitTime);
+      } else {
+        nextTick();
+      }
     }
   }, {
     key: "callEventHandler",
     value: function callEventHandler(pageNumber) {
       var _this3 = this;
 
-      var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-          _ref2$isStartup = _ref2.isStartup,
-          isStartup = _ref2$isStartup === void 0 ? false : _ref2$isStartup,
-          _ref2$callOnEnd = _ref2.callOnEnd,
-          callOnEnd = _ref2$callOnEnd === void 0 ? false : _ref2$callOnEnd,
-          _ref2$onDispatch = _ref2.onDispatch,
-          onDispatch = _ref2$onDispatch === void 0 ? null : _ref2$onDispatch;
-
-      this.waitForReachedTime(function (_ref3) {
-        var pageNumber = _ref3.pageNumber,
-            isStartup = _ref3.isStartup;
+      var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+          _ref3$callStartupEven = _ref3.callStartupEvent,
+          callStartupEvent = _ref3$callStartupEven === void 0 ? false : _ref3$callStartupEven,
+          _ref3$preventWaitForD = _ref3.preventWaitForDelay,
+          preventWaitForDelay = _ref3$preventWaitForD === void 0 ? false : _ref3$preventWaitForD,
+          _ref3$callOnEnd = _ref3.callOnEnd,
+          callOnEnd = _ref3$callOnEnd === void 0 ? false : _ref3$callOnEnd,
+          _ref3$onDispatch = _ref3.onDispatch,
+          onDispatch = _ref3$onDispatch === void 0 ? null : _ref3$onDispatch;
+
+      this.waitForReachedTime(function (_ref4) {
+        var pageNumber = _ref4.pageNumber,
+            callStartupEvent = _ref4.callStartupEvent;
         var context = _this3.context.pagination;
 
         var createEvent = function createEvent(eventName) {
+          if (isNaN(pageNumber)) {
+            pageNumber = 1;
+          }
+
           var ret = (0, _componentHelper.dispatchCustomElementEvent)(context, eventName, _objectSpread({
             page: pageNumber,
             pageNo: pageNumber,
@@ -280,7 +299,7 @@ var InfinityScroller = function (_React$PureComponent) {
         if (callOnEnd) {
           createEvent('on_end');
         } else {
-          if (isStartup) {
+          if (callStartupEvent) {
             createEvent('on_startup');
           } else {
             createEvent('on_change');
@@ -290,7 +309,8 @@ var InfinityScroller = function (_React$PureComponent) {
         }
       }, {
         pageNumber: pageNumber,
-        isStartup: isStartup
+        callStartupEvent: callStartupEvent,
+        preventWaitForDelay: preventWaitForDelay
       });
     }
   }, {
@@ -302,35 +322,55 @@ var InfinityScroller = function (_React$PureComponent) {
       var _this$context$paginat3 = this.context.pagination,
           lowerPage = _this$context$paginat3.lowerPage,
           upperPage = _this$context$paginat3.upperPage,
+          currentPage = _this$context$paginat3.currentPage,
           pageCount = _this$context$paginat3.pageCount,
           hasEndedInfinity = _this$context$paginat3.hasEndedInfinity,
           parallelLoadCount = _this$context$paginat3.parallelLoadCount,
+          debug = _this$context$paginat3.debug,
+          current_page = _this$context$paginat3.current_page,
           fallback_element = _this$context$paginat3.fallback_element,
           marker_element = _this$context$paginat3.marker_element,
           indicator_element = _this$context$paginat3.indicator_element;
 
+      if (debug) {
+        console.info('PaginationInfinity.render', {
+          current_page: current_page,
+          lowerPage: lowerPage,
+          upperPage: upperPage,
+          currentPage: currentPage,
+          pageCount: pageCount
+        });
+      }
+
       var Marker = function Marker() {
         return _react.default.createElement(InteractionMarker, {
+          debug: debug,
           pageNumber: upperPage,
           markerElement: marker_element || fallback_element,
           onVisible: function onVisible(pageNumber) {
-            var _loop = function _loop(i, _newPageNo) {
-              _newPageNo = pageNumber + 1 + i;
+            if (debug) {
+              console.info('PaginationInfinity.onVisible', {
+                pageNumber: pageNumber
+              });
+            }
+
+            var newPageNo;
+
+            var _loop = function _loop(i) {
+              newPageNo = pageNumber + 1 + i;
 
               _this4.context.pagination.onPageUpdate(function () {
                 _this4.context.pagination.setState({
-                  upperPage: _newPageNo,
+                  upperPage: newPageNo,
                   skipObserver: i + 1 < parallelLoadCount
                 });
               });
 
-              _this4.callEventHandler(_newPageNo);
-
-              newPageNo = _newPageNo;
+              _this4.callEventHandler(newPageNo);
             };
 
-            for (var i = 0, newPageNo; i < parallelLoadCount; ++i) {
-              _loop(i, newPageNo);
+            for (var i = 0; i < parallelLoadCount; ++i) {
+              _loop(i);
             }
           }
         });
@@ -357,7 +397,7 @@ var InfinityScroller = function (_React$PureComponent) {
         });
       };
 
-      return _react.default.createElement(_react.default.Fragment, null, lowerPage > 1 && _react.default.createElement(LoadButton, null), children, !hasEndedInfinity && (typeof pageCount === 'undefined' || upperPage < pageCount) && _react.default.createElement(Marker, null), !hasEndedInfinity && !this.hideIndicator && (typeof pageCount === 'undefined' || upperPage < pageCount) && _react.default.createElement(_PaginationHelpers.PaginationIndicator, {
+      return _react.default.createElement(_react.default.Fragment, null, parseFloat(current_page) > 0 && lowerPage > 1 && _react.default.createElement(LoadButton, null), children, !hasEndedInfinity && parseFloat(current_page) > 0 && (typeof pageCount === 'undefined' || upperPage < pageCount) && _react.default.createElement(Marker, null), !hasEndedInfinity && !this.hideIndicator && (typeof pageCount === 'undefined' || upperPage < pageCount) && _react.default.createElement(_PaginationHelpers.PaginationIndicator, {
         indicator_element: indicator_element || fallback_element
       }));
     }
@@ -378,24 +418,24 @@ var InfinityScroller = function (_React$PureComponent) {
           marker_element = _this$context$paginat4.marker_element,
           indicator_element = _this$context$paginat4.indicator_element;
 
-      if (this.context.pagination.useMarkerOnly) {
-        return this.handleInfinityMarker();
-      }
-
       if (!(items && items.length > 0)) {
         clearTimeout(this._startupTimeout);
         this._startupTimeout = setTimeout(this.startup, 1);
         return null;
       }
 
+      if (this.context.pagination.useMarkerOnly) {
+        return this.handleInfinityMarker();
+      }
+
       var Element = (0, _PaginationHelpers.preparePageElement)(page_element || _react.default.Fragment);
-      return items.map(function (_ref4, idx) {
-        var pageNumber = _ref4.pageNumber,
-            hasContent = _ref4.hasContent,
-            content = _ref4.content,
-            ref = _ref4.ref,
-            skipObserver = _ref4.skipObserver,
-            ScrollElement = _ref4.ScrollElement;
+      return items.map(function (_ref5, idx) {
+        var pageNumber = _ref5.pageNumber,
+            hasContent = _ref5.hasContent,
+            content = _ref5.content,
+            ref = _ref5.ref,
+            skipObserver = _ref5.skipObserver,
+            ScrollElement = _ref5.ScrollElement;
         var isLastItem = idx === items.length - 1;
         var Elem = hasContent && ScrollElement || Element;
 
@@ -403,10 +443,12 @@ var InfinityScroller = function (_React$PureComponent) {
           pageNumber: pageNumber,
           markerElement: marker_element || fallback_element,
           onVisible: function onVisible(pageNumber) {
-            for (var i = 0, _newPageNo2; i < parallelLoadCount; ++i) {
-              _newPageNo2 = pageNumber + 1 + i;
+            var newPageNo;
 
-              _this5.getNewContent(_newPageNo2, {
+            for (var i = 0; i < parallelLoadCount; ++i) {
+              newPageNo = pageNumber + 1 + i;
+
+              _this5.getNewContent(newPageNo, {
                 position: 'after',
                 skipObserver: i + 1 < parallelLoadCount
               });
@@ -414,6 +456,7 @@ var InfinityScroller = function (_React$PureComponent) {
           }
         });
 
+        var showIndicator = (parallelLoadCount > 1 && idx > 0 ? isLastItem : true) && !hasContent && !_this5.hideIndicator;
         return _react.default.createElement(Elem, {
           key: pageNumber,
           ref: ref
@@ -427,7 +470,7 @@ var InfinityScroller = function (_React$PureComponent) {
               event: event
             });
           }
-        }), placeMakerBeforeContent && marker, content, !placeMakerBeforeContent && marker, (parallelLoadCount > 1 && idx > 0 ? isLastItem : true) && !hasContent && !_this5.hideIndicator && _react.default.createElement(_PaginationHelpers.PaginationIndicator, {
+        }), placeMakerBeforeContent && marker, content, !placeMakerBeforeContent && marker, showIndicator && _react.default.createElement(_PaginationHelpers.PaginationIndicator, {
           indicator_element: indicator_element || fallback_element
         }), hasContent && _this5.useLoadButton && isLastItem && (typeof pageCount === 'undefined' || pageNumber < pageCount) && _react.default.createElement(InfinityLoadButton, {
           element: fallback_element,
@@ -528,15 +571,33 @@ var InteractionMarker = function (_React$PureComponent2) {
         this._isMounted = true;
         (_this$intersectionObs = this.intersectionObserver) === null || _this$intersectionObs === void 0 ? void 0 : _this$intersectionObs.observe(this._ref.current);
       }
+
+      if (this.props.debug) {
+        var height = this.getContentHeight();
+        console.info('PaginationInfinity.getContentHeight', height);
+      }
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      var _this$intersectionObs2;
-
       this._isMounted = false;
-      clearTimeout(this._readyTimeout);
-      (_this$intersectionObs2 = this.intersectionObserver) === null || _this$intersectionObs2 === void 0 ? void 0 : _this$intersectionObs2.disconnect();
+
+      if (this.intersectionObserver) {
+        clearTimeout(this._readyTimeout);
+        this.intersectionObserver.disconnect();
+      }
+    }
+  }, {
+    key: "getContentHeight",
+    value: function getContentHeight() {
+      var height = 0;
+
+      try {
+        var sibling = (0, _componentHelper.getPreviousSibling)('dnb-table', this._ref.current);
+        height = parseFloat(window.getComputedStyle(sibling.querySelector('tbody')).height);
+      } catch (e) {}
+
+      return height;
     }
   }, {
     key: "render",
@@ -562,10 +623,12 @@ var InteractionMarker = function (_React$PureComponent2) {
 }(_react.default.PureComponent);
 
 _defineProperty(InteractionMarker, "defaultProps", {
+  debug: null,
   markerElement: null
 });
 
 process.env.NODE_ENV !== "production" ? InteractionMarker.propTypes = {
+  debug: _propTypes.default.bool,
   pageNumber: _propTypes.default.number.isRequired,
   onVisible: _propTypes.default.func.isRequired,
   markerElement: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.node, _propTypes.default.func, _propTypes.default.string])
@@ -581,8 +644,8 @@ var InfinityLoadButton = function (_React$PureComponent3) {
 
     _classCallCheck(this, InfinityLoadButton);
 
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
     }
 
     _this7 = _super3.call.apply(_super3, [this].concat(args));