add fast buttons

pairent_frontend_react/public/images/icons/caret-double-blue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="royalblue" viewBox="0 0 16 16"><path fill="royalblue" fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/><path fill="royalblue" fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/></svg>

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

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>
+  <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/>
+</svg>

pairent_frontend_react/public/images/icons/dots.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots" viewBox="0 0 16 16">
+  <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
+</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} onChange={changePage} onViewAll={viewAll} viewAllButton={true} pages={totalPages} />
+            <Pagination value={page} onChange={changePage} onViewAll={viewAll} viewAllButton={true} pages={totalPages} />
         </>
     );
 };

pairent_frontend_react/src/components/UI/Pagination/index.jsx

@@ -1,6 +1,11 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import SVGIcon from '../Icon/SVGIcon';
+import ISVGIcon from '../Icon/SVGIcon';
+
+const SVGIcon = styled(ISVGIcon)`
+    margin: 0;
+    transform: translateY(2px);
+`;
 
 const PageButtonContainer = styled.div`
     margin: 24px auto;
@@ -39,6 +44,20 @@ const PageButton = styled.button`
     }
 `;
 
+const FastButton = styled(PageButton)`
+    background: url(/images/icons/dots.svg) no-repeat;
+    background-position: center;
+    background-size: 20px;
+    transform: translateY(-5px);
+
+    &:hover, &:active {
+        background: url(/images/icons/caret-double-blue.svg) no-repeat;
+        background-position: center;
+        background-size: 14px;
+        transform: translateY(-5px);    
+    }
+`;
+
 const range = (start, stop) => {
     if (stop < start) throw 'Stop value can\'t be smaller than start value.';
 
@@ -88,6 +107,10 @@ class Pagination extends React.Component {
     }
 
     updateValue(new_val) {
+        if (new_val < 0) new_val = 0;
+        if (new_val > this.props.pages)
+            new_val = this.props.pages;
+
         this.props.onChange(new_val);
         if (this.value_controlled)
             return;
@@ -109,8 +132,8 @@ class Pagination extends React.Component {
 
                 {
                     this.props.sideButtons ?
-                    <PageButton>
+                    <PageButton onClick={() => this.updateValue(value - 1)}>
-                        <SVGIcon style={{margin:0, transform:'rotate(180deg) translateY(-2px)'}} width='16' height='16' src='/images/icons/caret-right.svg' />
+                        <SVGIcon width='16' height='16' style={{ transform:'rotate(180deg) translateY(-2px)' }} src='/images/icons/caret-right.svg' />
                     </PageButton>
                     : null
                 }
@@ -120,8 +143,20 @@ class Pagination extends React.Component {
 
                         if ( !( i == 0 | i == pages - 1) )
                             if ( i < value - 2 | i > value + 2 ) {
-                                if ( i == value + 3 | i == value - 3 ) {
+                                if ( i == value - 3 | i == value + 3 ) {
-                                    return <PageButton>...</PageButton>
+                                    return (
+                                        <FastButton
+                                            style={{transform: i == value - 3 ? 'rotate(180deg) translateY(5px)' : ''}}
+                                            onClick={() => {
+                                                if (i == value - 3) {
+                                                    this.updateValue(value - 3);
+                                                } else
+                                                    this.updateValue(value + 3);
+                                            }}
+                                        >
+                                            
+                                        </FastButton>
+                                    );
                                 }
                                 return null;
                             }
@@ -132,8 +167,8 @@ class Pagination extends React.Component {
 
                 {
                     this.props.sideButtons ?
-                    <PageButton>
+                    <PageButton onClick={() => this.updateValue(value + 1)}>
-                        <SVGIcon style={{margin:0, transform: 'translateY(2px)'}} width='16' height='16' src='/images/icons/caret-right.svg' />
+                        <SVGIcon width='16' height='16' src='/images/icons/caret-right.svg' />
                     </PageButton>
                     : null
                 }