From 89f212482e055d2e71c990f50ad67040dae8bbde Mon Sep 17 00:00:00 2001 From: Hovo Menejyan Date: Wed, 28 Aug 2024 09:10:53 -0700 Subject: [PATCH] Fix for hover factor --- packages/react/select/src/Select.tsx | 32 ++++++++++++++++++++-------- 1 file changed, 23 insertions(+), 9 deletions(-) diff --git a/packages/react/select/src/Select.tsx b/packages/react/select/src/Select.tsx index 53fbd1ff5..a36212abe 100644 --- a/packages/react/select/src/Select.tsx +++ b/packages/react/select/src/Select.tsx @@ -1382,7 +1382,10 @@ SelectItemIndicator.displayName = ITEM_INDICATOR_NAME; const SCROLL_UP_BUTTON_NAME = 'SelectScrollUpButton'; type SelectScrollUpButtonElement = SelectScrollButtonImplElement; -interface SelectScrollUpButtonProps extends Omit {} +interface SelectScrollUpButtonProps extends Omit { + hoverScrollFactor?: number; + touchScrollFactor?: number; +} const SelectScrollUpButton = React.forwardRef< SelectScrollUpButtonElement, @@ -1410,10 +1413,14 @@ const SelectScrollUpButton = React.forwardRef< { + onAutoScroll={(pointerAction?: 'move' | 'down') => { const { viewport, selectedItem } = contentContext; if (viewport && selectedItem) { - viewport.scrollTop = viewport.scrollTop - selectedItem.offsetHeight; + const factor = + pointerAction && + (pointerAction === 'move' ? props.hoverScrollFactor : props.touchScrollFactor); + viewport.scrollTop = + viewport.scrollTop - selectedItem.offsetHeight * Math.abs(factor ?? 1); } }} /> @@ -1429,7 +1436,10 @@ SelectScrollUpButton.displayName = SCROLL_UP_BUTTON_NAME; const SCROLL_DOWN_BUTTON_NAME = 'SelectScrollDownButton'; type SelectScrollDownButtonElement = SelectScrollButtonImplElement; -interface SelectScrollDownButtonProps extends Omit {} +interface SelectScrollDownButtonProps extends Omit { + hoverScrollFactor?: number; + touchScrollFactor?: number; +} const SelectScrollDownButton = React.forwardRef< SelectScrollDownButtonElement, @@ -1460,10 +1470,14 @@ const SelectScrollDownButton = React.forwardRef< { + onAutoScroll={(pointerAction?: 'move' | 'down') => { const { viewport, selectedItem } = contentContext; if (viewport && selectedItem) { - viewport.scrollTop = viewport.scrollTop + selectedItem.offsetHeight; + const factor = + pointerAction && + (pointerAction === 'move' ? props.hoverScrollFactor : props.touchScrollFactor); + viewport.scrollTop = + viewport.scrollTop + selectedItem.offsetHeight * Math.abs(factor ?? 1); } }} /> @@ -1474,7 +1488,7 @@ SelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME; type SelectScrollButtonImplElement = React.ElementRef; interface SelectScrollButtonImplProps extends PrimitiveDivProps { - onAutoScroll(): void; + onAutoScroll(pointerAction?: 'move' | 'down'): void; } const SelectScrollButtonImpl = React.forwardRef< @@ -1514,13 +1528,13 @@ const SelectScrollButtonImpl = React.forwardRef< style={{ flexShrink: 0, ...scrollIndicatorProps.style }} onPointerDown={composeEventHandlers(scrollIndicatorProps.onPointerDown, () => { if (autoScrollTimerRef.current === null) { - autoScrollTimerRef.current = window.setInterval(onAutoScroll, 50); + autoScrollTimerRef.current = window.setInterval(onAutoScroll, 50, 'down'); } })} onPointerMove={composeEventHandlers(scrollIndicatorProps.onPointerMove, () => { contentContext.onItemLeave?.(); if (autoScrollTimerRef.current === null) { - autoScrollTimerRef.current = window.setInterval(onAutoScroll, 50); + autoScrollTimerRef.current = window.setInterval(onAutoScroll, 50, 'move'); } })} onPointerLeave={composeEventHandlers(scrollIndicatorProps.onPointerLeave, () => {