@i-novus/ui-core
Version:
Базовые UI компоненты
70 lines (69 loc) • 3.4 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useMemo } from 'react';
import dayjs from 'dayjs';
import { Button } from '../../../general/Button';
import { ExpandLeftIcon, ExpandRightIcon } from '../../../core';
import { MonthSelect } from './components/MonthSelect';
import { YearSelect } from './components/YearSelect';
const MONTH_SELECT_OPTIONS = [
'Январь',
'Февраль',
'Март',
'Апрель',
'Май',
'Июнь',
'Июль',
'Август',
'Сентябрь',
'Октябрь',
'Ноябрь',
'Декабрь',
];
const getMonthSelectOptions = () => MONTH_SELECT_OPTIONS;
const getYearSelectOptions = (minYear, maxYear) => {
const yearsList = [];
for (let year = minYear; year <= maxYear;) {
yearsList.push(String(year));
year += 1;
}
return yearsList;
};
export const MonthViewNavigation = ({ prefix, initialDate, onActiveStartDateChange, minYear, maxYear, }) => {
const onClickPrevious = useCallback(() => {
const nextActiveStartDate = dayjs(initialDate).subtract(1, 'month').toDate();
onActiveStartDateChange({
action: 'prev',
activeStartDate: nextActiveStartDate,
});
}, [initialDate, onActiveStartDateChange]);
const onClickNext = useCallback(() => {
const nextActiveStartDate = dayjs(initialDate).add(1, 'month').toDate();
onActiveStartDateChange({
action: 'next',
activeStartDate: nextActiveStartDate,
});
}, [initialDate, onActiveStartDateChange]);
const onSelectMonth = useCallback((monthIdx) => {
const nextActiveStartDate = dayjs(initialDate).month(monthIdx).toDate();
onActiveStartDateChange({
action: 'next',
activeStartDate: nextActiveStartDate,
});
}, [initialDate, onActiveStartDateChange]);
const onSelectYear = useCallback((year) => {
const nextActiveStartDate = dayjs(initialDate).year(year).toDate();
onActiveStartDateChange({
action: 'next',
activeStartDate: nextActiveStartDate,
});
}, [initialDate, onActiveStartDateChange]);
const initialMonth = useMemo(() => {
const monthIndex = dayjs(initialDate).get('month');
return MONTH_SELECT_OPTIONS[monthIndex] || '';
}, [initialDate]);
const initialYear = useMemo(() => {
return dayjs(initialDate).format('YYYY');
}, [initialDate]);
return (_jsxs("div", { className: `${prefix}-calendar__navigation`, children: [_jsxs("div", { className: `${prefix}-calendar__date-parts-selection`, children: [_jsx(MonthSelect, { prefix: prefix, initialValue: initialMonth, options: getMonthSelectOptions(), onSelectMonth: onSelectMonth }), _jsx(YearSelect, { prefix: prefix, initialValue: initialYear, options: getYearSelectOptions(minYear, maxYear), onSelectYear: onSelectYear })] }), _jsxs("div", { className: `${prefix}-calendar__navigation-buttons`, children: [_jsx(Button, { className: `${prefix}-calendar__navigation-button`, variant: "link", onClick: onClickPrevious, children: _jsx(ExpandLeftIcon, {}) }), _jsx(Button, { className: `${prefix}-calendar__navigation-button`, variant: "link", onClick: onClickNext, children: _jsx(ExpandRightIcon, {}) })] })] }));
};
MonthViewNavigation.displayName = 'MonthViewNavigation';