From 827c3f853d24d08b9d1952c72149fc3359ffc34a 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

---
 .../InputFieldFF/InputFieldFF.prod.stories.js |  2 +-
 .../src/calendar-input/calendar-input.js      | 12 +++-
 .../stories/calendar-input.prod.stories.js    | 57 +++++++++++++++++++
 yarn.lock                                     | 20 +++++--
 4 files changed, 85 insertions(+), 6 deletions(-)

diff --git a/collections/forms/src/InputFieldFF/InputFieldFF.prod.stories.js b/collections/forms/src/InputFieldFF/InputFieldFF.prod.stories.js
index ca5f144956..a3f8f653ce 100644
--- a/collections/forms/src/InputFieldFF/InputFieldFF.prod.stories.js
+++ b/collections/forms/src/InputFieldFF/InputFieldFF.prod.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 53e273a0e7..f7582ef407 100644
--- a/components/calendar/src/calendar-input/calendar-input.js
+++ b/components/calendar/src/calendar-input/calendar-input.js
@@ -1,6 +1,7 @@
 import {
     useDatePicker,
     useResolvedDirection,
+    validateDateString
 } from '@dhis2/multi-calendar-dates'
 import { Button } from '@dhis2-ui/button'
 import { Card } from '@dhis2-ui/card'
@@ -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.prod.stories.js b/components/calendar/src/stories/calendar-input.prod.stories.js
index 6a90a62cc1..4a55f9b41a 100644
--- a/components/calendar/src/stories/calendar-input.prod.stories.js
+++ b/components/calendar/src/stories/calendar-input.prod.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'
 
@@ -140,3 +141,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 ee5a239eaa..34f2711769 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7391,14 +7391,26 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.6, classnames@^2.3.1, classnames@^2.3.2:
+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.npmjs.org/classnames/-/classnames-2.5.1.tgz"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
   integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
 
-clean-css@^5.2.2, clean-css@^5.3.0:
+clean-css@^5.2.2:
+  version "5.2.4"
+  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-5.2.4.tgz#982b058f8581adb2ae062520808fb2429bd487a4"
+  integrity sha512-nKseG8wCzEuji/4yrgM/5cthL9oTDc5UOQyFMvW/Q53oP6gLH690o1NbuTh6Y18nujr7BxlsFuS7gXLnLzKJGg==
+  dependencies:
+    source-map "~0.6.0"
+
+clean-css@^5.3.0:
   version "5.3.3"
-  resolved "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz"
+  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-5.3.3.tgz#b330653cd3bd6b75009cc25c714cae7b93351ccd"
   integrity sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==
   dependencies:
     source-map "~0.6.0"