diff --git a/pairent_frontend_react/public/images/icons/caret-right.svg b/pairent_frontend_react/public/images/icons/caret-right.svg new file mode 100644 index 0000000..451686e --- /dev/null +++ b/pairent_frontend_react/public/images/icons/caret-right.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/pairent_frontend_react/src/components/FavoritesApartamentsList/index.jsx b/pairent_frontend_react/src/components/FavoritesApartamentsList/index.jsx index 79c3a4c..486f18c 100644 --- a/pairent_frontend_react/src/components/FavoritesApartamentsList/index.jsx +++ b/pairent_frontend_react/src/components/FavoritesApartamentsList/index.jsx @@ -52,7 +52,7 @@ const FavoritesApartamentsList = () => {

Идет загрузка...

} - + ); }; diff --git a/pairent_frontend_react/src/components/UI/Icon/SVGIcon.jsx b/pairent_frontend_react/src/components/UI/Icon/SVGIcon.jsx index 9cd8d56..ffa5a75 100644 --- a/pairent_frontend_react/src/components/UI/Icon/SVGIcon.jsx +++ b/pairent_frontend_react/src/components/UI/Icon/SVGIcon.jsx @@ -1,6 +1,6 @@ import styled from 'styled-components'; -export default styled.div` +export default styled.svg` width: ${props => props.width ? props.width : 24}px; height: ${props => props.height ? props.height : 24}px; background: url(${props => props.src}); @@ -8,6 +8,5 @@ export default styled.div` background-position: center; background-size: contain; margin: 0 8px; - display: inline-block; - transform: translateY(2px) + display: inline-block `; \ No newline at end of file diff --git a/pairent_frontend_react/src/components/UI/Pagination/index.jsx b/pairent_frontend_react/src/components/UI/Pagination/index.jsx index 9c8f7c4..bd094b4 100644 --- a/pairent_frontend_react/src/components/UI/Pagination/index.jsx +++ b/pairent_frontend_react/src/components/UI/Pagination/index.jsx @@ -1,50 +1,145 @@ -import React from 'react'; +import React, { useState } from 'react'; import styled from 'styled-components'; - -import {getPagesArray, getPreviousAndNextPage} from "../../../utils/Pages"; +import SVGIcon from '../Icon/SVGIcon'; const PageButtonContainer = styled.div` - margin-top: 24px; + margin: 24px auto; display: inline-block; + + width: 100%; + text-align: center; `; -const Pagination = ({totalPages, page, changePage, onChange, viewAll, showAllEnabled}) => { - let pagesArray = getPagesArray(totalPages); - let [previousPage, nextPage] = getPreviousAndNextPage(totalPages, page); - changePage = onChange ?? changePage; +const PageButton = styled.button` + background: #fefefe; + border-radius: 6px; + min-width: 32px; + height: 32px; + transition: 100ms ease; + margin-right: 10px; + font-size: 11pt; + + ${ + props => props.isCurrent ? + ` + color: royalblue; + font-weight: 600; + border: 1px solid royalblue; + ` + : '' + } - const getPagesShow = () => { - let pagesShow = []; - for (let index = page - 1, len = page + 14 > totalPages ? totalPages : page + 14; index < len; ++index) { - pagesShow.push(pagesArray[index]) - } - return pagesShow; + &:hover { + background: #f2f2f2; + } + + &:active { + background: #eeefee; + } +`; + +const range = (start, stop) => { + if (stop < start) throw 'Stop value can\'t be smaller than start value.'; + + let a = []; + for (let i = start; i != stop; i++) + a.push(i); + return a; +} + +// TODO: Needs some work +class Pagination extends React.Component { + + static defaultProps = { + onChange: () => {}, + disabled: false, + sideButtons: true, + value: 0, + styles: {}, + viewAllButton: false, + onViewAll: () => {} } - return ( - - { - showAllEnabled ? + /** + * @type {{ + * pages: number, + * + * onChange?: (event: number) => void, + * disabled?: boolean, + * sideButtons?: boolean, + * value?: number, + * styles?: React.CSSProperties, + * viewAllButton?: boolean, + * onViewAll?: () => void + * }} + */ + props; + + constructor(props) { + super(props); + + this.state = { + value: props.value + } + + this.value_controlled = props.onChange != undefined && props.value != undefined; + this.updateValue = this.updateValue.bind(this); + } + + updateValue(new_val) { + this.props.onChange(new_val); + if (this.value_controlled) + return; + this.setState({value: new_val}); + } + + render() { + const { pages } = this.props; + let value = this.state.value; + if (this.value_controlled) value = this.props.value; + + return ( + + { + this.props.viewAllButton ? + Показать все : null - } -
- - {getPagesShow().map(p => - - )} - -
- - ); -}; + } + + { + this.props.sideButtons ? + + + + : null + } + + { + range(0, pages).map((el, i) => { + + if ( !( i == 0 | i == pages - 1) ) + if ( i < value - 2 | i > value + 2 ) { + if ( i == value + 3 | i == value - 3 ) { + return ... + } + return null; + } + + return this.updateValue(i)}>{i + 1} + }) + } + + { + this.props.sideButtons ? + + + + : null + } + + ); + } +} export default Pagination; \ No newline at end of file diff --git a/pairent_frontend_react/src/pages/IndexPage/index.jsx b/pairent_frontend_react/src/pages/IndexPage/index.jsx index 8929230..8376aa1 100644 --- a/pairent_frontend_react/src/pages/IndexPage/index.jsx +++ b/pairent_frontend_react/src/pages/IndexPage/index.jsx @@ -409,10 +409,9 @@ export default class IndexPage extends React.Component { } this.setState({ page })} - showAllEnabled={false} + value={page} /> );