Merge branch 'development' into feature/multi-select

atelier-saulx · Nov 12, 2024 · eea08ca · eea08ca
2 parents fb13e2c + 587beb8
commit eea08ca
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 11 deletions.
diff --git a/src/components/Calendar/CalendarItem.tsx b/src/components/Calendar/CalendarItem.tsx
@@ -12,6 +12,8 @@ type CalendarItemProps = {
   position?: 'start' | 'middle' | 'end'
   repeating?: boolean
   onClick?: () => void
+  forceHover?: boolean
+  onHoverChange?: (hover: boolean) => void
 }
 
 function CalendarItem({
@@ -21,9 +23,12 @@ function CalendarItem({
   position,
   repeating,
   onClick,
+  forceHover,
+  onHoverChange,
 }: CalendarItemProps) {
   return (
     <styled.div
+      data-forcehover={forceHover ? forceHover : undefined}
       style={{
         flexShrink: 0,
         display: 'flex',
@@ -83,8 +88,31 @@ function CalendarItem({
             }),
           },
         }),
+        '&[data-forcehover]': {
+          ...(color === 'neutral' && {
+            background: colors.neutral10,
+          }),
+          ...(color === 'red' && {
+            background: colors.red20,
+          }),
+          ...(color === 'green' && {
+            background: colors.green20,
+          }),
+          ...(color === 'blue' && {
+            background: colors.blue20,
+          }),
+          ...(color === 'orange' && {
+            background: colors.orange20,
+          }),
+        },
       }}
       onClick={onClick}
+      onPointerEnter={() => {
+        onHoverChange?.(true)
+      }}
+      onPointerLeave={() => {
+        onHoverChange?.(false)
+      }}
     >
       {(!position || position === 'start') && repeating && (
         <Icon variant="repeat" size="small" />

diff --git a/src/components/Calendar/index.tsx b/src/components/Calendar/index.tsx
@@ -51,6 +51,7 @@ function Calendar({
   const maxItemsPerCell = Math.floor(
     (cellHeight + 4) / ((variant === 'monthly' ? 24 : 40) + 4),
   )
+  const [forceHover, setForceHover] = useState<string>()
 
   const days = useMemo(() => {
     const count =
@@ -61,7 +62,6 @@ function Calendar({
     for (let i = 0; i < count; i++) {
       const day = addDays(new Date(visiblePeriodStart), i)
 
-      // TODO is structClone needed? it was a fix for the __hidden attribute sticking around but now it might not be necessary
       const dayItems = structuredClone(data).filter((e) =>
         endField
           ? isSameDay(day, new Date(e[startField])) ||
@@ -416,6 +416,10 @@ function Calendar({
                                 onClick={() => {
                                   onItemClick?.(e)
                                 }}
+                                forceHover={forceHover === e.id}
+                                onHoverChange={(hover) => {
+                                  setForceHover(hover ? e.id : undefined)
+                                }}
                               />
                             </div>
                           ),

diff --git a/src/components/DateInput/Calendar.tsx b/src/components/DateInput/Calendar.tsx
@@ -7,19 +7,12 @@ import {
   useClick,
   useDismiss,
   useFloating,
-  useHover,
   useInteractions,
-  useTransitionStyles,
 } from '@floating-ui/react'
 import {
   cloneElement,
-  createContext,
-  Dispatch,
   ReactElement,
-  ReactNode,
-  SetStateAction,
   useCallback,
-  useContext,
   useEffect,
   useMemo,
   useRef,
@@ -36,15 +29,12 @@ import {
   addYears,
   compareAsc,
   endOfMonth,
-  endOfWeek,
   format,
   getHours,
   getMinutes,
   getMonth,
   getYear,
   isSameDay,
-  isSameHour,
-  isSameMinute,
   isSameMonth,
   isSameYear,
   isToday,