@awsui/components-react
Version:
AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A
64 lines (63 loc) • 3.61 kB
JavaScript
import React, { useCallback, useMemo } from 'react';
import styles from '../../styles.css.js';
import GridDay from './day';
import { KeyCode } from '../../../internal/keycode';
import { addDays, addWeeks, isSameMonth } from 'date-fns';
import { getCalendarMonth } from 'mnth';
import rotateDayIndexes from '../utils/rotate-day-indexes';
import { renderDayName } from '../utils/intl';
var Grid = function (_a) {
var locale = _a.locale, baseDate = _a.baseDate, isDateEnabled = _a.isDateEnabled, focusedDate = _a.focusedDate, onSelectDate = _a.onSelectDate, onFocusDate = _a.onFocusDate, onChangeMonth = _a.onChangeMonth, startOfWeek = _a.startOfWeek, todayAriaLabel = _a.todayAriaLabel, selectedDate = _a.selectedDate, handleFocusMove = _a.handleFocusMove;
var onGridKeyDownHandler = useCallback(function (e) {
var updatedFocusDate;
if (focusedDate === null) {
return;
}
switch (e.keyCode) {
case KeyCode.enter:
e.preventDefault();
if (focusedDate) {
onFocusDate({ date: null });
onSelectDate({ date: focusedDate });
}
return;
case KeyCode.right:
e.preventDefault();
updatedFocusDate = handleFocusMove(focusedDate, isDateEnabled, function (date) { return addDays(date, 1); });
break;
case KeyCode.left:
e.preventDefault();
updatedFocusDate = handleFocusMove(focusedDate, isDateEnabled, function (date) { return addDays(date, -1); });
break;
case KeyCode.up:
e.preventDefault();
updatedFocusDate = handleFocusMove(focusedDate, isDateEnabled, function (date) { return addWeeks(date, -1); });
break;
case KeyCode.down:
e.preventDefault();
updatedFocusDate = handleFocusMove(focusedDate, isDateEnabled, function (date) { return addWeeks(date, 1); });
break;
default:
return;
}
if (!isSameMonth(updatedFocusDate, baseDate)) {
onChangeMonth(updatedFocusDate);
}
onFocusDate({ date: updatedFocusDate });
}, [focusedDate, baseDate]);
var weeks = useMemo(function () { return getCalendarMonth(baseDate, { firstDayOfWeek: startOfWeek }); }, [
baseDate,
startOfWeek
]);
return (React.createElement("div", null,
React.createElement("div", { className: styles['calendar-day-names'] }, rotateDayIndexes(startOfWeek).map(function (i) { return (React.createElement("div", { key: "day-name-" + i, className: styles['calendar-day-name'] }, renderDayName(locale, i))); })),
React.createElement("div", { className: styles['calendar-dates'], onKeyDown: onGridKeyDownHandler }, weeks.map(function (week, weekIndex) {
var isDateInLastWeek = weeks.length - 1 === weekIndex;
return (React.createElement("div", { key: "week-" + weekIndex, className: styles['calendar-week'] }, week.map(function (date, dateIndex) {
return (React.createElement(GridDay, { key: "date-" + weekIndex + "-" + dateIndex, locale: locale, baseDate: baseDate, selectedDate: selectedDate, date: date, focusedDate: focusedDate, todayAriaLabel: todayAriaLabel, onSelectDate: function (date) {
onSelectDate({ date: date });
}, isDateEnabled: isDateEnabled, isDateInLastWeek: isDateInLastWeek }));
})));
}))));
};
export default Grid;