Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: stories for calendar validation #1616

Merged
merged 1 commit into from
Oct 7, 2024
Merged

fix: stories for calendar validation #1616

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion components/calendar/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
27 changes: 9 additions & 18 deletions components/calendar/src/calendar-input/calendar-input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand All @@ -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,
Expand All @@ -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 &&
Expand Down Expand Up @@ -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 && (
Expand All @@ -168,7 +158,6 @@ export const CalendarInput = ({
small
onClick={() => {
parentOnDateSelect?.(null)
setIsIconDisplayed(false)
}}
type="button"
>
Expand Down Expand Up @@ -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 {
Expand All @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion components/calendar/src/calendar/calendar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
27 changes: 17 additions & 10 deletions components/calendar/src/stories/calendar-input.prod.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -155,7 +155,7 @@ export function CalendarWithEditiableInputReactForm() {
initialValues={{ calendar: '2022-10-12' }}
validate={errored}
>
{({ handleSubmit }) => {
{({ handleSubmit, invalid }) => {
return (
<form onSubmit={handleSubmit}>
<Field name="calendar">
Expand All @@ -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
Expand Down
1 change: 1 addition & 0 deletions components/calendar/src/stories/calendar-story-wrapper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,7 @@ export const CalendarStoryWrapper = (props) => {
onDateSelect={(date) => {
setSelectedDate(date)
}}
{...selectedDate.validation}
timeZone={timeZone}
weekDayFormat={selectedWeekFormat}
numberingSystem={selectedNumberingSystem}
Expand Down
8 changes: 4 additions & 4 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Loading