Fixed #589 - Add onBeforeEditorShow and onBeforeEditorHide callbacks …

…to Column on DataTable with cell editing
primefaces · Mar 5, 2021 · 4c57968 · 4c57968
1 parent 191d780
commit 4c57968
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>