Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 41x 2x 41x 41x 41x | import {useFocusWithin, useLang} from '@gravity-ui/uikit';
import {formatDateTime} from '../../utils/dates';
import type {CalendarState, RangeCalendarState} from './types';
export function useCalendarGridProps(state: CalendarState | RangeCalendarState) {
const {focusWithinProps} = useFocusWithin({
onFocusWithinChange: (isFocused) => {
state.setFocused(isFocused);
},
});
const {lang} = useLang();
const gridProps: React.HTMLAttributes<HTMLElement> = {
role: 'grid',
'aria-label':
state.mode === 'years' || state.mode === 'quarters'
? `${state.startDate.year()} — ${state.endDate.year()}`
: formatDateTime(
state.focusedDate,
state.mode === 'days' ? 'MMMM YYYY' : 'YYYY',
state.timeZone,
lang,
),
'aria-disabled': state.disabled ? 'true' : undefined,
'aria-readonly': state.readOnly ? 'true' : undefined,
...focusWithinProps,
onKeyDown: (e) => {
if (e.key === 'ArrowRight') {
e.preventDefault();
state.focusNextCell();
} else if (e.key === 'ArrowLeft') {
e.preventDefault();
state.focusPreviousCell();
} else if (e.key === 'ArrowDown') {
e.preventDefault();
state.focusNextRow();
} else if (e.key === 'ArrowUp') {
e.preventDefault();
state.focusPreviousRow();
} else if (e.key === 'PageDown') {
e.preventDefault();
state.focusNextPage(e.shiftKey);
} else if (e.key === 'PageUp') {
e.preventDefault();
state.focusPreviousPage(e.shiftKey);
} else if (e.key === 'End') {
e.preventDefault();
state.focusSectionEnd();
} else if (e.key === 'Home') {
e.preventDefault();
state.focusSectionStart();
} else if (e.code === 'Minus') {
e.preventDefault();
state.zoomOut();
} else if (e.code === 'Equal') {
e.preventDefault();
state.zoomIn();
} else if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
state.selectDate(state.focusedDate);
}
},
};
return {
gridProps,
};
}
|