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
Genesys PGR
Embedded Genesys UI
Commits
2bfde444
Commit
2bfde444
authored
Nov 02, 2020
by
Oleksii Savran
Browse files
Merge branch '5-pagination' into 'master'
Resolve "Pagination" Closes
#5
See merge request
!4
parents
f17a9a59
76400a6b
Changes
1
Hide whitespace changes
Inline
Side-by-side
src/ui/Pagination.tsx
View file @
2bfde444
...
...
@@ -25,6 +25,7 @@ class Pagination extends React.Component<IPagination> {
}
private
toPage
=
(
e
:
React
.
MouseEvent
)
=>
{
e
.
preventDefault
();
const
{
loadData
,
paged
}
=
this
.
props
;
const
page
=
+
(
e
.
currentTarget
as
HTMLElement
).
dataset
.
page
;
...
...
@@ -80,35 +81,40 @@ class Pagination extends React.Component<IPagination> {
private
renderPagination
=
()
=>
{
const
{
paged
,
t
}
=
this
.
props
;
const
currentPageStyle
=
{
fontWeight
:
500
,
border
:
0
};
return
(
<
div
style
=
{
{
display
:
'
flex
'
}
}
>
<
button
style
=
{
{
border
:
0
}
}
onClick
=
{
this
.
toPage
}
data-page
=
{
0
}
disabled
=
{
paged
.
number
===
0
}
>
{
`<<
${
t
(
'
pag.first
'
)}
`
}
</
button
>
<
button
style
=
{
{
border
:
0
}
}
onClick
=
{
this
.
toPage
}
data-page
=
{
paged
.
number
-
1
}
disabled
=
{
paged
.
number
===
0
}
>
{
`<
${
t
(
'
pag.prev
'
)}
`
}
</
button
>
{
this
.
getPageNumbers
().
map
((
page
,
i
)
=>
(
<
button
key
=
{
`page-
${
page
}
-
${
i
}
`
}
style
=
{
paged
.
number
===
page
-
1
?
currentPageStyle
:
{
border
:
0
}
}
disabled
=
{
paged
.
number
===
page
-
1
}
onClick
=
{
this
.
toPage
}
data-page
=
{
page
-
1
}
>
{
page
}
</
button
>
))
}
<
button
style
=
{
{
border
:
0
}
}
onClick
=
{
this
.
toPage
}
data-page
=
{
paged
.
number
+
1
}
disabled
=
{
paged
.
last
}
>
{
`
${
t
(
'
pag.next
'
)}
>`
}
</
button
>
<
button
style
=
{
{
border
:
0
}
}
onClick
=
{
this
.
toPage
}
data-page
=
{
paged
.
totalPages
-
1
}
disabled
=
{
paged
.
last
}
>
{
`
${
t
(
'
pag.last
'
)}
>>`
}
</
button
>
</
div
>
);
<
nav
aria-label
=
"Page navigation"
>
<
ul
className
=
"pagination"
>
<
li
className
=
{
`page-item
${
paged
.
number
===
0
?
"
disabled
"
:
""
}
`
}
>
<
a
className
=
"page-link"
onClick
=
{
this
.
toPage
}
data-page
=
{
0
}
href
=
"#"
aria-label
=
{
t
(
'
pag.first
'
)
}
>
<
span
aria-hidden
=
"true"
>
«
{
t
(
'
pag.first
'
)
}
</
span
>
</
a
>
</
li
>
<
li
className
=
{
`page-item
${
paged
.
number
===
0
?
"
disabled
"
:
""
}
`
}
>
<
a
onClick
=
{
this
.
toPage
}
data-page
=
{
paged
.
number
-
1
}
href
=
"#"
className
=
"page-link"
>
‹
{
t
(
'
pag.prev
'
)
}
</
a
>
</
li
>
{
this
.
getPageNumbers
().
map
((
page
,
i
)
=>
(
<
li
key
=
{
`page-
${
page
}
-
${
i
}
`
}
data-page
=
{
page
-
1
}
onClick
=
{
this
.
toPage
}
aria-current
=
"page"
className
=
{
`page-item
${
paged
.
number
===
page
-
1
?
"
active
"
:
""
}
`
}
>
{
paged
.
number
===
page
-
1
?
<
span
tabIndex
=
{
-
1
}
className
=
"page-link"
>
{
page
}
<
span
className
=
"sr-only"
>
(current)
</
span
></
span
>
:
<
a
className
=
"page-link"
href
=
"#"
>
{
page
}
</
a
>
}
</
li
>
))
}
<
li
className
=
{
`page-item
${
paged
.
last
?
"
disabled
"
:
""
}
`
}
>
<
a
onClick
=
{
this
.
toPage
}
data-page
=
{
paged
.
number
+
1
}
href
=
"#"
className
=
"page-link"
>
{
t
(
'
pag.next
'
)
}
›
</
a
>
</
li
>
<
li
className
=
{
`page-item
${
paged
.
last
?
"
disabled
"
:
""
}
`
}
>
<
a
className
=
"page-link"
onClick
=
{
this
.
toPage
}
data-page
=
{
paged
.
totalPages
-
1
}
href
=
"#"
aria-label
=
"{t('pag.last')}"
>
<
span
aria-hidden
=
"true"
>
{
t
(
'
pag.last
'
)
}
»
</
span
>
</
a
>
</
li
>
</
ul
>
</
nav
>
);
}
public
render
()
{
...
...
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