Improve table nav buttons clicking and listing
This commit is contained in:
parent
9c4829c9e8
commit
ba13b6c0be
|
@ -16,16 +16,16 @@ const Nav = styled.button`
|
||||||
box-shadow: 0 0px 10px rgba(100, 100, 100, 0.1);
|
box-shadow: 0 0px 10px rgba(100, 100, 100, 0.1);
|
||||||
transition: all 0.2s ease-out;
|
transition: all 0.2s ease-out;
|
||||||
|
|
||||||
${({ active }) =>
|
${({ disabled }) =>
|
||||||
active &&
|
!disabled &&
|
||||||
css`
|
css`
|
||||||
background-color: white;
|
background-color: white;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
`};
|
`};
|
||||||
|
|
||||||
:hover {
|
:hover {
|
||||||
${({ active }) =>
|
${({ disabled }) =>
|
||||||
active &&
|
!disabled &&
|
||||||
css`
|
css`
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
box-shadow: 0 5px 25px rgba(50, 50, 50, 0.1);
|
box-shadow: 0 5px 25px rgba(50, 50, 50, 0.1);
|
||||||
|
@ -49,10 +49,10 @@ const Icon = styled.img`
|
||||||
|
|
||||||
const TableNav = ({ handleNav, next, prev }) => (
|
const TableNav = ({ handleNav, next, prev }) => (
|
||||||
<Wrapper>
|
<Wrapper>
|
||||||
<Nav active={prev} data-active={prev} data-type="prev" onClick={handleNav}>
|
<Nav disabled={!prev} onClick={handleNav(-1)}>
|
||||||
<Icon src="/images/nav-left.svg" />
|
<Icon src="/images/nav-left.svg" />
|
||||||
</Nav>
|
</Nav>
|
||||||
<Nav active={next} data-active={next} data-type="next" onClick={handleNav}>
|
<Nav disabled={!next} onClick={handleNav(1)}>
|
||||||
<Icon src="/images/nav-right.svg" />
|
<Icon src="/images/nav-right.svg" />
|
||||||
</Nav>
|
</Nav>
|
||||||
</Wrapper>
|
</Wrapper>
|
||||||
|
|
|
@ -124,11 +124,13 @@ class TableOptions extends Component {
|
||||||
this.props.getUrlsList({ count });
|
this.props.getUrlsList({ count });
|
||||||
}
|
}
|
||||||
|
|
||||||
handleNav(e) {
|
handleNav(num) {
|
||||||
const { active, type } = e.target.dataset;
|
return (e) => {
|
||||||
if (active === 'false') return null;
|
const { active } = e.target.dataset;
|
||||||
const number = type === 'next' ? 1 : -1;
|
if (active === 'false') return null;
|
||||||
return this.props.getUrlsList({ page: this.props.url.page + number });
|
console.log({ page: this.props.url.page, num });
|
||||||
|
return this.props.getUrlsList({ page: this.props.url.page + num });
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
|
Loading…
Reference in New Issue