remove ref for tooltip of history and add fixed value for width

scality · May 23, 2024 · 6c6dfad · 6c6dfad
1 parent 38c55c0
commit 6c6dfad
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 36 deletions.
diff --git a/src/lib/components/globalhealthbar/GlobalHealthBarRecharts.component.tsx b/src/lib/components/globalhealthbar/GlobalHealthBarRecharts.component.tsx
@@ -81,7 +81,7 @@ export function GlobalHealthBar({ id, alerts, start, end }: GlobalHealthProps) {
       style={{
         padding: 60,
         position: 'relative',
-        width: barWidth,
+        width: '100%',
       }}
     >
       <HistoryAlertSlider

diff --git a/src/lib/components/globalhealthbar/HistoryProvider.tsx b/src/lib/components/globalhealthbar/HistoryProvider.tsx
@@ -9,7 +9,7 @@ export const HistoryAlertContext = createContext<
 >(undefined);
 
 export const HistoryAlertProvider = ({ children }) => {
-  const [selectedDate, setSelectedDate] = useState<number>(0);
+  const [selectedDate, setSelectedDate] = useState<number>(Date.now());
   return (
     <HistoryAlertContext.Provider value={{ selectedDate, setSelectedDate }}>
       {children}

diff --git a/src/lib/components/globalhealthbar/HistorySlider.tsx b/src/lib/components/globalhealthbar/HistorySlider.tsx
@@ -1,4 +1,3 @@
-import { useEffect, useRef, useState } from 'react';
 import styled, { css, useTheme } from 'styled-components';
 import { FormattedDateTime, Icon, spacing } from '../../index';
 import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
@@ -23,9 +22,7 @@ const StyledRange = styled.input`
   position: absolute;
   z-index: 10;
   height: 16px;
-  :focus-visible::-webkit-slider-thumb {
-    ${FocusVisibleStyle}
-  }
+
   /*==============================*/
   /* cursor                       */
   /*==============================*/
@@ -45,16 +42,22 @@ const StyledRange = styled.input`
     background-color: ${(props) => props.theme.selectedActive};
     border: none;
   }
+  :focus-visible::-webkit-slider-thumb {
+    ${FocusVisibleStyle}
+  }
+  :focus-visible::-moz-range-thumb {
+    ${FocusVisibleStyle}
+  }
 `;
 
 const HistoryContainer = styled.div`
   width: 100%;
   position: relative;
 `;
 
-const HistoryTooltipContainer = styled.div<{ inset: string }>`
+const HistoryTooltipContainer = styled.div<{ inset }>`
   position: absolute;
-  display: flex;
+  display: ${(props) => (props.inset ? 'flex' : 'none')};
   inset: ${(props) => props.inset};
   align-items: center;
   flex-direction: column;
@@ -68,38 +71,47 @@ const HistoryTooltip = styled.div`
       padding: ${spacing.r4} ${spacing.r8};
       white-space: 'nowrap';
       border: 1px solid ${theme.border};
-      border-radius: '4px';
+      border-radius: 4px;
+      width: 116px;
       color: ${theme.textSecondary};
     `;
   }}
 `;
+type HistorySliderProps = {
+  start: string;
+  end: string;
+  startDate: number;
+  endDate: number;
+};
 
-export const HistoryAlertSlider = ({ start, end, startDate, endDate }) => {
+export const HistoryAlertSlider = ({
+  start,
+  end,
+  startDate,
+  endDate,
+}: HistorySliderProps) => {
   const history = useHistoryAlert();
-  const popoverRef = useRef<HTMLDivElement>(null);
-  const [tooltipPosition, setTooltipPosition] = useState('auto');
-  useEffect(() => {
-    if (popoverRef.current) {
-      setTooltipPosition(
-        setHistoryTooltipPosition(
-          startDate,
-          endDate,
-          popoverRef.current,
-          history.selectedDate,
-        ),
-      );
-    }
-  }, [history.selectedDate, startDate, endDate, popoverRef.current]);
 
-  if (!history.selectedDate) {
+  if (history.selectedDate === null) {
     return null;
   }
+  // check in 1hour range : bug with input date going from 1:00 to 0:00
+  if (history.selectedDate > endDate) {
+    history.setSelectedDate(endDate);
+  }
+  if (history.selectedDate < startDate) {
+    history.setSelectedDate(startDate);
+  }
+
   return (
     <HistoryContainer id="history-slider">
       <HistoryTooltipContainer
         id="history-tooltip"
-        ref={popoverRef}
-        inset={tooltipPosition}
+        inset={setHistoryTooltipPosition(
+          startDate,
+          endDate,
+          history.selectedDate,
+        )}
       >
         <HistoryTooltip>
           <FormattedDateTime
@@ -119,10 +131,6 @@ export const HistoryAlertSlider = ({ start, end, startDate, endDate }) => {
         step={getStep(startDate, endDate)}
         value={history.selectedDate}
         onChange={(e) => {
-          if (e.target.valueAsNumber > endDate)
-            history.setSelectedDate(endDate);
-          if (e.target.valueAsNumber < startDate)
-            history.setSelectedDate(startDate);
           history.setSelectedDate(+e.target.value);
         }}
       />

diff --git a/src/lib/components/globalhealthbar/utils.tsx b/src/lib/components/globalhealthbar/utils.tsx
@@ -12,12 +12,11 @@ const oneDay = 24 * oneHour;
 export const setHistoryTooltipPosition = (
   startDate: number,
   endDate: number,
-  popover: HTMLDivElement,
-  selectedDate: number | null,
-): string => {
-  if (selectedDate && popover) {
+  selectedDate: number | undefined,
+): string | null => {
+  if (selectedDate) {
     const width = ((selectedDate - startDate) / (endDate - startDate)) * 600;
-    const leftPosition = width - popover.offsetWidth / 2;
+    const leftPosition = width - 132 / 2;
     return `auto auto -4px ${leftPosition}px`;
   }
   return 'auto';