@lets-events/react 7.0.1 → 7.2.0

package/src/components/TimePicker.tsx

@@ -1,29 +1,39 @@
-import React, { useCallback, useState } from "react";
-import { Dialog as TimePickerRadix } from "@radix-ui/themes";
+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 TimePickerTitleStyled = styled(TimePickerRadix.Title, {
-  display: "none",
-});
-export const TimePickerDialogStyled = styled(TimePickerRadix.Content, {
+
+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",
@@ -32,6 +42,7 @@ export const TimePickerFooterStyled = styled("div", {
   alignItems: "center",
   height: "3rem",
 });
+
 export const TimerPickerContentStyled = styled("div", {
   display: "flex",
   gap: "$16",
@@ -40,21 +51,36 @@ export const TimerPickerContentStyled = styled("div", {
   "& > div:nth-child(2)": {
     order: 2,
   },
+  input: {
+    padding: "0",
+    textAlign: "center!important",
+  },
 });
+
 export type TimePickerProps = {
   selected: string | undefined;
   setSelected: React.Dispatch<React.SetStateAction<string | undefined>>;
+  position?: "bottom" | "top";
 };
 
-export function TimePicker({ selected, setSelected }: TimePickerProps) {
+export function TimePicker({
+  selected,
+  setSelected,
+  position = "bottom",
+}: TimePickerProps) {
   const [hours, setHours] = useState("00");
   const [minutes, setMinutes] = useState("00");
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef(null);
+
+  useOnClickOutside(dropdownRef, () => setIsOpen(false));
 
   const pad = (num: number) => String(num).padStart(2, "0");
 
   const handleInputValue = useCallback(
     (time: string) => {
       setSelected(time);
+      setIsOpen(false);
     },
     [setSelected]
   );
@@ -71,7 +97,6 @@ export function TimePicker({ selected, setSelected }: TimePickerProps) {
     },
     [hours, minutes]
   );
-
   const handleDecrement = useCallback(
     (type: "hours" | "minutes") => {
       if (type === "hours") {
@@ -86,24 +111,25 @@ export function TimePicker({ selected, setSelected }: TimePickerProps) {
   );
 
   return (
-    <TimePickerRadix.Root>
-      <TimePickerStyled>
-        <TimePickerRadix.Trigger>
-          <TextField
-            value={selected}
-            readOnly
-            type="text"
-            placeholder="00:00"
-            typography="labelSmall"
-            fontWeight="regular"
-          >
-            <TextFieldSlot>
-              <Icon name="clock" size="xl" />
-            </TextFieldSlot>
-          </TextField>
-        </TimePickerRadix.Trigger>
-        <TimePickerDialogStyled>
-          <TimePickerTitleStyled>Horário</TimePickerTitleStyled>
+    <TimePickerStyled ref={dropdownRef}>
+      <TextField
+        value={selected}
+        readOnly
+        type="text"
+        placeholder="00:00"
+        typography="labelSmall"
+        fontWeight="regular"
+        onClick={() => setIsOpen((prev) => !prev)}
+      >
+        <TextFieldSlot>
+          <Icon name="clock" size="xl" />
+        </TextFieldSlot>
+      </TextField>
+
+      {isOpen && (
+        <TimePickerDropdownStyled
+          style={position === "top" ? { bottom: "110%" } : { top: "110%" }}
+        >
           <TimerPickerContentStyled>
             {["hours", "minutes"].map((unit) => (
               <Box
@@ -143,9 +169,7 @@ export function TimePicker({ selected, setSelected }: TimePickerProps) {
                   typography="labelSmall"
                   fontWeight="regular"
                   textAlign="center"
-                  style={{ padding: "4px" }}
                 />
-
                 <Button
                   variant="text"
                   onClick={() => handleDecrement(unit as "hours" | "minutes")}
@@ -172,20 +196,18 @@ export function TimePicker({ selected, setSelected }: TimePickerProps) {
             <Text>:</Text>
           </TimerPickerContentStyled>
           <TimePickerFooterStyled>
-            <TimePickerRadix.Close>
-              <Button
-                variant="text"
-                color="brand"
-                onClick={() => handleInputValue(`${hours}:${minutes}`)}
-                typography="buttonMedium"
-                fontWeight="medium"
-              >
-                Aplicar
-              </Button>
-            </TimePickerRadix.Close>
+            <Button
+              variant="text"
+              color="brand"
+              onClick={() => handleInputValue(`${hours}:${minutes}`)}
+              typography="buttonMedium"
+              fontWeight="medium"
+            >
+              Aplicar
+            </Button>
           </TimePickerFooterStyled>
-        </TimePickerDialogStyled>
-      </TimePickerStyled>
-    </TimePickerRadix.Root>
+        </TimePickerDropdownStyled>
+      )}
+    </TimePickerStyled>
   );
 }

package/src/hooks/useOnClickOutside.tsx

@@ -0,0 +1,20 @@
+import { useEffect } from "react";
+
+export function useOnClickOutside(ref: any, handler: () => void) {
+  useEffect(() => {
+    const listener = (event: MouseEvent | TouchEvent) => {
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
+      }
+      handler();
+    };
+
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [ref, handler]);
+}

package/src/index.tsx

@@ -20,6 +20,7 @@ export * from './components/TimePicker'
 export * from './components/Alert'
 export * from './components/Switch'
 export * from './components/Step'
+export * from './components/TextareaField'
 
 // Layouts
 export * from './components/Flex'