fix(cascader): cascader hover state error (#1931)

src/list/inner/CascaderItem.tsx

@@ -1,4 +1,4 @@
-import React, { DOMAttributes, useContext, useEffect, useMemo } from 'react';
+import React, { DOMAttributes, useContext, useEffect, useMemo, useState } from 'react';
 import { isEmpty } from 'lodash';
 import classNames from 'classnames';
 import { RightFilled } from '@gio-design/icons';
@@ -22,6 +22,8 @@ const CascaderItem: React.ForwardRefRenderFunction<
 ) => {
   const prefixCls = usePrefixCls('cascader');
   const popoverClassName = `${prefixCls}--content`;
+  const [hovered,setHovered] = useState(false);
+
   /** context */
   const context = useContext(ListContext);
   const popoverContext = useContext(TriggerContext);
@@ -96,6 +98,7 @@ const CascaderItem: React.ForwardRefRenderFunction<
           <TriggerContext.Provider value={popoverContext}>
             <Popover
                 placement="rightTop"
+                onVisibleChange={(v) => setHovered(v)}
                 overlayClassName={popoverClassName}
                 // document click contains node
                 getContainer={() => document.body}
@@ -123,6 +126,7 @@ const CascaderItem: React.ForwardRefRenderFunction<
       value={value}
       disabled={mergedDisabled}
       suffix={React.isValidElement(children) || !isEmpty(childrens) ? <RightFilled size="14px" /> : undefined}
+      hovered={hovered}
       onClick={
         React.isValidElement(children) || !isEmpty(childrens)
           ? (itemValue, event) => propsOnClick?.(itemValue, event)

src/list/inner/baseItem.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { DOMAttributes, ReactElement, useContext, useMemo } from 'react';
+import React, { DOMAttributes, ReactElement, useContext, useEffect, useMemo, useState } from 'react';
 import { isEmpty, isString } from 'lodash';
 import usePrefixCls from '../../utils/hooks/use-prefix-cls';
 import { PREFIX } from '../constants';
@@ -26,6 +26,9 @@ const InnerBaseItem = WithRef<HTMLLIElement, BaseItemProps & Omit<DOMAttributes<
       onClick,
       contentRender = defaultContentRender,
       wrapper = defaultContentRender,
+      onMouseEnter,
+      onMouseLeave,
+      hovered:propsHovered,
       ...rest
     } = props;
     const prefixCls = `${usePrefixCls(PREFIX)}--item`;
@@ -39,6 +42,7 @@ const InnerBaseItem = WithRef<HTMLLIElement, BaseItemProps & Omit<DOMAttributes<
       selectParent,
     } = useContext(ListContext);
     const mergedDisabled = disabled ?? contextDisabled;
+    const [hovered,setHovered] = useState(false);
     const selected = useMemo(() => {
       if (model === 'cascader') {
         // 最顶级
@@ -53,6 +57,12 @@ const InnerBaseItem = WithRef<HTMLLIElement, BaseItemProps & Omit<DOMAttributes<
       }
       return selectStatus?.(value, contextValue);
     }, [contextValue, model, selectParent, value]);
+
+    useEffect(() => () => {
+        setHovered(false)
+      }, [])
+
+
     /** ============ prefix suffix  ================  */
     const prefix = useMemo(
       () => propPrefix ?? contextPrefix?.({ label, value, disabled, disabledTooltip }),
@@ -102,12 +112,21 @@ const InnerBaseItem = WithRef<HTMLLIElement, BaseItemProps & Omit<DOMAttributes<
         <li
           data-testid="item-base"
           style={style}
+          onMouseEnter={(e) => {
+            setHovered(true);
+            onMouseEnter?.(e);
+          }}
+          onMouseLeave={(e) => {
+            setHovered(false);
+            onMouseLeave?.(e);
+          }}
           className={classNames(
             className,
             prefixCls,
             {
               [`${prefixCls}--disabled`]: mergedDisabled,
               [`${prefixCls}--actived`]: selected,
+              [`${prefixCls}--hovered`]: !mergedDisabled ? (propsHovered || hovered) : false,
             },
             className
           )}
@@ -126,7 +145,7 @@ const InnerBaseItem = WithRef<HTMLLIElement, BaseItemProps & Omit<DOMAttributes<
   }
 );
 const BaseItem: React.ForwardRefExoticComponent<
-  BaseItemProps & Omit<React.RefAttributes<HTMLLIElement>, 'onClick' | 'onChange'>
+  BaseItemProps & Omit<React.RefAttributes<HTMLLIElement>, 'onClick' | 'onChange' | 'onMouseEnter' | 'onMouseLeave'>
 > & {
   isItem?: boolean;
 } = InnerBaseItem;

src/list/interfance.ts

@@ -129,6 +129,8 @@ export interface ItemProps
     | 'selected'
     | 'disabledTooltip'
     | 'wrapper'
+    | 'onMouseLeave'
+    | 'onMouseEnter'
   > {
   selectValue?: string | string[];
   strategy?: 'fixed' | 'absolute';
@@ -142,7 +144,10 @@ export interface BaseItemProps extends Pick<OptionProps, 'value' | 'disabled' |
   children?: React.ReactNode;
   disabledTooltip?: string;
   selected?: boolean;
+  hovered?: boolean;
   onClick?: (value?: string | number, event?: React.MouseEvent<HTMLLIElement | HTMLInputElement>) => void;
+  onMouseEnter?: (event?: React.MouseEvent<HTMLLIElement | HTMLInputElement>) => void;
+  onMouseLeave?: (event?: React.MouseEvent<HTMLLIElement | HTMLInputElement>) => void;
 }
 
 export interface TriggerProps {

src/list/style/index.less

@@ -85,6 +85,9 @@
     &:not(&--disabled):hover {
       background-color: @gray-1;
     }
+    &--hovered:not(&--disabled):not(&--multiple) {
+      background-color: @gray-1;
+    }
     &:not(&--disabled):not(&--drag):active {
       color: @blue-3;
     }