@lightningjs/ui - npm Package Compare versions

Comparing version 1.3.2 to 1.3.3

CHANGELOG.md

 # Changelog
 
+## v1.3.3
+- CollectionWrapper now only fires onIndexChanged when the index has actually changed.
+- Fix bug where CollectionWrapper could not remove an item.
+- Fix Carousel where index does not represent actual index of the focused item.
+
+## v1.3.2
+
+- Fixed name error where code used marginUp instead of marginTop as indicated in documentation
+
 ## v1.3.1
@@ -4,0 +13,0 @@

package.json

 {
   "name": "@lightningjs/ui",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "description": "Standard UI components for Lightning",
@@ -5,0 +5,0 @@ "scripts": {

src/Carousel.js

@@ -41,2 +41,7 @@ /*
 
+    clear() {
+        super.clear();
+        this._focusIndex = 0;
+    }
+
     _normalizeDataIndex(index, items = this._items) {
@@ -67,6 +72,11 @@ if(index > items.length - 1) {
         const negativeHalf = [];
-        const itemIndex = this._index;
+        const itemIndex = this._focusIndex;
         let index = itemIndex;
         let position = scrollOffsetStart;
+        let currentDataIndex = null;
 
+        if(this.currentItemWrapper) {
+            currentDataIndex = this.currentItemWrapper.componentIndex;
+        }
+
         while((viewBound - scrollOffsetStart) + this._tresholdEnd > position) {
@@ -125,5 +135,8 @@ const item = items[index];
         }
-        this._index = negativeHalf.length;
+        this._focusIndex = negativeHalf.length;
         wrapper.children = [...negativeHalf.reverse(), ...positiveHalf];
-        this._indexChanged({previousIndex: this._index, index: this._index, dataLength: this._items.length});
+        this._index = this.currentItemWrapper.componentIndex;
+        if(this._index !== currentDataIndex) {
+            this._indexChanged({previousIndex: currentDataIndex, index: this._index, dataLength: this._items.length});
+        }
     }
@@ -133,7 +146,6 @@
         const children = this.wrapper.children;
-        const begin = children.slice(0, this._index);
-        const end = children.slice(this._index + 1);
+        const begin = children.slice(0, this._focusIndex);
+        const end = children.slice(this._focusIndex + 1);
 
         const {main, mainDim, mainMarginFrom, mainMarginTo, cross, crossDim} = this._getPlotProperties(this._direction);
-        const viewBound = this[mainDim];
         let crossPos = 0, crossSize = 0;
@@ -145,7 +157,6 @@
 
-        const focusedItem = children[this._index];
+        const focusedItem = children[this._focusIndex];
         
         let position = focusedItem[main] + (focusedItem[mainDim]- focusedItem.component[mainDim]) * scrollAnchor;
 
-
         const focusedItemSizes = this._getItemSizes(focusedItem);
@@ -203,3 +214,3 @@ focusedItem.patch({
         this._cleanUp();
-        const targetIndex = this._index + shift;
+        const targetIndex = this._focusIndex + shift;
         const childList = this.wrapper.childList;
@@ -231,5 +242,8 @@ const {main, mainDim, mainMarginFrom, mainMarginTo} = this._getPlotProperties(this._direction);
         if(shift > 0) {
-            this._index = targetIndex;
+            this._focusIndex = targetIndex;
         }
-        this._indexChanged({previousIndex: currentDataIndex, index: currentDataIndex + shift, dataLength: this._items.length});
+        if(currentDataIndex !== currentDataIndex + shift) {
+            this._index = currentDataIndex + shift
+            this._indexChanged({previousIndex: currentDataIndex, index: this._index, dataLength: this._items.length});
+        }
         return true;
@@ -283,3 +297,3 @@ }
                         if(!rem[i + 1] || (rem[i+1] - rem[i] !== 1)) {
-                            this._index = this._index - (i + 1);
+                            this._focusIndex = this._focusIndex - (i + 1);
                             break;
@@ -301,2 +315,6 @@ }
 
+    get currentItemWrapper() {
+        return this.wrapper.children[this._focusIndex];
+    }
+
     set threshold(num) {
@@ -303,0 +321,0 @@ this._threshold = num;

src/Grid.js

@@ -20,3 +20,7 @@ /*
 
-import { CollectionWrapper, ItemWrapper, limitWithinRange } from "./helpers";
+import {
+  CollectionWrapper,
+  ItemWrapper,
+  limitWithinRange,
+} from './helpers';
 
@@ -23,0 +27,0 @@ export default class Grid extends CollectionWrapper {

src/Grid.spec.js

@@ -1,3 +0,4 @@
-import TestRenderer from '@lightningjs/ui-components/test/lightning-test-renderer'
-import { Component } from '@lightningjs/core'
+import { Component } from '@lightningjs/core';
+import TestRenderer
+  from '@lightningjs/ui-components/test/lightning-test-renderer';
 
@@ -4,0 +5,0 @@ import Grid from './Grid';

src/helpers/CollectionWrapper.js

@@ -21,2 +21,3 @@ /*
 import Lightning from '@lightningjs/core';
+
 import { limitWithinRange } from './index.js';
@@ -91,5 +92,11 @@
         const previousIndex = this._index;
-        this._index = targetIndex;
-        this._indexChanged({previousIndex, index: targetIndex, dataLength: this._items.length});
-        return previousIndex !== targetIndex;
+        
+        if(previousIndex !== targetIndex) {
+            this._index = targetIndex;
+            this._indexChanged({previousIndex, index: targetIndex, dataLength: this._items.length});
+            
+            return true;
+        }
+        
+        return false;   
     }
@@ -134,6 +141,11 @@
 
-    remove(item) {
-        if(this.hasItems && item.assignedID) {
-            for(let i = 0; i < this.wrapper.children.length; i++) {
-                if(this.wrapper.children[i].assignedID === item.assignedID) {
+    remove(target) {
+        if(this.hasItems && target.assignedID) {
+            const itemWrappers = this.itemWrappers;
+            for(let i = 0; i < this._items.length; i++) {
+                let item = this._items[i];
+                if(itemWrappers[i] && itemWrappers[i].component.isAlive) {
+                    item = itemWrappers[i].component;
+                }
+                if(target.assignedID === item.assignedID) {
                     return this.removeAt(i);
@@ -594,2 +606,2 @@ }
     column: 1
-}
+}

src/List.js

@@ -91,3 +91,3 @@ /*
         wrapper.children.forEach((item) => {
-            const sizes = this._getItemSizes(item.component);
+            const sizes = this._getItemSizes(item);
             position += sizes[mainMarginFrom] || sizes.margin || 0;
@@ -94,0 +94,0 @@ crossPos = item[cross] || crossPos;

No alert changes

Improved metrics

Total package byte prevSize

210111

increased by0.99%

Number of package files

44

increased by2.33%

Lines of code

3050

increased by2.11%

No dependency changes