test

grubersjoe · Nov 4, 2024 · 25d6de0 · 25d6de0
1 parent aa00eac
commit 25d6de0
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 43 deletions.
diff --git a/src/components/ActivityCalendar.tsx b/src/components/ActivityCalendar.tsx
@@ -1,11 +1,4 @@
-import {
-  createContext,
-  forwardRef,
-  useEffect,
-  useState,
-  type CSSProperties,
-  type ForwardedRef,
-} from 'react';
+import { forwardRef, useEffect, useState, type CSSProperties, type ForwardedRef } from 'react';
 import { getYear, parseISO } from 'date-fns';
 import { DEFAULT_LABELS, LABEL_MARGIN, NAMESPACE } from '../constants';
 import { useColorScheme } from '../hooks/useColorScheme';
@@ -205,7 +198,7 @@ export const ActivityCalendar = forwardRef<HTMLElement, Props>(
     useLoadingAnimation(colorScale[0] as string, colorScheme);
     const useAnimation = !usePrefersReducedMotion();
 
-    const [activeTooltip, setActiveTooltip] = useState<string | null>(null);
+    // const [activeTooltip, setActiveTooltip] = useState<string | null>(null);
 
     if (loading) {
       activities = generateEmptyData();
@@ -331,7 +324,7 @@ export const ActivityCalendar = forwardRef<HTMLElement, Props>(
             <div
               className={getClassName('legend-colors')}
               style={styles.footer.legend}
-              onMouseLeave={() => setActiveTooltip(null)}
+              // onMouseLeave={() => setActiveTooltip(null)}
             >
               <span style={{ marginRight: '0.4em' }}>{labels.legend.less}</span>
               {range(maxLevel + 1).map(level => (
@@ -422,36 +415,26 @@ export const ActivityCalendar = forwardRef<HTMLElement, Props>(
         className={NAMESPACE}
         style={{ ...styleProp, ...styles.container(fontSize) }}
       >
-        <TooltipContext.Provider value={{ activeTooltip, setActiveTooltip }}>
-          <div className={getClassName('scroll-container')} style={styles.scrollContainer}>
-            <svg
-              width={width}
-              height={height}
-              viewBox={`0 0 ${width} ${height}`}
-              onMouseLeave={() => setActiveTooltip(null)}
-              className={getClassName('calendar')}
-              style={{ ...styles.calendar, marginLeft: weekdayLabelOffset }}
-            >
-              {!loading && renderWeekdayLabels()}
-              {!loading && renderMonthLabels()}
-              {renderCalendar()}
-            </svg>
-          </div>
-          {renderFooter()}
-        </TooltipContext.Provider>
+        <div className={getClassName('scroll-container')} style={styles.scrollContainer}>
+          <svg
+            width={width}
+            height={height}
+            viewBox={`0 0 ${width} ${height}`}
+            // onMouseLeave={() => setActiveTooltip(null)}
+            className={getClassName('calendar')}
+            style={{ ...styles.calendar, marginLeft: weekdayLabelOffset }}
+          >
+            {!loading && renderWeekdayLabels()}
+            {!loading && renderMonthLabels()}
+            {renderCalendar()}
+          </svg>
+        </div>
+        {renderFooter()}
       </article>
     );
   },
 );
 
-export const TooltipContext = createContext<{
-  activeTooltip: string | null;
-  setActiveTooltip: (id: string | null) => void;
-}>({
-  activeTooltip: null,
-  setActiveTooltip: () => undefined,
-});
-
 ActivityCalendar.displayName = 'ActivityCalendar';
 
 export const Skeleton = (props: Omit<Props, 'data'>) => <ActivityCalendar data={[]} {...props} />;
diff --git a/src/components/Block.tsx b/src/components/Block.tsx
@@ -1,11 +1,10 @@
-import { useContext, type SVGProps } from 'react';
+import { type SVGProps } from 'react';
 import type { Placement } from '@floating-ui/react-dom';
 import { createPortal } from 'react-dom';
 import { useFloating } from '../hooks/useFloating';
 import { getClassName } from '../lib/calendar';
 import { styles } from '../styles';
 import type { ColorScheme, SVGRectEventHandler } from '../types';
-import { TooltipContext } from './ActivityCalendar';
 
 interface Props extends SVGProps<SVGRectElement> {
   id: string;
@@ -18,13 +17,12 @@ interface Props extends SVGProps<SVGRectElement> {
   };
 }
 
-export function Block({ id, colorScheme, fontSize, eventHandlers, tooltip, ...props }: Props) {
+export function Block({ colorScheme, fontSize, eventHandlers, tooltip, ...props }: Props) {
   const floating = useFloating(tooltip?.placement);
-  const { activeTooltip, setActiveTooltip } = useContext(TooltipContext);
 
-  if (floating.open && id !== activeTooltip) {
-    floating.setOpen(false);
-  }
+  // if (floating.open && id !== activeTooltip) {
+  //   floating.setOpen(false);
+  // }
 
   return (
     <>
@@ -35,9 +33,13 @@ export function Block({ id, colorScheme, fontSize, eventHandlers, tooltip, ...pr
           ref: floating.refs.setReference,
           onMouseEnter: event => {
             eventHandlers?.onMouseEnter?.(event);
-            setActiveTooltip(id);
+            // setActiveTooltip(id);
             floating.setOpen(true);
           },
+          onMouseLeave: event => {
+            eventHandlers?.onMouseLeave?.(event);
+            floating.setOpen(false);
+          },
         })}
       />
       {tooltip &&