Remove pagelimit default (#933)

* Remove pageLimit default and make itemsPerPage required

* Fix typings

* isPaginated should be `if paginate or itemsPerPage is not defined`

overrides/react/src/shared/types.ts

@@ -168,7 +168,7 @@ export interface PaginateProps {
   handlePageChange?: (payload: Partial<PaginatePayload>) => void;
   reFetch: (payload: PaginatePayload) => any;
   pageTokenMap: Record<number, PageToken>;
-  itemsPerPage?: number;
+  itemsPerPage: number;
   currentPageItemsCount: number;
   children?: any;
 }

overrides/svelte/src/shared/types.ts

@@ -123,7 +123,7 @@ export interface PaginateProps {
   handlePageChange?: (payload: Partial<PaginatePayload>) => void;
   reFetch: (payload: PaginatePayload) => any;
   pageTokenMap: Record<number, PageToken>;
-  itemsPerPage?: number;
+  itemsPerPage: number;
   currentPageItemsCount: number;
   children?: any;
 }

overrides/vue/vue3/src/shared/types.ts

@@ -131,7 +131,7 @@ export interface PaginateProps {
   handlePageChange?: (payload: Partial<PaginatePayload>) => void;
   reFetch: (payload: PaginatePayload) => any;
   pageTokenMap: Record<number, PageToken>;
-  itemsPerPage?: number;
+  itemsPerPage: number;
   currentPageItemsCount: number;
   children?: any;
 }

src/dsync/DirectoryList/index.lite.tsx

@@ -30,7 +30,7 @@ export default function DirectoryList(props: DirectoryListProps) {
       return props.urls.get;
     },
     get isPaginated() {
-      return props.paginate !== undefined;
+      return props.paginate?.itemsPerPage !== undefined;
     },
     get actions(): TableProps['actions'] {
       return [
@@ -172,7 +172,7 @@ export default function DirectoryList(props: DirectoryListProps) {
     <LoadingContainer isBusy={state.isDirectoryListLoading}>
       <Show when={state.isPaginated}>
         <Paginate
-          itemsPerPage={props.paginate?.itemsPerPage}
+          itemsPerPage={props.paginate!.itemsPerPage}
           currentPageItemsCount={state.directoryListData.length}
           handlePageChange={props.paginate?.handlePageChange}
           reFetch={reFetch}

src/dsync/types.ts

@@ -49,7 +49,7 @@ export interface DirectoryListProps {
   tableProps?: Pick<TableProps, 'tableCaption' | 'classNames'>;
   tenant?: string;
   product?: string;
-  paginate?: Partial<Pick<PaginateProps, 'itemsPerPage' | 'handlePageChange'>>;
+  paginate?: Pick<PaginateProps, 'itemsPerPage'> & Partial<Pick<PaginateProps, 'handlePageChange'>>;
 }
 
 export interface EditDirectoryProps {

src/shared/Paginate/index.lite.tsx

@@ -1,28 +1,24 @@
 import { Show, onMount, onUnMount, useStore } from '@builder.io/mitosis';
 import Button from '../Button/index.lite';
 import { PaginateProps } from '../types';
-import { ITEMS_PER_PAGE_DEFAULT } from './utils';
 import styles from './index.module.css';
 import PaginateContext from './paginate.context.lite';
 
 export default function Paginate(props: PaginateProps) {
   const state = useStore({
     _offset: 0,
-    get _itemsPerPage() {
-      return props.itemsPerPage ?? ITEMS_PER_PAGE_DEFAULT;
-    },
     get isPaginationHidden(): boolean {
-      return state._offset === 0 && props.currentPageItemsCount < state._itemsPerPage;
+      return state._offset === 0 && props.currentPageItemsCount < props.itemsPerPage;
     },
     get isPreviousDisabled(): boolean {
       return state._offset === 0;
     },
     get isNextDisabled(): boolean {
-      return props.currentPageItemsCount < state._itemsPerPage;
+      return props.currentPageItemsCount < props.itemsPerPage;
     },
     handlePreviousClick() {
       const currentOffset = state._offset;
-      const newOffset = currentOffset - state._itemsPerPage;
+      const newOffset = currentOffset - props.itemsPerPage;
       state._offset = newOffset;
 
       // Update query string in URL
@@ -31,21 +27,21 @@ export default function Paginate(props: PaginateProps) {
       typeof props.reFetch === 'function' &&
         props.reFetch({
           offset: newOffset,
-          limit: state._itemsPerPage,
-          pageToken: props.pageTokenMap[newOffset - state._itemsPerPage],
+          limit: props.itemsPerPage,
+          pageToken: props.pageTokenMap[newOffset - props.itemsPerPage],
         });
     },
     handleNextClick() {
       const currentOffset = state._offset;
-      const newOffset = currentOffset + state._itemsPerPage;
+      const newOffset = currentOffset + props.itemsPerPage;
       state._offset = newOffset;
       // Update query string in URL
       typeof props.handlePageChange === 'function' && props.handlePageChange({ offset: newOffset });
       // Trigger data re-fetch with new offset
       typeof props.reFetch === 'function' &&
         props.reFetch({
           offset: newOffset,
-          limit: state._itemsPerPage,
+          limit: props.itemsPerPage,
           pageToken: props.pageTokenMap[currentOffset],
         });
     },
@@ -68,7 +64,7 @@ export default function Paginate(props: PaginateProps) {
       typeof props.reFetch === 'function' &&
         props.reFetch({
           offset: _offsetFromBrowserQS,
-          limit: state._itemsPerPage,
+          limit: props.itemsPerPage,
         });
     } else {
       // console.log(`no offset found in url, setting offset to 0 in url`);
@@ -77,7 +73,7 @@ export default function Paginate(props: PaginateProps) {
       typeof props.reFetch === 'function' &&
         props.reFetch({
           offset: 0,
-          limit: state._itemsPerPage,
+          limit: props.itemsPerPage,
         });
     }
   }

src/shared/types.ts

@@ -160,7 +160,7 @@ export interface PaginateProps {
   handlePageChange?: (payload: Partial<PaginatePayload>) => void;
   reFetch: (payload: PaginatePayload) => any;
   pageTokenMap: Record<number, PageToken>;
-  itemsPerPage?: number;
+  itemsPerPage: number;
   currentPageItemsCount: number;
   children?: any;
 }

src/sso/connections/ConnectionList/index.lite.tsx

@@ -23,7 +23,7 @@ export default function ConnectionList(props: ConnectionListProps) {
       return props.urls.get;
     },
     get isPaginated() {
-      return props.paginate !== undefined;
+      return props.paginate?.itemsPerPage !== undefined;
     },
     get colsToDisplay() {
       return (props.cols || ['name', 'provider', 'tenant', 'product', 'type', 'status', 'actions']).map(
@@ -195,7 +195,7 @@ export default function ConnectionList(props: ConnectionListProps) {
     <LoadingContainer isBusy={state.isConnectionListLoading}>
       <Show when={state.isPaginated}>
         <Paginate
-          itemsPerPage={props.paginate?.itemsPerPage}
+          itemsPerPage={props.paginate!.itemsPerPage}
           currentPageItemsCount={state.connectionListData.length}
           handlePageChange={props.paginate?.handlePageChange}
           reFetch={reFetch}

src/sso/connections/types.ts

@@ -20,7 +20,7 @@ export interface ConnectionListProps {
   product?: string;
   // If true will sort the list display based on sortOrder of the connection
   displaySorted?: boolean;
-  paginate?: Partial<Pick<PaginateProps, 'itemsPerPage' | 'handlePageChange'>>;
+  paginate?: Pick<PaginateProps, 'itemsPerPage'> & Partial<Pick<PaginateProps, 'handlePageChange'>>;
 }
 
 export interface CreateConnectionProps {