@visactor/vue-vtable
Version:
The vue version of VTable
187 lines (184 loc) • 7.88 kB
JavaScript
import { __awaiter } from 'tslib';
import { isValid } from '@visactor/vutils';
import { isVNode, render } from 'vue';
import { TYPES } from '@visactor/vtable';
class DynamicRenderEditor {
constructor(currentContext) {
this.currentContext = currentContext;
this.tableContainer = null;
this.currentValue = null;
this.wrapContainer = null;
this.nodeMap = new Map();
}
registerNode(tableId, key, getNode) {
if (!isValid(tableId) || !isValid(key) || typeof getNode !== 'function') {
return;
}
if (!this.nodeMap.has(tableId)) {
this.nodeMap.set(tableId, new Map());
}
this.nodeMap.get(tableId).set(key, getNode);
}
getNode(tableId, key) {
var _a;
return (_a = this.nodeMap.get(tableId)) === null || _a === void 0 ? void 0 : _a.get(key);
}
removeNode(tableId) {
this.nodeMap.delete(tableId);
}
release(tableId) {
if (!isValid(tableId)) {
this.nodeMap.clear();
}
else {
this.removeNode(tableId);
}
}
onStart(editorContext) {
return __awaiter(this, void 0, void 0, function* () {
const { value } = editorContext;
this.setValue(value);
if (!(yield this.createElement(editorContext))) {
return;
}
});
}
createElement(editorContext) {
var _a, _b;
return __awaiter(this, void 0, void 0, function* () {
const { row, col, value, table, container, referencePosition } = editorContext;
if (!container) {
return false;
}
const define = table.getBodyColumnDefine(col, row);
const { editConfig } = define || {};
const { id } = table;
const key = this.getColumnKeyField(define);
if (!isValid(key) || !isValid(id)) {
return false;
}
if (typeof (editConfig === null || editConfig === void 0 ? void 0 : editConfig.editBefore) === 'function') {
const v = yield editConfig.editBefore(editorContext);
if (!v) {
table.showTooltip(col, row, {
content: editConfig.disablePrompt || 'This field is not allowed to be edited',
referencePosition: { rect: referencePosition === null || referencePosition === void 0 ? void 0 : referencePosition.rect, placement: TYPES.Placement.top },
style: {
bgColor: 'black',
color: 'white',
arrowMark: true
},
disappearDelay: 1000
});
return false;
}
}
const record = table === null || table === void 0 ? void 0 : table.getCellOriginRecord(col, row);
const vnode = (_b = (_a = this.getNode(id, key)) === null || _a === void 0 ? void 0 : _a({
row,
col,
value,
record,
table,
onChange: (value) => this.setValue(value)
})) === null || _b === void 0 ? void 0 : _b.find((node) => (node === null || node === void 0 ? void 0 : node.type) !== Symbol.for('v-cmt'));
if (!vnode || !isVNode(vnode)) {
return false;
}
this.checkToPassAppContext(vnode, table);
const wrapContainer = document.createElement('div');
wrapContainer.style.position = 'absolute';
wrapContainer.style.width = '100%';
wrapContainer.style.boxSizing = 'border-box';
const { bgColor } = table.getCellStyle(col, row) || {};
wrapContainer.style.backgroundColor = bgColor || '#FFFFFF';
this.wrapContainer = wrapContainer;
this.tableContainer = container;
this.tableContainer.appendChild(wrapContainer);
render(vnode, wrapContainer);
if (referencePosition === null || referencePosition === void 0 ? void 0 : referencePosition.rect) {
this.adjustPosition(referencePosition.rect);
}
return true;
});
}
checkToPassAppContext(vnode, table) {
var _a, _b, _c, _d;
try {
const userAppContext = (_d = (_c = (_b = (_a = table.options) === null || _a === void 0 ? void 0 : _a.customConfig) === null || _b === void 0 ? void 0 : _b.getVueUserAppContext) === null || _c === void 0 ? void 0 : _c.call(_b)) !== null && _d !== void 0 ? _d : this.currentContext;
if (!!(userAppContext === null || userAppContext === void 0 ? void 0 : userAppContext.components) && !!(userAppContext === null || userAppContext === void 0 ? void 0 : userAppContext.directives)) {
vnode.appContext = userAppContext;
}
}
catch (error) { }
}
getColumnKeyField(column) {
const { field, key } = column || {};
return isValid(key) ? key : field;
}
getValue() {
return this.currentValue;
}
setValue(value) {
this.currentValue = value;
}
adjustPosition(rect) {
if (this.wrapContainer) {
this.wrapContainer.style.top = `${rect.top}px`;
this.wrapContainer.style.left = `${rect.left}px`;
this.wrapContainer.style.width = `${rect.width}px`;
this.wrapContainer.style.height = `${rect.height}px`;
}
}
validateValue(value, oldValue, editCell, table) {
return __awaiter(this, void 0, void 0, function* () {
const { col, row } = editCell || {};
if (!isValid(col) || !isValid(row)) {
return true;
}
const define = table.getBodyColumnDefine(col, row);
const { editConfig } = define || {};
if (typeof (editConfig === null || editConfig === void 0 ? void 0 : editConfig.validateValue) === 'function') {
const validate = yield editConfig.validateValue({ col, row, value, oldValue, table });
if (validate === false) {
const rect = table.getVisibleCellRangeRelativeRect({ col, row });
table.showTooltip(col, row, {
content: editConfig.invalidPrompt || 'invalid',
referencePosition: { rect, placement: TYPES.Placement.top },
style: {
bgColor: 'red',
color: 'white',
arrowMark: true
},
disappearDelay: 1000
});
return false;
}
return validate;
}
return true;
});
}
onEnd() {
if (this.wrapContainer && this.tableContainer) {
render(null, this.wrapContainer);
this.tableContainer.removeChild(this.wrapContainer);
}
this.wrapContainer = null;
this.tableContainer = null;
}
isEditorElement(target) {
var _a;
return ((_a = this.wrapContainer) === null || _a === void 0 ? void 0 : _a.contains(target)) || this.isClickEditorElement(target);
}
isClickEditorElement(target) {
while (target) {
if (target.classList && target.classList.contains('table-editor-element')) {
return true;
}
target = target.parentNode;
}
return false;
}
}
export { DynamicRenderEditor };