Skip to content

Commit

Permalink
Merge pull request #331 from BSd3v/setProps
Browse files Browse the repository at this point in the history 
creating `customSetProps` to handle `setProps`
  • Loading branch information
@BSd3v
BSd3v authored Nov 1, 2024
2 parents f240ce6 + 878d202 commit f27dd83
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 40 deletions.
3 changes: 3 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`.
Expand Down
84 changes: 44 additions & 40 deletions src/lib/fragments/AgGrid.react.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {};

Expand All @@ -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(),
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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;
}
Expand All @@ -512,7 +518,7 @@ export default class DashAgGrid extends Component {
propsToSet.virtualRowData = this.virtualRowData();
}

setProps(propsToSet);
this.customSetProps(propsToSet);
}

getRowData() {
Expand All @@ -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();
Expand All @@ -561,7 +567,7 @@ export default class DashAgGrid extends Component {
JSON.stringify(this.state.gridApi.getColumnState())
);
}
setProps(propsToSet);
this.customSetProps(propsToSet);
}

componentDidMount() {
Expand All @@ -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);
Expand Down Expand Up @@ -628,7 +634,6 @@ export default class DashAgGrid extends Component {
getDetailResponse,
detailCellRendererParams,
masterDetail,
setProps,
id,
resetColumnState,
csvExportParams,
Expand Down Expand Up @@ -735,7 +740,7 @@ export default class DashAgGrid extends Component {
}

if (!isEmpty(propsToSet)) {
setProps(propsToSet);
this.customSetProps(propsToSet);
}
// Hydrate virtualRowData
this.onFilterChanged(true);
Expand All @@ -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 (
Expand All @@ -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 (
Expand Down Expand Up @@ -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()) {
Expand All @@ -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
Expand Down Expand Up @@ -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);
}
Expand All @@ -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() {
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
});
Expand Down Expand Up @@ -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 {
Expand All @@ -1063,7 +1067,7 @@ export default class DashAgGrid extends Component {
});
}
if (columnSize !== 'responsiveSizeToFit') {
setProps({columnSize: null});
this.customSetProps({columnSize: null});
}
if (setColumns) {
this.updateColumnState();
Expand All @@ -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});
});
Expand Down Expand Up @@ -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) => (
<Renderer
setData={(value) => {
setProps({
this.customSetProps({
cellRendererData: {
value,
colId: props.column.colId,
Expand Down Expand Up @@ -1180,7 +1184,7 @@ export default class DashAgGrid extends Component {
this.convertAllProps(csvExportParams)
);
if (reset) {
this.props.setProps({
this.customSetProps({
exportDataAsCsv: false,
});
}
Expand Down Expand Up @@ -1208,15 +1212,15 @@ export default class DashAgGrid extends Component {
gridApi.paginationGoToPage(this.props.paginationGoTo);
}
if (reset) {
this.props.setProps({
this.customSetProps({
paginationGoTo: null,
});
}
}

scrollTo(reset = true) {
const {gridApi} = this.state;
const {scrollTo, setProps, getRowId} = this.props;
const {scrollTo, getRowId} = this.props;
if (!gridApi) {
return;
}
Expand Down Expand Up @@ -1252,7 +1256,7 @@ export default class DashAgGrid extends Component {
gridApi.ensureColumnVisible(scrollTo.column, columnPosition);
}
if (reset) {
setProps({
this.customSetProps({
scrollTo: null,
});
}
Expand All @@ -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();
Expand All @@ -1281,7 +1285,7 @@ export default class DashAgGrid extends Component {
this.state.gridApi.selectAll();
}
if (reset) {
this.props.setProps({
this.customSetProps({
selectAll: false,
});
}
Expand All @@ -1293,7 +1297,7 @@ export default class DashAgGrid extends Component {
}
this.state.gridApi.deselectAll();
if (reset) {
this.props.setProps({
this.customSetProps({
deselectAll: false,
});
}
Expand All @@ -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();
Expand All @@ -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,
});
}
Expand All @@ -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();
Expand Down

0 comments on commit f27dd83

Please sign in to comment.