Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-06-14 01:16:17 +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

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

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

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

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