diff --git a/src/components/HoverPopup/HoverPopup.tsx b/src/components/HoverPopup/HoverPopup.tsx index 4fc0165c6..f7fb57d7d 100644 --- a/src/components/HoverPopup/HoverPopup.tsx +++ b/src/components/HoverPopup/HoverPopup.tsx @@ -20,6 +20,8 @@ type HoverPopupProps = { anchorRef?: React.RefObject; onShowPopup?: VoidFunction; onHidePopup?: VoidFunction; + delayOpen?: number; + delayClose?: number; } & Pick; export const HoverPopup = ({ @@ -32,6 +34,8 @@ export const HoverPopup = ({ onHidePopup, placement = ['top', 'bottom'], contentClassName, + delayClose = DEBOUNCE_TIMEOUT, + delayOpen = DEBOUNCE_TIMEOUT, }: HoverPopupProps) => { const [isPopupVisible, setIsPopupVisible] = React.useState(false); const anchor = React.useRef(null); @@ -41,8 +45,8 @@ export const HoverPopup = ({ debounce(() => { setIsPopupVisible(true); onShowPopup?.(); - }, DEBOUNCE_TIMEOUT), - [onShowPopup], + }, delayOpen), + [onShowPopup, delayOpen], ); const hidePopup = React.useCallback(() => { @@ -51,8 +55,8 @@ export const HoverPopup = ({ }, [onHidePopup]); const debouncedHandleHidePopup = React.useMemo( - () => debounce(hidePopup, DEBOUNCE_TIMEOUT), - [hidePopup], + () => debounce(hidePopup, delayClose), + [hidePopup, delayClose], ); const onMouseEnter = debouncedHandleShowPopup; diff --git a/src/components/VDisk/VDisk.tsx b/src/components/VDisk/VDisk.tsx index 436cfa9b0..700330ae5 100644 --- a/src/components/VDisk/VDisk.tsx +++ b/src/components/VDisk/VDisk.tsx @@ -19,6 +19,8 @@ export interface VDiskProps { onShowPopup?: VoidFunction; onHidePopup?: VoidFunction; progressBarClassName?: string; + delayOpen?: number; + delayClose?: number; } export const VDisk = ({ @@ -29,6 +31,8 @@ export const VDisk = ({ onShowPopup, onHidePopup, progressBarClassName, + delayClose, + delayOpen, }: VDiskProps) => { const vDiskPath = getVDiskLink(data); @@ -38,6 +42,9 @@ export const VDisk = ({ onShowPopup={onShowPopup} onHidePopup={onHidePopup} popupContent={} + offset={[0, 5]} + delayClose={delayClose} + delayOpen={delayOpen} >
diff --git a/src/containers/Storage/PDisk/PDisk.tsx b/src/containers/Storage/PDisk/PDisk.tsx index b37b5bbf4..2609607ed 100644 --- a/src/containers/Storage/PDisk/PDisk.tsx +++ b/src/containers/Storage/PDisk/PDisk.tsx @@ -59,7 +59,13 @@ export const PDisk = ({ flexGrow: Number(vdisk.AllocatedSize) || 1, }} > - +
))} @@ -77,10 +83,12 @@ export const PDisk = ({ {renderVDisks()} } + delayClose={200} >