lbry-desktop/ui/component/common/paginate.jsx

83 lines
2.7 KiB
React
Raw Normal View History

2019-05-07 04:35:04 +02:00
// @flow
import React from 'react';
import { withRouter } from 'react-router';
import { Form, FormField } from 'component/common/form';
import ReactPaginate from 'react-paginate';
2020-01-08 20:20:30 +01:00
import useIsMobile from 'effects/use-is-mobile';
2019-05-07 04:35:04 +02:00
const PAGINATE_PARAM = 'page';
type Props = {
totalPages: number,
location: { search: string },
history: { push: string => void },
onPageChange?: number => void,
};
function Paginate(props: Props) {
2020-05-21 17:38:28 +02:00
const { totalPages = 1, location, history, onPageChange } = props;
2019-05-07 04:35:04 +02:00
const { search } = location;
2019-09-26 17:38:48 +02:00
const [textValue, setTextValue] = React.useState('');
2019-05-07 04:35:04 +02:00
const urlParams = new URLSearchParams(search);
const currentPage = Number(urlParams.get(PAGINATE_PARAM)) || 1;
2020-01-08 20:20:30 +01:00
const isMobile = useIsMobile();
2019-05-07 04:35:04 +02:00
function handleChangePage(newPageNumber: number) {
if (onPageChange) {
onPageChange(newPageNumber);
}
if (currentPage !== newPageNumber) {
2019-10-27 15:41:43 +01:00
const params = new URLSearchParams(search);
params.set(PAGINATE_PARAM, newPageNumber.toString());
history.push('?' + params.toString());
2019-05-07 04:35:04 +02:00
}
}
2019-09-26 17:38:48 +02:00
function handlePaginateKeyUp() {
const newPage = Number(textValue);
if (newPage && newPage > 0 && newPage <= totalPages) {
2019-05-07 04:35:04 +02:00
handleChangePage(newPage);
}
}
return (
// Hide the paginate controls if we are loading or there is only one page
// It should still be rendered to trigger the onPageChange callback
2020-05-21 17:38:28 +02:00
<Form style={totalPages <= 1 ? { display: 'none' } : null} onSubmit={handlePaginateKeyUp}>
2019-05-07 04:35:04 +02:00
<fieldset-group class="fieldset-group--smushed fieldgroup--paginate">
<fieldset-section>
<ReactPaginate
pageCount={totalPages}
pageRangeDisplayed={2}
previousLabel=""
nextLabel=""
activeClassName="pagination__item--selected"
pageClassName="pagination__item"
previousClassName="pagination__item pagination__item--previous"
nextClassName="pagination__item pagination__item--next"
breakClassName="pagination__item pagination__item--break"
marginPagesDisplayed={2}
onPageChange={e => handleChangePage(e.selected + 1)}
forcePage={currentPage - 1}
initialPage={currentPage - 1}
containerClassName="pagination"
/>
</fieldset-section>
2020-01-08 20:20:30 +01:00
{!isMobile && (
<FormField
value={textValue}
onChange={e => setTextValue(e.target.value)}
className="paginate-channel"
label={__('Go to page:')}
type="text"
name="paginate-file"
/>
)}
2019-05-07 04:35:04 +02:00
</fieldset-group>
</Form>
);
}
export default withRouter(Paginate);