From 4a993a60d697a066c13a43e36018fdd1f6cb0c4f Mon Sep 17 00:00:00 2001 From: TitanKuzmich Date: Fri, 29 Nov 2024 15:59:56 +0300 Subject: [PATCH] feat(plasma-new-hope): add check for negative years --- .../components/Calendar/Calendar.tokens.ts | 1 + .../src/components/Calendar/store/reducer.ts | 8 +- .../CalendarHeader/CalendarHeader.styles.ts | 10 ++ .../ui/CalendarHeader/CalendarHeader.tsx | 126 ++++++++++-------- .../Calendar/utils/calendarGridHelper.ts | 4 +- 5 files changed, 87 insertions(+), 62 deletions(-) diff --git a/packages/plasma-new-hope/src/components/Calendar/Calendar.tokens.ts b/packages/plasma-new-hope/src/components/Calendar/Calendar.tokens.ts index f776577ef5..aeabce6c92 100644 --- a/packages/plasma-new-hope/src/components/Calendar/Calendar.tokens.ts +++ b/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 = { diff --git a/packages/plasma-new-hope/src/components/Calendar/store/reducer.ts b/packages/plasma-new-hope/src/components/Calendar/store/reducer.ts index 59c5e73c82..456df0ef27 100644 --- a/packages/plasma-new-hope/src/components/Calendar/store/reducer.ts +++ b/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: { diff --git a/packages/plasma-new-hope/src/components/Calendar/ui/CalendarHeader/CalendarHeader.styles.ts b/packages/plasma-new-hope/src/components/Calendar/ui/CalendarHeader/CalendarHeader.styles.ts index 27ba5122f1..dab5df550a 100644 --- a/packages/plasma-new-hope/src/components/Calendar/ui/CalendarHeader/CalendarHeader.styles.ts +++ b/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` diff --git a/packages/plasma-new-hope/src/components/Calendar/ui/CalendarHeader/CalendarHeader.tsx b/packages/plasma-new-hope/src/components/Calendar/ui/CalendarHeader/CalendarHeader.tsx index ef480cd125..53ffb3a2b0 100644 --- a/packages/plasma-new-hope/src/components/Calendar/ui/CalendarHeader/CalendarHeader.tsx +++ b/packages/plasma-new-hope/src/components/Calendar/ui/CalendarHeader/CalendarHeader.tsx @@ -1,4 +1,5 @@ -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'; @@ -6,6 +7,7 @@ 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 = ({ onUpdateCalendarState, locale, }) => { - const handleCalendarState = useCallback(() => { + const handleCalendarState = () => { const newSize: [number, number] = isDouble ? sizeMap.Months.double : sizeMap.Months.single; if (type === CalendarState.Days) { @@ -45,69 +47,79 @@ export const CalendarHeader: React.FC = ({ 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 ( - <> - {MONTH_NAMES[locale][date.monthIndex]} - - {date.year} - - - - ); - } - - if (type === CalendarState.Months || type === CalendarState.Quarters) { - return ( + }; + + const handlePrev = (event: MouseEvent) => { + event.stopPropagation(); + + if (startYear <= 0) { + return; + } + onPrev(); + }; + + const handleNext = (event: MouseEvent) => { + event.stopPropagation(); + + onNext(); + }; + + const getHeaderContent = (date?: DateObject, secondPart?: boolean) => { + if (!date) { + return ''; + } + + if (type === CalendarState.Days) { + return ( + <> + {MONTH_NAMES[locale][date.monthIndex]} {date.year} - ); - } + + ); + } - if (type === CalendarState.Years) { - const yearValue = secondPart ? startYear + 12 : startYear; + if (type === CalendarState.Months || type === CalendarState.Quarters) { + return ( + + {date.year} + + + ); + } - return ( - - {yearValue}—{yearValue + YEAR_RENDER_COUNT - 1} - - - ); - } + if (type === CalendarState.Years) { + const yearValue = secondPart ? startYear + 12 : startYear; - return ''; - }, - [type, startYear, size, locale], - ); + return ( + + {yearValue}—{yearValue + YEAR_RENDER_COUNT - 1} + + + ); + } + + return ''; + }; const currentCalendarType = getCalendarType(type); - const PreviousButton = useMemo( - () => ( - onPrev()}> - - - ), - [currentCalendarType, size, onPrev], + const PreviousButton = () => ( + + + ); - const NextButton = useMemo( - () => ( - onNext()}> - - - ), - [currentCalendarType, size, onNext], + const NextButton = () => ( + + + ); return ( @@ -115,7 +127,7 @@ export const CalendarHeader: React.FC = ({ {isDouble ? ( - {PreviousButton} + {getHeaderContent(firstDate)} @@ -124,7 +136,7 @@ export const CalendarHeader: React.FC = ({ {getHeaderContent(secondDate, true)} - {NextButton} + ) : ( @@ -139,8 +151,8 @@ export const CalendarHeader: React.FC = ({ {getHeaderContent(firstDate)} - {PreviousButton} - {NextButton} + + )} diff --git a/packages/plasma-new-hope/src/components/Calendar/utils/calendarGridHelper.ts b/packages/plasma-new-hope/src/components/Calendar/utils/calendarGridHelper.ts index d3a84c148b..5ef067c442 100644 --- a/packages/plasma-new-hope/src/components/Calendar/utils/calendarGridHelper.ts +++ b/packages/plasma-new-hope/src/components/Calendar/utils/calendarGridHelper.ts @@ -14,7 +14,7 @@ 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(); @@ -22,7 +22,7 @@ export const getDateFromValue = (date: Date | undefined): DateObject => { return { day: date !== undefined ? state.getDate() : 0, monthIndex: state.getMonth(), - year: state.getFullYear(), + year: Math.abs(state.getFullYear()), }; };