@24i/bigscreen-sdk 1.0.43 → 1.0.44

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@24i/bigscreen-sdk",
-    "version": "1.0.43",
+    "version": "1.0.44",
     "description": "SmartApps BIGscreen SDK monorepo",
     "main": "index.js",
     "scripts": {

package/packages/analytics/src/clients/TealiumAnalytics/TealiumAnalytics.ts

@@ -18,7 +18,6 @@ import type {
     TealiumAnalyticsConfiguration,
     TeaResult,
     TealiumDataMapper,
-    TealiumCustomConfiguration,
     CustomMappers,
     TeaDynamicCoreResult,
 } from './types';
@@ -75,7 +74,7 @@ export class TealiumAnalytics implements AnalyticsClient {
             datasource,
             customMappers,
             dataMapper = {} as TealiumDataMapper,
-        } = this.config || {} as TealiumCustomConfiguration;
+        } = this.config;
         const { entity, platformShort, platformType, appType } = dataMapper;
         this.customMappers = customMappers;
         this.constantPayload = {

package/packages/analytics/src/clients/TealiumAnalytics/types.ts

@@ -19,7 +19,7 @@ export interface LanguageMapper {
 export type CustomMappers = Partial<Record<EVENTS, EventMappingFunction>>;
 
 export type TealiumDataMapper = {
-    appType: TeaAppType,
+    appType?: TeaAppType,
     entity: string, // e.g: 'rfe'
     platformShort?: string,
     platformType?: string,

package/packages/input/README.md

@@ -60,6 +60,3 @@ The reason for no styling is to limit unnecessary CSS code that would be overrid
 `.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.
-
-`.caret` position is counted from the left side of the input in LTR layout and from the right side of the
-input in RTL layout.

package/packages/input/src/Input.tsx

@@ -1,4 +1,4 @@
-import { createRef, Component, DeclareProps } from '@24i/bigscreen-sdk/jsx';
+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';
@@ -9,7 +9,7 @@ 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 { handleOverflow } from './handleOverflow';
 import './Input.scss';
 
 type Props = {
@@ -42,8 +42,6 @@ export class Input extends Component<Props> implements IFocusable {
 
     caret = createRef<HTMLDivElement>();
 
-    caretPosition = 0;
-
     isInputting = false;
 
     lastValue: string;
@@ -70,11 +68,6 @@ export class Input extends Component<Props> implements IFocusable {
         this.isPlaceholderVisible = value.length === 0;
     }
 
-    componentDidMount() {
-        const { value } = this.props;
-        if (value) this.setText(value);
-    }
-
     getType() {
         return this.nativeInput.current?.type;
     }
@@ -92,10 +85,13 @@ export class Input extends Component<Props> implements IFocusable {
 
     onCaretPositionChange = (position: number | null) => {
         if (position === null) return;
+        const { shouldHandleOverflow } = this.props;
         const value = this.getValue();
-        this.setText(value);
-        this.updateCaretPosition(position);
-        this.updateTextOverflow();
+        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;
@@ -110,59 +106,33 @@ export class Input extends Component<Props> implements IFocusable {
 
     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(this.text, this.filterText(value));
     }
 
-    setText(text: string): void {
-        const filtered = this.filterText(text);
-        this.renderText(filtered);
-    }
-
-    updateCaretPosition(position: number) {
+    setCaretPosition(position: number) {
         const textNode = this.text.current!.firstChild;
-        if (!textNode || position <= 0) {
-            this.caretPosition = 0;
+        if (!textNode) {
             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);
+        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);
     }
 
     /**
@@ -226,14 +196,6 @@ export class Input extends Component<Props> implements IFocusable {
         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 (
@@ -258,7 +220,9 @@ export class Input extends Component<Props> implements IFocusable {
                     >
                         {placeholder}
                     </div>
-                    <div ref={this.text} className="text" />
+                    <div ref={this.text} className="text">
+                        {this.filterText(value)}
+                    </div>
                     <div ref={this.caret} className="caret" />
                 </div>
             </Interactable>

package/packages/input/src/handleOverflow.ts

@@ -0,0 +1,29 @@
+import { isRtl } from '@24i/bigscreen-sdk/i18n';
+
+export const handleOverflow = (
+    wrap: HTMLDivElement | null,
+    caret: HTMLDivElement | null,
+    text: HTMLDivElement | null,
+) => {
+    if (!wrap || !caret || !text) return;
+    const { width: wrapWidth, left: wrapLeft } = wrap.getBoundingClientRect();
+    const { width: caretWidth, left: caretLeft } = caret.getBoundingClientRect();
+    const textMargin = parseInt(text.dataset.margin!, 10) || 0;
+    const caretOffset = isRtl()
+        ? caretLeft + textMargin - caretWidth
+        : caretLeft - textMargin + caretWidth;
+    if (!isRtl() && wrapWidth + wrapLeft < caretOffset) {
+        const margin = -(caretOffset - wrapWidth - wrapLeft);
+        text.style.marginLeft = `${margin}px`;
+        text.style.marginRight = '0px';
+        text.dataset.margin = margin.toString();
+    } else if (isRtl() && caretOffset < wrapLeft) {
+        const margin = -(wrapLeft - caretOffset);
+        text.style.marginLeft = '0px';
+        text.style.marginRight = `${margin}px`;
+        text.dataset.margin = margin.toString();
+    } else {
+        text.style.marginLeft = '0px';
+        text.style.marginRight = '0px';
+    }
+};

package/packages/input/src/utils.ts

@@ -1,71 +0,0 @@
-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;
-};