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

142
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,51 +37,107 @@ const PaginateUI = ({
<ConditionallyRender <ConditionallyRender
condition={pageIndex > 0} condition={pageIndex > 0}
show={ show={
<button <>
className={classnames( <button
styles.idxBtn, className={classnames(
styles.idxBtnLeft styles.idxBtn,
)} styles.idxBtnLeft
onClick={() => prevPage()} )}
> onClick={() => {
<ArrowBackIosIcon prevPage();
className={styles.idxBtnIcon} if (start > 0) {
/> setLimit(prev => prev - 1);
</button> 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; {pages
return ( .map((page, idx) => {
<button const active = pageIndex === idx;
key={idx} return (
className={classnames( <button
styles.paginationButton, key={idx}
{ className={classnames(
[styles.paginationButtonActive]: styles.paginationButton,
active, {
} [styles.paginationButtonActive]:
)} active,
onClick={() => setPageIndex(idx)} }
> )}
{idx + 1} onClick={() => {
</button> setPageIndex(idx);
); }}
})} >
{idx + 1}
</button>
);
})
.slice(start, limit)}
<ConditionallyRender <ConditionallyRender
condition={pageIndex < pages.length - 1} condition={pageIndex < pages.length - 1}
show={ show={
<button <>
onClick={() => nextPage()} <button
className={classnames( onClick={() => {
styles.idxBtn, nextPage();
styles.idxBtnRight if (limit < pages.length) {
)} setLimit(prev => prev + 1);
> setStart(prev => prev + 1);
<ArrowForwardIosIcon }
className={styles.idxBtnIcon} }}
/> className={classnames(
</button> 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> </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',