fix: Add rowIndex and colId to events and only change array input at …

…end of move.
lowdefy · Mar 26, 2021 · 48932c5 · 48932c5
1 parent 3a86e9a
commit 48932c5
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 27 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # Lowdefy Blocks for Ag-Grid
 
-This repository provides blocks for [Ag-Grid](https://www.ag-grid.com/), a feature rich javascript grid amd table library.
+This repository provides blocks for [Ag-Grid](https://www.ag-grid.com/), a feature rich javascript grid and table library.
 
 The implementation of these blocks is a minimal wrapper for the [@ag-grid-community/core
 ](https://www.npmjs.com/package/@ag-grid-community/core) package. This means you write normal Ag-Grid config to create tables.
@@ -30,10 +30,22 @@ The block types are hosted at:
 
 ##### All Blocks
 
-- `onCellClick`: Trigger event when a cell is clicked and pass `row: object`, `cell: object` and `selected: object[]` row data to action `_event`.
-- `onRowClick`: Trigger event when a row is clicked and pass `row: object` and `selected: object[]` row data to action `_event`.
-- `onRowSelected`: Trigger event when a row is selected and pass `row: object` and `selected: object[]` row data to action `_event`.
-- `onSelectionChanged`: Triggered when the selected rows is changed and pass `selected: object[]` row data to action `_event`.
+- `onCellClick`: Trigger event when a cell is clicked and pass the following to `_event`:
+  - `row: object`: Row data object.
+  - `cell: object`: Cell data object.
+  - `selected: object[]`: List of selected row objects.
+  - `rowIndex: number`: List index of the clicked row.
+  - `colId: string`: Column id of the clicked cell.
+- `onRowClick`: Trigger event when a row is clicked and pass the following to `_event`:
+  - `row: object`: Row data object.
+  - `selected: object[]`: List of selected row objects.
+  - `rowIndex: number`: List index of the clicked row.
+- `onRowSelected`: Trigger event when a row is selected and pass the following to `_event`:
+  - `row: object`: Row data object.
+  - `selected: object[]`: List of selected row objects.
+  - `rowIndex: number`: List index of the clicked row.
+- `onSelectionChanged`: Triggered when the selected rows is changed and pass the following to `_event`:
+  - `selected: object[]`: List of selected row objects.
 
 ##### Input Blocks
 
@@ -44,7 +56,7 @@ The block types are hosted at:
   - `oldValue: any`: The cell value before the update was made.
   - `rowData: object`: The row data after the cell value has been changed.
   - `rowIndex: number`: Array index of the row for the changed cell.
-- `onRowDragMove`: Triggered when a row is dragged to another position in the grid. The following is passed to the action `_event`:
+- `onRowDragEnd`: Triggered when a row is dragged to another position in the grid. The following is passed to the action `_event`:
   - `fromData: object`: Row data of the row selection which to moved.
   - `fromIndex: number`: Array index of the row selection which to moved.
   - `newRowData: object[]`: The table data with the change applied.

diff --git a/src/AgGrid.js b/src/AgGrid.js
@@ -44,6 +44,7 @@ class AgGrid extends React.Component {
       this.props.methods.triggerEvent({
         name: 'onRowClick',
         event: { row: event.data, selected: this.gridApi.getSelectedRows() },
+        rowIndex: event.rowIndex,
       });
     }
   }
@@ -56,6 +57,8 @@ class AgGrid extends React.Component {
           row: event.data,
           cell: { column: event.colDef.field, value: event.value },
           selected: this.gridApi.getSelectedRows(),
+          rowIndex: event.rowIndex,
+          colId: event.column.colId,
         },
       });
     }
@@ -66,6 +69,7 @@ class AgGrid extends React.Component {
       this.props.methods.triggerEvent({
         name: 'onRowSelected',
         event: { row: event.data, selected: this.gridApi.getSelectedRows() },
+        rowIndex: event.rowIndex,
       });
     }
   }
@@ -80,24 +84,17 @@ class AgGrid extends React.Component {
   }
 
   render() {
-    const {
-      rowSelection = 'single',
-      rowMultiSelectWithClick = this.props.properties.rowSelection === 'multiple',
-      quickFilterValue,
-      ...someProperties
-    } = this.props.properties;
+    const { quickFilterValue, ...someProperties } = this.props.properties;
     if (quickFilterValue && quickFilterValue === '') {
       this.gridApi.setQuickFilter(quickFilterValue); // check if empty string matches all
     }
     return (
       <AgGridReact
-        rowSelection={rowSelection}
         onSelectionChanged={this.onSelectionChanged}
         onRowSelected={this.onRowSelected}
         onRowClicked={this.onRowClick}
         onCellClicked={this.onCellClicked}
         onGridReady={this.onGridReady}
-        rowMultiSelectWithClick={rowMultiSelectWithClick}
         modules={AllCommunityModules}
         {...someProperties}
       />

diff --git a/src/AgGridInput.js b/src/AgGridInput.js
@@ -29,7 +29,7 @@ class AgGridInput extends React.Component {
     this.onCellClicked = this.onCellClicked.bind(this);
     this.onRowSelected = this.onRowSelected.bind(this);
     this.onSelectionChanged = this.onSelectionChanged.bind(this);
-    this.onRowDragMove = this.onRowDragMove.bind(this);
+    this.onRowDragEnd = this.onRowDragEnd.bind(this);
     this.onCellValueChanged = this.onCellValueChanged.bind(this);
   }
 
@@ -45,7 +45,11 @@ class AgGridInput extends React.Component {
     if (this.props.events.onRowClick) {
       this.props.methods.triggerEvent({
         name: 'onRowClick',
-        event: { row: event.data, selected: this.gridApi.getSelectedRows() },
+        event: {
+          row: event.data,
+          selected: this.gridApi.getSelectedRows(),
+          rowIndex: event.rowIndex,
+        },
       });
     }
   }
@@ -58,6 +62,8 @@ class AgGridInput extends React.Component {
           row: event.data,
           cell: { column: event.colDef.field, value: event.value },
           selected: this.gridApi.getSelectedRows(),
+          rowIndex: event.rowIndex,
+          colId: event.column.colId,
         },
       });
     }
@@ -68,6 +74,7 @@ class AgGridInput extends React.Component {
       this.props.methods.triggerEvent({
         name: 'onRowSelected',
         event: { row: event.data, selected: this.gridApi.getSelectedRows() },
+        rowIndex: event.rowIndex,
       });
     }
   }
@@ -81,7 +88,7 @@ class AgGridInput extends React.Component {
     }
   }
 
-  onRowDragMove(event) {
+  onRowDragEnd(event) {
     if (event.overNode !== event.node) {
       const fromData = event.node.data;
       const toData = event.overNode.data;
@@ -95,7 +102,7 @@ class AgGridInput extends React.Component {
       this.gridApi.setRowData(this.props.value);
       this.gridApi.clearFocusedCell();
       this.props.methods.triggerEvent({
-        name: 'onRowDragMove',
+        name: 'onRowDragEnd',
         event: {
           fromData,
           toData,
@@ -125,26 +132,19 @@ class AgGridInput extends React.Component {
   }
 
   render() {
-    const {
-      rowSelection = 'single',
-      rowMultiSelectWithClick = this.props.properties.rowSelection === 'multiple',
-      quickFilterValue,
-      ...someProperties
-    } = this.props.properties;
+    const { quickFilterValue, ...someProperties } = this.props.properties;
     if (quickFilterValue && quickFilterValue === '') {
       this.gridApi.setQuickFilter(quickFilterValue); // check if empty string matches all
     }
     return (
       <AgGridReact
-        rowSelection={rowSelection}
         onSelectionChanged={this.onSelectionChanged}
         onRowSelected={this.onRowSelected}
         onRowClicked={this.onRowClick}
         onCellClicked={this.onCellClicked}
         onGridReady={this.onGridReady}
-        onRowDragMove={this.onRowDragMove}
+        onRowDragEnd={this.onRowDragEnd}
         onCellValueChanged={this.onCellValueChanged}
-        rowMultiSelectWithClick={rowMultiSelectWithClick}
         modules={AllCommunityModules}
         {...someProperties}
         rowData={this.props.value}