Merge pull request #677 from Stremio/feature-double-click-scroll-top

feature: add onDoubleClick function for scrollTop on NavBarButton
Stremio · Sep 18, 2024 · c956dc4 · c956dc4
2 parents e7dbff4 + 011ecd2
commit c956dc4
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/src/common/Button/Button.js b/src/common/Button/Button.js
@@ -6,7 +6,7 @@ const classnames = require('classnames');
 const styles = require('./styles');
 const { useLongPress } = require('use-long-press');
 
-const Button = React.forwardRef(({ className, href, disabled, children, onLongPress, ...props }, ref) => {
+const Button = React.forwardRef(({ className, href, disabled, children, onLongPress, onDoubleClick, ...props }, ref) => {
     const longPress = useLongPress(onLongPress, { detect: 'pointer' });
     const onKeyDown = React.useCallback((event) => {
         if (typeof props.onKeyDown === 'function') {
@@ -42,6 +42,7 @@ const Button = React.forwardRef(({ className, href, disabled, children, onLongPr
             href,
             onKeyDown,
             onMouseDown,
+            onDoubleClick,
             ...longPress()
         },
         children
@@ -58,6 +59,7 @@ Button.propTypes = {
     onKeyDown: PropTypes.func,
     onMouseDown: PropTypes.func,
     onLongPress: PropTypes.func,
+    onDoubleClick: PropTypes.func
 };
 
 module.exports = Button;
diff --git a/src/common/NavBar/VerticalNavBar/NavTabButton/NavTabButton.js b/src/common/NavBar/VerticalNavBar/NavTabButton/NavTabButton.js
@@ -15,8 +15,17 @@ const NavTabButton = ({ className, logo, icon, label, href, selected, onClick })
             :
             null
     ), [icon]);
+    const onDoubleClick = () => {
+        const scrollableElements = document.querySelectorAll('div');
+
+        scrollableElements.forEach((element) => {
+            if (element.scrollTop > 0) {
+                element.scrollTop = 0;
+            }
+        });
+    };
     return (
-        <Button className={classnames(className, styles['nav-tab-button-container'], { 'selected': selected })} title={label} tabIndex={-1} href={href} onClick={onClick}>
+        <Button className={classnames(className, styles['nav-tab-button-container'], { 'selected': selected })} title={label} tabIndex={-1} href={href} onClick={onClick} onDoubleClick={onDoubleClick}>
             {
                 typeof logo === 'string' && logo.length > 0 ?
                     <Image