@react-spectrum/calendar 3.0.0-alpha.0

package/src/CalendarCell.tsx

@@ -0,0 +1,89 @@
+/*
+ * 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 {AriaCalendarCellProps, useCalendarCell} from '@react-aria/calendar';
+import {CalendarDate, getDayOfWeek, isEqualDay, isSameDay, isSameMonth, isToday} from '@internationalized/date';
+import {CalendarState, RangeCalendarState} from '@react-stately/calendar';
+import {classNames} from '@react-spectrum/utils';
+import {mergeProps} from '@react-aria/utils';
+import React, {useMemo, useRef} from 'react';
+import styles from '@adobe/spectrum-css-temp/components/calendar/vars.css';
+import {useDateFormatter, useLocale} from '@react-aria/i18n';
+import {useFocusRing} from '@react-aria/focus';
+import {useHover} from '@react-aria/interactions';
+
+interface CalendarCellProps extends AriaCalendarCellProps {
+  state: CalendarState | RangeCalendarState,
+  currentMonth: CalendarDate
+}
+
+export function CalendarCell({state, currentMonth, ...props}: CalendarCellProps) {
+  let ref = useRef<HTMLElement>();
+  let {cellProps, buttonProps, isPressed} = useCalendarCell({
+    ...props,
+    isDisabled: !isSameMonth(props.date, currentMonth)
+  }, state, ref);
+  let {hoverProps, isHovered} = useHover({});
+  let dateFormatter = useDateFormatter({
+    day: 'numeric',
+    timeZone: state.timeZone,
+    calendar: currentMonth.calendar.identifier
+  });
+  let isSelected = state.isSelected(props.date);
+  let highlightedRange = 'highlightedRange' in state && state.highlightedRange;
+  let isSelectionStart = highlightedRange && isSameDay(props.date, highlightedRange.start);
+  let isSelectionEnd = highlightedRange && isSameDay(props.date, highlightedRange.end);
+  let {locale} = useLocale();
+  let dayOfWeek = getDayOfWeek(props.date, locale);
+  let isRangeStart = isSelected && (dayOfWeek === 0 || props.date.day === 1);
+  let isRangeEnd = isSelected && (dayOfWeek === 6 || props.date.day === currentMonth.calendar.getDaysInMonth(currentMonth));
+  let {focusProps, isFocusVisible} = useFocusRing();
+
+  // For performance, reuse the same date object as before if the new date prop is the same.
+  // This allows subsequent useMemo results to be reused.
+  let date = props.date;
+  let lastDate = useRef(null);
+  if (lastDate.current && isEqualDay(date, lastDate.current)) {
+    date = lastDate.current;
+  }
+
+  lastDate.current = date;
+
+  let nativeDate = useMemo(() => date.toDate(state.timeZone), [date, state.timeZone]);
+  let formatted = useMemo(() => dateFormatter.format(nativeDate), [dateFormatter, nativeDate]);
+
+  return (
+    <td
+      {...cellProps}
+      className={classNames(styles, 'spectrum-Calendar-tableCell')}>
+      <span
+        {...mergeProps(buttonProps, hoverProps, focusProps)}
+        ref={ref}
+        className={classNames(styles, 'spectrum-Calendar-date', {
+          'is-today': isToday(props.date, state.timeZone),
+          'is-selected': isSelected,
+          'is-focused': state.isCellFocused(props.date) && isFocusVisible,
+          'is-disabled': state.isCellDisabled(props.date),
+          'is-outsideMonth': !isSameMonth(props.date, currentMonth),
+          'is-range-start': isRangeStart,
+          'is-range-end': isRangeEnd,
+          'is-range-selection': isSelected && 'highlightedRange' in state,
+          'is-selection-start': isSelectionStart,
+          'is-selection-end': isSelectionEnd,
+          'is-hovered': isHovered,
+          'is-pressed': isPressed
+        })}>
+        <span className={classNames(styles, 'spectrum-Calendar-dateText')}>{formatted}</span>
+      </span>
+    </td>
+  );
+}

package/src/CalendarMonth.tsx

@@ -0,0 +1,110 @@
+/*
+ * 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 {CalendarCell} from './CalendarCell';
+import {CalendarDate, endOfMonth, getWeeksInMonth, startOfWeek} from '@internationalized/date';
+import {CalendarPropsBase} from '@react-types/calendar';
+import {CalendarState, RangeCalendarState} from '@react-stately/calendar';
+import {classNames} from '@react-spectrum/utils';
+import {DOMProps, StyleProps} from '@react-types/shared';
+import React, {useEffect, useState} from 'react';
+import styles from '@adobe/spectrum-css-temp/components/calendar/vars.css';
+import {useCalendarGrid} from '@react-aria/calendar';
+import {useDateFormatter, useLocale} from '@react-aria/i18n';
+import {useProviderProps} from '@react-spectrum/provider';
+import {VisuallyHidden} from '@react-aria/visually-hidden';
+
+interface CalendarMonthProps extends CalendarPropsBase, DOMProps, StyleProps {
+  state: CalendarState | RangeCalendarState,
+  startDate: CalendarDate
+}
+
+export function CalendarMonth(props: CalendarMonthProps) {
+  props = useProviderProps(props);
+  let {
+    state,
+    startDate
+  } = props;
+  let {
+    gridProps
+  } = useCalendarGrid({
+    ...props,
+    endDate: endOfMonth(startDate)
+  }, state);
+
+  let dayFormatter = useDateFormatter({weekday: 'narrow'});
+  let dayFormatterLong = useDateFormatter({weekday: 'long'});
+
+  let {locale} = useLocale();
+  let monthStart = startOfWeek(startDate, locale);
+  let weeksInMonth = getWeeksInMonth(startDate, locale);
+
+  let [isRangeSelecting, setRangeSelecting] = useState(false);
+  let hasAnchorDate = 'anchorDate' in state && state.anchorDate != null;
+
+  // Update isRangeSelecting immediately when it becomes true.
+  // This feels weird but is actually fine...
+  // https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops
+  if (hasAnchorDate && !isRangeSelecting) {
+    setRangeSelecting(true);
+  }
+
+  // Delay removing the is-range-selecting class for a frame after selection ends.
+  // This avoids an undesired animation on touch devices.
+  useEffect(() => {
+    if (!hasAnchorDate && isRangeSelecting) {
+      let raf = requestAnimationFrame(() => setRangeSelecting(false));
+      return () => cancelAnimationFrame(raf);
+    }
+  }, [hasAnchorDate, isRangeSelecting]);
+
+  return (
+    <table
+      {...gridProps}
+      className={classNames(styles, 'spectrum-Calendar-body', 'spectrum-Calendar-table', {'is-range-selecting': isRangeSelecting})}>
+      <thead>
+        <tr>
+          {[...new Array(7).keys()].map((index) => {
+            let date = monthStart.add({days: index});
+            let dateDay = date.toDate(state.timeZone);
+            let day = dayFormatter.format(dateDay);
+            let dayLong = dayFormatterLong.format(dateDay);
+            return (
+              <th
+                key={index}
+                className={classNames(styles, 'spectrum-Calendar-tableCell')}>
+                {/* Make sure screen readers read the full day name, but we show an abbreviation visually. */}
+                <VisuallyHidden>{dayLong}</VisuallyHidden>
+                <span aria-hidden="true" className={classNames(styles, 'spectrum-Calendar-dayOfWeek')}>
+                  {day}
+                </span>
+              </th>
+            );
+          })}
+        </tr>
+      </thead>
+      <tbody>
+        {[...new Array(weeksInMonth).keys()].map(weekIndex => (
+          <tr key={weekIndex}>
+            {[...new Array(7).keys()].map(dayIndex => (
+              <CalendarCell
+                key={dayIndex}
+                state={state}
+                date={monthStart.add({weeks: weekIndex, days: dayIndex})}
+                currentMonth={startDate} />
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}

package/src/RangeCalendar.tsx

@@ -0,0 +1,38 @@
+/*
+ * 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 {CalendarBase} from './CalendarBase';
+import {createCalendar} from '@internationalized/date';
+import {DateValue, SpectrumRangeCalendarProps} from '@react-types/calendar';
+import React, {useMemo} from 'react';
+import {useLocale} from '@react-aria/i18n';
+import {useRangeCalendar} from '@react-aria/calendar';
+import {useRangeCalendarState} from '@react-stately/calendar';
+
+export function RangeCalendar<T extends DateValue>(props: SpectrumRangeCalendarProps<T>) {
+  let {visibleMonths = 1} = props;
+  let visibleDuration = useMemo(() => ({months: visibleMonths}), [visibleMonths]);
+  let {locale} = useLocale();
+  let state = useRangeCalendarState({
+    ...props,
+    locale,
+    visibleDuration,
+    createCalendar
+  });
+
+  return (
+    <CalendarBase
+      {...props}
+      state={state}
+      useCalendar={useRangeCalendar} />
+  );
+}

package/src/index.ts

@@ -0,0 +1,16 @@
+/*
+ * 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.
+ */
+
+/// <reference types="css-module-types" />
+
+export * from './Calendar';
+export * from './RangeCalendar';