@24i/bigscreen-sdk 1.0.29 → 1.0.30-alpha.2518

package/packages/input/src/Input.tsx

@@ -1,231 +1,267 @@
-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 { isRtl } from '@24i/bigscreen-sdk/i18n';
-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 { offsetPosition } from '@24i/bigscreen-sdk/utils/offsetPosition';
-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,
-    maxLength?: number,
-    onFocus?: (event: FocusEvent) => void,
-    onBlur?: (event: FocusEvent) => void,
-    onFinish?: (wasCancelled?: boolean) => void,
-    onChange?: (newValue: string) => 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>();
-
-    text = 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;
-    }
-
-    onPress = (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();
-        setText(this.text, this.filterText(value));
-        this.setCaretPosition(position);
-        if (shouldHandleOverflow) {
-            handleOverflow(this.wrap.current, this.caret.current, this.text.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.text, this.filterText(value));
-    }
-
-    setCaretPosition(position: number) {
-        const textNode = this.text.current!.firstChild;
-        if (!textNode) {
-            offsetPosition(this.caret, { x: 0 });
-            return;
-        }
-        const range = new Range();
-        range.selectNode(textNode);
-        const wholeText = range.getBoundingClientRect();
-        range.setStart(textNode, 0);
-        range.setEnd(textNode, position);
-        const caretText = range.getBoundingClientRect();
-        const [initialCaretPosition, currentCarretPosition, offsetBase] = isRtl()
-            ? [wholeText.right, caretText.left, wholeText.left]
-            : [wholeText.left, caretText.right, wholeText.right];
-        const caretPos = position === 0 ? initialCaretPosition : currentCarretPosition;
-        const offset = offsetBase - caretPos;
-        offsetPosition(this.caret, { x: -offset }, false);
-    }
-
-    /**
-     * 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.onPress}
-                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.text} className="text">
-                        {this.filterText(value)}
-                    </div>
-                    <div ref={this.caret} className="caret" />
-                </div>
-            </Interactable>
-        );
-    }
-}
+import { createRef, Component, DeclareProps } from '@24i/bigscreen-sdk/jsx';
+import { Interactable } from '@24i/bigscreen-sdk/interactable';
+import { IFocusable } from '@24i/bigscreen-sdk/focus';
+import { isRtl } from '@24i/bigscreen-sdk/i18n';
+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 { offsetPosition } from '@24i/bigscreen-sdk/utils/offsetPosition';
+import { checkCharOrderMishmash, handleOverflow } from './utils';
+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,
+    maxLength?: number,
+    onFocus?: (event: FocusEvent) => void,
+    onBlur?: (event: FocusEvent) => void,
+    onFinish?: (wasCancelled?: boolean) => void,
+    onChange?: (newValue: string) => 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>();
+
+    text = createRef<HTMLDivElement>();
+
+    caret = createRef<HTMLDivElement>();
+
+    caretPosition = 0;
+
+    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;
+    }
+
+    componentDidMount() {
+        const { value } = this.props;
+        if (value) this.setText(value);
+    }
+
+    getType() {
+        return this.nativeInput.current?.type;
+    }
+
+    getValue() {
+        return this.nativeInput.current!.value;
+    }
+
+    onPress = (event: KeyboardEvent | MouseEvent) => {
+        if (!this.isInputting && isClickOrEnter(event)) {
+            stopEvent(event);
+            this.processInput();
+        }
+    };
+
+    onCaretPositionChange = (position: number | null) => {
+        if (position === null) return;
+        const value = this.getValue();
+        this.setText(value);
+        this.updateCaretPosition(position);
+        this.updateTextOverflow();
+        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;
+        this.setText(value);
+    }
+
+    setType(type: Props['type']) {
+        if (this.getType() === type) return;
+        const value = this.getValue();
+        this.nativeInput.current!.type = type;
+        this.setText(value);
+    }
+
+    setText(text: string): void {
+        const filtered = this.filterText(text);
+        this.renderText(filtered);
+    }
+
+    updateCaretPosition(position: number) {
+        const textNode = this.text.current!.firstChild;
+        if (!textNode || position <= 0) {
+            this.caretPosition = 0;
+            offsetPosition(this.caret, { x: 0 });
+            return;
+        }
+        const wholeTextDimensions = this.text.current!.getBoundingClientRect();
+        if (position >= this.text.current!.children.length) {
+            const offset = wholeTextDimensions.right - wholeTextDimensions.left;
+            this.caretPosition = isRtl() ? -offset : offset;
+            offsetPosition(this.caret, { x: this.caretPosition }, false);
+            return;
+        }
+        const charNode = this.text.current!.children[position - 1];
+        const charDimensions = charNode!.getBoundingClientRect();
+        const isCharMishmash = checkCharOrderMishmash(this.text.current!, position - 1);
+        if (isRtl()) {
+            if (isCharMishmash) {
+                this.caretPosition = charDimensions.right - wholeTextDimensions.right;
+            } else {
+                this.caretPosition = charDimensions.left - wholeTextDimensions.right;
+            }
+        } else if (isCharMishmash) {
+            this.caretPosition = charDimensions.left - wholeTextDimensions.left;
+        } else {
+            this.caretPosition = charDimensions.right - wholeTextDimensions.left;
+        }
+        offsetPosition(this.caret, { x: this.caretPosition }, false);
+    }
+
+    updateTextOverflow() {
+        const { shouldHandleOverflow } = this.props;
+        if (!shouldHandleOverflow) return;
+        const textMargin = handleOverflow(
+            this.wrap.current, this.caret.current, this.text.current,
+        );
+        offsetPosition(this.caret, { x: this.caretPosition - textMargin }, false);
+    }
+
+    /**
+     * 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);
+    }
+
+    renderText(text: string): void {
+        const chars: JSX.Element[] = [];
+        for (let i = 0; i < text.length; i++) {
+            chars.push(<span className="char">{text[i]}</span>);
+        }
+        this.clearMount(chars, this.text);
+    }
+
+    render() {
+        const { value, type, placeholder, onFocus, onBlur } = this.props;
+        return (
+            <Interactable
+                className="input"
+                ref={this.wrap}
+                onPress={this.onPress}
+                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.text} className="text" />
+                    <div ref={this.caret} className="caret" />
+                </div>
+            </Interactable>
+        );
+    }
+}

package/packages/input/src/index.ts

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

package/packages/input/src/utils.ts

@@ -0,0 +1,71 @@
+import { isRtl } from '@24i/bigscreen-sdk/i18n';
+
+/**
+ * Handles overflowing text in the input by moving with the inner
+ * text element.
+ * @param wrap input wrapper
+ * @param caret caret element
+ * @param text input inner text element
+ * @returns value how much is text element moved
+ */
+export const handleOverflow = (
+    wrap: HTMLDivElement | null,
+    caret: HTMLDivElement | null,
+    text: HTMLDivElement | null,
+) => {
+    if (!wrap || !caret || !text) return 0;
+    const { width: wrapWidth, left: wrapLeft } = wrap.getBoundingClientRect();
+    const { width: caretWidth, left: caretLeft } = caret.getBoundingClientRect();
+    const caretOffset = isRtl() ? caretLeft - caretWidth : caretLeft + caretWidth;
+    if (!isRtl() && wrapWidth + wrapLeft < caretOffset) {
+        const margin = -(caretOffset - wrapWidth - wrapLeft);
+        text.style.marginLeft = `${margin}px`;
+        text.style.marginRight = '0px';
+        return margin;
+    }
+    if (isRtl() && caretOffset < wrapLeft) {
+        const margin = -(wrapLeft - caretOffset);
+        text.style.marginLeft = '0px';
+        text.style.marginRight = `${margin}px`;
+        return margin;
+    }
+    text.style.marginLeft = '0px';
+    text.style.marginRight = '0px';
+    return 0;
+};
+
+/**
+ * Check for char element position mishmash in the input's text element. This is
+ * necessary to recognize if the char is in the wrong direction than it's position
+ * in children collection, this means that the char is LTR char in RTL scheme or RTL
+ * char in LTR scheme.
+ * @param text input inner text element
+ * @param position position of the char in children collection
+ * @returns true if char has position mishmash
+ */
+export const checkCharOrderMishmash = (text: HTMLDivElement, position: number) => {
+    const { children } = text!;
+    if (!children.length) return false;
+    const charOffsets: {
+        index: number,
+        offset: number,
+    }[] = [];
+    for (let i = 0; i < children.length; i++) {
+        charOffsets.push({
+            index: i,
+            offset: (children[i] as HTMLElement).getBoundingClientRect().left,
+        });
+    }
+    charOffsets.sort((a, b) => {
+        if (a.offset < b.offset) return isRtl() ? 1 : -1;
+        if (a.offset > b.offset) return isRtl() ? -1 : 1;
+        return 0;
+    });
+    const lastPos = children.length - 1;
+    const posBefore = position - 1;
+    const mishmashBefore = posBefore < 0
+        ? false : charOffsets[posBefore].index !== posBefore;
+    const mishmashCurrent = charOffsets[position].index !== position;
+    if (mishmashCurrent) return true;
+    return !mishmashCurrent && mishmashBefore && position !== lastPos;
+};

package/packages/interactable/README.md

@@ -1,38 +1,38 @@
----
-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`
-- `blockRepeatedKeyDown` - interactable must suppress repeated onPress calls, until the key is released. This is because because keyDown event is repeatedly fired when user holds key on webTv and Adrodid Tv. This may lead to unpredictable behavior.
-- 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>
-```
+---
+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`
+- `blockRepeatedKeyDown` - interactable must suppress repeated onPress calls, until the key is released. This is because because keyDown event is repeatedly fired when user holds key on webTv and Adrodid Tv. This may lead to unpredictable behavior.
+- 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>
+```