Keep focus on cell after escape, editing cell color
This commit is contained in:
Faris Ansari
parent
0d7fc93b37
commit
3cf8fbe141
@ -877,19 +877,6 @@ var CellManager = function () {
|
||||
_this.deactivateEditing();
|
||||
}
|
||||
});
|
||||
|
||||
_dom2.default.on(this.bodyScrollable, 'blur', 'input', function (e, input) {
|
||||
var cell = input.closest('.data-table-col');
|
||||
if (_this.$editingCell === cell) {
|
||||
_this.submitEditing();
|
||||
_this.deactivateEditing();
|
||||
}
|
||||
});
|
||||
|
||||
// $.on(document.body, 'click', e => {
|
||||
// if (e.target.matches('.edit-cell, .edit-cell *')) return;
|
||||
// this.deactivateEditing();
|
||||
// });
|
||||
}
|
||||
}, {
|
||||
key: 'bindKeyboardNav',
|
||||
@ -955,6 +942,8 @@ var CellManager = function () {
|
||||
});
|
||||
|
||||
_keyboard2.default.on('esc', function () {
|
||||
// keep focus on the cell so that keyboard navigation works
|
||||
_this2.$editingCell.focus();
|
||||
_this2.deactivateEditing();
|
||||
});
|
||||
}
|
||||
@ -1956,6 +1945,7 @@ var ColumnManager = function () {
|
||||
this.setupNaturalColumnWidth();
|
||||
this.distributeRemainingWidth();
|
||||
this.setColumnStyle();
|
||||
this.setDefaultCellHeight();
|
||||
}
|
||||
}, {
|
||||
key: 'setHeaderStyle',
|
||||
@ -2058,7 +2048,15 @@ var ColumnManager = function () {
|
||||
}
|
||||
}, {
|
||||
key: 'setDefaultCellHeight',
|
||||
value: function setDefaultCellHeight(height) {
|
||||
value: function setDefaultCellHeight() {
|
||||
if (this.__cellHeightSet) return;
|
||||
var height = _dom2.default.style((0, _dom2.default)('.data-table-col', this.instance.datatableWrapper), 'height');
|
||||
this.setCellHeight(height);
|
||||
this.__cellHeightSet = true;
|
||||
}
|
||||
}, {
|
||||
key: 'setCellHeight',
|
||||
value: function setCellHeight(height) {
|
||||
this.style.setStyle('.data-table-col .content', {
|
||||
height: height + 'px'
|
||||
});
|
||||
@ -2084,7 +2082,6 @@ var ColumnManager = function () {
|
||||
_this12.setColumnWidth(column.colIndex);
|
||||
});
|
||||
this.instance.setBodyWidth();
|
||||
this.setDefaultCellHeight(_dom2.default.style(this.instance.datatableWrapper.querySelector('.data-table-col'), 'height'));
|
||||
}
|
||||
}, {
|
||||
key: 'sortRows',
|
||||
@ -3400,7 +3397,7 @@ exports = module.exports = __webpack_require__(16)(false);
|
||||
|
||||
|
||||
// module
|
||||
exports.push([module.i, "/* variables */\n/* resets */\n*, *::after, *::before {\n box-sizing: border-box; }\n\n.data-table button, .data-table input {\n overflow: visible;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0; }\n\n/* styling */\n.data-table * {\n outline: none; }\n\n.data-table {\n width: 100%;\n position: relative;\n overflow: auto; }\n .data-table table {\n border-collapse: collapse; }\n .data-table table td {\n padding: 0;\n border: 1px solid #d1d8dd; }\n .data-table thead td {\n border-bottom-width: 1px; }\n .data-table .freeze-container {\n display: flex;\n justify-content: center;\n align-content: center;\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n background-color: #f5f7fa;\n opacity: 0.5;\n font-size: 2em; }\n .data-table .freeze-container span {\n position: absolute;\n top: 50%;\n transform: translateY(-50%); }\n .data-table .trash-container {\n position: absolute;\n bottom: 0;\n left: 30%;\n right: 30%;\n height: 70px;\n background: palevioletred;\n opacity: 0.5; }\n\n.body-scrollable {\n max-height: 500px;\n overflow: auto;\n border-bottom: 1px solid #d1d8dd; }\n .body-scrollable.row-highlight-all .data-table-row:not(.row-unhighlight) {\n background-color: #f5f7fa; }\n\n.data-table-header {\n position: absolute;\n top: 0;\n left: 0;\n background-color: white;\n font-weight: bold; }\n .data-table-header .content span:not(.column-resizer) {\n cursor: pointer; }\n .data-table-header .column-resizer {\n display: none;\n position: absolute;\n right: 0;\n top: 0;\n width: 0.25rem;\n height: 100%;\n background-color: #5292f7;\n cursor: col-resize; }\n .data-table-header .data-table-dropdown {\n position: absolute;\n right: 10px;\n display: inline-flex;\n vertical-align: top;\n text-align: left; }\n .data-table-header .data-table-dropdown.is-active .data-table-dropdown-list {\n display: block; }\n .data-table-header .data-table-dropdown.is-active .data-table-dropdown-toggle {\n display: block; }\n .data-table-header .data-table-dropdown-toggle {\n display: none;\n background-color: transparent;\n border: none; }\n .data-table-header .data-table-dropdown-list {\n display: none;\n font-weight: normal;\n position: absolute;\n min-width: 8rem;\n top: 100%;\n right: 0;\n z-index: 1;\n background-color: white;\n border-radius: 3px;\n box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);\n padding-bottom: 0.5rem;\n padding-top: 0.5rem; }\n .data-table-header .data-table-dropdown-list > div {\n padding: 0.5rem 1rem; }\n .data-table-header .data-table-dropdown-list > div:hover {\n background-color: #f5f7fa; }\n .data-table-header .data-table-col.remove-column {\n background-color: #FD8B8B;\n transition: 300ms background-color ease-in-out; }\n .data-table-header .data-table-col.sortable-chosen {\n background-color: #f5f7fa; }\n\n.data-table-col {\n position: relative; }\n .data-table-col .content {\n padding: 0.25rem;\n border: 2px solid transparent; }\n .data-table-col .content.ellipsis {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden; }\n .data-table-col .edit-cell {\n display: none;\n padding: 0.25rem;\n background: #fff;\n z-index: 1;\n height: 100%; }\n .data-table-col .edit-cell input {\n outline: none;\n width: 100%;\n border: none; }\n .data-table-col.selected .content {\n border: 2px solid #5292f7; }\n .data-table-col.editing .content {\n display: none; }\n .data-table-col.editing .edit-cell {\n border: 2px solid #5292f7;\n display: block; }\n .data-table-col.highlight {\n background-color: #f5f7fa; }\n .data-table-col:hover .column-resizer {\n display: inline-block; }\n .data-table-col:hover .data-table-dropdown-toggle {\n display: block; }\n\n.data-table-row.row-highlight {\n background-color: #f5f7fa; }\n\n.noselect {\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none; }\n\nbody.data-table-resize {\n cursor: col-resize; }\n", ""]);
|
||||
exports.push([module.i, "/* variables */\n/* resets */\n*, *::after, *::before {\n box-sizing: border-box; }\n\n.data-table button, .data-table input {\n overflow: visible;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0; }\n\n/* styling */\n.data-table * {\n outline: none; }\n\n.data-table {\n width: 100%;\n position: relative;\n overflow: auto; }\n .data-table table {\n border-collapse: collapse; }\n .data-table table td {\n padding: 0;\n border: 1px solid #d1d8dd; }\n .data-table thead td {\n border-bottom-width: 1px; }\n .data-table .freeze-container {\n display: flex;\n justify-content: center;\n align-content: center;\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n background-color: #f5f7fa;\n opacity: 0.5;\n font-size: 2em; }\n .data-table .freeze-container span {\n position: absolute;\n top: 50%;\n transform: translateY(-50%); }\n .data-table .trash-container {\n position: absolute;\n bottom: 0;\n left: 30%;\n right: 30%;\n height: 70px;\n background: palevioletred;\n opacity: 0.5; }\n\n.body-scrollable {\n max-height: 500px;\n overflow: auto;\n border-bottom: 1px solid #d1d8dd; }\n .body-scrollable.row-highlight-all .data-table-row:not(.row-unhighlight) {\n background-color: #f5f7fa; }\n\n.data-table-header {\n position: absolute;\n top: 0;\n left: 0;\n background-color: white;\n font-weight: bold; }\n .data-table-header .content span:not(.column-resizer) {\n cursor: pointer; }\n .data-table-header .column-resizer {\n display: none;\n position: absolute;\n right: 0;\n top: 0;\n width: 0.25rem;\n height: 100%;\n background-color: #5292f7;\n cursor: col-resize; }\n .data-table-header .data-table-dropdown {\n position: absolute;\n right: 10px;\n display: inline-flex;\n vertical-align: top;\n text-align: left; }\n .data-table-header .data-table-dropdown.is-active .data-table-dropdown-list {\n display: block; }\n .data-table-header .data-table-dropdown.is-active .data-table-dropdown-toggle {\n display: block; }\n .data-table-header .data-table-dropdown-toggle {\n display: none;\n background-color: transparent;\n border: none; }\n .data-table-header .data-table-dropdown-list {\n display: none;\n font-weight: normal;\n position: absolute;\n min-width: 8rem;\n top: 100%;\n right: 0;\n z-index: 1;\n background-color: white;\n border-radius: 3px;\n box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);\n padding-bottom: 0.5rem;\n padding-top: 0.5rem; }\n .data-table-header .data-table-dropdown-list > div {\n padding: 0.5rem 1rem; }\n .data-table-header .data-table-dropdown-list > div:hover {\n background-color: #f5f7fa; }\n .data-table-header .data-table-col.remove-column {\n background-color: #FD8B8B;\n transition: 300ms background-color ease-in-out; }\n .data-table-header .data-table-col.sortable-chosen {\n background-color: #f5f7fa; }\n\n.data-table-col {\n position: relative; }\n .data-table-col .content {\n padding: 0.25rem;\n border: 2px solid transparent; }\n .data-table-col .content.ellipsis {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden; }\n .data-table-col .edit-cell {\n display: none;\n padding: 0.25rem;\n background: #fff;\n z-index: 1;\n height: 100%; }\n .data-table-col .edit-cell input {\n outline: none;\n width: 100%;\n border: none; }\n .data-table-col.selected .content {\n border: 2px solid #5292f7; }\n .data-table-col.editing .content {\n display: none; }\n .data-table-col.editing .edit-cell {\n border: 2px solid #FD8B8B;\n display: block; }\n .data-table-col.highlight {\n background-color: #f5f7fa; }\n .data-table-col:hover .column-resizer {\n display: inline-block; }\n .data-table-col:hover .data-table-dropdown-toggle {\n display: block; }\n\n.data-table-row.row-highlight {\n background-color: #f5f7fa; }\n\n.noselect {\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none; }\n\nbody.data-table-resize {\n cursor: col-resize; }\n", ""]);
|
||||
|
||||
// exports
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -32,7 +32,6 @@ export default class BodyRenderer {
|
||||
</table>
|
||||
`;
|
||||
this.instance.setDimensions();
|
||||
|
||||
}
|
||||
|
||||
renderBodyWithClusterize() {
|
||||
|
||||
@ -50,19 +50,6 @@ export default class CellManager {
|
||||
this.deactivateEditing();
|
||||
}
|
||||
});
|
||||
|
||||
$.on(this.bodyScrollable, 'blur', 'input', (e, input) => {
|
||||
const cell = input.closest('.data-table-col');
|
||||
if (this.$editingCell === cell) {
|
||||
this.submitEditing();
|
||||
this.deactivateEditing();
|
||||
}
|
||||
});
|
||||
|
||||
// $.on(document.body, 'click', e => {
|
||||
// if (e.target.matches('.edit-cell, .edit-cell *')) return;
|
||||
// this.deactivateEditing();
|
||||
// });
|
||||
}
|
||||
|
||||
bindKeyboardNav() {
|
||||
@ -118,6 +105,8 @@ export default class CellManager {
|
||||
);
|
||||
|
||||
keyboard.on('esc', () => {
|
||||
// keep focus on the cell so that keyboard navigation works
|
||||
this.$editingCell.focus();
|
||||
this.deactivateEditing();
|
||||
});
|
||||
}
|
||||
|
||||
@ -268,6 +268,7 @@ export default class ColumnManager {
|
||||
this.setupNaturalColumnWidth();
|
||||
this.distributeRemainingWidth();
|
||||
this.setColumnStyle();
|
||||
this.setDefaultCellHeight();
|
||||
}
|
||||
|
||||
setHeaderStyle() {
|
||||
@ -353,7 +354,14 @@ export default class ColumnManager {
|
||||
});
|
||||
}
|
||||
|
||||
setDefaultCellHeight(height) {
|
||||
setDefaultCellHeight() {
|
||||
if (this.__cellHeightSet) return;
|
||||
const height = $.style($('.data-table-col', this.instance.datatableWrapper), 'height');
|
||||
this.setCellHeight(height);
|
||||
this.__cellHeightSet = true;
|
||||
}
|
||||
|
||||
setCellHeight(height) {
|
||||
this.style.setStyle('.data-table-col .content', {
|
||||
height: height + 'px'
|
||||
});
|
||||
@ -377,7 +385,7 @@ export default class ColumnManager {
|
||||
this.setColumnWidth(column.colIndex);
|
||||
});
|
||||
this.instance.setBodyWidth();
|
||||
this.setDefaultCellHeight($.style(this.instance.datatableWrapper.querySelector('.data-table-col'), 'height'));
|
||||
|
||||
}
|
||||
|
||||
sortRows(colIndex, sortOrder) {
|
||||
|
||||
@ -207,7 +207,7 @@ $spacer-3: 1rem;
|
||||
}
|
||||
|
||||
.edit-cell {
|
||||
border: 2px solid $primary-color;
|
||||
border: 2px solid $light-red;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user