@24i/bigscreen-sdk 1.0.2-alpha.2071 → 1.0.2-alpha.2074

package/package.json

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

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

@@ -1,5 +1,4 @@
 import { createRef, Component, Reference, DeclareProps } from '@24i/bigscreen-sdk/jsx';
-import { MouseNavigation } from '@24i/bigscreen-sdk/mouse-navigation';
 import { device } from '@24i/bigscreen-sdk/device';
 import { Scroller } from '@24i/bigscreen-sdk/scroller';
 import { forEach } from '@24i/bigscreen-sdk/perf-utils/array';
@@ -10,8 +9,12 @@ import {
     ICounter,
     createTimeout,
 } from '@24i/bigscreen-sdk/utils';
+import { MouseNavigation } from './MouseNavigation';
 import { FastFocusingOptimizer } from '../FastFocusingOptimizer/FastFocusingOptimizer';
 import { BasicProps, Item } from '../types';
+import {
+    MouseNavigation as IMouseNavigation,
+} from './interface';
 
 export type Props<T extends Item<U>, U> = BasicProps<T, U> & {
     forward: () => boolean,
@@ -21,7 +24,6 @@ export type Props<T extends Item<U>, U> = BasicProps<T, U> & {
     shouldShowMrcuForward?: () => boolean,
     shouldShowMrcuBackward?: () => boolean,
     adjustFocusFromTarget?: (itemRefIndex: number) => void,
-    mrcuRef?: Reference<MouseNavigation>;
     limit?: number,
     shouldApplySlowdown?: () => boolean,
 };
@@ -45,6 +47,8 @@ export class ListBase<T extends Item<U>, U>
 
     scrollerDom = createRef<HTMLDivElement>();
 
+    mrcuRef = createRef<IMouseNavigation>();
+
     itemRefs: Reference<T>[] = [];
 
     index = 0;
@@ -123,15 +127,16 @@ export class ListBase<T extends Item<U>, U>
 
     onWheel = (event: WheelEvent) => {
         const {
-            forward, backward, mrcuRef, shouldApplySlowdown,
+            horizontal, forward, backward, shouldApplySlowdown,
         } = this.props;
         let processed;
+        if (horizontal) return;
         if (event.deltaY > 0) processed = shouldApplySlowdown() || forward();
         else if (event.deltaY < 0) processed = shouldApplySlowdown() || backward();
         if (processed) {
             stopEvent(event);
             this.fastScrollingCounter?.add();
-            mrcuRef?.current?.handleArrowState();
+            this.mrcuRef?.current?.handleArrowState();
             this.fakeWheelStop();
         } else if (processed === false) {
             this.fastFocusingOptimizer.stop();
@@ -348,7 +353,13 @@ export class ListBase<T extends Item<U>, U>
                 onKeyDown={this.onKeyDown}
                 horizontal={horizontal}
             >
-                {this.renderData()}
+                <>{this.renderData()}</>
+                <MouseNavigation
+                    // @ts-ignore - needed to convert fallback (false) to interface
+                    ref={this.mrcuRef}
+                    getMountingPoint={() => this.scroller.current!.wrapRef}
+                    {...this.props}
+                />
             </Scroller>
         );
     }

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

@@ -0,0 +1,58 @@
+import { Component, createRef } from '@24i/bigscreen-sdk/jsx';
+import { MouseNavigation as MouseNavigationBase } from '@24i/bigscreen-sdk/mouse-navigation';
+import { device } from '@24i/bigscreen-sdk/device';
+import {
+    MouseNavigationProps as Props,
+    MouseNavigation as IMouseNavigation,
+} from '../interface';
+
+export class MouseNavigation extends Component<Props> implements IMouseNavigation {
+    private readonly div = createRef<HTMLDivElement>();
+
+    private readonly base = createRef<MouseNavigationBase>();
+
+    componentDidMount() {
+        if (device.isMouseUsed()) {
+            this.renderArrows();
+        }
+    }
+
+    handleArrowState() {
+        this.base?.current?.handleArrowState();
+    }
+
+    renderArrows() {
+        const {
+            horizontal,
+            forward,
+            backward,
+            shouldShowMrcuForward,
+            shouldShowMrcuBackward,
+            getMountingPoint,
+        } = this.props;
+
+        const direction = horizontal ? 'horizontal' : 'vertical';
+
+        this.appendMount(
+            <div ref={this.div} className="mouse-navigation">
+                <MouseNavigationBase
+                    // @ts-ignore - needed to convert fallback (false) to interface
+                    ref={this.base}
+                    getMountingPoint={() => this.div}
+                    direction={direction}
+                    forward={forward}
+                    backward={backward}
+                    shouldShowMrcuForward={shouldShowMrcuForward}
+                    shouldShowMrcuBackward={shouldShowMrcuBackward}
+                >
+                    {null as unknown as JSX.Element}
+                </MouseNavigationBase>
+            </div>,
+            getMountingPoint(),
+        );
+    }
+
+    render() {
+        return null;
+    }
+}

package/packages/list/src/Base/MouseNavigation/MouseNavigationFallback.ts

@@ -0,0 +1,4 @@
+import { MouseNavigationProps as Props } from '../interface';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const MouseNavigation = (props: Props) => false as unknown as JSX.Element;

package/packages/list/src/Base/MouseNavigation/index.tizen.tv.ts

@@ -0,0 +1 @@
+export { MouseNavigation } from './MouseNavigation';

package/packages/list/src/Base/MouseNavigation/index.ts

@@ -0,0 +1 @@
+export { MouseNavigation } from './MouseNavigationFallback';

package/packages/list/src/Base/MouseNavigation/index.webos.tv.ts

@@ -0,0 +1 @@
+export { MouseNavigation } from './MouseNavigation';

package/packages/list/src/Base/MouseNavigation/index.webtv.ts

@@ -0,0 +1 @@
+export { MouseNavigation } from './MouseNavigation';

package/packages/list/src/Base/interface.ts

@@ -0,0 +1,39 @@
+import { Reference, Component } from '@24i/bigscreen-sdk/jsx';
+
+export type MouseNavigationProps = {
+    /**
+      * Function to call on the press of the right arrow.
+      */
+    forward(): boolean,
+    /**
+      * Function to call on the press of the left arrow.
+      */
+    backward(): boolean,
+    /**
+      * Function which determines whether to show the forward arrow.
+      */
+    shouldShowMrcuForward?(): boolean,
+    /**
+      * Function which determines whether to show the backward arrow.
+      */
+    shouldShowMrcuBackward?(): boolean,
+    /**
+     * Returns a reference to the element where your `children` should be rendered.
+     */
+    getMountingPoint(): Reference<HTMLElement>;
+    /**
+     * Property determines whether navigation is horizontal.
+     */
+    horizontal?: boolean,
+};
+
+export interface MouseNavigation extends Component<MouseNavigationProps> {
+    /**
+      * Function to disable showing an arrow in the given direction.
+      */
+    handleArrowState(): void,
+}
+
+export interface MouseNavigationComponent {
+    new (props: MouseNavigationProps): MouseNavigation,
+}

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

@@ -8,8 +8,8 @@ type Props = {
     children: JSX.Element;
     getMountingPoint: () => Reference<HTMLElement>;
     direction: Direction;
-    forward: () => void;
-    backward: () => void;
+    forward: () => any;
+    backward: () => any;
     shouldShowMrcuForward?: () => boolean;
     shouldShowMrcuBackward?: () => boolean;
 };

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

@@ -1,28 +0,0 @@
-import { createRef, forwardRef, Reference } from '@24i/bigscreen-sdk/jsx';
-import { MouseNavigation } from '@24i/bigscreen-sdk/mouse-navigation';
-import { ListBase as Base, Props as ListProps } from './Base';
-import { Item } from '../types';
-
-export const ListBase = forwardRef(<T extends Item<U>, U>(props: ListProps<T, U>,
-    listRef: Reference<Base<T, U>>,
-) => {
-    const direction = props.horizontal ? 'horizontal' : 'vertical';
-    const mrcuRef = createRef<MouseNavigation>();
-    return (
-        <MouseNavigation
-            getMountingPoint={() => listRef.current!.scroller.current!.wrapRef}
-            direction={direction}
-            forward={props.mrcuForward || props.forward}
-            backward={props.mrcuBackward || props.backward}
-            shouldShowMrcuForward={props.shouldShowMrcuForward}
-            shouldShowMrcuBackward={props.shouldShowMrcuBackward}
-            ref={mrcuRef}
-        >
-            <Base
-                {...props}
-                mrcuRef={mrcuRef}
-                ref={listRef}
-            />
-        </MouseNavigation>
-    );
-});

package/packages/list/src/Base/index.tizen.tv.ts

@@ -1 +0,0 @@
-export { ListBase } from './Base.mouse';

package/packages/list/src/Base/index.webos.tv.ts

@@ -1 +0,0 @@
-export { ListBase } from './Base.mouse';

package/packages/list/src/Base/index.webtv.ts

@@ -1 +0,0 @@
-export { ListBase } from './Base.mouse';