diff --git a/vaadin-grid-pro-flow-parent/vaadin-grid-pro-flow/src/main/java/com/vaadin/flow/component/gridpro/GridPro.java b/vaadin-grid-pro-flow-parent/vaadin-grid-pro-flow/src/main/java/com/vaadin/flow/component/gridpro/GridPro.java index 2fed0959dfa..09e637076f9 100644 --- a/vaadin-grid-pro-flow-parent/vaadin-grid-pro-flow/src/main/java/com/vaadin/flow/component/gridpro/GridPro.java +++ b/vaadin-grid-pro-flow-parent/vaadin-grid-pro-flow/src/main/java/com/vaadin/flow/component/gridpro/GridPro.java @@ -139,6 +139,10 @@ private void setup() { } getDataProvider().refreshItem(e.getItem()); } + + getElement().executeJs( + "window.Vaadin.Flow.gridProConnector.clearUpdatingCell($0);", + getElement()); }); addCellEditStartedListener(e -> { @@ -156,6 +160,9 @@ private void setup() { this.getElement()); } }); + addAttachListener(e -> getElement().executeJs( + "window.Vaadin.Flow.gridProConnector.initUpdatingCellAnimation($0);", + getElement())); } /** diff --git a/vaadin-grid-pro-flow-parent/vaadin-grid-pro-flow/src/main/resources/META-INF/resources/frontend/gridProConnector.js b/vaadin-grid-pro-flow-parent/vaadin-grid-pro-flow/src/main/resources/META-INF/resources/frontend/gridProConnector.js index 6d8f3864a34..9452c478a17 100644 --- a/vaadin-grid-pro-flow-parent/vaadin-grid-pro-flow/src/main/resources/META-INF/resources/frontend/gridProConnector.js +++ b/vaadin-grid-pro-flow-parent/vaadin-grid-pro-flow/src/main/resources/META-INF/resources/frontend/gridProConnector.js @@ -7,6 +7,8 @@ * See for the full * license. */ +import { iterateRowCells, updatePart } from '@vaadin/grid/src/vaadin-grid-helpers.js'; + function isEditedRow(grid, rowData) { return grid.__edited && grid.__edited.model.item.key === rowData.item.key; } @@ -52,10 +54,11 @@ window.Vaadin.Flow.gridProConnector = { // Not needed in case of custom editor as value is set on server-side. // Overridden in order to avoid blinking of the cell content. - column._setEditorValue = function (editor, value) {}; + column._setEditorValue = function(editor, value) { + }; const stopCellEdit = column._stopCellEdit; - column._stopCellEdit = function () { + column._stopCellEdit = function() { stopCellEdit.apply(this, arguments); this._grid.toggleAttribute(LOADING_EDITOR_CELL_ATTRIBUTE, false); }; @@ -85,4 +88,38 @@ window.Vaadin.Flow.gridProConnector = { return isEditable === undefined || isEditable; }; }, + + initUpdatingCellAnimation(grid) { + // When stopping editing, getting the updated cell value for columns with + // custom editors requires a server round-trip. During this time, we hide + // the cell content and show an update animation. + grid.addEventListener('item-property-changed', () => { + const { column, model } = grid.__edited; + + if (column.editorType !== 'custom') { + return; + } + + grid.__pendingCellUpdate = `${model.item.key}:${column.path}`; + grid.requestContentUpdate(); + }); + + // Override the method to add the updating-cell part to the cell when it's being updated. + const generateCellPartNames = grid._generateCellPartNames; + grid._generateCellPartNames = function(row, model) { + generateCellPartNames.apply(this, arguments); + + iterateRowCells(row, (cell) => { + const isUpdating = model && grid.__pendingCellUpdate === `${model.item.key}:${cell._column.path}`; + const target = cell._focusButton || cell; + updatePart(target, isUpdating, 'updating-cell'); + }); + }; + }, + + clearUpdatingCell(grid) { + // Clear the updating-cell part from the cell when the update is done. + grid.__pendingCellUpdate = null; + grid.requestContentUpdate(); + } };