(feat) Add additional properties for OpenmrsDatePicker in Carbon (#1007)

Co-authored-by: Jovan Ssebaggala <[email protected]>
openmrs · Jun 5, 2024 · 59df721 · 59df721
1 parent 3ae1da6
commit 59df721
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/packages/framework/esm-styleguide/src/datepicker/openmrs/openmrs-date-picker.component.tsx b/packages/framework/esm-styleguide/src/datepicker/openmrs/openmrs-date-picker.component.tsx
@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { type ReactElement, useEffect, useRef } from 'react';
 import { supportedLocales as reactSpectrumSupportedLocales } from '../react-spectrum/locales';
 import { getLocale } from '@openmrs/esm-utils';
 import ReactSpectrumDatePickerWrapper from '../react-spectrum/adobe-react-spectrum-date-wrapper.component';
 import { DatePicker, DatePickerInput } from '@carbon/react';
+import dayjs from 'dayjs';
 
 // TODO: should be locale sensitive
 // see: https://issues.openmrs.org/browse/O3-998
@@ -11,7 +12,7 @@ const DEFAULT_PLACEHOLDER = 'dd/mm/yyyy';
 
 export interface OpenmrsDatePickerProps {
   id: string;
-  labelText: string;
+  labelText: string | ReactElement;
   onChange: (value: Date) => void;
   value?: Date | string;
   /* Not supported by Carbon's picker */
@@ -54,6 +55,21 @@ export const OpenmrsDatePicker: React.FC<OpenmrsDatePickerProps> = ({
   carbonOptions,
 }) => {
   const locale = getLocale();
+  const inputRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const inputElement = inputRef.current?.querySelector('input');
+    if (inputElement) {
+      const handleChange = (e) => {
+        onChange(dayjs(e.target.value, dateFormat).toDate());
+      };
+      inputElement.addEventListener('change', handleChange);
+
+      return () => {
+        inputElement.removeEventListener('change', handleChange);
+      };
+    }
+  }, [inputRef, dateFormat, onChange]);
 
   return reactSpectrumSupportedLocales[locale] ? (
     <ReactSpectrumDatePickerWrapper
@@ -86,13 +102,16 @@ export const OpenmrsDatePicker: React.FC<OpenmrsDatePickerProps> = ({
       warnText={carbonOptions?.warnText}
     >
       <DatePickerInput
+        ref={inputRef}
         id={id}
         dateFormat={dateFormat || DEFAULT_DATE_FORMAT}
         labelText={labelText}
         invalid={invalid}
         invalidText={invalidText}
         placeholder={carbonOptions?.placeholder || DEFAULT_PLACEHOLDER}
         style={carbonOptions?.pickerInputStyle}
+        disabled={disabled}
+        readOnly={readonly}
       />
     </DatePicker>
   );

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,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { type ReactElement, useMemo } from 'react';
 import { parseDate } from '@internationalized/date';
 import { DatePicker } from '@react-spectrum/datepicker';
 import { Provider } from '@react-spectrum/provider';
@@ -10,7 +10,7 @@ import dayjs from 'dayjs';
 interface ReactSpectrumDatePickerWrapperProps {
   id: string;
   value?: Date | string;
-  labelText?: string;
+  labelText?: string | ReactElement;
   locale: string;
   defaultValue?: Date | string;
   minDate?: Date | string;