PLASMA-4010: проверка на отрицательные года в календаре

packages/plasma-new-hope/src/components/Calendar/Calendar.tokens.ts

@@ -13,6 +13,7 @@ export const classes = {
     hoveredItem: 'item-hovered',
     doubleHeaderDate: 'double-header-date',
     doubleHeaderLastDateWrapper: 'double-header--last-date-wrapper',
+    disabledPrevButton: 'disabled-prev-button',
 };
 
 export const innerTokens = {

packages/plasma-new-hope/src/components/Calendar/store/reducer.ts

@@ -70,14 +70,15 @@ export const reducer = (state: InitialState, action: Action): InitialState => {
         }
         case ActionType.PREVIOUS_YEAR: {
             const { step } = action.payload;
+            const startYear = state.date.year - step <= 0 ? 0 : state.date.year - step;
 
             return {
                 ...state,
-                startYear: state.startYear - step,
+                startYear,
                 date: {
                     day: state.date.day,
                     monthIndex: state.date.monthIndex,
-                    year: state.date.year - step,
+                    year: startYear,
                 },
             };
         }
@@ -96,10 +97,11 @@ export const reducer = (state: InitialState, action: Action): InitialState => {
         }
         case ActionType.PREVIOUS_START_YEAR: {
             const { yearsCount } = action.payload;
+            const startYear = state.startYear - yearsCount < 0 ? 0 : state.startYear - yearsCount;
 
             return {
                 ...state,
-                startYear: state.startYear - yearsCount,
+                startYear,
             };
         }
         case ActionType.NEXT_START_YEAR: {

packages/plasma-new-hope/src/components/Calendar/ui/CalendarHeader/CalendarHeader.styles.ts

@@ -75,6 +75,16 @@ export const StyledArrow = styled(IconButton)`
     ${iconButtonTokens.iconButtonPadding}: var(${tokens.iconButtonPadding});
     ${iconButtonTokens.iconButtonRadius}: var(${tokens.iconButtonRadius});
     ${iconButtonTokens.iconButtonFocusColor}: var(${tokens.iconButtonFocusColor});
+
+    &.${classes.disabledPrevButton} {
+        cursor: not-allowed;
+        opacity: 0.4;
+
+        &:hover,
+        &:active {
+            color: var(${tokens.iconButtonColor});
+        }
+    }
 `;
 
 export const StyledNavigation = styled.div`

packages/plasma-new-hope/src/components/Calendar/ui/CalendarHeader/CalendarHeader.tsx

@@ -1,11 +1,13 @@
-import React, { useCallback, useMemo } from 'react';
+import React from 'react';
+import type { MouseEvent } from 'react';
 
 import { IconDisclosureLeft, IconDisclosureRight } from '../../../_Icon';
 import { CalendarState } from '../../store/types';
 import { getCalendarType, MONTH_NAMES, YEAR_RENDER_COUNT } from '../../utils';
 import type { DateObject } from '../../Calendar.types';
 import { classes } from '../../Calendar.tokens';
 import { sizeMap } from '../../store/reducer';
+import { cx } from '../../../../utils';
 
 import type { CalendarHeaderProps } from './CalendarHeader.types';
 import {
@@ -35,7 +37,7 @@ export const CalendarHeader: React.FC<CalendarHeaderProps> = ({
     onUpdateCalendarState,
     locale,
 }) => {
-    const handleCalendarState = useCallback(() => {
+    const handleCalendarState = () => {
         const newSize: [number, number] = isDouble ? sizeMap.Months.double : sizeMap.Months.single;
 
         if (type === CalendarState.Days) {
@@ -45,77 +47,87 @@ export const CalendarHeader: React.FC<CalendarHeaderProps> = ({
         if (type === CalendarState.Months || type === CalendarState.Quarters) {
             onUpdateCalendarState?.(CalendarState.Years, newSize);
         }
-    }, [type, onUpdateCalendarState]);
-
-    const getHeaderContent = useCallback(
-        (date?: DateObject, secondPart?: boolean) => {
-            if (!date) {
-                return '';
-            }
-
-            if (type === CalendarState.Days) {
-                return (
-                    <>
-                        <StyledHeaderDate>{MONTH_NAMES[locale][date.monthIndex]}</StyledHeaderDate>
-                        <StyledHeaderDate>
-                            {date.year}
-                            <StyledHeaderArrow color="inherit" size={size === 'xs' ? 'xs' : 's'} />
-                        </StyledHeaderDate>
-                    </>
-                );
-            }
-
-            if (type === CalendarState.Months || type === CalendarState.Quarters) {
-                return (
+    };
+
+    const handlePrev = (event: MouseEvent<HTMLDivElement>) => {
+        event.stopPropagation();
+
+        if (startYear <= 0) {
+            return;
+        }
+        onPrev();
+    };
+
+    const handleNext = (event: MouseEvent<HTMLDivElement>) => {
+        event.stopPropagation();
+
+        onNext();
+    };
+
+    const getHeaderContent = (date?: DateObject, secondPart?: boolean) => {
+        if (!date) {
+            return '';
+        }
+
+        if (type === CalendarState.Days) {
+            return (
+                <>
+                    <StyledHeaderDate>{MONTH_NAMES[locale][date.monthIndex]}</StyledHeaderDate>
                     <StyledHeaderDate>
                         {date.year}
                         <StyledHeaderArrow color="inherit" size={size === 'xs' ? 'xs' : 's'} />
                     </StyledHeaderDate>
-                );
-            }
+                </>
+            );
+        }
 
-            if (type === CalendarState.Years) {
-                const yearValue = secondPart ? startYear + 12 : startYear;
+        if (type === CalendarState.Months || type === CalendarState.Quarters) {
+            return (
+                <StyledHeaderDate>
+                    {date.year}
+                    <StyledHeaderArrow color="inherit" size={size === 'xs' ? 'xs' : 's'} />
+                </StyledHeaderDate>
+            );
+        }
 
-                return (
-                    <StyledHeaderDate>
-                        {yearValue}—{yearValue + YEAR_RENDER_COUNT - 1}
-                        <StyledHeaderArrow color="inherit" size={size === 'xs' ? 'xs' : 's'} />
-                    </StyledHeaderDate>
-                );
-            }
+        if (type === CalendarState.Years) {
+            const yearValue = secondPart ? startYear + 12 : startYear;
 
-            return '';
-        },
-        [type, startYear, size, locale],
-    );
+            return (
+                <StyledHeaderDate>
+                    {yearValue}—{yearValue + YEAR_RENDER_COUNT - 1}
+                    <StyledHeaderArrow color="inherit" size={size === 'xs' ? 'xs' : 's'} />
+                </StyledHeaderDate>
+            );
+        }
+
+        return '';
+    };
 
     const currentCalendarType = getCalendarType(type);
 
-    const PreviousButton = useMemo(
-        () => (
-            <StyledArrow aria-label={`Предыдущий ${currentCalendarType}`} onClick={() => onPrev()}>
-                <IconDisclosureLeft color="inherit" size={size === 'xs' ? 'xs' : 's'} />
-            </StyledArrow>
-        ),
-        [currentCalendarType, size, onPrev],
+    const PreviousButton = () => (
+        <StyledArrow
+            className={cx(startYear <= 0 && classes.disabledPrevButton)}
+            aria-label={`Предыдущий ${currentCalendarType}`}
+            onClick={handlePrev}
+        >
+            <IconDisclosureLeft color="inherit" size={size === 'xs' ? 'xs' : 's'} />
+        </StyledArrow>
     );
 
-    const NextButton = useMemo(
-        () => (
-            <StyledArrow aria-label={`Следующий ${currentCalendarType}`} onClick={() => onNext()}>
-                <IconDisclosureRight color="inherit" size={size === 'xs' ? 'xs' : 's'} />
-            </StyledArrow>
-        ),
-        [currentCalendarType, size, onNext],
+    const NextButton = () => (
+        <StyledArrow aria-label={`Следующий ${currentCalendarType}`} onClick={handleNext}>
+            <IconDisclosureRight color="inherit" size={size === 'xs' ? 'xs' : 's'} />
+        </StyledArrow>
     );
 
     return (
         <StyledCalendarHeader>
             {isDouble ? (
                 <StyledNavigation>
                     <StyledDoubleHeaderWrapper>
-                        {PreviousButton}
+                        <PreviousButton />
                         <StyledHeaderDouble onClick={handleCalendarState} aria-live="polite">
                             {getHeaderContent(firstDate)}
                         </StyledHeaderDouble>
@@ -124,7 +136,7 @@ export const CalendarHeader: React.FC<CalendarHeaderProps> = ({
                         <StyledHeaderDouble onClick={handleCalendarState} aria-live="polite">
                             {getHeaderContent(secondDate, true)}
                         </StyledHeaderDouble>
-                        {NextButton}
+                        <NextButton />
                     </StyledDoubleHeaderWrapper>
                 </StyledNavigation>
             ) : (
@@ -139,8 +151,8 @@ export const CalendarHeader: React.FC<CalendarHeaderProps> = ({
                         {getHeaderContent(firstDate)}
                     </StyledHeader>
                     <StyledArrows>
-                        {PreviousButton}
-                        {NextButton}
+                        <PreviousButton />
+                        <NextButton />
                     </StyledArrows>
                 </>
             )}

packages/plasma-new-hope/src/components/Calendar/utils/calendarGridHelper.ts

@@ -14,15 +14,15 @@ export const getNextDate = (currentYear: number, currentMonth: number) =>
     currentMonth + 1 === MONTHS.length ? [currentYear + 1, 0] : [currentYear, currentMonth + 1];
 
 export const getPrevDate = (currentYear: number, currentMonth: number) =>
-    currentMonth - 1 < 0 ? [currentYear - 1, 11] : [currentYear, currentMonth - 1];
+    currentMonth - 1 < 0 ? [Math.abs(currentYear - 1) || 0, 11] : [currentYear, currentMonth - 1];
 
 export const getDateFromValue = (date: Date | undefined): DateObject => {
     const state = date || new Date();
 
     return {
         day: date !== undefined ? state.getDate() : 0,
         monthIndex: state.getMonth(),
-        year: state.getFullYear(),
+        year: Math.abs(state.getFullYear()),
     };
 };