diff --git a/README.md b/README.md index 68748ad..508873c 100644 --- 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 index 37a58f6..86f9824 100644 --- 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 ( diff --git a/src/AgGridInput.js b/src/AgGridInput.js index 8e73e79..a560400 100644 --- 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 (