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

import React, { useState } from 'react';
import styled from 'styled-components';
import ISVGIcon from '../Icon/SVGIcon';

const SVGIcon = styled(ISVGIcon)`
    margin: 0;
    transform: translateY(2px);
`;

const PageButtonContainer = styled.div`
    margin: 24px auto;
    display: inline-block;

    width: 100%;
    text-align: center;
`;


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;
        `
        : ''
    }
    
    &:hover {
        background: #f2f2f2;
    }   

    &:active {
        background: #eeefee;
    }
`;

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.';

    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) {
        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;
        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>
                {
                    this.props.viewAllButton ?
                        <PageButton style={{float: 'left', padding: '0 16px'}}>Показать все</PageButton>
                        : null
                }

                {
                    this.props.sideButtons ?
                    <PageButton onClick={() => this.updateValue(value - 1)}>
                        <SVGIcon width='16' height='16' style={{ transform:'rotate(180deg) translateY(-2px)' }} 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 (
                                        <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;
                            }

                        return <PageButton key={i} isCurrent={value == i} onClick={() => this.updateValue(i)}>{i + 1}</PageButton>
                    })
                }

                {
                    this.props.sideButtons ?
                    <PageButton onClick={() => this.updateValue(value + 1)}>
                        <SVGIcon width='16' height='16' src='/images/icons/caret-right.svg' />
                    </PageButton>
                    : null
                }
            </PageButtonContainer>
        );
    }
}

export default Pagination;