Merge pull request #56 from mikproto/master

Viewport correct before edit validation
revolist · Oct 1, 2020 · 21a962c · 21a962c
2 parents e0d780b + ac94b4f
commit 21a962c
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 17 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@revolist/revogrid",
-  "version": "1.5.17",
+  "version": "1.5.18",
   "description": "Virtual reactive data grid component - RevoGrid.",
   "license": "MIT",
   "bugs": {

diff --git a/src/components/data/columnService.ts b/src/components/data/columnService.ts
@@ -40,7 +40,12 @@ export default class ColumnService implements ColumnServiceI {
   isReadOnly(r: number, c: number): boolean {
     const readOnly: RevoGrid.ReadOnlyFormat = this.columns[c]?.readonly;
     if (typeof readOnly === 'function') {
-      return readOnly(this.rowDataModel(r, c));
+      const data = this.rowDataModel(r, c);
+      // quick fix, remove
+      if (!data) {
+        return true;
+      }
+      return readOnly(data);
     }
     return readOnly;
   }
@@ -56,7 +61,12 @@ export default class ColumnService implements ColumnServiceI {
     };
     const extraPropsFunc = this.columns[c]?.cellProperties;
     if (extraPropsFunc) {
-      const extra = extraPropsFunc(this.rowDataModel(r, c));
+      const data = this.rowDataModel(r, c);
+      // quick fix, remove
+      if (!data) {
+        return props;
+      }
+      const extra = extraPropsFunc(data);
       if (!extra) {
         return props;
       }
@@ -80,7 +90,12 @@ export default class ColumnService implements ColumnServiceI {
   customRenderer(r: number, c: number): VNode | string | void {
     const tpl = this.columns[c]?.cellTemplate;
     if (tpl) {
-      return tpl(h as unknown as RevoGrid.HyperFunc<VNode>, this.rowDataModel(r, c));
+      const data = this.rowDataModel(r, c);
+      // quick fix, remove
+      if (!data) {
+        return;
+      }
+      return tpl(h as unknown as RevoGrid.HyperFunc<VNode>, data);
     }
     return;
   }
@@ -92,27 +107,37 @@ export default class ColumnService implements ColumnServiceI {
   }
 
   getCellData(r: number, c: number): string {
-    const {prop, model} = this.rowDataModel(r, c);
-    return ColumnService.getData(model[prop as number]);
+    const data = this.rowDataModel(r, c);
+    // quick fix, remove
+    if (!data) {
+      return '';
+    }
+    return ColumnService.getData(data.model[data.prop as number]);
   }
 
   getSaveData(rowIndex: number, c: number, val?: string): BeforeSaveDataDetails {
-    const {prop, model } = this.rowDataModel(rowIndex, c);
     if (typeof val === 'undefined') {
       val = this.getCellData(rowIndex, c)
     }
-    return { prop, rowIndex, val, model, type: this.dataStore.get('type')};
+    const data = this.rowDataModel(rowIndex, c);
+    if (!data) {
+      throw new Error('Data expcted');
+    }
+    return { prop: data.prop, rowIndex, val, model: data.model, type: this.dataStore.get('type')};
   }
 
   getCellEditor(_r: number, c: number): string | undefined {
     return this.columns[c]?.editor;
   }
 
-  rowDataModel(r: number, c: number): ColumnDataSchemaModel {
+  rowDataModel(r: number, c: number): ColumnDataSchemaModel|void {
     const column = this.columns[c];
     const prop: ColumnProp | undefined = column?.prop;
 
     const data: DataSource = this.dataStore.get('items');
+    if (!data[r]) {
+      return;
+    }
     const model: DataType = data[r] || {};
     return {prop, model, data, column};
   }

diff --git a/src/components/data/revogr-data.tsx b/src/components/data/revogr-data.tsx
@@ -49,7 +49,7 @@ export class RevogrData {
     }
     const rowsEls: VNode[] = [];
     for (let row of this.rows) {
-      const cells: VNode[] = [];
+      const cells: (VNode|string|void)[] = [];
       const rowClass = this.rowClass ? this.columnService.getRowClass(row.itemIndex, this.rowClass) : '';
       for (let col of this.cols) {
         cells.push(this.getCellRenderer(row, col));
@@ -59,7 +59,7 @@ export class RevogrData {
     return rowsEls;
   }
 
-  private getCellRenderer(row: RevoGrid.VirtualPositionItem, col: RevoGrid.VirtualPositionItem): VNode {
+  private getCellRenderer(row: RevoGrid.VirtualPositionItem, col: RevoGrid.VirtualPositionItem): VNode|string|void {
     const defaultProps: RevoGrid.CellProps = {
       [DATA_COL]: col.itemIndex,
       [DATA_ROW]: row.itemIndex,
@@ -73,9 +73,13 @@ export class RevogrData {
     if (custom) {
       return <div {...props}>{custom}</div>;
     }
+    const model = this.columnService.rowDataModel(row.itemIndex, col.itemIndex);
+    if (!model) {
+      return;
+    }
     return <div {...props}>
       <CellRenderer
-        model={this.columnService.rowDataModel(row.itemIndex, col.itemIndex)}
+        model={model}
         canDrag={this.canDrag}
         onDragStart={(e) => this.dragStartCell.emit(e)}/>
     </div>;

diff --git a/src/index.html b/src/index.html
@@ -53,14 +53,14 @@
 <body>
     <div class="tile large">
       <div>
-        <revo-grid theme="material2"></revo-grid>
+        <revo-grid style="height: 345px" theme="material"></revo-grid>
       </div>
     </div>
 
     <script type="module">
         import {generateFakeDataObject} from "/utilsExternal/generate-data.js";
 
-        const data = generateFakeDataObject(1000, 100);
+        const data = generateFakeDataObject(207, 4);
         const grid = document.querySelector('revo-grid');
 
         grid.columns = data.headers;

diff --git a/src/utilsExternal/generate-data.js b/src/utilsExternal/generate-data.js
@@ -30,12 +30,18 @@ export function generateFakeDataObject(rowsNumber, colsNumber) {
                     }, props.model[props.prop] || '');
                 } */
             }
+            if (col === 1) {
+                columns[col].cellTemplate = (h, props) => {
+                    console.log(props.model);
+                    return props.model[props.prop];
+                }
+            }
         }
     }
     const pinnedTopRows = result[10] && [result[10]] || [];
     const pinnedBottomRows = result[1] && [result[1]] || [];
     let headers = Object.keys(columns).map((k) => columns[k]);
-    const grouped = headers.splice(1, 4);
+    // const grouped = headers.splice(1, 4);
     /* const grouped2 = grouped.splice(0, 2);
     grouped.push({
         name: 'Grouped2',
@@ -45,10 +51,10 @@ export function generateFakeDataObject(rowsNumber, colsNumber) {
 
     const grouped4 = headers.splice(1, 3);
     */ 
-    headers.splice(6, 0, ...[{
+    /* headers.splice(6, 0, ...[{
         name: 'Grouped',
         children: grouped
-    }]);
+    }]); */
     /*
     headers.splice(1, 0, ...[{
         name: 'Grouped3',