diff --git a/components/calendar/package.json b/components/calendar/package.json index c8d5b4a16..c59034718 100644 --- 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 index 7f7c76fca..715050f25 100644 --- 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 index 57b9ff615..92b69c04d 100644 --- 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 index 19b8c0377..008efd7af 100644 --- 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 (
@@ -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'} /> )}