Merge pull request #427 from beda-software/feat/support-custom-date-t…

…ime-formats Add date time format customization
beda-software · Jan 17, 2025 · 9ac9250 · 9ac9250
2 parents 6356f9c + ec78a81
commit 9ac9250
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 30 deletions.
diff --git a/src/components/BaseQuestionnaireResponseForm/widgets/date.tsx b/src/components/BaseQuestionnaireResponseForm/widgets/date.tsx
@@ -1,20 +1,15 @@
 import { Form } from 'antd';
 import moment, { type Moment } from 'moment';
-import { useCallback, useContext, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { QuestionItemProps } from 'sdc-qrf';
 
-import {
-    FHIRTimeFormat,
-    formatFHIRDate,
-    formatFHIRDateTime,
-    formatFHIRTime,
-} from '@beda.software/fhir-react';
+import { FHIRTimeFormat, formatFHIRDate, formatFHIRDateTime, formatFHIRTime } from '@beda.software/fhir-react';
 
 import { DatePicker } from 'src/components/DatePicker';
 import { TimePicker } from 'src/components/TimePicker';
 
 import { useFieldController } from '../hooks';
-import { DateTimeFormatContext } from 'src/contexts/date-time-format';
+import { humanDate, humanDateTime, humanTime } from 'src/utils/date';
 
 export function QuestionDateTime({ parentPath, questionItem }: QuestionItemProps) {
     const { linkId, type, regex } = questionItem;
@@ -45,7 +40,6 @@ interface DateTimePickerWrapperProps {
 }
 
 function DateTimePickerWrapper(props: DateTimePickerWrapperProps) {
-    const { humanDate, humanTime, humanDateTime } = useContext(DateTimeFormatContext);
     const { value, onChange, type, disabled, placeholder, format } = props;
 
     const newValue = useMemo(() => {

diff --git a/src/contexts/date-time-format.ts b/src/contexts/date-time-format.ts
diff --git a/src/main.tsx b/src/main.tsx
@@ -17,7 +17,6 @@ import { ValueSetExpandProvider } from './contexts';
 import { expandEMRValueSet } from './services';
 import * as serviceWorker from './serviceWorker';
 import { ThemeProvider } from './theme/ThemeProvider';
-import { DateTimeFormatContext, defaultDateTimeFormats } from './contexts/date-time-format';
 
 const AppWithContext = () => {
     useEffect(() => {
@@ -26,15 +25,13 @@ const AppWithContext = () => {
 
     return (
         <I18nProvider i18n={i18n}>
-            <DateTimeFormatContext.Provider value={defaultDateTimeFormats}>
-                <PatientDashboardProvider dashboard={dashboard}>
-                    <ValueSetExpandProvider.Provider value={expandEMRValueSet}>
-                        <ThemeProvider>
-                            <App />
-                        </ThemeProvider>
-                    </ValueSetExpandProvider.Provider>
-                </PatientDashboardProvider>
-            </DateTimeFormatContext.Provider>
+            <PatientDashboardProvider dashboard={dashboard}>
+                <ValueSetExpandProvider.Provider value={expandEMRValueSet}>
+                    <ThemeProvider>
+                        <App />
+                    </ThemeProvider>
+                </ValueSetExpandProvider.Provider>
+            </PatientDashboardProvider>
         </I18nProvider>
     );
 };

diff --git a/src/utils/date.ts b/src/utils/date.ts
@@ -3,10 +3,32 @@ import _ from 'lodash';
 
 import { parseFHIRDate, parseFHIRDateTime } from '@beda.software/fhir-react';
 
-export const humanDate = 'DD MMM YYYY';
-export const humanDateYearMonth = 'MMM YYYY';
-export const humanTime = 'HH:mm';
-export const humanDateTime = 'DD MMM YYYY HH:mm';
+export let humanDate = 'DD MMM YYYY';
+export let humanDateYearMonth = 'MMM YYYY';
+export let humanTime = 'HH:mm';
+export let humanDateTime = 'DD MMM YYYY HH:mm';
+
+export type DateTimeFormat = {
+    humanDate: string;
+    humanDateYearMonth: string;
+    humanTime: string;
+    humanDateTime: string;
+};
+
+export const setDateTimeFormats = (formats: Partial<DateTimeFormat>) => {
+    if (formats.humanDate) {
+        humanDate = formats.humanDate;
+    }
+    if (formats.humanDateYearMonth) {
+        humanDateYearMonth = formats.humanDateYearMonth;
+    }
+    if (formats.humanTime) {
+        humanTime = formats.humanTime;
+    }
+    if (formats.humanDateTime) {
+        humanDateTime = formats.humanDateTime;
+    }
+};
 
 export const formatHumanDateTime = (date?: string) => {
     if (!date) {