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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@24i/bigscreen-sdk",
-    "version": "1.0.29-alpha.2491",
+    "version": "1.0.30-alpha.2517",
     "description": "SmartApps BIGscreen SDK monorepo",
     "main": "index.js",
     "scripts": {
@@ -44,9 +44,6 @@
         "@24i/smartapps-datalayer": "3.0.11-alpha.1019",
         "@sentry/browser": "7.35.0",
         "@sentry/types": "7.35.0",
-        "@types/gtag.js": "^0.0.14",
-        "@types/prop-types": "^15.7.7",
-        "@types/scheduler": "^0.16.4",
         "csstype": "^3.1.2",
         "date-fns": "2.29.3",
         "lottie-web": "5.12.2",
@@ -56,14 +53,17 @@
         "@24i/bigscreen-sdk": "file:.",
         "@24i/eslint-config-smartapps-bigscreen-linters": "file:./libs/linters",
         "@24i/smartapps-bigscreen-changelog-generator": "0.17.0",
-        "@babel/core": "^7.23.0",
-        "@babel/preset-env": "^7.22.20",
-        "@types/fs-extra": "^11.0.2",
-        "@types/inquirer": "^9.0.3",
-        "@types/jest": "^29.5.5",
-        "@types/minimist": "^1.2.3",
-        "@types/node": "^20.8.2",
+        "@babel/core": "^7.23.2",
+        "@babel/preset-env": "^7.23.2",
+        "@types/fs-extra": "^11.0.3",
+        "@types/gtag.js": "^0.0.17",
+        "@types/inquirer": "^9.0.6",
+        "@types/jest": "^29.5.7",
+        "@types/minimist": "^1.2.4",
+        "@types/node": "^20.8.10",
+        "@types/prop-types": "^15.7.9",
         "@types/react": "18.0.33",
+        "@types/scheduler": "^0.16.5",
         "babel-jest": "^29.7.0",
         "chalk": "^5.3.0",
         "coveralls": "^3.1.1",
@@ -78,7 +78,7 @@
         "jest-sonar": "^0.2.15",
         "minimist": "^1.2.8",
         "patch-package": "^8.0.0",
-        "sass": "^1.68.0",
+        "sass": "^1.69.5",
         "sass-true": "^6.1.0",
         "ts-jest": "^29.1.1",
         "ts-node": "^10.9.1",

package/packages/input/README.md

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

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/input/src/handleOverflow.ts

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