@@ -22,6 +22,12 @@ export interface CalendarCellProps {
2222 date : CalendarDate
2323}
2424
25+ function isRangeState (
26+ state : CalendarState | RangeCalendarState
27+ ) : state is RangeCalendarState {
28+ return 'highlightedRange' in state
29+ }
30+
2531export function CalendarCell ( { state, date } : CalendarCellProps ) {
2632 const ref = useRef < HTMLDivElement > ( null )
2733 const {
@@ -36,12 +42,14 @@ export function CalendarCell({ state, date }: CalendarCellProps) {
3642
3743 // The start and end date of the selected range will have
3844 // an emphasized appearance.
39- const isSelectionStart = ( state as RangeCalendarState ) . highlightedRange
40- ? isSameDay ( date , ( state as RangeCalendarState ) . highlightedRange . start )
41- : isSelected
42- const isSelectionEnd = ( state as RangeCalendarState ) . highlightedRange
43- ? isSameDay ( date , ( state as RangeCalendarState ) . highlightedRange . end )
44- : isSelected
45+ const isSelectionStart =
46+ isRangeState ( state ) && state . highlightedRange
47+ ? isSameDay ( date , state . highlightedRange . start )
48+ : isSelected
49+ const isSelectionEnd =
50+ isRangeState ( state ) && state . highlightedRange
51+ ? isSameDay ( date , state . highlightedRange . end )
52+ : isSelected
4553
4654 // We add rounded corners on the left for the first day of the month,
4755 // the first day of each week, and the start date of the selection.
0 commit comments