@24i/bigscreen-sdk 0.9.9-alpha.2154 → 0.9.9-alpha.2158

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@24i/bigscreen-sdk",
-    "version": "0.9.9-alpha.2154",
+    "version": "0.9.9-alpha.2158",
     "description": "SmartApps BIGscreen SDK monorepo",
     "main": "index.js",
     "scripts": {
@@ -259,6 +259,7 @@
         "./utils/removeClass": "./packages/utils/src/removeClass.ts",
         "./utils/scaledImage": "./packages/utils/src/scaledImage.ts",
         "./utils/stopEvent": "./packages/utils/src/stopEvent.ts",
+        "./utils/textUtils": "./packages/utils/src/textUtils.ts",
         "./utils/timeConstants": "./packages/utils/src/timeConstants.ts",
         "./utils/timers": "./packages/utils/src/timers/index.ts",
         "./utils/wait": "./packages/utils/src/wait.ts",

package/packages/developer-tools/src/EnvironmentSelection/EnvironmentList.tsx

@@ -12,6 +12,7 @@ import * as sizes from './sizes';
 type Props = {
     data: ItemData[],
     onClose: () => void,
+    leadingEllipses?: boolean;
 };
 
 export class EnvironmentList extends Component<Props> {
@@ -55,7 +56,7 @@ export class EnvironmentList extends Component<Props> {
     }
 
     render() {
-        const { data } = this.props;
+        const { data, leadingEllipses } = this.props;
         const { visibleItems, firstScrollStep, scrollStep } = sizes;
         return (
             <div
@@ -80,6 +81,7 @@ export class EnvironmentList extends Component<Props> {
                                 label={label}
                                 value={value}
                                 onPress={this.onPressItem}
+                                leadingEllipses={leadingEllipses}
                             />
                         );
                     }}

package/packages/developer-tools/src/EnvironmentSelection/EnvironmentListItem.tsx

@@ -2,10 +2,12 @@ import { Component, createRef, setText } from '@24i/bigscreen-sdk/jsx';
 import { getDisplayToggler } from '@24i/bigscreen-sdk/utils/displayToggler';
 import { Item } from '@24i/bigscreen-sdk/list/interface';
 import { Interactable } from '@24i/bigscreen-sdk/interactable';
+import { trimWithLeadingEllipsis } from '@24i/bigscreen-sdk/utils/textUtils';
 import { ItemData } from './types';
 
 type Props = {
     onPress: (environment: string) => void,
+    leadingEllipses?: boolean;
 } & ItemData;
 
 export class EnvironmentListItem extends Component<Props> implements Item<ItemData> {
@@ -23,6 +25,10 @@ export class EnvironmentListItem extends Component<Props> implements Item<ItemDa
         this.value = value;
     }
 
+    componentDidMount(): void {
+        this.trimRows();
+    }
+
     onPress = () => {
         const { onPress } = this.props;
         onPress(this.value);
@@ -40,10 +46,18 @@ export class EnvironmentListItem extends Component<Props> implements Item<ItemDa
         this.display.hide();
     }
 
+    trimRows() {
+        const { leadingEllipses } = this.props;
+        if (leadingEllipses) {
+            trimWithLeadingEllipsis(this.labelRef.current!);
+        }
+    }
+
     updateData({ label, value }: ItemData) {
         if (value !== this.value) {
             this.value = value;
             setText(this.labelRef, label);
+            this.trimRows();
         }
     }
 
@@ -52,14 +66,20 @@ export class EnvironmentListItem extends Component<Props> implements Item<ItemDa
     }
 
     render() {
-        const { active, label } = this.props;
+        const { active, label, leadingEllipses: ellipses } = this.props;
         return (
             <Interactable
                 ref={this.itemRef}
-                className="environment-list-item"
+                className={`environment-list-item  ${ellipses ? 'leading-ellipses-list-item' : ''}`}
                 onPress={this.onPress}
             >
-                {active && <span className="checkmark" />}
+                { active
+                    && (
+                        <span
+                            className={`checkmark ${ellipses ? 'leading-ellipses-checkmark' : ''}`}
+                        />
+                    )}
+
                 <span
                     className={`label ${active ? 'active' : ''}`}
                     ref={this.labelRef}

package/packages/developer-tools/src/EnvironmentSelection/EnvironmentSelection.tsx

@@ -9,6 +9,7 @@ import { getEnvironmentConfigNamesList, getActiveEnvironmentConfigName } from '.
 
 export type Props = {
     onClose?: () => void;
+    leadingEllipses?: boolean;
 };
 
 export class EnvironmentSelection extends Component<Props> implements IDeveloperTool<Props> {
@@ -75,6 +76,7 @@ export class EnvironmentSelection extends Component<Props> implements IDeveloper
                 ref={this.environmentListRef}
                 data={this.getEnvironments()}
                 onClose={this.closeEnvironmentSelectionList}
+                leadingEllipses
             />,
             this.div,
         );

package/packages/developer-tools/src/EnvironmentSelection/styles/EnvironmentSelection.scss

@@ -85,6 +85,12 @@
                 width: $checkmark-size;
             }
 
+            .leading-ellipses-checkmark {
+                position: absolute;
+                height: 100%;
+                top: 0;
+            }
+            
             .label {
                 font-size: $label-font-size;
                 font-weight: 400;
@@ -103,5 +109,9 @@
                 }
             }
         }
+
+        .leading-ellipses-list-item {
+            height: fit-content;
+        }
     }
 }

package/packages/input/src/Input.tsx

@@ -78,7 +78,7 @@ export class Input extends Component<Props> implements IFocusable {
         return this.nativeInput.current!.value;
     }
 
-    onKeyDown = (event: KeyboardEvent | MouseEvent) => {
+    onPress = (event: KeyboardEvent | MouseEvent) => {
         if (!this.isInputting && isClickOrEnter(event)) {
             stopEvent(event);
             this.processInput();
@@ -186,7 +186,7 @@ export class Input extends Component<Props> implements IFocusable {
             <Interactable
                 className="input"
                 ref={this.wrap}
-                onPress={this.onKeyDown}
+                onPress={this.onPress}
                 onFocus={onFocus}
                 onBlur={onBlur}
             >

package/packages/utils/src/textUtils.ts

@@ -0,0 +1,25 @@
+const ELLIPSIS = '...';
+
+export const trimWithLeadingEllipsis = (row: HTMLSpanElement) => {
+    if (row && row.textContent != null) {
+        row.style.visibility = 'hidden';
+        const lineHeightString = window.getComputedStyle(row, null).getPropertyValue('line-height');
+        const lineHeight = parseInt(lineHeightString, 10);
+        let numberOfLines = row.offsetHeight / lineHeight;
+        if (numberOfLines > 2) {
+            const originalTextContent = row.textContent;
+            row.textContent = ELLIPSIS;
+            let stringBuffer = '';
+            let currentPosition = originalTextContent.length - 1;
+            do {
+                const charToAdd = originalTextContent.at(currentPosition);
+                stringBuffer = `${charToAdd}${stringBuffer}`;
+                row.textContent = `${ELLIPSIS}${stringBuffer}`;
+                currentPosition -= 1;
+                numberOfLines = Math.floor(row.offsetHeight / lineHeight);
+            } while (numberOfLines <= 2 && currentPosition >= 0);
+            row.textContent = `${ELLIPSIS}${stringBuffer.substring(1)}`;
+        }
+        row.style.visibility = 'visible';
+    }
+};