@@ -30,56 +30,60 @@ const Pagination = (props) => {
3030 }
3131 } , [ storyCount ] )
3232
33- return (
34- < div className = 'pagination' >
35- < span
36- className = { `btn btn-pagination ${
37- currNumber <= 1 ? 'btn-pagination-disabled' : ''
38- } `}
39- onClick = { ( ) => {
40- if ( pages . find ( ( page ) => page === currNumber - 1 ) ) {
41- setCurrNumber ( ( currNumber ) => currNumber - 1 )
42- getPage ( currNumber - 1 )
43- }
44- } }
45- >
46- < EOS_KEYBOARD_ARROW_LEFT className = 'eos-icons eos-18' />
47- { `Prev` }
48- </ span >
49- < div className = 'btn btn-pagination' >
50- { pages
51- ? pages . map ( ( ele , key ) => {
52- return (
53- < span
54- className = { `number ${ currNumber === ele ? 'selected' : '' } ` }
55- onClick = { ( ) => {
56- setCurrNumber ( ele )
57- getPage ( ele )
58- } }
59- key = { key }
60- >
61- { ele }
62- </ span >
63- )
64- } )
65- : '' }
33+ if ( storyCount > 5 ) {
34+ return (
35+ < div className = 'pagination' >
36+ < span
37+ className = { `btn btn-pagination ${
38+ currNumber <= 1 ? 'btn-pagination-disabled' : ''
39+ } `}
40+ onClick = { ( ) => {
41+ if ( pages . find ( ( page ) => page === currNumber - 1 ) ) {
42+ setCurrNumber ( ( currNumber ) => currNumber - 1 )
43+ getPage ( currNumber - 1 )
44+ }
45+ } }
46+ >
47+ < EOS_KEYBOARD_ARROW_LEFT className = 'eos-icons eos-18' />
48+ { `Prev` }
49+ </ span >
50+ < div className = 'btn btn-pagination' >
51+ { pages
52+ ? pages . map ( ( ele , key ) => {
53+ return (
54+ < span
55+ className = { `number ${ currNumber === ele ? 'selected' : '' } ` }
56+ onClick = { ( ) => {
57+ setCurrNumber ( ele )
58+ getPage ( ele )
59+ } }
60+ key = { key }
61+ >
62+ { ele }
63+ </ span >
64+ )
65+ } )
66+ : '' }
67+ </ div >
68+ < span
69+ className = { `btn btn-pagination ${
70+ currNumber >= pages ?. length ? 'btn-pagination-disabled' : ''
71+ } `}
72+ onClick = { ( ) => {
73+ if ( pages . find ( ( page ) => page === currNumber + 1 ) ) {
74+ setCurrNumber ( ( currNumber ) => currNumber + 1 )
75+ getPage ( currNumber + 1 )
76+ }
77+ } }
78+ >
79+ { `Next` }
80+ < EOS_KEYBOARD_ARROW_RIGHT className = 'eos-icons eos-18' />
81+ </ span >
6682 </ div >
67- < span
68- className = { `btn btn-pagination ${
69- currNumber >= pages ?. length ? 'btn-pagination-disabled' : ''
70- } `}
71- onClick = { ( ) => {
72- if ( pages . find ( ( page ) => page === currNumber + 1 ) ) {
73- setCurrNumber ( ( currNumber ) => currNumber + 1 )
74- getPage ( currNumber + 1 )
75- }
76- } }
77- >
78- { `Next` }
79- < EOS_KEYBOARD_ARROW_RIGHT className = 'eos-icons eos-18' />
80- </ span >
81- </ div >
82- )
83+ )
84+ } else {
85+ return null
86+ }
8387}
8488
8589export default Pagination
0 commit comments