Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-06-09 01:17:06 +02:00
Code Issues Projects Releases Wiki Activity

Fix/pagination (#313)

Browse Source 
* fix: add pagination page rules

* fix: set amount of features to paginate to 9
This commit is contained in:
Fredrik Strand Oseberg 2021-07-07 16:26:16 +02:00 committed by GitHub
parent 8759f1ae9b
commit b8469b5a98
2 changed files with 113 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

142
frontend/src/component/common/PaginateUI/PaginateUI.tsx
View File

@ -1,3 +1,4 @@
import { useState } from 'react';
import ConditionallyRender from '../ConditionallyRender';
import classnames from 'classnames';
import { useStyles } from './PaginationUI.styles';
@ -5,6 +6,8 @@ import { useStyles } from './PaginationUI.styles';
import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
import DoubleArrowIcon from '@material-ui/icons/DoubleArrow';
interface IPaginateUIProps {
pages: any[];
pageIndex: number;
@ -20,7 +23,10 @@ const PaginateUI = ({
setPageIndex,
nextPage,
}: IPaginateUIProps) => {
const STARTLIMIT = 6;
const styles = useStyles();
const [limit, setLimit] = useState(STARTLIMIT);
const [start, setStart] = useState(0);
return (
<ConditionallyRender
@ -31,51 +37,107 @@ const PaginateUI = ({
<ConditionallyRender
condition={pageIndex > 0}
show={
<button
className={classnames(
styles.idxBtn,
styles.idxBtnLeft
)}
onClick={() => prevPage()}
>
<ArrowBackIosIcon
className={styles.idxBtnIcon}
/>
</button>
<>
<button
className={classnames(
styles.idxBtn,
styles.idxBtnLeft
)}
onClick={() => {
prevPage();
if (start > 0) {
setLimit(prev => prev - 1);
setStart(prev => prev - 1);
}
}}
>
<ArrowBackIosIcon
className={styles.idxBtnIcon}
/>
</button>
<button
className={classnames(
styles.idxBtn,
styles.doubleArrowBtnLeft
)}
onClick={() => {
setPageIndex(0);
if (start > 0) {
setLimit(STARTLIMIT);
setStart(0);
}
}}
>
<DoubleArrowIcon
className={classnames(
styles.arrowIcon,
styles.arrowIconLeft
)}
/>
</button>
</>
}
/>
{pages.map((page, idx) => {
const active = pageIndex === idx;
return (
<button
key={idx}
className={classnames(
styles.paginationButton,
{
[styles.paginationButtonActive]:
active,
}
)}
onClick={() => setPageIndex(idx)}
>
{idx + 1}
</button>
);
})}
{pages
.map((page, idx) => {
const active = pageIndex === idx;
return (
<button
key={idx}
className={classnames(
styles.paginationButton,
{
[styles.paginationButtonActive]:
active,
}
)}
onClick={() => {
setPageIndex(idx);
}}
>
{idx + 1}
</button>
);
})
.slice(start, limit)}
<ConditionallyRender
condition={pageIndex < pages.length - 1}
show={
<button
onClick={() => nextPage()}
className={classnames(
styles.idxBtn,
styles.idxBtnRight
)}
>
<ArrowForwardIosIcon
className={styles.idxBtnIcon}
/>
</button>
<>
<button
onClick={() => {
nextPage();
if (limit < pages.length) {
setLimit(prev => prev + 1);
setStart(prev => prev + 1);
}
}}
className={classnames(
styles.idxBtn,
styles.idxBtnRight
)}
>
<ArrowForwardIosIcon
className={styles.idxBtnIcon}
/>
</button>
<button
className={classnames(
styles.idxBtn,
styles.doubleArrowBtnRight
)}
onClick={() => {
setPageIndex(pages.length - 1);
setLimit(pages.length);
setStart(pages.length - STARTLIMIT);
}}
>
<DoubleArrowIcon
className={styles.arrowIcon}
/>
</button>
</>
}
/>
</div>

11
frontend/src/component/common/PaginateUI/PaginationUI.styles.ts
View File

@ -18,6 +18,7 @@ export const useStyles = makeStyles(theme => ({
cursor: 'pointer',
backgroundColor: 'efefef',
margin: '0 0.2rem',
width: '31px',
borderRadius: '3px',
padding: '0.25rem 0.5rem',
},
@ -34,6 +35,16 @@ export const useStyles = makeStyles(theme => ({
height: '23px',
cursor: 'pointer',
},
doubleArrowBtnLeft: {
left: '-55px',
},
doubleArrowBtnRight: {
right: '-55px',
},
arrowIcon: { height: '15px', width: '15px' },
arrowIconLeft: {
transform: 'rotate(180deg)',
},
idxBtnIcon: {
height: '15px',
width: '15px',