@24i/bigscreen-sdk 1.0.4-alpha.2106 → 1.0.4-alpha.2109

package/package.json

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

package/packages/animations/README.md

@@ -40,7 +40,7 @@ If you use it in combination with *JSAnimations* then you will need only static
 
 ## JSAnimations
 Create your own instance in your component. To start the animation you call start and pass callback;
-```javascript
+```ts
 animations = new JSAnimations();
 ...
 animations.start(from, to, timeInMs, AnimationUtils.ease).onFrame(this.onFrame);
@@ -50,6 +50,17 @@ animations.start(from, to, timeInMs, AnimationUtils.ease).onFrame(this.onFrame);
 If you start another animation (with the same instance) before the previous ends.
 Then the from is not what you passed but current position of running animation.
 
+## Frame callback
+Frame callback is called each time animation progresses. It has two parameters.
+Parameter `value` is the current value of the animation between `from` and `to`.
+Parameter `percentage` is optional and it is the percentual progress of the animation
+between 0 and 1. The value is not linear, it is based on the ease function used in
+the animation.
+
+```ts
+frameCallback = (value: number, percentage?: number) => void;
+```
+
 ## Timing Example
 Time | Call | Result
 ---|---|---
@@ -63,7 +74,7 @@ To the root of your package add this file:
 __mocks__/@24i/smartapps-bigscreenen-animations.ts
 ```
 with this content
-```js
+```ts
 export { AnimationUtils } from '@24i/bigscreen-sdk/animations';
 export { JSAnimations } from '@24i/bigscreen-sdk/animations/mock';
 

package/packages/animations/src/AnimationUtils.ts

@@ -162,16 +162,22 @@ export class AnimationUtils {
     static easeInOutBack: EasingType = [0.68, -0.55, 0.265, 1.55];
 
     /**
-     * Returns value at given percentage
+     * Returns value at given time percentage with percentage in easing function
      * @param {number} min - minimal value
      * @param {number} max - maximal value
      * @param {number} percentage - percentage of time
      * @param {EasingType} easingFunction - easing function for calculation
-     * @returns {number} calculated value
-     */
-    xInTime(min: number, max: number, percentage: number, easingFunction: EasingType): number {
-        const percentageInTime = this.getPercentageAt(percentage, easingFunction);
-        return this.linearInterpolation(min, max, percentageInTime);
+     * @returns {Object} calculated value and percentual value in easing
+     */
+    xInTime(min: number, max: number, percentage: number, easingFunction: EasingType): {
+        value: number,
+        percentage: number,
+    } {
+        const percentageInEasing = this.getPercentageAt(percentage, easingFunction);
+        return {
+            value: this.linearInterpolation(min, max, percentageInEasing),
+            percentage: percentageInEasing,
+        };
     }
 
     /**

package/packages/animations/src/JSAnimations.ts

@@ -71,10 +71,12 @@ export class JSAnimations {
     easingFunction: EasingType = AnimationUtils.ease;
 
     /**
-     * @member {FrameCallback} frameCallback - callback being called on evry frame
+     * @member {FrameCallback} frameCallback - callback being called on every frame
      * @private
+     * @param {number} value - current value of the animation
+     * @param {number} [percentage] - current progress of the animation in percents
      */
-    frameCallback?: (value: number) => void;
+    frameCallback?: (value: number, percentage?: number) => void;
 
     /**
      * Starts animation
@@ -115,7 +117,7 @@ export class JSAnimations {
             this.animationRunning = false;
         }
         const timePercentage = this.currentTime / this.animationTime;
-        const value = this.animations.xInTime(
+        const { value, percentage } = this.animations.xInTime(
             this.from,
             this.to,
             timePercentage,
@@ -123,7 +125,7 @@ export class JSAnimations {
         );
         this.currentPosition = value;
         if (this.frameCallback) {
-            this.frameCallback(value);
+            this.frameCallback(value, percentage);
         }
         if (this.animationRunning) {
             this.animationFrameID = window.requestAnimationFrame(this.frame);
@@ -134,7 +136,7 @@ export class JSAnimations {
      * Frame callback handler
      * @param {FrameCallback} callback - callback to run on every animation frame
      */
-    onFrame(callback: (value: number) => void) {
+    onFrame(callback: (value: number, percentage?: number) => void) {
         if (typeof callback === 'function') {
             this.frameCallback = callback;
         }

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

@@ -53,7 +53,7 @@ export class EnvironmentListItem extends Component<Props> implements Item<ItemDa
     trimRows() {
         const { leadingEllipses } = this.props;
         if (leadingEllipses) {
-            trimWithLeadingEllipsis(this.labelRef.current!);
+            trimWithLeadingEllipsis(this.labelRef.current!, 2);
         }
     }
 

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

@@ -43,7 +43,11 @@
             padding-right: $environment-config-name-padding-right;
             line-height: $environment-config-name-height;
             height: $environment-config-name-height;
+            max-width: $environment-config-name-width;
+            text-align: left;
             white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
     }
 

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

@@ -9,6 +9,7 @@ $environment-config-name-font-size: 22px;
 $environment-config-name-padding-left: 12px;
 $environment-config-name-padding-right: 7px;
 $environment-config-name-height: 33px;
+$environment-config-name-width: 400px;
 
 $environment-list-width: 479px;
 

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

@@ -9,6 +9,7 @@ $environment-config-name-font-size: 15px;
 $environment-config-name-padding-left: 8px;
 $environment-config-name-padding-right: 5px;
 $environment-config-name-height: 22px;
+$environment-config-name-width: 200px;
 
 $environment-list-width: 319px;
 

package/packages/utils/src/textUtils.ts

@@ -1,12 +1,12 @@
 const ELLIPSIS = '...';
 
-export const trimWithLeadingEllipsis = (row: HTMLSpanElement) => {
+export const trimWithLeadingEllipsis = (row: HTMLSpanElement, requestedNumberOfLines: number) => {
     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) {
+        if (numberOfLines > requestedNumberOfLines) {
             const originalTextContent = row.textContent;
             row.textContent = ELLIPSIS;
             let stringBuffer = '';
@@ -17,7 +17,7 @@ export const trimWithLeadingEllipsis = (row: HTMLSpanElement) => {
                 row.textContent = `${ELLIPSIS}${stringBuffer}`;
                 currentPosition -= 1;
                 numberOfLines = Math.floor(row.offsetHeight / lineHeight);
-            } while (numberOfLines < 2 && currentPosition >= 0);
+            } while (numberOfLines <= requestedNumberOfLines && currentPosition >= 0);
             row.textContent = `${ELLIPSIS}${stringBuffer.substring(1)}`;
         }
         row.style.visibility = '';