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

package/packages/picker/src/ModalPicker/PickerItem.tsx

@@ -0,0 +1,86 @@
+import { Children, Component, createRef, setText } from '@24i/bigscreen-sdk/jsx';
+import { Item } from '@24i/bigscreen-sdk/list/interface';
+import { Interactable } from '@24i/bigscreen-sdk/interactable';
+import { getDisplayToggler } from '@24i/bigscreen-sdk/utils/displayToggler';
+import { ICheckbox, ICheckboxComponent, ItemData, PickerValue } from '../types';
+
+type Props<T> = {
+    picker: PickerValue<T>,
+    label: string,
+    value: T,
+    setValue: (value: T) => void,
+    checked: boolean,
+    Checkbox: ICheckboxComponent<any>,
+    checkmark?: Children,
+};
+
+export class PickerItem<T> extends Component<Props<T>> implements Item<ItemData<T>> {
+    button = createRef<HTMLDivElement>();
+
+    checkbox = createRef<ICheckbox<any>>();
+
+    label = createRef<HTMLSpanElement>();
+
+    value: T;
+
+    display = getDisplayToggler(this.button);
+
+    constructor(props: Props<T>) {
+        super(props);
+        const { value } = this.props;
+        this.value = value;
+    }
+
+    onPress = () => {
+        const { setValue } = this.props;
+        setValue(this.value);
+    };
+
+    focus(options?: FocusOptions) {
+        this.button.current!.focus(options);
+    }
+
+    show() {
+        this.display.show();
+    }
+
+    hide() {
+        this.display.hide();
+    }
+
+    check() {
+        this.checkbox.current!.check();
+    }
+
+    uncheck() {
+        this.checkbox.current!.uncheck();
+    }
+
+    updateData({ label, value }: ItemData<T>) {
+        if (value !== this.value) {
+            this.value = value;
+            setText(this.label, label);
+            const { picker } = this.props;
+            if (this.value === picker.value) this.check();
+            else this.uncheck();
+        }
+    }
+
+    hasDom(dom: HTMLElement) {
+        return dom === this.button.current;
+    }
+
+    render() {
+        const { label, checked, Checkbox, checkmark } = this.props;
+        return (
+            <Interactable
+                ref={this.button}
+                className="picker-item"
+                onPress={this.onPress}
+            >
+                <Checkbox checked={checked} checkmark={checkmark} ref={this.checkbox} />
+                <span className="label" ref={this.label} dir="auto">{label}</span>
+            </Interactable>
+        );
+    }
+}

package/packages/picker/src/ModalPicker/PickerModal.tsx

@@ -0,0 +1,98 @@
+import {
+    Component, createRef, Reference, Children, DeclareProps,
+} from '@24i/bigscreen-sdk/jsx';
+import { device } from '@24i/bigscreen-sdk/device';
+import { BACK } from '@24i/bigscreen-sdk/device/keymap';
+import { CenteredList } from '@24i/bigscreen-sdk/list/Centered';
+import { IModal } from '@24i/bigscreen-sdk/modal-service';
+import { stopEvent } from '@24i/bigscreen-sdk/utils/stopEvent';
+import { PickerItem } from './PickerItem';
+import { Data, ICheckboxComponent, ItemData, PickerValue } from '../types';
+
+type Props<T> = {
+    data: Data<T>,
+    picker: PickerValue<T>,
+    selectedValue: T,
+    visibleItems: number,
+    scrollStep: number,
+    onValueSelected: (value: T) => void,
+    onClose: () => void,
+    Checkbox: ICheckboxComponent<any>,
+    checkmark?: Children,
+    className?: string,
+};
+
+export class PickerModal<T> extends Component<Props<T>> implements IModal {
+    list = createRef<CenteredList<PickerItem<T>, ItemData<T>>>();
+
+    items: { ref: Reference<PickerItem<T>>, value: T }[] = [];
+
+    static defaultProps = {
+        className: '',
+    };
+
+    declare props: DeclareProps<Props<T>, typeof PickerModal.defaultProps>;
+
+    private getSelectedIndex() {
+        const { data, picker } = this.props;
+        const index = data.findIndex(({ value }) => value === picker.value);
+        return index !== -1 ? index : 0;
+    }
+
+    private readonly setValue = (value: T) => {
+        const { onValueSelected } = this.props;
+        this.items.forEach(({ ref, value: itemValue }) => {
+            if (itemValue === value) ref.current!.check();
+            else ref.current!.uncheck();
+        });
+        onValueSelected(value);
+    };
+
+    onKeyDown = (e: KeyboardEvent) => {
+        if (BACK.is(e)) {
+            stopEvent(e);
+            const { onClose } = this.props;
+            onClose();
+        } else if (device.isDirectionalArrow(e)) {
+            stopEvent(e); // No leaking out. Might result in something focusing below the modal
+        }
+    };
+
+    focus(options?: FocusOptions) {
+        this.list.current!.focus(options);
+    }
+
+    render() {
+        const {
+            data, scrollStep, visibleItems, Checkbox, picker, checkmark, className,
+        } = this.props;
+        const initialFocusIndex = this.getSelectedIndex();
+        return (
+            <div onKeyDown={this.onKeyDown} tabIndex={0}>
+                <CenteredList
+                    ref={this.list}
+                    className={`picker-modal ${className}`}
+                    data={data}
+                    renderItem={({ label, value }, index, ref: Reference<PickerItem<T>>) => {
+                        this.items.push({ ref, value });
+                        return (
+                            <PickerItem
+                                picker={picker}
+                                ref={ref}
+                                label={label}
+                                value={value}
+                                setValue={this.setValue}
+                                checked={index === initialFocusIndex}
+                                Checkbox={Checkbox}
+                                checkmark={checkmark}
+                            />
+                        );
+                    }}
+                    initialFocusIndex={initialFocusIndex}
+                    visibleItems={visibleItems}
+                    scrollStep={scrollStep}
+                />
+            </div>
+        );
+    }
+}

package/packages/picker/src/ModalPicker/index.ts

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

package/packages/picker/src/ModalPicker/modalPicker.tsx

@@ -0,0 +1,48 @@
+import { Children, Reference } from '@24i/bigscreen-sdk/jsx';
+import { ModalService } from '@24i/bigscreen-sdk/modal-service';
+import { PickerModal } from './PickerModal';
+import { Data, ICheckboxComponent, PickerValue } from '../types';
+
+type ModalPickerConfig<T> = {
+    data: Data<T>,
+    selectedValue: T,
+    modalService: Reference<ModalService>,
+    visibleItems: number,
+    scrollStep: number,
+    Checkbox: ICheckboxComponent<any>,
+    checkmark?: Children,
+    modalClassName?: string,
+};
+
+export async function modalPicker<T>({
+    data, selectedValue, modalService, visibleItems,
+    scrollStep, Checkbox, checkmark, modalClassName,
+}: ModalPickerConfig<T>, picker: PickerValue<T>) {
+    return new Promise<T>((resolve, reject) => {
+        const onValueSelected = (value: T) => {
+            modalService.current!.close();
+            resolve(value);
+        };
+
+        const onClose = () => {
+            modalService.current!.close();
+            reject();
+        };
+
+        modalService.current!.open<PickerModal<T>>((ref) => (
+            <PickerModal
+                ref={ref}
+                picker={picker}
+                data={data}
+                selectedValue={selectedValue}
+                visibleItems={visibleItems}
+                scrollStep={scrollStep}
+                onValueSelected={onValueSelected}
+                onClose={onClose}
+                Checkbox={Checkbox}
+                checkmark={checkmark}
+                className={modalClassName}
+            />
+        ));
+    });
+}

package/packages/picker/src/Picker.tsx

@@ -0,0 +1,127 @@
+import {
+    Children,
+    Component,
+    createRef,
+    DeclareProps,
+    Reference,
+    setText,
+} from '@24i/bigscreen-sdk/jsx';
+import { IFocusable } from '@24i/bigscreen-sdk/focus';
+import { Interactable } from '@24i/bigscreen-sdk/interactable';
+import { ModalService } from '@24i/bigscreen-sdk/modal-service';
+import { find, findIndex } from '@24i/bigscreen-sdk/perf-utils/array';
+import { modalPicker } from './ModalPicker';
+import { Checkbox } from './ModalPicker/Checkbox';
+import { Data, ICheckboxComponent, PickerValue } from './types';
+
+export type PickerMode = 'modal';
+
+export type Props<T> = {
+    selectedValue: T,
+    data: Data<T>,
+    visibleItems: number,
+    scrollStep: number,
+    onValueChange: (currentValue: T) => void,
+    modalService: Reference<ModalService>,
+    mode?: PickerMode,
+    className?: string,
+    modalClassName?: string,
+    Checkbox?: ICheckboxComponent<any>,
+    checkmark?: Children,
+    render?: (
+        buttonRef: Reference<HTMLElement>,
+        textRef: Reference<HTMLElement>,
+        openCallback: () => void,
+        text?: string,
+    ) => JSX.Element,
+};
+
+export class Picker<T> extends Component<Props<T>> implements IFocusable, PickerValue<T> {
+    static MODAL = 'modal';
+
+    buttonRef = createRef<HTMLElement>();
+
+    textRef = createRef<HTMLElement>();
+
+    value: T;
+
+    static defaultProps = {
+        Checkbox,
+        mode: 'modal',
+        className: '',
+    };
+
+    declare props: DeclareProps<Props<T>, typeof Picker.defaultProps>;
+
+    constructor(props: Props<T>) {
+        super(props);
+        const { selectedValue } = this.props;
+        this.value = selectedValue;
+    }
+
+    private getSelectedLabel() {
+        const { data } = this.props;
+        const selectedItem = find(data, ({ value }) => value === this.value);
+        return selectedItem?.label || '';
+    }
+
+    setText(text: string) {
+        const textElement = this.textRef.current ?? this.buttonRef.current!;
+        setText(textElement, text);
+    }
+
+    setValue(newValue: T) {
+        const { data } = this.props;
+        const indexInData = findIndex(data, ({ value }) => value === newValue);
+        if (indexInData !== -1) {
+            this.value = newValue;
+            this.setText(data[indexInData].label);
+        }
+    }
+
+    open = () => {
+        const { mode } = this.props;
+        if (mode === 'modal') this.processModalPicker();
+    };
+
+    private async processModalPicker() {
+        const { onValueChange, ...restProps } = this.props;
+        let newValue: T;
+        try {
+            newValue = await modalPicker(restProps, this);
+        } catch (e) {
+            // rejects if nothing selected and closed with BACK
+            this.focus();
+            return;
+        }
+        if (newValue !== this.value) {
+            this.value = newValue;
+            const label = this.getSelectedLabel();
+            this.setText(label);
+            onValueChange(newValue);
+        }
+        this.focus();
+    }
+
+    focus(options?: FocusOptions) {
+        this.buttonRef.current!.focus(options);
+    }
+
+    render() {
+        const { className, render } = this.props;
+        const label = this.getSelectedLabel();
+        if (typeof render === 'function') {
+            return render(this.buttonRef, this.textRef, this.open, label);
+        }
+        return (
+            <Interactable
+                ref={this.buttonRef}
+                dir="auto"
+                className={`picker ${className}`}
+                onPress={this.open}
+            >
+                {label}
+            </Interactable>
+        );
+    }
+}

package/packages/picker/src/index.ts

@@ -0,0 +1,3 @@
+export { Picker } from './Picker';
+export type { PickerMode } from './Picker';
+export type { ICheckbox, Data, ItemData } from './types';

package/packages/picker/src/types.ts

@@ -0,0 +1,25 @@
+import { Component } from '@24i/bigscreen-sdk/jsx';
+
+export type ItemData<T> = {
+    label: string,
+    value: T,
+};
+
+export type Data<T> = ItemData<T>[];
+
+type CheckboxProps = {
+    checked: boolean,
+};
+
+export interface PickerValue<T> {
+    value: T,
+}
+
+export interface ICheckbox<P extends CheckboxProps> extends Component<P> {
+    check: () => void,
+    uncheck: () => void,
+}
+
+export interface ICheckboxComponent<P extends CheckboxProps> {
+    new (props: P): ICheckbox<P>,
+}

package/packages/pin-input/README.md

@@ -0,0 +1,55 @@
+---
+id: README
+title: Pin Input
+hide_title: true
+sidebar_label: Pin Input
+---
+
+# Pin Input
+
+Component used for inputting short numeric PIN codes. It is connected through
+ime package to either system or virtual keyboard.
+
+## Props
+
+- `digits` - number of digits
+- `className` - optional string to be passed to DOM element (default: `''`)
+- `replaceChar` - optional string which replaces pin digits (default: `'●'`)
+- `onFocus` - optional callback which is called when input gets focus (default: `noop`)
+- `onBlur` - optional callback which is called when input loses focus (default: `noop`)
+- `onValueChanged` - optional callback, provides the current PIN value (default: `noop`)
+- `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` (default: `noop`)
+
+## Useful class methods
+
+- `getValue` - returns the current value of PIN
+- `clearPin` - clears the current PIN value and resets all digits
+
+## Usage
+
+```tsx
+<PinInput
+    ref={this.pinInputRef}
+    digits={4}
+    className="my-pin"
+/>
+```
+
+This JSX will output the following HTML:
+
+```html
+<div className="pin-input my-pin" tabIndex="0">
+    <div class="native-input-wrap">
+        <input type="password">
+    </div>
+    <div class="pin-input-digits">
+        <div class="pin-input-digit"></div>
+        <div class="pin-input-digit"></div>
+        <div class="pin-input-digit"></div>
+        <div class="pin-input-digit"></div>
+    </div>
+</div>
+```
+
+`.native-input-wrap` is set to `display: none`. This is the native input used on the background.

package/packages/pin-input/src/PinInput.scss

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

package/packages/pin-input/src/PinInput.tsx

@@ -0,0 +1,169 @@
+import {
+    Component, Reference,
+    DeclareProps, createRef, setText,
+} from '@24i/bigscreen-sdk/jsx';
+import { addClass, removeClass, stopEvent, noop, nTimes } from '@24i/bigscreen-sdk/utils';
+import { Interactable } from '@24i/bigscreen-sdk/interactable';
+import { isClickOrEnter } from '@24i/bigscreen-sdk/device';
+import { IFocusable } from '@24i/bigscreen-sdk/focus';
+import { ime } from '@24i/bigscreen-sdk/ime';
+import './PinInput.scss';
+
+type Props = {
+    digits: number;
+    className?: string;
+    replaceChar?: string;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    onValueChanged?: (value: string) => void;
+    onFinish?: (wasCancelled?: boolean) => void;
+};
+
+const ACTIVE_CLASS = 'active';
+const ACTIVE_DIGIT_CLASS = 'active-digit';
+
+export class PinInput extends Component<Props> implements IFocusable {
+    domRef = createRef<HTMLDivElement>();
+
+    nativeInput = createRef<HTMLInputElement>();
+
+    digitRefs: Reference<HTMLDivElement>[] = [];
+
+    lastPosition = NaN;
+
+    lastValue = '';
+
+    isInputting = false;
+
+    static defaultProps = {
+        className: '',
+        replaceChar: '●',
+        onFocus: noop,
+        onBlur: noop,
+        onValueChanged: noop,
+        onFinish: noop,
+    };
+
+    declare props: DeclareProps<Props, typeof PinInput.defaultProps>;
+
+    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 { digits } = this.props;
+        let currentValue = this.getValue();
+        if (position < digits && this.lastPosition !== position) {
+            const lastDigitRef = this.digitRefs[this.lastPosition];
+            if (lastDigitRef) removeClass(lastDigitRef, ACTIVE_DIGIT_CLASS);
+            addClass(this.digitRefs[position], ACTIVE_DIGIT_CLASS);
+            this.lastPosition = position;
+        } else if (position > digits) {
+            const cutMaxValue = currentValue.substring(0, digits - 1);
+            const newLastChar = currentValue.charAt(digits);
+            currentValue = cutMaxValue + newLastChar;
+            this.nativeInput.current!.value = currentValue;
+        }
+        if (this.lastValue !== currentValue) {
+            const { onValueChanged } = this.props;
+            this.lastValue = currentValue;
+            onValueChanged(currentValue);
+            this.updateDigits();
+        }
+    };
+
+    focus(options?: FocusOptions) {
+        this.domRef.current!.focus(options);
+    }
+
+    /**
+     * 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);
+        const nativeInput = this.nativeInput.current!;
+        const caretPosition = nativeInput.value.length;
+        nativeInput.selectionStart = caretPosition;
+        nativeInput.selectionEnd = caretPosition;
+        addClass(this.domRef, ACTIVE_CLASS);
+        const lastDigitRef = this.digitRefs[this.lastPosition];
+        if (lastDigitRef) addClass(lastDigitRef, ACTIVE_DIGIT_CLASS);
+        this.onCaretPositionChange(caretPosition);
+    }
+
+    endInput(wasCancelled = false) {
+        const { onFinish } = this.props;
+        this.isInputting = false;
+        ime.removeEventListener('caretpositionchange', this.onCaretPositionChange);
+        removeClass(this.domRef, ACTIVE_CLASS);
+        const lastDigitRef = this.digitRefs[this.lastPosition];
+        removeClass(lastDigitRef, ACTIVE_DIGIT_CLASS);
+        onFinish(wasCancelled);
+    }
+
+    updateDigits() {
+        const { value } = this.nativeInput.current!;
+        this.digitRefs.forEach((digitRef, index) => {
+            const digitValue = value.charAt(index);
+            const digitContentElement = digitRef.current!.firstElementChild as HTMLDivElement;
+            setText(digitContentElement, this.replaceDigitWithChar(digitValue));
+        });
+    }
+
+    replaceDigitWithChar(digit: string) {
+        const { replaceChar } = this.props;
+        return digit.replace(/./g, replaceChar);
+    }
+
+    clearPin() {
+        this.nativeInput.current!.value = '';
+        this.updateDigits();
+    }
+
+    renderDigits(renderDigit: (index: number) => JSX.Element): JSX.Element[] {
+        const { digits } = this.props;
+        return nTimes(digits, (_, index) => {
+            this.digitRefs[index] = createRef();
+            return renderDigit(index);
+        });
+    }
+
+    render() {
+        const { className, onFocus, onBlur } = this.props;
+        return (
+            <Interactable
+                ref={this.domRef}
+                className={`pin-input ${className}`}
+                onPress={this.onKeyDown}
+                onFocus={onFocus}
+                onBlur={onBlur}
+            >
+                <div className="native-input-wrap">
+                    <input ref={this.nativeInput} type="password" />
+                </div>
+                <div className="pin-input-digits">
+                    {this.renderDigits((index: number) => (
+                        <div className="pin-input-digit" ref={this.digitRefs[index]}>
+                            <div className="digit-content" />
+                        </div>
+                    ))}
+                </div>
+            </Interactable>
+        );
+    }
+}

package/packages/pin-input/src/index.ts

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