Browse Source

Improve table nav buttons clicking and listing

upstream-develop
poeti8 1 year ago
parent
commit
ba13b6c0be
2 changed files with 13 additions and 11 deletions
  1. +6
    -6
      client/components/Table/TableNav.js
  2. +7
    -5
      client/components/Table/TableOptions.js

+ 6
- 6
client/components/Table/TableNav.js View File

@ -16,16 +16,16 @@ const Nav = styled.button`
box-shadow: 0 0px 10px rgba(100, 100, 100, 0.1);
transition: all 0.2s ease-out;
${({ active }) =>
active &&
${({ disabled }) =>
!disabled &&
css`
background-color: white;
cursor: pointer;
`};
:hover {
${({ active }) =>
active &&
${({ disabled }) =>
!disabled &&
css`
transform: translateY(-2px);
box-shadow: 0 5px 25px rgba(50, 50, 50, 0.1);
@ -49,10 +49,10 @@ const Icon = styled.img`
const TableNav = ({ handleNav, next, prev }) => (
<Wrapper>
<Nav active={prev} data-active={prev} data-type="prev" onClick={handleNav}>
<Nav disabled={!prev} onClick={handleNav(-1)}>
<Icon src="/images/nav-left.svg" />
</Nav>
<Nav active={next} data-active={next} data-type="next" onClick={handleNav}>
<Nav disabled={!next} onClick={handleNav(1)}>
<Icon src="/images/nav-right.svg" />
</Nav>
</Wrapper>


+ 7
- 5
client/components/Table/TableOptions.js View File

@ -124,11 +124,13 @@ class TableOptions extends Component {
this.props.getUrlsList({ count });
}
handleNav(e) {
const { active, type } = e.target.dataset;
if (active === 'false') return null;
const number = type === 'next' ? 1 : -1;
return this.props.getUrlsList({ page: this.props.url.page + number });
handleNav(num) {
return (e) => {
const { active } = e.target.dataset;
if (active === 'false') return null;
console.log({ page: this.props.url.page, num });
return this.props.getUrlsList({ page: this.props.url.page + num });
}
}
render() {


Loading…
Cancel
Save