@react-stately/datepicker 3.0.0-rc.0 → 3.0.1

package/src/useDateFieldState.ts

@@ -13,6 +13,7 @@
 import {Calendar, DateFormatter, getMinimumDayInMonth, getMinimumMonthInYear, GregorianCalendar, toCalendar} from '@internationalized/date';
 import {convertValue, createPlaceholderDate, FieldOptions, getFormatOptions, isInvalid, useDefaultProps} from './utils';
 import {DatePickerProps, DateValue, Granularity} from '@react-types/datepicker';
+import {getPlaceholder} from './placeholders';
 import {useControlledState} from '@react-stately/utils';
 import {useEffect, useMemo, useRef, useState} from 'react';
 import {ValidationState} from '@react-types/shared';
@@ -31,6 +32,8 @@ export interface DateSegment {
   maxValue?: number,
   /** Whether the value is a placeholder. */
   isPlaceholder: boolean,
+  /** A placeholder string for the segment. */
+  placeholder: string,
   /** Whether the segment is editable. */
   isEditable: boolean
 }
@@ -40,6 +43,8 @@ export interface DateFieldState {
   value: DateValue,
   /** The current value, converted to a native JavaScript `Date` object.  */
   dateValue: Date,
+  /** The calendar system currently in use. */
+  calendar: Calendar,
   /** Sets the field's value. */
   setValue(value: DateValue): void,
   /** A list of segments for the current value. */
@@ -75,12 +80,10 @@ export interface DateFieldState {
    */
   decrementPage(type: SegmentType): void,
   /** Sets the value of the given segment. */
+  setSegment(type: 'era', value: string): void,
   setSegment(type: SegmentType, value: number): void,
-  /**
-   * Replaces the value of the date field with the placeholder value.
-   * If a segment type is provided, only that segment is confirmed. Otherwise, all segments that have not been entered yet are confirmed.
-   */
-  confirmPlaceholder(type?: SegmentType): void,
+  /** Updates the remaining unfilled segments with the placeholder value. */
+  confirmPlaceholder(): void,
   /** Clears the value of the given segment, reverting it to the placeholder. */
   clearSegment(type: SegmentType): void,
   /** Formats the current date value using the given options. */
@@ -153,22 +156,43 @@ export function useDateFieldState(props: DateFieldStateOptions): DateFieldState
     throw new Error('Invalid granularity ' + granularity + ' for value ' + v.toString());
   }
 
+  let defaultFormatter = useMemo(() => new DateFormatter(locale), [locale]);
+  let calendar = useMemo(() => createCalendar(defaultFormatter.resolvedOptions().calendar), [createCalendar, defaultFormatter]);
+
+  let [value, setDate] = useControlledState<DateValue>(
+    props.value,
+    props.defaultValue,
+    props.onChange
+  );
+
+  let calendarValue = useMemo(() => convertValue(value, calendar), [value, calendar]);
+
+  // We keep track of the placeholder date separately in state so that onChange is not called
+  // until all segments are set. If the value === null (not undefined), then assume the component
+  // is controlled, so use the placeholder as the value until all segments are entered so it doesn't
+  // change from uncontrolled to controlled and emit a warning.
+  let [placeholderDate, setPlaceholderDate] = useState(
+    () => createPlaceholderDate(props.placeholderValue, granularity, calendar, defaultTimeZone)
+  );
+
+  let val = calendarValue || placeholderDate;
+  let showEra = calendar.identifier === 'gregory' && val.era === 'BC';
   let formatOpts = useMemo(() => ({
     granularity,
     maxGranularity: props.maxGranularity ?? 'year',
     timeZone: defaultTimeZone,
     hideTimeZone,
-    hourCycle: props.hourCycle
-  }), [props.maxGranularity, granularity, props.hourCycle, defaultTimeZone, hideTimeZone]);
+    hourCycle: props.hourCycle,
+    showEra
+  }), [props.maxGranularity, granularity, props.hourCycle, defaultTimeZone, hideTimeZone, showEra]);
   let opts = useMemo(() => getFormatOptions({}, formatOpts), [formatOpts]);
 
   let dateFormatter = useMemo(() => new DateFormatter(locale, opts), [locale, opts]);
   let resolvedOptions = useMemo(() => dateFormatter.resolvedOptions(), [dateFormatter]);
-  let calendar = useMemo(() => createCalendar(resolvedOptions.calendar), [createCalendar, resolvedOptions.calendar]);
 
   // Determine how many editable segments there are for validation purposes.
   // The result is cached for performance.
-  let allSegments = useMemo(() =>
+  let allSegments: Partial<typeof EDITABLE_SEGMENTS> = useMemo(() =>
     dateFormatter.formatToParts(new Date())
       .filter(seg => EDITABLE_SEGMENTS[seg.type])
       .reduce((p, seg) => (p[seg.type] = true, p), {})
@@ -178,14 +202,6 @@ export function useDateFieldState(props: DateFieldStateOptions): DateFieldState
     () => props.value || props.defaultValue ? {...allSegments} : {}
   );
 
-  // We keep track of the placeholder date separately in state so that onChange is not called
-  // until all segments are set. If the value === null (not undefined), then assume the component
-  // is controlled, so use the placeholder as the value until all segments are entered so it doesn't
-  // change from uncontrolled to controlled and emit a warning.
-  let [placeholderDate, setPlaceholderDate] = useState(
-    () => createPlaceholderDate(props.placeholderValue, granularity, calendar, defaultTimeZone)
-  );
-
   // Reset placeholder when calendar changes
   let lastCalendarIdentifier = useRef(calendar.identifier);
   useEffect(() => {
@@ -199,14 +215,6 @@ export function useDateFieldState(props: DateFieldStateOptions): DateFieldState
     }
   }, [calendar, granularity, validSegments, defaultTimeZone, props.placeholderValue]);
 
-  let [value, setDate] = useControlledState<DateValue>(
-    props.value,
-    props.defaultValue,
-    props.onChange
-  );
-
-  let calendarValue = useMemo(() => convertValue(value, calendar), [value, calendar]);
-
   // If there is a value prop, and some segments were previously placeholders, mark them all as valid.
   if (value && Object.keys(validSegments).length < Object.keys(allSegments).length) {
     validSegments = {...allSegments};
@@ -246,29 +254,46 @@ export function useDateFieldState(props: DateFieldStateOptions): DateFieldState
           isEditable = false;
         }
 
+        let isPlaceholder = EDITABLE_SEGMENTS[segment.type] && !validSegments[segment.type];
+        let placeholder = EDITABLE_SEGMENTS[segment.type] ? getPlaceholder(segment.type, segment.value, locale) : null;
         return {
           type: TYPE_MAPPING[segment.type] || segment.type,
-          text: segment.value,
+          text: isPlaceholder ? placeholder : segment.value,
           ...getSegmentLimits(displayValue, segment.type, resolvedOptions),
-          isPlaceholder: EDITABLE_SEGMENTS[segment.type] && !validSegments[segment.type],
+          isPlaceholder,
+          placeholder,
           isEditable
         } as DateSegment;
       })
-  , [dateValue, validSegments, dateFormatter, resolvedOptions, displayValue, calendar]);
+  , [dateValue, validSegments, dateFormatter, resolvedOptions, displayValue, calendar, locale]);
 
-  let hasEra = useMemo(() => segments.some(s => s.type === 'era'), [segments]);
+  // When the era field appears, mark it valid if the year field is already valid.
+  // If the era field disappears, remove it from the valid segments.
+  if (allSegments.era && validSegments.year && !validSegments.era) {
+    validSegments.era = true;
+    setValidSegments({...validSegments});
+  } else if (!allSegments.era && validSegments.era) {
+    delete validSegments.era;
+    setValidSegments({...validSegments});
+  }
 
   let markValid = (part: Intl.DateTimeFormatPartTypes) => {
     validSegments[part] = true;
-    if (part === 'year' && hasEra) {
+    if (part === 'year' && allSegments.era) {
       validSegments.era = true;
     }
     setValidSegments({...validSegments});
   };
 
   let adjustSegment = (type: Intl.DateTimeFormatPartTypes, amount: number) => {
-    markValid(type);
-    setValue(addSegment(displayValue, type, amount, resolvedOptions));
+    if (!validSegments[type]) {
+      markValid(type);
+      if (Object.keys(validSegments).length >= Object.keys(allSegments).length) {
+        setValue(displayValue);
+      }
+    } else {
+      setValue(addSegment(displayValue, type, amount, resolvedOptions));
+    }
   };
 
   let validationState: ValidationState = props.validationState ||
@@ -277,6 +302,7 @@ export function useDateFieldState(props: DateFieldStateOptions): DateFieldState
   return {
     value: calendarValue,
     dateValue,
+    calendar,
     setValue,
     segments,
     dateFormatter,
@@ -302,21 +328,17 @@ export function useDateFieldState(props: DateFieldStateOptions): DateFieldState
       markValid(part);
       setValue(setSegment(displayValue, part, v, resolvedOptions));
     },
-    confirmPlaceholder(part) {
+    confirmPlaceholder() {
       if (props.isDisabled || props.isReadOnly) {
         return;
       }
 
-      if (!part) {
-        // Confirm the rest of the placeholder if any of the segments are valid.
-        let numValid = Object.keys(validSegments).length;
-        if (numValid > 0 && numValid < Object.keys(allSegments).length) {
-          validSegments = {...allSegments};
-          setValidSegments(validSegments);
-          setValue(displayValue.copy());
-        }
-      } else if (!validSegments[part]) {
-        markValid(part);
+      // Confirm the placeholder if only the day period is not filled in.
+      let validKeys = Object.keys(validSegments);
+      let allKeys = Object.keys(allSegments);
+      if (validKeys.length === allKeys.length - 1 && allSegments.dayPeriod && !validSegments.dayPeriod) {
+        validSegments = {...allSegments};
+        setValidSegments(validSegments);
         setValue(displayValue.copy());
       }
     },
@@ -458,6 +480,7 @@ function setSegment(value: DateValue, part: string, segmentValue: number, option
     case 'day':
     case 'month':
     case 'year':
+    case 'era':
       return value.set({[part]: segmentValue});
   }
 

package/src/useDatePickerState.ts

@@ -153,7 +153,8 @@ export function useDatePickerState(props: DatePickerStateOptions): DatePickerSta
         granularity,
         timeZone: defaultTimeZone,
         hideTimeZone: props.hideTimeZone,
-        hourCycle: props.hourCycle
+        hourCycle: props.hourCycle,
+        showEra: value.calendar.identifier === 'gregory' && value.era === 'BC'
       });
 
       let formatter = new DateFormatter(locale, formatOptions);

package/src/useDateRangePickerState.ts

@@ -10,13 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
-import {createPlaceholderDate, FieldOptions, getFormatOptions, getPlaceholderTime, isInvalid, useDefaultProps} from './utils';
 import {DateFormatter, toCalendarDate, toCalendarDateTime} from '@internationalized/date';
 import {DateRange, DateRangePickerProps, DateValue, Granularity, TimeValue} from '@react-types/datepicker';
+import {FieldOptions, getFormatOptions, getPlaceholderTime, isInvalid, useDefaultProps} from './utils';
 import {RangeValue, ValidationState} from '@react-types/shared';
 import {useControlledState} from '@react-stately/utils';
 import {useOverlayTriggerState} from '@react-stately/overlays';
-import {useRef, useState} from 'react';
+import {useState} from 'react';
 
 export interface DateRangePickerStateOptions extends DateRangePickerProps<DateValue> {
   /**
@@ -63,9 +63,7 @@ export interface DateRangePickerState {
   /** The current validation state of the date picker, based on the `validationState`, `minValue`, and `maxValue` props. */
   validationState: ValidationState,
   /** Formats the selected range using the given options. */
-  formatValue(locale: string, fieldOptions: FieldOptions): {start: string, end: string},
-  /** Replaces the start and/or end value of the selected range with the placeholder value if unentered. */
-  confirmPlaceholder(): void
+  formatValue(locale: string, fieldOptions: FieldOptions): {start: string, end: string}
 }
 
 /**
@@ -85,11 +83,8 @@ export function useDateRangePickerState(props: DateRangePickerStateOptions): Dat
   }
 
   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);
@@ -99,7 +94,7 @@ export function useDateRangePickerState(props: DateRangePickerStateOptions): Dat
   };
 
   let v = (value?.start || value?.end || props.placeholderValue);
-  let [granularity, defaultTimeZone] = useDefaultProps(v, props.granularity);
+  let [granularity] = useDefaultProps(v, props.granularity);
   let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second' || granularity === 'millisecond';
   let shouldCloseOnSelect = props.shouldCloseOnSelect ?? true;
 
@@ -207,7 +202,9 @@ export function useDateRangePickerState(props: DateRangePickerStateOptions): Dat
         granularity: startGranularity,
         timeZone: startTimeZone,
         hideTimeZone: props.hideTimeZone,
-        hourCycle: props.hourCycle
+        hourCycle: props.hourCycle,
+        showEra: (value.start.calendar.identifier === 'gregory' && value.start.era === 'BC') ||
+          (value.end.calendar.identifier === 'gregory' && value.end.era === 'BC')
       });
 
       let startDate = value.start.toDate(startTimeZone || 'UTC');
@@ -266,19 +263,6 @@ export function useDateRangePickerState(props: DateRangePickerStateOptions): Dat
         start: startFormatter.format(startDate),
         end: endFormatter.format(endDate)
       };
-    },
-    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/utils.ts

@@ -27,7 +27,8 @@ interface FormatterOptions {
   hideTimeZone?: boolean,
   granularity?: DatePickerProps<any>['granularity'],
   maxGranularity?: 'year' | 'month' | DatePickerProps<any>['granularity'],
-  hourCycle?: 12 | 24
+  hourCycle?: 12 | 24,
+  showEra?: boolean
 }
 
 const DEFAULT_FIELD_OPTIONS: FieldOptions = {
@@ -76,6 +77,10 @@ export function getFormatOptions(
     opts.timeZoneName = 'short';
   }
 
+  if (options.showEra && startIdx === 0) {
+    opts.era = 'short';
+  }
+
   return opts;
 }