@react-stately/datepicker 3.0.0-alpha.0

package/src/useDateRangePickerState.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 {createPlaceholderDate, FieldOptions, getFormatOptions, getPlaceholderTime, isInvalid, useDefaultProps} from './utils';
+import {DateFormatter, toCalendarDateTime, toDateFields} from '@internationalized/date';
+import {DateRange, DateRangePickerProps, DateValue, Granularity, TimeValue} from '@react-types/datepicker';
+import {RangeValue, ValidationState} from '@react-types/shared';
+import {useControlledState} from '@react-stately/utils';
+import {useRef, useState} from 'react';
+
+type TimeRange = RangeValue<TimeValue>;
+export interface DateRangePickerState {
+  value: DateRange,
+  setValue: (value: DateRange) => void,
+  setDate: (part: keyof DateRange, value: DateValue) => void,
+  setTime: (part: keyof TimeRange, value: TimeValue) => void,
+  setDateTime: (part: keyof DateRange, value: DateValue) => void,
+  dateRange: DateRange,
+  setDateRange: (value: DateRange) => void,
+  timeRange: TimeRange,
+  setTimeRange: (value: TimeRange) => void,
+  isOpen: boolean,
+  setOpen: (isOpen: boolean) => void,
+  validationState: ValidationState,
+  formatValue(locale: string, fieldOptions: FieldOptions): string,
+  confirmPlaceholder(): void,
+  granularity: Granularity
+}
+
+export function useDateRangePickerState<T extends DateValue>(props: DateRangePickerProps<T>): DateRangePickerState {
+  let [isOpen, setOpen] = useState(false);
+  let [controlledValue, setControlledValue] = useControlledState<DateRange>(props.value, props.defaultValue || null, props.onChange);
+  let [placeholderValue, setPlaceholderValue] = useState(() => controlledValue || {start: null, end: null});
+
+  // Reset the placeholder if the value prop is set to null.
+  if (controlledValue == null && placeholderValue.start && placeholderValue.end) {
+    placeholderValue = {start: null, end: null};
+    setPlaceholderValue(placeholderValue);
+  }
+
+  let value = controlledValue || placeholderValue;
+  let valueRef = useRef(value);
+  valueRef.current = value;
+
+  let setValue = (value: DateRange) => {
+    valueRef.current = value;
+    setPlaceholderValue(value);
+    if (value?.start && value.end) {
+      setControlledValue(value);
+    } else {
+      setControlledValue(null);
+    }
+  };
+
+  let v = (value?.start || value?.end || props.placeholderValue);
+  let [granularity, defaultTimeZone] = useDefaultProps(v, props.granularity);
+  let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second' || granularity === 'millisecond';
+
+  let [dateRange, setSelectedDateRange] = useState<DateRange>(null);
+  let [timeRange, setSelectedTimeRange] = useState<TimeRange>(null);
+
+  if (value && value.start && value.end) {
+    dateRange = value;
+    if ('hour' in value.start) {
+      timeRange = value as TimeRange;
+    }
+  }
+
+  let commitValue = (dateRange: DateRange, timeRange: TimeRange) => {
+    setValue({
+      start: 'timeZone' in timeRange.start ? timeRange.start.set(toDateFields(dateRange.start)) : toCalendarDateTime(dateRange.start, timeRange.start),
+      end: 'timeZone' in timeRange.end ? timeRange.end.set(toDateFields(dateRange.end)) : toCalendarDateTime(dateRange.end, timeRange.end)
+    });
+  };
+
+  // Intercept setValue to make sure the Time section is not changed by date selection in Calendar
+  let setDateRange = (range: DateRange) => {
+    if (hasTime) {
+      if (range.start && range.end && timeRange?.start && timeRange?.end) {
+        commitValue(range, timeRange);
+      } else {
+        setSelectedDateRange(range);
+      }
+    } else if (range.start && range.end) {
+      setValue(range);
+    } else {
+      setSelectedDateRange(range);
+    }
+
+    if (!hasTime) {
+      setOpen(false);
+    }
+  };
+
+  let setTimeRange = (range: TimeRange) => {
+    if (dateRange?.start && dateRange?.end && range.start && range.end) {
+      commitValue(dateRange, range);
+    } else {
+      setSelectedTimeRange(range);
+    }
+  };
+
+  let validationState: ValidationState = props.validationState
+    || (value != null && (
+      isInvalid(value.start, props.minValue, props.maxValue) ||
+      isInvalid(value.end, props.minValue, props.maxValue) ||
+      (value.end != null && value.start != null && value.end.compare(value.start) < 0)
+    ) ? 'invalid' : null);
+
+  return {
+    value,
+    setValue,
+    dateRange,
+    timeRange,
+    granularity,
+    setDate(part, date) {
+      setDateRange({...dateRange, [part]: date});
+    },
+    setTime(part, time) {
+      setTimeRange({...timeRange, [part]: time});
+    },
+    setDateTime(part, dateTime) {
+      setValue({...value, [part]: dateTime});
+    },
+    setDateRange,
+    setTimeRange,
+    isOpen,
+    setOpen(isOpen) {
+      // Commit the selected date range when the calendar is closed. Use a placeholder time if one wasn't set.
+      // If only the time range was set and not the date range, don't commit. The state will be preserved until
+      // the user opens the popover again.
+      if (!isOpen && !(value?.start && value?.end) && dateRange?.start && dateRange?.end && hasTime) {
+        commitValue(dateRange, {
+          start: timeRange?.start || getPlaceholderTime(props.placeholderValue),
+          end: timeRange?.end || getPlaceholderTime(props.placeholderValue)
+        });
+      }
+
+      setOpen(isOpen);
+    },
+    validationState,
+    formatValue(locale, fieldOptions) {
+      if (!value || !value.start || !value.end) {
+        return '';
+      }
+
+      let startTimeZone = 'timeZone' in value.start ? value.start.timeZone : undefined;
+      let startGranularity = props.granularity || (value.start && 'minute' in value.start ? 'minute' : 'day');
+      let endTimeZone = 'timeZone' in value.end ? value.end.timeZone : undefined;
+      let endGranularity = props.granularity || (value.end && 'minute' in value.end ? 'minute' : 'day');
+
+      let startOptions = getFormatOptions(fieldOptions, {
+        granularity: startGranularity,
+        timeZone: startTimeZone,
+        hideTimeZone: props.hideTimeZone,
+        hourCycle: props.hourCycle
+      });
+
+      let startFormatter = new DateFormatter(locale, startOptions);
+      let endFormatter: Intl.DateTimeFormat;
+      if (startTimeZone === endTimeZone && startGranularity === endGranularity) {
+        // Use formatRange, as it results in shorter output when some of the fields
+        // are shared between the start and end dates (e.g. the same month).
+        // Formatting will fail if the end date is before the start date. Fall back below when that happens.
+        try {
+          return startFormatter.formatRange(value.start.toDate(startTimeZone), value.end.toDate(endTimeZone));
+        } catch (e) {
+          // ignore
+        }
+
+        endFormatter = startFormatter;
+      } else {
+        let endOptions = getFormatOptions(fieldOptions, {
+          granularity: endGranularity,
+          timeZone: endTimeZone,
+          hideTimeZone: props.hideTimeZone,
+          hourCycle: props.hourCycle
+        });
+
+        endFormatter = new DateFormatter(locale, endOptions);
+      }
+
+      return `${startFormatter.format(value.start.toDate(startTimeZone))} – ${endFormatter.format(value.end.toDate(endTimeZone))}`;
+    },
+    confirmPlaceholder() {
+      // Need to use ref value here because the value can be set in the same tick as
+      // a blur, which means the component won't have re-rendered yet.
+      let value = valueRef.current;
+      if (value && Boolean(value.start) !== Boolean(value.end)) {
+        let calendar = (value.start || value.end).calendar;
+        let placeholder = createPlaceholderDate(props.placeholderValue, granularity, calendar, defaultTimeZone);
+        setValue({
+          start: value.start || placeholder,
+          end: value.end || placeholder
+        });
+      }
+    }
+  };
+}

package/src/useTimeFieldState.ts

@@ -0,0 +1,72 @@
+/*
+ * 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 {Calendar, getLocalTimeZone, Time, toCalendarDateTime, today, toTime} from '@internationalized/date';
+import {DateValue, TimePickerProps, TimeValue} from '@react-types/datepicker';
+import {useControlledState} from '@react-stately/utils';
+import {useDatePickerFieldState} from '.';
+import {useMemo} from 'react';
+
+interface TimeFieldProps<T extends TimeValue> extends TimePickerProps<T> {
+  locale: string,
+  createCalendar: (name: string) => Calendar
+}
+
+export function useTimeFieldState<T extends TimeValue>(props: TimeFieldProps<T>) {
+  let {
+    placeholderValue = new Time(),
+    minValue,
+    maxValue,
+    granularity
+  } = props;
+
+  let [value, setValue] = useControlledState<TimeValue>(
+    props.value,
+    props.defaultValue,
+    props.onChange
+  );
+
+  let v = value || placeholderValue;
+  let day = v && 'day' in v ? v : undefined;
+  let placeholderDate = useMemo(() => convertValue(placeholderValue), [placeholderValue]);
+  let minDate = useMemo(() => convertValue(minValue, day), [minValue, day]);
+  let maxDate = useMemo(() => convertValue(maxValue, day), [maxValue, day]);
+
+  let dateTime = useMemo(() => value == null ? null : convertValue(value), [value]);
+  let onChange = newValue => {
+    setValue(v && 'day' in v ? newValue : newValue && toTime(newValue));
+  };
+
+  return useDatePickerFieldState({
+    ...props,
+    value: dateTime,
+    defaultValue: undefined,
+    minValue: minDate,
+    maxValue: maxDate,
+    onChange,
+    granularity: granularity || 'minute',
+    maxGranularity: 'hour',
+    placeholderValue: placeholderDate
+  });
+}
+
+function convertValue(value: TimeValue, date: DateValue = today(getLocalTimeZone())) {
+  if (!value) {
+    return null;
+  }
+
+  if ('day' in value) {
+    return value;
+  }
+
+  return toCalendarDateTime(date, value);
+}

package/src/utils.ts

@@ -0,0 +1,143 @@
+/*
+ * 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 {Calendar, now, Time, toCalendar, toCalendarDate, toCalendarDateTime} from '@internationalized/date';
+import {DatePickerProps, DateValue, Granularity, TimeValue} from '@react-types/datepicker';
+import {useRef} from 'react';
+
+export function isInvalid(value: DateValue, minValue: DateValue, maxValue: DateValue) {
+  return value != null && (
+    (minValue != null && value.compare(minValue) < 0) ||
+    (maxValue != null && value.compare(maxValue) > 0)
+  );
+}
+
+export type FieldOptions = Pick<Intl.DateTimeFormatOptions, 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second'>;
+interface FormatterOptions {
+  timeZone?: string,
+  hideTimeZone?: boolean,
+  granularity?: DatePickerProps<any>['granularity'],
+  maxGranularity?: 'year' | 'month' | DatePickerProps<any>['granularity'],
+  hourCycle?: 12 | 24
+}
+
+const DEFAULT_FIELD_OPTIONS: FieldOptions = {
+  year: 'numeric',
+  month: 'numeric',
+  day: 'numeric',
+  hour: 'numeric',
+  minute: '2-digit',
+  second: '2-digit'
+};
+
+export function getFormatOptions(
+  fieldOptions: FieldOptions,
+  options: FormatterOptions
+): Intl.DateTimeFormatOptions {
+  fieldOptions = {...DEFAULT_FIELD_OPTIONS, ...fieldOptions};
+  let granularity = options.granularity || 'minute';
+  let keys = Object.keys(fieldOptions);
+  let startIdx = keys.indexOf(options.maxGranularity ?? 'year');
+  if (startIdx < 0) {
+    startIdx = 0;
+  }
+
+  let endIdx = keys.indexOf(granularity);
+  if (endIdx < 0) {
+    endIdx = 2;
+  }
+
+  if (startIdx > endIdx) {
+    throw new Error('maxGranularity must be greater than granularity');
+  }
+
+  let opts: Intl.DateTimeFormatOptions = keys.slice(startIdx, endIdx + 1).reduce((opts, key) => {
+    opts[key] = fieldOptions[key];
+    return opts;
+  }, {});
+
+  if (options.hourCycle != null) {
+    opts.hour12 = options.hourCycle === 12;
+  }
+
+  opts.timeZone = options.timeZone || 'UTC';
+
+  let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second';
+  if (hasTime && options.timeZone && !options.hideTimeZone) {
+    opts.timeZoneName = 'short';
+  }
+
+  return opts;
+}
+
+export function getPlaceholderTime(placeholderValue: DateValue): TimeValue {
+  if (placeholderValue && 'hour' in placeholderValue) {
+    return placeholderValue;
+  }
+
+  return new Time();
+}
+
+export function convertValue(value: DateValue, calendar: Calendar): DateValue {
+  if (value === null) {
+    return null;
+  }
+
+  if (!value) {
+    return undefined;
+  }
+
+  return toCalendar(value, calendar);
+}
+
+
+export function createPlaceholderDate(placeholderValue: DateValue, granularity: string, calendar: Calendar, timeZone: string) {
+  if (placeholderValue) {
+    return convertValue(placeholderValue, calendar);
+  }
+
+  let date = toCalendar(now(timeZone).set({
+    hour: 0,
+    minute: 0,
+    second: 0,
+    millisecond: 0
+  }), calendar);
+
+  if (granularity === 'year' || granularity === 'month' || granularity === 'day') {
+    return toCalendarDate(date);
+  }
+
+  if (!timeZone) {
+    return toCalendarDateTime(date);
+  }
+
+  return date;
+}
+
+export function useDefaultProps(v: DateValue, granularity: Granularity): [Granularity, string] {
+  // Compute default granularity and time zone from the value. If the value becomes null, keep the last values.
+  let lastValue = useRef(v);
+  if (v) {
+    lastValue.current = v;
+  }
+
+  v = lastValue.current;
+  let defaultTimeZone = (v && 'timeZone' in v ? v.timeZone : undefined);
+  granularity = granularity || (v && 'minute' in v ? 'minute' : 'day');
+
+  // props.granularity must actually exist in the value if one is provided.
+  if (v && !(granularity in v)) {
+    throw new Error('Invalid granularity ' + granularity + ' for value ' + v.toString());
+  }
+
+  return [granularity, defaultTimeZone];
+}