fix(Chips): add threshold to scroll position detection

This commit is contained in:
Tim 2024-03-15 19:43:49 +01:00
parent 1cf2339a35
commit 17997a8a5e

View file

@ -16,6 +16,8 @@ type Props = {
onSelect: (value: string) => {},
};
const SCROLL_THRESHOLD = 1;
const Chips = memo(({ options, selected, onSelect }: Props) => {
const ref = useRef<HTMLDivElement>(null);
const [scrollPosition, setScrollPosition] = useState('left');
@ -23,7 +25,10 @@ const Chips = memo(({ options, selected, onSelect }: Props) => {
useEffect(() => {
const onScroll = ({ target }: Event) => {
const { scrollLeft, scrollWidth, offsetWidth} = target as HTMLDivElement;
const position = scrollLeft === 0 ? 'left' : scrollLeft + offsetWidth >= scrollWidth ? 'right' : 'center';
const position =
(scrollLeft - SCROLL_THRESHOLD) <= 0 ? 'left' :
(scrollLeft + offsetWidth + SCROLL_THRESHOLD) >= scrollWidth ? 'right' :
'center';
setScrollPosition(position);
};