From 4c57968338dedfcc074607df6916cdaa2c56588a Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Fri, 5 Mar 2021 09:55:24 +0300
Subject: [PATCH] Fixed #589 - Add onBeforeEditorShow and onBeforeEditorHide
 callbacks to Column on DataTable with cell editing

---
 src/components/column/Column.d.ts      |  2 ++
 src/components/column/Column.js        |  6 +++++-
 src/components/datatable/BodyCell.js   | 18 ++++++++++++++++--
 src/showcase/datatable/DataTableDoc.js | 12 ++++++++++++
 4 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/src/components/column/Column.d.ts b/src/components/column/Column.d.ts
index dce543c623..884055bc04 100644
--- a/src/components/column/Column.d.ts
+++ b/src/components/column/Column.d.ts
@@ -45,6 +45,8 @@ interface ColumnProps {
     filterFunction?(value: any, filter: any): void;
     editor?(props: any): JSX.Element | undefined;
     editorValidator?(e: {originalEvent: Event, columnProps: any}): boolean;
+    onBeforeEditorHide?(e: {originalEvent: Event, columnProps: any}): any;
+    onBeforeEditorShow?(e: {originalEvent: Event, columnProps: any}): any;
 }
 
 export class Column extends React.Component<ColumnProps,any> {}
diff --git a/src/components/column/Column.js b/src/components/column/Column.js
index ab1182caa8..0ccb775fda 100644
--- a/src/components/column/Column.js
+++ b/src/components/column/Column.js
@@ -39,6 +39,8 @@ export class Column extends Component {
         editor: null,
         editorValidator: null,
         editorValidatorEvent: 'click',
+        onBeforeEditorHide: null,
+        onBeforeEditorShow: null,
         onEditorInit: null,
         onEditorSubmit: null,
         onEditorCancel: null,
@@ -85,10 +87,12 @@ export class Column extends Component {
         rowSpan: PropTypes.number,
         editor: PropTypes.func,
         editorValidator: PropTypes.func,
+        editorValidatorEvent: PropTypes.string,
+        onBeforeEditorHide: null,
+        onBeforeEditorShow: null,
         onEditorInit: PropTypes.func,
         onEditorSubmit: PropTypes.func,
         onEditorCancel: PropTypes.func,
-        editorValidatorEvent: PropTypes.string,
         excludeGlobalFilter: PropTypes.bool,
         rowReorder: PropTypes.bool,
         rowReorderIcon: PropTypes.string,
diff --git a/src/components/datatable/BodyCell.js b/src/components/datatable/BodyCell.js
index 4f667d853b..64b3872b9f 100644
--- a/src/components/datatable/BodyCell.js
+++ b/src/components/datatable/BodyCell.js
@@ -51,6 +51,13 @@ export class BodyCell extends Component {
         if (this.props.editMode !== 'row' && this.props.editor && !this.state.editing) {
             this.selfClick = true;
 
+            if (this.props.onBeforeEditorShow) {
+                this.props.onBeforeEditorShow({
+                    originalEvent: event,
+                    columnProps: this.props
+                });
+            }
+
             this.setState({
                 editing: true
             }, () => {
@@ -104,7 +111,14 @@ export class BodyCell extends Component {
         return this.container && !(this.container.isSameNode(target) || this.container.contains(target));
     }
 
-    closeCell() {
+    closeCell(event) {
+        if (this.props.onBeforeEditorHide) {
+            this.props.onBeforeEditorHide({
+                originalEvent: event,
+                columnProps: this.props
+            });
+        }
+
         /* When using the 'tab' key, the focus event of the next cell is not called in IE. */
         setTimeout(() => {
             this.setState({
@@ -136,7 +150,7 @@ export class BodyCell extends Component {
                 this.props.onEditorSubmit(params);
             }
 
-            this.closeCell();
+            this.closeCell(event);
         }
     }
 
diff --git a/src/showcase/datatable/DataTableDoc.js b/src/showcase/datatable/DataTableDoc.js
index 5e9e29cf58..d5957d8711 100644
--- a/src/showcase/datatable/DataTableDoc.js
+++ b/src/showcase/datatable/DataTableDoc.js
@@ -1167,6 +1167,18 @@ export const DataTableDemo = () => {
                             <td>click</td>
                             <td>Event to trigger the validation, possible values are "click" and "blur".</td>
                         </tr>
+                        <tr>
+                            <td>onBeforeEditorShow</td>
+                            <td>function</td>
+                            <td>null</td>
+                            <td>Callback to invoke before the cell editor is shown.</td>
+                        </tr>
+                        <tr>
+                            <td>onBeforeEditorHide</td>
+                            <td>function</td>
+                            <td>null</td>
+                            <td>Callback to invoke before the cell editor is hidden.</td>
+                        </tr>
                         <tr>
                             <td>onEditorInit</td>
                             <td>function</td>