Skip to content

Commit f27dd83

Browse files
BSd3vBSd3v
authored
Merge pull request #331 from BSd3v/setProps
creating `customSetProps` to handle `setProps`
2 parents f240ce6 + 878d202 commit f27dd83

File tree

2 files changed

+47
-40
lines changed

2 files changed

+47
-40
lines changed

‎CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@ Links "DE#nnn" prior to version 2.0 point to the Dash Enterprise closed-source D
1414
- [#312](https://github.com/plotly/dash-ag-grid/issues/312) fixing issue where `scrollTo` was defaulting to not reset the value
1515
- to maintain scroll position during a grid rerender, be sure to use `getRowId`
1616
- fixing side issue where `cellDoubleClicked` was forcing the grid to rerender
17+
- [#331](https://github.com/plotly/dash-ag-grid/pull/331)
18+
- adjusted `setProps` -> `customSetProps` which tests if the grid is active in the dash tree and mounted.
19+
- [#307](https://github.com/plotly/dash-ag-grid/issues/307) fixes JS console error because `setProps` is no longer called when unmounted.
1720

1821
### Added
1922
- [#330](https://github.com/plotly/dash-ag-grid/pull/330) Added `dash_clientside` to available functions for easier on-liner functions, esp. `eventListeners`.

‎src/lib/fragments/AgGrid.react.js‎

Lines changed: 44 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -168,6 +168,12 @@ export default class DashAgGrid extends Component {
168168

169169
const customComponents = window.dashAgGridComponentFunctions || {};
170170
const newComponents = map(this.generateRenderer, customComponents);
171+
this.active = true;
172+
this.customSetProps = (propsToSet) => {
173+
if (this.active) {
174+
this.props.setProps(propsToSet);
175+
}
176+
};
171177

172178
this.convertedPropCache = {};
173179

@@ -192,10 +198,9 @@ export default class DashAgGrid extends Component {
192198
}
193199

194200
onPaginationChanged() {
195-
const {setProps} = this.props;
196201
const {gridApi} = this.state;
197202
if (gridApi && !gridApi?.isDestroyed()) {
198-
setProps({
203+
this.customSetProps({
199204
paginationInfo: {
200205
isLastPageFound: gridApi.paginationIsLastPageFound(),
201206
pageSize: gridApi.paginationGetPageSize(),
@@ -347,12 +352,13 @@ export default class DashAgGrid extends Component {
347352
}
348353

349354
callbackGetDetail = (params) => {
350-
const {setProps} = this.props;
351355
const {data} = params;
352356
this.getDetailParams = params;
353357
// Adding the current time in ms forces Dash to trigger a callback
354358
// when the same row is closed and re-opened.
355-
setProps({getDetailRequest: {data: data, requestTime: Date.now()}});
359+
this.customSetProps({
360+
getDetailRequest: {data: data, requestTime: Date.now()},
361+
});
356362
};
357363

358364
convertCol(columnDef) {
@@ -502,7 +508,7 @@ export default class DashAgGrid extends Component {
502508
}
503509

504510
onFilterChanged() {
505-
const {setProps, rowModelType} = this.props;
511+
const {rowModelType} = this.props;
506512
if (!this.state.gridApi) {
507513
return;
508514
}
@@ -512,7 +518,7 @@ export default class DashAgGrid extends Component {
512518
propsToSet.virtualRowData = this.virtualRowData();
513519
}
514520

515-
setProps(propsToSet);
521+
this.customSetProps(propsToSet);
516522
}
517523

518524
getRowData() {
@@ -538,20 +544,20 @@ export default class DashAgGrid extends Component {
538544
}
539545

540546
syncRowData() {
541-
const {rowData, setProps} = this.props;
547+
const {rowData} = this.props;
542548
if (rowData) {
543549
const virtualRowData = this.virtualRowData();
544550
const newRowData = this.getRowData();
545551
if (rowData !== newRowData) {
546-
setProps({rowData: newRowData, virtualRowData});
552+
this.customSetProps({rowData: newRowData, virtualRowData});
547553
} else {
548-
setProps({virtualRowData});
554+
this.customSetProps({virtualRowData});
549555
}
550556
}
551557
}
552558

553559
onSortChanged() {
554-
const {setProps, rowModelType} = this.props;
560+
const {rowModelType} = this.props;
555561
const propsToSet = {};
556562
if (rowModelType === 'clientSide') {
557563
propsToSet.virtualRowData = this.virtualRowData();
@@ -561,7 +567,7 @@ export default class DashAgGrid extends Component {
561567
JSON.stringify(this.state.gridApi.getColumnState())
562568
);
563569
}
564-
setProps(propsToSet);
570+
this.customSetProps(propsToSet);
565571
}
566572

567573
componentDidMount() {
@@ -574,7 +580,7 @@ export default class DashAgGrid extends Component {
574580

575581
componentWillUnmount() {
576582
this.setState({mounted: false, gridApi: null});
577-
this.props.setProps = () => {};
583+
this.active = false;
578584
if (this.props.id) {
579585
delete agGridRefs[this.props.id];
580586
eventBus.remove(this.props.id);
@@ -628,7 +634,6 @@ export default class DashAgGrid extends Component {
628634
getDetailResponse,
629635
detailCellRendererParams,
630636
masterDetail,
631-
setProps,
632637
id,
633638
resetColumnState,
634639
csvExportParams,
@@ -735,7 +740,7 @@ export default class DashAgGrid extends Component {
735740
}
736741

737742
if (!isEmpty(propsToSet)) {
738-
setProps(propsToSet);
743+
this.customSetProps(propsToSet);
739744
}
740745
// Hydrate virtualRowData
741746
this.onFilterChanged(true);
@@ -750,7 +755,7 @@ export default class DashAgGrid extends Component {
750755
if (this.isDatasourceLoadedForInfiniteScrolling()) {
751756
const {rowData, rowCount} = this.props.getRowsResponse;
752757
this.getRowsParams.successCallback(rowData, rowCount);
753-
setProps({getRowsResponse: null});
758+
this.customSetProps({getRowsResponse: null});
754759
}
755760

756761
if (
@@ -759,7 +764,7 @@ export default class DashAgGrid extends Component {
759764
getDetailResponse
760765
) {
761766
this.getDetailParams.successCallback(getDetailResponse);
762-
setProps({getDetailResponse: null});
767+
this.customSetProps({getDetailResponse: null});
763768
}
764769
// Call the API to select rows unless the update was triggered by a selection made in the UI
765770
if (
@@ -835,8 +840,7 @@ export default class DashAgGrid extends Component {
835840

836841
onRowDataUpdated() {
837842
// Handles preserving existing selections when rowData is updated in a callback
838-
const {selectedRows, setProps, rowData, rowModelType, filterModel} =
839-
this.props;
843+
const {selectedRows, rowData, rowModelType, filterModel} = this.props;
840844
const {openGroups, gridApi} = this.state;
841845

842846
if (gridApi && !gridApi?.isDestroyed()) {
@@ -847,7 +851,7 @@ export default class DashAgGrid extends Component {
847851
if (rowData && rowModelType === 'clientSide') {
848852
const virtualRowData = this.virtualRowData();
849853

850-
setProps({virtualRowData});
854+
this.customSetProps({virtualRowData});
851855
}
852856

853857
// 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 {
883887
// Flag that the selection event was fired
884888
this.selectionEventFired = true;
885889
const selectedRows = this.state.gridApi.getSelectedRows();
886-
this.props.setProps({selectedRows});
890+
this.customSetProps({selectedRows});
887891
}
888892
}, 1);
889893
}
@@ -902,7 +906,7 @@ export default class DashAgGrid extends Component {
902906
return {
903907
getRows(params) {
904908
self.getRowsParams = params;
905-
self.props.setProps({getRowsRequest: params});
909+
self.customSetProps({getRowsRequest: params});
906910
},
907911

908912
destroy() {
@@ -950,14 +954,14 @@ export default class DashAgGrid extends Component {
950954

951955
onCellClicked({value, column: {colId}, rowIndex, node}) {
952956
const timestamp = Date.now();
953-
this.props.setProps({
957+
this.customSetProps({
954958
cellClicked: {value, colId, rowIndex, rowId: node.id, timestamp},
955959
});
956960
}
957961

958962
onCellDoubleClicked({value, column: {colId}, rowIndex, node}) {
959963
const timestamp = Date.now();
960-
this.props.setProps({
964+
this.customSetProps({
961965
cellDoubleClicked: {
962966
value,
963967
colId,
@@ -1002,7 +1006,7 @@ export default class DashAgGrid extends Component {
10021006
}
10031007
// Send update(s) for current change session to Dash.
10041008
const virtualRowData = this.virtualRowData();
1005-
this.props.setProps({
1009+
this.customSetProps({
10061010
cellValueChanged: this.pendingCellValueChanges,
10071011
virtualRowData,
10081012
});
@@ -1036,7 +1040,7 @@ export default class DashAgGrid extends Component {
10361040
}
10371041

10381042
updateColumnWidths(setColumns = true) {
1039-
const {columnSize, columnSizeOptions, setProps} = this.props;
1043+
const {columnSize, columnSizeOptions} = this.props;
10401044
const {gridApi} = this.state;
10411045
if (gridApi && !gridApi?.isDestroyed()) {
10421046
const {
@@ -1063,7 +1067,7 @@ export default class DashAgGrid extends Component {
10631067
});
10641068
}
10651069
if (columnSize !== 'responsiveSizeToFit') {
1066-
setProps({columnSize: null});
1070+
this.customSetProps({columnSize: null});
10671071
}
10681072
if (setColumns) {
10691073
this.updateColumnState();
@@ -1089,7 +1093,7 @@ export default class DashAgGrid extends Component {
10891093
dash_clientside,
10901094
...customFunctions,
10911095
...window.dashAgGridFunctions,
1092-
setGridProps: this.props.setProps,
1096+
setGridProps: this.customSetProps,
10931097
};
10941098
return (params) => evaluate(parsedCondition, {params, ...context});
10951099
});
@@ -1136,12 +1140,12 @@ export default class DashAgGrid extends Component {
11361140
}
11371141

11381142
generateRenderer(Renderer) {
1139-
const {setProps, dangerously_allow_code} = this.props;
1143+
const {dangerously_allow_code} = this.props;
11401144

11411145
return (props) => (
11421146
<Renderer
11431147
setData={(value) => {
1144-
setProps({
1148+
this.customSetProps({
11451149
cellRendererData: {
11461150
value,
11471151
colId: props.column.colId,
@@ -1180,7 +1184,7 @@ export default class DashAgGrid extends Component {
11801184
this.convertAllProps(csvExportParams)
11811185
);
11821186
if (reset) {
1183-
this.props.setProps({
1187+
this.customSetProps({
11841188
exportDataAsCsv: false,
11851189
});
11861190
}
@@ -1208,15 +1212,15 @@ export default class DashAgGrid extends Component {
12081212
gridApi.paginationGoToPage(this.props.paginationGoTo);
12091213
}
12101214
if (reset) {
1211-
this.props.setProps({
1215+
this.customSetProps({
12121216
paginationGoTo: null,
12131217
});
12141218
}
12151219
}
12161220

12171221
scrollTo(reset = true) {
12181222
const {gridApi} = this.state;
1219-
const {scrollTo, setProps, getRowId} = this.props;
1223+
const {scrollTo, getRowId} = this.props;
12201224
if (!gridApi) {
12211225
return;
12221226
}
@@ -1252,7 +1256,7 @@ export default class DashAgGrid extends Component {
12521256
gridApi.ensureColumnVisible(scrollTo.column, columnPosition);
12531257
}
12541258
if (reset) {
1255-
setProps({
1259+
this.customSetProps({
12561260
scrollTo: null,
12571261
});
12581262
}
@@ -1264,7 +1268,7 @@ export default class DashAgGrid extends Component {
12641268
}
12651269
this.state.gridApi.resetColumnState();
12661270
if (reset) {
1267-
this.props.setProps({
1271+
this.customSetProps({
12681272
resetColumnState: false,
12691273
});
12701274
this.updateColumnState();
@@ -1281,7 +1285,7 @@ export default class DashAgGrid extends Component {
12811285
this.state.gridApi.selectAll();
12821286
}
12831287
if (reset) {
1284-
this.props.setProps({
1288+
this.customSetProps({
12851289
selectAll: false,
12861290
});
12871291
}
@@ -1293,7 +1297,7 @@ export default class DashAgGrid extends Component {
12931297
}
12941298
this.state.gridApi.deselectAll();
12951299
if (reset) {
1296-
this.props.setProps({
1300+
this.customSetProps({
12971301
deselectAll: false,
12981302
});
12991303
}
@@ -1306,7 +1310,7 @@ export default class DashAgGrid extends Component {
13061310
const sel = this.state.gridApi.getSelectedRows();
13071311
this.state.gridApi.applyTransaction({remove: sel});
13081312
if (reset) {
1309-
this.props.setProps({
1313+
this.customSetProps({
13101314
deleteSelectedRows: false,
13111315
});
13121316
this.syncRowData();
@@ -1324,12 +1328,12 @@ export default class DashAgGrid extends Component {
13241328
JSON.stringify(this.state.gridApi.getColumnState())
13251329
);
13261330

1327-
this.props.setProps({
1331+
this.customSetProps({
13281332
columnState,
13291333
updateColumnState: false,
13301334
});
13311335
} else {
1332-
this.props.setProps({
1336+
this.customSetProps({
13331337
updateColumnState: false,
13341338
});
13351339
}
@@ -1354,7 +1358,7 @@ export default class DashAgGrid extends Component {
13541358
this.setState({rowTransaction: null});
13551359
}
13561360
this.applyRowTransaction(data);
1357-
this.props.setProps({
1361+
this.customSetProps({
13581362
rowTransaction: null,
13591363
});
13601364
this.syncRowData();

0 commit comments

Comments
 (0)