@24i/bigscreen-sdk 0.9.9-alpha.2147

package/packages/ime/src/IKeyboardEvent.ts

@@ -0,0 +1,7 @@
+import { EventMapType } from '@24i/bigscreen-sdk/events-manager';
+
+type CaretPositionChangeListener = (payload: number | null) => void;
+
+export interface IKeyboardEvents extends EventMapType {
+    'caretpositionchange': CaretPositionChangeListener,
+}

package/packages/ime/src/ImeManager.ts

@@ -0,0 +1,33 @@
+import { SystemKeyboard } from './SystemKeyboard';
+import { IKeyboard } from './IKeyboard';
+import { IKeyboardEvents } from './IKeyboardEvent';
+
+class ImeManager {
+    keyboard: IKeyboard = new SystemKeyboard();
+
+    setKeyboard(keyboard: IKeyboard) {
+        this.keyboard = keyboard;
+    }
+
+    clearKeyboard() {
+        this.keyboard = new SystemKeyboard();
+    }
+
+    async input(input: HTMLInputElement): Promise<any> {
+        return this.keyboard.input(input);
+    }
+
+    addEventListener <K extends keyof IKeyboardEvents>(
+        eventName: K, listener: IKeyboardEvents[K],
+    ) {
+        this.keyboard.addEventListener(eventName, listener);
+    }
+
+    removeEventListener <K extends keyof IKeyboardEvents>(
+        eventName: K, listener: IKeyboardEvents[K],
+    ) {
+        this.keyboard.removeEventListener(eventName, listener);
+    }
+}
+
+export const ime = new ImeManager();

package/packages/ime/src/SystemKeyboard/SystemKeyboard.ts

@@ -0,0 +1,33 @@
+import { ENTER, ESC } from '@24i/bigscreen-sdk/device/keymap';
+import { stopEvent } from '@24i/bigscreen-sdk/utils/stopEvent';
+import { SystemKeyboardBase } from './SystemKeyboardBase';
+
+export class SystemKeyboard extends SystemKeyboardBase {
+    prepareInput() {
+        if (!this.inputElement) return;
+        this.inputElement.addEventListener('keyup', this.onKeyUp);
+        this.inputElement.addEventListener('blur', this.onBlur);
+        this.inputElement.focus();
+    }
+
+    onKeyUp = (event: KeyboardEvent) => {
+        if (ESC.is(event) || ENTER.is(event)) {
+            stopEvent(event);
+            this.stopInput();
+        } else {
+            this.updateCaretPosition();
+        }
+    };
+
+    onBlur = (event: Event) => {
+        stopEvent(event);
+        this.stopInput();
+    };
+
+    stopInput() {
+        if (!this.inputElement) return;
+        this.inputElement.removeEventListener('keyup', this.onKeyUp);
+        this.inputElement.removeEventListener('blur', this.onBlur);
+        super.stopInput();
+    }
+}

package/packages/ime/src/SystemKeyboard/SystemKeyboardBase.ts

@@ -0,0 +1,98 @@
+import { EventsManager } from '@24i/bigscreen-sdk/events-manager';
+import { stopEvent } from '@24i/bigscreen-sdk/utils/stopEvent';
+import {
+    setActiveElementAsFocusCandidate, focusCandidate,
+} from '@24i/bigscreen-sdk/focus';
+import { IKeyboard } from '../IKeyboard';
+import { IKeyboardEvents } from '../IKeyboardEvent';
+
+export abstract class SystemKeyboardBase implements IKeyboard {
+    events: EventsManager<IKeyboardEvents> = new EventsManager();
+
+    addEventListener = this.events.addEventListener;
+
+    removeEventListener = this.events.removeEventListener;
+
+    triggerEvent = this.events.triggerEvent;
+
+    resolver: ((value?: void | PromiseLike<void>) => void) | null = null;
+
+    inputElement: HTMLInputElement | null = null;
+
+    async input(input: HTMLInputElement): Promise<void> {
+        this.inputElement = input;
+        setActiveElementAsFocusCandidate();
+        this.prepareInput();
+        return new Promise((resolve) => {
+            this.resolver = resolve;
+        });
+    }
+
+    abstract prepareInput(): void;
+
+    onLeft = (event: KeyboardEvent) => {
+        stopEvent(event);
+        const inputElement = this.inputElement!;
+        const selectionStart = inputElement.selectionStart!;
+        if (selectionStart > 0) {
+            const newPosition = selectionStart - 1;
+            inputElement.selectionStart = newPosition;
+            inputElement.selectionEnd = newPosition;
+            this.updateCaretPosition();
+        }
+    };
+
+    onRight = (event: KeyboardEvent) => {
+        stopEvent(event);
+        const inputElement = this.inputElement!;
+        const { value } = inputElement;
+        const selectionStart = inputElement.selectionStart!;
+        if (selectionStart < value.length) {
+            const newPosition = selectionStart + 1;
+            inputElement.selectionStart = newPosition;
+            inputElement.selectionEnd = newPosition;
+            this.updateCaretPosition();
+        }
+    };
+
+    onUp = (event: KeyboardEvent) => {
+        stopEvent(event);
+        const inputElement = this.inputElement!;
+        inputElement.selectionStart = 0;
+        inputElement.selectionEnd = 0;
+        this.updateCaretPosition();
+    };
+
+    onDown = (event: KeyboardEvent) => {
+        stopEvent(event);
+        const inputElement = this.inputElement!;
+        const { value } = inputElement;
+        const newPosition = value.length;
+        inputElement.selectionStart = newPosition;
+        inputElement.selectionEnd = newPosition;
+        this.updateCaretPosition();
+    };
+
+    stopInput() {
+        focusCandidate();
+        this.inputElement = null;
+        this.resolveInputPromise();
+    }
+
+    getCaretPosition(): number | null {
+        if (!this.inputElement) return null;
+        return this.inputElement.selectionStart;
+    }
+
+    updateCaretPosition() {
+        const position = this.getCaretPosition();
+        this.triggerEvent('caretpositionchange', position);
+    }
+
+    resolveInputPromise() {
+        if (this.resolver) {
+            this.resolver();
+            this.resolver = null;
+        }
+    }
+}

package/packages/ime/src/SystemKeyboard/TizenSystemKeyboard.ts

@@ -0,0 +1,66 @@
+import { switchByKey } from '@24i/bigscreen-sdk/device/keymap';
+import { stopEvent } from '@24i/bigscreen-sdk/utils/stopEvent';
+import { runAsync } from '@24i/bigscreen-sdk/utils/timers';
+import { SystemKeyboardBase } from './SystemKeyboardBase';
+
+const IME_DONE = 65376;
+const IME_CANCEL = 65385;
+
+export class SystemKeyboard extends SystemKeyboardBase {
+    previousValue = '';
+
+    prepareInput() {
+        const inputElement = this.inputElement!;
+        const { value } = inputElement;
+        this.previousValue = value;
+        inputElement.addEventListener('keydown', this.onKeyDown);
+        inputElement.addEventListener('keyup', this.onKeyUp);
+        inputElement.addEventListener('change', this.onChange);
+        inputElement.addEventListener('blur', this.onBlur);
+        inputElement.focus();
+        inputElement.selectionStart = value.length;
+        inputElement.selectionEnd = value.length;
+        this.updateCaretPosition();
+    }
+
+    onKeyDown = (event: KeyboardEvent) => {
+        const { keyCode } = event;
+        if (keyCode === IME_DONE || keyCode === IME_CANCEL) {
+            stopEvent(event);
+            if (keyCode === IME_CANCEL) {
+                this.inputElement!.value = this.previousValue;
+            }
+            runAsync(() => this.stopInput()); // Let keyup and change finish first
+            return;
+        }
+        switchByKey(event, {
+            LEFT: this.onLeft,
+            RIGHT: this.onRight,
+            UP: this.onUp,
+            DOWN: this.onDown,
+        });
+        runAsync(() => this.updateCaretPosition()); // for DELETE ALL
+    };
+
+    onBlur = (event: Event) => {
+        stopEvent(event);
+        this.stopInput();
+    };
+
+    onChange = () => {
+        this.updateCaretPosition();
+    };
+
+    onKeyUp = () => {
+        this.updateCaretPosition();
+    };
+
+    stopInput() {
+        if (!this.inputElement) return;
+        this.inputElement.removeEventListener('keydown', this.onKeyDown);
+        this.inputElement.removeEventListener('keyup', this.onKeyUp);
+        this.inputElement.removeEventListener('change', this.onChange);
+        this.inputElement.removeEventListener('blur', this.onBlur);
+        super.stopInput();
+    }
+}

package/packages/ime/src/SystemKeyboard/WebosSystemKeyboard.ts

@@ -0,0 +1,74 @@
+import { switchByKey } from '@24i/bigscreen-sdk/device/keymap';
+import { stopEvent } from '@24i/bigscreen-sdk/utils/stopEvent';
+import { SystemKeyboardBase } from './SystemKeyboardBase';
+
+type KeyboardStateChangeEvent = Event & {
+    detail: { visibility: boolean },
+};
+
+declare global {
+    interface DocumentEventMap {
+        'keyboardStateChange': KeyboardStateChangeEvent,
+    }
+}
+
+export class SystemKeyboard extends SystemKeyboardBase {
+    interval: number | null = null;
+
+    prepareInput() {
+        const inputElement = this.inputElement!;
+        const { value } = inputElement;
+        window.document.addEventListener('keyboardStateChange', this.onKeyboardStateChange);
+        inputElement.addEventListener('change', this.onChange);
+        inputElement.addEventListener('input', this.onChange);
+        inputElement.addEventListener('keydown', this.onKeyDown);
+        inputElement.addEventListener('blur', this.onBlur);
+        inputElement.focus();
+        inputElement.selectionStart = value.length;
+        inputElement.selectionEnd = value.length;
+        this.updateCaretPosition();
+    }
+
+    onKeyboardStateChange = (event: KeyboardStateChangeEvent) => {
+        if (!event.detail.visibility) {
+            this.stopInput();
+        }
+    };
+
+    onChange = () => {
+        this.updateCaretPosition();
+    };
+
+    onKeyDown = (event: KeyboardEvent) => {
+        switchByKey(event, {
+            ENTER: this.onEnter,
+            LEFT: this.onLeft,
+            RIGHT: this.onRight,
+        });
+    };
+
+    onEnter = (event: KeyboardEvent) => {
+        stopEvent(event);
+        this.onChange();
+        this.stopInput();
+    };
+
+    onBlur = (event: Event) => {
+        stopEvent(event);
+        this.stopInput();
+    };
+
+    stopInput() {
+        if (this.interval) {
+            clearInterval(this.interval);
+            this.interval = null;
+        }
+        if (!this.inputElement) return;
+        window.document.removeEventListener('keyboardStateChange', this.onKeyboardStateChange);
+        this.inputElement.removeEventListener('change', this.onChange);
+        this.inputElement.removeEventListener('input', this.onChange);
+        this.inputElement.removeEventListener('keydown', this.onKeyDown);
+        this.inputElement.removeEventListener('blur', this.onBlur);
+        super.stopInput();
+    }
+}

package/packages/ime/src/SystemKeyboard/index.tizen.tv.ts

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

package/packages/ime/src/SystemKeyboard/index.ts

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

package/packages/ime/src/SystemKeyboard/index.webos.tv.ts

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

package/packages/ime/src/index.ts

@@ -0,0 +1,3 @@
+export { ime } from './ImeManager';
+export type { IKeyboard } from './IKeyboard';
+export type { IKeyboardEvents } from './IKeyboardEvent';

package/packages/input/README.md

@@ -0,0 +1,62 @@
+---
+id: README
+title: Input
+hide_title: true
+sidebar_label: Input
+---
+
+# Input
+Input package contains a basic Input. This input supports text and password.
+It is connected through ime package to either system or virtual keyboard.
+
+## Props
+- `type` - string `'text'` or `'password'`
+- `value` - optional string with initial value (default: `''`)
+- `placeholder` - optional string or jsx to display if no value is shown (default: `''`)
+- `passwordChar` - optional string which replaces password characters (default: `'●'`)
+- `shouldHandleOverflow` - optional flag which enables overflow handling by moving text to the left when caret should get out of its container (default: `false`)
+- `maxLength` - optional number to limit value length (default: `Infinity`)
+- `onChange` - optional callback with new value `(newValue: string) => void`
+- `onFocus` - optional callback which is called when input gets focus
+- `onBlur` - optional callback which is called when input loses focus
+- `onFinish` - optional callback which is called when input is finished, its only argument is a boolean to determine if input was cancelled or not `(wasCancelled: boolean) => void`
+
+## Usage
+```tsx
+<Input
+    type="text"
+    ref={this.usernameInput}
+    placeholder="Username"
+    onChange={this.onUsernameChange}
+/>
+```
+
+## Render
+Input renders this html and by default is not styled.
+The reason for no styling is to limit unnecessary CSS code that would be overridden anyway by project styling.
+```tsx
+<div
+    className="input"
+    tabIndex="0"
+    onKeyDown={this.onKeyDown}
+    onClick={this.onKeyDown}
+>
+    <div className="native-input-wrap">
+        <input
+            value={value}
+            type={type}
+            ref={this.nativeInput}
+        />
+    </div>
+    <div className="input-field">
+        <div ref={this.placeholder} className="placeholder">{placeholder}</div>
+        <div ref={this.textPreCaret} className="text" />
+        <div ref={this.caret} className="caret" />
+        <div ref={this.textPostCaret} className="text" />
+    </div>
+</div>
+```
+
+`.native-input-wrap` is set to `display: none`. This is the native input used on the background.
+
+`.input-field` is a custom component that should look like input field with possibility of custom styling.

package/packages/input/src/Input.scss

@@ -0,0 +1,5 @@
+.input {
+    .native-input-wrap {
+        display: none;
+    }
+}

package/packages/input/src/Input.tsx

@@ -0,0 +1,216 @@
+import { createRef, Component, setText, DeclareProps } from '@24i/bigscreen-sdk/jsx';
+import { Interactable } from '@24i/bigscreen-sdk/interactable';
+import { IFocusable } from '@24i/bigscreen-sdk/focus';
+import { ime } from '@24i/bigscreen-sdk/ime';
+import { noop } from '@24i/bigscreen-sdk/utils/noop';
+import { device, isClickOrEnter } from '@24i/bigscreen-sdk/device';
+import { stopEvent } from '@24i/bigscreen-sdk/utils/stopEvent';
+import { addClass } from '@24i/bigscreen-sdk/utils/addClass';
+import { removeClass } from '@24i/bigscreen-sdk/utils/removeClass';
+import { handleOverflow } from './handleOverflow';
+import './Input.scss';
+
+type Props = {
+    value?: string,
+    type: 'text' | 'password',
+    placeholder?: string | JSX.Element,
+    passwordChar?: string,
+    /** Moves text to the left (with negative margin-left) when caret overflows */
+    shouldHandleOverflow?: boolean,
+    onChange?: (newValue: string) => void,
+    onFocus?: () => void,
+    onBlur?: () => void,
+    // eslint-disable-next-line react/no-unused-prop-types
+    maxLength?: number,
+    // eslint-disable-next-line react/require-default-props
+    onFinish?: (wasCancelled?: boolean) => void,
+};
+
+const ACTIVE = 'active';
+const HIDDEN = 'hidden';
+
+const NBSP = '\u00a0';
+
+export class Input extends Component<Props> implements IFocusable {
+    wrap = createRef<HTMLDivElement>();
+
+    nativeInput = createRef<HTMLInputElement>();
+
+    placeholder = createRef<HTMLDivElement>();
+
+    textPreCaret = createRef<HTMLDivElement>();
+
+    textPostCaret = createRef<HTMLDivElement>();
+
+    caret = createRef<HTMLDivElement>();
+
+    isInputting = false;
+
+    lastValue: string;
+
+    isPlaceholderVisible: boolean;
+
+    static defaultProps = {
+        value: '',
+        placeholder: '',
+        passwordChar: '●',
+        maxLength: Infinity,
+        shouldHandleOverflow: false,
+        onChange: noop,
+        onFocus: noop,
+        onBlur: noop,
+    };
+
+    declare props: DeclareProps<Props, typeof Input.defaultProps>;
+
+    constructor(props: Props) {
+        super(props);
+        const { value } = this.props;
+        this.lastValue = value;
+        this.isPlaceholderVisible = value.length === 0;
+    }
+
+    getType() {
+        return this.nativeInput.current?.type;
+    }
+
+    getValue() {
+        return this.nativeInput.current!.value;
+    }
+
+    onKeyDown = (event: KeyboardEvent | MouseEvent) => {
+        if (!this.isInputting && isClickOrEnter(event)) {
+            stopEvent(event);
+            this.processInput();
+        }
+    };
+
+    onCaretPositionChange = (position: number | null) => {
+        if (position === null) return;
+        const { shouldHandleOverflow } = this.props;
+        const value = this.getValue();
+        const preCaret = value.substring(0, position);
+        const postCaret = value.substring(position);
+        setText(this.textPreCaret, this.filterText(preCaret));
+        setText(this.textPostCaret, this.filterText(postCaret));
+        if (shouldHandleOverflow) {
+            handleOverflow(this.wrap.current, this.caret.current, this.textPreCaret.current);
+        }
+        if (this.lastValue !== value) {
+            const { onChange } = this.props;
+            this.lastValue = value;
+            onChange(value);
+            if (value.length === 0) {
+                this.showPlaceholder();
+            } else {
+                this.hidePlaceholder();
+            }
+        }
+    };
+
+    setValue(value: string) {
+        this.nativeInput.current!.value = value;
+    }
+
+    setType(type: Props['type']) {
+        if (this.getType() === type) return;
+        const value = this.getValue();
+        this.nativeInput.current!.type = type;
+        setText(this.textPreCaret, this.filterText(value));
+    }
+
+    /**
+     * Can be used to manually start input
+     */
+    async processInput() {
+        this.startInput();
+        const cancelled = await ime.input(this.nativeInput.current!);
+        this.endInput(cancelled);
+    }
+
+    startInput() {
+        this.isInputting = true;
+        ime.addEventListener('caretpositionchange', this.onCaretPositionChange);
+        addClass(this.wrap, ACTIVE);
+        const nativeInput = this.nativeInput.current!;
+        const caretPosition = nativeInput.value.length;
+        nativeInput.selectionStart = caretPosition;
+        nativeInput.selectionEnd = caretPosition;
+        this.onCaretPositionChange(caretPosition);
+    }
+
+    endInput(wasCancelled = false) {
+        const { onFinish } = this.props;
+        ime.removeEventListener('caretpositionchange', this.onCaretPositionChange);
+        this.isInputting = false;
+        removeClass(this.wrap, ACTIVE);
+        if (typeof onFinish === 'function') {
+            onFinish(wasCancelled);
+        }
+    }
+
+    clearInput() {
+        this.setValue('');
+        this.onCaretPositionChange(0);
+    }
+
+    focus(options?: FocusOptions) {
+        this.wrap.current!.focus(options);
+    }
+
+    showPlaceholder() {
+        if (this.isPlaceholderVisible) return;
+        this.isPlaceholderVisible = true;
+        removeClass(this.placeholder, HIDDEN);
+    }
+
+    hidePlaceholder() {
+        if (!this.isPlaceholderVisible) return;
+        this.isPlaceholderVisible = false;
+        addClass(this.placeholder, HIDDEN);
+    }
+
+    filterText(text: string): string {
+        // eslint-disable-next-line react/destructuring-assignment
+        const type = this.getType() || this.props.type;
+        if (type === 'password') {
+            const { passwordChar } = this.props;
+            return text.replace(/./g, passwordChar);
+        }
+        return text.replace(/ /g, NBSP);
+    }
+
+    render() {
+        const { value, type, placeholder, onFocus, onBlur } = this.props;
+        return (
+            <Interactable
+                className="input"
+                ref={this.wrap}
+                onPress={this.onKeyDown}
+                onFocus={onFocus}
+                onBlur={onBlur}
+            >
+                <div className={`native-input-wrap ${device.getDeviceClass()}`}>
+                    <input
+                        value={value}
+                        type={type}
+                        ref={this.nativeInput}
+                    />
+                </div>
+                <div className={`input-field ${device.getDeviceClass()}`}>
+                    <div
+                        ref={this.placeholder}
+                        className={`placeholder ${this.isPlaceholderVisible ? '' : HIDDEN}`}
+                    >
+                        {placeholder}
+                    </div>
+                    <div ref={this.textPreCaret} className="text">
+                        {this.filterText(value)}
+                    </div>
+                    <div ref={this.caret} className="caret" />
+                    <div ref={this.textPostCaret} className="text" />
+                </div>
+            </Interactable>
+        );
+    }
+}

package/packages/input/src/handleOverflow.ts

@@ -0,0 +1,16 @@
+export const handleOverflow = (
+    wrap: HTMLDivElement | null,
+    caretElement: HTMLDivElement | null,
+    textPreCaret: HTMLDivElement | null,
+) => {
+    if (!wrap || !caretElement || !textPreCaret) return;
+    const wrapWidth = wrap.getBoundingClientRect().width;
+    const caretWidth = caretElement.getBoundingClientRect().width;
+    const preCaretWidth = textPreCaret.getBoundingClientRect().width + caretWidth;
+    if (preCaretWidth >= wrapWidth) {
+        const offset = wrapWidth - preCaretWidth;
+        textPreCaret.style.marginLeft = `${offset}px`;
+    } else if (textPreCaret.style.marginLeft !== '0px') {
+        textPreCaret.style.marginLeft = '0px';
+    }
+};

package/packages/input/src/index.ts

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

package/packages/interactable/README.md

@@ -0,0 +1,37 @@
+---
+id: README
+title: Interactable
+hide_title: true
+sidebar_label: Interactable
+---
+
+# Interactable
+Interactable component is useful for creating interactive components such as buttons, packshots, menu items, etc.
+It provides common functionality for you.
+
+## Props
+- `onPress` - called for onClick and onKeyDown
+- `ref` is forwarded to underlying `div`
+- other `div` props
+
+## Provided functionality
+- unified onKeyDown and onClick handling with added `tabIndex={0}`
+- only passes enter and left mouse button events to onPress
+- auto focus with mouse
+- as slim as possible
+
+## Usage
+Use nearly as you would handle any other div. 
+Only exception instead of `onKeyDown` and `onClick` you use `onPress`, you don't need to check for key or mouse button (only enter and left click trigger `onPress`) and you do not need to add `tabIndex`
+```tsx
+<Interactable className="btn btn-primary" onPress={this.playVideo}>
+    Play video
+</Interactable>
+```
+renders
+```html
+<!-- this.playVideo is listening for onClick and onKeyDown -->
+<div class="btn btn-primary" tabindex="0">
+    Play video
+</div>
+```