new(DateTime, DateTimeRange, DateTimeSelect, Price, PriceComparison, PriceGroup): Add empty fallback if an invalid value is provided. (#366)

Author: stefhatcher

packages/core/src/components/DatePicker/story.tsx

@@ -74,6 +74,7 @@ class DatePickerResetDemo extends React.Component<{}, ResetState> {
         showResetButton
         initialMonth={new Date(2019, 1, 1)}
         selectedDays={selectedDays}
+        // @ts-ignore valid `at` won't return `null`
         todayButton={DateTime.format({
           at: Date.now(),
           medium: true,
@@ -174,6 +175,7 @@ class DatePickerMouseRangeSelectDemo extends React.Component<{}, RangeState> {
             modifiers={modifiers}
             numberOfMonths={2}
             selectedDays={selectedDays}
+            // @ts-ignore valid `at` won't return `null`
             todayButton={DateTime.format({
               at: Date.now(),
               medium: true,
@@ -209,6 +211,7 @@ export function displayATodayButton() {
   return (
     <DatePicker
       initialMonth={new Date(2019, 1, 1)}
+      // @ts-ignore valid `at` won't return `null`
       todayButton={DateTime.format({
         at: Date.now(),
         medium: true,

packages/core/src/components/DatePickerInput/index.tsx

@@ -71,7 +71,7 @@ export default class DatePickerInput extends React.Component<
     // Update the parent form with the selected value.
     // We also don't have a real event object, so fake it.
     this.props.onChange(
-      this.formatDate(day),
+      this.formatDate(day)!,
       day,
       // @ts-ignore
       {},
@@ -84,6 +84,7 @@ export default class DatePickerInput extends React.Component<
 
   parseDate = (value: string, format?: string, locale?: string) => {
     try {
+      // @ts-ignore Allow it to fail
       return createDateTime(value, {
         sourceFormat: format ?? this.getFormat(),
         locale: locale ?? this.props.locale,
@@ -103,7 +104,7 @@ export default class DatePickerInput extends React.Component<
       locale: locale ?? this.props.locale,
       noTime: true,
       noTimezone: true,
-    });
+    })!;
   };
 
   render() {

packages/core/src/components/DateTime/index.tsx

@@ -97,7 +97,7 @@ export default class DateTime extends React.PureComponent<DateTimeProps> {
     withDay: false,
   };
 
-  static format(props: DateTimeProps): string {
+  static format(props: DateTimeProps): string | null {
     const {
       at,
       clock,
@@ -128,21 +128,24 @@ export default class DateTime extends React.PureComponent<DateTimeProps> {
       sourceFormat,
       timezone,
     });
-    let format = baseFormat || '';
-    let affixDay = withDay;
-    let affixTime = true;
 
-    if (__DEV__) {
-      if (!timeStamp.isValid) {
-        throw new Error('Invalid timestamp passed to `DateTime`.');
+    if (!timeStamp || (timeStamp && !timeStamp.isValid)) {
+      if (__DEV__) {
+        console.error('Invalid timestamp passed to `DateTime`.');
       }
+
+      return null;
     }
 
+    let format = baseFormat || '';
+    let affixDay = withDay;
+    let affixTime = true;
+
     // Disable future dates
     if (noFuture) {
       const now = createDateTime(null, { timezone });
 
-      if (timeStamp > now) {
+      if (now && timeStamp > now) {
         timeStamp = now;
       }
     }
@@ -187,8 +190,13 @@ export default class DateTime extends React.PureComponent<DateTimeProps> {
     return timeStamp.toFormat(format);
   }
 
-  static relative(timeStamp: DateTimeType, options: ToRelativeOptions = {}): string {
+  static relative(timeStamp: DateTimeType, options: ToRelativeOptions = {}): string | null {
     const relative = createDateTime(timeStamp);
+
+    if (!relative) {
+      return null;
+    }
+
     const diff = DateTime.diff(relative, options.base);
     const fewPhrase =
       options.style === 'narrow'
@@ -215,15 +223,21 @@ export default class DateTime extends React.PureComponent<DateTimeProps> {
   }
 
   static diff(to: DateTimeType, from: DateTimeType | null = null): number {
-    return (
-      createDateTime(to, { timezone: 'UTC' }).toMillis() -
-      createDateTime(from, { timezone: 'UTC' }).toMillis()
-    );
+    const toDate = createDateTime(to, { timezone: 'UTC' });
+    const fromDate = createDateTime(from, { timezone: 'UTC' });
+
+    if (toDate && fromDate) {
+      return toDate.toMillis() - fromDate.toMillis();
+    }
+
+    return 0;
   }
 
   getRefreshInterval() {
     const { at, sourceFormat } = this.props;
-    const difference = Math.abs(DateTime.diff(createDateTime(at, { sourceFormat })));
+    const difference = Math.abs(
+      DateTime.diff(createDateTime(at, { sourceFormat }) ?? MAX_RELATIVE_DATETIME_REFRESH_INTERVAL),
+    );
 
     // Decay refresh rate based on how long its been since the given timestamp
     // < 1 minute: update every 5 seconds
@@ -239,8 +253,9 @@ export default class DateTime extends React.PureComponent<DateTimeProps> {
 
   rfc() {
     const { at, sourceFormat } = this.props;
+    const date = createDateTime(at, { sourceFormat });
 
-    return createDateTime(at, { sourceFormat }).toFormat("yyyy-MM-dd'T'HH:mm:ssZZ"); // RFC3339
+    return date ? date.toFormat("yyyy-MM-dd'T'HH:mm:ssZZ") : ''; // RFC3339
   }
 
   renderTimeElement = () => {

packages/core/src/components/DateTime/story.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import DateTime from '.';
+import Empty from '../Empty';
 
 const future = new Date();
 future.setDate(future.getDate() + 12);
@@ -77,3 +78,24 @@ export function usingStaticMethod() {
 usingStaticMethod.story = {
   name: 'Using static method.',
 };
+
+export function withAnInvalidAtValue() {
+  return (
+    <div>
+      <div>
+        Component fallback: <DateTime at="[Hidden]" />
+      </div>
+
+      <div>Static method with fallback: {DateTime.format({ at: '[Hidden]', long: true })}</div>
+
+      <div>
+        Static method with custom fallback:{' '}
+        {DateTime.format({ at: '[Hidden]', long: true }) || <Empty />}
+      </div>
+    </div>
+  );
+}
+
+withAnInvalidAtValue.story = {
+  name: 'Fallback when an invalid date value is provided.',
+};

packages/core/src/components/DateTimeRange/index.tsx

@@ -35,13 +35,24 @@ export default function DateTimeRange({
   const fromTimeStamp = createDateTime(from, { locale, timezone });
   const toTimeStamp = createDateTime(to, { locale, timezone });
 
-  if (__DEV__) {
-    if (!fromTimeStamp.isValid || !toTimeStamp.isValid) {
-      throw new Error('Invalid timestamps passed to `DateTimeRange`.');
+  if (
+    !fromTimeStamp ||
+    !toTimeStamp ||
+    (fromTimeStamp && !fromTimeStamp.isValid) ||
+    (toTimeStamp && !toTimeStamp.isValid)
+  ) {
+    if (__DEV__) {
+      console.error(
+        `Invalid ${!fromTimeStamp ? 'fromTimeStamp' : 'toTimeStamp'} passed to \`DateTimeRange\`.`,
+      );
     }
 
+    return <Empty />;
+  }
+
+  if (__DEV__) {
     if (toTimeStamp < fromTimeStamp) {
-      throw new Error('Invalid chronological order of timestamps passed to `DateTimeRange`.');
+      console.error('Invalid chronological order of timestamps passed to `DateTimeRange`.');
     }
   }
 

packages/core/src/components/DateTimeRange/story.tsx

@@ -47,3 +47,25 @@ export function differentYearsRangeWithCustomSeparator() {
 differentYearsRangeWithCustomSeparator.story = {
   name: 'Different years range with custom separator.',
 };
+
+export function withAnInvalidValues() {
+  return (
+    <div>
+      <div>
+        Invalid from: <DateTimeRange from="[Hidden]" to={new Date(2019, 1, 17, 0, 0, 0)} />
+      </div>
+
+      <div>
+        Invalid to: <DateTimeRange from={new Date(2019, 1, 15, 0, 0, 0)} to="[Hidden]" />
+      </div>
+
+      <div>
+        Both invalid: <DateTimeRange from="[Hidden]" to="[Hidden]" />
+      </div>
+    </div>
+  );
+}
+
+withAnInvalidValues.story = {
+  name: 'Fallback when an invalid date values are provided.',
+};

packages/core/src/components/DateTimeSelect/index.tsx

@@ -66,10 +66,15 @@ export class DateTimeSelect extends React.Component<
     yearPastBuffer: 80,
   };
 
-  private date = createDateTime(this.props.value, {
-    locale: this.props.locale,
-    timezone: this.props.timezone,
-  }).set({ minute: 0, second: 0 });
+  private date: DateTime = (
+    createDateTime(this.props.value, {
+      locale: this.props.locale,
+      timezone: this.props.timezone,
+    }) ?? this.getNowDate()
+  ).set({
+    minute: 0,
+    second: 0,
+  });
 
   state = {
     id: uuid(),
@@ -83,18 +88,30 @@ export class DateTimeSelect extends React.Component<
     // Don't set minute/second to 0 here, because when used in conjunction with the form kit,
     // the value is always passed down, causing the numbers to always reset to 0.
     if (value !== prevProps.value) {
-      const date = createDateTime(value, {
-        locale,
-        timezone,
-      });
+      const date =
+        createDateTime(value, {
+          locale,
+          timezone,
+        }) ?? this.getNowDate();
 
       this.setState({
         date,
-        meridiem: date.get('hour') <= 11 ? 'am' : 'pm',
+        meridiem: date?.get('hour') <= 11 ? 'am' : 'pm',
       });
     }
   }
 
+  getNowDate() {
+    const { locale, timezone } = this.props;
+    let date = DateTime.utc().setLocale(locale!);
+
+    if (timezone && timezone !== 'UTC') {
+      date = date.setZone(timezone as string);
+    }
+
+    return date;
+  }
+
   getDayRange(): Range {
     return createRange(1, this.state.date.daysInMonth).map((day) => ({
       label: day,
@@ -140,7 +157,7 @@ export class DateTimeSelect extends React.Component<
   }
 
   getYearRange(): Range {
-    const now = createDateTime();
+    const now = createDateTime() ?? this.getNowDate();
 
     return createRange(
       now.year - this.props.yearPastBuffer!,

packages/core/src/components/DateTimeSelect/story.tsx

@@ -169,3 +169,18 @@ export function withInlineLabel() {
 withInlineLabel.story = {
   name: 'With inline label.',
 };
+
+export function withInvalidDate() {
+  return (
+    <DateTimeSelect
+      name="dts-basic"
+      label="Label"
+      value="[Hidden]"
+      onChange={() => console.log('onChange')}
+    />
+  );
+}
+
+withInvalidDate.story = {
+  name: "Fallback to today's date if value is invalid",
+};

packages/core/src/components/Price/index.tsx

@@ -23,7 +23,7 @@ export type CommonProps = {
 
 export type PriceProps = CommonProps & {
   /** The amount as a number. */
-  amount?: Amount | number | null;
+  amount?: Amount | number | null | string;
   /** Native currency of the amount. */
   currency?: Currency;
 };
@@ -43,14 +43,20 @@ function Price({
   let currency = baseCurrency;
   let micros = baseMicros;
 
-  if (baseAmount === undefined || baseAmount === null) {
+  if (
+    baseAmount === undefined ||
+    baseAmount === null ||
+    (typeof baseAmount === 'string' && isNaN(Number(baseAmount)))
+  ) {
     return <Empty />;
   }
 
   if (typeof baseAmount === 'object') {
     currency = baseAmount.currency;
     micros = baseAmount.is_micros_accuracy;
     amount = micros ? baseAmount.amount_micros : baseAmount.amount;
+  } else if (typeof baseAmount === 'string') {
+    amount = Number(baseAmount);
   } else if (typeof baseAmount === 'number') {
     amount = baseAmount;
   }
@@ -73,7 +79,7 @@ function Price({
 }
 
 Price.propTypes = {
-  amount: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
+  amount: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.string]),
   display: PropTypes.oneOf(['symbol', 'code', 'name']),
 };
 

packages/core/src/components/Price/story.tsx

@@ -31,3 +31,12 @@ export function roundedAmountInJpy() {
 roundedAmountInJpy.story = {
   name: 'Rounded amount in JPY.',
 };
+
+export function withAnInvalidAmount() {
+  // @ts-ignore invalid amount type on purprose to demonstrate the fallback
+  return <Price amount="[Hidden]" currency="USD" />;
+}
+
+withAnInvalidAmount.story = {
+  name: 'Fallback when an invalid amount is provided.',
+};