rewrite pagination

pairent_frontend_react/public/images/icons/caret-right.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-right" viewBox="0 0 16 16">
+  <path d="M6 12.796V3.204L11.481 8 6 12.796zm.659.753 5.48-4.796a1 1 0 0 0 0-1.506L6.66 2.451C6.011 1.885 5 2.345 5 3.204v9.592a1 1 0 0 0 1.659.753z"/>
+</svg>

pairent_frontend_react/src/components/FavoritesApartamentsList/index.jsx

@@ -52,7 +52,7 @@ const FavoritesApartamentsList = () => {
                 <h1 style={{textAlign: 'center'}}>Идет загрузка...</h1>
             }
             <ApartmentsList list={apartamentsFavorites}/>
-            <Pagination page={page} changePage={changePage} viewAll={viewAll} totalPages={totalPages}/>
+            <Pagination page={page} onChange={changePage} onViewAll={viewAll} viewAllButton={true} pages={totalPages} />
         </>
     );
 };

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;
+    display: inline-block
-    transform: translateY(2px)
 `;

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 SVGIcon from '../Icon/SVGIcon';
-import {getPagesArray, getPreviousAndNextPage} from "../../../utils/Pages";
 
 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;
 
-    const getPagesShow = () => {
+    ${ 
-        let pagesShow = [];
+        props => props.isCurrent ? 
-        for (let index = page - 1, len = page + 14 > totalPages ? totalPages : page + 14; index < len; ++index) {
+        `
-            pagesShow.push(pagesArray[index])
+            color: royalblue;
+            font-weight: 600;
+            border: 1px solid royalblue;
+        `
+        : ''
     }
-        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: () => {}
+    }
+
+    /**
+     * @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 (
             <PageButtonContainer>
                 {
-                showAllEnabled ? <button className="allBtn" onClick={viewAll}>Показать весь список</button>
+                    this.props.viewAllButton ?
+                        <PageButton style={{float: 'left', padding: '0 16px'}}>Показать все</PageButton>
+                        : null
+                }
+
+                {
+                    this.props.sideButtons ?
+                    <PageButton>
+                        <SVGIcon style={{margin:0, transform:'rotate(180deg) translateY(-2px)'}} width='16' height='16' src='/images/icons/caret-right.svg' />
+                    </PageButton>
+                    : 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 <PageButton>...</PageButton>
+                                }
+                                return null;
+                            }
+
+                        return <PageButton key={i} isCurrent={value == i} onClick={() => this.updateValue(i)}>{i + 1}</PageButton>
+                    })
+                }
+
+                {
+                    this.props.sideButtons ?
+                    <PageButton>
+                        <SVGIcon style={{margin:0, transform: 'translateY(2px)'}} width='16' height='16' src='/images/icons/caret-right.svg' />
+                    </PageButton>
                     : null
                 }
-            <div className="choiceBtn">
-                <button onClick={() => changePage(previousPage)} className="btnPrevious">
-                    <svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M0.238707 8.62179L6.83881 15.7424C7.15713 16.0859 7.6732 16.0859 7.99148 15.7424L8.76127 14.9119C9.07904 14.5691 9.07965 14.0134 8.76263 13.6698L3.53193 7.99998L8.76263 2.33019C9.07965 1.98655 9.07904 1.43091 8.76127 1.08808L7.99148 0.257567C7.67316 -0.0858556 7.15709 -0.0858556 6.83881 0.257567L0.238741 7.37821C-0.0795746 7.72159 -0.0795746 8.27837 0.238707 8.62179Z" fill="black"/>
-                    </svg>                        
-                </button>
-                {getPagesShow().map(p => 
-                    <button onClick={() => changePage(p)} key={p} className={page === p ? "pageBtn activePage" : "pageBtn"}>{p}</button>
-                )}
-                <button onClick={() => changePage(nextPage)} className="btnNext">
-                    <svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M8.76129 8.62179L2.16119 15.7424C1.84287 16.0859 1.3268 16.0859 1.00852 15.7424L0.238729 14.9119C-0.0790435 14.5691 -0.0796547 14.0134 0.237371 13.6698L5.46807 7.99998L0.237371 2.33019C-0.0796547 1.98655 -0.0790435 1.43091 0.238729 1.08808L1.00852 0.257567C1.32684 -0.0858556 1.84291 -0.0858556 2.16119 0.257567L8.76126 7.37821C9.07957 7.72159 9.07957 8.27837 8.76129 8.62179Z" fill="black"/>
-                    </svg>                        
-                </button>
-            </div>
             </PageButtonContainer>
         );
-};
+    }
+}
 
 export default Pagination;

pairent_frontend_react/src/pages/IndexPage/index.jsx

@@ -409,10 +409,9 @@ export default class IndexPage extends React.Component {
                 }
 
                 <Pagination 
-                    totalPages={pages}
+                    pages={pages}
-                    page={page}
                     onChange={(page) => this.setState({ page })}
-                    showAllEnabled={false}
+                    value={page}
                     />
             </IndexPageRoot>
         );