diff --git a/CHANGELOG.md b/CHANGELOG.md index 44e2841..7129c49 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,9 @@ Links "DE#nnn" prior to version 2.0 point to the Dash Enterprise closed-source D - [#312](https://github.com/plotly/dash-ag-grid/issues/312) fixing issue where `scrollTo` was defaulting to not reset the value - to maintain scroll position during a grid rerender, be sure to use `getRowId` - fixing side issue where `cellDoubleClicked` was forcing the grid to rerender + - [#331](https://github.com/plotly/dash-ag-grid/pull/331) + - adjusted `setProps` -> `customSetProps` which tests if the grid is active in the dash tree and mounted. + - [#307](https://github.com/plotly/dash-ag-grid/issues/307) fixes JS console error because `setProps` is no longer called when unmounted. ### Added - [#330](https://github.com/plotly/dash-ag-grid/pull/330) Added `dash_clientside` to available functions for easier on-liner functions, esp. `eventListeners`. diff --git a/src/lib/fragments/AgGrid.react.js b/src/lib/fragments/AgGrid.react.js index 84df8aa..74454cc 100644 --- a/src/lib/fragments/AgGrid.react.js +++ b/src/lib/fragments/AgGrid.react.js @@ -168,6 +168,12 @@ export default class DashAgGrid extends Component { const customComponents = window.dashAgGridComponentFunctions || {}; const newComponents = map(this.generateRenderer, customComponents); + this.active = true; + this.customSetProps = (propsToSet) => { + if (this.active) { + this.props.setProps(propsToSet); + } + }; this.convertedPropCache = {}; @@ -192,10 +198,9 @@ export default class DashAgGrid extends Component { } onPaginationChanged() { - const {setProps} = this.props; const {gridApi} = this.state; if (gridApi && !gridApi?.isDestroyed()) { - setProps({ + this.customSetProps({ paginationInfo: { isLastPageFound: gridApi.paginationIsLastPageFound(), pageSize: gridApi.paginationGetPageSize(), @@ -347,12 +352,13 @@ export default class DashAgGrid extends Component { } callbackGetDetail = (params) => { - const {setProps} = this.props; const {data} = params; this.getDetailParams = params; // Adding the current time in ms forces Dash to trigger a callback // when the same row is closed and re-opened. - setProps({getDetailRequest: {data: data, requestTime: Date.now()}}); + this.customSetProps({ + getDetailRequest: {data: data, requestTime: Date.now()}, + }); }; convertCol(columnDef) { @@ -502,7 +508,7 @@ export default class DashAgGrid extends Component { } onFilterChanged() { - const {setProps, rowModelType} = this.props; + const {rowModelType} = this.props; if (!this.state.gridApi) { return; } @@ -512,7 +518,7 @@ export default class DashAgGrid extends Component { propsToSet.virtualRowData = this.virtualRowData(); } - setProps(propsToSet); + this.customSetProps(propsToSet); } getRowData() { @@ -538,20 +544,20 @@ export default class DashAgGrid extends Component { } syncRowData() { - const {rowData, setProps} = this.props; + const {rowData} = this.props; if (rowData) { const virtualRowData = this.virtualRowData(); const newRowData = this.getRowData(); if (rowData !== newRowData) { - setProps({rowData: newRowData, virtualRowData}); + this.customSetProps({rowData: newRowData, virtualRowData}); } else { - setProps({virtualRowData}); + this.customSetProps({virtualRowData}); } } } onSortChanged() { - const {setProps, rowModelType} = this.props; + const {rowModelType} = this.props; const propsToSet = {}; if (rowModelType === 'clientSide') { propsToSet.virtualRowData = this.virtualRowData(); @@ -561,7 +567,7 @@ export default class DashAgGrid extends Component { JSON.stringify(this.state.gridApi.getColumnState()) ); } - setProps(propsToSet); + this.customSetProps(propsToSet); } componentDidMount() { @@ -574,7 +580,7 @@ export default class DashAgGrid extends Component { componentWillUnmount() { this.setState({mounted: false, gridApi: null}); - this.props.setProps = () => {}; + this.active = false; if (this.props.id) { delete agGridRefs[this.props.id]; eventBus.remove(this.props.id); @@ -628,7 +634,6 @@ export default class DashAgGrid extends Component { getDetailResponse, detailCellRendererParams, masterDetail, - setProps, id, resetColumnState, csvExportParams, @@ -735,7 +740,7 @@ export default class DashAgGrid extends Component { } if (!isEmpty(propsToSet)) { - setProps(propsToSet); + this.customSetProps(propsToSet); } // Hydrate virtualRowData this.onFilterChanged(true); @@ -750,7 +755,7 @@ export default class DashAgGrid extends Component { if (this.isDatasourceLoadedForInfiniteScrolling()) { const {rowData, rowCount} = this.props.getRowsResponse; this.getRowsParams.successCallback(rowData, rowCount); - setProps({getRowsResponse: null}); + this.customSetProps({getRowsResponse: null}); } if ( @@ -759,7 +764,7 @@ export default class DashAgGrid extends Component { getDetailResponse ) { this.getDetailParams.successCallback(getDetailResponse); - setProps({getDetailResponse: null}); + this.customSetProps({getDetailResponse: null}); } // Call the API to select rows unless the update was triggered by a selection made in the UI if ( @@ -835,8 +840,7 @@ export default class DashAgGrid extends Component { onRowDataUpdated() { // Handles preserving existing selections when rowData is updated in a callback - const {selectedRows, setProps, rowData, rowModelType, filterModel} = - this.props; + const {selectedRows, rowData, rowModelType, filterModel} = this.props; const {openGroups, gridApi} = this.state; if (gridApi && !gridApi?.isDestroyed()) { @@ -847,7 +851,7 @@ export default class DashAgGrid extends Component { if (rowData && rowModelType === 'clientSide') { const virtualRowData = this.virtualRowData(); - setProps({virtualRowData}); + this.customSetProps({virtualRowData}); } // When the rowData is updated, reopen any row groups if they previously existed in the table @@ -883,7 +887,7 @@ export default class DashAgGrid extends Component { // Flag that the selection event was fired this.selectionEventFired = true; const selectedRows = this.state.gridApi.getSelectedRows(); - this.props.setProps({selectedRows}); + this.customSetProps({selectedRows}); } }, 1); } @@ -902,7 +906,7 @@ export default class DashAgGrid extends Component { return { getRows(params) { self.getRowsParams = params; - self.props.setProps({getRowsRequest: params}); + self.customSetProps({getRowsRequest: params}); }, destroy() { @@ -950,14 +954,14 @@ export default class DashAgGrid extends Component { onCellClicked({value, column: {colId}, rowIndex, node}) { const timestamp = Date.now(); - this.props.setProps({ + this.customSetProps({ cellClicked: {value, colId, rowIndex, rowId: node.id, timestamp}, }); } onCellDoubleClicked({value, column: {colId}, rowIndex, node}) { const timestamp = Date.now(); - this.props.setProps({ + this.customSetProps({ cellDoubleClicked: { value, colId, @@ -1002,7 +1006,7 @@ export default class DashAgGrid extends Component { } // Send update(s) for current change session to Dash. const virtualRowData = this.virtualRowData(); - this.props.setProps({ + this.customSetProps({ cellValueChanged: this.pendingCellValueChanges, virtualRowData, }); @@ -1036,7 +1040,7 @@ export default class DashAgGrid extends Component { } updateColumnWidths(setColumns = true) { - const {columnSize, columnSizeOptions, setProps} = this.props; + const {columnSize, columnSizeOptions} = this.props; const {gridApi} = this.state; if (gridApi && !gridApi?.isDestroyed()) { const { @@ -1063,7 +1067,7 @@ export default class DashAgGrid extends Component { }); } if (columnSize !== 'responsiveSizeToFit') { - setProps({columnSize: null}); + this.customSetProps({columnSize: null}); } if (setColumns) { this.updateColumnState(); @@ -1089,7 +1093,7 @@ export default class DashAgGrid extends Component { dash_clientside, ...customFunctions, ...window.dashAgGridFunctions, - setGridProps: this.props.setProps, + setGridProps: this.customSetProps, }; return (params) => evaluate(parsedCondition, {params, ...context}); }); @@ -1136,12 +1140,12 @@ export default class DashAgGrid extends Component { } generateRenderer(Renderer) { - const {setProps, dangerously_allow_code} = this.props; + const {dangerously_allow_code} = this.props; return (props) => ( { - setProps({ + this.customSetProps({ cellRendererData: { value, colId: props.column.colId, @@ -1180,7 +1184,7 @@ export default class DashAgGrid extends Component { this.convertAllProps(csvExportParams) ); if (reset) { - this.props.setProps({ + this.customSetProps({ exportDataAsCsv: false, }); } @@ -1208,7 +1212,7 @@ export default class DashAgGrid extends Component { gridApi.paginationGoToPage(this.props.paginationGoTo); } if (reset) { - this.props.setProps({ + this.customSetProps({ paginationGoTo: null, }); } @@ -1216,7 +1220,7 @@ export default class DashAgGrid extends Component { scrollTo(reset = true) { const {gridApi} = this.state; - const {scrollTo, setProps, getRowId} = this.props; + const {scrollTo, getRowId} = this.props; if (!gridApi) { return; } @@ -1252,7 +1256,7 @@ export default class DashAgGrid extends Component { gridApi.ensureColumnVisible(scrollTo.column, columnPosition); } if (reset) { - setProps({ + this.customSetProps({ scrollTo: null, }); } @@ -1264,7 +1268,7 @@ export default class DashAgGrid extends Component { } this.state.gridApi.resetColumnState(); if (reset) { - this.props.setProps({ + this.customSetProps({ resetColumnState: false, }); this.updateColumnState(); @@ -1281,7 +1285,7 @@ export default class DashAgGrid extends Component { this.state.gridApi.selectAll(); } if (reset) { - this.props.setProps({ + this.customSetProps({ selectAll: false, }); } @@ -1293,7 +1297,7 @@ export default class DashAgGrid extends Component { } this.state.gridApi.deselectAll(); if (reset) { - this.props.setProps({ + this.customSetProps({ deselectAll: false, }); } @@ -1306,7 +1310,7 @@ export default class DashAgGrid extends Component { const sel = this.state.gridApi.getSelectedRows(); this.state.gridApi.applyTransaction({remove: sel}); if (reset) { - this.props.setProps({ + this.customSetProps({ deleteSelectedRows: false, }); this.syncRowData(); @@ -1324,12 +1328,12 @@ export default class DashAgGrid extends Component { JSON.stringify(this.state.gridApi.getColumnState()) ); - this.props.setProps({ + this.customSetProps({ columnState, updateColumnState: false, }); } else { - this.props.setProps({ + this.customSetProps({ updateColumnState: false, }); } @@ -1354,7 +1358,7 @@ export default class DashAgGrid extends Component { this.setState({rowTransaction: null}); } this.applyRowTransaction(data); - this.props.setProps({ + this.customSetProps({ rowTransaction: null, }); this.syncRowData();