Improve table nav buttons clicking and listing

This commit is contained in:
poeti8 2019-10-08 19:25:52 +03:30
parent 9c4829c9e8
commit ba13b6c0be
2 changed files with 13 additions and 11 deletions

View File

@ -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>

View File

@ -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() {