neo.mjs 4.4.2 → 4.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "4.4.2",
+    "version": "4.4.3",
     "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
@@ -448,6 +476,25 @@ 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;
+
+        for (; i <= headerlessIndex; i++) {
+            if (records[i].isHeader) {
+                delta++;
+            }
+        }
+
+        return headerlessIndex + delta;
+    }
+
     /**
      * @param {Number|String} recordId
      * @returns {String}
@@ -456,6 +503,28 @@ 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,
+            len             = records.length;
+
+        for (; i < len; i++) {
+            if (!records[i].isHeader) {
+                headerlessIndex++;
+
+                if (headerlessIndex === index) {
+                    return i;
+                }
+            }
+        }
+    }
+
     /**
      * @param {String} vnodeId
      * @returns {String|Number} itemId