@lets-events/react 8.0.0 → 9.0.0

package/src/components/Calendar/index.tsx

@@ -1,132 +1,136 @@
-import React, { ComponentProps, useRef, useEffect, useState } from "react";
-import { useOnClickOutside } from "../../hooks/useOnClickOutside";
-import { DayPicker } 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";
-  action?: boolean;
-  actionText?: string;
-};
-
-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,
-  calendarLayout,
-  selected,
-  setSelected,
-  position = "bottom",
-  ...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 maxDate = addYears(today, 20);
-
-  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)) {
-      setSelected(parsed);
-    } else {
-      console.warn("Data inválida inserida no input:", masked);
-    }
-  };
-
-  return (
-    <div>
-      <CalendarStyled {...props} ref={dropdownRef}>
-        <CalendarButtonStyled onClick={() => setShowCalendar((prev) => !prev)}>
-          <TextField
-            placeholder="00/00/0000"
-            type="text"
-            value={inputValue}
-            onChange={handleInputChange}
-            inputMode="numeric"
-            textAlign={"right"}
-          >
-            <TextFieldSlot>
-              <Icon name="calendar" size={"xl"} />
-            </TextFieldSlot>
-          </TextField>
-        </CalendarButtonStyled>
-        {showContainer && (
-          <CalendarContentStyled
-            style={position === "top" ? { bottom: "110%" } : { top: "110%" }}
-          >
-            <Box>
-              <DayPickerWrapperStyled>
-                <DayPicker
-                  mode="single"
-                  captionLayout={calendarLayout}
-                  selected={selected}
-                  onSelect={setSelected}
-                  required
-                  locale={ptBR}
-                  disabled={{ before: today }}
-                  startMonth={today}
-                  endMonth={maxDate}
-                />
-              </DayPickerWrapperStyled>
-            </Box>
-
-            {action && (
-              <CalendarFooterStyled>
-                <Button
-                  variant="text"
-                  color="brand"
-                  onClick={() => {
-                    setShowCalendar(false);
-                  }}
-                  typography="buttonMedium"
-                  fontWeight="medium"
-                >
-                  {actionText ?? "Aplicar"}
-                </Button>
-              </CalendarFooterStyled>
-            )}
-          </CalendarContentStyled>
-        )}
-      </CalendarStyled>
-    </div>
-  );
-}
+import React, { ComponentProps, useRef, useEffect, useState } from "react";
+import { useOnClickOutside } from "../../hooks/useOnClickOutside";
+import { DayPicker } 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";
+  action?: boolean;
+  actionText?: string;
+};
+
+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,
+  calendarLayout,
+  selected,
+  setSelected,
+  position = "bottom",
+  ...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 maxDate = addYears(today, 20);
+
+  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)) {
+      setSelected(parsed);
+    } else {
+      console.warn("Data inválida inserida no input:", masked);
+    }
+  };
+
+  return (
+    <div>
+      <CalendarStyled {...props} ref={dropdownRef}>
+        <CalendarButtonStyled
+          type="button"
+          onClick={() => setShowCalendar((prev) => !prev)}
+        >
+          <TextField
+            placeholder="00/00/0000"
+            type="text"
+            value={inputValue}
+            onChange={handleInputChange}
+            inputMode="numeric"
+            textAlign={"right"}
+          >
+            <TextFieldSlot>
+              <Icon name="calendar" size={"xl"} />
+            </TextFieldSlot>
+          </TextField>
+        </CalendarButtonStyled>
+        {showContainer && (
+          <CalendarContentStyled
+            style={position === "top" ? { bottom: "110%" } : { top: "110%" }}
+          >
+            <Box>
+              <DayPickerWrapperStyled>
+                <DayPicker
+                  mode="single"
+                  captionLayout={calendarLayout}
+                  selected={selected}
+                  onSelect={setSelected}
+                  required
+                  locale={ptBR}
+                  disabled={{ before: today }}
+                  startMonth={today}
+                  endMonth={maxDate}
+                />
+              </DayPickerWrapperStyled>
+            </Box>
+
+            {action && (
+              <CalendarFooterStyled>
+                <Button
+                  variant="text"
+                  color="brand"
+                  type="button"
+                  onClick={() => {
+                    setShowCalendar(false);
+                  }}
+                  typography="buttonMedium"
+                  fontWeight="medium"
+                >
+                  {actionText ?? "Aplicar"}
+                </Button>
+              </CalendarFooterStyled>
+            )}
+          </CalendarContentStyled>
+        )}
+      </CalendarStyled>
+    </div>
+  );
+}