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

package/packages/focus/README.md

@@ -14,13 +14,11 @@ IFocusable is an interface that should be implemented by anything that can be fo
 interface IFocusable {
     focus(options?: FocusOptions): void,
     hasDom?(element: HTMLElement): boolean,
-    hasFocus?(): boolean,
 }
 ```
 - focus is the main function that is called when focusing component/element.
 - hasDom is optional optimization for components to help Layout components locate the currently
 focused child.
-- hasFocus is optional check if the component has focus inside or is itself focused.
 
 ## Layout components
 - Vertical: Use it to create focus between elements vertically (up/down)
@@ -42,7 +40,6 @@ to the focused element and its index. Ideal place to change other elements
 - onBeforeFocusChange: Optional callback just before focus change. It receives a reference
 to the focused element and its index. Ideal place for preparing for the change
 (e.g. moving the container to fit new element in the screen)
-- circular: makes focus circular, e.g. when pressing left at leftmost element focus will go to rightmost element
 - dir: Optional forceful setting of the component direction. Defaults to `'auto'` which follows
 the direction of the app.
 `'ltr'` always forces left-to-right layout,
@@ -131,16 +128,6 @@ const matrix = [
 ];
 ```
 
-## Prevent blur on long press
-When the user holds a navigation key, he usually scrolls to the boundary of the layout
-and then releases the key. This operation is very quick and most of the time he releases
-the key too late, so the keydown event from the layout will propagate to another component
-or another layout. In some cases, we don't want this behavior and for those situations and
-to have better control above the layout navigation, there is a prop `preventBlurOnLongPress`.
-When the user scrolls to the boundary of the layout while holding a navigation key,
-he needs to release the key and press it again to propagate the event higher and focus
-another component or layout.
-
 ## Limitations
 For the div to properly receive keydown events it needs to have set `tabIndex`. If you do not set `tabIndex` then it won't receive keydown events and those will not propagate to the Vertical/Horizontal component.
 
@@ -315,11 +302,6 @@ Method to focus between multiple focusable components. The first existing (non-n
 const focusFirstExisting = (...toFocus: Reference<IFocusable>[]) => () => void;
 ```
 
-If you need to enable `preventScroll` in element focus options, wrap your reference with `preventScrollOnFocus` function like this:
-```ts
-focusFirstExisting(this.navigation, preventScrollOnFocus(this.div))
-```
-
 ## refocusAfterHashChange
 When the hash is changed, the browser automatically blurs the currently focused element and focuses body.
 This can be problematic when the overlay component is active (development tools, modals). Focus is lost and
@@ -331,18 +313,3 @@ outside of the component and not focused.
 ```ts
 const refocusAfterHashChange = (focusWrapperOrReference: HTMLElement | Reference<HTMLElement>) => void;
 ```
-
-## hasFocus
-Test if the element (or element in the reference) has the `activeElement` inside or optionally,
-if the element itself is the `activeElement`.
-
-```ts
-const hasFocus = (elementOrReference: HTMLElement | Reference<HTMLElement>, includeElementItself = false) => boolean;
-```
-
-## isFocused
-Test if the element (or element in the reference) is the `activeElement`.
-
-```ts
-const isFocused = (elementOrReference: HTMLElement | Reference<HTMLElement>) => boolean;
-```

package/packages/focus/src/IFocusable.ts

@@ -1,5 +1,4 @@
 export interface IFocusable {
     focus(options?: FocusOptions): void,
     hasDom?(element: HTMLElement): boolean,
-    hasFocus?(): boolean,
 }

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();
+    });
+});