@lets-events/react 7.0.1 → 7.1.0

package/src/components/Calendar/index.tsx

@@ -1,7 +1,7 @@
-import React, { ComponentProps, useEffect, useState } from "react";
+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 { Dialog as Calendaradix } from "@radix-ui/themes";
 import { parse, isValid, format, addYears } from "date-fns";
 import { Button } from "../Button";
 import { Box } from "../Box";
@@ -12,16 +12,16 @@ import {
   CalendarFooterStyled,
   CalendarStyled,
   DayPickerWrapperStyled,
-  CalendarTitleStyled,
+  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;
-  onAction?: () => void;
 };
 
 function formatToDateMask(value: string): string {
@@ -38,16 +38,22 @@ export function Calendar({
   calendarLayout,
   selected,
   setSelected,
-  onAction,
+  position = "bottom",
   ...props
 }: CalendarProps) {
   const [inputValue, setInputValue] = useState("");
+  const [showContainer, setShowCalendar] = useState(false);
 
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useOnClickOutside(dropdownRef, () => {
+    console.warn("Clicked outside");
+    setShowCalendar(false);
+  });
   const today = new Date();
   const maxDate = addYears(today, 20);
 
   useEffect(() => {
-    console.log("selected", selected);
     if (selected) {
       setInputValue(format(selected, "dd/MM/yyyy"));
     } else {
@@ -68,57 +74,60 @@ export function Calendar({
   };
 
   return (
-    <Calendaradix.Root>
-      <CalendarStyled {...props}>
-        <Calendaradix.Trigger>
+    <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>
-        </Calendaradix.Trigger>
-
-        <CalendarContentStyled>
-          <CalendarTitleStyled>Calendário</CalendarTitleStyled>
-          <Box>
-            <DayPickerWrapperStyled>
-              <DayPicker
-                mode="single"
-                captionLayout={calendarLayout}
-                selected={selected}
-                onSelect={setSelected}
-                required
-                locale={ptBR}
-                disabled={{ before: today }}
-                startMonth={today}
-                endMonth={maxDate}
-              />
-            </DayPickerWrapperStyled>
-          </Box>
+        </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 && onAction && (
-            <CalendarFooterStyled>
-              <Calendaradix.Close>
+            {action && (
+              <CalendarFooterStyled>
                 <Button
                   variant="text"
                   color="brand"
-                  onClick={onAction}
+                  onClick={() => {
+                    setShowCalendar(false);
+                  }}
                   typography="buttonMedium"
                   fontWeight="medium"
                 >
                   {actionText ?? "Aplicar"}
                 </Button>
-              </Calendaradix.Close>
-            </CalendarFooterStyled>
-          )}
-        </CalendarContentStyled>
+              </CalendarFooterStyled>
+            )}
+          </CalendarContentStyled>
+        )}
       </CalendarStyled>
-    </Calendaradix.Root>
+    </div>
   );
 }

package/src/components/Calendar/styledComponents.ts

@@ -1,18 +1,25 @@
-import { Dialog as Calendaradix } from "@radix-ui/themes";
-
 import { styled } from "../../styles"
 
 export const CalendarStyled = styled('div', {
     fontFamily: '$default',
     lineHeight: '$base',
     fontSize: '$14',
-    maxWidth: '200px',
     borderRadius: '$sm',
+    position: 'relative',
 })
-export const CalendarTitleStyled = styled(Calendaradix.Title, {
-    display: 'none',
+export const CalendarButtonStyled = styled('button', {
+    backgroundColor: 'transparent',
+    border: 'none',
+    maxWidth: '200px',
+    padding: '0',
+    '> div > div': {
+        paddingLeft: '1rem',
+        'input': {
+            textAlign: 'right',
+        } 
+    },
 })
-export const CalendarContentStyled = styled(Calendaradix.Content, {
+export const CalendarContentStyled = styled('div', {
     fontFamily: '$default',
     lineHeight: '$base',
     fontSize: '$14',
@@ -21,6 +28,10 @@ export const CalendarContentStyled = styled(Calendaradix.Content, {
     border: '1px solid $neutral300',
     borderRadius: '$sm',
     boxShadow: '0px 2px 8px 0px $shadow50',
+    position: 'absolute',
+    left: '0',
+    backgroundColor: '$neutral50',
+    zIndex: '999999',
 })
 
 export const CalendarFooterStyled = styled('div', {

package/src/components/TextField.tsx

@@ -157,7 +157,7 @@ export const TextFieldSlotStyled = styled(TextFieldRadix.Slot, {
 })
 
 export type TextFieldProps = ComponentProps<typeof TextFieldStyled> & {
-  addon?:string
+  addon?: string
   placeholder?: string
   children?: React.ReactNode
   isValid?: boolean
@@ -182,14 +182,17 @@ export type TextFieldSlotProps = Omit<ComponentProps<typeof TextFieldStyled>, 'c
 const InputAddon = styled(TextStyle, {
   boxSizing: 'border-box',
   border: '1px solid $dark300',
-  height: '$40', 
-  padding: '0',
+  height: '$40',
+  padding: '0 $12',
   color: '$dark600',
   borderRadius: '$sm 0px 0px $sm',
   borderRightWidth: '0px',
   margin: 'auto 0',
   display: 'flex',
-  alignItems: 'center'
+  flexWrap: 'nowrap',
+  alignItems: 'center',
+  whiteSpace: 'nowrap',
+  lineHeight: 1,
 })
 
 export function TextField({
@@ -204,7 +207,7 @@ export function TextField({
   ...props
 }: TextFieldProps) {
   return (
-    <Flex gap={'0'} css={{width: '100%'}}>
+    <Flex gap={'0'} css={{ width: '100%' }}>
       {!!addon && (
         <InputAddon typography="labelSmall">{addon}</InputAddon>
       )}
@@ -215,18 +218,18 @@ export function TextField({
         typography={typography}
         fontWeight={fontWeight}
         textAlign={textAlign}
-        style={!!addon ? {borderTopLeftRadius:'0px', borderBottomLeftRadius: '0px'}: undefined}
+        style={!!addon ? { borderTopLeftRadius: '0px', borderBottomLeftRadius: '0px' } : undefined}
         {...props}
-        >
+      >
         {children}
         {isValid && (
           <TextFieldSlot
-          position='flex-end'
-          name={name}
-          color={color as TextFieldSlotProps['color']}
-          typography={typography}
-          fontWeight={fontWeight}
-          textAlign={textAlign}
+            position='flex-end'
+            name={name}
+            color={color as TextFieldSlotProps['color']}
+            typography={typography}
+            fontWeight={fontWeight}
+            textAlign={textAlign}
           >
             <Icon name='check' />
           </TextFieldSlot>

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]);
+}