JSFiddle - React, Tailwind, and code Playground
JavaScript
YUI.add('dt-inplace-edit',
function (Y) {
"use strict";
var recColPrototype = {
equals: function (o) {
return this === o || (o && this.rec === o.rec && this.columnName === o.columnName);
}
},
newRecCol = function (rec, columnName) {
var o = Y.Object(recColPrototype);
o.rec = rec;
o.columnName = columnName;
return o;
};
function DataTableInplaceEdit() {
}
DataTableInplaceEdit.prototype = {
inplaceEditEnterAction: 'moveNext',
initializer: function () {
var self = this, colClassNamePrefix;
self._const = {
colClassNamePrefix: colClassNamePrefix = self.getClassName('col') + '-',
colClassNameRegex: new RegExp(colClassNamePrefix + '(.*)'),
colClassNameSelectorPrefix: 'td.' + colClassNamePrefix,
};
self.delegate('click', function (e) {
self._inplaceEditStart(e.target, true);
}, '.' + self.getClassName('cell'), self);
this.onceAfter('render', function () {
Y.Do.after(this._reinstallInputTdNode, this.body, 'render', this);
});
},
_inplaceEditCancel: function () {
if (this._inputTdNode && this._workTdNode) {
this._inputTdNode.replace(this._workTdNode);
}
this._workTdNode = null;
this._focusedRowCol = null;
},
_inplaceEditRender: function (td) {
var w, inputTdClassName;
this._inplaceEditCancel();
if (!this._inputTdNode) {
inputTdClassName = this.getClassName('inplace-edit-container');
this._inputTdNodeSelector = '.' + inputTdClassName;
this._inputTdNode = Y.Node.create('<td class="' + inputTdClassName + ' ' + this.getClassName('cell') + '"><input type="text" class="' + this.getClassName('inplace-edit') + '"/></td>');
this._inputBoxNode = this._inputTdNode.one('input');
this._inputBoxNode.on("keydown",...