voicebot-react-native-expo
Version:
This is a voicebot-react-native package of Kipps AI voice bot for React Native Expo
68 lines (60 loc) • 1.85 kB
text/typescript
import type { TrackReferenceOrPlaceholder } from '@livekit/components-core';
import * as React from 'react';
import { useVisualStableUpdate } from './useVisualStableUpdate';
/**
* The `usePagination` hook implements simple pagination logic for use with arrays.
* @example
* ```tsx
* const tracks = useTracks();
* const pagination = usePagination(4, tracks);
*
* <TrackLoop tracks={pagination.tracks} />
* ```
* @alpha
*/
export function usePagination(itemPerPage: number, trackReferences: TrackReferenceOrPlaceholder[]) {
const [currentPage, setCurrentPage] = React.useState(1);
const totalPageCount = Math.max(Math.ceil(trackReferences.length / itemPerPage), 1);
if (currentPage > totalPageCount) {
setCurrentPage(totalPageCount);
}
const lastItemIndex = currentPage * itemPerPage;
const firstItemIndex = lastItemIndex - itemPerPage;
const changePage = (direction: 'next' | 'previous') => {
setCurrentPage((state) => {
if (direction === 'next') {
if (state === totalPageCount) {
return state;
}
return state + 1;
} else {
if (state === 1) {
return state;
}
return state - 1;
}
});
};
const goToPage = (num: number) => {
if (num > totalPageCount) {
setCurrentPage(totalPageCount);
} else if (num < 1) {
setCurrentPage(1);
} else {
setCurrentPage(num);
}
};
const updatedTrackReferences = useVisualStableUpdate(trackReferences, itemPerPage);
const tracksOnPage = updatedTrackReferences.slice(firstItemIndex, lastItemIndex);
return {
totalPageCount,
nextPage: () => changePage('next'),
prevPage: () => changePage('previous'),
setPage: goToPage,
firstItemIndex,
lastItemIndex,
tracks: tracksOnPage,
currentPage,
};
}
export default usePagination;