Commit 94c89fbe authored by Imane Misrar's avatar Imane Misrar
Browse files

refacto(PaginatedData) : remplace MobileStepper by Pagination component for PreviousExchangesTab

Relates to #191
parent 51a38677
import React from "react"; import React from "react";
import { makeStyles } from "@material-ui/core/styles"; import { makeStyles } from "@material-ui/core/styles";
import MobileStepper from "@material-ui/core/MobileStepper"; import Pagination from "@material-ui/lab/Pagination";
import Button from "@material-ui/core/Button";
import KeyboardArrowLeft from "@material-ui/icons/KeyboardArrowLeft";
import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
...@@ -12,7 +9,8 @@ const useStyles = makeStyles((theme) => ({ ...@@ -12,7 +9,8 @@ const useStyles = makeStyles((theme) => ({
margin: "0 auto", margin: "0 auto",
}, },
stepperContainer: { stepperContainer: {
width: "100%", margin: "0 auto",
width: "max-content",
}, },
progress: { progress: {
[theme.breakpoints.up("sm")]: { [theme.breakpoints.up("sm")]: {
...@@ -38,9 +36,7 @@ function PaginatedData(props) { ...@@ -38,9 +36,7 @@ function PaginatedData(props) {
EmptyMessageComponent, EmptyMessageComponent,
} = props; } = props;
const { const {
page: activeStep, page,
last,
first,
pages_count: nbOfPages, pages_count: nbOfPages,
content, content,
number_elements: totalElements, number_elements: totalElements,
...@@ -50,39 +46,23 @@ function PaginatedData(props) { ...@@ -50,39 +46,23 @@ function PaginatedData(props) {
return EmptyMessageComponent; return EmptyMessageComponent;
} }
const handleChange = (event, value) => {
goToPage(value);
};
function renderStepper() { function renderStepper() {
if (nbOfPages === 1) { if (nbOfPages === 1) {
return <></>; return <></>;
} }
return ( return (
<div className={classes.stepperContainer}> <div className={classes.stepperContainer}>
<MobileStepper <Pagination
variant="progress" count={nbOfPages}
steps={nbOfPages} page={page}
position="static" onChange={handleChange}
activeStep={activeStep - 1} showFirstButton
className={classes.root} showLastButton
classes={{ progress: classes.progress }} color="secondary"
backButton={
<Button
size="small"
onClick={() => goToPage(activeStep - 1)}
disabled={first}
>
<KeyboardArrowLeft />
Précédent
</Button>
}
nextButton={
<Button
size="small"
onClick={() => goToPage(activeStep + 1)}
disabled={last}
>
Suivant
<KeyboardArrowRight />
</Button>
}
/> />
</div> </div>
); );
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment