Prevent crashing of doc's date events and invalid examples (#4777)

ktabors · web-flow · commit 84a1f0fc20d4 · 2023-07-18T23:23:12.000-07:00
* RAC date - fixes the events and invalid examples crashing

* making DateField rac, rsp, and aria event and validation examples consistent

* fixing the TimeField validation example
diff --git a/packages/@react-aria/datepicker/docs/useDateField.mdx b/packages/@react-aria/datepicker/docs/useDateField.mdx
@@ -241,7 +241,7 @@ function Example() {
   return (
     <>
       <DateField label="Birth date" value={date} onChange={setDate} />
-      <p>Selected date: {formatter.format(date.toDate(getLocalTimeZone()))}</p>
+      <p>Selected date: {date ? formatter.format(date.toDate(getLocalTimeZone())) : '--'}</p>
     </>
   );
 }
diff --git a/packages/@react-aria/datepicker/docs/useDatePicker.mdx b/packages/@react-aria/datepicker/docs/useDatePicker.mdx
@@ -521,7 +521,7 @@ function Example() {
   return (
     <>
       <DatePicker label="Birth date" value={date} onChange={setDate} />
-      <p>Selected date: {formatter.format(date.toDate(getLocalTimeZone()))}</p>
+      <p>Selected date: {date ? formatter.format(date.toDate(getLocalTimeZone())) : '--'}</p>
     </>
   );
 }
diff --git a/packages/@react-aria/datepicker/docs/useDateRangePicker.mdx b/packages/@react-aria/datepicker/docs/useDateRangePicker.mdx
@@ -543,7 +543,7 @@ function Example() {
   return (
     <>
       <DateRangePicker label="Date range" value={range} onChange={setRange} />
-      <p>Selected date: {formatter.formatRange(range.start.toDate(getLocalTimeZone()), range.end.toDate(getLocalTimeZone()))}</p>
+      <p>Selected date: {range ? formatter.formatRange(range.start.toDate(getLocalTimeZone()), range.end.toDate(getLocalTimeZone())) : '--'}</p>
     </>
   );
 }
diff --git a/packages/@react-aria/datepicker/docs/useTimeField.mdx b/packages/@react-aria/datepicker/docs/useTimeField.mdx
@@ -264,7 +264,7 @@ function Example() {
   return (
     <>
       <TimeField label="Time" value={date} onChange={setDate} />
-      <p>Selected date and time: {formatter.format(date.toDate())}</p>
+      <p>Selected date and time: {(date?.toDate && formatter.format(date.toDate())) || (date && date.toString()) || '--'}</p>
     </>
   );
 }
diff --git a/packages/@react-spectrum/datepicker/docs/DateField.mdx b/packages/@react-spectrum/datepicker/docs/DateField.mdx
@@ -230,7 +230,7 @@ function Example() {
       label="Appointment date"
       value={date}
       onChange={setDate}
-      validationState={isWeekend(date, locale) ? 'invalid' : 'valid'}
+      validationState={date && isWeekend(date, locale) ? 'invalid' : 'valid'}
       description="Select a weekday"
       errorMessage="We are closed on weekends" />
   );
diff --git a/packages/@react-spectrum/datepicker/docs/DatePicker.mdx b/packages/@react-spectrum/datepicker/docs/DatePicker.mdx
@@ -204,7 +204,7 @@ function Example() {
   return (
     <>
       <DatePicker label="Birth date" value={date} onChange={setDate} />
-      <p>Selected date: {formatter.format(date.toDate(getLocalTimeZone()))}</p>
+      <p>Selected date: {date ? formatter.format(date.toDate(getLocalTimeZone())) : '--'}</p>
     </>
   );
 }
@@ -229,7 +229,7 @@ function Example() {
       label="Appointment date"
       value={date}
       onChange={setDate}
-      validationState={isWeekend(date, locale) ? 'invalid' : 'valid'}
+      validationState={date && isWeekend(date, locale) ? 'invalid' : 'valid'}
       description="Select a weekday"
       errorMessage="We are closed on weekends" />
   );
diff --git a/packages/@react-spectrum/datepicker/docs/DateRangePicker.mdx b/packages/@react-spectrum/datepicker/docs/DateRangePicker.mdx
@@ -224,7 +224,7 @@ function Example() {
   return (
     <>
       <DateRangePicker label="Date range" value={range} onChange={setRange} />
-      <p>Selected date: {formatter.formatRange(range.start.toDate(getLocalTimeZone()), range.end.toDate(getLocalTimeZone()))}</p>
+      <p>Selected date: {range ? formatter.formatRange(range.start.toDate(getLocalTimeZone()), range.end.toDate(getLocalTimeZone())) : '--'}</p>
     </>
   );
 }
@@ -250,7 +250,7 @@ function Example() {
       label="Date range"
       value={range}
       onChange={setRange}
-      validationState={isSameMonth(range.start, range.end) ? 'valid' : 'invalid'}
+      validationState={range && !isSameMonth(range.start, range.end) ? 'invalid' : 'valid'}
       description="Select a range within the same month"
       errorMessage="Start and end dates must be in the same month" />
   );
diff --git a/packages/@react-spectrum/datepicker/docs/TimeField.mdx b/packages/@react-spectrum/datepicker/docs/TimeField.mdx
@@ -149,7 +149,7 @@ function Example() {
   return (
     <>
       <TimeField label="Time" value={date} onChange={setDate} />
-      <p>Selected date and time: {formatter.format(date.toDate())}</p>
+      <p>Selected date and time: {(date?.toDate && formatter.format(date.toDate())) || (date && date.toString()) || '--'}</p>
     </>
   );
 }
@@ -170,7 +170,7 @@ function Example() {
       label="Meeting time"
       value={time}
       onChange={setTime}
-      validationState={time.minute % 15 ? 'invalid' : 'valid'}
+      validationState={time?.minute % 15 ? 'invalid' : 'valid'}
       description="Select a meeting time"
       errorMessage="Meetings start every 15 minutes." />
   );
diff --git a/packages/react-aria-components/docs/DateField.mdx b/packages/react-aria-components/docs/DateField.mdx
@@ -385,7 +385,7 @@ function Example() {
   return (
     <>
       <MyDateField label="Birth date" value={date} onChange={setDate} />
-      <p>Selected date: {formatter.format(date.toDate(getLocalTimeZone()))}</p>
+      <p>Selected date: {date ? formatter.format(date.toDate(getLocalTimeZone())) : '--'}</p>
     </>
   );
 }
@@ -512,7 +512,7 @@ import {useLocale} from 'react-aria';
 function Example() {
   let [date, setDate] = React.useState(today(getLocalTimeZone()));
   let {locale} = useLocale();
-  let isInvalid = isWeekend(date, locale);
+  let isInvalid = date && isWeekend(date, locale);
 
   return (
     <MyDateField
diff --git a/packages/react-aria-components/docs/DatePicker.mdx b/packages/react-aria-components/docs/DatePicker.mdx
@@ -817,7 +817,7 @@ function Example() {
   return (
     <>
       <MyDatePicker label="Birth date" value={date} onChange={setDate} />
-      <p>Selected date: {formatter.format(date.toDate(getLocalTimeZone()))}</p>
+      <p>Selected date: {date ? formatter.format(date.toDate(getLocalTimeZone())) : '--'}</p>
     </>
   );
 }
@@ -968,7 +968,7 @@ import {useLocale} from 'react-aria';
 function Example() {
   let [date, setDate] = React.useState(today(getLocalTimeZone()));
   let {locale} = useLocale();
-  let isInvalid = isWeekend(date, locale);
+  let isInvalid = date && isWeekend(date, locale);
 
   return (
     <MyDatePicker
diff --git a/packages/react-aria-components/docs/DateRangePicker.mdx b/packages/react-aria-components/docs/DateRangePicker.mdx
@@ -865,7 +865,7 @@ function Example() {
   return (
     <>
       <MyDateRangePicker label="Date range" value={range} onChange={setRange} />
-      <p>Selected date: {formatter.formatRange(range.start.toDate(getLocalTimeZone()), range.end.toDate(getLocalTimeZone()))}</p>
+      <p>Selected date: {range ? formatter.formatRange(range.start.toDate(getLocalTimeZone()), range.end.toDate(getLocalTimeZone())) : '--'}</p>
     </>
   );
 }
@@ -1060,7 +1060,7 @@ function Example() {
     start: today(getLocalTimeZone()),
     end: today(getLocalTimeZone()).add({ weeks: 1, days: 3 })
   });
-  let isInvalid = range.end.compare(range.start) > 7;
+  let isInvalid = range?.end.compare(range.start) > 7;
 
   return (
     <MyDateRangePicker
diff --git a/packages/react-aria-components/docs/TimeField.mdx b/packages/react-aria-components/docs/TimeField.mdx
@@ -406,7 +406,7 @@ function Example() {
   return (
     <>
       <MyTimeField label="Time" value={date} onChange={setDate} />
-      <p>Selected date and time: {formatter.format(date.toDate())}</p>
+      <p>Selected date and time: {(date?.toDate && formatter.format(date.toDate())) || (date && date.toString()) || '--'}</p>
     </>
   );
 }
@@ -446,7 +446,7 @@ This example validates that the selected time is on a 15 minute increment.
 ```tsx example
 function Example() {
   let [time, setTime] = React.useState(new Time(9, 15));
-  let isInvalid = time.minute % 15;
+  let isInvalid = time?.minute % 15;
 
   return (
     <MyTimeField

Original file line number	Diff line number	Diff line change
`@@ -241,7 +241,7 @@ function Example() {`
`241`	`241`	`return (`
`242`	`242`	`<>`
`243`	`243`	`<DateField label="Birth date" value={date} onChange={setDate} />`
`244`		`- <p>Selected date: {formatter.format(date.toDate(getLocalTimeZone()))}</p>`
	`244`	`+ <p>Selected date: {date ? formatter.format(date.toDate(getLocalTimeZone())) : '--'}</p>`
`245`	`245`	`</>`
`246`	`246`	`);`
`247`	`247`	`}`
Original file line number	Diff line number	Diff line change
`@@ -521,7 +521,7 @@ function Example() {`
`521`	`521`	`return (`
`522`	`522`	`<>`
`523`	`523`	`<DatePicker label="Birth date" value={date} onChange={setDate} />`
`524`		`- <p>Selected date: {formatter.format(date.toDate(getLocalTimeZone()))}</p>`
	`524`	`+ <p>Selected date: {date ? formatter.format(date.toDate(getLocalTimeZone())) : '--'}</p>`
`525`	`525`	`</>`
`526`	`526`	`);`
`527`	`527`	`}`
Original file line number	Diff line number	Diff line change
`@@ -543,7 +543,7 @@ function Example() {`
`543`	`543`	`return (`
`544`	`544`	`<>`
`545`	`545`	`<DateRangePicker label="Date range" value={range} onChange={setRange} />`
`546`		`- <p>Selected date: {formatter.formatRange(range.start.toDate(getLocalTimeZone()), range.end.toDate(getLocalTimeZone()))}</p>`
	`546`	`+ <p>Selected date: {range ? formatter.formatRange(range.start.toDate(getLocalTimeZone()), range.end.toDate(getLocalTimeZone())) : '--'}</p>`
`547`	`547`	`</>`
`548`	`548`	`);`
`549`	`549`	`}`
Original file line number	Diff line number	Diff line change
`@@ -264,7 +264,7 @@ function Example() {`
`264`	`264`	`return (`
`265`	`265`	`<>`
`266`	`266`	`<TimeField label="Time" value={date} onChange={setDate} />`
`267`		`- <p>Selected date and time: {formatter.format(date.toDate())}</p>`
	`267`	`+ <p>Selected date and time: {(date?.toDate && formatter.format(date.toDate())) \|\| (date && date.toString()) \|\| '--'}</p>`
`268`	`268`	`</>`
`269`	`269`	`);`
`270`	`270`	`}`