Address review comments

openmrs · May 20, 2024 · eb795c5 · eb795c5
1 parent 88dc01a
commit eb795c5
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 35 deletions.
diff --git a/...-styleguide/src/datepicker/react-spectrum/adobe-react-spectrum-date-wrapper.component.tsx b/...-styleguide/src/datepicker/react-spectrum/adobe-react-spectrum-date-wrapper.component.tsx
@@ -1,12 +1,11 @@
 import React, { useMemo } from 'react';
-import { type CalendarDate } from '@internationalized/date';
 import { parseDate } from '@internationalized/date';
 import { DatePicker } from '@react-spectrum/datepicker';
 import { Provider } from '@react-spectrum/provider';
 import { theme as defaultTheme } from '@react-spectrum/theme-default';
 import { useConfig } from '@openmrs/esm-react-utils';
-import { parseDate as parseDateString } from '@openmrs/esm-utils';
-import { supportedLocales } from './locales';
+import { convertToLocaleCalendar } from '@openmrs/esm-utils';
+import dayjs from 'dayjs';
 
 interface ReactSpectrumDatePickerWrapperProps {
   id: string;
@@ -23,23 +22,14 @@ interface ReactSpectrumDatePickerWrapperProps {
   onChange?: (value: Date) => void;
 }
 
-function toLocalDateString(dateValue: Date) {
-  const year = dateValue.getFullYear();
-  const month = (dateValue.getMonth() + 1).toString().padStart(2, '0');
-  const date = dateValue.getDate().toString().padStart(2, '0');
-
-  return `${year}-${month}-${date}`;
-}
-
-function parseToCalendarDate(date: string | Date | undefined, locale?: string) {
+function parseToCalendarDate(date: string | Date | undefined, locale?: string | Intl.Locale) {
   if (!date) {
     return undefined;
   }
 
-  const parsedCalendarDate = parseDate(toLocalDateString(typeof date === 'string' ? parseDateString(date) : date));
-  if (locale && supportedLocales[locale]) {
-    const localeConvertedDate = supportedLocales[locale].convert(parsedCalendarDate);
-    return localeConvertedDate;
+  const parsedCalendarDate = parseDate(dayjs(date).format('YYYY-MM-DD'));
+  if (locale) {
+    return convertToLocaleCalendar(parsedCalendarDate, locale);
   }
 
   return parsedCalendarDate;
@@ -75,23 +65,23 @@ const ReactSpectrumDatePickerWrapper: React.FC<ReactSpectrumDatePickerWrapperPro
     if (preferredCalendar?.[currentLocale]) {
       return new Intl.Locale(currentLocale, {
         calendar: preferredCalendar[currentLocale],
-      }).toString();
+      });
     }
     return currentLocale;
   }, [currentLocale, preferredCalendar]);
 
   return (
-    <Provider locale={locale} colorScheme="light" theme={defaultTheme}>
+    <Provider locale={locale.toString()} colorScheme="light" theme={defaultTheme}>
       <DatePicker
         id={id}
         label={labelText}
         value={parseToCalendarDate(value)}
         onChange={(calendarDate) => {
           onChange?.(new Date(calendarDate.year, calendarDate.month - 1, calendarDate.day));
         }}
-        defaultValue={defaultValue ? (parseToCalendarDate(defaultValue, currentLocale) as CalendarDate) : undefined}
-        minValue={minDate ? (parseToCalendarDate(minDate, currentLocale) as CalendarDate) : undefined}
-        maxValue={maxDate ? (parseToCalendarDate(maxDate, currentLocale) as CalendarDate) : undefined}
+        defaultValue={parseToCalendarDate(defaultValue, locale)}
+        minValue={parseToCalendarDate(minDate, locale)}
+        maxValue={parseToCalendarDate(maxDate, locale)}
         isReadOnly={readonly}
         isDisabled={isDisabled}
         validationState={constructValidationState(invalid)}

diff --git a/packages/framework/esm-styleguide/src/datepicker/react-spectrum/locales.ts b/packages/framework/esm-styleguide/src/datepicker/react-spectrum/locales.ts
@@ -1,16 +1,5 @@
-import { type CalendarDate, EthiopicCalendar, toCalendar, IndianCalendar } from '@internationalized/date';
-
-const convertToEthiopicDate = (date: CalendarDate) => {
-  return toCalendar(date, new EthiopicCalendar());
-};
-
-const convertToIndianDate = (date: CalendarDate) => {
-  return toCalendar(date, new IndianCalendar());
-};
-
 export const supportedLocales = {
-  am: { locale: 'am-AM-u-ca-ethiopic', convert: convertToEthiopicDate },
-  am_ET: { locale: 'Amharic (Ethiopia)', convert: convertToEthiopicDate },
-  ti_ET: { locale: 'Tigrinya (Ethiopia)', convert: convertToEthiopicDate },
-  in: { locale: 'hi-IN-u-ca-indian', convert: convertToIndianDate },
+  am: 'Amharic',
+  am_ET: 'Amharic (Ethiopia)',
+  ti_ET: 'Tigrinya (Ethiopia)',
 };
diff --git a/packages/framework/esm-utils/src/omrs-dates.ts b/packages/framework/esm-utils/src/omrs-dates.ts
@@ -3,6 +3,7 @@
  * @category Date and Time
  */
 import type { i18n } from 'i18next';
+import { createCalendar, toCalendar, type CalendarDate } from '@internationalized/date';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import isToday from 'dayjs/plugin/isToday';
@@ -378,3 +379,14 @@ export function getLocale() {
 
   return language;
 }
+
+/**
+ * Converts a calendar date to the equivalent locale calendar date.
+ * @returns string
+ */
+export function convertToLocaleCalendar(date: CalendarDate, locale: string | Intl.Locale) {
+  let locale_ = typeof locale === 'string' ? new Intl.Locale(locale) : locale;
+  const localCalendarName = locale_.calendar;
+
+  return localCalendarName ? toCalendar(date, createCalendar(localCalendarName)) : date;
+}