@lets-events/react 12.10.17 → 12.11.1

package/src/components/FormFields/DateAndTimeFormField.tsx

@@ -1,217 +1,217 @@
-import { FieldValues, useController, RegisterOptions } from "react-hook-form";
-import { Flex } from "../Flex";
-import { FormLabel } from "./subComponents/FormLabel";
-import { ErrorFormMessage } from "./subComponents/ErrorFormMessage";
-import { Calendar, CalendarProps } from "../Calendar";
-import { TimePicker, TimePickerProps } from "../TimePicker";
-import { useCallback, useEffect, useMemo, useState, type SyntheticEvent } from "react";
-import { useToast } from "../Toast/hooks/useToast";
-
-export type DateAndTimeFormFieldProps = Omit<
-    CalendarProps,
-    "selected" | "setSelected"
-> & Omit<
-    TimePickerProps,
-    "selected" | "setSelected"
-> & {
-    name: string;
-    label?: string;
-    required?: boolean;
-    validate?: (value: string | undefined) => boolean | string;
-    validationErrorMessage?: string;
-    rules?: Omit<
-        RegisterOptions<FieldValues, string>,
-        "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled"
-    >;
-    disabled?: boolean;
-    disabledInfo?: string;
-    allowPastDates?: boolean;
-    maxYearsFromNow?: number;
-    maxDate?: Date;
-};
-
-export const DateAndTimeFormField = ({
-    name,
-    label,
-    required,
-    validate,
-    validationErrorMessage = "Este campo é obrigatório.",
-    rules,
-    disabled = false,
-    disabledInfo = "Este campo está desabilitado.",
-    allowPastDates,
-    maxYearsFromNow = 20,
-    maxDate,
-    ...props
-}: DateAndTimeFormFieldProps) => {
-    const { addToast } = useToast();
-
-    const handleDisabledClick = useCallback(
-        (event: SyntheticEvent) => {
-            if (!disabled) return;
-            event.preventDefault();
-            event.stopPropagation();
-            addToast({
-                type: "error",
-                icon: "xmark-circle",
-                message: disabledInfo,
-            });
-        },
-        [addToast, disabled, disabledInfo]
-    );
-
-    const handleDisabledMouseDown = useCallback(
-        (event: SyntheticEvent) => {
-            if (!disabled) return;
-            event.preventDefault();
-            event.stopPropagation();
-        },
-        [disabled]
-    );
-
-    const handleValidate = useCallback(
-        (value?: string) => {
-            if (value === undefined || value === null || value === "") {
-                if (required) return validationErrorMessage;
-                return true;
-            }
-            return validate?.(value) ?? true;
-        },
-        [validate, required, validationErrorMessage]
-    );
-
-    const { field, fieldState } = useController({
-        name,
-        rules: {
-            required: required ? validationErrorMessage : false,
-            validate: handleValidate,
-            ...rules,
-        },
-        defaultValue: "",
-    });
-
-    const fieldError = fieldState.error;
-    const haveError = !!fieldError;
-    const errorMsg = fieldError?.message;
-
-    const { value: isoValue, onChange: setIsoValue } = field;
-
-    const { selectedDateFromIso, selectedTimeFromIso } = useMemo(() => {
-        if (!isoValue) return { selectedDateFromIso: undefined, selectedTimeFromIso: undefined };
-
-        try {
-            const date = new Date(isoValue);
-            if (isNaN(date.getTime())) {
-                return { selectedDateFromIso: undefined, selectedTimeFromIso: undefined };
-            }
-
-            const hours = String(date.getHours()).padStart(2, "0");
-            const minutes = String(date.getMinutes()).padStart(2, "0");
-            const time = `${hours}:${minutes}`;
-
-            return { selectedDateFromIso: date, selectedTimeFromIso: time };
-        } catch {
-            return { selectedDateFromIso: undefined, selectedTimeFromIso: undefined };
-        }
-    }, [isoValue]);
-
-    const [draftDate, setDraftDate] = useState<Date | undefined>(selectedDateFromIso);
-    const [draftTime, setDraftTime] = useState<string | undefined>(selectedTimeFromIso);
-
-    useEffect(() => {
-        setDraftDate(selectedDateFromIso);
-        setDraftTime(selectedTimeFromIso);
-    }, [selectedDateFromIso, selectedTimeFromIso]);
-
-    const combineDateTime = useCallback(
-        (date?: Date, time?: string) => {
-            if (!date) {
-                setIsoValue("");
-                return;
-            }
-
-            const [hours, minutes] = (time ?? "00:00").split(":").map(Number);
-            const combined = new Date(date);
-            combined.setHours(hours || 0, minutes || 0, 0, 0);
-
-            setIsoValue(combined.toISOString());
-        },
-        [setIsoValue]
-    );
-
-    const handleDateChange = (date: Date | undefined) => {
-        setDraftDate(date);
-        combineDateTime(date, draftTime);
-    };
-
-    const handleTimeChange = (time: string | undefined) => {
-        setDraftTime(time);
-        combineDateTime(draftDate, time);
-    };
-
-    return (
-        <Flex direction="column">
-            {label && (
-                <FormLabel
-                    name={name}
-                    label={label}
-                    required={required}
-                    haveError={haveError}
-                />
-            )}
-
-            <Flex
-                gap={12}
-                align="start"
-                style={disabled ? { position: "relative" } : undefined}
-            >
-                <Flex direction="column">
-                    <Calendar
-                        selected={draftDate}
-                        setSelected={(date) => {
-                            const d = typeof date === "function" ? date(draftDate) : date;
-                            handleDateChange(d);
-                        }}
-                        hasError={haveError}
-                        allowPastDates={allowPastDates}
-                        maxYearsFromNow={maxYearsFromNow}
-                        maxDate={maxDate}
-                        disabled={disabled}
-                        {...(props as Omit<CalendarProps, "selected" | "setSelected">)}
-                    />
-                </Flex>
-
-                <Flex direction="column">
-                    <TimePicker
-                        selected={draftTime}
-                        setSelected={(value) => {
-                            const time = typeof value === "function" ? value(draftTime) : value;
-                            handleTimeChange(time);
-                        }}
-                        disabled={disabled}
-                        hasError={haveError}
-                        {...(props as Omit<TimePickerProps, "selected" | "setSelected">)}
-                    />
-                </Flex>
-
-                {disabled && (
-                    <div
-                        aria-hidden
-                        style={{
-                            position: "absolute",
-                            inset: 0,
-                            zIndex: 1,
-                            cursor: "not-allowed",
-                        }}
-                        onClick={handleDisabledClick}
-                        onMouseDown={handleDisabledMouseDown}
-                    />
-                )}
-            </Flex>
-
-            <ErrorFormMessage message={errorMsg} />
-        </Flex>
-    );
-};
-
-export default DateAndTimeFormField
+import { FieldValues, useController, RegisterOptions } from "react-hook-form";
+import { Flex } from "../Flex";
+import { FormLabel } from "./subComponents/FormLabel";
+import { ErrorFormMessage } from "./subComponents/ErrorFormMessage";
+import { Calendar, CalendarProps } from "../Calendar";
+import { TimePicker, TimePickerProps } from "../TimePicker";
+import { useCallback, useEffect, useMemo, useState, type SyntheticEvent } from "react";
+import { useToast } from "../Toast/hooks/useToast";
+
+export type DateAndTimeFormFieldProps = Omit<
+    CalendarProps,
+    "selected" | "setSelected"
+> & Omit<
+    TimePickerProps,
+    "selected" | "setSelected"
+> & {
+    name: string;
+    label?: string;
+    required?: boolean;
+    validate?: (value: string | undefined) => boolean | string;
+    validationErrorMessage?: string;
+    rules?: Omit<
+        RegisterOptions<FieldValues, string>,
+        "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled"
+    >;
+    disabled?: boolean;
+    disabledInfo?: string;
+    allowPastDates?: boolean;
+    maxYearsFromNow?: number;
+    maxDate?: Date;
+};
+
+export const DateAndTimeFormField = ({
+    name,
+    label,
+    required,
+    validate,
+    validationErrorMessage = "Este campo é obrigatório.",
+    rules,
+    disabled = false,
+    disabledInfo = "Este campo está desabilitado.",
+    allowPastDates,
+    maxYearsFromNow = 20,
+    maxDate,
+    ...props
+}: DateAndTimeFormFieldProps) => {
+    const { addToast } = useToast();
+
+    const handleDisabledClick = useCallback(
+        (event: SyntheticEvent) => {
+            if (!disabled) return;
+            event.preventDefault();
+            event.stopPropagation();
+            addToast({
+                type: "error",
+                icon: "xmark-circle",
+                message: disabledInfo,
+            });
+        },
+        [addToast, disabled, disabledInfo]
+    );
+
+    const handleDisabledMouseDown = useCallback(
+        (event: SyntheticEvent) => {
+            if (!disabled) return;
+            event.preventDefault();
+            event.stopPropagation();
+        },
+        [disabled]
+    );
+
+    const handleValidate = useCallback(
+        (value?: string) => {
+            if (value === undefined || value === null || value === "") {
+                if (required) return validationErrorMessage;
+                return true;
+            }
+            return validate?.(value) ?? true;
+        },
+        [validate, required, validationErrorMessage]
+    );
+
+    const { field, fieldState } = useController({
+        name,
+        rules: {
+            required: required ? validationErrorMessage : false,
+            validate: handleValidate,
+            ...rules,
+        },
+        defaultValue: "",
+    });
+
+    const fieldError = fieldState.error;
+    const haveError = !!fieldError;
+    const errorMsg = fieldError?.message;
+
+    const { value: isoValue, onChange: setIsoValue } = field;
+
+    const { selectedDateFromIso, selectedTimeFromIso } = useMemo(() => {
+        if (!isoValue) return { selectedDateFromIso: undefined, selectedTimeFromIso: undefined };
+
+        try {
+            const date = new Date(isoValue);
+            if (isNaN(date.getTime())) {
+                return { selectedDateFromIso: undefined, selectedTimeFromIso: undefined };
+            }
+
+            const hours = String(date.getHours()).padStart(2, "0");
+            const minutes = String(date.getMinutes()).padStart(2, "0");
+            const time = `${hours}:${minutes}`;
+
+            return { selectedDateFromIso: date, selectedTimeFromIso: time };
+        } catch {
+            return { selectedDateFromIso: undefined, selectedTimeFromIso: undefined };
+        }
+    }, [isoValue]);
+
+    const [draftDate, setDraftDate] = useState<Date | undefined>(selectedDateFromIso);
+    const [draftTime, setDraftTime] = useState<string | undefined>(selectedTimeFromIso);
+
+    useEffect(() => {
+        setDraftDate(selectedDateFromIso);
+        setDraftTime(selectedTimeFromIso);
+    }, [selectedDateFromIso, selectedTimeFromIso]);
+
+    const combineDateTime = useCallback(
+        (date?: Date, time?: string) => {
+            if (!date) {
+                setIsoValue("");
+                return;
+            }
+
+            const [hours, minutes] = (time ?? "00:00").split(":").map(Number);
+            const combined = new Date(date);
+            combined.setHours(hours || 0, minutes || 0, 0, 0);
+
+            setIsoValue(combined.toISOString());
+        },
+        [setIsoValue]
+    );
+
+    const handleDateChange = (date: Date | undefined) => {
+        setDraftDate(date);
+        combineDateTime(date, draftTime);
+    };
+
+    const handleTimeChange = (time: string | undefined) => {
+        setDraftTime(time);
+        combineDateTime(draftDate, time);
+    };
+
+    return (
+        <Flex direction="column">
+            {label && (
+                <FormLabel
+                    name={name}
+                    label={label}
+                    required={required}
+                    haveError={haveError}
+                />
+            )}
+
+            <Flex
+                gap={12}
+                align="start"
+                style={disabled ? { position: "relative" } : undefined}
+            >
+                <Flex direction="column">
+                    <Calendar
+                        selected={draftDate}
+                        setSelected={(date) => {
+                            const d = typeof date === "function" ? date(draftDate) : date;
+                            handleDateChange(d);
+                        }}
+                        hasError={haveError}
+                        allowPastDates={allowPastDates}
+                        maxYearsFromNow={maxYearsFromNow}
+                        maxDate={maxDate}
+                        disabled={disabled}
+                        {...(props as Omit<CalendarProps, "selected" | "setSelected">)}
+                    />
+                </Flex>
+
+                <Flex direction="column">
+                    <TimePicker
+                        selected={draftTime}
+                        setSelected={(value) => {
+                            const time = typeof value === "function" ? value(draftTime) : value;
+                            handleTimeChange(time);
+                        }}
+                        disabled={disabled}
+                        hasError={haveError}
+                        {...(props as Omit<TimePickerProps, "selected" | "setSelected">)}
+                    />
+                </Flex>
+
+                {disabled && (
+                    <div
+                        aria-hidden
+                        style={{
+                            position: "absolute",
+                            inset: 0,
+                            zIndex: 1,
+                            cursor: "not-allowed",
+                        }}
+                        onClick={handleDisabledClick}
+                        onMouseDown={handleDisabledMouseDown}
+                    />
+                )}
+            </Flex>
+
+            <ErrorFormMessage message={errorMsg} />
+        </Flex>
+    );
+};
+
+export default DateAndTimeFormField

package/src/components/FormFields/DoubleCalendarFormField.tsx

@@ -1,96 +1,96 @@
-import { useCallback } from "react";
-import { FieldValues, useController, RegisterOptions } from "react-hook-form";
-import { Flex } from "../Flex";
-import { FormLabel } from "./subComponents/FormLabel";
-import { ErrorFormMessage } from "./subComponents/ErrorFormMessage";
-import { DoubleCalendar, DateRange, DoubleCalendarProps } from "../DoubleCalendar";
-
-export type DoubleCalendarFormFieldProps = Omit<
-    DoubleCalendarProps,
-    "selected" | "setSelected"
-> & {
-    name: string;
-    label?: string;
-    required?: boolean;
-    validate?: (value: DateRange) => boolean | string;
-    validationErrorMessage?: string;
-    rules?: Omit<
-        RegisterOptions<FieldValues, string>,
-        "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled"
-    >;
-    disabled?: boolean;
-    allowPastDates?: boolean;
-    maxYearsFromNow?: number;
-    maxDate?: Date;
-};
-
-export const DoubleCalendarFormField = ({
-    name,
-    label,
-    required,
-    validate,
-    validationErrorMessage = "Este campo é obrigatório.",
-    rules,
-    allowPastDates,
-    maxYearsFromNow = 20,
-    maxDate,
-    disabled,
-    ...calendarProps
-}: DoubleCalendarFormFieldProps) => {
-    const handleValidate = useCallback(
-        (value?: DateRange) => {
-            if (value === undefined || value === null) {
-                if (required) return validationErrorMessage;
-                return true;
-            }
-            return validate?.(value) ?? true;
-        },
-        [validate, required, validationErrorMessage]
-    );
-
-    const { field, fieldState } = useController({
-        name,
-        rules: {
-            required: required ? validationErrorMessage : false,
-            validate: handleValidate,
-            ...rules,
-        },
-        defaultValue: undefined,
-    });
-
-    const fieldError = fieldState.error;
-    const haveError = !!fieldError;
-    const errorMsg = fieldError?.message;
-
-    const { value: selected, onChange: setSelected } = field as any;
-
-    const handleCalendarChange = (range: DateRange) => {
-        setSelected(range);
-    };
-
-    return (
-        <Flex direction="column" style={{ flex: "1" }}>
-            {label && (
-                <FormLabel name={name} label={label} required={required} haveError={haveError} />
-            )}
-
-            <DoubleCalendar
-                selected={selected}
-                setSelected={(value) => {
-                    const newValue = typeof value === "function" ? value(selected) : value;
-                    handleCalendarChange(newValue);
-                }}
-                disabled={disabled}
-                hasError={haveError}
-                allowPastDates={allowPastDates}
-                maxYearsFromNow={maxYearsFromNow}
-                maxDate={maxDate}
-                {...calendarProps}
-            />
-
-            <ErrorFormMessage message={errorMsg} />
-        </Flex>
-    );
-};
-
-export default DoubleCalendarFormField;
+import { useCallback } from "react";
+import { FieldValues, useController, RegisterOptions } from "react-hook-form";
+import { Flex } from "../Flex";
+import { FormLabel } from "./subComponents/FormLabel";
+import { ErrorFormMessage } from "./subComponents/ErrorFormMessage";
+import { DoubleCalendar, DateRange, DoubleCalendarProps } from "../DoubleCalendar";
+
+export type DoubleCalendarFormFieldProps = Omit<
+    DoubleCalendarProps,
+    "selected" | "setSelected"
+> & {
+    name: string;
+    label?: string;
+    required?: boolean;
+    validate?: (value: DateRange) => boolean | string;
+    validationErrorMessage?: string;
+    rules?: Omit<
+        RegisterOptions<FieldValues, string>,
+        "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled"
+    >;
+    disabled?: boolean;
+    allowPastDates?: boolean;
+    maxYearsFromNow?: number;
+    maxDate?: Date;
+};
+
+export const DoubleCalendarFormField = ({
+    name,
+    label,
+    required,
+    validate,
+    validationErrorMessage = "Este campo é obrigatório.",
+    rules,
+    allowPastDates,
+    maxYearsFromNow = 20,
+    maxDate,
+    disabled,
+    ...calendarProps
+}: DoubleCalendarFormFieldProps) => {
+    const handleValidate = useCallback(
+        (value?: DateRange) => {
+            if (value === undefined || value === null) {
+                if (required) return validationErrorMessage;
+                return true;
+            }
+            return validate?.(value) ?? true;
+        },
+        [validate, required, validationErrorMessage]
+    );
+
+    const { field, fieldState } = useController({
+        name,
+        rules: {
+            required: required ? validationErrorMessage : false,
+            validate: handleValidate,
+            ...rules,
+        },
+        defaultValue: undefined,
+    });
+
+    const fieldError = fieldState.error;
+    const haveError = !!fieldError;
+    const errorMsg = fieldError?.message;
+
+    const { value: selected, onChange: setSelected } = field as any;
+
+    const handleCalendarChange = (range: DateRange) => {
+        setSelected(range);
+    };
+
+    return (
+        <Flex direction="column" style={{ flex: "1" }}>
+            {label && (
+                <FormLabel name={name} label={label} required={required} haveError={haveError} />
+            )}
+
+            <DoubleCalendar
+                selected={selected}
+                setSelected={(value) => {
+                    const newValue = typeof value === "function" ? value(selected) : value;
+                    handleCalendarChange(newValue);
+                }}
+                disabled={disabled}
+                hasError={haveError}
+                allowPastDates={allowPastDates}
+                maxYearsFromNow={maxYearsFromNow}
+                maxDate={maxDate}
+                {...calendarProps}
+            />
+
+            <ErrorFormMessage message={errorMsg} />
+        </Flex>
+    );
+};
+
+export default DoubleCalendarFormField;