Skip to content

Commit

Permalink
Refactor #1926
Browse files Browse the repository at this point in the history
  • Loading branch information
@mertsincan
mertsincan committed Apr 16, 2021
1 parent 70ab3f6 commit 0f2ba4e
Show file tree
Hide file tree
Showing 5 changed files with 223 additions and 242 deletions.
69 changes: 20 additions & 49 deletions src/components/datatable/BodyCell.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export class BodyCell extends Component {
}
}

if (this.props.cellSelection) {
if (this.props.allowCellSelection) {
const cell = event.currentTarget;

switch (event.which) {
Expand Down Expand Up @@ -145,7 +145,7 @@ export class BodyCell extends Component {
});
}

if (this.props.cellSelection && this.props.onClick) {
if (this.props.allowCellSelection && this.props.onClick) {
this.props.onClick({
originalEvent: event,
value: ObjectUtils.resolveFieldData(this.props.rowData, this.props.field),
Expand Down Expand Up @@ -262,53 +262,37 @@ export class BodyCell extends Component {
findNextSelectableCell(cell) {
let nextCell = cell.nextElementSibling;
if (nextCell) {
if (DomHandler.hasClass(nextCell, 'p-selectable-cell'))
return nextCell;
else
return this.findNextSelectableRow(nextCell);
}
else {
return null;
return DomHandler.hasClass(nextCell, 'p-selectable-cell') ? nextCell : this.findNextSelectableRow(nextCell);
}

return null;
}

findPrevSelectableCell(cell) {
let prevCell = cell.previousElementSibling;
if (prevCell) {
if (DomHandler.hasClass(prevCell, 'p-selectable-cell'))
return prevCell;
else
return this.findPrevSelectableRow(prevCell);
}
else {
return null;
return DomHandler.hasClass(prevCell, 'p-selectable-cell') ? prevCell : this.findPrevSelectableRow(prevCell);
}

return null;
}

findNextSelectableRow(row) {
let nextRow = row.nextElementSibling;
if (nextRow) {
if (DomHandler.hasClass(nextRow, 'p-selectable-row'))
return nextRow;
else
return this.findNextSelectableRow(nextRow);
}
else {
return null;
return DomHandler.hasClass(nextRow, 'p-selectable-row') ? nextRow : this.findNextSelectableRow(nextRow);
}

return null;
}

findPrevSelectableRow(row) {
let prevRow = row.previousElementSibling;
if (prevRow) {
if (DomHandler.hasClass(prevRow, 'p-selectable-row'))
return prevRow;
else
return this.findPrevSelectableRow(prevRow);
}
else {
return null;
return DomHandler.hasClass(prevRow, 'p-selectable-row') ? prevRow : this.findPrevSelectableRow(prevRow);
}

return null;
}

changeTabIndex(currentCell, nextCell) {
Expand All @@ -319,36 +303,23 @@ export class BodyCell extends Component {
}

getTabIndex(cellSelected) {
return this.props.cellSelection ? (cellSelected ? 0 : (this.props.rowIndex === 0 && this.props.index === 0 ? 0 : -1)) : null;
return this.props.allowCellSelection ? (cellSelected ? 0 : (this.props.rowIndex === 0 && this.props.index === 0 ? 0 : -1)) : null;
}

isSelected() {
if (this.props.selection) {
if (this.props.selection instanceof Array)
return this.findIndexInSelection() > -1;
else
return this.equals(this.props.selection);
return (this.props.selection instanceof Array) ? this.findIndexInSelection() > -1 : this.equals(this.props.selection);
}

return false;
}

equals(selectedCell) {
return selectedCell.rowIndex === this.props.rowIndex && (selectedCell.field === this.props.field || selectedCell.cellIndex === this.props.index);
return (selectedCell.rowIndex === this.props.rowIndex || selectedCell.rowData === this.props.rowData) && (selectedCell.field === this.props.field || selectedCell.cellIndex === this.props.index);
}

findIndexInSelection() {
let index = -1;
if (this.props.selection) {
for (let i = 0; i < this.props.selection.length; i++) {
if (this.equals(this.props.selection[i])) {
index = i;
break;
}
}
}

return index;
return this.props.selection ? this.props.selection.findIndex(d => this.equals(d)) : -1;
}

unbindDocumentEditListener() {
Expand Down Expand Up @@ -397,10 +368,10 @@ export class BodyCell extends Component {

render() {
let content, editorKeyHelper;
let cellSelected = this.props.cellSelection && this.isSelected()
let cellSelected = this.props.allowCellSelection && this.isSelected();
let cellClassName = classNames(this.props.bodyClassName || this.props.className, {
'p-selection-column': this.props.selectionMode,
'p-selectable-cell': this.props.cellSelection,
'p-selectable-cell': this.props.allowCellSelection,
'p-highlight': cellSelected,
'p-editable-column': this.props.editor,
'p-cell-editing': this.state.editing && this.props.editor
Expand Down
14 changes: 9 additions & 5 deletions src/components/datatable/BodyRow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ export class BodyRow extends Component {
}

onKeyDown(event) {
if (this.props.selectionMode && !this.props.cellSelection) {
if (this.isFocusable() && !this.props.allowCellSelection) {
const row = event.currentTarget;

switch (event.which) {
Expand Down Expand Up @@ -270,16 +270,20 @@ export class BodyRow extends Component {
event.preventDefault();
}

isFocusable() {
return this.props.selectionMode && this.props.selectionModeInColumn !== 'single' && this.props.selectionModeInColumn !== 'multiple';
}

getTabIndex() {
return this.props.selectionMode && !this.props.cellSelection ? (this.props.rowIndex === 0 ? 0 : -1) : null;
return this.isFocusable() && !this.props.allowCellSelection ? (this.props.rowIndex === 0 ? 0 : -1) : null;
}

render() {
let columns = React.Children.toArray(this.props.children);
let conditionalClassNames = {
'p-highlight': !this.props.cellSelection && this.props.selected,
'p-highlight': !this.props.allowCellSelection && this.props.selected,
'p-highlight-contextmenu': this.props.contextMenuSelected,
'p-selectable-row': this.props.selectionMode
'p-selectable-row': this.props.allowRowSelection
};

if (this.props.rowClassName) {
Expand Down Expand Up @@ -311,7 +315,7 @@ export class BodyRow extends Component {
let cell = <BodyCell tableId={this.props.tableId} key={i} {...column.props} value={this.props.value} rowSpan={rowSpan} rowData={this.props.rowData} index={i} rowIndex={this.props.rowIndex} onRowToggle={this.props.onRowToggle} expanded={this.props.expanded}
onRadioClick={this.props.onRadioClick} onCheckboxClick={this.props.onCheckboxClick} selected={this.props.selected} selection={this.props.selection} selectOnEdit={this.props.selectOnEdit}
editMode={this.props.editMode} editing={editing} onRowEditInit={this.onRowEditInit} onRowEditSave={this.onRowEditSave} onRowEditCancel={this.onRowEditCancel} onMouseDown={this.props.onCellMouseDown} onMouseUp={this.props.onCellMouseUp}
showRowReorderElement={this.props.showRowReorderElement} showSelectionElement={this.props.showSelectionElement} cellSelection={this.props.cellSelection} onClick={this.props.onCellClick} />;
showRowReorderElement={this.props.showRowReorderElement} showSelectionElement={this.props.showSelectionElement} allowCellSelection={this.props.allowCellSelection} onClick={this.props.onCellClick} />;

cells.push(cell);
}
Expand Down
19 changes: 12 additions & 7 deletions src/components/datatable/DataTable.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,7 @@ declare namespace DataTable {

type EmptyMessageType = React.ReactNode | ((frozen: boolean) => React.ReactNode);

type SelectionModeType = 'single' | 'multiple';

type RowSelectionModeType = 'new' | 'add' | 'checkbox' | 'radio';

type CellSelectionModeType = 'new' | 'add';
type SelectionModeType = 'single' | 'multiple' | 'checkbox' | 'radioButton';

type ColumnResizeModeType = 'fit' | 'expand';

Expand Down Expand Up @@ -94,6 +90,16 @@ declare namespace DataTable {
originalEvent: React.MouseEvent<HTMLElement>;
}

interface CellClickEventParams {
originalEvent: React.MouseEvent<HTMLElement>;
value: any;
field: string;
rowData: any;
rowIndex: number;
cellIndex: number;
selected: boolean;
}

interface RowEditSaveParams extends RowEventParams {
valid: boolean;
}
Expand Down Expand Up @@ -157,8 +163,6 @@ declare namespace DataTable {
removableSort?: boolean;
emptyMessage?: EmptyMessageType;
selectionMode?: SelectionModeType;
rowSelectionMode?: RowSelectionModeType;
cellSelectionMode?: CellSelectionModeType;
dragSelection?: boolean;
cellSelection?: boolean;
selection?: any | any[];
Expand Down Expand Up @@ -220,6 +224,7 @@ declare namespace DataTable {
onRowUnselect?(e: UnselectParams): void;
onRowExpand?(e: EventParams): void;
onRowCollapse?(e: EventParams): void;
onCellClick?(e: CellClickEventParams): void;
onCellSelect?(e: SelectParams): void;
onCellUnselect?(e: UnselectParams): void;
onContextMenu?(e: EventParams): void;
Expand Down
14 changes: 6 additions & 8 deletions src/components/datatable/DataTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,6 @@ export class DataTable extends Component {
removableSort: false,
emptyMessage: null,
selectionMode: null,
rowSelectionMode: 'new',
cellSelectionMode: 'new',
dragSelection: false,
cellSelection: false,
selection: null,
Expand Down Expand Up @@ -110,6 +108,7 @@ export class DataTable extends Component {
onRowCollapse: null,
onContextMenu: null,
onColReorder: null,
onCellClick: null,
onCellSelect: null,
onCellUnselect: null,
onRowReorder: null,
Expand Down Expand Up @@ -158,8 +157,6 @@ export class DataTable extends Component {
removableSort: PropTypes.bool,
emptyMessage: PropTypes.any,
selectionMode: PropTypes.string,
rowSelectionMode: PropTypes.string,
cellSelectionMode: PropTypes.string,
dragSelection: PropTypes.bool,
cellSelection: PropTypes.bool,
selection: PropTypes.any,
Expand Down Expand Up @@ -221,6 +218,7 @@ export class DataTable extends Component {
onRowUnselect: PropTypes.func,
onRowExpand: PropTypes.func,
onRowCollapse: PropTypes.func,
onCellClick: PropTypes.func,
onCellSelect: PropTypes.func,
onCellUnselect: PropTypes.func,
onContextMenu: PropTypes.func,
Expand Down Expand Up @@ -1333,8 +1331,8 @@ export class DataTable extends Component {

getSelectionModeInColumn(columns) {
if (Array.isArray(columns)) {
for(let col of columns) {
if(col.props.selectionMode)
for (let col of columns) {
if (col.props.selectionMode)
return col.props.selectionMode;
}
}
Expand All @@ -1354,7 +1352,7 @@ export class DataTable extends Component {

createTableBody(value, columns, frozen, selectionModeInColumn) {
return <TableBody tableId={this.props.id} value={value} first={this.getFirst()} rows={this.getRows()} lazy={this.props.lazy} paginator={this.props.paginator} dataKey={this.props.dataKey} compareSelectionBy={this.props.compareSelectionBy}
selectionMode={this.props.selectionMode} rowSelectionMode={this.props.rowSelectionMode} cellSelectionMode={this.props.cellSelectionMode} selection={this.props.selection} metaKeySelection={this.props.metaKeySelection} frozen={frozen} selectionModeInColumn={selectionModeInColumn}
selectionMode={this.props.selectionMode} selection={this.props.selection} metaKeySelection={this.props.metaKeySelection} frozen={frozen} selectionModeInColumn={selectionModeInColumn}
onSelectionChange={this.props.onSelectionChange} onRowClick={this.props.onRowClick} onRowDoubleClick={this.props.onRowDoubleClick} onRowSelect={this.props.onRowSelect} onRowUnselect={this.props.onRowUnselect}
contextMenuSelection={this.props.contextMenuSelection} onContextMenuSelectionChange={this.props.onContextMenuSelectionChange} onContextMenu={this.props.onContextMenu}
expandedRows={this.props.expandedRows} onRowToggle={this.props.onRowToggle} rowExpansionTemplate={this.props.rowExpansionTemplate} selectOnEdit={this.props.selectOnEdit}
Expand All @@ -1365,7 +1363,7 @@ export class DataTable extends Component {
editMode={this.props.editMode} editingRows={this.props.editingRows} rowEditorValidator={this.props.rowEditorValidator}
onRowEditInit={this.props.onRowEditInit} onRowEditSave={this.props.onRowEditSave} onRowEditCancel={this.props.onRowEditCancel} onRowEditChange={this.props.onRowEditChange}
expandableRowGroups={this.props.expandableRowGroups} showRowReorderElement={this.props.showRowReorderElement} showSelectionElement={this.props.showSelectionElement}
dragSelection={this.props.dragSelection} cellSelection={this.props.cellSelection} onCellSelect={this.props.onCellSelect} onCellUnselect={this.props.onCellUnselect}>
dragSelection={this.props.dragSelection} cellSelection={this.props.cellSelection} onCellClick={this.props.onCellClick} onCellSelect={this.props.onCellSelect} onCellUnselect={this.props.onCellUnselect}>
{columns}
</TableBody>;
}
Expand Down
Loading

0 comments on commit 0f2ba4e

Please sign in to comment.