@24i/bigscreen-sdk 1.0.3-alpha.2087 → 1.0.3-alpha.2091

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@24i/bigscreen-sdk",
-    "version": "1.0.3-alpha.2087",
+    "version": "1.0.3-alpha.2091",
     "description": "SmartApps BIGscreen SDK monorepo",
     "main": "index.js",
     "scripts": {

package/packages/grid/src/UnifiedGridController/UnifiedGridController.ts

@@ -524,6 +524,7 @@ export class UnifiedGridController<T> implements IUnifiedGridController<T> {
         forEach(this.groups, (group, index) => {
             this.updateItemsInGroup(group, index * itemsInGroup);
         });
+        base.mrcuRef.current?.handleArrowState();
     }
 
     prependData(data: T[]) {
@@ -549,5 +550,6 @@ export class UnifiedGridController<T> implements IUnifiedGridController<T> {
             this.scrollIndexToPixels(this.scrollIndex),
         );
         this.focusCurrentItem();
+        base.mrcuRef.current?.handleArrowState();
     }
 }

package/packages/list/src/Base/Base.tsx

@@ -344,7 +344,7 @@ export class ListBase<T extends Item<U>, U>
     }
 
     render() {
-        const { horizontal, className } = this.props;
+        const { horizontal, className, mrcuMountingPoint } = this.props;
         return (
             <Scroller
                 className={className}
@@ -357,7 +357,7 @@ export class ListBase<T extends Item<U>, U>
                 <MouseNavigation
                     // @ts-ignore - needed to convert fallback (false) to interface
                     ref={this.mrcuRef}
-                    getMountingPoint={() => this.scroller.current!.wrapRef}
+                    getMountingPoint={() => mrcuMountingPoint || this.scroller.current!.wrapRef}
                     {...this.props}
                 />
             </Scroller>

package/packages/list/src/types.ts

@@ -66,6 +66,11 @@ export type BasicProps<T extends Item<U>, U> = {
      */
     fastFocusingOptimization?: boolean,
 
+    /**
+     * Returns a reference to the custom HTML element for the MRCU arrows.
+     */
+    mrcuMountingPoint?: Reference<HTMLDivElement>,
+
     /**
      * Function called every time before list performs one full scroll.
      * @param item Reference to item on current scroll

package/packages/mouse-navigation/src/MouseNavigation.tsx

@@ -94,6 +94,22 @@ export class MouseNavigation extends Component<Props> {
         }
     };
 
+    onWheel = (event: WheelEvent) => {
+        const { forward, backward, direction } = this.props;
+        const { horizontal } = this.mapDirectionToProps(direction);
+        if (horizontal) return;
+        if (event.deltaY > 0) forward();
+        else if (event.deltaY < 0) backward();
+    };
+
+    addWheelListner() {
+        this.arrows.current?.domRef.current?.addEventListener('wheel', this.onWheel);
+    }
+
+    removeWheelListner() {
+        this.arrows.current?.domRef.current?.removeEventListener('wheel', this.onWheel);
+    }
+
     isActive() {
         return this.navigationState === 'active';
     }
@@ -112,6 +128,7 @@ export class MouseNavigation extends Component<Props> {
             getMountingPoint(),
         );
         this.handleArrowState();
+        this.addWheelListner();
         this.navigationState = 'active';
     };
 
@@ -129,6 +146,7 @@ export class MouseNavigation extends Component<Props> {
     destroyArrows() {
         if (this.navigationState === 'inactive') return;
         this.navigationState = 'inactive';
+        this.removeWheelListner();
         removeNode(this.arrows.current!.domRef);
     }