fix hover styles SH-204

statshouse-ui/src/components/SelectMertic/SelectMetricRow.tsx

@@ -1,57 +1,53 @@
-import React, { memo, useCallback } from 'react';
+import React, { memo } from 'react';
 import { SelectOptionProps, SelectRowEqual, SelectRowProps } from '../UI/Select';
 import { Tooltip } from '../UI';
 import { toggleMetricsFavorite, useFavoriteStore } from 'store2/favoriteStore';
 import cn from 'classnames';
 import { ReactComponent as SVGStar } from 'bootstrap-icons/icons/star.svg';
 import { ReactComponent as SVGStarFill } from 'bootstrap-icons/icons/star-fill.svg';
-import css from '../UI/style.module.css';
+import css from './style.module.css';
 
-export const SelectMetricRow = memo(function _SelectMetricRow<T extends SelectOptionProps>({
+export const SelectMetricRow = memo(function SelectMetricRow<T extends SelectOptionProps>({
   index,
   data: { rows, cursor, onChecked, onHover },
   style,
 }: SelectRowProps<T>) {
-  const metricsFavorite = useFavoriteStore((s) => s.metricsFavorite);
-  const hover = useCallback(
-    (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
-      if (index !== cursor) {
-        onHover(index);
-        event.stopPropagation();
-      }
-    },
-    [cursor, index, onHover]
-  );
-  const click = useCallback(
-    (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
-      onChecked(index, undefined, true, false);
-      event.stopPropagation();
-    },
-    [index, onChecked]
-  );
+  const row = rows[index];
+  const isFavorite = useFavoriteStore((s) => s.metricsFavorite[row?.value]);
+  const isCursor = cursor === index;
 
-  const toggleFavorite = useCallback(
-    (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
-      toggleMetricsFavorite(rows[index]?.value);
+  const handleHover = (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
+    if (!isCursor) {
+      onHover(index);
       event.stopPropagation();
-      event.preventDefault();
-    },
-    [index, rows]
-  );
+    }
+  };
+
+  const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    onChecked(index, undefined, true, false);
+    event.stopPropagation();
+  };
+
+  const handleToggleFavorite = (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
+    toggleMetricsFavorite(row?.value);
+    event.stopPropagation();
+    event.preventDefault();
+  };
+
   return (
     <div
       style={style}
-      className={cn(css.selectItem, cursor === index && css.selectCursor, rows[index]?.checked && css.selectChecked)}
-      onClick={click}
-      onMouseOver={hover}
+      className={cn(css.selectItem, isCursor && css.selectCursor, row?.checked && css.selectChecked)}
+      onClick={handleClick}
+      onMouseOver={handleHover}
     >
       <div className="d-flex flex-row">
-        <Tooltip className="flex-grow-1 text-truncate" title={rows[index]?.value ?? `row ${index}`}>
-          {rows[index]?.value ?? `row ${index}`}
+        <Tooltip className="flex-grow-1 text-truncate me-2" title={row?.value ?? `row ${index}`}>
+          {row?.value ?? `row ${index}`}
         </Tooltip>
-        <Tooltip className="me-2" title={metricsFavorite[rows[index]?.value] ? 'remove favorite' : 'add favorite'}>
-          <span className="text-primary" onClick={toggleFavorite}>
-            {metricsFavorite[rows[index]?.value] ? <SVGStarFill /> : <SVGStar />}
+        <Tooltip className="me-2" title={isFavorite ? 'remove favorite' : 'add favorite'}>
+          <span className="text-primary" onClick={handleToggleFavorite}>
+            {isFavorite ? <SVGStarFill /> : <SVGStar className={css.hoverVisible} />}
           </span>
         </Tooltip>
       </div>

statshouse-ui/src/components/SelectMertic/style.module.css

@@ -0,0 +1,33 @@
+.selectItem {
+  height: var(--selectItemHeight);
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 4px 8px;
+  box-sizing: border-box;
+}
+
+.selectChecked {
+  background-color: var(--selectItemChecked);
+}
+
+/*.selectItem:hover,*/
+.selectCursor {
+  background-color: var(--selectItemCursor);
+}
+
+/*.selectChecked:hover,*/
+.selectCursor.selectChecked {
+  background-color: var(--selectItemCursorChecked);
+}
+/** Select component end */
+
+.hoverVisible {
+  visibility: hidden;
+}
+
+.selectItem:hover .hoverVisible,
+.selectCursor:hover .hoverVisible {
+  visibility: visible;
+}

statshouse-ui/src/components/UI/style.module.css

@@ -169,9 +169,6 @@
   padding: 4px 8px;
   box-sizing: border-box;
 }
-.selectDisabled {
-  background-color: var(--selectItemDisabled);
-}
 
 .selectChecked {
   background-color: var(--selectItemChecked);