@24i/bigscreen-sdk 1.0.34 → 1.0.35-alpha.2578

package/packages/keyboard/src/KeyboardBase.tsx

@@ -1,344 +1,344 @@
-import { Component, createRef, Reference } from '@24i/bigscreen-sdk/jsx';
-import { getKeyDigit, device } from '@24i/bigscreen-sdk/device';
-import { isRtl } from '@24i/bigscreen-sdk/i18n';
-import { EventsManager } from '@24i/bigscreen-sdk/events-manager';
-import {
-    Matrix,
-    focusCandidate,
-    setActiveElementAsFocusCandidate,
-    Index2D,
-    CircularDirection,
-} from '@24i/bigscreen-sdk/focus';
-import { IKeyboard, IKeyboardEvents } from '@24i/bigscreen-sdk/ime';
-import { forEach } from '@24i/bigscreen-sdk/perf-utils/array';
-import { addClass } from '@24i/bigscreen-sdk/utils/addClass';
-import { removeClass } from '@24i/bigscreen-sdk/utils/removeClass';
-import { BACK } from '@24i/bigscreen-sdk/device/keymap';
-import {
-    DISPLAY_NONE,
-    getDisplayToggler,
-    IDisplayToggler,
-} from '@24i/bigscreen-sdk/utils/displayToggler';
-import { stopEvent } from '@24i/bigscreen-sdk/utils/stopEvent';
-import { caretLeft, caretRight } from './utils/caret';
-import { backspace, insertCharAtCaret } from './utils/input';
-import { generateFocusMatrixFromStringMatrix } from './utils/generateFocusMatrixFromStringMatrix';
-import { hwKeyboardEventToChar } from './hwKeyboardEventToChar';
-import { ShiftMode } from './ShiftMode';
-import { KeyMatrixCell } from './types';
-
-const SHIFT_ACTIVE_CLASS = 'shift-active';
-const CAPS_ACTIVE_CLASS = 'caps-active';
-
-type ShiftState = 'off' | 'shift' | 'caps';
-
-export type BaseProps<Layouts extends string> = {
-    layouts?: Record<Layouts, KeyMatrixCell[][]>,
-    initialFocus?: Index2D,
-    initiallyIsHidden?: boolean,
-    handleRemoteDigits?: boolean;
-    handleHWKeyboard?: boolean,
-    circular?: CircularDirection;
-    shouldHideOnBackdropClick?: boolean;
-    shiftMode?: ShiftMode,
-    className?: string,
-};
-
-export abstract class KeyboardBase<
-    Layouts extends string,
-    Props extends BaseProps<Layouts>,
-> extends Component<Props> implements IKeyboard {
-    static defaultProps = {
-        className: 'keyboard',
-        initiallyIsHidden: true,
-        handleRemoteDigits: true,
-        handleHWKeyboard: true,
-        circular: CircularDirection.HORIZONTAL,
-        shouldHideOnBackdropClick: true,
-        shiftMode: 'combined',
-    };
-
-    events: EventsManager<IKeyboardEvents> = new EventsManager();
-
-    addEventListener = this.events.addEventListener;
-
-    removeEventListener = this.events.removeEventListener;
-
-    triggerEvent = this.events.triggerEvent;
-
-    /**
-     * Main wrapping element.
-     */
-    keyboardWrapper = createRef<HTMLDivElement>();
-
-    /**
-     * Focus Matrix component.
-     */
-    matrix = createRef<Matrix>();
-
-    /**
-     * Input element that is controlled by the Keyboard.
-     */
-    inputElement: HTMLInputElement | null = null;
-
-    /**
-     * DisplayToggler for the {@link KeyboardBase.keyboardWrapper main wrapper}.
-     */
-    displayToggler: IDisplayToggler;
-
-    /**
-     * Resolve function to call once the input is finished.
-     */
-    inputResolver: ((value: boolean) => void) | null = null;
-
-    /**
-     * State of the shift activity.
-     */
-    shiftState: ShiftState = 'off';
-
-    /**
-     * Record of focus matrices [key === layout].
-     */
-    // @ts-ignore - filled up during constructor
-    focusMatrices: Record<Layouts, Reference<HTMLDivElement>[][]> = {};
-
-    /**
-     * References to the keys by their name.
-     */
-    keyRefs: Record<string, Reference<HTMLDivElement>> = {};
-
-    constructor(props: Props) {
-        super(props);
-        const { layouts, initiallyIsHidden } = this.props;
-        this.displayToggler = getDisplayToggler(this.keyboardWrapper, initiallyIsHidden);
-        this.createFocusMatrices(layouts!);
-    }
-
-    /**
-     * Keyboard event handler, like arrow keys.
-     * NOTE: Bound to base keyboard class!
-     * @param event keyboard event to handle
-     */
-    onKeyDown(event: KeyboardEvent) {
-        const { handleRemoteDigits, handleHWKeyboard } = this.props;
-        const preventBack = 'backAsBackspaceInSearch' in device && !!device.backAsBackspaceInSearch;
-        const inputLength = this.inputElement?.value?.length;
-
-        if (BACK.is(event)) {
-            if (preventBack && inputLength) {
-                this.onBackspace();
-            } else {
-                this.onCancel();
-            }
-        } else {
-            let char: string | null = null;
-            if (handleHWKeyboard) {
-                char = hwKeyboardEventToChar(event);
-            }
-            if (handleRemoteDigits && char === null) {
-                const digit = getKeyDigit(event);
-                char = digit?.toString() || null;
-            }
-            if (char) {
-                this.onKey(char);
-            }
-        }
-        stopEvent(event);
-    }
-
-    /**
-     * Positively finishes the input (Done, Continue, etc.)
-     * NOTE: Bound to base keyboard class!
-     */
-    onDone() {
-        this.finishInput();
-    }
-
-    /**
-     * Negatively finishes the input (Cancel, etc.)
-     */
-    onCancel() {
-        this.finishInput(true);
-    }
-
-    /**
-     * To go to/from shifted (capitals) layer.
-     */
-    onShift() {
-        const { shiftMode } = this.props;
-        if (this.shiftState === 'caps') {
-            this.shiftState = 'off';
-            removeClass(this.keyboardWrapper, CAPS_ACTIVE_CLASS);
-            return;
-        }
-        if (this.shiftState === 'shift') {
-            if (shiftMode === 'shift_only') {
-                this.shiftState = 'off';
-                removeClass(this.keyboardWrapper, SHIFT_ACTIVE_CLASS);
-            } else {
-                this.shiftState = 'caps';
-                addClass(this.keyboardWrapper, CAPS_ACTIVE_CLASS);
-                removeClass(this.keyboardWrapper, SHIFT_ACTIVE_CLASS);
-            }
-            return;
-        }
-        if (shiftMode !== 'caps_only') {
-            this.shiftState = 'shift';
-            addClass(this.keyboardWrapper, SHIFT_ACTIVE_CLASS);
-        } else {
-            this.shiftState = 'caps';
-            addClass(this.keyboardWrapper, CAPS_ACTIVE_CLASS);
-        }
-    }
-
-    /**
-     * Removes the character before the caret.
-     */
-    onBackspace() {
-        const newValue = backspace(this.inputElement!);
-        if (typeof newValue === 'string') {
-            this.updateCaretPosition();
-        }
-    }
-
-    /**
-     * Clears the whole input.
-     */
-    onClear() {
-        const previous = this.inputElement!.value;
-        this.inputElement!.value = '';
-        if (previous !== '') {
-            this.updateCaretPosition();
-        }
-    }
-
-    /**
-     * Moves caret 1 position to the left.
-     */
-    onLeft() {
-        const newPosition = !isRtl()
-            ? caretLeft(this.inputElement)
-            : caretRight(this.inputElement);
-        if (typeof newPosition === 'number') {
-            this.updateCaretPosition(newPosition);
-        }
-    }
-
-    /**
-     * Moves caret 1 position to the right.
-     */
-    onRight() {
-        const newPosition = !isRtl()
-            ? caretRight(this.inputElement)
-            : caretLeft(this.inputElement);
-        if (typeof newPosition === 'number') {
-            this.updateCaretPosition(newPosition);
-        }
-    }
-
-    /**
-     * General value key press.
-     * @param char pressed character to be added to the input.
-     */
-    onKey(char: string) {
-        const charToInsert = this.isShiftActive() ? char.toUpperCase() : char;
-        this.updateShiftStateAfterKeyPress();
-        const newValue = insertCharAtCaret(this.inputElement, charToInsert);
-        if (typeof newValue === 'string') {
-            this.updateCaretPosition();
-        }
-    }
-
-    /**
-     * Creates focus matrices from the layouts.
-     */
-    createFocusMatrices(matrices: Record<Layouts, KeyMatrixCell[][]>) {
-        forEach(Object.keys(matrices) as Layouts[], (matrixName) => {
-            this.focusMatrices[matrixName] = generateFocusMatrixFromStringMatrix(
-                this.keyRefs, matrices[matrixName],
-            );
-        });
-    }
-
-    async input(input: HTMLInputElement): Promise<boolean> {
-        const { initialFocus } = this.props;
-        this.inputElement = input;
-        setActiveElementAsFocusCandidate();
-        this.show();
-        this.matrix.current!.setIndex(initialFocus!);
-        this.matrix.current!.focus();
-        return new Promise((resolve) => {
-            this.inputResolver = resolve;
-        });
-    }
-
-    /**
-     * Finishes the inputting.
-     */
-    finishInput(cancelled = false) {
-        this.inputElement = null;
-        this.hide();
-        focusCandidate();
-        this.inputResolver!(cancelled);
-        this.inputResolver = null;
-    }
-
-    /**
-     * Triggers event to update caret position.
-     */
-    updateCaretPosition(newPosition: number = this.inputElement!.selectionStart!) {
-        this.triggerEvent('caretpositionchange', newPosition);
-    }
-
-    /**
-     * Shows the keyboard.
-     */
-    show() {
-        this.displayToggler.show();
-    }
-
-    /**
-     * Hides the keyboard and restores shift state to OFF.
-     */
-    hide() {
-        this.displayToggler.hide();
-        this.shiftState = 'off';
-        removeClass(this.keyboardWrapper, SHIFT_ACTIVE_CLASS);
-        removeClass(this.keyboardWrapper, CAPS_ACTIVE_CLASS);
-    }
-
-    /**
-     * Returns whether the shiftState is SHIFT or CAPS.
-     * @returns true for 'shift' or 'caps', false for 'off'
-     */
-    isShiftActive() {
-        return this.shiftState !== 'off';
-    }
-
-    /**
-     * Turns off shift if shiftState was SHIFT.
-     */
-    updateShiftStateAfterKeyPress() {
-        if (this.shiftState === 'shift') {
-            this.shiftState = 'off';
-            removeClass(this.keyboardWrapper, SHIFT_ACTIVE_CLASS);
-        }
-    }
-
-    render() {
-        const { className } = this.props;
-        return (
-            <div
-                ref={this.keyboardWrapper}
-                className={
-                    this.displayToggler.isHidden()
-                        ? `${className} ${DISPLAY_NONE}`
-                        : className
-                }
-                tabIndex={0}
-                onKeyDown={(event) => this.onKeyDown(event)}
-                dir="ltr"
-            />
-        );
-    }
-}
+import { Component, createRef, Reference } from '@24i/bigscreen-sdk/jsx';
+import { getKeyDigit, device } from '@24i/bigscreen-sdk/device';
+import { isRtl } from '@24i/bigscreen-sdk/i18n';
+import { EventsManager } from '@24i/bigscreen-sdk/events-manager';
+import {
+    Matrix,
+    focusCandidate,
+    setActiveElementAsFocusCandidate,
+    Index2D,
+    CircularDirection,
+} from '@24i/bigscreen-sdk/focus';
+import { IKeyboard, IKeyboardEvents } from '@24i/bigscreen-sdk/ime';
+import { forEach } from '@24i/bigscreen-sdk/perf-utils/array';
+import { addClass } from '@24i/bigscreen-sdk/utils/addClass';
+import { removeClass } from '@24i/bigscreen-sdk/utils/removeClass';
+import { BACK } from '@24i/bigscreen-sdk/device/keymap';
+import {
+    DISPLAY_NONE,
+    getDisplayToggler,
+    IDisplayToggler,
+} from '@24i/bigscreen-sdk/utils/displayToggler';
+import { stopEvent } from '@24i/bigscreen-sdk/utils/stopEvent';
+import { caretLeft, caretRight } from './utils/caret';
+import { backspace, insertCharAtCaret } from './utils/input';
+import { generateFocusMatrixFromStringMatrix } from './utils/generateFocusMatrixFromStringMatrix';
+import { hwKeyboardEventToChar } from './hwKeyboardEventToChar';
+import { ShiftMode } from './ShiftMode';
+import { KeyMatrixCell } from './types';
+
+const SHIFT_ACTIVE_CLASS = 'shift-active';
+const CAPS_ACTIVE_CLASS = 'caps-active';
+
+type ShiftState = 'off' | 'shift' | 'caps';
+
+export type BaseProps<Layouts extends string> = {
+    layouts?: Record<Layouts, KeyMatrixCell[][]>,
+    initialFocus?: Index2D,
+    initiallyIsHidden?: boolean,
+    handleRemoteDigits?: boolean;
+    handleHWKeyboard?: boolean,
+    circular?: CircularDirection;
+    shouldHideOnBackdropClick?: boolean;
+    shiftMode?: ShiftMode,
+    className?: string,
+};
+
+export abstract class KeyboardBase<
+    Layouts extends string,
+    Props extends BaseProps<Layouts>,
+> extends Component<Props> implements IKeyboard {
+    static defaultProps = {
+        className: 'keyboard',
+        initiallyIsHidden: true,
+        handleRemoteDigits: true,
+        handleHWKeyboard: true,
+        circular: CircularDirection.HORIZONTAL,
+        shouldHideOnBackdropClick: true,
+        shiftMode: 'combined',
+    };
+
+    events: EventsManager<IKeyboardEvents> = new EventsManager();
+
+    addEventListener = this.events.addEventListener;
+
+    removeEventListener = this.events.removeEventListener;
+
+    triggerEvent = this.events.triggerEvent;
+
+    /**
+     * Main wrapping element.
+     */
+    keyboardWrapper = createRef<HTMLDivElement>();
+
+    /**
+     * Focus Matrix component.
+     */
+    matrix = createRef<Matrix>();
+
+    /**
+     * Input element that is controlled by the Keyboard.
+     */
+    inputElement: HTMLInputElement | null = null;
+
+    /**
+     * DisplayToggler for the {@link KeyboardBase.keyboardWrapper main wrapper}.
+     */
+    displayToggler: IDisplayToggler;
+
+    /**
+     * Resolve function to call once the input is finished.
+     */
+    inputResolver: ((value: boolean) => void) | null = null;
+
+    /**
+     * State of the shift activity.
+     */
+    shiftState: ShiftState = 'off';
+
+    /**
+     * Record of focus matrices [key === layout].
+     */
+    // @ts-ignore - filled up during constructor
+    focusMatrices: Record<Layouts, Reference<HTMLDivElement>[][]> = {};
+
+    /**
+     * References to the keys by their name.
+     */
+    keyRefs: Record<string, Reference<HTMLDivElement>> = {};
+
+    constructor(props: Props) {
+        super(props);
+        const { layouts, initiallyIsHidden } = this.props;
+        this.displayToggler = getDisplayToggler(this.keyboardWrapper, initiallyIsHidden);
+        this.createFocusMatrices(layouts!);
+    }
+
+    /**
+     * Keyboard event handler, like arrow keys.
+     * NOTE: Bound to base keyboard class!
+     * @param event keyboard event to handle
+     */
+    onKeyDown(event: KeyboardEvent) {
+        const { handleRemoteDigits, handleHWKeyboard } = this.props;
+        const preventBack = 'backAsBackspaceInSearch' in device && !!device.backAsBackspaceInSearch;
+        const inputLength = this.inputElement?.value?.length;
+
+        if (BACK.is(event)) {
+            if (preventBack && inputLength) {
+                this.onBackspace();
+            } else {
+                this.onCancel();
+            }
+        } else {
+            let char: string | null = null;
+            if (handleHWKeyboard) {
+                char = hwKeyboardEventToChar(event);
+            }
+            if (handleRemoteDigits && char === null) {
+                const digit = getKeyDigit(event);
+                char = digit?.toString() || null;
+            }
+            if (char) {
+                this.onKey(char);
+            }
+        }
+        stopEvent(event);
+    }
+
+    /**
+     * Positively finishes the input (Done, Continue, etc.)
+     * NOTE: Bound to base keyboard class!
+     */
+    onDone() {
+        this.finishInput();
+    }
+
+    /**
+     * Negatively finishes the input (Cancel, etc.)
+     */
+    onCancel() {
+        this.finishInput(true);
+    }
+
+    /**
+     * To go to/from shifted (capitals) layer.
+     */
+    onShift() {
+        const { shiftMode } = this.props;
+        if (this.shiftState === 'caps') {
+            this.shiftState = 'off';
+            removeClass(this.keyboardWrapper, CAPS_ACTIVE_CLASS);
+            return;
+        }
+        if (this.shiftState === 'shift') {
+            if (shiftMode === 'shift_only') {
+                this.shiftState = 'off';
+                removeClass(this.keyboardWrapper, SHIFT_ACTIVE_CLASS);
+            } else {
+                this.shiftState = 'caps';
+                addClass(this.keyboardWrapper, CAPS_ACTIVE_CLASS);
+                removeClass(this.keyboardWrapper, SHIFT_ACTIVE_CLASS);
+            }
+            return;
+        }
+        if (shiftMode !== 'caps_only') {
+            this.shiftState = 'shift';
+            addClass(this.keyboardWrapper, SHIFT_ACTIVE_CLASS);
+        } else {
+            this.shiftState = 'caps';
+            addClass(this.keyboardWrapper, CAPS_ACTIVE_CLASS);
+        }
+    }
+
+    /**
+     * Removes the character before the caret.
+     */
+    onBackspace() {
+        const newValue = backspace(this.inputElement!);
+        if (typeof newValue === 'string') {
+            this.updateCaretPosition();
+        }
+    }
+
+    /**
+     * Clears the whole input.
+     */
+    onClear() {
+        const previous = this.inputElement!.value;
+        this.inputElement!.value = '';
+        if (previous !== '') {
+            this.updateCaretPosition();
+        }
+    }
+
+    /**
+     * Moves caret 1 position to the left.
+     */
+    onLeft() {
+        const newPosition = !isRtl()
+            ? caretLeft(this.inputElement)
+            : caretRight(this.inputElement);
+        if (typeof newPosition === 'number') {
+            this.updateCaretPosition(newPosition);
+        }
+    }
+
+    /**
+     * Moves caret 1 position to the right.
+     */
+    onRight() {
+        const newPosition = !isRtl()
+            ? caretRight(this.inputElement)
+            : caretLeft(this.inputElement);
+        if (typeof newPosition === 'number') {
+            this.updateCaretPosition(newPosition);
+        }
+    }
+
+    /**
+     * General value key press.
+     * @param char pressed character to be added to the input.
+     */
+    onKey(char: string) {
+        const charToInsert = this.isShiftActive() ? char.toUpperCase() : char;
+        this.updateShiftStateAfterKeyPress();
+        const newValue = insertCharAtCaret(this.inputElement, charToInsert);
+        if (typeof newValue === 'string') {
+            this.updateCaretPosition();
+        }
+    }
+
+    /**
+     * Creates focus matrices from the layouts.
+     */
+    createFocusMatrices(matrices: Record<Layouts, KeyMatrixCell[][]>) {
+        forEach(Object.keys(matrices) as Layouts[], (matrixName) => {
+            this.focusMatrices[matrixName] = generateFocusMatrixFromStringMatrix(
+                this.keyRefs, matrices[matrixName],
+            );
+        });
+    }
+
+    async input(input: HTMLInputElement): Promise<boolean> {
+        const { initialFocus } = this.props;
+        this.inputElement = input;
+        setActiveElementAsFocusCandidate();
+        this.show();
+        this.matrix.current!.setIndex(initialFocus!);
+        this.matrix.current!.focus();
+        return new Promise((resolve) => {
+            this.inputResolver = resolve;
+        });
+    }
+
+    /**
+     * Finishes the inputting.
+     */
+    finishInput(cancelled = false) {
+        this.inputElement = null;
+        this.hide();
+        focusCandidate();
+        this.inputResolver!(cancelled);
+        this.inputResolver = null;
+    }
+
+    /**
+     * Triggers event to update caret position.
+     */
+    updateCaretPosition(newPosition: number = this.inputElement!.selectionStart!) {
+        this.triggerEvent('caretpositionchange', newPosition);
+    }
+
+    /**
+     * Shows the keyboard.
+     */
+    show() {
+        this.displayToggler.show();
+    }
+
+    /**
+     * Hides the keyboard and restores shift state to OFF.
+     */
+    hide() {
+        this.displayToggler.hide();
+        this.shiftState = 'off';
+        removeClass(this.keyboardWrapper, SHIFT_ACTIVE_CLASS);
+        removeClass(this.keyboardWrapper, CAPS_ACTIVE_CLASS);
+    }
+
+    /**
+     * Returns whether the shiftState is SHIFT or CAPS.
+     * @returns true for 'shift' or 'caps', false for 'off'
+     */
+    isShiftActive() {
+        return this.shiftState !== 'off';
+    }
+
+    /**
+     * Turns off shift if shiftState was SHIFT.
+     */
+    updateShiftStateAfterKeyPress() {
+        if (this.shiftState === 'shift') {
+            this.shiftState = 'off';
+            removeClass(this.keyboardWrapper, SHIFT_ACTIVE_CLASS);
+        }
+    }
+
+    render() {
+        const { className } = this.props;
+        return (
+            <div
+                ref={this.keyboardWrapper}
+                className={
+                    this.displayToggler.isHidden()
+                        ? `${className} ${DISPLAY_NONE}`
+                        : className
+                }
+                tabIndex={0}
+                onKeyDown={(event) => this.onKeyDown(event)}
+                dir="ltr"
+            />
+        );
+    }
+}