@vertisanpro/flowbite-react/lib/src/components/Datepicker/Views/Years.js

Non-Official React components built for Flowbite and Tailwind CSS

'use client';
import { twMerge } from '@vertisanpro/tailwind-merge';
import React from 'react';
import { mergeDeep } from '../../../helpers/merge-deep';
import { useDatePickerContext } from '../DatepickerContext';
import { Views, isDateEqual, isDateInRange, startOfYearPeriod } from '../helpers';
export const DatepickerViewsYears = ({ theme: customTheme = {} }) => {
    const { theme: rootTheme, selectedDate, minDate, maxDate, viewDate, setViewDate, setView } = useDatePickerContext();
    const theme = mergeDeep(rootTheme.views.years, customTheme);
    return (React.createElement("div", { className: theme.items.base }, [...Array(12)].map((_year, index) => {
        const first = startOfYearPeriod(viewDate, 10);
        const year = first - 1 + index * 1;
        const newDate = new Date(viewDate.getTime());
        newDate.setFullYear(year);
        const isSelected = isDateEqual(selectedDate, newDate);
        const isDisabled = !isDateInRange(newDate, minDate, maxDate);
        return (React.createElement("button", { disabled: isDisabled, key: index, type: "button", className: twMerge(theme.items.item.base, isSelected && theme.items.item.selected, isDisabled && theme.items.item.disabled), onClick: () => {
                if (isDisabled)
                    return;
                setViewDate(newDate);
                setView(Views.Months);
            } }, year));
    })));
};