@24i/bigscreen-sdk 1.0.54-alpha.2836 → 2.1.1-alpha.2133

package/packages/focus/src/Layout/Base.tsx

@@ -1,22 +1,14 @@
 import { Component, DeclareProps, Reference } from '@24i/bigscreen-sdk/jsx';
 import { noop } from '@24i/bigscreen-sdk/utils/noop';
-import { stopEvent } from '@24i/bigscreen-sdk/utils/stopEvent';
 import { IFocusable } from '../IFocusable';
 import { Errors, hasValidDomRef } from './constants';
 import { SharedProps } from './types';
 
-const PREVENT_BLUR_ON_LONG_PRESS_KEYDOWNS = 2;
-
 export type Props = SharedProps & {
     focusOptions?: FocusOptions;
     focusableChildren: Array<Reference>,
     onFocusChanged?: (focused: Reference, index: number) => any,
     onBeforeFocusChange?: (focused: Reference, index: number) => any,
-    circular?: boolean,
-    preventBlurOnLongPress?: {
-        forward?: boolean,
-        backward?: boolean,
-    }
 };
 
 export interface ILayout {
@@ -33,16 +25,12 @@ export const getLayoutBase = (onKeyDown: (event: KeyboardEvent, layout: ILayout)
     class Layout extends Component<Props> implements ILayout, IFocusable {
         index = 0;
 
-        preventBlurCounter = 0;
-
         static defaultProps = {
             onFocusChanged: noop,
             onBeforeFocusChange: noop,
             focusOptions: { preventScroll: true },
             dir: 'auto',
-            circular: false,
-            preventBlurOnLongPress: {},
-        } as const;
+        };
 
         declare props: DeclareProps<Props, typeof Layout.defaultProps>;
 
@@ -52,7 +40,6 @@ export const getLayoutBase = (onKeyDown: (event: KeyboardEvent, layout: ILayout)
                 throw new Error(Errors.DOM_REF_ERROR);
             }
             domRef.current!.addEventListener('keydown', this.onKeyDown, false);
-            window.document.addEventListener('keyup', this.onGlobalKeyUp, true);
         }
 
         componentWillUnmount() {
@@ -61,17 +48,12 @@ export const getLayoutBase = (onKeyDown: (event: KeyboardEvent, layout: ILayout)
                 throw new Error(Errors.DOM_REF_ERROR);
             }
             domRef.current!.removeEventListener('keydown', this.onKeyDown, false);
-            window.document.removeEventListener('keyup', this.onGlobalKeyUp, true);
         }
 
         onKeyDown = (e: KeyboardEvent) => {
             onKeyDown(e, this);
         };
 
-        onGlobalKeyUp = () => {
-            this.preventBlurCounter = 0;
-        };
-
         getFromIndex(target: HTMLElement) {
             const { focusableChildren } = this.props;
             if (
@@ -96,42 +78,25 @@ export const getLayoutBase = (onKeyDown: (event: KeyboardEvent, layout: ILayout)
         }
 
         backward(e: KeyboardEvent) {
-            const { focusableChildren, preventBlurOnLongPress, circular } = this.props;
             const { target } = e;
             const fromIndex = this.getFromIndex(target as HTMLElement);
-            if (preventBlurOnLongPress.backward) {
-                this.preventBlurCounter += 1;
-            }
             if (fromIndex > 0) {
                 this.setIndex(fromIndex - 1);
                 this.focusCurrentIndex();
-                stopEvent(e);
-            } else if (circular) {
-                this.setIndex(focusableChildren.length - 1);
-                this.focusCurrentIndex();
-                stopEvent(e);
-            } else if (this.preventBlurCounter >= PREVENT_BLUR_ON_LONG_PRESS_KEYDOWNS) {
-                stopEvent(e);
+                e.preventDefault();
+                e.stopPropagation();
             }
         }
 
         forward(e: KeyboardEvent) {
-            const { focusableChildren, preventBlurOnLongPress, circular } = this.props;
+            const { focusableChildren } = this.props;
             const { target } = e;
             const fromIndex = this.getFromIndex(target as HTMLElement);
-            if (preventBlurOnLongPress.forward) {
-                this.preventBlurCounter += 1;
-            }
             if (fromIndex < focusableChildren.length - 1) {
                 this.setIndex(fromIndex + 1);
                 this.focusCurrentIndex();
-                stopEvent(e);
-            } else if (circular) {
-                this.setIndex(0);
-                this.focusCurrentIndex();
-                stopEvent(e);
-            } else if (this.preventBlurCounter >= PREVENT_BLUR_ON_LONG_PRESS_KEYDOWNS) {
-                stopEvent(e);
+                e.preventDefault();
+                e.stopPropagation();
             }
         }
 

package/packages/focus/src/Layout/Matrix.tsx

@@ -8,8 +8,6 @@ import { isRtl } from './isRtl';
 import { Errors, hasValidDomRef } from './constants';
 import { SharedProps } from './types';
 
-const PREVENT_BLUR_ON_LONG_PRESS_KEYDOWNS = 2;
-
 // Used in binary operations for shorter checks
 export enum CircularDirection {
     NONE = 0,
@@ -23,13 +21,7 @@ export type Props = SharedProps & {
     matrix: Array<Array<Reference>>,
     onFocusChanged?: (focused: Reference, index: Index2D) => any,
     onBeforeFocusChange?: (focused: Reference, index: Index2D) => any,
-    circular?: CircularDirection,
-    preventBlurOnLongPress?: {
-        left?: boolean,
-        right?: boolean,
-        up?: boolean,
-        down?: boolean,
-    },
+    circular?: CircularDirection;
 };
 
 export type Index2D = {
@@ -40,14 +32,11 @@ export type Index2D = {
 export class Matrix extends Component<Props> implements IFocusable {
     index: Index2D = { x: 0, y: 0 };
 
-    preventBlurCounter = 0;
-
     static defaultProps = {
         onFocusChanged: noop,
         onBeforeFocusChange: noop,
         circular: CircularDirection.NONE,
         dir: 'auto',
-        preventBlurOnLongPress: {},
     } as const;
 
     declare props: DeclareProps<Props, typeof Matrix.defaultProps>;
@@ -58,7 +47,6 @@ export class Matrix extends Component<Props> implements IFocusable {
             throw new Error(Errors.DOM_REF_ERROR);
         }
         domRef.current!.addEventListener('keydown', this.onKeyDown, false);
-        window.document.addEventListener('keyup', this.onGlobalKeyUp, true);
     }
 
     componentWillUnmount() {
@@ -67,46 +55,26 @@ export class Matrix extends Component<Props> implements IFocusable {
             throw new Error(Errors.DOM_REF_ERROR);
         }
         domRef.current!.removeEventListener('keydown', this.onKeyDown, false);
-        window.document.removeEventListener('keyup', this.onGlobalKeyUp, true);
     }
 
     onKeyDown = (e: KeyboardEvent) => {
-        const { preventBlurOnLongPress } = this.props;
         let newIndex: Index2D | null = null;
         if (this.isDirectionLeft(e)) {
             newIndex = this.moveHorizontaly('left');
-            if (preventBlurOnLongPress.left) {
-                this.preventBlurCounter += 1;
-            }
         } else if (this.isDirectionRight(e)) {
             newIndex = this.moveHorizontaly('right');
-            if (preventBlurOnLongPress.right) {
-                this.preventBlurCounter += 1;
-            }
         } else if (device.isDirectionUp(e)) {
             newIndex = this.moveVerticaly('up');
-            if (preventBlurOnLongPress.up) {
-                this.preventBlurCounter += 1;
-            }
         } else if (device.isDirectionDown(e)) {
             newIndex = this.moveVerticaly('down');
-            if (preventBlurOnLongPress.down) {
-                this.preventBlurCounter += 1;
-            }
         }
         if (newIndex) {
             stopEvent(e);
             this.index = newIndex;
             this.focusCurrentIndex();
-        } else if (this.preventBlurCounter >= PREVENT_BLUR_ON_LONG_PRESS_KEYDOWNS) {
-            stopEvent(e);
         }
     };
 
-    onGlobalKeyUp = () => {
-        this.preventBlurCounter = 0;
-    };
-
     getRefAt({ x, y }: Index2D): Reference {
         const { matrix } = this.props;
         if (matrix[y] && matrix[y][x]) return matrix[y][x];
@@ -144,6 +112,24 @@ export class Matrix extends Component<Props> implements IFocusable {
         return false;
     }
 
+    isDirectionLeft(event: KeyboardEvent) {
+        const { dir } = this.props;
+        const rtl = isRtl(dir);
+        return (
+            (!rtl && LEFT.is(event))
+            || (rtl && RIGHT.is(event))
+        );
+    }
+
+    isDirectionRight(event: KeyboardEvent) {
+        const { dir } = this.props;
+        const rtl = isRtl(dir);
+        return (
+            (!rtl && RIGHT.is(event))
+            || (rtl && LEFT.is(event))
+        );
+    }
+
     moveForwards = (isCircular: boolean) => (x: number, length: number) => {
         if (x === length - 1) {
             return isCircular ? 0 : length - 1;
@@ -186,24 +172,6 @@ export class Matrix extends Component<Props> implements IFocusable {
         return this.searchVertical(column, fromY, this.moveForwards(!!isCircular));
     };
 
-    isDirectionLeft(event: KeyboardEvent) {
-        const { dir } = this.props;
-        const rtl = isRtl(dir);
-        return (
-            (!rtl && LEFT.is(event))
-            || (rtl && RIGHT.is(event))
-        );
-    }
-
-    isDirectionRight(event: KeyboardEvent) {
-        const { dir } = this.props;
-        const rtl = isRtl(dir);
-        return (
-            (!rtl && RIGHT.is(event))
-            || (rtl && LEFT.is(event))
-        );
-    }
-
     isDifferentReferenceFromCurrent(index: Index2D): boolean {
         const { current } = this.getRefAt(this.index);
         const { current: searched } = this.getRefAt(index);

package/packages/focus/src/Layout/__test__/Base.spec.ts

@@ -0,0 +1,180 @@
+import { IFocusable } from '../../IFocusable';
+import { getLayoutBase } from '../Base';
+import { rootRef, refChildA, refChildB, refChildC, refChildD } from './shared';
+
+const mockKeydown = jest.fn();
+const mockEvent: any = {
+    target: null,
+    preventDefault: jest.fn(),
+    stopPropagation: jest.fn(),
+};
+
+const Base = getLayoutBase(mockKeydown);
+
+describe('Focus Layout Base', () => {
+    let base: any;
+    beforeEach(() => {
+        base = new Base({
+            domRef: rootRef,
+            children: 'children',
+            focusableChildren: [refChildA, refChildB, refChildC],
+            onFocusChanged: jest.fn(),
+            onBeforeFocusChange: jest.fn(),
+        });
+        mockKeydown.mockClear();
+        refChildA.current!.focus.mockClear();
+        refChildB.current!.focus.mockClear();
+        refChildC.current!.focus.mockClear();
+        mockEvent.preventDefault.mockClear();
+        mockEvent.stopPropagation.mockClear();
+    });
+
+    it('should throw without domRef on componentDidMount', () => {
+        // @ts-ignore - the point of the test is to test possible runtime problem
+        const invalidBase = new Base({ domRef: null, children: [], focusableChildren: [] });
+        expect(() => invalidBase.componentDidMount()).toThrow();
+    });
+
+    it('should throw without domRef on componentWillUnmount', () => {
+        // @ts-ignore - the point of the test is to test possible runtime problem
+        const invalidBase = new Base({ domRef: null, children: [], focusableChildren: [] });
+        expect(() => invalidBase.componentWillUnmount()).toThrow();
+    });
+
+    it('should not throw with valid domRef on componentDidMount', () => {
+        expect(() => base.componentDidMount()).not.toThrow();
+    });
+
+    it('should not throw with valid domRef on componentWillUnmount', () => {
+        expect(() => base.componentWillUnmount()).not.toThrow();
+    });
+
+    it('should render children', () => {
+        expect(base.render()).toBe('children');
+    });
+
+    it('should return false when setting index out of range', () => {
+        expect(base.setIndex(4)).toBe(false);
+    });
+
+    it('should return true when setting index out of range', () => {
+        expect(base.setIndex(1)).toBe(true);
+    });
+
+    it('should increase index by one on forward', () => {
+        const oldIndex = base.index;
+        base.forward(mockEvent);
+        expect(base.index).toBe(oldIndex + 1);
+    });
+
+    it('should deecrease index by one on backward', () => {
+        base.index = 2;
+        const oldIndex = base.index;
+        base.backward(mockEvent);
+        expect(base.index).toBe(oldIndex - 1);
+    });
+
+    it('should not increase index above focusableChildren.length - 1', () => {
+        base.index = base.props.focusableChildren.length - 1;
+        base.forward(mockEvent);
+        expect(base.index).toBe(base.props.focusableChildren.length - 1);
+    });
+
+    it('should not decrease index below 0', () => {
+        base.index = 0;
+        base.backward(mockEvent);
+        expect(base.index).toBe(0);
+    });
+
+    it('should call focus on new element when going forward', () => {
+        base.forward(mockEvent);
+        expect(refChildB.current!.focus).toHaveBeenCalled();
+    });
+
+    it('should call focus on new element when going backward', () => {
+        base.index = 1;
+        base.backward(mockEvent);
+        expect(refChildA.current!.focus).toHaveBeenCalled();
+    });
+
+    it('should not call focus when can\'t go forward', () => {
+        base.index = 2;
+        base.forward(mockEvent);
+        expect(refChildC.current!.focus).not.toHaveBeenCalled();
+    });
+
+    it('should not call focus when can\'t go backward', () => {
+        base.backward(mockEvent);
+        expect(refChildA.current!.focus).not.toHaveBeenCalled();
+    });
+
+    it('should call preventDefault and stopPropagation when going forward', () => {
+        base.forward(mockEvent);
+        expect(mockEvent.preventDefault).toHaveBeenCalled();
+        expect(mockEvent.stopPropagation).toHaveBeenCalled();
+    });
+
+    it('should call preventDefault and stopPropagation when going backward', () => {
+        base.index = 1;
+        base.backward(mockEvent);
+        expect(mockEvent.preventDefault).toHaveBeenCalled();
+        expect(mockEvent.stopPropagation).toHaveBeenCalled();
+    });
+
+    it('should not call preventDefault and stopPropagation when can\'t go forward', () => {
+        base.index = 2;
+        base.forward(mockEvent);
+        expect(mockEvent.preventDefault).not.toHaveBeenCalled();
+        expect(mockEvent.stopPropagation).not.toHaveBeenCalled();
+    });
+
+    it('should not call preventDefault and stopPropagation when can\'t go backward', () => {
+        base.backward(mockEvent);
+        expect(mockEvent.preventDefault).not.toHaveBeenCalled();
+        expect(mockEvent.stopPropagation).not.toHaveBeenCalled();
+    });
+
+    it('should call onFocusChanged when focusing current index', () => {
+        base.focusCurrentIndex();
+        expect(base.props.onFocusChanged).toHaveBeenCalled();
+    });
+
+    it('should call onBeforeFocusChange when focusing current index', () => {
+        base.focusCurrentIndex();
+        expect(base.props.onBeforeFocusChange).toHaveBeenCalled();
+    });
+
+    it('should focus current index on focus', () => {
+        base.index = 2;
+        base.focus();
+        expect(refChildC.current!.focus).toHaveBeenCalled();
+    });
+
+    it('should call passed onKeyDown on onKeyDown', () => {
+        base.onKeyDown();
+        expect(mockKeydown).toHaveBeenCalled();
+    });
+
+    it('should throw in focusCurrentIndex when element does not implement focus', () => {
+        base.props.focusableChildren[2] = {};
+        base.index = 2;
+        expect(() => base.focusCurrentIndex()).toThrow();
+    });
+
+    it('should take result of hasDom into account of determining current focus position', () => {
+        base = new Base({
+            domRef: rootRef,
+            children: 'children',
+            focusableChildren: [refChildA, refChildB, refChildC, refChildD],
+            onFocusChanged: jest.fn(),
+            onBeforeFocusChange: jest.fn(),
+        });
+        ((refChildD.current as IFocusable).hasDom as jest.MockedFn<
+        Exclude<IFocusable['hasDom'], undefined>
+        >).mockReturnValueOnce(true);
+        base.backward(mockEvent);
+        expect(base.index).toBe(2);
+        base.backward(mockEvent);
+        expect(base.index).toBe(1);
+    });
+});

package/packages/focus/src/Layout/__test__/Horizontal.spec.ts

@@ -0,0 +1,94 @@
+import { isRtl } from '@24i/bigscreen-sdk/i18n';
+import { Horizontal } from '../Horizontal';
+import { rootRef, refChildA, refChildB, refChildC } from './shared';
+
+jest.mock('@24i/bigscreen-sdk/i18n', () => ({
+    ...jest.requireActual('@24i/bigscreen-sdk/i18n'),
+    isRtl: jest.fn().mockReturnValue(false),
+}));
+const isRtlMock = isRtl as jest.MockedFn<typeof isRtl>;
+
+const mockEvent = {
+    target: false,
+    preventDefault: jest.fn(),
+    stopPropagation: jest.fn(),
+};
+const mockLEFTEvent = {
+    code: 'ArrowLeft',
+    ...mockEvent,
+};
+const mockRIGHTEvent = {
+    code: 'ArrowRight',
+    ...mockEvent,
+};
+
+describe('Horizontal Focus Layout', () => {
+    let horizontal: any;
+    beforeEach(() => {
+        horizontal = new Horizontal({
+            domRef: rootRef,
+            children: 'children',
+            focusableChildren: [refChildA, refChildB, refChildC],
+            onFocusChanged: jest.fn(),
+            onBeforeFocusChange: jest.fn(),
+        });
+        horizontal.forward = jest.fn();
+        horizontal.backward = jest.fn();
+    });
+
+    it('should be a class component', () => {
+        expect(Horizontal.isClass).toBe(true);
+    });
+
+    it('should call forward on RIGHT', () => {
+        horizontal.onKeyDown(mockRIGHTEvent);
+        expect(horizontal.forward).toHaveBeenCalled();
+    });
+
+    it('should call backward on LEFT', () => {
+        horizontal.setIndex(1);
+        horizontal.onKeyDown(mockLEFTEvent);
+        expect(horizontal.backward).toHaveBeenCalled();
+    });
+
+    it('should call backward on RIGHT when RTL', () => {
+        isRtlMock.mockReturnValueOnce(true);
+        horizontal.setIndex(1);
+        horizontal.onKeyDown(mockRIGHTEvent);
+        expect(horizontal.backward).toHaveBeenCalled();
+    });
+
+    it('should call forward on LEFT when RTL', () => {
+        isRtlMock.mockReturnValueOnce(true);
+        horizontal.onKeyDown(mockLEFTEvent);
+        expect(horizontal.forward).toHaveBeenCalled();
+    });
+
+    it('should call backward on RIGHT when forced RTL', () => {
+        horizontal.props.dir = 'rtl';
+        horizontal.setIndex(1);
+        horizontal.onKeyDown(mockRIGHTEvent);
+        expect(horizontal.backward).toHaveBeenCalled();
+    });
+
+    it('should call forward on LEFT when forced RTL', () => {
+        horizontal.props.dir = 'rtl';
+        horizontal.onKeyDown(mockLEFTEvent);
+        expect(horizontal.forward).toHaveBeenCalled();
+    });
+
+    it('should call backward on LEFT when RTL and forced LTR', () => {
+        isRtlMock.mockReturnValueOnce(true);
+        horizontal.props.dir = 'ltr';
+        horizontal.setIndex(1);
+        horizontal.onKeyDown(mockLEFTEvent);
+        expect(horizontal.backward).toHaveBeenCalled();
+    });
+
+    it('should call forward on RIGHT when RTL and forced LTR', () => {
+        isRtlMock.mockReturnValueOnce(true);
+        horizontal.props.dir = 'ltr';
+        horizontal.onKeyDown(mockRIGHTEvent);
+        expect(horizontal.forward).toHaveBeenCalled();
+    });
+});