@inceptionbg/iui 2.0.23 → 2.0.24

package/src/components/Inputs/DateInput/DateInput.tsx

@@ -1,183 +1,184 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { FC, useEffect, useRef, useState } from 'react';
-import { Calendar } from 'react-calendar';
-import { Menu } from '../../Menu/Menu';
-import { InputWrapper } from '../InputWrapper';
-import { DatePartInput } from './components/DatePartInput';
-import { faCalendarPlus } from '../../../assets/icons/light/faCalendarPlus';
-import dayjs from 'dayjs';
-import { IMenuPlacement } from '../../../types/IMenu';
-import { formatDateYMD } from '../../../utils/dateUtils';
-import { useTranslation } from 'react-i18next';
-
-export interface IDateInputProps {
-  label?: string;
-  date?: string;
-  setDate: (date: string) => void;
-  required?: boolean;
-  disabled?: boolean;
-  autoFocus?: boolean;
-  error?: boolean;
-  helperText?: string;
-  errorText?: string;
-  isClearable?: boolean;
-  onClear?: () => void;
-  className?: string;
-  calendarPlacement?: IMenuPlacement;
-}
-
-export const DateInput: FC<IDateInputProps> = ({
-  label,
-  date,
-  setDate,
-  required,
-  disabled,
-  autoFocus,
-  error,
-  helperText,
-  errorText,
-  isClearable = true,
-  onClear,
-  className,
-  calendarPlacement,
-}) => {
-  const [day, setDay] = useState(date?.split('-')[2] ?? '');
-  const [month, setMonth] = useState(date?.split('-')[1] ?? '');
-  const [year, setYear] = useState(date?.split('-')[0] ?? '');
-  const { i18n } = useTranslation();
-
-  const [isCalendarOpen, setIsCalendarOpen] = useState(false);
-
-  const inputsRef = useRef<HTMLDivElement>(null);
-  const dayRef = useRef<HTMLInputElement>(null);
-  const monthRef = useRef<HTMLInputElement>(null);
-  const yearRef = useRef<HTMLInputElement>(null);
-
-  const maxDay = year && month ? new Date(+year, +month, 0).getDate() : 31;
-
-  useEffect(() => {
-    if (!date) {
-      setYear('');
-      setMonth('');
-      setDay('');
-    } else if (
-      ![dayRef.current, monthRef.current, yearRef.current].includes(
-        document.activeElement as HTMLInputElement
-      )
-    ) {
-      setYear(date.split('-')[0] ?? '');
-      setMonth(date.split('-')[1] ?? '');
-      setDay(date.split('-')[2] ?? '');
-    }
-  }, [date]);
-
-  return (
-    <Menu
-      isOpen={isCalendarOpen}
-      onClose={() => setIsCalendarOpen(false)}
-      placement={calendarPlacement}
-      renderButton={ref => (
-        <div ref={ref} className="full-width">
-          <InputWrapper
-            label={label}
-            focus={isCalendarOpen}
-            required={required}
-            className={className}
-            disabled={disabled}
-            onClearInput={
-              isClearable && (day || month || year) && !disabled
-                ? () => {
-                    setDay('');
-                    setMonth('');
-                    setYear('');
-                    setDate('');
-                    onClear?.();
-                  }
-                : undefined
-            }
-            helperText={helperText}
-            error={error}
-            errorText={errorText}
-          >
-            <div className="date-input">
-              <div
-                className="calendar-btn"
-                onClick={() => !disabled && setIsCalendarOpen(!isCalendarOpen)}
-              >
-                <FontAwesomeIcon icon={faCalendarPlus} className="icon" />
-              </div>
-              <div
-                ref={inputsRef}
-                className="inputs"
-                onClick={() => dayRef.current?.focus()}
-              >
-                <DatePartInput
-                  ref={dayRef}
-                  value={day}
-                  setValue={setDay}
-                  setDate={setDate}
-                  values={{ day, month, year }}
-                  required={required || !!month || !!year}
-                  disabled={disabled}
-                  autoFocus={autoFocus}
-                  max={maxDay}
-                  part="day"
-                  nextInput={monthRef.current}
-                />
-                <span>.</span>
-                <DatePartInput
-                  ref={monthRef}
-                  value={month}
-                  setValue={setMonth}
-                  setDate={setDate}
-                  values={{ day, month, year }}
-                  required={required || !!day || !!year}
-                  disabled={disabled}
-                  max={12}
-                  part="month"
-                  previousInput={dayRef.current}
-                  nextInput={yearRef.current}
-                />
-                <span>.</span>
-                <DatePartInput
-                  ref={yearRef}
-                  value={year}
-                  setValue={setYear}
-                  setDate={setDate}
-                  values={{ day, month, year }}
-                  required={required || !!day || !!month}
-                  disabled={disabled}
-                  min={1500}
-                  max={2500}
-                  part="year"
-                  previousInput={monthRef.current}
-                />
-              </div>
-            </div>
-          </InputWrapper>
-        </div>
-      )}
-    >
-      <Calendar
-        value={
-          date && dayjs(date, 'YYYY-MM-DD', true).isValid() ? new Date(date) : new Date()
-        }
-        onChange={e => {
-          const newDate = formatDateYMD(e as Date);
-          setDate(newDate);
-          setIsCalendarOpen(false);
-        }}
-        locale={
-          i18n.language === 'sr_RS_Latn'
-            ? 'sr-Latn-RS'
-            : i18n.language === 'sr_RS_Cyrl'
-              ? 'sr-RS'
-              : i18n.language
-        }
-        formatShortWeekday={(locale, date) =>
-          new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(date)
-        }
-      />
-    </Menu>
-  );
-};
+import type { FC } from 'react';
+import type { IMenuPlacement } from '../../../types/IMenu';
+import { useEffect, useRef, useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import dayjs from 'dayjs';
+import { Calendar } from 'react-calendar';
+import { useTranslation } from 'react-i18next';
+import { faCalendarPlus } from '../../../assets/icons/light/faCalendarPlus';
+import { formatDateYMD } from '../../../utils/dateUtils';
+import { Menu } from '../../Menu/Menu';
+import { InputWrapper } from '../InputWrapper';
+import { DatePartInput } from './components/DatePartInput';
+
+export interface IDateInputProps {
+  label?: string;
+  date?: string;
+  setDate: (date: string) => void;
+  required?: boolean;
+  disabled?: boolean;
+  autoFocus?: boolean;
+  error?: boolean;
+  helperText?: string;
+  errorText?: string;
+  isClearable?: boolean;
+  onClear?: () => void;
+  className?: string;
+  calendarPlacement?: IMenuPlacement;
+}
+
+export const DateInput: FC<IDateInputProps> = ({
+  label,
+  date,
+  setDate,
+  required,
+  disabled,
+  autoFocus,
+  error,
+  helperText,
+  errorText,
+  isClearable = true,
+  onClear,
+  className,
+  calendarPlacement,
+}) => {
+  const [day, setDay] = useState(date?.split('-')[2] ?? '');
+  const [month, setMonth] = useState(date?.split('-')[1] ?? '');
+  const [year, setYear] = useState(date?.split('-')[0] ?? '');
+  const { i18n } = useTranslation();
+
+  const [isCalendarOpen, setIsCalendarOpen] = useState(false);
+
+  const inputsRef = useRef<HTMLDivElement>(null);
+  const dayRef = useRef<HTMLInputElement>(null);
+  const monthRef = useRef<HTMLInputElement>(null);
+  const yearRef = useRef<HTMLInputElement>(null);
+
+  const maxDay = year && month ? new Date(+year, +month, 0).getDate() : 31;
+
+  useEffect(() => {
+    if (!date) {
+      setYear('');
+      setMonth('');
+      setDay('');
+    } else if (
+      ![dayRef.current, monthRef.current, yearRef.current].includes(
+        document.activeElement as HTMLInputElement
+      )
+    ) {
+      setYear(date.split('-')[0] ?? '');
+      setMonth(date.split('-')[1] ?? '');
+      setDay(date.split('-')[2] ?? '');
+    }
+  }, [date]);
+
+  return (
+    <Menu
+      isOpen={isCalendarOpen}
+      onClose={() => setIsCalendarOpen(false)}
+      placement={calendarPlacement}
+      renderButton={ref => (
+        <div ref={ref} className="full-width">
+          <InputWrapper
+            label={label}
+            focus={isCalendarOpen}
+            required={required}
+            className={className}
+            disabled={disabled}
+            onClearInput={
+              isClearable && (day || month || year) && !disabled
+                ? () => {
+                    setDay('');
+                    setMonth('');
+                    setYear('');
+                    setDate('');
+                    onClear?.();
+                  }
+                : undefined
+            }
+            helperText={helperText}
+            error={error}
+            errorText={errorText}
+          >
+            <div className="date-input">
+              <div
+                className="calendar-btn"
+                onClick={() => !disabled && setIsCalendarOpen(!isCalendarOpen)}
+              >
+                <FontAwesomeIcon icon={faCalendarPlus} className="icon" />
+              </div>
+              <div
+                ref={inputsRef}
+                className="inputs"
+                onClick={() => dayRef.current?.focus()}
+              >
+                <DatePartInput
+                  ref={dayRef}
+                  value={day}
+                  setValue={setDay}
+                  setDate={setDate}
+                  values={{ day, month, year }}
+                  required={required || !!month || !!year}
+                  disabled={disabled}
+                  autoFocus={autoFocus}
+                  max={maxDay}
+                  part="day"
+                  nextInput={monthRef.current}
+                />
+                <span>.</span>
+                <DatePartInput
+                  ref={monthRef}
+                  value={month}
+                  setValue={setMonth}
+                  setDate={setDate}
+                  values={{ day, month, year }}
+                  required={required || !!day || !!year}
+                  disabled={disabled}
+                  max={12}
+                  part="month"
+                  previousInput={dayRef.current}
+                  nextInput={yearRef.current}
+                />
+                <span>.</span>
+                <DatePartInput
+                  ref={yearRef}
+                  value={year}
+                  setValue={setYear}
+                  setDate={setDate}
+                  values={{ day, month, year }}
+                  required={required || !!day || !!month}
+                  disabled={disabled}
+                  min={1500}
+                  max={2500}
+                  part="year"
+                  previousInput={monthRef.current}
+                />
+              </div>
+            </div>
+          </InputWrapper>
+        </div>
+      )}
+    >
+      <Calendar
+        value={
+          date && dayjs(date, 'YYYY-MM-DD', true).isValid() ? new Date(date) : new Date()
+        }
+        onChange={e => {
+          const newDate = formatDateYMD(e as Date);
+          setDate(newDate);
+          setIsCalendarOpen(false);
+        }}
+        locale={
+          i18n.language === 'sr_RS_Latn'
+            ? 'sr-Latn-RS'
+            : i18n.language === 'sr_RS_Cyrl'
+              ? 'sr-RS'
+              : i18n.language
+        }
+        formatShortWeekday={(locale, date) =>
+          new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(date)
+        }
+      />
+    </Menu>
+  );
+};