@i-novus/ui-core
Version:
Базовые UI компоненты
44 lines (43 loc) • 3.19 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useEffect, useState } from 'react';
import dayjs from 'dayjs';
import classNames from 'classnames';
import { Button } from '../../../general/Button';
import { ExpandLeftIcon, ExpandRightIcon } from '../../../core';
import { useYearNavigation } from './hooks/useYearNavigation';
export const YearViewNavigation = ({ prefix, initialDate, onActiveStartDateChange, minYear, maxYear, }) => {
const [currentYear, setCurrentYear] = useState(dayjs(initialDate).format('YYYY'));
const onClickPreviousYear = useCallback(() => {
const nextActiveStartDate = dayjs(initialDate).subtract(1, 'year').toDate();
onActiveStartDateChange({
action: 'prev',
activeStartDate: nextActiveStartDate,
});
}, [initialDate, onActiveStartDateChange]);
const onClickNextYear = useCallback(() => {
const nextActiveStartDate = dayjs(initialDate).add(1, 'year').toDate();
onActiveStartDateChange({
action: 'next',
activeStartDate: nextActiveStartDate,
});
}, [initialDate, onActiveStartDateChange]);
const onClickYear = useCallback((event) => {
// @ts-ignore
const selectedYear = event.target.id;
if (selectedYear === currentYear) {
return;
}
const nextActiveStartDate = dayjs(initialDate).set('year', selectedYear).toDate();
onActiveStartDateChange({
action: 'next',
activeStartDate: nextActiveStartDate,
});
}, [currentYear, initialDate, onActiveStartDateChange]);
const { isPrevButtonDisabled, isNextButtonDisabled, slideOffset, years, } = useYearNavigation(minYear, maxYear, Number(currentYear));
const calendarPrefix = `${prefix}-calendar`;
useEffect(() => {
setCurrentYear(dayjs(initialDate).format('YYYY'));
}, [initialDate]);
return (_jsxs("div", { className: classNames(`${calendarPrefix}__navigation`, `${calendarPrefix}__navigation_year-view`), children: [_jsx(Button, { className: `${calendarPrefix}__navigation-button`, variant: "link", onClick: onClickPreviousYear, disabled: isPrevButtonDisabled, style: { opacity: `${isPrevButtonDisabled ? 0.5 : 1}` }, children: _jsx(ExpandLeftIcon, {}) }), _jsx("div", { className: `${calendarPrefix}__year-buttons-wrapper`, children: _jsx("div", { className: `${calendarPrefix}__year-buttons`, style: { transform: `translateX(${slideOffset})` }, children: years.map(year => (_jsx(Button, { tabIndex: -1, id: String(year), className: classNames(`${calendarPrefix}__year-button`, { [`${calendarPrefix}__year-button_active`]: year === Number(currentYear) }), variant: year === Number(currentYear) ? 'primary' : 'link-cancel', onClick: onClickYear, disabled: (year < minYear) || (year > maxYear), children: year }, String(year)))) }) }), _jsx(Button, { className: `${prefix}-calendar__navigation-button`, variant: "link", onClick: onClickNextYear, disabled: isNextButtonDisabled, style: { opacity: `${isNextButtonDisabled ? 0.5 : 1}` }, children: _jsx(ExpandRightIcon, {}) })] }));
};
YearViewNavigation.displayName = 'YearViewNavigation';