fix: stories for calendar validation

dhis2 · Oct 4, 2024 · 389c0f6 · 389c0f6
1 parent 2f77711
commit 389c0f6
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 34 deletions.
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)
 
@@ -67,9 +66,7 @@ export const CalendarInput = ({
  maxDateString: maxDate,
  strictValidation,
  })
- setIsIconDisplayed(
- validated.errorMessage || validated.warningMessage
- )
+
  setOpen(false)
  parentOnDateSelect?.({
  calendarDateString: result.calendarDateString,
@@ -97,7 +94,6 @@ export const CalendarInput = ({
  maxDateString: maxDate,
  strictValidation,
  })
- setIsIconDisplayed(validated.errorMessage || validated.warningMessage)
  parentOnDateSelect?.({ calendarDateString: partialDate, ...validated })
 
  if (
@@ -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 {

diff --git a/components/calendar/src/stories/calendar-input.prod.stories.js b/components/calendar/src/stories/calendar-input.prod.stories.js
@@ -25,19 +25,18 @@ export default {
 
 const buildCalendar =
  ({ date, locale, calendar }) =>
- () =>
- (
- <CalendarStoryWrapper
- component={CalendarInput}
- dir="ltr"
- timeZone="Africa/Khartoum"
- weekDayFormat="short"
- date={date}
- locale={locale}
- calendar={calendar}
- onDateSelect={() => {}}
- />
- )
+ () => (
+ <CalendarStoryWrapper
+ component={CalendarInput}
+ dir="ltr"
+ timeZone="Africa/Khartoum"
+ weekDayFormat="short"
+ date={date}
+ locale={locale}
+ calendar={calendar}
+ onDateSelect={() => {}}
+ />
+ )
 
 export const EthiopicWithAmharic = buildCalendar({
  calendar: 'ethiopic',
@@ -142,9 +141,13 @@ export function CalendarWithEditiableInput() {
 
 export function CalendarWithEditiableInputReactForm() {
  const [calendarError, setCalendarError] = useState(undefined)
+ const [calendarWarning, setCalendarWarning] = useState(undefined)
 
  const errored = () => {
- return { calendar: calendarError }
+ if (!calendarError && !calendarWarning) {
+ return { calendar: undefined }
+ }
+ return { calendar: calendarError || calendarWarning }
  }
 
  return (
@@ -155,7 +158,7 @@ export function CalendarWithEditiableInputReactForm() {
  initialValues={{ calendar: '2022-10-12' }}
  validate={errored}
  >
- {({ handleSubmit }) => {
+ {({ handleSubmit, invalid }) => {
  return (
  <form onSubmit={handleSubmit}>
  <Field name="calendar">
@@ -167,12 +170,16 @@ export function CalendarWithEditiableInputReactForm() {
  editable
  date={props.input.value}
  calendar="gregory"
+ validationText={
+ calendarError || calendarWarning
+ }
+ error={!!calendarError}
+ warning={!!calendarWarning}
+ strictValidation={true}
+ minDate="2022-11-01"
  onDateSelect={(date) => {
- if (!date.isValid) {
- setCalendarError(date.errorMessage)
- } else {
- setCalendarError(undefined)
- }
+ setCalendarError(date.errorMessage)
+ setCalendarWarning(date.warningMessage)
  props.input.onChange(
  date ? date?.calendarDateString : ''
  )
@@ -184,7 +191,7 @@ export function CalendarWithEditiableInputReactForm() {
 
  <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
@@ -19,6 +19,9 @@ export const CalendarStoryWrapper = (props) => {
  const [selectedDirection, setSelectedDirection] = useState(dir)
  const [selectedWeekFormat, setWeekDayFormat] = useState(weekDayFormat)
 
+ const [calendarError, setCalendarError] = useState(undefined)
+ const [calendarWarning, setCalendarWarning] = useState(undefined)
+
  const [selectedLocale, setLocale] = useState(locale)
  const [selectedDate, setSelectedDate] = useState({
  calendarDateString: date,
@@ -112,7 +115,13 @@ export const CalendarStoryWrapper = (props) => {
  dir={selectedDirection}
  locale={selectedLocale}
  date={selectedDate.calendarDateString}
+ validationText={calendarError || calendarWarning}
+ error={!!calendarError}
+ warning={!!calendarWarning}
  onDateSelect={(date) => {
+ setCalendarError(date.errorMessage)
+ setCalendarWarning(date.warningMessage)
+
  setSelectedDate(date)
  }}
  timeZone={timeZone}