@react-stately/calendar 3.0.0-alpha.0

package/src/index.ts

@@ -0,0 +1,15 @@
+/*
+ * 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.
+ */
+
+export * from './types';
+export * from './useCalendarState';
+export * from './useRangeCalendarState';

package/src/types.ts

@@ -0,0 +1,62 @@
+/*
+ * 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 {DateValue} from '@react-types/calendar';
+import {RangeValue} from '@react-types/shared';
+
+export interface CalendarStateBase {
+  isDisabled: boolean,
+  isReadOnly: boolean,
+  visibleRange: RangeValue<CalendarDate>,
+  timeZone: string,
+  focusedDate: CalendarDate,
+  setFocusedDate(value: CalendarDate): void,
+  focusNextDay(): void,
+  focusPreviousDay(): void,
+  focusNextRow(): void,
+  focusPreviousRow(): void,
+  focusNextPage(): void,
+  focusPreviousPage(): void,
+  focusPageStart(): void,
+  focusPageEnd(): void,
+  focusNextSection(): void,
+  focusPreviousSection(): void,
+  focusNextPage(): void,
+  focusPreviousPage(): void,
+  selectFocusedDate(): void,
+  selectDate(date: CalendarDate): void,
+  isFocused: boolean,
+  setFocused(value: boolean): void,
+  isInvalid(date: CalendarDate): boolean,
+  isSelected(date: CalendarDate): boolean,
+  isCellFocused(date: CalendarDate): boolean,
+  isCellDisabled(date: CalendarDate): boolean,
+  isPreviousVisibleRangeInvalid(): boolean,
+  isNextVisibleRangeInvalid(): boolean
+}
+
+export interface CalendarState extends CalendarStateBase {
+  value: CalendarDate,
+  setValue(value: CalendarDate): void
+}
+
+export interface RangeCalendarState extends CalendarStateBase {
+  value: RangeValue<DateValue>,
+  setValue(value: RangeValue<DateValue>): void,
+  highlightDate(date: CalendarDate): void,
+  anchorDate: CalendarDate | null,
+  setAnchorDate(date: CalendarDate | null): void,
+  highlightedRange: RangeValue<CalendarDate>,
+  isDragging: boolean,
+  setDragging(isDragging: boolean): void
+}

package/src/useCalendarState.ts

@@ -0,0 +1,208 @@
+/*
+ * 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 {alignCenter, alignEnd, alignStart, constrainStart, constrainValue, isInvalid} from './utils';
+import {
+  Calendar,
+  CalendarDate,
+  Duration,
+  GregorianCalendar,
+  isSameDay,
+  toCalendar,
+  toCalendarDate,
+  today
+} from '@internationalized/date';
+import {CalendarProps, DateValue} from '@react-types/calendar';
+import {CalendarState} from './types';
+import {useControlledState} from '@react-stately/utils';
+import {useDateFormatter} from '@react-aria/i18n';
+import {useEffect, useMemo, useRef, useState} from 'react';
+
+interface CalendarStateOptions<T extends DateValue> extends CalendarProps<T> {
+  locale: string,
+  createCalendar: (name: string) => Calendar,
+  visibleDuration?: Duration,
+  selectionAlignment?: 'start' | 'center' | 'end'
+}
+
+export function useCalendarState<T extends DateValue>(props: CalendarStateOptions<T>): CalendarState {
+  let defaultFormatter = useDateFormatter();
+  let resolvedOptions = useMemo(() => defaultFormatter.resolvedOptions(), [defaultFormatter]);
+  let {
+    locale,
+    createCalendar,
+    timeZone = resolvedOptions.timeZone,
+    visibleDuration = {months: 1},
+    minValue,
+    maxValue,
+    selectionAlignment
+  } = props;
+
+  let calendar = useMemo(() => createCalendar(resolvedOptions.calendar), [createCalendar, resolvedOptions.calendar]);
+
+  let [value, setControlledValue] = useControlledState<DateValue>(props.value, props.defaultValue, props.onChange);
+  let calendarDateValue = useMemo(() => value ? toCalendar(toCalendarDate(value), calendar) : null, [value, calendar]);
+  let defaultDate = useMemo(() => calendarDateValue || constrainValue(toCalendar(today(timeZone), calendar), minValue, maxValue), [calendarDateValue, timeZone, calendar, minValue, maxValue]);
+  let [startDate, setStartDate] = useState(() => {
+    switch (selectionAlignment) {
+      case 'start':
+        return alignStart(defaultDate, visibleDuration, locale, minValue, maxValue);
+      case 'end':
+        return alignEnd(defaultDate, visibleDuration, locale, minValue, maxValue);
+      case 'center':
+      default:
+        return alignCenter(defaultDate, visibleDuration, locale, minValue, maxValue);
+    }
+  });
+  let [focusedDate, setFocusedDate] = useState(defaultDate);
+  let [isFocused, setFocused] = useState(props.autoFocus || false);
+
+  let endDate = useMemo(() => startDate.add(visibleDuration).subtract({days: 1}), [startDate, visibleDuration]);
+
+  // Reset focused date and visible range when calendar changes.
+  let lastCalendarIdentifier = useRef(calendar.identifier);
+  useEffect(() => {
+    if (calendar.identifier !== lastCalendarIdentifier.current) {
+      let newFocusedDate = toCalendar(focusedDate, calendar);
+      setStartDate(alignCenter(newFocusedDate, visibleDuration, locale, minValue, maxValue));
+      setFocusedDate(newFocusedDate);
+      lastCalendarIdentifier.current = calendar.identifier;
+    }
+  }, [calendar, focusedDate, visibleDuration, locale, minValue, maxValue]);
+
+  // Sets focus to a specific cell date
+  function focusCell(date: CalendarDate) {
+    // date = constrain(focusedDate, date, visibleDuration, locale, minValue, maxValue);
+    date = constrainValue(date, minValue, maxValue);
+
+    let next = startDate.add(visibleDuration);
+    if (date.compare(startDate) < 0) {
+      setStartDate(alignEnd(date, visibleDuration, locale, minValue, maxValue));
+    } else if (date.compare(next) >= 0) {
+      setStartDate(alignStart(date, visibleDuration, locale, minValue, maxValue));
+    }
+
+    setFocusedDate(date);
+  }
+
+  function setValue(newValue: CalendarDate) {
+    if (!props.isDisabled && !props.isReadOnly) {
+      // The display calendar should not have any effect on the emitted value.
+      // Emit dates in the same calendar as the original value, if any, otherwise gregorian.
+      newValue = toCalendar(newValue, value?.calendar || new GregorianCalendar());
+
+      // Preserve time if the input value had one.
+      if (value && 'hour' in value) {
+        setControlledValue(value.set(newValue));
+      } else {
+        setControlledValue(newValue);
+      }
+    }
+  }
+
+  return {
+    isDisabled: props.isDisabled,
+    isReadOnly: props.isReadOnly,
+    value: calendarDateValue,
+    setValue,
+    visibleRange: {
+      start: startDate,
+      end: endDate
+    },
+    focusedDate,
+    timeZone,
+    setFocusedDate(date) {
+      setFocusedDate(date);
+      setFocused(true);
+    },
+    focusNextDay() {
+      focusCell(focusedDate.add({days: 1}));
+    },
+    focusPreviousDay() {
+      focusCell(focusedDate.subtract({days: 1}));
+    },
+    focusNextRow() {
+      if (visibleDuration.days) {
+        this.focusNextPage();
+      } else if (visibleDuration.weeks || visibleDuration.months || visibleDuration.years) {
+        focusCell(focusedDate.add({weeks: 1}));
+      }
+    },
+    focusPreviousRow() {
+      if (visibleDuration.days) {
+        this.focusPreviousPage();
+      } else if (visibleDuration.weeks || visibleDuration.months || visibleDuration.years) {
+        focusCell(focusedDate.subtract({weeks: 1}));
+      }
+    },
+    focusNextPage() {
+      let start = startDate.add(visibleDuration);
+      setStartDate(constrainStart(focusedDate, start, visibleDuration, locale, minValue, maxValue));
+      setFocusedDate(constrainValue(focusedDate.add(visibleDuration), minValue, maxValue));
+    },
+    focusPreviousPage() {
+      let start = startDate.subtract(visibleDuration);
+      setStartDate(constrainStart(focusedDate, start, visibleDuration, locale, minValue, maxValue));
+      setFocusedDate(constrainValue(focusedDate.subtract(visibleDuration), minValue, maxValue));
+    },
+    focusPageStart() {
+      focusCell(startDate);
+    },
+    focusPageEnd() {
+      focusCell(endDate);
+    },
+    focusNextSection() {
+      if (visibleDuration.days) {
+        this.focusNextPage();
+      } else if (visibleDuration.weeks) {
+        focusCell(focusedDate.add({months: 1}));
+      } else if (visibleDuration.months || visibleDuration.years) {
+        focusCell(focusedDate.add({years: 1}));
+      }
+    },
+    focusPreviousSection() {
+      if (visibleDuration.days) {
+        this.focusPreviousPage();
+      } else if (visibleDuration.weeks) {
+        focusCell(focusedDate.subtract({months: 1}));
+      } else if (visibleDuration.months || visibleDuration.years) {
+        focusCell(focusedDate.subtract({years: 1}));
+      }
+    },
+    selectFocusedDate() {
+      setValue(focusedDate);
+    },
+    selectDate(date) {
+      setValue(date);
+    },
+    isFocused,
+    setFocused,
+    isInvalid(date) {
+      return isInvalid(date, minValue, maxValue);
+    },
+    isSelected(date) {
+      return calendarDateValue != null && isSameDay(date, calendarDateValue);
+    },
+    isCellFocused(date) {
+      return isFocused && focusedDate && isSameDay(date, focusedDate);
+    },
+    isCellDisabled(date) {
+      return props.isDisabled || date.compare(startDate) < 0 || date.compare(endDate) > 0 || isInvalid(date, minValue, maxValue);
+    },
+    isPreviousVisibleRangeInvalid() {
+      return isInvalid(startDate.subtract({days: 1}), minValue, maxValue);
+    },
+    isNextVisibleRangeInvalid() {
+      return isInvalid(endDate.add({days: 1}), minValue, maxValue);
+    }
+  };
+}

package/src/useRangeCalendarState.ts

@@ -0,0 +1,126 @@
+/*
+ * 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 {alignCenter} from './utils';
+import {Calendar, CalendarDate, Duration, GregorianCalendar, toCalendar, toCalendarDate} from '@internationalized/date';
+import {DateRange, DateValue} from '@react-types/calendar';
+import {RangeCalendarProps} from '@react-types/calendar';
+import {RangeCalendarState} from './types';
+import {RangeValue} from '@react-types/shared';
+import {useCalendarState} from './useCalendarState';
+import {useControlledState} from '@react-stately/utils';
+import {useState} from 'react';
+
+interface RangeCalendarStateOptions<T extends DateValue> extends RangeCalendarProps<T> {
+  locale: string,
+  createCalendar: (name: string) => Calendar,
+  visibleDuration?: Duration
+}
+
+export function useRangeCalendarState<T extends DateValue>(props: RangeCalendarStateOptions<T>): RangeCalendarState {
+  let {value: valueProp, defaultValue, onChange, createCalendar, locale, visibleDuration = {months: 1}, minValue, maxValue, ...calendarProps} = props;
+  let [value, setValue] = useControlledState<DateRange>(
+    valueProp,
+    defaultValue,
+    onChange
+  );
+
+  let [anchorDate, setAnchorDate] = useState(null);
+  let alignment: 'center' | 'start' = 'center';
+  if (value && value.start && value.end) {
+    let start = alignCenter(toCalendarDate(value.start), visibleDuration, locale, minValue, maxValue);
+    let end = start.add(visibleDuration).subtract({days: 1});
+
+    if (value.end.compare(end) > 0) {
+      alignment = 'start';
+    }
+  }
+
+  let calendar = useCalendarState({
+    ...calendarProps,
+    value: value && value.start,
+    createCalendar,
+    locale,
+    visibleDuration,
+    minValue,
+    maxValue,
+    selectionAlignment: alignment
+  });
+
+  let highlightedRange = anchorDate ? makeRange(anchorDate, calendar.focusedDate) : value && makeRange(value.start, value.end);
+  let selectDate = (date: CalendarDate) => {
+    if (props.isReadOnly) {
+      return;
+    }
+
+    if (!anchorDate) {
+      setAnchorDate(date);
+    } else {
+      let range = makeRange(anchorDate, date);
+      setValue({
+        start: convertValue(range.start, value?.start),
+        end: convertValue(range.end, value?.end)
+      });
+      setAnchorDate(null);
+    }
+  };
+
+  let [isDragging, setDragging] = useState(false);
+
+  return {
+    ...calendar,
+    value,
+    setValue,
+    anchorDate,
+    setAnchorDate,
+    highlightedRange,
+    selectFocusedDate() {
+      selectDate(calendar.focusedDate);
+    },
+    selectDate,
+    highlightDate(date) {
+      if (anchorDate) {
+        calendar.setFocusedDate(date);
+      }
+    },
+    isSelected(date) {
+      return highlightedRange && date.compare(highlightedRange.start) >= 0 && date.compare(highlightedRange.end) <= 0;
+    },
+    isDragging,
+    setDragging
+  };
+}
+
+function makeRange(start: DateValue, end: DateValue): RangeValue<CalendarDate> {
+  if (!start || !end) {
+    return null;
+  }
+
+  if (end.compare(start) < 0) {
+    [start, end] = [end, start];
+  }
+
+  return {start: toCalendarDate(start), end: toCalendarDate(end)};
+}
+
+function convertValue(newValue: CalendarDate, oldValue: DateValue) {
+  // The display calendar should not have any effect on the emitted value.
+  // Emit dates in the same calendar as the original value, if any, otherwise gregorian.
+  newValue = toCalendar(newValue, oldValue?.calendar || new GregorianCalendar());
+
+  // Preserve time if the input value had one.
+  if (oldValue && 'hour' in oldValue) {
+    return oldValue.set(newValue);
+  }
+
+  return newValue;
+}

package/src/utils.ts

@@ -0,0 +1,107 @@
+/*
+ * 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,
+  Duration,
+  maxDate,
+  minDate,
+  startOfMonth,
+  startOfWeek,
+  startOfYear,
+  toCalendarDate
+} from '@internationalized/date';
+import {DateValue} from '@react-types/calendar';
+
+export function isInvalid(date: CalendarDate, minValue: DateValue, maxValue: DateValue) {
+  return (minValue != null && date.compare(minValue) < 0) ||
+    (maxValue != null && date.compare(maxValue) > 0);
+}
+
+export function alignCenter(date: CalendarDate, duration: Duration, locale: string, minValue?: DateValue, maxValue?: DateValue) {
+  let halfDuration: Duration = {};
+  for (let key in duration) {
+    halfDuration[key] = Math.floor(duration[key] / 2);
+    if (halfDuration[key] > 0 && duration[key] % 2 === 0) {
+      halfDuration[key]--;
+    }
+  }
+
+  let aligned = alignStart(date, duration, locale).subtract(halfDuration);
+  return constrainStart(date, aligned, duration, locale, minValue, maxValue);
+}
+
+export function alignStart(date: CalendarDate, duration: Duration, locale: string, minValue?: DateValue, maxValue?: DateValue) {
+  // align to the start of the largest unit
+  let aligned = date;
+  if (duration.years) {
+    aligned = startOfYear(date);
+  } else if (duration.months) {
+    aligned = startOfMonth(date);
+  } else if (duration.weeks) {
+    aligned = startOfWeek(date, locale);
+  }
+
+  return constrainStart(date, aligned, duration, locale, minValue, maxValue);
+}
+
+export function alignEnd(date: CalendarDate, duration: Duration, locale: string, minValue?: DateValue, maxValue?: DateValue) {
+  let d = {...duration};
+  // subtract 1 from the smallest unit
+  if (duration.days) {
+    d.days--;
+  } else if (duration.weeks) {
+    d.weeks--;
+  } else if (duration.months) {
+    d.months--;
+  } else if (duration.years) {
+    d.years--;
+  }
+
+  let aligned = alignStart(date, duration, locale).subtract(d);
+  return constrainStart(date, aligned, duration, locale, minValue, maxValue);
+}
+
+export function constrainStart(
+  date: CalendarDate,
+  aligned: CalendarDate,
+  duration: Duration,
+  locale: string,
+  minValue: DateValue,
+  maxValue: DateValue) {
+  if (minValue && date.compare(minValue) >= 0) {
+    aligned = maxDate(
+      aligned,
+      alignStart(toCalendarDate(minValue), duration, locale)
+    );
+  }
+
+  if (maxValue && date.compare(maxValue) <= 0) {
+    aligned = minDate(
+      aligned,
+      alignEnd(toCalendarDate(maxValue), duration, locale)
+    );
+  }
+
+  return aligned;
+}
+
+export function constrainValue(date: CalendarDate, minValue: DateValue, maxValue: DateValue) {
+  if (minValue) {
+    date = maxDate(date, toCalendarDate(minValue));
+  }
+
+  if (maxValue) {
+    date = minDate(date, toCalendarDate(maxValue));
+  }
+
+  return date;
+}