neo.mjs 8.10.1 → 8.12.0

package/src/selection/table/CellModel.mjs

@@ -54,76 +54,80 @@ class CellModel extends BaseModel {
      * @param {Object} data
      */
     onKeyDownDown(data) {
-        this.onNavKeyRow(data, 1)
+        this.onNavKeyRow(1)
     }
 
     /**
      * @param {Object} data
      */
     onKeyDownLeft(data) {
-        this.onNavKeyColumn(data, -1)
+        this.onNavKeyColumn(-1)
     }
 
     /**
      * @param {Object} data
      */
     onKeyDownRight(data) {
-        this.onNavKeyColumn(data, 1)
+        this.onNavKeyColumn(1)
     }
 
     /**
      * @param {Object} data
      */
     onKeyDownUp(data) {
-        this.onNavKeyRow(data, -1)
+        this.onNavKeyRow(-1)
     }
 
     /**
-     * @param {Object} data
      * @param {Number} step
      */
-    onNavKeyColumn(data, step) {
-        let me            = this,
-            {view}        = me,
-            idArray       = data.path[0].id.split('__'),
-            currentColumn = idArray[2],
-            dataFields    = view.parent.columns.map(c => c.dataField),
-            newIndex      = (dataFields.indexOf(currentColumn) + step) % dataFields.length,
-            id;
+    onNavKeyColumn(step) {
+        let me                 = this,
+            {dataFields, view} = me,
+            {store}            = view,
+            currentColumn, newIndex, record;
+
+        if (me.hasSelection()) {
+            currentColumn = view.getDataField(me.items[0]);
+            record        = view.getRecord(me.items[0])
+        } else {
+            currentColumn = dataFields[0];
+            record        = store.getAt(0)
+        }
+
+        newIndex = (dataFields.indexOf(currentColumn) + step) % dataFields.length;
 
         while (newIndex < 0) {
             newIndex += dataFields.length
         }
 
-        idArray[2] = dataFields[newIndex];
-        id = idArray.join('__');
-
-        me.select(id);
-        view.focus(id)
+        me.select(view.getCellId(record, dataFields[newIndex]))
     }
 
     /**
-     * @param {Object} data
      * @param {Number} step
      */
-    onNavKeyRow(data, step) {
-        let me       = this,
-            {view}   = me,
-            {store}  = view,
-            idArray  = data.path[0].id.split('__'),
-            recordId = idArray[1],
-            newIndex = (store.indexOf(recordId) + step) % store.getCount(),
-            id;
+    onNavKeyRow(step) {
+        let me           = this,
+            {view}       = me,
+            {store}      = view,
+            currentIndex = 0,
+            dataField, newIndex;
+
+        if (me.hasSelection()) {
+            currentIndex = store.indexOf(view.getRecord(me.items[0]));
+            dataField    = view.getDataField(me.items[0])
+        } else {
+            dataField = me.dataFields[0]
+        }
+
+        newIndex = (currentIndex + step) % store.getCount();
 
         while (newIndex < 0) {
             newIndex += store.getCount()
         }
 
-        idArray[1] = store.getKeyAt(newIndex);
-        id = idArray.join('__');
-
-        me.select(id);
-        view.focus(id)
+        me.select(view.getCellId(store.getAt(newIndex), dataField))
     }
 
     /**
@@ -133,13 +137,14 @@ class CellModel extends BaseModel {
         super.register(component);
 
         let me         = this,
-            {id, view} = me;
+            {id, view} = me,
+            scope      = id;
 
         view.keys?._keys.push(
-            {fn: 'onKeyDownDown'  ,key: 'Down'  ,scope: id},
-            {fn: 'onKeyDownLeft'  ,key: 'Left'  ,scope: id},
-            {fn: 'onKeyDownRight' ,key: 'Right' ,scope: id},
-            {fn: 'onKeyDownUp'    ,key: 'Up'    ,scope: id}
+            {fn: 'onKeyDownDown'  ,key: 'Down'  ,scope},
+            {fn: 'onKeyDownLeft'  ,key: 'Left'  ,scope},
+            {fn: 'onKeyDownRight' ,key: 'Right' ,scope},
+            {fn: 'onKeyDownUp'    ,key: 'Up'    ,scope}
         )
     }
 
@@ -147,13 +152,15 @@ class CellModel extends BaseModel {
      *
      */
     unregister() {
-        let {id, view} = this;
+        let me         = this,
+            {id, view} = me,
+            scope      = id;
 
         view.keys?.removeKeys([
-            {fn: 'onKeyDownDown'  ,key: 'Down'  ,scope: id},
-            {fn: 'onKeyDownLeft'  ,key: 'Left'  ,scope: id},
-            {fn: 'onKeyDownRight' ,key: 'Right' ,scope: id},
-            {fn: 'onKeyDownUp'    ,key: 'Up'    ,scope: id}
+            {fn: 'onKeyDownDown'  ,key: 'Down'  ,scope},
+            {fn: 'onKeyDownLeft'  ,key: 'Left'  ,scope},
+            {fn: 'onKeyDownRight' ,key: 'Right' ,scope},
+            {fn: 'onKeyDownUp'    ,key: 'Up'    ,scope}
         ]);
 
         super.unregister()

package/src/selection/table/CellRowModel.mjs

@@ -1,7 +1,5 @@
 import CellModel from './CellModel.mjs';
 import NeoArray  from '../../util/Array.mjs';
-import RowModel  from './RowModel.mjs';
-import VDomUtil  from '../../util/VDom.mjs';
 
 /**
  * @class Neo.selection.table.CellRowModel
@@ -71,39 +69,39 @@ class CellRowModel extends CellModel {
      * @param {Object} data
      */
     onCellClick(data) {
-        let me   = this,
-            node = RowModel.getRowNode(data.data.path), // we could add a separate export for this method
-            id   = node?.id;
+        let me     = this,
+            record = me.view.getRecord(data.data.currentTarget),
+            rowId  = me.view.getRowId(record);
 
-        if (id) {
+        if (rowId) {
             me.deselectAllRows(true);
-            me.selectRow(id)
+            me.selectRow(rowId)
         }
 
         super.onCellClick(data)
     }
 
     /**
-     * @param {Object} data
      * @param {Number} step
      */
-    onNavKeyRow(data, step) {
-        super.onNavKeyRow(data, step);
-
-        let me         = this,
-            node       = RowModel.getRowNode(data.path),
-            {view}     = me,
-            {store}    = view,
-            vdomNode   = VDomUtil.find(view.vdom, node.id),
-            newIndex   = (vdomNode.index + step) % store.getCount(),
-            parentNode = vdomNode.parentNode,
+    onNavKeyRow(step) {
+        super.onNavKeyRow(step);
+
+        let me           = this,
+            {view}       = me,
+            {store}      = view,
+            countRecords = store.getCount(),
+            rowId        = me.selectedRowIds[0] || view.getRowId(store.getAt(0)),
+            record       = view.getRecord(rowId),
+            index        = store.indexOf(record),
+            newIndex     = (index + step) % countRecords,
             id;
 
         while (newIndex < 0) {
-            newIndex += store.getCount()
+            newIndex += countRecords
         }
 
-        id = parentNode.cn[newIndex].id;
+        id = view.getRowId(store.getAt(newIndex));
 
         if (id) {
             me.deselectAllRows(true);

package/src/selection/table/ColumnModel.mjs

@@ -44,51 +44,19 @@ class ColumnModel extends BaseModel {
         super.destroy(...args)
     }
 
-    /**
-     * @param {Object} eventPath
-     * @returns {String|null} cellId
-     */
-    static getCellId(eventPath) {
-        let id   = null,
-            i    = 0,
-            len  = eventPath.length;
-
-        for (; i < len; i++) {
-            if (eventPath[i].tagName === 'td') {
-                id = eventPath[i].id;
-                break
-            }
-        }
-
-        return id
-    }
-
-    /**
-     * todo: move to table.Container or view
-     * @param {String} cellId
-     * @param {Array} columns
-     * @returns {Number} index
-     */
-    static getColumnIndex(cellId, columns) {
-        let idArray       = cellId.split('__'),
-            currentColumn = idArray[2],
-            dataFields    = columns.map(c => c.dataField);
-
-        return dataFields.indexOf(currentColumn)
-    }
-
     /**
      * @param {Object} data
      */
     onCellClick(data) {
-        let me              = this,
-            {headerToolbar} = me.view.parent,
-            id              = data.data.currentTarget,
-            columnNodeIds, index;
+        let me     = this,
+            {view} = me,
+            cellId = data.data.currentTarget,
+            columnNodeIds, dataField, index;
 
-        if (id) {
-            index         = ColumnModel.getColumnIndex(id, headerToolbar.items);
-            columnNodeIds = VDomUtil.getColumnNodesIds(me.view.vdom, index);
+        if (cellId) {
+            dataField     = view.getDataField(cellId);
+            index         = view.getColumn(dataField, true);
+            columnNodeIds = VDomUtil.getColumnNodesIds(view.vdom, index);
 
             me.select(columnNodeIds)
         }
@@ -98,41 +66,39 @@ class ColumnModel extends BaseModel {
      * @param {Object} data
      */
     onKeyDownLeft(data) {
-        this.onNavKeyColumn(data, -1)
+        this.onNavKeyColumn(-1)
     }
 
     /**
      * @param {Object} data
      */
     onKeyDownRight(data) {
-        this.onNavKeyColumn(data, 1)
+        this.onNavKeyColumn(1)
     }
 
     /**
-     * @param {Object} data
      * @param {Number} step
      */
-    onNavKeyColumn(data, step) {
-        let me            = this,
-            idArray       = ColumnModel.getCellId(data.path).split('__'),
-            currentColumn = idArray[2],
-            {view}        = me,
-            dataFields    = view.parent.columns.map(c => c.dataField),
-            newIndex      = (dataFields.indexOf(currentColumn) + step) % dataFields.length,
-            columnNodeIds, id, tbodyNode;
-
-        while (newIndex < 0) {
-            newIndex += dataFields.length
+    onNavKeyColumn(step) {
+        let me                 = this,
+            {dataFields, view} = me,
+            columnNodeIds, currentColumn, index;
+
+        if (me.hasSelection()) {
+            currentColumn = view.getDataField(me.items[0])
+        } else {
+            currentColumn = dataFields[0]
         }
 
-        idArray[2] = dataFields[newIndex];
-        id = idArray.join('__');
+        index = (dataFields.indexOf(currentColumn) + step) % dataFields.length;
+
+        while (index < 0) {
+            index += dataFields.length
+        }
 
-        tbodyNode     = VDomUtil.find(me.view.vdom, {tag: 'tbody'}).vdom;
-        columnNodeIds = VDomUtil.getColumnNodesIds(tbodyNode, newIndex);
+        columnNodeIds = VDomUtil.getColumnNodesIds(view.vdom, index);
 
-        me.select(columnNodeIds);
-        view.focus(id) // we have to focus one cell to ensure the keynav keeps working
+        me.select(columnNodeIds)
     }
 
     /**

package/src/selection/table/RowModel.mjs

@@ -1,5 +1,4 @@
 import BaseModel from './BaseModel.mjs';
-import VDomUtil  from '../../util/VDom.mjs';
 
 /**
  * @class Neo.selection.table.RowModel
@@ -44,76 +43,45 @@ class RowModel extends BaseModel {
         super.destroy(...args)
     }
 
-    /**
-     * Finds the matching table row for a given row index
-     * @param {Number} index row index
-     * @returns {String|null} The table row node id
-     */
-    getRowId(index) {
-        if (index < 0 || this.view.store.getCount() < index) {
-            return null
-        }
-
-        return this.view.vdom.cn[0].cn[1].cn[index].id
-    }
-
-    /**
-     * Finds the matching table row for a given event path
-     * @param {Object} path The event path
-     * @returns {Object|null} The node containing the table row class or null
-     * @protected
-     */
-    static getRowNode(path) {
-        let i    = 0,
-            len  = path.length,
-            node = null;
-
-        for (; i < len; i++) {
-            if (path[i].cls.includes('neo-table-row')) {
-                node = path[i]
-            }
-        }
-
-        return node
-    }
-
     /**
      * @param {Object} data
      */
     onKeyDownDown(data) {
-        this.onNavKeyRow(data, 1)
+        this.onNavKeyRow(1)
     }
 
     /**
      * @param {Object} data
      */
     onKeyDownUp(data) {
-        this.onNavKeyRow(data, -1)
+        this.onNavKeyRow(-1)
     }
 
     /**
-     * @param {Object} data
      * @param {Number} step
      */
-    onNavKeyRow(data, step) {
+    onNavKeyRow(step) {
         let me           = this,
-            node         = RowModel.getRowNode(data.path),
             {view}       = me,
             {store}      = view,
-            vdomNode     = VDomUtil.find(view.vdom, node.id),
-            newIndex     = (vdomNode.index + step) % store.getCount(),
-            {parentNode} = vdomNode,
-            id;
+            currentIndex = 0,
+            newIndex, newRecord, rowId;
+
+        if (me.hasSelection()) {
+            currentIndex = store.indexOf(view.getRecordByRowId(me.items[0]))
+        }
+
+        newIndex = (currentIndex + step) % store.getCount();
 
         while (newIndex < 0) {
             newIndex += store.getCount()
         }
 
-        id = parentNode.cn[newIndex].id;
+        newRecord = store.getAt(newIndex);
+        rowId     = view.getRowId(newRecord);
 
-        if (id) {
-            me.select(id);
-            view.focus(id);
+        if (rowId) {
+            me.select(rowId);
 
             view.fire('select', {
                 record: store.getAt(newIndex)
@@ -134,7 +102,7 @@ class RowModel extends BaseModel {
             me.toggleSelection(id);
 
             isSelected = me.isSelected(id);
-            record     = view.store.getAt(VDomUtil.find(view.vdom, id).index);
+            record     = view.getRecord(id);
 
             !isSelected && view.onDeselect?.(record);
 

package/src/table/Container.mjs

@@ -192,7 +192,7 @@ class Container extends BaseContainer {
                 headerToolbar.createItems()
             }
 
-            me.view?.createViewData(me.store.items)
+            me.view?.createViewData()
         }
     }
 
@@ -407,12 +407,12 @@ class Container extends BaseContainer {
     }
 
     /**
-     * @param {Array} inputData
+     *
      */
-    createViewData(inputData) {
+    createViewData() {
         let me = this;
 
-        me.view.createViewData(inputData);
+        me.view.createViewData();
 
         if (me.useCustomScrollbars && me.scrollbarsCssApplied === false) {
             me.applyCustomScrollbarsCss()
@@ -478,7 +478,7 @@ class Container extends BaseContainer {
         let me = this;
 
         if (me.rendered) {
-            me.createViewData(data);
+            me.createViewData();
 
             if (me.store.sorters.length < 1) {
                 me.removeSortingCss()
@@ -486,7 +486,7 @@ class Container extends BaseContainer {
         } else {
             me.on('rendered', () => {
                 me.timeout(50).then(() => {
-                    me.createViewData(data)
+                    me.createViewData()
                 })
             }, me, {once: true})
         }

package/src/table/View.mjs

@@ -67,7 +67,7 @@ class View extends Component {
          * @member {Object} _vdom={tag: 'tbody', cn : []}
          */
         _vdom:
-        {tag: 'tbody', cn: []}
+        {tag: 'tbody', tabIndex: -1, cn: []}
     }
 
     /**
@@ -189,11 +189,10 @@ class View extends Component {
         }
 
         cellConfig = {
-            tag     : 'td',
-            id      : cellId,
-            cls     : cellCls,
-            style   : rendererOutput.style || {},
-            tabIndex: '-1'
+            tag  : 'td',
+            id   : cellId,
+            cls  : cellCls,
+            style: rendererOutput.style || {}
         };
 
         if (colspan && Object.keys(colspan).includes(dataField)) {
@@ -260,11 +259,10 @@ class View extends Component {
         }
 
         tableRow = {
-            tag     : 'tr',
+            tag: 'tr',
             id,
-            cls     : trCls,
-            cn      : [],
-            tabIndex: '-1'
+            cls: trCls,
+            cn : []
         };
 
         for (i=0; i < colCount; i++) {
@@ -312,17 +310,17 @@ class View extends Component {
     }
 
     /**
-     * @param {Object[]} inputData
+     *
      */
-    createViewData(inputData) {
-        let me             = this,
-            amountRows     = inputData.length,
-            i              = 0,
-            rows           = [],
-            {selectedRows} = me;
-
-        for (; i < amountRows; i++) {
-            rows.push(me.createRow({record: inputData[i], rowIndex: i}))
+    createViewData() {
+        let me                    = this,
+            {selectedRows, store} = me,
+            countRecords          = store.getCount(),
+            i                     = 0,
+            rows                  = [];
+
+        for (; i < countRecords; i++) {
+            rows.push(me.createRow({record: store.items[i], rowIndex: i}))
         }
 
         me.vdom.cn = rows;
@@ -409,6 +407,14 @@ class View extends Component {
         return null
     }
 
+    /**
+     * @param {String} cellId
+     * @returns {String}
+     */
+    getDataField(cellId) {
+        return cellId.split('__')[2]
+    }
+
     /**
      * Get the matching record by passing a row id, a cell id or an id inside a table cell.
      * @param {String} nodeId