From 158f088fb0939495a0d3025c02cc2ec60754dc05 Mon Sep 17 00:00:00 2001
From: Flaminia Cavallo <flaminia@dhis2.org>
Date: Tue, 20 Aug 2024 10:10:48 -0700
Subject: [PATCH] feat: calendar input to work with react final form

---
 .../src/InputFieldFF/InputFieldFF.stories.js  |  2 +-
 .../src/calendar-input/calendar-input.js      | 12 +++-
 .../src/stories/calendar-input.stories.js     | 57 +++++++++++++++++++
 yarn.lock                                     | 15 +++--
 4 files changed, 79 insertions(+), 7 deletions(-)

diff --git a/collections/forms/src/InputFieldFF/InputFieldFF.stories.js b/collections/forms/src/InputFieldFF/InputFieldFF.stories.js
index ca5f144956..a3f8f653ce 100644
--- a/collections/forms/src/InputFieldFF/InputFieldFF.stories.js
+++ b/collections/forms/src/InputFieldFF/InputFieldFF.stories.js
@@ -32,7 +32,7 @@ Press **Submit** to see the form values logged to the console.
 `
 
 export default {
-    title: 'Input Field (Final Form)',
+    title: 'Final Form - Input Field ',
     component: InputFieldFF,
     decorators: [formDecorator],
     parameters: { docs: { description: { component: description } } },
diff --git a/components/calendar/src/calendar-input/calendar-input.js b/components/calendar/src/calendar-input/calendar-input.js
index b308e85234..bd12b7b0b6 100644
--- a/components/calendar/src/calendar-input/calendar-input.js
+++ b/components/calendar/src/calendar-input/calendar-input.js
@@ -6,6 +6,7 @@ import { Popper } from '@dhis2-ui/popper'
 import {
     useDatePicker,
     useResolvedDirection,
+    validateDateString,
 } from '@dhis2/multi-calendar-dates'
 import cx from 'classnames'
 import React, { useRef, useState, useMemo, useEffect } from 'react'
@@ -71,11 +72,20 @@ export const CalendarInput = ({
     })
 
     const handleChange = (e) => {
+        setOpen(false)
         setPartialDate(e.value)
     }
 
     const handleBlur = (_, e) => {
-        parentOnDateSelect?.({ calendarDateString: partialDate })
+        const validated = validateDateString(partialDate, {
+            calendar,
+            format,
+            minDateString: minDate,
+            maxDateString: maxDate,
+            strictValidation,
+        })
+        parentOnDateSelect?.({ calendarDateString: partialDate, ...validated })
+
         if (
             excludeRef.current &&
             !excludeRef.current.contains(e.relatedTarget)
diff --git a/components/calendar/src/stories/calendar-input.stories.js b/components/calendar/src/stories/calendar-input.stories.js
index 7d3917ad00..a0cd6f9c9a 100644
--- a/components/calendar/src/stories/calendar-input.stories.js
+++ b/components/calendar/src/stories/calendar-input.stories.js
@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import { Field, Form } from 'react-final-form'
 import { CalendarInput } from '../calendar-input/calendar-input.js'
 import { CalendarStoryWrapper } from './calendar-story-wrapper.js'
 
@@ -138,3 +139,59 @@ export function CalendarWithEditiableInput() {
         </div>
     )
 }
+
+export function CalendarWithEditiableInputReactForm() {
+    const [calendarError, setCalendarError] = useState(undefined)
+
+    const errored = () => {
+        return { calendar: calendarError }
+    }
+
+    return (
+        <Form
+            onSubmit={(values, meta) => {
+                console.log('SUBMITTING', { values, meta })
+            }}
+            initialValues={{ calendar: '2022-10-12' }}
+            validate={errored}
+        >
+            {({ handleSubmit }) => {
+                return (
+                    <form onSubmit={handleSubmit}>
+                        <Field name="calendar">
+                            {(props) => (
+                                <CalendarInput
+                                    {...props}
+                                    input={props.input}
+                                    meta={props.meta}
+                                    editable
+                                    date={props.input.value}
+                                    calendar="gregory"
+                                    onDateSelect={(date) => {
+                                        if (!date.isValid) {
+                                            setCalendarError(date.errorMessage)
+                                        } else {
+                                            setCalendarError(undefined)
+                                        }
+                                        props.input.onChange(
+                                            date ? date?.calendarDateString : ''
+                                        )
+                                    }}
+                                    timeZone={'UTC'}
+                                />
+                            )}
+                        </Field>
+
+                        <button
+                            type="submit"
+                            disabled={false}
+                            onClick={handleSubmit}
+                        >
+                            Submit
+                        </button>
+                    </form>
+                )
+            }}
+        </Form>
+    )
+}
diff --git a/yarn.lock b/yarn.lock
index d2ef2cfceb..1bc08e75d7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2629,10 +2629,10 @@
     i18next "^10.3"
     moment "^2.24.0"
 
-"@dhis2/multi-calendar-dates@v1.0.0-alpha.26":
-  version "1.0.0-alpha.26"
-  resolved "https://registry.yarnpkg.com/@dhis2/multi-calendar-dates/-/multi-calendar-dates-1.0.0-alpha.26.tgz#33c3384ee96219f5500005058a69bd3104d1a5b9"
-  integrity sha512-85oj4Ji/UOwt4nWDrzUfyl5tkcF1YrB1kBh1kCjPL0Md1+XDzM6nee9DFx4Eh9BNJN/cOgWJo9mWDsPycXO0aA==
+"@dhis2/multi-calendar-dates@1.0.0-alpha.29":
+  version "1.0.0-alpha.29"
+  resolved "https://registry.yarnpkg.com/@dhis2/multi-calendar-dates/-/multi-calendar-dates-1.0.0-alpha.29.tgz#927f9d103533caedb984ed976ea04b3ee361db06"
+  integrity sha512-s10ZDZFzC60PZdPeq94TStx++nfdFu7AC7LzqjwbLq605Zpnf+JbUPlZhUTOSQHhk6lg6lobv3Jd4h8q5G25hA==
   dependencies:
     "@js-temporal/polyfill" "0.4.3"
     classnames "^2.3.2"
@@ -8287,11 +8287,16 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.5, classnames@^2.2.6, classnames@^2.3.1, classnames@^2.3.2:
+classnames@^2.2.5, classnames@^2.2.6, classnames@^2.3.1:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
   integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
 
+classnames@^2.3.2:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
+  integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
+
 clean-css@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"