Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 11:42:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix(Chips): add threshold to scroll position detection

Browse source
This commit is contained in:
Tim 2024-03-15 19:43:49 +01:00
parent 1cf2339a35
commit 17997a8a5e
1 changed files with 6 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/common/Chips/Chips.tsx
View file

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