@react-aria/calendar 3.0.0-alpha.0

package/src/useCalendarGrid.ts

@@ -0,0 +1,122 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {CalendarDate} from '@internationalized/date';
+import {CalendarGridAria} from './types';
+import {calendarIds, useSelectedDateDescription, useVisibleRangeDescription} from './utils';
+import {CalendarPropsBase} from '@react-types/calendar';
+import {CalendarState, RangeCalendarState} from '@react-stately/calendar';
+import {KeyboardEvent} from 'react';
+import {mergeProps, useDescription, useLabels} from '@react-aria/utils';
+import {useLocale} from '@react-aria/i18n';
+
+interface CalendarGridProps extends CalendarPropsBase {
+  startDate?: CalendarDate,
+  endDate?: CalendarDate
+}
+
+export function useCalendarGrid(props: CalendarGridProps, state: CalendarState | RangeCalendarState): CalendarGridAria {
+  let {
+    isReadOnly = false,
+    isDisabled = false,
+    startDate = state.visibleRange.start,
+    endDate = state.visibleRange.end
+  } = props;
+
+  let {direction} = useLocale();
+
+  let onKeyDown = (e: KeyboardEvent) => {
+    switch (e.key) {
+      case 'Enter':
+      case ' ':
+        e.preventDefault();
+        state.selectFocusedDate();
+        break;
+      case 'PageUp':
+        e.preventDefault();
+        if (e.shiftKey) {
+          state.focusPreviousSection();
+        } else {
+          state.focusPreviousPage();
+        }
+        break;
+      case 'PageDown':
+        e.preventDefault();
+        if (e.shiftKey) {
+          state.focusNextSection();
+        } else {
+          state.focusNextPage();
+        }
+        break;
+      case 'End':
+        e.preventDefault();
+        state.focusPageEnd();
+        break;
+      case 'Home':
+        e.preventDefault();
+        state.focusPageStart();
+        break;
+      case 'ArrowLeft':
+        e.preventDefault();
+        if (direction === 'rtl') {
+          state.focusNextDay();
+        } else {
+          state.focusPreviousDay();
+        }
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        state.focusPreviousRow();
+        break;
+      case 'ArrowRight':
+        e.preventDefault();
+        if (direction === 'rtl') {
+          state.focusPreviousDay();
+        } else {
+          state.focusNextDay();
+        }
+        break;
+      case 'ArrowDown':
+        e.preventDefault();
+        state.focusNextRow();
+        break;
+      case 'Escape':
+        // Cancel the selection.
+        if ('setAnchorDate' in state) {
+          e.preventDefault();
+          state.setAnchorDate(null);
+        }
+        break;
+    }
+  };
+
+  let selectedDateDescription = useSelectedDateDescription(state);
+  let descriptionProps = useDescription(selectedDateDescription);
+  let visibleRangeDescription = useVisibleRangeDescription(startDate, endDate, state.timeZone);
+
+  let labelProps = useLabels({
+    'aria-label': visibleRangeDescription,
+    'aria-labelledby': calendarIds.get(state)
+  });
+
+  return {
+    gridProps: mergeProps(descriptionProps, labelProps, {
+      role: 'grid',
+      'aria-readonly': isReadOnly || null,
+      'aria-disabled': isDisabled || null,
+      'aria-multiselectable': ('highlightedRange' in state) || undefined,
+      onKeyDown,
+      onFocus: () => state.setFocused(true),
+      onBlur: () => state.setFocused(false)
+    })
+  };
+}

package/src/useCalendarTableHeader.ts

@@ -0,0 +1,11 @@
+interface CalendarTableHeaderAria {
+  columnHeaderProps: {scope?: 'col'}
+}
+
+export function useCalendarTableHeader(): CalendarTableHeaderAria {
+  return {
+    columnHeaderProps: {
+      scope: 'col'
+    }
+  };
+}

package/src/useRangeCalendar.ts

@@ -0,0 +1,71 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {CalendarAria} from './types';
+import {DateValue, RangeCalendarProps} from '@react-types/calendar';
+import {RangeCalendarState} from '@react-stately/calendar';
+import {RefObject, useRef} from 'react';
+import {useCalendarBase} from './useCalendarBase';
+import {useEvent, useId} from '@react-aria/utils';
+
+export function useRangeCalendar<T extends DateValue>(props: RangeCalendarProps<T>, state: RangeCalendarState, ref: RefObject<HTMLElement>): CalendarAria {
+  let res = useCalendarBase(props, state);
+  res.nextButtonProps.id = useId();
+  res.prevButtonProps.id = useId();
+
+  // We need to ignore virtual pointer events from VoiceOver due to these bugs.
+  // https://bugs.webkit.org/show_bug.cgi?id=222627
+  // https://bugs.webkit.org/show_bug.cgi?id=223202
+  // usePress also does this and waits for the following click event before firing.
+  // We need to match that here otherwise this will fire before the press event in
+  // useCalendarCell, causing range selection to not work properly.
+  let isVirtualClick = useRef(false);
+  useEvent(useRef(window), 'pointerdown', e => {
+    isVirtualClick.current = e.width === 0 && e.height === 0;
+  });
+
+  // Stop range selection when pressing or releasing a pointer outside the calendar body,
+  // except when pressing the next or previous buttons to switch months.
+  let endDragging = e => {
+    if (isVirtualClick.current) {
+      isVirtualClick.current = false;
+      return;
+    }
+
+    state.setDragging(false);
+    if (!state.anchorDate) {
+      return;
+    }
+
+    let target = e.target as HTMLElement;
+    let body = document.getElementById(res.calendarProps.id);
+    if (
+      (!body.contains(target) || target.getAttribute('role') !== 'button') &&
+      !document.getElementById(res.nextButtonProps.id)?.contains(target) &&
+      !document.getElementById(res.prevButtonProps.id)?.contains(target)
+    ) {
+      state.selectFocusedDate();
+    }
+  };
+
+  useEvent(useRef(window), 'pointerup', endDragging);
+  useEvent(useRef(window), 'pointercancel', endDragging);
+
+  // Prevent touch scrolling while dragging
+  useEvent(ref, 'touchmove', e => {
+    if (state.isDragging) {
+      e.preventDefault();
+    }
+  }, {passive: false, capture: true});
+
+  return res;
+}

package/src/utils.ts

@@ -0,0 +1,74 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {CalendarDate, endOfMonth, isSameDay, startOfMonth, toDate} from '@internationalized/date';
+import {CalendarState, RangeCalendarState} from '@react-stately/calendar';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
+import {useDateFormatter, useMessageFormatter} from '@react-aria/i18n';
+import {useMemo} from 'react';
+
+export const calendarIds = new WeakMap<CalendarState | RangeCalendarState, string>();
+
+export function useSelectedDateDescription(state: CalendarState | RangeCalendarState) {
+  let formatMessage = useMessageFormatter(intlMessages);
+
+  let start: CalendarDate, end: CalendarDate;
+  if ('highlightedRange' in state) {
+    ({start, end} = state.highlightedRange || {});
+  } else {
+    start = end = state.value;
+  }
+
+  let anchorDate = 'anchorDate' in state ? state.anchorDate : null;
+  return useMemo(() => {
+    // No message if currently selecting a range, or there is nothing highlighted.
+    if (!anchorDate && start && end) {
+      // Use a single date message if the start and end dates are the same day,
+      // otherwise include both dates.
+      if (isSameDay(start, end)) {
+        return formatMessage('selectedDateDescription', {date: toDate(start, state.timeZone)});
+      } else {
+        return formatMessage('selectedRangeDescription', {start: toDate(start, state.timeZone), end: toDate(end, state.timeZone)});
+      }
+    }
+    return '';
+  }, [start, end, anchorDate, state.timeZone, formatMessage]);
+}
+
+export function useVisibleRangeDescription(startDate: CalendarDate, endDate: CalendarDate, timeZone: string) {
+  let monthFormatter = useDateFormatter({
+    month: 'long',
+    year: 'numeric',
+    era: startDate.calendar.identifier !== 'gregory' ? 'long' : undefined,
+    calendar: startDate.calendar.identifier
+  });
+
+  let dateFormatter = useDateFormatter({
+    dateStyle: 'long',
+    calendar: startDate.calendar.identifier
+  });
+
+  return useMemo(() => {
+    // Special case for month granularity. Format as a single month if only a
+    // single month is visible, otherwise format as a range of months.
+    if (isSameDay(startDate, startOfMonth(startDate))) {
+      if (isSameDay(endDate, endOfMonth(startDate))) {
+        return monthFormatter.format(startDate.toDate(timeZone));
+      } else if (isSameDay(endDate, endOfMonth(endDate))) {
+        return monthFormatter.formatRange(startDate.toDate(timeZone), endDate.toDate(timeZone));
+      }
+    }
+
+    return dateFormatter.formatRange(startDate.toDate(timeZone), endDate.toDate(timeZone));
+  }, [startDate, endDate, monthFormatter, dateFormatter, timeZone]);
+}