feat: calendar input to work with react final form

dhis2 · Sep 5, 2024 · 158f088 · 158f088
1 parent bfc93f6
commit 158f088
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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"