FocusContext.tsx
4.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
import { createContext, ReactNode, useContext, useState } from 'react';
import { isSameDay } from 'date-fns';
import { useDayPicker } from 'contexts/DayPicker';
import { useModifiers } from '../Modifiers';
import { useNavigation } from '../Navigation';
import { getInitialFocusTarget } from './utils/getInitialFocusTarget';
import {
getNextFocus,
MoveFocusBy,
MoveFocusDirection
} from './utils/getNextFocus';
/** Represents the value of the {@link FocusContext}. */
export type FocusContextValue = {
/** The day currently focused. */
focusedDay: Date | undefined;
/** Day that will be focused. */
focusTarget: Date | undefined;
/** Focus a day. */
focus: (day: Date) => void;
/** Blur the focused day. */
blur: () => void;
/** Focus the day after the focused day. */
focusDayAfter: () => void;
/** Focus the day before the focused day. */
focusDayBefore: () => void;
/** Focus the day in the week before the focused day. */
focusWeekBefore: () => void;
/** Focus the day in the week after the focused day. */
focusWeekAfter: () => void;
/* Focus the day in the month before the focused day. */
focusMonthBefore: () => void;
/* Focus the day in the month after the focused day. */
focusMonthAfter: () => void;
/* Focus the day in the year before the focused day. */
focusYearBefore: () => void;
/* Focus the day in the year after the focused day. */
focusYearAfter: () => void;
/* Focus the day at the start of the week of the focused day. */
focusStartOfWeek: () => void;
/* Focus the day at the end of the week of focused day. */
focusEndOfWeek: () => void;
};
/**
* The Focus context shares details about the focused day for the keyboard
*
* Access this context from the {@link useFocusContext} hook.
*/
export const FocusContext = createContext<FocusContextValue | undefined>(
undefined
);
export type FocusProviderProps = { children: ReactNode };
/** The provider for the {@link FocusContext}. */
export function FocusProvider(props: FocusProviderProps): JSX.Element {
const navigation = useNavigation();
const modifiers = useModifiers();
const [focusedDay, setFocusedDay] = useState<Date | undefined>();
const [lastFocused, setLastFocused] = useState<Date | undefined>();
const initialFocusTarget = getInitialFocusTarget(
navigation.displayMonths,
modifiers
);
// TODO: cleanup and test obscure code below
const focusTarget =
focusedDay ?? (lastFocused && navigation.isDateDisplayed(lastFocused))
? lastFocused
: initialFocusTarget;
const blur = () => {
setLastFocused(focusedDay);
setFocusedDay(undefined);
};
const focus = (date: Date) => {
setFocusedDay(date);
};
const context = useDayPicker();
const moveFocus = (moveBy: MoveFocusBy, direction: MoveFocusDirection) => {
if (!focusedDay) return;
const nextFocused = getNextFocus(focusedDay, {
moveBy,
direction,
context,
modifiers
});
if (isSameDay(focusedDay, nextFocused)) return undefined;
navigation.goToDate(nextFocused, focusedDay);
focus(nextFocused);
};
const value: FocusContextValue = {
focusedDay,
focusTarget,
blur,
focus,
focusDayAfter: () => moveFocus('day', 'after'),
focusDayBefore: () => moveFocus('day', 'before'),
focusWeekAfter: () => moveFocus('week', 'after'),
focusWeekBefore: () => moveFocus('week', 'before'),
focusMonthBefore: () => moveFocus('month', 'before'),
focusMonthAfter: () => moveFocus('month', 'after'),
focusYearBefore: () => moveFocus('year', 'before'),
focusYearAfter: () => moveFocus('year', 'after'),
focusStartOfWeek: () => moveFocus('startOfWeek', 'before'),
focusEndOfWeek: () => moveFocus('endOfWeek', 'after')
};
return (
<FocusContext.Provider value={value}>
{props.children}
</FocusContext.Provider>
);
}
/**
* Hook to access the {@link FocusContextValue}. Use this hook to handle the
* focus state of the elements.
*
* This hook is meant to be used inside internal or custom components.
*/
export function useFocusContext(): FocusContextValue {
const context = useContext(FocusContext);
if (!context) {
throw new Error('useFocusContext must be used within a FocusProvider');
}
return context;
}