1 | function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
2 |
|
3 | import cn from 'classnames';
|
4 | import React, { useEffect, useRef } from 'react';
|
5 | import dates from './dates';
|
6 | import useFocusManager from './useFocusManager';
|
7 |
|
8 | function clamp(date, min, max) {
|
9 | return dates.max(dates.min(date, max), min);
|
10 | }
|
11 |
|
12 | function CalendarView({
|
13 | className,
|
14 | focusedItem,
|
15 | onKeyDown,
|
16 | children,
|
17 | 'aria-labelledby': labelledby
|
18 | }) {
|
19 | const ref = useRef(null);
|
20 | const [focusEvents, focused] = useFocusManager(ref);
|
21 | useEffect(() => {
|
22 | var _node$querySelector;
|
23 |
|
24 | const node = ref.current;
|
25 | if (!node || !focused) return;
|
26 | (_node$querySelector = node.querySelector('.rw-cell[tabindex]')) == null ? void 0 : _node$querySelector.focus();
|
27 | }, [focusedItem, focused, ref]);
|
28 | return React.createElement("div", _extends({
|
29 | role: "grid",
|
30 | ref: ref,
|
31 | tabIndex: -1
|
32 | }, focusEvents, {
|
33 | onKeyDown: onKeyDown,
|
34 | "aria-labelledby": labelledby,
|
35 | className: cn(className, 'rw-nav-view', 'rw-calendar-grid')
|
36 | }), children);
|
37 | }
|
38 |
|
39 | function CalendarViewCell({
|
40 | onChange,
|
41 | min,
|
42 | max,
|
43 | date,
|
44 | unit,
|
45 | disabled,
|
46 | selected,
|
47 | focusedItem,
|
48 | viewUnit,
|
49 | children,
|
50 | label
|
51 | }) {
|
52 | const isEqual = nextDate => dates.eq(date, nextDate, unit);
|
53 |
|
54 | const isEmpty = !dates.inRange(date, min, max, unit);
|
55 | const isDisabled = disabled || isEmpty;
|
56 |
|
57 | const isFocused = !disabled && !isEmpty && isEqual(focusedItem);
|
58 | const isSelected = selected && isEqual(selected);
|
59 | const isOffView = date && focusedItem && viewUnit && dates[viewUnit](date) !== dates[viewUnit](focusedItem);
|
60 |
|
61 | const handleChange = () => {
|
62 | onChange(clamp(date, min, max));
|
63 | };
|
64 |
|
65 | return React.createElement("div", {
|
66 | role: "gridcell",
|
67 | title: label,
|
68 | "aria-label": label,
|
69 | "aria-readonly": disabled,
|
70 | "aria-selected": Boolean(isSelected),
|
71 | tabIndex: isFocused ? 0 : void 0,
|
72 | onClick: !isDisabled ? handleChange : undefined,
|
73 | className: cn('rw-cell',
|
74 | isDisabled && 'rw-state-disabled', isEmpty && 'rw-cell-not-allowed', isOffView && 'rw-cell-off-range', isSelected && 'rw-state-selected')
|
75 | }, React.createElement("span", {
|
76 | "aria-hidden": true
|
77 | }, children));
|
78 | }
|
79 |
|
80 | CalendarView.Body = props => React.createElement("div", _extends({
|
81 | role: "rowgroup",
|
82 | className: "rw-calendar-body"
|
83 | }, props));
|
84 |
|
85 | CalendarView.Row = props => React.createElement("div", _extends({
|
86 | role: "row",
|
87 | className: "rw-calendar-row"
|
88 | }, props));
|
89 |
|
90 | CalendarView.Cell = CalendarViewCell;
|
91 | export default CalendarView; |
\ | No newline at end of file |