@mjhls/mjh-framework 1.0.163 → 1.0.164

package/README.md

@@ -1,5 +1,5 @@
 
-# mjh-framework v. 1.0.163
+# mjh-framework v. 1.0.164
 
 
 

package/dist/index.es.js

@@ -14873,6 +14873,8 @@ var Poll = function Poll(_ref) {
   );
 };
 
+var numberOfPaginations = main_35 ? 4 : 10;
+
 var Quiz = function Quiz(_ref) {
   var quizzes = _ref.quizzes,
       serializerArguments = _ref.serializerArguments;
@@ -14889,45 +14891,106 @@ var Quiz = function Quiz(_ref) {
       showAnswer = _useState4[0],
       setShowAnswer = _useState4[1];
 
-  var changePage = function changePage(page) {
-    if (page > 0 && page <= pageCount) {
-      setShowAnswer(false);
-      setCurrentPage(page);
-    }
+  var _useState5 = useState(0),
+      _useState6 = slicedToArray(_useState5, 2),
+      startIndex = _useState6[0],
+      setStartIndex = _useState6[1];
+
+  var _useState7 = useState(numberOfPaginations - 1),
+      _useState8 = slicedToArray(_useState7, 2),
+      endIndex = _useState8[0],
+      setEndIndex = _useState8[1];
+
+  var _useState9 = useState([]),
+      _useState10 = slicedToArray(_useState9, 2),
+      pages = _useState10[0],
+      setPages = _useState10[1];
+
+  useEffect(function () {
+    var totalPages = Array.from({ length: pageCount }, function (v, k) {
+      return k + 1;
+    });
+    var filteredPages = totalPages.slice(startIndex, endIndex + 1);
+    setPages(filteredPages);
+  }, [startIndex, endIndex, pageCount]);
+
+  var validateIndex = function validateIndex(index) {
+    return index >= 0 && index <= pageCount - 1;
   };
 
-  var renderPagination = function renderPagination() {
-    var pages = [];
-
-    var _loop = function _loop(i) {
-      pages.push(React__default.createElement(
-        Pagination.Item,
-        { onClick: function onClick() {
-            return changePage(i);
-          }, active: i === currentPage },
-        i
-      ));
-    };
+  var changePage = function changePage(control) {
+    setShowAnswer(false);
+    switch (control) {
+      case 'first':
+        setCurrentPage(1);
+        setStartIndex(0);
+        setEndIndex(numberOfPaginations - 1);
+        break;
+      case 'last':
+        setCurrentPage(pageCount);
+        setStartIndex(pageCount - pageCount % numberOfPaginations);
+        setEndIndex(pageCount - pageCount % numberOfPaginations + numberOfPaginations - 1);
+        break;
+      case 'next':
+        setCurrentPage(currentPage + 1);
+        if (currentPage % numberOfPaginations === 0) {
+          setStartIndex(startIndex + numberOfPaginations);
+          setEndIndex(endIndex + numberOfPaginations);
+        }
+        break;
+      case 'prev':
+        setCurrentPage(currentPage - 1);
+        if (currentPage % numberOfPaginations === 1) {
+          setStartIndex(startIndex - numberOfPaginations);
+          setEndIndex(endIndex - numberOfPaginations);
+        }
+        break;
+      default:
+        setCurrentPage(control);
+    }
+  };
 
-    for (var i = 1; i <= pageCount; i++) {
-      _loop(i);
+  var renderNewPages = function renderNewPages(section) {
+    if (section === 'prev') {
+      setStartIndex(startIndex - numberOfPaginations);
+      setEndIndex(endIndex - numberOfPaginations);
+    } else if (section === 'next') {
+      setStartIndex(startIndex + numberOfPaginations);
+      setEndIndex(endIndex + numberOfPaginations);
     }
+  };
+
+  var renderPagination = function renderPagination() {
     return React__default.createElement(
       Pagination,
-      { className: 'p-0 m-0' },
+      { className: 'p-0 m-0', size: main_35 && 'sm' },
       React__default.createElement(Pagination.First, { onClick: function onClick() {
-          return changePage(1);
-        } }),
+          return changePage('first');
+        }, disabled: currentPage === 1 }),
       React__default.createElement(Pagination.Prev, { onClick: function onClick() {
-          return changePage(currentPage - 1);
-        } }),
-      pages,
+          return changePage('prev');
+        }, disabled: currentPage === 1 }),
+      React__default.createElement(Pagination.Ellipsis, { onClick: function onClick() {
+          return renderNewPages('prev');
+        }, disabled: !validateIndex(startIndex - numberOfPaginations) }),
+      pages.map(function (page) {
+        return React__default.createElement(
+          Pagination.Item,
+          { key: page, active: page === currentPage, onClick: function onClick() {
+              return changePage(page);
+            } },
+          page
+        );
+      }),
+      React__default.createElement(Pagination.Ellipsis, { onClick: function onClick() {
+          return renderNewPages('next');
+        }, disabled: !validateIndex(startIndex + numberOfPaginations) }),
       React__default.createElement(Pagination.Next, { onClick: function onClick() {
-          return changePage(currentPage + 1);
-        } }),
+          return changePage('next');
+        }, disabled: currentPage === pageCount }),
       React__default.createElement(Pagination.Last, { onClick: function onClick() {
-          return changePage(pageCount);
-        } })
+          return changePage('last');
+        }, disabled: currentPage === pageCount })
     );
   };