Updated the pagination #196
Conversation
| @@ -28,6 +28,7 @@ | |||
| font-weight: bold; | |||
| } | |||
|
|
|||
|
|
|||
| @@ -44,7 +44,10 @@ const Pagination = (props) => { | |||
| } | |||
| }} | |||
| > | |||
| <EOS_KEYBOARD_ARROW_LEFT className='eos-icons eos-18' /> | |||
| <EOS_KEYBOARD_ARROW_LEFT | |||
| color={`${currNumber <= 1 ? '#bbb' : ''}`} | |||
There was a problem hiding this comment.
I don't like this solution. It is only changing the icon color, but the element will remain in the DOM. We need to skip the element injection in the DOM altogether
Greetings @cyntss, the main issue is the icon visibility actually. The whole injection has already skipped the DOM altogether. There is the main span class that has the condition for hiding the 'prev' and 'next' buttons when pagination is not needed but it doesn't change the icon's color because EOS icons have their several own props which color prop is one of them. I just changed the icon visibility color which matches the text with the help of the 'color' prop when pagination is not required. It works perfectly fine in the browser. You can see this hosted link http://localhost:3000/. Kindly review it. |
Issue Number
fixes #195
Describe the changes you've made
I had made pagination arrows disable/hidden along with their text ('prev' and 'next') when the pagination is not needed.
Describe if there is any unusual behavior (Any Warning) of your code(Write
NAif there isn't)N/A
Checklist
Provide a Deployed link of route/page that needs to review
Preview: Deploy preview link here with the appropriate route
http://localhost:3000/