@mjhls/mjh-framework 1.0.162 → 1.0.164

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -10002,7 +10002,7 @@ var NavMagazine = function NavMagazine(props) {
10002
10002
  React__default.createElement(
10003
10003
  'style',
10004
10004
  { jsx: 'true' },
10005
- '\n .sticky-home {\n position: relative;\n top: -3px;\n left: -6px;\n cursor: pointer;\n }\n .nav-item svg {\n margin-bottom: 2px;\n }\n #nav-login,\n #nav-logout,\n #nav-register {\n padding: 0.5rem;\n cursor: pointer;\n }\n #nav-mobile-login,\n #nav-mobile-logout,\n #nav-mobile-register {\n display: none;\n }\n #nav-mobile-logout,\n #nav-mobile-login {\n position: absolute;\n right: 1rem;\n }\n #nav-mobile-register {\n position: absolute;\n left: 1rem;\n }\n\n @media screen and (max-width: 1199px) {\n #nav-mobile-login,\n #nav-mobile-logout,\n #nav-mobile-register {\n display: block;\n }\n .navbar-top {\n flex-direction: row;\n justify-content: space-around !important;\n align-items: center;\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n width: 100%;\n }\n }\n\n @media screen and (max-width: 991px) {\n .mobile-nav .nav-toggle {\n width: 100%;\n }\n\n .android-nav {\n max-height: 80vh;\n }\n\n .ios-nav {\n max-height: none;\n }\n\n .navbar.bg-primary {\n overflow: auto;\n }\n\n .mobile-nav .nav-toggle .navbar-toggler {\n float: left;\n height: 45px;\n }\n .mobile-nav .nav-toggle .form-inline {\n float: right;\n margin: 4px 0px 0px 0px;\n }\n .mobile-nav .form-inline .mobile-search {\n width: auto;\n }\n .sticky-home {\n display: none;\n }\n .dropdown-menu {\n max-height: 315px;\n overflow: auto;\n }\n ::-webkit-scrollbar {\n width: 10px;\n }\n ::-webkit-scrollbar-thumb {\n border-radius: 4px;\n background-color: rgba(214, 214, 214, 0.8);\n box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n }\n .navbar-expand-lg .show#basic-navbar-sub {\n display: block;\n }\n .navbar .mobile-nav .navbar-collapse.show {\n padding-bottom: 10px;\n border-bottom: 0.5px solid white;\n }\n .navbar .mobile-nav .navbar-collapse .form-inline {\n display: none;\n }\n .navbar .mobile-nav .navbar-collapse {\n margin-top: 15px;\n }\n .navbar .mobile-nav .navbar-collapse:last-child {\n border-bottom: none;\n margin-bottom: 0px;\n padding-bottom: 0px;\n margin-top: 0px;\n padding-top: 10px;\n }\n .navbar .mobile-nav .navbar-collapse .nav-footer ul {\n list-style-type: none;\n padding: inherit;\n margin-bottom: 0rem;\n }\n .navbar .mobile-nav .navbar-collapse .nav-footer .nav-link {\n text-transform: capitalize !important;\n font-weight: 300;\n }\n .navbar .mobile-nav .dropdown-item:focus {\n background-color: #696969;\n }\n .navbar .mobile-nav .dropdown-menu .dropdown-item {\n color: white;\n }\n .navbar .mobile-nav .dropdown-menu {\n background: inherit;\n border: none;\n }\n .navbar .mobile-nav .dropdown-menu.show {\n max-height: 100px;\n }\n }\n @media screen and (min-width: 992px) {\n #basic-navbar-sub {\n display: none !important;\n }\n .navbar .mobile-nav .dropdown-menu .dropdown-item {\n color: #696969;\n }\n .navbar .mobile-nav .dropdown-menu {\n background: white;\n border: 1 px solid #708090;\n }\n .mobile-nav .nav-toggle .form-inline {\n display: none;\n }\n }\n\n @media screen and (max-width: 376px) {\n .mobile-nav .nav-toggle .form-inline .mobile-search {\n width: 60%;\n }\n .mobile-nav .nav-toggle .form-inline {\n width: 70%;\n }\n }\n @media screen and (max-width: 328px) {\n .mobile-nav .nav-toggle .form-inline .mobile-search {\n margin-right: 5px;\n }\n }\n @media screen and (max-width: 767px) {\n .logo {\n width: 100%;\n padding-left: 10px;\n padding-right: 10px;\n }\n }\n '
10005
+ '\n .sticky-home {\n position: relative;\n top: -3px;\n left: -6px;\n cursor: pointer;\n }\n .nav-item svg {\n margin-bottom: 2px;\n }\n #nav-login,\n #nav-logout,\n #nav-register {\n padding: 0.5rem;\n cursor: pointer;\n }\n #nav-mobile-login,\n #nav-mobile-logout,\n #nav-mobile-register {\n display: none;\n }\n #nav-mobile-logout,\n #nav-mobile-login {\n position: absolute;\n right: 1rem;\n }\n #nav-mobile-register {\n position: absolute;\n left: 1rem;\n }\n\n @media screen and (max-width: 1199px) {\n #nav-mobile-login,\n #nav-mobile-logout,\n #nav-mobile-register {\n display: block;\n }\n .navbar-top {\n flex-direction: row;\n justify-content: space-around !important;\n align-items: center;\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n width: 100%;\n }\n }\n\n @media screen and (max-width: 991px) {\n .mobile-nav .nav-toggle {\n width: 100%;\n }\n\n .android-nav {\n max-height: 80vh;\n }\n\n .ios-nav {\n max-height: none;\n }\n\n .navbar.bg-primary {\n overflow: auto;\n }\n\n .mobile-nav .nav-toggle .navbar-toggler {\n float: left;\n height: 45px;\n }\n .mobile-nav .nav-toggle .form-inline {\n float: right;\n margin: 4px 0px 0px 0px;\n }\n .mobile-nav .form-inline .mobile-search {\n width: auto;\n }\n .sticky-home {\n display: none;\n }\n .dropdown-menu {\n max-height: 315px;\n overflow: auto;\n }\n ::-webkit-scrollbar {\n width: 10px;\n }\n ::-webkit-scrollbar-thumb {\n border-radius: 4px;\n background-color: rgba(214, 214, 214, 0.8);\n box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n }\n .navbar-expand-lg .show#basic-navbar-sub {\n display: block;\n }\n .navbar .mobile-nav .navbar-collapse.show {\n padding-bottom: 10px;\n border-bottom: 0.5px solid white;\n }\n .navbar .mobile-nav .navbar-collapse .form-inline {\n display: none;\n }\n .navbar .mobile-nav .navbar-collapse {\n margin-top: 15px;\n }\n .navbar .mobile-nav .navbar-collapse:last-child {\n border-bottom: none;\n margin-bottom: 0px;\n padding-bottom: 0px;\n margin-top: 0px;\n padding-top: 10px;\n }\n .navbar .mobile-nav .navbar-collapse .nav-footer ul {\n list-style-type: none;\n padding: inherit;\n margin-bottom: 0rem;\n }\n .navbar .mobile-nav .navbar-collapse .nav-footer .nav-link {\n text-transform: capitalize !important;\n font-weight: 300;\n }\n .navbar .mobile-nav .dropdown-item:focus {\n background-color: #696969;\n }\n .navbar .mobile-nav .dropdown-menu .dropdown-item {\n color: white;\n }\n .navbar .mobile-nav .dropdown-menu {\n background: inherit;\n border: none;\n }\n .navbar .mobile-nav .dropdown-menu.show {\n max-height: 100px;\n }\n }\n @media screen and (min-width: 992px) {\n #basic-navbar-sub {\n display: none !important;\n }\n .navbar .mobile-nav .dropdown-menu .dropdown-item {\n color: #696969;\n }\n .navbar .mobile-nav .dropdown-menu {\n background: white;\n border: 1 px solid #708090;\n }\n .mobile-nav .nav-toggle .form-inline {\n display: none;\n }\n }\n\n @media screen and (max-width: 376px) {\n .mobile-nav .nav-toggle .form-inline .mobile-search {\n width: 60%;\n }\n .mobile-nav .nav-toggle .form-inline {\n width: 70%;\n }\n }\n @media screen and (max-width: 328px) {\n .mobile-nav .nav-toggle .form-inline .mobile-search {\n margin-right: 5px;\n }\n }\n @media screen and (max-width: 767px) {\n .logo {\n max-width: 100%;\n padding-left: 10px;\n padding-right: 10px;\n }\n }\n '
10006
10006
  )
10007
10007
  );
10008
10008
  };
@@ -14881,6 +14881,8 @@ var Poll = function Poll(_ref) {
14881
14881
  );
14882
14882
  };
14883
14883
 
14884
+ var numberOfPaginations = main_35 ? 4 : 10;
14885
+
14884
14886
  var Quiz = function Quiz(_ref) {
14885
14887
  var quizzes = _ref.quizzes,
14886
14888
  serializerArguments = _ref.serializerArguments;
@@ -14897,45 +14899,106 @@ var Quiz = function Quiz(_ref) {
14897
14899
  showAnswer = _useState4[0],
14898
14900
  setShowAnswer = _useState4[1];
14899
14901
 
14900
- var changePage = function changePage(page) {
14901
- if (page > 0 && page <= pageCount) {
14902
- setShowAnswer(false);
14903
- setCurrentPage(page);
14904
- }
14902
+ var _useState5 = React.useState(0),
14903
+ _useState6 = slicedToArray(_useState5, 2),
14904
+ startIndex = _useState6[0],
14905
+ setStartIndex = _useState6[1];
14906
+
14907
+ var _useState7 = React.useState(numberOfPaginations - 1),
14908
+ _useState8 = slicedToArray(_useState7, 2),
14909
+ endIndex = _useState8[0],
14910
+ setEndIndex = _useState8[1];
14911
+
14912
+ var _useState9 = React.useState([]),
14913
+ _useState10 = slicedToArray(_useState9, 2),
14914
+ pages = _useState10[0],
14915
+ setPages = _useState10[1];
14916
+
14917
+ React.useEffect(function () {
14918
+ var totalPages = Array.from({ length: pageCount }, function (v, k) {
14919
+ return k + 1;
14920
+ });
14921
+ var filteredPages = totalPages.slice(startIndex, endIndex + 1);
14922
+ setPages(filteredPages);
14923
+ }, [startIndex, endIndex, pageCount]);
14924
+
14925
+ var validateIndex = function validateIndex(index) {
14926
+ return index >= 0 && index <= pageCount - 1;
14905
14927
  };
14906
14928
 
14907
- var renderPagination = function renderPagination() {
14908
- var pages = [];
14909
-
14910
- var _loop = function _loop(i) {
14911
- pages.push(React__default.createElement(
14912
- Pagination.Item,
14913
- { onClick: function onClick() {
14914
- return changePage(i);
14915
- }, active: i === currentPage },
14916
- i
14917
- ));
14918
- };
14929
+ var changePage = function changePage(control) {
14930
+ setShowAnswer(false);
14931
+ switch (control) {
14932
+ case 'first':
14933
+ setCurrentPage(1);
14934
+ setStartIndex(0);
14935
+ setEndIndex(numberOfPaginations - 1);
14936
+ break;
14937
+ case 'last':
14938
+ setCurrentPage(pageCount);
14939
+ setStartIndex(pageCount - pageCount % numberOfPaginations);
14940
+ setEndIndex(pageCount - pageCount % numberOfPaginations + numberOfPaginations - 1);
14941
+ break;
14942
+ case 'next':
14943
+ setCurrentPage(currentPage + 1);
14944
+ if (currentPage % numberOfPaginations === 0) {
14945
+ setStartIndex(startIndex + numberOfPaginations);
14946
+ setEndIndex(endIndex + numberOfPaginations);
14947
+ }
14948
+ break;
14949
+ case 'prev':
14950
+ setCurrentPage(currentPage - 1);
14951
+ if (currentPage % numberOfPaginations === 1) {
14952
+ setStartIndex(startIndex - numberOfPaginations);
14953
+ setEndIndex(endIndex - numberOfPaginations);
14954
+ }
14955
+ break;
14956
+ default:
14957
+ setCurrentPage(control);
14958
+ }
14959
+ };
14919
14960
 
14920
- for (var i = 1; i <= pageCount; i++) {
14921
- _loop(i);
14961
+ var renderNewPages = function renderNewPages(section) {
14962
+ if (section === 'prev') {
14963
+ setStartIndex(startIndex - numberOfPaginations);
14964
+ setEndIndex(endIndex - numberOfPaginations);
14965
+ } else if (section === 'next') {
14966
+ setStartIndex(startIndex + numberOfPaginations);
14967
+ setEndIndex(endIndex + numberOfPaginations);
14922
14968
  }
14969
+ };
14970
+
14971
+ var renderPagination = function renderPagination() {
14923
14972
  return React__default.createElement(
14924
14973
  Pagination,
14925
- { className: 'p-0 m-0' },
14974
+ { className: 'p-0 m-0', size: main_35 && 'sm' },
14926
14975
  React__default.createElement(Pagination.First, { onClick: function onClick() {
14927
- return changePage(1);
14928
- } }),
14976
+ return changePage('first');
14977
+ }, disabled: currentPage === 1 }),
14929
14978
  React__default.createElement(Pagination.Prev, { onClick: function onClick() {
14930
- return changePage(currentPage - 1);
14931
- } }),
14932
- pages,
14979
+ return changePage('prev');
14980
+ }, disabled: currentPage === 1 }),
14981
+ React__default.createElement(Pagination.Ellipsis, { onClick: function onClick() {
14982
+ return renderNewPages('prev');
14983
+ }, disabled: !validateIndex(startIndex - numberOfPaginations) }),
14984
+ pages.map(function (page) {
14985
+ return React__default.createElement(
14986
+ Pagination.Item,
14987
+ { key: page, active: page === currentPage, onClick: function onClick() {
14988
+ return changePage(page);
14989
+ } },
14990
+ page
14991
+ );
14992
+ }),
14993
+ React__default.createElement(Pagination.Ellipsis, { onClick: function onClick() {
14994
+ return renderNewPages('next');
14995
+ }, disabled: !validateIndex(startIndex + numberOfPaginations) }),
14933
14996
  React__default.createElement(Pagination.Next, { onClick: function onClick() {
14934
- return changePage(currentPage + 1);
14935
- } }),
14997
+ return changePage('next');
14998
+ }, disabled: currentPage === pageCount }),
14936
14999
  React__default.createElement(Pagination.Last, { onClick: function onClick() {
14937
- return changePage(pageCount);
14938
- } })
15000
+ return changePage('last');
15001
+ }, disabled: currentPage === pageCount })
14939
15002
  );
14940
15003
  };
14941
15004