Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Rex Dri
Rex Dri
Commits
94c89fbe
Commit
94c89fbe
authored
Jun 10, 2020
by
Imane Misrar
Browse files
refacto(PaginatedData) : remplace MobileStepper by Pagination component for PreviousExchangesTab
Relates to
#191
parent
51a38677
Changes
1
Hide whitespace changes
Inline
Side-by-side
frontend/src/components/common/PaginatedData.jsx
View file @
94c89fbe
import
React
from
"
react
"
;
import
{
makeStyles
}
from
"
@material-ui/core/styles
"
;
import
MobileStepper
from
"
@material-ui/core/MobileStepper
"
;
import
Button
from
"
@material-ui/core/Button
"
;
import
KeyboardArrowLeft
from
"
@material-ui/icons/KeyboardArrowLeft
"
;
import
KeyboardArrowRight
from
"
@material-ui/icons/KeyboardArrowRight
"
;
import
Pagination
from
"
@material-ui/lab/Pagination
"
;
import
PropTypes
from
"
prop-types
"
;
const
useStyles
=
makeStyles
((
theme
)
=>
({
...
...
@@ -12,7 +9,8 @@ const useStyles = makeStyles((theme) => ({
margin
:
"
0 auto
"
,
},
stepperContainer
:
{
width
:
"
100%
"
,
margin
:
"
0 auto
"
,
width
:
"
max-content
"
,
},
progress
:
{
[
theme
.
breakpoints
.
up
(
"
sm
"
)]:
{
...
...
@@ -38,9 +36,7 @@ function PaginatedData(props) {
EmptyMessageComponent
,
}
=
props
;
const
{
page
:
activeStep
,
last
,
first
,
page
,
pages_count
:
nbOfPages
,
content
,
number_elements
:
totalElements
,
...
...
@@ -50,39 +46,23 @@ function PaginatedData(props) {
return
EmptyMessageComponent
;
}
const
handleChange
=
(
event
,
value
)
=>
{
goToPage
(
value
);
};
function
renderStepper
()
{
if
(
nbOfPages
===
1
)
{
return
<></>;
}
return
(
<
div
className
=
{
classes
.
stepperContainer
}
>
<
MobileStepper
variant
=
"progress"
steps
=
{
nbOfPages
}
position
=
"static"
activeStep
=
{
activeStep
-
1
}
className
=
{
classes
.
root
}
classes
=
{
{
progress
:
classes
.
progress
}
}
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
>
}
<
Pagination
count
=
{
nbOfPages
}
page
=
{
page
}
onChange
=
{
handleChange
}
showFirstButton
showLastButton
color
=
"secondary"
/>
</
div
>
);
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment