@lets-events/react 11.8.0 → 12.0.0

package/src/components/TimePicker.tsx

@@ -1,298 +1,301 @@
-import React, { useCallback, useRef, useState } from "react";
-import { Box } from "./Box";
-import { Button } from "./Button";
-import { TextField, TextFieldSlot } from "./TextField";
-import { Text } from "./Text";
-import Icon from "./Icon";
-import { styled } from "../styles";
-import { useOnClickOutside } from "../hooks/useOnClickOutside";
-
-export const TimePickerStyled = styled("div", {
-  position: "relative",
-  fontFamily: "$default",
-  lineHeight: "$base",
-  fontSize: "$14",
-  maxWidth: "200px",
-  borderRadius: "$sm",
-  "> div > div": {
-    paddingLeft: "1rem",
-    input: {
-      textAlign: "right",
-    },
-  },
-});
-
-export const TimePickerDropdownStyled = styled("div", {
-  position: "absolute",
-  left: 0,
-  zIndex: 10,
-  width: "100%",
-  maxWidth: "8.875rem",
-  backgroundColor: "$neutral50",
-  border: "1px solid $neutral300",
-  borderRadius: "$sm",
-  boxShadow: "0px 2px 8px 0px $shadow50",
-});
-
-export const TimePickerFooterStyled = styled("div", {
-  borderTop: "2px solid $neutral100",
-  padding: "$4 $16",
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  height: "3rem",
-});
-
-export const TimerPickerContentStyled = styled("div", {
-  display: "flex",
-  gap: "$16",
-  alignItems: "center",
-  padding: "$16 $16 $8 ",
-  "& > div:nth-child(2)": {
-    order: 2,
-  },
-  input: {
-    padding: "0",
-    textAlign: "center!important",
-  },
-});
-
-export const InputStyled = styled("input", {
-  height: "$40",
-  fontFamily: "$default",
-  borderRadius: "$sm",
-  boxSizing: "border-box",
-  color: "$dark500",
-  border: "1px solid $dark300",
-  position: "relative",
-  display: "flex",
-  width: "100%",
-  alignItems: "center",
-  padding: "0",
-  outline: "none",
-  margin: 0,
-  textAlign: "center",
-  "&:has(input:focus)": {
-    border: "2px solid $brand300",
-  },
-  "&:has(input:disabled)": {
-    backgroundColor: "$dark100",
-    color: "$dark400",
-    border: "1px solid $dark200",
-    cursor: "not-allowed",
-  },
-  inputMode: "numeric",
-  "&::-webkit-inner-spin-button": {
-    WebkitAppearance: "none",
-    margin: 0,
-  },
-  "&::-webkit-outer-spin-button": {
-    WebkitAppearance: "none",
-    margin: 0,
-  },
-  "&[type='number']": {
-    MozAppearance: "textfield",
-  },
-});
-
-export const TimePickerButtonStyled = styled("button", {
-  backgroundColor: "transparent",
-  border: "none",
-  maxWidth: "200px",
-  padding: "0",
-  cursor: "pointer",
-  "> div > div": {
-    paddingLeft: "1rem",
-    input: {
-      textAlign: "right",
-    },
-  },
-});
-
-export type TimePickerProps = {
-  selected: string | undefined;
-  setSelected: React.Dispatch<React.SetStateAction<string | undefined>>;
-  position?: "bottom" | "top";
-};
-const pad = (num: number) => String(num).padStart(2, "0");
-
-export function TimePicker({
-  selected,
-  setSelected,
-  position = "bottom",
-}: TimePickerProps) {
-  const [hours, setHours] = useState("00");
-  const [minutes, setMinutes] = useState("00");
-  const [rawHours, setRawHours] = useState("00");
-  const [rawMinutes, setRawMinutes] = useState("00");
-  const [isOpen, setIsOpen] = useState(false);
-  const dropdownRef = useRef(null);
-
-  useOnClickOutside(dropdownRef, () => setIsOpen(false));
-
-  const handleIncrement = useCallback(
-    (type: "hours" | "minutes") => {
-      if (type === "hours") {
-        const next = (parseInt(hours) + 1) % 24;
-        setHours(pad(next));
-        setRawHours(pad(next));
-      } else {
-        const next = (parseInt(minutes) + 1) % 60;
-        setMinutes(pad(next));
-        setRawMinutes(pad(next));
-      }
-    },
-    [hours, minutes]
-  );
-  const handleDecrement = useCallback(
-    (type: "hours" | "minutes") => {
-      if (type === "hours") {
-        const prev = (parseInt(hours) - 1 + 24) % 24;
-        setHours(pad(prev));
-        setRawHours(pad(prev));
-      } else {
-        const prev = (parseInt(minutes) - 1 + 60) % 60;
-        setMinutes(pad(prev));
-        setRawMinutes(pad(prev));
-      }
-    },
-    [hours, minutes]
-  );
-
-  return (
-    <TimePickerStyled ref={dropdownRef}>
-      <TimePickerButtonStyled
-        type="button"
-        onClick={() => setIsOpen((prev) => !prev)}
-      >
-        <TextField
-          value={selected}
-          readOnly
-          type="text"
-          placeholder="00:00"
-          typography="labelSmall"
-          fontWeight="regular"
-        >
-          <TextFieldSlot>
-            <Icon name="clock" size="xl" />
-          </TextFieldSlot>
-        </TextField>
-      </TimePickerButtonStyled>
-
-      {isOpen && (
-        <TimePickerDropdownStyled
-          style={position === "top" ? { bottom: "110%" } : { top: "110%" }}
-        >
-          <TimerPickerContentStyled>
-            {["hours", "minutes"].map((unit) => (
-              <Box
-                key={unit}
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  flexDirection: "column",
-                }}
-              >
-                <Button
-                  type="button"
-                  variant="text"
-                  onClick={() => handleIncrement(unit as "hours" | "minutes")}
-                >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="32"
-                    height="32"
-                    viewBox="0 0 32 32"
-                    fill="none"
-                  >
-                    <path
-                      d="M0 8C0 3.58172 3.58172 0 8 0H24C28.4183 0 32 3.58172 32 8V24C32 28.4183 28.4183 32 24 32H8C3.58172 32 0 28.4183 0 24V8Z"
-                      fill="white"
-                    />
-                    <path
-                      d="M16.7063 12.2937C16.3157 11.9031 15.6813 11.9031 15.2907 12.2937L10.2907 17.2937C9.9001 17.6843 9.9001 18.3187 10.2907 18.7093C10.6813 19.1 11.3157 19.1 11.7063 18.7093L16.0001 14.4156L20.2938 18.7062C20.6845 19.0968 21.3188 19.0968 21.7095 18.7062C22.1001 18.3156 22.1001 17.6812 21.7095 17.2906L16.7095 12.2906L16.7063 12.2937Z"
-                      fill="#808289"
-                    />
-                  </svg>
-                </Button>
-                <InputStyled
-                  inputMode="numeric"
-                  pattern="[0-9]*"
-                  type="text"
-                  placeholder="00"
-                  value={unit === "hours" ? rawHours : rawMinutes}
-                  onChange={(e) => {
-                    const rawValue = e.target.value.replace(/\D/g, "");
-                    if (unit === "hours") {
-                      setRawHours(rawValue);
-                    } else {
-                      setRawMinutes(rawValue);
-                    }
-                  }}
-                  onBlur={() => {
-                    let num = 0;
-                    if (unit === "hours") {
-                      num = Math.min(parseInt(rawHours || "0", 10), 23);
-                      const padded = pad(num);
-                      setHours(padded);
-                      setRawHours(padded);
-                    } else {
-                      num = Math.min(parseInt(rawMinutes || "0", 10), 59);
-                      const padded = pad(num);
-                      setMinutes(padded);
-                      setRawMinutes(padded);
-                    }
-                  }}
-                  onPaste={(e) => {
-                    const paste = e.clipboardData.getData("Text");
-                    if (!/^\d{1,2}$/.test(paste)) {
-                      e.preventDefault();
-                    }
-                  }}
-                />
-                <Button
-                  type="button"
-                  variant="text"
-                  onClick={() => handleDecrement(unit as "hours" | "minutes")}
-                >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="32"
-                    height="32"
-                    viewBox="0 0 32 32"
-                    fill="none"
-                  >
-                    <path
-                      d="M0 8C0 3.58172 3.58172 0 8 0H24C28.4183 0 32 3.58172 32 8V24C32 28.4183 28.4183 32 24 32H8C3.58172 32 0 28.4183 0 24V8Z"
-                      fill="white"
-                    />
-                    <path
-                      d="M15.2937 19.7063C15.6843 20.0969 16.3187 20.0969 16.7093 19.7063L21.7093 14.7063C22.0999 14.3157 22.0999 13.6813 21.7093 13.2907C21.3187 12.9 20.6843 12.9 20.2937 13.2907L15.9999 17.5844L11.7062 13.2938C11.3155 12.9032 10.6812 12.9032 10.2905 13.2938C9.8999 13.6844 9.8999 14.3188 10.2905 14.7094L15.2905 19.7094L15.2937 19.7063Z"
-                      fill="#808289"
-                    />
-                  </svg>
-                </Button>
-              </Box>
-            ))}
-            <Text>:</Text>
-          </TimerPickerContentStyled>
-          <TimePickerFooterStyled>
-            <Button
-              type="button"
-              variant="text"
-              color="brand"
-              onClick={() => {
-                setSelected(`${hours}:${minutes}`);
-                setIsOpen(false);
-              }}
-              size={"medium"}
-              fontWeight="medium"
-            >
-              Aplicar
-            </Button>
-          </TimePickerFooterStyled>
-        </TimePickerDropdownStyled>
-      )}
-    </TimePickerStyled>
-  );
-}
+import React, { useCallback, useRef, useState } from "react";
+import { Box } from "./Box";
+import { Button } from "./Button";
+import { TextField, TextFieldSlot } from "./TextField";
+import { Text } from "./Text";
+import Icon from "./Icon";
+import { styled } from "../styles";
+import { useOnClickOutside } from "../hooks/useOnClickOutside";
+
+export const TimePickerStyled = styled("div", {
+  position: "relative",
+  fontFamily: "$default",
+  lineHeight: "$base",
+  fontSize: "$14",
+  maxWidth: "200px",
+  borderRadius: "$sm",
+  "> div > div": {
+    paddingLeft: "1rem",
+    input: {
+      textAlign: "right",
+    },
+  },
+});
+
+export const TimePickerDropdownStyled = styled("div", {
+  position: "absolute",
+  left: 0,
+  zIndex: 10,
+  width: "100%",
+  maxWidth: "8.875rem",
+  backgroundColor: "$neutral50",
+  border: "1px solid $neutral300",
+  borderRadius: "$sm",
+  boxShadow: "0px 2px 8px 0px $shadow50",
+});
+
+export const TimePickerFooterStyled = styled("div", {
+  borderTop: "2px solid $neutral100",
+  padding: "$4 $16",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  height: "3rem",
+});
+
+export const TimerPickerContentStyled = styled("div", {
+  display: "flex",
+  gap: "$16",
+  alignItems: "center",
+  padding: "$16 $16 $8 ",
+  "& > div:nth-child(2)": {
+    order: 2,
+  },
+  input: {
+    padding: "0",
+    textAlign: "center!important",
+  },
+});
+
+export const InputStyled = styled("input", {
+  height: "$40",
+  fontFamily: "$default",
+  borderRadius: "$sm",
+  boxSizing: "border-box",
+  color: "$dark500",
+  border: "1px solid $dark300",
+  position: "relative",
+  display: "flex",
+  width: "100%",
+  alignItems: "center",
+  padding: "0",
+  outline: "none",
+  margin: 0,
+  textAlign: "center",
+  "&:has(input:focus)": {
+    border: "2px solid $brand300",
+  },
+  "&:has(input:disabled)": {
+    backgroundColor: "$dark100",
+    color: "$dark400",
+    border: "1px solid $dark200",
+    cursor: "not-allowed",
+  },
+  inputMode: "numeric",
+  "&::-webkit-inner-spin-button": {
+    WebkitAppearance: "none",
+    margin: 0,
+  },
+  "&::-webkit-outer-spin-button": {
+    WebkitAppearance: "none",
+    margin: 0,
+  },
+  "&[type='number']": {
+    MozAppearance: "textfield",
+  },
+});
+
+export const TimePickerButtonStyled = styled("button", {
+  backgroundColor: "transparent",
+  border: "none",
+  maxWidth: "200px",
+  padding: "0",
+  cursor: "pointer",
+  "> div > div": {
+    paddingLeft: "1rem",
+    input: {
+      textAlign: "right",
+    },
+  },
+});
+
+export type TimePickerProps = {
+  selected: string | undefined;
+  setSelected: React.Dispatch<React.SetStateAction<string | undefined>>;
+  position?: "bottom" | "top";
+  hasError?: boolean;
+};
+const pad = (num: number) => String(num).padStart(2, "0");
+
+export function TimePicker({
+  selected,
+  setSelected,
+  position = "bottom",
+  hasError,
+}: TimePickerProps) {
+  const [hours, setHours] = useState("00");
+  const [minutes, setMinutes] = useState("00");
+  const [rawHours, setRawHours] = useState("00");
+  const [rawMinutes, setRawMinutes] = useState("00");
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef(null);
+
+  useOnClickOutside(dropdownRef, () => setIsOpen(false));
+
+  const handleIncrement = useCallback(
+    (type: "hours" | "minutes") => {
+      if (type === "hours") {
+        const next = (parseInt(hours) + 1) % 24;
+        setHours(pad(next));
+        setRawHours(pad(next));
+      } else {
+        const next = (parseInt(minutes) + 1) % 60;
+        setMinutes(pad(next));
+        setRawMinutes(pad(next));
+      }
+    },
+    [hours, minutes]
+  );
+  const handleDecrement = useCallback(
+    (type: "hours" | "minutes") => {
+      if (type === "hours") {
+        const prev = (parseInt(hours) - 1 + 24) % 24;
+        setHours(pad(prev));
+        setRawHours(pad(prev));
+      } else {
+        const prev = (parseInt(minutes) - 1 + 60) % 60;
+        setMinutes(pad(prev));
+        setRawMinutes(pad(prev));
+      }
+    },
+    [hours, minutes]
+  );
+
+  return (
+    <TimePickerStyled ref={dropdownRef}>
+      <TimePickerButtonStyled
+        type="button"
+        onClick={() => setIsOpen((prev) => !prev)}
+      >
+        <TextField
+          value={selected}
+          readOnly
+          type="text"
+          placeholder="00:00"
+          typography="labelSmall"
+          fontWeight="regular"
+          color={hasError ? "error" : "default"}
+        >
+          <TextFieldSlot>
+            <Icon name="clock" size="xl" />
+          </TextFieldSlot>
+        </TextField>
+      </TimePickerButtonStyled>
+
+      {isOpen && (
+        <TimePickerDropdownStyled
+          style={position === "top" ? { bottom: "110%" } : { top: "110%" }}
+        >
+          <TimerPickerContentStyled>
+            {["hours", "minutes"].map((unit) => (
+              <Box
+                key={unit}
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  flexDirection: "column",
+                }}
+              >
+                <Button
+                  type="button"
+                  variant="text"
+                  onClick={() => handleIncrement(unit as "hours" | "minutes")}
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="32"
+                    height="32"
+                    viewBox="0 0 32 32"
+                    fill="none"
+                  >
+                    <path
+                      d="M0 8C0 3.58172 3.58172 0 8 0H24C28.4183 0 32 3.58172 32 8V24C32 28.4183 28.4183 32 24 32H8C3.58172 32 0 28.4183 0 24V8Z"
+                      fill="white"
+                    />
+                    <path
+                      d="M16.7063 12.2937C16.3157 11.9031 15.6813 11.9031 15.2907 12.2937L10.2907 17.2937C9.9001 17.6843 9.9001 18.3187 10.2907 18.7093C10.6813 19.1 11.3157 19.1 11.7063 18.7093L16.0001 14.4156L20.2938 18.7062C20.6845 19.0968 21.3188 19.0968 21.7095 18.7062C22.1001 18.3156 22.1001 17.6812 21.7095 17.2906L16.7095 12.2906L16.7063 12.2937Z"
+                      fill="#808289"
+                    />
+                  </svg>
+                </Button>
+                <InputStyled
+                  inputMode="numeric"
+                  pattern="[0-9]*"
+                  type="text"
+                  placeholder="00"
+                  value={unit === "hours" ? rawHours : rawMinutes}
+                  onChange={(e) => {
+                    const rawValue = e.target.value.replace(/\D/g, "");
+                    if (unit === "hours") {
+                      setRawHours(rawValue);
+                    } else {
+                      setRawMinutes(rawValue);
+                    }
+                  }}
+                  onBlur={() => {
+                    let num = 0;
+                    if (unit === "hours") {
+                      num = Math.min(parseInt(rawHours || "0", 10), 23);
+                      const padded = pad(num);
+                      setHours(padded);
+                      setRawHours(padded);
+                    } else {
+                      num = Math.min(parseInt(rawMinutes || "0", 10), 59);
+                      const padded = pad(num);
+                      setMinutes(padded);
+                      setRawMinutes(padded);
+                    }
+                  }}
+                  onPaste={(e) => {
+                    const paste = e.clipboardData.getData("Text");
+                    if (!/^\d{1,2}$/.test(paste)) {
+                      e.preventDefault();
+                    }
+                  }}
+                />
+                <Button
+                  type="button"
+                  variant="text"
+                  onClick={() => handleDecrement(unit as "hours" | "minutes")}
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="32"
+                    height="32"
+                    viewBox="0 0 32 32"
+                    fill="none"
+                  >
+                    <path
+                      d="M0 8C0 3.58172 3.58172 0 8 0H24C28.4183 0 32 3.58172 32 8V24C32 28.4183 28.4183 32 24 32H8C3.58172 32 0 28.4183 0 24V8Z"
+                      fill="white"
+                    />
+                    <path
+                      d="M15.2937 19.7063C15.6843 20.0969 16.3187 20.0969 16.7093 19.7063L21.7093 14.7063C22.0999 14.3157 22.0999 13.6813 21.7093 13.2907C21.3187 12.9 20.6843 12.9 20.2937 13.2907L15.9999 17.5844L11.7062 13.2938C11.3155 12.9032 10.6812 12.9032 10.2905 13.2938C9.8999 13.6844 9.8999 14.3188 10.2905 14.7094L15.2905 19.7094L15.2937 19.7063Z"
+                      fill="#808289"
+                    />
+                  </svg>
+                </Button>
+              </Box>
+            ))}
+            <Text>:</Text>
+          </TimerPickerContentStyled>
+          <TimePickerFooterStyled>
+            <Button
+              type="button"
+              variant="text"
+              color="brand"
+              onClick={() => {
+                setSelected(`${hours}:${minutes}`);
+                setIsOpen(false);
+              }}
+              size={"medium"}
+              fontWeight="medium"
+            >
+              Aplicar
+            </Button>
+          </TimePickerFooterStyled>
+        </TimePickerDropdownStyled>
+      )}
+    </TimePickerStyled>
+  );
+}