fix: stories for calendar validation (#1616)

dhis2 · Oct 7, 2024 · c00a2d6 · c00a2d6
1 parent 833f61d
commit c00a2d6
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 34 deletions.
diff --git a/components/calendar/package.json b/components/calendar/package.json
@@ -38,7 +38,7 @@
         "@dhis2-ui/input": "10.0.0-alpha.1",
         "@dhis2-ui/layer": "10.0.0-alpha.1",
         "@dhis2-ui/popper": "10.0.0-alpha.1",
-        "@dhis2/multi-calendar-dates": "2.0.0-alpha.1",
+        "@dhis2/multi-calendar-dates": "2.0.0-alpha.2",
         "@dhis2/prop-types": "^3.1.2",
         "@dhis2/ui-constants": "10.0.0-alpha.1",
         "@dhis2/ui-icons": "10.0.0-alpha.1",

diff --git a/components/calendar/src/calendar-input/calendar-input.js b/components/calendar/src/calendar-input/calendar-input.js
@@ -42,7 +42,6 @@ export const CalendarInput = ({
     const ref = useRef()
     const [open, setOpen] = useState(false)
     const [partialDate, setPartialDate] = useState(date)
-    const [isIconDisplayed, setIsIconDisplayed] = useState(false)
 
     const excludeRef = useRef(null)
 
@@ -60,20 +59,18 @@ export const CalendarInput = ({
 
     const pickerResults = useDatePicker({
         onDateSelect: (result) => {
-            const validated = validateDateString(result.calendarDateString, {
+            const validation = validateDateString(result.calendarDateString, {
                 calendar,
                 format,
                 minDateString: minDate,
                 maxDateString: maxDate,
                 strictValidation,
             })
-            setIsIconDisplayed(
-                validated.errorMessage || validated.warningMessage
-            )
+
             setOpen(false)
             parentOnDateSelect?.({
                 calendarDateString: result.calendarDateString,
-                ...validated,
+                validation,
             })
         },
         date,
@@ -90,15 +87,14 @@ export const CalendarInput = ({
     }
 
     const handleBlur = (_, e) => {
-        const validated = validateDateString(partialDate, {
+        const validation = validateDateString(partialDate, {
             calendar,
             format,
             minDateString: minDate,
             maxDateString: maxDate,
             strictValidation,
         })
-        setIsIconDisplayed(validated.errorMessage || validated.warningMessage)
-        parentOnDateSelect?.({ calendarDateString: partialDate, ...validated })
+        parentOnDateSelect?.({ calendarDateString: partialDate, validation })
 
         if (
             excludeRef.current &&
@@ -143,12 +139,6 @@ export const CalendarInput = ({
                     value={partialDate}
                     onChange={handleChange}
                     onBlur={handleBlur}
-                    validationText={
-                        pickerResults.errorMessage ||
-                        pickerResults.warningMessage
-                    }
-                    error={!!pickerResults.errorMessage}
-                    warning={!!pickerResults.warningMessage}
                     inputWidth={inputWidth}
                 />
                 {clearable && (
@@ -168,7 +158,6 @@ export const CalendarInput = ({
                             small
                             onClick={() => {
                                 parentOnDateSelect?.(null)
-                                setIsIconDisplayed(false)
                             }}
                             type="button"
                         >
@@ -207,7 +196,9 @@ export const CalendarInput = ({
                     }
                     .calendar-clear-button {
                         position: absolute;
-                        inset-inline-end: ${isIconDisplayed ? '36px' : '6px'};
+                        inset-inline-end: ${rest.error || rest.warning
+                            ? '36px'
+                            : '6px'};
                         inset-block-start: 27px;
                     }
                     .calendar-clear-button.with-icon {
@@ -232,7 +223,7 @@ CalendarInput.defaultProps = {
 CalendarInput.propTypes = {
     /** the calendar to use such gregory, ethiopic, nepali - full supported list here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/calendars.ts  */
     calendar: PropTypes.any.isRequired,
-    /** Called with signature `(null)` \|\| `({ dateCalendarString: string })` with `dateCalendarString` being the stringified date in the specified calendar in the format `yyyy-MM-dd` */
+    /** Called with signature `(null)` \|\| `({ dateCalendarString: string, validation: { error: boolean, warning: boolean, validationText: string} })` with `dateCalendarString` being the stringified date in the specified calendar in the format `yyyy-MM-dd` */
     onDateSelect: PropTypes.func.isRequired,
     /** the size of a single cell in the table forming the calendar */
     cellSize: PropTypes.string,

diff --git a/components/calendar/src/calendar/calendar.js b/components/calendar/src/calendar/calendar.js
@@ -79,7 +79,7 @@ Calendar.defaultProps = {
 export const CalendarProps = {
     /** the calendar to use such gregory, ethiopic, nepali - full supported list here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/calendars.ts  */
     calendar: PropTypes.any.isRequired,
-    /** Called with signature `(null)` \|\| `({ dateCalendarString: string })` with `dateCalendarString` being the stringified date in the specified calendar in the format `yyyy-MM-dd` */
+    /** Called with signature `(null)` \|\| `({ dateCalendarString: string, validation: { error: boolean, warning: boolean, validationText: string} })` with `dateCalendarString` being the stringified date in the specified calendar in the format `yyyy-MM-dd` */
     onDateSelect: PropTypes.func.isRequired,
     /** the size of a single cell in the table forming the calendar */
     cellSize: PropTypes.string,

diff --git a/components/calendar/src/stories/calendar-input.prod.stories.js b/components/calendar/src/stories/calendar-input.prod.stories.js
@@ -140,11 +140,11 @@ export function CalendarWithEditiableInput() {
     )
 }
 
-export function CalendarWithEditiableInputReactForm() {
-    const [calendarError, setCalendarError] = useState(undefined)
+export function CalendarWithEditableInputReactForm() {
+    const [validation, setValidation] = useState({})
 
     const errored = () => {
-        return { calendar: calendarError }
+        return { calendar: validation.validationText }
     }
 
     return (
@@ -155,7 +155,7 @@ export function CalendarWithEditiableInputReactForm() {
             initialValues={{ calendar: '2022-10-12' }}
             validate={errored}
         >
-            {({ handleSubmit }) => {
+            {({ handleSubmit, invalid }) => {
                 return (
                     <form onSubmit={handleSubmit}>
                         <Field name="calendar">
@@ -167,24 +167,31 @@ export function CalendarWithEditiableInputReactForm() {
                                     editable
                                     date={props.input.value}
                                     calendar="gregory"
+                                    {...validation}
+                                    minDate="2022-11-01"
                                     onDateSelect={(date) => {
-                                        if (!date.isValid) {
-                                            setCalendarError(date.errorMessage)
-                                        } else {
-                                            setCalendarError(undefined)
+                                        const validation = {
+                                            ...date.validation,
+                                            validationText:
+                                                date.validation
+                                                    .validationCode ===
+                                                'WRONG_FORMAT'
+                                                    ? 'custom validation message for format'
+                                                    : date.validation
+                                                          .validationText,
                                         }
+                                        setValidation(validation)
                                         props.input.onChange(
                                             date ? date?.calendarDateString : ''
                                         )
                                     }}
-                                    timeZone={'UTC'}
                                 />
                             )}
                         </Field>
 
                         <button
                             type="submit"
-                            disabled={false}
+                            disabled={invalid}
                             onClick={handleSubmit}
                         >
                             Submit

diff --git a/components/calendar/src/stories/calendar-story-wrapper.js b/components/calendar/src/stories/calendar-story-wrapper.js
@@ -115,6 +115,7 @@ export const CalendarStoryWrapper = (props) => {
                 onDateSelect={(date) => {
                     setSelectedDate(date)
                 }}
+                {...selectedDate.validation}
                 timeZone={timeZone}
                 weekDayFormat={selectedWeekFormat}
                 numberingSystem={selectedNumberingSystem}

diff --git a/yarn.lock b/yarn.lock
@@ -2707,10 +2707,10 @@
     i18next "^10.3"
     moment "^2.24.0"
 
-"@dhis2/[email protected].1":
-  version "2.0.0-alpha.1"
-  resolved "https://registry.yarnpkg.com/@dhis2/multi-calendar-dates/-/multi-calendar-dates-2.0.0-alpha.1.tgz#5ae801160c044b1488704dcc13f6a4cc8cccb3e4"
-  integrity sha512-fPZ8E5ioAXPxfVQstkDOyyzBhbS5XxIUS/iUwaZxCU6Opw4CXVMBeABwQX7Y+ySTpPqGkTUYmnjhOwMlVapSng==
+"@dhis2/[email protected].2":
+  version "2.0.0-alpha.2"
+  resolved "https://registry.yarnpkg.com/@dhis2/multi-calendar-dates/-/multi-calendar-dates-2.0.0-alpha.2.tgz#95b7799d2797b4d5f2110099a1d4d5a7b8be0a02"
+  integrity sha512-98vNwwtCk9C7N/lUj+I6dH0JNjyIbEEsjSg2FoHKc8/JsKnlfRSIto34H6gQBklL1EcKwq3KRpZcLnxnqwxzOQ==
   dependencies:
     "@dhis2/d2-i18n" "^1.1.3"
     "@js-temporal/polyfill" "0.4.3"