jingrow/datatable
1
0
Fork 0
Code Pull Requests Activity

fix: Submit cell if editing deactivated

Browse Source 
Editing cell will now submit the value when the editing is deactivated,
except when Escape key is pressed.
It will also submit when Tab key is pressed.
This commit is contained in:
Faris Ansari 2019-06-24 15:11:24 +05:30
parent 1a0eba65a0
commit b1962dffcf
1 changed files with 40 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/cellmanager.js
View File

@ -51,34 +51,19 @@ export default class CellManager {
this.activateEditing(this.$focusedCell);
} else if (this.$editingCell) {
// enter keypress on editing cell
this.submitEditing();
this.deactivateEditing();
}
});
this.keyboard.on('tab, shift+tab', (e) => {
if (this.$editingCell) {
// tab keypress on editing cell
this.deactivateEditing();
this.focusCellInDirection(e.shiftKey ? 'left' : 'right');
}
});
}
bindKeyboardNav() {
const focusCell = (direction) => {
if (!this.$focusedCell || this.$editingCell) {
return false;
}
let $cell = this.$focusedCell;
if (direction === 'left' || direction === 'shift+tab') {
$cell = this.getLeftCell$($cell);
} else if (direction === 'right' || direction === 'tab') {
$cell = this.getRightCell$($cell);
} else if (direction === 'up') {
$cell = this.getAboveCell$($cell);
} else if (direction === 'down') {
$cell = this.getBelowCell$($cell);
}
this.focusCell($cell);
return true;
};
const focusLastCell = (direction) => {
if (!this.$focusedCell || this.$editingCell) {
return false;
@ -105,13 +90,13 @@ export default class CellManager {
};
['left', 'right', 'up', 'down', 'tab', 'shift+tab']
.map(direction => this.keyboard.on(direction, () => focusCell(direction)));
.map(direction => this.keyboard.on(direction, () => this.focusCellInDirection(direction)));
['left', 'right', 'up', 'down']
.map(direction => this.keyboard.on(`ctrl+${direction}`, () => focusLastCell(direction)));
this.keyboard.on('esc', () => {
this.deactivateEditing();
this.deactivateEditing(false);
this.columnmanager.toggleFilter(false);
});
@ -463,7 +448,10 @@ export default class CellManager {
}
}
deactivateEditing() {
deactivateEditing(submitValue = true) {
if (submitValue) {
this.submitEditing();
}
// keep focus on the cell so that keyboard navigation works
if (this.$focusedCell) this.$focusedCell.focus();
@ -514,7 +502,9 @@ export default class CellManager {
}
submitEditing() {
if (!this.$editingCell) return;
let promise = Promise.resolve();
if (!this.$editingCell) return promise;
const $cell = this.$editingCell;
const {
rowIndex,
@ -533,7 +523,7 @@ export default class CellManager {
valuePromise = Promise.resolve(valuePromise);
}
valuePromise.then((value) => {
promise = valuePromise.then((value) => {
const done = editor.setValue(value, rowIndex, col);
const oldValue = this.getCell(colIndex, rowIndex).content;
@ -548,11 +538,13 @@ export default class CellManager {
this.updateCell(colIndex, rowIndex, oldValue);
});
}
return done;
});
}
}
this.currentCellEditor = null;
return promise;
}
copyCellContents($cell1, $cell2) {
@ -654,6 +646,27 @@ export default class CellManager {
return colIndex < this.columnmanager.getFirstColumnIndex();
}
focusCellInDirection(direction) {
if (!this.$focusedCell || this.$editingCell) {
return false;
}
let $cell = this.$focusedCell;
if (direction === 'left' || direction === 'shift+tab') {
$cell = this.getLeftCell$($cell);
} else if (direction === 'right' || direction === 'tab') {
$cell = this.getRightCell$($cell);
} else if (direction === 'up') {
$cell = this.getAboveCell$($cell);
} else if (direction === 'down') {
$cell = this.getBelowCell$($cell);
}
this.focusCell($cell);
return true;
}
getCell$(colIndex, rowIndex) {
return $(this.selector(colIndex, rowIndex), this.bodyScrollable);
}