@revolist/revogrid
Version:
Virtual reactive data grid spreadsheet component - RevoGrid.
347 lines (346 loc) • 12.9 kB
JavaScript
/*!
* Built by Revolist OU ❤️
*/
import { h, Host, } from "@stencil/core";
import { EDIT_INPUT_WR } from "../../utils/consts";
import { TextEditor } from "./text-editor";
import { isEditorCtrConstructible } from "./edit.utils";
/**
* Represents a cell editor in a grid.
* It manages the editing of cells by handling events, saving data, rendering the editor UI,
* and managing the lifecycle of the editor instance.
*/
export class RevoEdit {
constructor() {
/**
* Save on editor close. Defines if data should be saved on editor close.
*/
this.saveOnClose = false;
this.currentEditor = null;
this.preventSaveOnClose = false;
}
/**
* Cancel pending changes flag. Editor will be closed without autosave.
*/
async cancelChanges() {
this.preventSaveOnClose = true;
}
/**
* Before editor got disconnected.
* Can be triggered multiple times before actual disconnect.
*/
async beforeDisconnect() {
var _a, _b;
(_b = (_a = this.currentEditor) === null || _a === void 0 ? void 0 : _a.beforeDisconnect) === null || _b === void 0 ? void 0 : _b.call(_a);
}
onAutoSave() {
var _a, _b, _c;
this.preventSaveOnClose = true;
const val = (_b = (_a = this.currentEditor) === null || _a === void 0 ? void 0 : _a.getValue) === null || _b === void 0 ? void 0 : _b.call(_a);
// For Editor plugin internal usage.
// When you want to prevent save and use custom save of your own.
if ((_c = this.currentEditor) === null || _c === void 0 ? void 0 : _c.beforeAutoSave) {
const canSave = this.currentEditor.beforeAutoSave(val);
if (canSave === false) {
return;
}
}
this.onSave(val, true);
}
/**
* Callback triggered when cell editor saved.
* Closes editor when called.
* @param preventFocus - if true, editor will not be closed & next cell will not be focused.
*/
onSave(val, preventFocus) {
this.preventSaveOnClose = true;
if (this.editCell) {
this.cellEdit.emit({
rgCol: this.editCell.x,
rgRow: this.editCell.y,
type: this.editCell.type,
prop: this.editCell.prop,
val,
preventFocus,
});
}
}
componentWillRender() {
// Active editor present and not yet closed.
if (this.currentEditor || !this.column) {
return;
}
this.preventSaveOnClose = false;
// Custom editor usage.
// Start with TextEditor (editors/text.tsx) for Custom editor.
// It can be class or function
if (this.editor) {
// if editor is constructible
if (isEditorCtrConstructible(this.editor)) {
this.currentEditor = new this.editor(this.column,
// save callback
(e, preventFocus) => {
this.onSave(e, preventFocus);
},
// cancel callback
focusNext => {
this.preventSaveOnClose = true;
this.closeEdit.emit(focusNext);
});
// if editor is function
}
else {
this.currentEditor = this.editor(this.column,
// save callback
(e, preventFocus) => {
this.onSave(e, preventFocus);
},
// cancel callback
focusNext => {
this.preventSaveOnClose = true;
this.closeEdit.emit(focusNext);
});
}
return;
}
// Default text editor usage
this.currentEditor = new TextEditor(this.column, (e, preventFocus) => this.onSave(e, preventFocus));
}
componentDidRender() {
var _a, _b;
if (!this.currentEditor) {
return;
}
this.currentEditor.element = this.element.firstElementChild;
(_b = (_a = this.currentEditor).componentDidRender) === null || _b === void 0 ? void 0 : _b.call(_a);
}
disconnectedCallback() {
var _a, _b;
if (this.saveOnClose) {
// Can not be cancelled by `preventSaveOnClose` prop.
// Editor requires `getValue` to be able to save.
if (!this.preventSaveOnClose) {
this.onAutoSave();
}
}
this.preventSaveOnClose = false;
if (!this.currentEditor) {
return;
}
(_b = (_a = this.currentEditor).disconnectedCallback) === null || _b === void 0 ? void 0 : _b.call(_a);
this.currentEditor.element = null;
this.currentEditor = null;
}
render() {
if (this.currentEditor) {
this.currentEditor.editCell = this.editCell;
return (h(Host, { class: EDIT_INPUT_WR }, this.currentEditor.render(h, this.additionalData)));
}
return '';
}
static get is() { return "revogr-edit"; }
static get originalStyleUrls() {
return {
"$": ["revogr-edit-style.scss"]
};
}
static get styleUrls() {
return {
"$": ["revogr-edit-style.css"]
};
}
static get properties() {
return {
"editCell": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "EditCell",
"resolved": "EditCellStore & BeforeSaveDataDetails<DataType, ColumnRegular<ColumnProp, DataType<any, ColumnProp>>>",
"references": {
"EditCell": {
"location": "import",
"path": "@type",
"id": "src/types/index.ts::EditCell",
"referenceLocation": "EditCell"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Cell to edit data."
},
"getter": false,
"setter": false
},
"column": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "ColumnDataSchemaModel | null",
"resolved": "ColumnDataSchemaModel<DataType<any, ColumnProp>, ColumnRegular<ColumnProp, DataType<any, ColumnProp>>, ColumnProp> | null",
"references": {
"ColumnDataSchemaModel": {
"location": "import",
"path": "@type",
"id": "src/types/index.ts::ColumnDataSchemaModel",
"referenceLocation": "ColumnDataSchemaModel"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Column data for editor."
},
"getter": false,
"setter": false
},
"editor": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "EditorCtr | null",
"resolved": "((column: ColumnDataSchemaModel<DataType<any, ColumnProp>, ColumnRegular<ColumnProp, DataType<any, ColumnProp>>, ColumnProp>, save: (value?: any, preventFocus?: boolean | undefined) => void, close: (focusNext?: boolean | undefined) => void) => EditorBase) | EditorCtrConstructible | null",
"references": {
"EditorCtr": {
"location": "import",
"path": "@type",
"id": "src/types/index.ts::EditorCtr",
"referenceLocation": "EditorCtr"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Custom editors register"
},
"getter": false,
"setter": false
},
"saveOnClose": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Save on editor close. Defines if data should be saved on editor close."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "save-on-close",
"defaultValue": "false"
},
"additionalData": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Additional data to pass to renderer"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "additional-data"
}
};
}
static get events() {
return [{
"method": "cellEdit",
"name": "celleditinit",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Cell edit event initiator, first in the cellEdit event chain"
},
"complexType": {
"original": "SaveDataDetails",
"resolved": "{ rgRow: number; rgCol: number; type: DimensionRows; prop: ColumnProp; val: any; preventFocus?: boolean | undefined; }",
"references": {
"SaveDataDetails": {
"location": "import",
"path": "@type",
"id": "src/types/index.ts::SaveDataDetails",
"referenceLocation": "SaveDataDetails"
}
}
}
}, {
"method": "closeEdit",
"name": "closeedit",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Close editor event\npass true if requires focus next"
},
"complexType": {
"original": "boolean | undefined",
"resolved": "boolean | undefined",
"references": {}
}
}];
}
static get methods() {
return {
"cancelChanges": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Cancel pending changes flag. Editor will be closed without autosave.",
"tags": []
}
},
"beforeDisconnect": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Before editor got disconnected.\nCan be triggered multiple times before actual disconnect.",
"tags": []
}
}
};
}
static get elementRef() { return "element"; }
}