react-advance-jalaali-datepicker2/src/Partials/Years.js

Jalaali React Date Picker developed with love by Alireza Kasaaian

import React from "react";
import YearSpan from "./YearSpan";

const mapObj = {
    1: "۱",
    2: "۲",
    3: "۳",
    4: "۴",
    5: "۵",
    6: "۶",
    7: "۷",
    8: "۸",
    9: "۹",
    0: "۰"
};

class Years extends React.Component {
    static bYear;

    constructor(props) {
        super(props);
        this.yearChanged = this.yearChanged.bind(this);
        this.state = {
            currentYear: this.props.year,
            navYear: this.props.year,
            error: "",
            yearPickerView: false,
            startDate: -Infinity,
            endDate: Infinity,
        };
    }

    componentWillReceiveProps(nextprops) {
        this.setState({year: nextprops.year});
    }

    renderYearRange = (year) => {
        return year + '-' + (year + 9);
    };

    yearChanged(year) {
        //this.setState({currentYear: year});
        let {changeEvent} = this.props;
        /*this.setState({currentYear: year.value});
        this.setState({error: ""});*/
        if (!!changeEvent) changeEvent(parseInt(year));
    }

    navigateYear = (year) => {
        this.setState({navYear: year});
    };

    renderYearPickerHeader(year) {
        return (
            <thead>
            <tr>
                <th className="next" onClick={() => {
                    this.navigateYear(year + 10)
                }}>
                    <i className="fas fa-angle-right"> </i>
                </th>
                <th colSpan="5" className="switch">
                    {this.renderYearRange(year)}
                </th>
                <th className="prev" onClick={() => {
                    this.navigateYear(year - 10)
                }}>
                    <i className="fas fa-angle-left"> </i>
                </th>
            </tr>
            </thead>
        );
    }

    renderYearPickerContent(year) {
        return (
            <tbody>
            <tr>
                <td colSpan="7">
                    {this.renderYears(year)}
                </td>
            </tr>
            </tbody>
        );
    }

    renderYearPickerFooter() {
        return (
            <tfoot>
            <tr>
                <td colSpan="7" className="today"></td>
            </tr>
            </tfoot>
        );
    }

    renderYearPanel() {
        let {navYear} = this.state;
        let year;
        year = parseInt(navYear / 10, 10) * 10;
        /*let {year} = this.state;
        let result = [];
        for (let i = begin; months.length >= i; i++) {
            if (selectedMonth == i)
                result.push(
                    <div key={i} className="month-items selected">
                        <p>{months[i - 1]}</p>
                    </div>
                );
            else
                result.push(
                    <div
                        key={i}
                        className="month-items"
                        onClick={e => this.monthClicked(i, e)}
                    >
                        <p>{months[i - 1]}</p>
                    </div>
                );
        }
        return result;*/
        return (
            <div className="datepicker-years">
                <table className="table-condensed">
                    {this.renderYearPickerHeader(year)}
                    {this.renderYearPickerContent(year)}
                    {this.renderYearPickerFooter()}
                </table>
            </div>
        )
    }

    yearPickerToggle = () => {
        const {yearPickerView} = this.state;
        this.setState({yearPickerView: !yearPickerView});
    };

    yearSelected = (year, prop) => {
        if (prop.includes('D')) return;
        if (prop.includes('O') || prop.includes('N')) {
            this.setState({navYear: year});
        }
        this.yearChanged(year);
    };

    renderYears(year) {
        const {startDate, endDate} = this.state;
        const {currentYear} = this.state;
        const startYear = startDate !== -Infinity ? startDate.getUTCFullYear() : -Infinity;
        const endYear = endDate !== Infinity ? endDate.getUTCFullYear() : Infinity;
        year -= 1;
        let html = [];
        let
            isOld = false,
            isNew = false,
            active = false,
            disabled = false;
        for (let i = -1; i < 11; i++) {
            isOld = false;
            isNew = false;
            active = false;
            disabled = false;
            if (i === -1)
                isOld = true;
            if (i === 10)
                isNew = true;
            if (currentYear === year)
                active = true;
            if (year < startYear || year > endYear)
                disabled = true;
            let prop = (isOld ? 'O' : '') + (isNew ? 'N' : '') + (active ? 'A' : '') + (disabled ? 'D' : '');
            html.push(
                <YearSpan
                    year={year}
                    prop={prop}
                    onClick={this.yearSelected}
                    className={`year 
                    ${isOld ? 'old' : ''} 
                    ${isNew ? 'new' : ''} 
                    ${active ? 'active' : ''} 
                    ${disabled ? 'disabled' : ''}`}
                >
                    {year}
                </YearSpan>
            );
            year += 1;
        }
        return html;
    }

    render() {
        let {currentYear, yearPickerView} = this.state;
        let yearString = currentYear
            .toString()
            .replace(/1|2|3|4|5|6|7|8|9|0/gi, function (e) {
                return mapObj[e];
            });
        return (
            <div className="print-month">
                <span onClick={this.yearPickerToggle}>{yearString}</span>
                {yearPickerView && (
                    <div className="yearPicker">{this.renderYearPanel()}</div>
                )}
            </div>
        );
    }
}

export default Years;