@@ -22,6 +22,12 @@ export interface CalendarCellProps {
22
22
date : CalendarDate
23
23
}
24
24
25
+ function isRangeState (
26
+ state : CalendarState | RangeCalendarState
27
+ ) : state is RangeCalendarState {
28
+ return 'highlightedRange' in state
29
+ }
30
+
25
31
export function CalendarCell ( { state, date } : CalendarCellProps ) {
26
32
const ref = useRef < HTMLDivElement > ( null )
27
33
const {
@@ -36,12 +42,14 @@ export function CalendarCell({ state, date }: CalendarCellProps) {
36
42
37
43
// The start and end date of the selected range will have
38
44
// 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
45
53
46
54
// We add rounded corners on the left for the first day of the month,
47
55
// the first day of each week, and the start date of the selection.
0 commit comments