neo.mjs 4.4.2 → 4.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "4.4.2",
+    "version": "4.4.4",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/src/list/Base.mjs

@@ -57,6 +57,12 @@ class Base extends Component {
          * @member {Object} dragZoneConfig=null
          */
         dragZoneConfig: null,
+        /**
+         * In case we are using list item headers and want to bind list item indexes to e.g. a card layout
+         * for e.g. a sidenav, this config comes in handy.
+         * @member {Number|null} headerlessActiveIndex_=null
+         */
+        headerlessActiveIndex_: null,
         /**
          * @member {Boolean} highlightFilterValue=true
          */
@@ -147,12 +153,15 @@ class Base extends Component {
      * @protected
      */
     afterSetActiveIndex(value, oldValue) {
-        let selectionModel = this.selectionModel;
+        let me             = this,
+            selectionModel = me.selectionModel;
 
         if (Neo.isNumber(value)) {
             selectionModel?.selectAt(value);
+            me.headerlessActiveIndex = me.getHeaderlessIndex(value);
         } else if (Neo.isNumber(oldValue)) {
             selectionModel.deselectAll();
+            me.headerlessActiveIndex = null;
         }
     }
 
@@ -209,6 +218,25 @@ class Base extends Component {
         }
     }
 
+    /**
+     * Triggered after the headerlessActiveIndex config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetHeaderlessActiveIndex(value, oldValue) {
+        let me = this,
+            activeIndex;
+
+        if (Neo.isNumber(value)) {
+            activeIndex = me.getActiveIndex(value);
+
+            me.activeIndex = activeIndex;
+        } else if (Neo.isNumber(oldValue)) {
+            me.activeIndex = null;
+        }
+    }
+
     /**
      * Triggered after the selectionModel config got changed
      * @param {Neo.selection.Model} value
@@ -404,10 +432,17 @@ class Base extends Component {
      * @param {Boolean} [silent=false]
      */
     createItems(silent=false) {
-        let me   = this,
-            vdom = me.getVdomRoot(),
+        let me                    = this,
+            headerlessActiveIndex = me.headerlessActiveIndex,
+            vdom                  = me.getVdomRoot(),
             listItem;
 
+        // in case we set headerlessActiveIndex before the store was loaded, activeIndex can be null
+        // and the wanted selection is not initially there
+        if (Neo.isNumber(headerlessActiveIndex) && !Neo.isNumber(me.activeIndex)) {
+            me.afterSetHeaderlessActiveIndex(headerlessActiveIndex, null);
+        }
+
         if (!(me.animate && !me.getPlugin('animate'))) {
             vdom.cn = [];
 
@@ -448,6 +483,31 @@ class Base extends Component {
         });
     }
 
+    /**
+     * Transforms an index excluding list item headers into the real store index
+     * @param {Number} headerlessIndex
+     * @returns {Number}
+     */
+    getActiveIndex(headerlessIndex) {
+        let delta   = 0,
+            i       = 0,
+            records = this.store.items,
+            len     = headerlessIndex;
+
+        if (records.length < 1) {
+            return null;
+        }
+
+        for (; i <= len; i++) {
+            if (records[i].isHeader) {
+                delta++;
+                len++;
+            }
+        }
+
+        return headerlessIndex + delta;
+    }
+
     /**
      * @param {Number|String} recordId
      * @returns {String}
@@ -456,6 +516,25 @@ class Base extends Component {
         return `${this.id}__${recordId}`;
     }
 
+    /**
+     * Returns the index of a list item excluding item headers
+     * @param {Number} index
+     * @returns {Number}
+     */
+    getHeaderlessIndex(index) {
+        let headerlessIndex = 0,
+            i               = 0,
+            records         = this.store.items;
+
+        for (; i < index; i++) {
+            if (!records[i].isHeader) {
+                headerlessIndex++;
+            }
+        }
+
+        return headerlessIndex;
+    }
+
     /**
      * @param {String} vnodeId
      * @returns {String|Number} itemId

package/src/selection/ListModel.mjs

@@ -147,7 +147,7 @@ class ListModel extends Model {
      */
     selectAt(index) {
         let view      = this.view,
-            recordKey = view.store.getKeyAt(index),
+            recordKey = view?.store.getKeyAt(index),
             itemId    = recordKey && view.getItemId(recordKey);
 
         if (itemId) {