mthb-canvas-table
Version:
143 lines (142 loc) • 5.52 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const CanvasTableEditAction_1 = require("./CanvasTableEditAction");
class CanvasTableEdit {
constructor(col, row, data, cellHeight, onRemve) {
this.hasBeenRemoved = false;
this.onKeydown = (ev) => {
let cancel;
let action;
switch (ev.code) {
case "Escape":
cancel = true;
break;
case "NumpadEnter":
case "Enter":
cancel = false;
break;
case "Tab":
cancel = false;
action = ev.shiftKey ? CanvasTableEditAction_1.CanvasTableEditAction.movePrev : CanvasTableEditAction_1.CanvasTableEditAction.moveNext;
ev.preventDefault();
break;
}
if (cancel !== undefined) {
const cancelArg = cancel;
setTimeout(() => {
this.doRemove(cancelArg, action);
}, 1);
}
};
this.onBlur = () => {
if (!this.hasBeenRemoved) {
setTimeout(() => {
this.doRemove(false, undefined);
}, 1);
}
};
this.column = col;
this.row = row;
this.onRemove = onRemve;
let lookup;
if (col.getLookup) {
lookup = col.getLookup(row, data, col);
}
if (!lookup) {
lookup = col.lookupData;
}
if (lookup !== undefined) {
const select = document.createElement("select");
this.inputeElement = select;
for (let i = 0, c = lookup.length; i < c; i++) {
const lookupItem = lookup[i];
const option = document.createElement("option");
if (typeof lookupItem === "string") {
option.text = lookupItem;
option.value = lookupItem;
}
else {
option.text = lookupItem.caption;
option.value = lookupItem.key;
}
option.selected = option.value === data;
select.add(option);
}
}
else {
this.inputeElement = document.createElement("input");
this.inputeElement.type = "text";
this.inputeElement.value = data;
}
this.inputeElement.style.position = "absolute";
this.inputeElement.style.border = "none";
if (this.inputeElement instanceof HTMLInputElement) {
this.inputeElement.style.width = (col.width - 7) + "px";
}
else {
this.inputeElement.style.width = col.width + "px";
}
this.inputeElement.style.height = cellHeight + "px";
this.inputeElement.style.padding = "0px 3px";
document.body.appendChild(this.inputeElement);
this.inputeElement.focus({ preventScroll: true });
this.inputeElement.addEventListener("blur", this.onBlur);
if (this.inputeElement instanceof HTMLSelectElement) {
this.inputeElement.addEventListener("keydown", this.onKeydown);
}
else {
this.inputeElement.addEventListener("keydown", this.onKeydown);
}
}
getRow() { return this.row; }
getColumn() { return this.column; }
updateEditLocation(top, left, width, height, clipTop, clipRight, clipBottom, clipLeft) {
this.inputeElement.style.top = top + "px";
this.inputeElement.style.left = left + "px";
if (this.inputeElement instanceof HTMLInputElement) {
this.inputeElement.style.width = (width - 7) + "px";
}
else {
this.inputeElement.style.width = width + "px";
}
this.inputeElement.style.height = height + "px";
if (clipTop === undefined && clipRight === undefined && clipBottom === undefined && clipLeft === undefined) {
this.inputeElement.style.clip = "";
}
else {
this.inputeElement.style.clip = "rect(" +
(clipTop === undefined ? "auto," : clipTop + "px,") +
(clipRight === undefined ? "auto," : clipRight + "px,") +
(clipBottom === undefined ? "auto," : clipBottom + "px,") +
(clipLeft === undefined ? "auto" : clipLeft + "px") +
")";
}
}
doRemove(cancel, action) {
let error;
try {
if (this.onRemove) {
this.onRemove(cancel, this.inputeElement.value, action);
}
}
catch (e) {
error = e;
}
this.onRemove = undefined;
this.inputeElement.removeEventListener("blur", this.onBlur);
if (this.inputeElement instanceof HTMLSelectElement) {
this.inputeElement.removeEventListener("keydown", this.onKeydown);
}
else {
this.inputeElement.removeEventListener("keydown", this.onKeydown);
}
if (!this.hasBeenRemoved) {
document.body.removeChild(this.inputeElement);
this.hasBeenRemoved = true;
}
if (error) {
throw error;
}
}
}
exports.CanvasTableEdit = CanvasTableEdit;