@majoo-ui/react 1.58.0 → 1.58.1

package/index.umd.js

@@ -20452,6 +20452,64 @@
       }
     }
   });
+  const GoToPageBox = styled(Flex$1, {
+    height: 28,
+    width: 'fit-content',
+    minWidth: 28,
+    border: '1px solid $bgBorder',
+    borderRadius: 5,
+    boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.07)',
+    fontSize: '$label',
+    cursor: 'pointer'
+  });
+  const PrevNextButtonIcon = ({
+    onClick,
+    iconType,
+    hidden
+  }) => {
+    const [isHover, setIsHover] = React.useState(false);
+    function handleEnter() {
+      setIsHover(true);
+    }
+    function handleLeave() {
+      setIsHover(false);
+    }
+    return /*#__PURE__*/React__default["default"].createElement(Button$4, {
+      css: {
+        height: 40,
+        width: 48,
+        minWidth: 48
+      },
+      hidden: hidden,
+      type: "button",
+      buttonType: "ghost",
+      onMouseEnter: handleEnter,
+      onMouseLeave: handleLeave,
+      onClick: onClick,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 68,
+        columnNumber: 5
+      }
+    }, iconType === 'prev' ? /*#__PURE__*/React__default["default"].createElement(icons.ArrowLeftOutline, {
+      color: isHover ? colors$7.iconGreen : colors$7.iconPrimary,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 82,
+        columnNumber: 9
+      }
+    }) : /*#__PURE__*/React__default["default"].createElement(icons.ArrowRightOutline, {
+      color: isHover ? colors$7.iconGreen : colors$7.iconPrimary,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 84,
+        columnNumber: 9
+      }
+    }));
+  };
   const PageButton = _ref => {
     let {
         isActive,
@@ -20464,16 +20522,20 @@
       buttonType: !isActive ? 'ghost' : 'primary',
       css: {
         minWidth: 'initial',
-        width: 28,
-        height: 28,
+        width: 40,
+        height: 40,
         padding: 0,
-        color: !isActive && '$textSecondary'
+        color: !isActive && '$textSecondary',
+        '@md': {
+          width: 28,
+          height: 28
+        }
       }
     }, props, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 35,
+        lineNumber: 92,
         columnNumber: 5
       }
     }));
@@ -20494,6 +20556,8 @@
       }
     };
     const inputPageRef = React.useRef();
+    const dialogPageRef = React.useRef();
+    const [goToPage, setGoToPage] = React.useState();
     React.useEffect(() => {
       if (inputPageRef.current) {
         inputPageRef.current.value = '';
@@ -20501,13 +20565,17 @@
     }, [currentPage]);
     const debouncedGoToPage = React.useCallback(debounce__default["default"](handleSelectPage, 1000), [totalPages]);
     const generatePages = () => {
-      const maxButtons = isLg ? 1 : 5;
+      const maxButtons = isLg ? currentPage < 3 ? 3 : currentPage >= 4 ? currentPage > totalPages - 2 ? 3 : 1 : 2 : 5;
       const pageButtons = [];
       let startPage;
       let endPage;
       if (maxButtons && maxButtons < totalPages) {
         startPage = Math.max(Math.min(currentPage - Math.floor(maxButtons / 2), totalPages - maxButtons + 1), 1);
-        endPage = startPage + maxButtons - 1;
+        if (isLg && currentPage === totalPages - 2) {
+          endPage = startPage + maxButtons + 1;
+        } else {
+          endPage = startPage + maxButtons - 1;
+        }
       } else {
         startPage = 1;
         endPage = totalPages;
@@ -20517,13 +20585,11 @@
       for (let page = startPage; page <= endPage; ++page) {
         pageButtons.push(page);
       }
-      if (!isLg) {
-        if (startPage > 1) {
-          if (startPage > 2) {
-            pageButtons.unshift('\u2026');
-          }
-          pageButtons.unshift(1);
+      if (startPage > 1) {
+        if (startPage > 2) {
+          pageButtons.unshift('\u2026');
         }
+        pageButtons.unshift(1);
       }
       if (endPage < totalPages) {
         if (endPage < totalPages - 1) {
@@ -20533,8 +20599,8 @@
       }
       return pageButtons;
     };
-    const isMobilePagination = useMediaQuery('(max-width: 360px)');
-    return /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+    const isMobilePagination = useMediaQuery('(max-width: 767px)');
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
       align: "center",
       direction: isMobilePagination ? 'column' : 'row',
       gap: isMobilePagination ? 2 : 0,
@@ -20544,8 +20610,8 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 109,
-        columnNumber: 5
+        lineNumber: 179,
+        columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
       align: "center",
@@ -20553,8 +20619,8 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 115,
-        columnNumber: 7
+        lineNumber: 185,
+        columnNumber: 9
       }
     }, (currentPage > 1 || totalPages === 1) && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !isLg && /*#__PURE__*/React__default["default"].createElement(IconButton, {
       type: "button",
@@ -20564,18 +20630,30 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 119,
-        columnNumber: 15
+        lineNumber: 189,
+        columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.ArrowLeftOutline, {
       color: currentPage === 1 ? colors$7.iconDisable : colors$7.iconPrimary,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 125,
+        lineNumber: 195,
+        columnNumber: 19
+      }
+    })), isLg ? /*#__PURE__*/React__default["default"].createElement(PrevNextButtonIcon, {
+      type: "button",
+      buttonType: "ghost",
+      iconType: "prev",
+      hidden: totalPages < 2,
+      onClick: () => handleSelectPage(currentPage - 1),
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 199,
         columnNumber: 17
       }
-    })), /*#__PURE__*/React__default["default"].createElement(PrevNextButton, {
+    }) : /*#__PURE__*/React__default["default"].createElement(PrevNextButton, {
       variant: "caption",
       isDisabled: currentPage === 1,
       color: currentPage === 1 ? 'disable' : 'primary',
@@ -20583,8 +20661,8 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 128,
-        columnNumber: 13
+        lineNumber: 207,
+        columnNumber: 17
       }
     }, t('previousButton', 'Sebelumnya'))), generatePages().map((page, index) => {
       return /*#__PURE__*/React__default["default"].createElement(PageButton, {
@@ -20594,11 +20672,23 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$k,
-          lineNumber: 140,
-          columnNumber: 13
+          lineNumber: 220,
+          columnNumber: 15
         }
       }, page);
-    }), (currentPage < totalPages || totalPages === 1) && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(PrevNextButton, {
+    }), (currentPage < totalPages || totalPages === 1) && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isLg ? /*#__PURE__*/React__default["default"].createElement(PrevNextButtonIcon, {
+      type: "button",
+      buttonType: "ghost",
+      iconType: "next",
+      hidden: totalPages < 2,
+      onClick: () => handleSelectPage(currentPage + 1),
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 232,
+        columnNumber: 17
+      }
+    }) : /*#__PURE__*/React__default["default"].createElement(PrevNextButton, {
       variant: "caption",
       isDisabled: currentPage === totalPages,
       color: currentPage === totalPages ? 'disable' : 'primary',
@@ -20606,8 +20696,8 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 151,
-        columnNumber: 13
+        lineNumber: 240,
+        columnNumber: 17
       }
     }, t('nextButton', 'Selanjutnya')), !isLg && /*#__PURE__*/React__default["default"].createElement(IconButton, {
       type: "button",
@@ -20617,16 +20707,16 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 160,
-        columnNumber: 15
+        lineNumber: 251,
+        columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.ArrowRightOutline, {
       color: currentPage === totalPages ? colors$7.iconDisable : colors$7.iconPrimary,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 166,
-        columnNumber: 17
+        lineNumber: 257,
+        columnNumber: 19
       }
     })))), !hideInputPageSection && totalPages > 1 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
       orientation: "vertical",
@@ -20638,8 +20728,8 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 175,
-        columnNumber: 11
+        lineNumber: 266,
+        columnNumber: 13
       }
     }), /*#__PURE__*/React__default["default"].createElement(Box, {
       css: {
@@ -20651,23 +20741,40 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 183,
-        columnNumber: 11
+        lineNumber: 274,
+        columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
       variant: "caption",
-      css: {
+      css: Object.assign({
         fontSize: 12,
         fontWeight: 400,
         color: '$textPrimary'
+      }, isMobilePagination && {
+        backgroundColor: '$bgWhite',
+        padding: 4,
+        borderRadius: 4
+      }),
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 275,
+        columnNumber: 15
+      }
+    }, t('gotoPageText', 'Ke Halaman')), isMobilePagination ? /*#__PURE__*/React__default["default"].createElement(GoToPageBox, {
+      align: "center",
+      justify: "center",
+      onClick: () => {
+        var _dialogPageRef$curren;
+        return (_dialogPageRef$curren = dialogPageRef.current) === null || _dialogPageRef$curren === void 0 ? void 0 : _dialogPageRef$curren.click();
       },
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 184,
-        columnNumber: 13
+        lineNumber: 287,
+        columnNumber: 17
       }
-    }, t('gotoPageText', 'Ke Halaman')), /*#__PURE__*/React__default["default"].createElement(InputNumber, {
+    }, goToPage) : /*#__PURE__*/React__default["default"].createElement(InputNumber, {
       ref: inputPageRef,
       isAllowed: ({
         floatValue
@@ -20691,10 +20798,126 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 187,
+        lineNumber: 291,
+        columnNumber: 17
+      }
+    })))), /*#__PURE__*/React__default["default"].createElement(ModalDialog, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 319,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
+      style: {
+        display: 'none'
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 320,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      ref: dialogPageRef,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 321,
+        columnNumber: 11
+      }
+    })), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 323,
+        columnNumber: 9
+      }
+    }, t('gotoPageText', 'Ke Halaman')), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 324,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("form", {
+      onSubmit: () => {
+        var _dialogPageRef$curren2;
+        debouncedGoToPage(Number(goToPage));
+        (_dialogPageRef$curren2 = dialogPageRef.current) === null || _dialogPageRef$curren2 === void 0 ? void 0 : _dialogPageRef$curren2.click();
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 325,
+        columnNumber: 11
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(InputNumber, {
+      ref: inputPageRef,
+      placeholder: t('goToPagePlaceholder', 'Contoh: 10'),
+      isAllowed: ({
+        floatValue
+      }) => floatValue === undefined || floatValue > 0 && floatValue <= totalPages,
+      allowNegative: false,
+      onChange: e => {
+        var _e$target;
+        return setGoToPage((_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value);
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 331,
         columnNumber: 13
       }
-    }))));
+    }))), /*#__PURE__*/React__default["default"].createElement(ModalDialogFooter, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 340,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+      css: {
+        width: '100%'
+      },
+      gap: 4,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 341,
+        columnNumber: 11
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Button$4, {
+      block: true,
+      type: "button",
+      buttonType: "ghost",
+      onClick: () => {
+        var _dialogPageRef$curren3;
+        setGoToPage(null);
+        (_dialogPageRef$curren3 = dialogPageRef.current) === null || _dialogPageRef$curren3 === void 0 ? void 0 : _dialogPageRef$curren3.click();
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 342,
+        columnNumber: 13
+      }
+    }, t('btnCancelText', 'Batal')), /*#__PURE__*/React__default["default"].createElement(Button$4, {
+      block: true,
+      type: "button",
+      buttonType: "primary",
+      onClick: () => {
+        var _dialogPageRef$curren4;
+        debouncedGoToPage(Number(goToPage));
+        (_dialogPageRef$curren4 = dialogPageRef.current) === null || _dialogPageRef$curren4 === void 0 ? void 0 : _dialogPageRef$curren4.click();
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 353,
+        columnNumber: 13
+      }
+    }, t('btnSubmitText', 'Lanjutkan'))))));
   };
 
   const _excluded$3 = ["limits", "selectedLimit", "currentPage", "totalData", "onChange"];
@@ -20727,14 +20950,16 @@
     const {
       t
     } = reactI18next.useTranslation('MajooUI/pagination');
-    return /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+    const dialogLimitRef = React.useRef();
+    const isMobilePagination = useMediaQuery('(max-width: 767px)');
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
       align: "center",
       gap: 3,
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 30,
-        columnNumber: 5
+        lineNumber: 38,
+        columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
       color: "secondary",
@@ -20742,54 +20967,69 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 31,
-        columnNumber: 7
+        lineNumber: 39,
+        columnNumber: 9
       }
     }, t('showingText', 'Tampilkan:')), /*#__PURE__*/React__default["default"].createElement(Popover, {
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 34,
-        columnNumber: 7
+        lineNumber: 42,
+        columnNumber: 9
       }
-    }, /*#__PURE__*/React__default["default"].createElement(PopoverTrigger, {
+    }, /*#__PURE__*/React__default["default"].createElement(ConditionalWrapper, {
+      condition: !isMobilePagination,
+      wrapper: child => /*#__PURE__*/React__default["default"].createElement(PopoverTrigger, {
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$j,
+          lineNumber: 45,
+          columnNumber: 31
+        }
+      }, child),
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 35,
-        columnNumber: 9
+        lineNumber: 43,
+        columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(LimitContainer, {
       align: "center",
+      onClick: () => {
+        if (isMobilePagination) {
+          var _dialogLimitRef$curre;
+          (_dialogLimitRef$curre = dialogLimitRef.current) === null || _dialogLimitRef$curre === void 0 ? void 0 : _dialogLimitRef$curre.click();
+        }
+      },
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 36,
-        columnNumber: 11
+        lineNumber: 47,
+        columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
       variant: "status",
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 37,
-        columnNumber: 13
+        lineNumber: 55,
+        columnNumber: 15
       }
     }, selectedLimit.toString()), /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
       color: colors$7.gray400,
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 38,
-        columnNumber: 13
+        lineNumber: 56,
+        columnNumber: 15
       }
     }))), /*#__PURE__*/React__default["default"].createElement(PopoverContent, {
       placement: "top",
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 41,
-        columnNumber: 9
+        lineNumber: 59,
+        columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
       direction: "column",
@@ -20801,8 +21041,8 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 42,
-        columnNumber: 11
+        lineNumber: 60,
+        columnNumber: 13
       }
     }, limits === null || limits === void 0 ? void 0 : limits.map(limit => /*#__PURE__*/React__default["default"].createElement(PopoverClose, {
       key: limit,
@@ -20811,16 +21051,16 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 51,
-        columnNumber: 15
+        lineNumber: 69,
+        columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
       variant: "status",
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 56,
-        columnNumber: 17
+        lineNumber: 74,
+        columnNumber: 19
       }
     }, limit.toString())))))), /*#__PURE__*/React__default["default"].createElement(Text$1, {
       color: "secondary",
@@ -20828,14 +21068,89 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 62,
-        columnNumber: 7
+        lineNumber: 80,
+        columnNumber: 9
       }
     }, t('showingCountText', `Ditampilkan ${(currentPage - 1) * selectedLimit + 1} - ${selectedLimit * currentPage < totalData ? selectedLimit * currentPage : totalData} dari ${totalData} data`, {
       start: (currentPage - 1) * selectedLimit + 1,
       end: selectedLimit * currentPage < totalData ? selectedLimit * currentPage : totalData,
       totalData
-    })));
+    }))), /*#__PURE__*/React__default["default"].createElement(ModalDialog, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$j,
+        lineNumber: 94,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
+      style: {
+        display: 'none'
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$j,
+        lineNumber: 95,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      ref: dialogLimitRef,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$j,
+        lineNumber: 96,
+        columnNumber: 11
+      }
+    })), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$j,
+        lineNumber: 98,
+        columnNumber: 9
+      }
+    }, t('dialogShowingText', 'Tampilkan Data')), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
+      style: {
+        padding: 0
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$j,
+        lineNumber: 99,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Box, {
+      css: {
+        padding: '$spacing-04 0px'
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$j,
+        lineNumber: 100,
+        columnNumber: 11
+      }
+    }, limits === null || limits === void 0 ? void 0 : limits.map(limit => /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+      css: {
+        height: 44,
+        width: '100%',
+        padding: '$spacing-03 $spacing-06',
+        cursor: 'pointer',
+        background: selectedLimit === limit && '$green50',
+        '&:hover': {
+          background: '$gray50'
+        }
+      },
+      align: "center",
+      onClick: () => {
+        var _dialogLimitRef$curre2;
+        onChange(limit);
+        (_dialogLimitRef$curre2 = dialogLimitRef.current) === null || _dialogLimitRef$curre2 === void 0 ? void 0 : _dialogLimitRef$curre2.click();
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$j,
+        lineNumber: 102,
+        columnNumber: 15
+      }
+    }, limit.toString()))))));
   }
 
   const _excluded$2 = ["limit", "currentPage", "totalData", "totalPage", "hideDataInfo", "onLimitChange", "onPageChange", "rowsPerPageOptions", "hidePagination", "hideInputPageSection"];
@@ -21912,7 +22227,7 @@
     var renderFooter = function renderFooter() {
       return jsxRuntime.jsx(Pagination, {
         hidePagination: hidePagination,
-        hideInputPageSection: isMobile,
+        hideInputPageSection: false,
         limit: pageSize,
         currentPage: pageIndex + 1,
         totalData: totalData,