neo.mjs 3.2.0 → 3.2.4

package/src/list/Component.mjs

@@ -30,11 +30,9 @@ class Component extends Base {
      * @protected
      */
     afterSetAppName(value, oldValue) {
-        let me = this;
-
         super.afterSetAppName(value, oldValue);
 
-        value && me.items?.forEach(item => {
+        value && this.items?.forEach(item => {
             item.appName = value;
         });
     }
@@ -73,10 +71,43 @@ class Component extends Base {
      * @returns {String|Number} itemId
      */
     getItemRecordId(vnodeId) {
-        let itemId = vnodeId.split('__')[1],
-            store  = this.store;
+        let itemId = vnodeId.split('__')[1];
+        return this.store.getAt(parseInt(itemId))[this.getKeyProperty()];
+    }
+
+    /**
+     * @param {Object} data
+     * @param {Object[]} data.items
+     * @param {Object[]} data.previousItems
+     * @param {Neo.data.Store} data.scope
+     */
+    onStoreSort(data) {
+        this.sortItems(data);
+        super.onStoreSort(data);
+    }
+
+    /**
+     * @param {Object} data
+     * @param {Object[]} data.items
+     * @param {Object[]} data.previousItems
+     * @param {Neo.data.Store} data.scope
+     */
+    sortItems(data) {
+        let me       = this,
+            newItems = [],
+            fromIndex, key, previousKeys;
+
+        if (me.items) {
+            key          = me.getKeyProperty();
+            previousKeys = data.previousItems.map(e => e[key]);
+
+            data.items.forEach(item => {
+                fromIndex = previousKeys.indexOf(item[key]);
+                newItems.push(me.items[fromIndex]);
+            });
 
-        return store.getAt(parseInt(itemId))[store.model.keyProperty];
+            me.items = newItems;
+        }
     }
 }
 

package/src/list/plugin/Animate.mjs

@@ -27,21 +27,11 @@ class Animate extends Base {
          * @member {Number|null} columns=null
          */
         columns: null,
-        /**
-         * Value in px
-         * @member {Number} itemHeight=200
-         */
-        itemHeight: 200,
         /**
          * Value in px
          * @member {Number} itemMargin=10
          */
         itemMargin: 10,
-        /**
-         * Value in px
-         * @member {Number} itemWidth=300
-         */
-        itemWidth: 300,
         /**
          * @member {DOMRect|null} ownerRect=null
          */
@@ -78,14 +68,14 @@ class Animate extends Base {
         let me    = this,
             owner = me.owner;
 
+        if (!owner.itemHeight || !owner.itemWidth) {
+            console.error('list.plugin.Animate requires fixed itemHeight and itemWidth values', owner);
+        }
+
         me.adjustCreateItem();
 
         owner.onStoreFilter = me.onStoreFilter.bind(me);
-
-        owner.store.on({
-            sort : me.onStoreSort,
-            scope: me
-        });
+        owner.onStoreSort   = me.onStoreSort  .bind(me);
 
         this.updateTransitionDetails(false);
     }
@@ -139,6 +129,7 @@ class Animate extends Base {
      */
     createItem(me, record, index) {
         let item     = me.ownerCreateItem(record, index),
+            owner    = me.owner,
             position = me.getItemPosition(record, index),
             style    = item.style || {};
 
@@ -147,10 +138,10 @@ class Animate extends Base {
         }
 
         Object.assign(style, {
-            height   : `${me.itemHeight}px`,
+            height   : `${owner.itemHeight}px`,
             position : 'absolute',
             transform: `translate(${position.x}px, ${position.y}px)`,
-            width    : `${me.itemWidth}px`
+            width    : `${owner.itemWidth}px`
         });
 
         item.style = style;
@@ -167,9 +158,10 @@ class Animate extends Base {
         let me     = this,
             column = index % me.columns,
             margin = me.itemMargin,
+            owner  = me.owner,
             row    = Math.floor(index / me.columns),
-            x      = column * (margin + me.itemWidth)  + margin,
-            y      = row    * (margin + me.itemHeight) + margin;
+            x      = column * (margin + owner.itemWidth)  + margin,
+            y      = row    * (margin + owner.itemHeight) + margin;
 
         return {x, y};
     }
@@ -186,7 +178,7 @@ class Animate extends Base {
         }
 
         let owner = this.owner,
-            key   = owner.store.keyProperty;
+            key   = owner.getKeyProperty();
 
         return map.indexOf(owner.getItemId(obj.record[key]));
     }
@@ -195,14 +187,18 @@ class Animate extends Base {
      *
      */
     onOwnerMounted() {
-        let me = this;
+        let me    = this,
+            owner = me.owner;
 
-        me.owner.getDomRect().then(rect => {
+        owner.getDomRect().then(rect => {
             Object.assign(me, {
-                columns  : Math.floor(rect.width / me.itemWidth),
+                columns  : Math.floor(rect.width / owner.itemWidth),
                 ownerRect: rect,
-                rows     : Math.floor(rect.height / me.itemHeight)
+                rows     : Math.floor(rect.height / owner.itemHeight)
             });
+
+            // if the store got loaded before this plugin is ready, create the items now
+            owner.store.getCount() > 0 && owner.createItems();
         });
     }
 
@@ -216,7 +212,7 @@ class Animate extends Base {
     onStoreFilter(data) {
         let me                  = this,
             owner               = me.owner,
-            key                 = owner.store.keyProperty,
+            key                 = owner.getKeyProperty(),
             hasAddedItems       = false,
             addedItems          = [],
             movedItems          = [],
@@ -326,19 +322,34 @@ class Animate extends Base {
      * @param {Neo.data.Store} data.scope
      */
     onStoreSort(data) {
-        let me          = this,
-            hasChange   = false,
-            keyProperty = data.scope.keyProperty,
-            owner       = me.owner,
-            newVdomCn   = [],
-            vdom        = owner.vdom,
-            vdomMap     = vdom.cn.map(e => e.id),
-            fromIndex, itemId;
-
-        if (vdomMap.length > 0) {
+        let me = this;
+
+        if (Neo.list.Component && me.owner instanceof Neo.list.Component) {
+            me.sortComponentList(data);
+        } else {
+            me.sortBaseList(data);
+        }
+    }
+
+    /**
+     * @param {Object} data
+     * @param {Object[]} data.items
+     * @param {Object[]} data.previousItems
+     * @param {Neo.data.Store} data.scope
+     */
+    sortBaseList(data) {
+        let me            = this,
+            hasChange     = false,
+            owner         = me.owner,
+            key           = owner.getKeyProperty(),
+            newVdomCn     = [],
+            previousKeys  = data.previousItems.map(e => e[key]),
+            vdom          = owner.vdom,
+            fromIndex;
+
+        if (vdom.cn.length > 0) {
             data.items.forEach((item, index) => {
-                itemId    = owner.getItemId(item[keyProperty]);
-                fromIndex = vdomMap.indexOf(itemId);
+                fromIndex = previousKeys.indexOf(item[key]);
 
                 newVdomCn.push(vdom.cn[fromIndex]);
 
@@ -360,6 +371,37 @@ class Animate extends Base {
         }
     }
 
+    /**
+     * @param {Object} data
+     * @param {Object[]} data.items
+     * @param {Object[]} data.previousItems
+     * @param {Neo.data.Store} data.scope
+     */
+    sortComponentList(data) {
+        let me           = this,
+            owner        = me.owner,
+            key          = owner.getKeyProperty(),
+            previousKeys = data.previousItems.map(e => e[key]),
+            vdom         = owner.vdom,
+            fromIndex, item, position;
+
+        owner.sortItems(data);
+
+        previousKeys = owner.items.map(e => owner.getItemRecordId(e[key]));
+
+        if (vdom.cn.length > 0) {
+            data.items.forEach((record, index) => {
+                fromIndex = previousKeys.indexOf(record[key]);
+                item      = vdom.cn[fromIndex];
+                position  = me.getItemPosition(record, index);
+
+                item.style.transform = `translate(${position.x}px, ${position.y}px)`;
+            });
+
+            owner.vdom = vdom;
+        }
+    }
+
     /**
      *
      */

package/src/selection/CircleModel.mjs

@@ -41,15 +41,15 @@ class CircleModel extends Model {
             item     = data.path[0],
             view     = me.view,
             store    = view.store,
-            maxItems = Math.min(store.getCount(), view.maxItems - 1),
+            maxIndex = Math.min(store.getCount(), view.maxItems) - 1,
             index, itemId, recordId;
 
         if (item.cls.includes('neo-circle-item')) {
             recordId = parseInt(view.getItemRecordId(item.id));
             index    = store.indexOf(recordId) + step;
 
-                 if (index < 0)        {index = maxItems;}
-            else if (index > maxItems) {index = 0;}
+                 if (index < 0)        {index = maxIndex;}
+            else if (index > maxIndex) {index = 0;}
         } else {
             index = 0;
         }

package/src/selection/ListModel.mjs

@@ -125,7 +125,7 @@ class ListModel extends Model {
             id   = me.id,
             view = me.view;
 
-        view.keys && view.keys._keys.push(
+        view.keys?._keys.push(
             {fn: 'onKeyDownDown'  ,key: 'Down'  ,scope: id},
             {fn: 'onKeyDownEnter' ,key: 'Enter' ,scope: id},
             {fn: 'onKeyDownLeft'  ,key: 'Left'  ,scope: id},
@@ -156,7 +156,7 @@ class ListModel extends Model {
             id   = me.id,
             view = me.view;
 
-        view.keys && view.keys.removeKeys([
+        view.keys?.removeKeys([
             {fn: 'onKeyDownDown'  ,key: 'Down'  ,scope: id},
             {fn: 'onKeyDownEnter' ,key: 'Enter' ,scope: id},
             {fn: 'onKeyDownLeft'  ,key: 'Left'  ,scope: id},

package/test/siesta/tests/CollectionBase.mjs

@@ -160,11 +160,11 @@ StartTest(t => {
             {country: 'Croatia',   firstname: 'Grgur',   githubId: 'grgur',         lastname: 'Grisogono'},
             {country: 'Slovakia',  firstname: 'Jozef',   githubId: 'jsakalos',      lastname: 'Sakalos'},
             {country: 'Argentina', firstname: 'Max',     githubId: 'elmasse',       lastname: 'Fierro'},
+            {country: 'France',    firstname: 'Nigel',   githubId: 'NigeWhite',     lastname: 'White'},
             {country: 'Germany',   firstname: 'Nils',    githubId: 'mrsunshine',    lastname: 'Dehl'},
             {country: 'USA',       firstname: 'Rich',    githubId: 'rwaters',       lastname: 'Waters'},
             {country: 'Germany',   firstname: 'Tobias',  githubId: 'tobiu2',        lastname: 'Uhlig2'},
-            {country: 'Germany',   firstname: 'Tobias',  githubId: 'tobiu',         lastname: 'Uhlig'},
-            {country: 'France',    firstname: 'Nigel',   githubId: 'NigeWhite',     lastname: 'White'}
+            {country: 'Germany',   firstname: 'Tobias',  githubId: 'tobiu',         lastname: 'Uhlig'}
         ], 'collection2.getRange()');
 
         t.notOk(collection2.isFiltered(), 'collection2.isFiltered()');
@@ -186,11 +186,11 @@ StartTest(t => {
             {country: 'Croatia',   firstname: 'Grgur',   githubId: 'grgur',         lastname: 'Grisogono'},
             {country: 'Slovakia',  firstname: 'Jozef',   githubId: 'jsakalos',      lastname: 'Sakalos'},
             {country: 'Argentina', firstname: 'Max',     githubId: 'elmasse',       lastname: 'Fierro'},
+            {country: 'France',    firstname: 'Nigel',   githubId: 'NigeWhite',     lastname: 'White'},
             {country: 'Germany',   firstname: 'Nils',    githubId: 'mrsunshine',    lastname: 'Dehl'},
             {country: 'USA',       firstname: 'Rich',    githubId: 'rwaters',       lastname: 'Waters'},
             {country: 'Germany',   firstname: 'Tobias',  githubId: 'tobiu2',        lastname: 'Uhlig2'},
             {country: 'Germany',   firstname: 'Tobias',  githubId: 'tobiu',         lastname: 'Uhlig'},
-            {country: 'France',    firstname: 'Nigel',   githubId: 'NigeWhite',     lastname: 'White'}
         ], 'collection2.getRange()');
 
         collection2.clearSorters(true);
@@ -251,4 +251,4 @@ StartTest(t => {
         t.isStrict(collection3.getCount(), 5, 'collection3 count is 5');
         t.isStrict(collection3.allItems.getCount(), 9, 'collection3 allItems count is 9');
     });
-});
+});