@lets-events/react 12.10.3 → 12.10.5

package/src/components/Calendar/index.tsx

@@ -1,168 +1,168 @@
-import React, { ComponentProps, useRef, useEffect, useState } from "react";
-import { useOnClickOutside } from "../../hooks/useOnClickOutside";
-import { DayPicker, Matcher } from "react-day-picker";
-import { ptBR } from "date-fns/locale";
-import { parse, isValid, format, addYears } from "date-fns";
-import { Button } from "../Button";
-import { Box } from "../Box";
-import { TextField, TextFieldSlot } from "../TextField";
-import Icon from "../Icon";
-import {
-  CalendarContentStyled,
-  CalendarFooterStyled,
-  CalendarStyled,
-  DayPickerWrapperStyled,
-  CalendarButtonStyled,
-} from "./styledComponents";
-
-export type CalendarProps = ComponentProps<typeof CalendarStyled> & {
-  calendarLayout?: "label" | "dropdown" | "dropdown-months" | "dropdown-years";
-  selected: Date | undefined;
-  setSelected: React.Dispatch<React.SetStateAction<Date | undefined>>;
-  position?: "top" | "bottom" | "top-right" | "bottom-right";
-  action?: boolean;
-  actionText?: string;
-  actionAlign?: "left" | "center" | "right";
-  hasError?: boolean;
-  expand?: boolean;
-  allowPastDates?: boolean;
-  maxDate?: Date;
-  maxYearsFromNow?: number;
-  disabled?: boolean;
-};
-
-function formatToDateMask(value: string): string {
-  const numeric = value.replace(/\D/g, "").slice(0, 8);
-  const parts = numeric.match(/^(\d{0,2})(\d{0,2})(\d{0,4})$/);
-  if (!parts) return "";
-  const [, day, month, year] = parts;
-  return [day, month, year].filter(Boolean).join("/");
-}
-
-export function Calendar({
-  action,
-  actionText,
-  actionAlign = "right",
-  calendarLayout,
-  selected,
-  setSelected,
-  position = "bottom",
-  hasError,
-  expand,
-  allowPastDates = false,
-  maxDate,
-  maxYearsFromNow,
-  disabled = false,
-  ...props
-}: CalendarProps) {
-  const [inputValue, setInputValue] = useState("");
-  const [showContainer, setShowCalendar] = useState(false);
-
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  useOnClickOutside(dropdownRef, () => {
-    setShowCalendar(false);
-  });
-  const today = new Date();
-  const resolvedMaxDate =
-    maxDate ?? (typeof maxYearsFromNow === "number" ? addYears(today, maxYearsFromNow) : undefined);
-  const disabledDays: Matcher[] = [];
-
-  if (!allowPastDates) {
-    disabledDays.push({ before: today });
-  }
-  if (resolvedMaxDate) {
-    disabledDays.push({ after: resolvedMaxDate });
-  }
-
-  useEffect(() => {
-    if (selected) {
-      setInputValue(format(selected, "dd/MM/yyyy"));
-    } else {
-      setInputValue("");
-    }
-  }, [selected]);
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const masked = formatToDateMask(e.target.value);
-    setInputValue(masked);
-
-    const parsed = parse(masked, "dd/MM/yyyy", new Date());
-    if (isValid(parsed)) {
-      if (!allowPastDates && parsed < today) {
-        console.warn("Datas passadas não são permitidas:", masked);
-        return;
-      }
-      if (resolvedMaxDate && parsed > resolvedMaxDate) {
-        console.warn("Data maior que o limite máximo permitido:", masked);
-        return;
-      }
-      setSelected(parsed);
-    } else {
-      console.warn("Data inválida inserida no input:", masked);
-    }
-  };
-
-  return (
-    <div>
-      <CalendarStyled {...props} expand={expand} ref={dropdownRef}>
-        <CalendarButtonStyled
-          expand={expand}
-          type="button"
-          onClick={() => setShowCalendar((prev) => !prev)}
-        >
-          <TextField
-            placeholder="00/00/0000"
-            type="text"
-            value={inputValue}
-            onChange={handleInputChange}
-            inputMode="numeric"
-            textAlign={"right"}
-            color={hasError ? "error" : "default"}
-            disabled={disabled}
-          >
-            <TextFieldSlot>
-              <Icon name="calendar" size={"xl"} color="#4C4F54" />
-            </TextFieldSlot>
-          </TextField>
-        </CalendarButtonStyled>
-        {showContainer && (
-          <CalendarContentStyled position={position}>
-            <Box>
-              <DayPickerWrapperStyled>
-                <DayPicker
-                  mode="single"
-                  captionLayout={calendarLayout}
-                  selected={selected}
-                  onSelect={setSelected}
-                  required
-                  locale={ptBR}
-                  disabled={disabledDays.length > 0 ? disabledDays : undefined}
-                  startMonth={allowPastDates ? undefined : today}
-                  endMonth={resolvedMaxDate}
-                />
-              </DayPickerWrapperStyled>
-            </Box>
-
-            {action && (
-              <CalendarFooterStyled actionAlign={actionAlign}>
-                <Button
-                  variant="text"
-                  color="brand"
-                  type="button"
-                  onClick={() => {
-                    setShowCalendar(false);
-                  }}
-                  size={"medium"}
-                  fontWeight="medium"
-                >
-                  {actionText ?? "Aplicar"}
-                </Button>
-              </CalendarFooterStyled>
-            )}
-          </CalendarContentStyled>
-        )}
-      </CalendarStyled>
-    </div>
-  );
-}
+import React, { ComponentProps, useRef, useEffect, useState } from "react";
+import { useOnClickOutside } from "../../hooks/useOnClickOutside";
+import { DayPicker, Matcher } from "react-day-picker";
+import { ptBR } from "date-fns/locale";
+import { parse, isValid, format, addYears } from "date-fns";
+import { Button } from "../Button";
+import { Box } from "../Box";
+import { TextField, TextFieldSlot } from "../TextField";
+import Icon from "../Icon";
+import {
+  CalendarContentStyled,
+  CalendarFooterStyled,
+  CalendarStyled,
+  DayPickerWrapperStyled,
+  CalendarButtonStyled,
+} from "./styledComponents";
+
+export type CalendarProps = ComponentProps<typeof CalendarStyled> & {
+  calendarLayout?: "label" | "dropdown" | "dropdown-months" | "dropdown-years";
+  selected: Date | undefined;
+  setSelected: React.Dispatch<React.SetStateAction<Date | undefined>>;
+  position?: "top" | "bottom" | "top-right" | "bottom-right";
+  action?: boolean;
+  actionText?: string;
+  actionAlign?: "left" | "center" | "right";
+  hasError?: boolean;
+  expand?: boolean;
+  allowPastDates?: boolean;
+  maxDate?: Date;
+  maxYearsFromNow?: number;
+  disabled?: boolean;
+};
+
+function formatToDateMask(value: string): string {
+  const numeric = value.replace(/\D/g, "").slice(0, 8);
+  const parts = numeric.match(/^(\d{0,2})(\d{0,2})(\d{0,4})$/);
+  if (!parts) return "";
+  const [, day, month, year] = parts;
+  return [day, month, year].filter(Boolean).join("/");
+}
+
+export function Calendar({
+  action,
+  actionText,
+  actionAlign = "right",
+  calendarLayout,
+  selected,
+  setSelected,
+  position = "bottom",
+  hasError,
+  expand,
+  allowPastDates = false,
+  maxDate,
+  maxYearsFromNow,
+  disabled = false,
+  ...props
+}: CalendarProps) {
+  const [inputValue, setInputValue] = useState("");
+  const [showContainer, setShowCalendar] = useState(false);
+
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useOnClickOutside(dropdownRef, () => {
+    setShowCalendar(false);
+  });
+  const today = new Date();
+  const resolvedMaxDate =
+    maxDate ?? (typeof maxYearsFromNow === "number" ? addYears(today, maxYearsFromNow) : undefined);
+  const disabledDays: Matcher[] = [];
+
+  if (!allowPastDates) {
+    disabledDays.push({ before: today });
+  }
+  if (resolvedMaxDate) {
+    disabledDays.push({ after: resolvedMaxDate });
+  }
+
+  useEffect(() => {
+    if (selected) {
+      setInputValue(format(selected, "dd/MM/yyyy"));
+    } else {
+      setInputValue("");
+    }
+  }, [selected]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const masked = formatToDateMask(e.target.value);
+    setInputValue(masked);
+
+    const parsed = parse(masked, "dd/MM/yyyy", new Date());
+    if (isValid(parsed)) {
+      if (!allowPastDates && parsed < today) {
+        console.warn("Datas passadas não são permitidas:", masked);
+        return;
+      }
+      if (resolvedMaxDate && parsed > resolvedMaxDate) {
+        console.warn("Data maior que o limite máximo permitido:", masked);
+        return;
+      }
+      setSelected(parsed);
+    } else {
+      console.warn("Data inválida inserida no input:", masked);
+    }
+  };
+
+  return (
+    <div>
+      <CalendarStyled {...props} expand={expand} ref={dropdownRef}>
+        <CalendarButtonStyled
+          expand={expand}
+          type="button"
+          onClick={() => setShowCalendar((prev) => !prev)}
+        >
+          <TextField
+            placeholder="00/00/0000"
+            type="text"
+            value={inputValue}
+            onChange={handleInputChange}
+            inputMode="numeric"
+            textAlign={"right"}
+            color={hasError ? "error" : "default"}
+            disabled={disabled}
+          >
+            <TextFieldSlot>
+              <Icon name="calendar" size={"xl"} color="#4C4F54" />
+            </TextFieldSlot>
+          </TextField>
+        </CalendarButtonStyled>
+        {showContainer && (
+          <CalendarContentStyled position={position}>
+            <Box>
+              <DayPickerWrapperStyled>
+                <DayPicker
+                  mode="single"
+                  captionLayout={calendarLayout}
+                  selected={selected}
+                  onSelect={setSelected}
+                  required
+                  locale={ptBR}
+                  disabled={disabledDays.length > 0 ? disabledDays : undefined}
+                  startMonth={allowPastDates ? undefined : today}
+                  endMonth={resolvedMaxDate}
+                />
+              </DayPickerWrapperStyled>
+            </Box>
+
+            {action && (
+              <CalendarFooterStyled actionAlign={actionAlign}>
+                <Button
+                  variant="text"
+                  color="brand"
+                  type="button"
+                  onClick={() => {
+                    setShowCalendar(false);
+                  }}
+                  size={"medium"}
+                  fontWeight="medium"
+                >
+                  {actionText ?? "Aplicar"}
+                </Button>
+              </CalendarFooterStyled>
+            )}
+          </CalendarContentStyled>
+        )}
+      </CalendarStyled>
+    </div>
+  );
+}