Skip to content

Commit

Permalink
Refactor #1832 - For DataTable cell editing
Browse files Browse the repository at this point in the history
  • Loading branch information
@mertsincan
mertsincan committed Mar 1, 2021
1 parent 0bbf0b1 commit 7f2e789
Showing 1 changed file with 27 additions and 17 deletions.
44 changes: 27 additions & 17 deletions src/components/datatable/BodyCell.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import React, { Component } from 'react';
import { classNames } from '../utils/ClassNames';
import { PrimeEventBus } from '../utils/PrimeEventBus';
import ObjectUtils from '../utils/ObjectUtils';
import DomHandler from '../utils/DomHandler';
import {RowRadioButton} from './RowRadioButton';
import {RowCheckbox} from './RowCheckbox';
import { RowRadioButton } from './RowRadioButton';
import { RowCheckbox } from './RowCheckbox';
import { Ripple } from '../ripple/Ripple';

export class BodyCell extends Component {
Expand All @@ -19,6 +20,8 @@ export class BodyCell extends Component {
this.onBlur = this.onBlur.bind(this);
this.onKeyDown = this.onKeyDown.bind(this);
this.onEditorFocus = this.onEditorFocus.bind(this);

this.eventBusKey = `${this.props.field}_${this.props.rowIndex}`;
}

onExpanderClick(event) {
Expand Down Expand Up @@ -60,6 +63,12 @@ export class BodyCell extends Component {

if (this.props.editorValidatorEvent === 'click') {
this.bindDocumentEditListener();

PrimeEventBus.on('overlay-click', (e) => {
if (!this.isOutsideClicked(e.target)) {
this.selfClick = true;
}
}, this.eventBusKey);
}
});
}
Expand All @@ -80,7 +89,7 @@ export class BodyCell extends Component {
bindDocumentEditListener() {
if (!this.documentEditListener) {
this.documentEditListener = (e) => {
if (this.isOutsideClicked(e)) {
if (!this.selfClick && this.isOutsideClicked(e.target)) {
this.switchCellToViewMode(e, true);
}

Expand All @@ -91,8 +100,8 @@ export class BodyCell extends Component {
}
}

isOutsideClicked(event) {
return !this.selfClick && this.container && !(this.container.isSameNode(event.target) || this.container.contains(event.target));
isOutsideClicked(target) {
return this.container && !(this.container.isSameNode(target) || this.container.contains(target));
}

closeCell() {
Expand All @@ -102,6 +111,7 @@ export class BodyCell extends Component {
editing: false
}, () => {
this.unbindDocumentEditListener();
PrimeEventBus.off('overlay-click', this.eventBusKey);
});
}, 1);
}
Expand Down Expand Up @@ -176,14 +186,14 @@ export class BodyCell extends Component {

render() {
let content, header, editorKeyHelper;
let cellClassName = classNames(this.props.bodyClassName||this.props.className, {
'p-selection-column': this.props.selectionMode,
'p-editable-column': this.props.editor,
'p-cell-editing': this.state.editing && this.props.editor
});
let cellClassName = classNames(this.props.bodyClassName || this.props.className, {
'p-selection-column': this.props.selectionMode,
'p-editable-column': this.props.editor,
'p-cell-editing': this.state.editing && this.props.editor
});

if (this.props.expander) {
const iconClassName = classNames('p-row-toggler-icon pi pi-fw p-clickable', {'pi-chevron-down': this.props.expanded, 'pi-chevron-right': !this.props.expanded});
const iconClassName = classNames('p-row-toggler-icon pi pi-fw p-clickable', { 'pi-chevron-down': this.props.expanded, 'pi-chevron-right': !this.props.expanded });
let expanderProps = {
onClick: this.onExpanderClick,
className: 'p-row-toggler p-link',
Expand All @@ -199,7 +209,7 @@ export class BodyCell extends Component {

if (this.props.body) {
expanderProps['element'] = content;
content = this.props.body(this.props.rowData, { ...this.props, ...{expander: expanderProps} });
content = this.props.body(this.props.rowData, { ...this.props, ...{ expander: expanderProps } });
}
}
else if (this.props.selectionMode) {
Expand All @@ -210,9 +220,9 @@ export class BodyCell extends Component {

if (showSelection) {
if (this.props.selectionMode === 'single')
content = <RowRadioButton onClick={this.props.onRadioClick} rowData={this.props.rowData} selected={this.props.selected}/>;
content = <RowRadioButton onClick={this.props.onRadioClick} rowData={this.props.rowData} selected={this.props.selected} />;
else
content = <RowCheckbox onClick={this.props.onCheckboxClick} rowData={this.props.rowData} selected={this.props.selected}/>;
content = <RowCheckbox onClick={this.props.onCheckboxClick} rowData={this.props.rowData} selected={this.props.selected} />;
}
}
else if (this.props.rowReorder) {
Expand Down Expand Up @@ -273,7 +283,7 @@ export class BodyCell extends Component {

if (this.props.body) {
rowEditorProps['element'] = content;
content = this.props.body(this.props.rowData, { ...this.props, ...{rowEditor: rowEditorProps} });
content = this.props.body(this.props.rowData, { ...this.props, ...{ rowEditor: rowEditorProps } });
}
}
else {
Expand All @@ -290,12 +300,12 @@ export class BodyCell extends Component {

if (this.props.editMode !== 'row') {
/* eslint-disable */
editorKeyHelper = this.props.editor && <a tabIndex="0" ref={(el) => {this.keyHelper = el;}} className="p-cell-editor-key-helper p-hidden-accessible" onFocus={this.onEditorFocus}><span></span></a>;
editorKeyHelper = this.props.editor && <a tabIndex="0" ref={(el) => { this.keyHelper = el; }} className="p-cell-editor-key-helper p-hidden-accessible" onFocus={this.onEditorFocus}><span></span></a>;
/* eslint-enable */
}

return (
<td ref={(el) => {this.container = el;}} className={cellClassName} style={this.props.bodyStyle||this.props.style} onClick={this.onClick} onKeyDown={this.onKeyDown}
<td ref={(el) => { this.container = el; }} className={cellClassName} style={this.props.bodyStyle || this.props.style} onClick={this.onClick} onKeyDown={this.onKeyDown}
rowSpan={this.props.rowSpan} onBlur={this.onBlur}>
{header}
{editorKeyHelper}
Expand Down

0 comments on commit 7f2e789

Please sign in to comment.