Merge pull request #3 from lowdefy/events-select

feat: create onRowSelect and onSelectionChanged
lowdefy · Mar 12, 2021 · cf1017c · cf1017c
2 parents 5407596 + a1e8ef2
commit cf1017c
Show file tree

Hide file tree

Showing 2 changed files with 231 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -176,6 +176,215 @@ pages:
                   - _state: selected_row.year
 ```
 
+### AgGridAlpine onCellClick Example
+
+```yaml
+name: my-app
+lowdefy: 3.10.1
+types:
+  AgGridAlpine:
+    url: https://blocks-cdn.lowdefy.com/v3.10.1/blocks-aggrid/meta/AgGridAlpine.json
+pages:
+  - id: dashboard
+    type: PageHeaderMenu
+    blocks:
+      - id: my_table
+        type: AgGridAlpine
+        properties:
+          rowData:
+            - title: One
+              year: 2010
+              viewerReviews: 30
+            - title: Two
+              year: 2011
+              viewerReviews: 20
+          defaultColDef:
+            sortable: true
+            resizable: true
+            filter: true
+          columnDefs:
+            - headerName: Title
+              field: title
+              width: 350
+            - headerName: Year
+              field: year
+              width: 100
+            - headerName: Viewer Reviews
+              field: viewerReviews
+              width: 160
+              type: numericColumn
+        events:
+          onCellClick:
+            - id: set_selected
+              type: SetState
+              params:
+                selected_cell: # Update 'selected_cell' in state with the event cell data.
+                  _event: cell
+      - id: selection
+        type: Title
+        properties:
+          level: 4
+          content:
+            _if: # Show the event data in a title, or call to action.
+              test:
+                _eq:
+                  - _state: selected_cell.column
+                  - title
+              then:
+                _string.concat:
+                  - 'Title: '
+                  - _state: selected_cell.value
+              else: 'Select a movie title.'
+```
+
+### AgGridAlpine onRowSelected Example
+
+```yaml
+name: my-app
+lowdefy: 3.10.1
+types:
+  AgGridAlpine:
+    url: https://blocks-cdn.lowdefy.com/v3.10.1/blocks-aggrid/meta/AgGridAlpine.json
+pages:
+  - id: dashboard
+    type: PageHeaderMenu
+    blocks:
+      - id: my_table
+        type: AgGridAlpine
+        properties:
+          rowData:
+            - title: One
+              year: 2010
+              viewerReviews: 30
+            - title: Two
+              year: 2011
+              viewerReviews: 20
+          defaultColDef:
+            sortable: true
+            resizable: true
+            filter: true
+          rowSelection: 'multiple'
+          columnDefs:
+            - headerName: Title
+              field: title
+              width: 350
+              checkboxSelection: true
+            - headerName: Year
+              field: year
+              width: 100
+            - headerName: Viewer Reviews
+              field: viewerReviews
+              width: 160
+              type: numericColumn
+        events:
+          onRowSelected:
+            - id: set_selected
+              type: SetState
+              params:
+                selected_row: # Update 'selected' in state with the event data.
+                  _event: row
+                all_selected:
+                  _event: selected
+      - id: selection
+        type: Title
+        properties:
+          level: 4
+          content:
+            _if: # Show the event data in a title, or call to action.
+              test:
+                _eq:
+                  - _state: selected_row
+                  - null
+              then: 'Click to select a row.'
+              else:
+                _string.concat:
+                  - 'Last Selected - Title: '
+                  - _state: selected_row.title
+                  - ', Year: '
+                  - _state: selected_row.year
+      - id: all_selected
+        type: Title
+        properties:
+          level: 4
+          content:
+            _if: # Show the event data in a title, or call to action.
+              test:
+                _eq:
+                  - _state: all_selected
+                  - null
+              then: 'Select rows.'
+              else:
+                _string.concat:
+                  - 'Total Selected: '
+                  - _array.length:
+                      _state: all_selected
+```
+
+### AgGridAlpine onSelectionChanged Example
+
+```yaml
+name: my-app
+lowdefy: 3.10.1
+types:
+  AgGridAlpine:
+    url: https://blocks-cdn.lowdefy.com/v3.10.1/blocks-aggrid/meta/AgGridAlpine.json
+pages:
+  - id: dashboard
+    type: PageHeaderMenu
+    blocks:
+      - id: my_table
+        type: AgGridAlpine
+        properties:
+          rowData:
+            - title: One
+              year: 2010
+              viewerReviews: 30
+            - title: Two
+              year: 2011
+              viewerReviews: 20
+          defaultColDef:
+            sortable: true
+            resizable: true
+            filter: true
+          rowSelection: 'multiple'
+          columnDefs:
+            - headerName: Title
+              field: title
+              width: 350
+              checkboxSelection: true
+              headerCheckboxSelection: true
+            - headerName: Year
+              field: year
+              width: 100
+            - headerName: Viewer Reviews
+              field: viewerReviews
+              width: 160
+              type: numericColumn
+        events:
+          onSelectionChanged:
+            - id: set_selected
+              type: SetState
+              params:
+                all_selected:
+                  _event: selected
+      - id: all_selected
+        type: Title
+        properties:
+          level: 4
+          content:
+            _if: # Show the event data in a title, or call to action.
+              test:
+                _eq:
+                  - _state: all_selected
+                  - null
+              then: 'Select rows.'
+              else:
+                _string.concat:
+                  - 'Total Selected: '
+                  - _array.length:
+                      _state: all_selected
+```
+
 ## Other Lowdefy Blocks Packages
 
 - [@lowdefy/blocks-template](https://github.com/lowdefy/blocks-template): Lowdefy template for creating blocks.

diff --git a/src/AgGrid.js b/src/AgGrid.js
@@ -27,6 +27,8 @@ class AgGrid extends React.Component {
     this.onGridReady = this.onGridReady.bind(this);
     this.onRowClick = this.onRowClick.bind(this);
     this.onCellClicked = this.onCellClicked.bind(this);
+    this.onRowSelected = this.onRowSelected.bind(this);
+    this.onSelectionChanged = this.onSelectionChanged.bind(this);
   }
 
   onGridReady(params) {
@@ -56,6 +58,24 @@ class AgGrid extends React.Component {
     }
   }
 
+  onRowSelected(event) {
+    if (this.props.events.onRowSelected) {
+      this.props.methods.triggerEvent({
+        name: 'onRowSelected',
+        event: { row: event.data, selected: this.gridApi.getSelectedRows() },
+      });
+    }
+  }
+
+  onSelectionChanged() {
+    if (this.props.events.onSelectionChanged) {
+      this.props.methods.triggerEvent({
+        name: 'onSelectionChanged',
+        event: { selected: this.gridApi.getSelectedRows() },
+      });
+    }
+  }
+
   render() {
     const {
       rowSelection = 'single',
@@ -69,6 +89,8 @@ class AgGrid extends React.Component {
     return (
       <AgGridReact
         rowSelection={rowSelection}
+        onSelectionChanged={this.onSelectionChanged}
+        onRowSelected={this.onRowSelected}
         onRowClicked={this.onRowClick}
         onCellClicked={this.onCellClicked}
         onGridReady={this.onGridReady}