react-graph-grid 0.1.4 → 0.1.5

package/dist/index25.esm.js

@@ -0,0 +1,600 @@
+import { require_jsx_runtime } from "./index7.esm.js";
+import { Modal } from "./index15.esm.js";
+import { Images } from "./index16.esm.js";
+import { GridFLClass } from "./index23.esm.js";
+import { FieldEdit } from "./index24.esm.js";
+import { useEffect, useState } from "react";
+var import_jsx_runtime = require_jsx_runtime();
+function GridFE(props) {
+	let grid = null;
+	const [gridState, setState] = useState({
+		grid,
+		ind: 0
+	});
+	grid = gridState.grid;
+	let needGetRows = false;
+	if (!grid || grid.uid !== props.uid && props.uid != null) {
+		grid = null;
+		if (props.findGrid) grid = props.findGrid(props);
+		grid = grid || new GridFEClass(props);
+		needGetRows = !props.noAutoRefresh && !grid.hasVisibleParentGrids();
+	}
+	if (props.init) props.init(grid);
+	grid.refreshState = function() {
+		setState({
+			grid,
+			ind: grid.stateind++
+		});
+	};
+	useEffect(() => {
+		grid.setupEvents();
+		if (needGetRows && (grid.rows.length <= 0 || grid.columns.length <= 0) || grid._forceRefresh) {
+			grid._forceRefresh = false;
+			grid._waitingRows = true;
+			grid.getRows({
+				filters: grid.collectFilters(),
+				grid
+			}).then((rows) => {
+				grid.rows = rows;
+				grid.afterGetRows();
+				grid.refreshState();
+			}).finally(() => {
+				grid._waitingRows = false;
+				grid.refreshState();
+			});
+		} else if (grid.columns.length <= 0 && grid.getColumns) grid.prepareColumns().then(() => grid.refreshState());
+		return () => {
+			grid.clearEvents();
+		};
+	}, [grid, needGetRows]);
+	return grid.render();
+}
+var GridFEClass = class extends GridFLClass {
+	constructor(props) {
+		super(props);
+		const grid = this;
+		grid.allowEdit = props.allowEdit;
+		grid.allowView = false;
+		grid.allowAdd = true;
+		grid.allowCopy = true;
+		grid.allowDelete = true;
+		grid.closeSelfWnd = grid.closeSelfWnd || (() => {});
+		grid.onSelectValue = props.onSelectValue || (() => {});
+		const shift = (grid.level + 1) * 20;
+		grid.popupPos = {
+			x: 100 + shift,
+			y: 100 + shift,
+			w: 800,
+			h: 600
+		};
+		grid.addToolbarButtons();
+	}
+	render() {
+		const grid = this;
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [super.render(), grid.renderPopup()] });
+	}
+	isVisible() {
+		return this.visible;
+	}
+	renderPopup() {
+		const grid = this;
+		return grid.popupIsShowing ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Modal, {
+			title: grid.popupTitle,
+			level: grid.level + 1,
+			renderContent: (wnd) => {
+				return grid.renderPopupContent(wnd);
+			},
+			dimensionsByContent: grid.popupDimensionsByContent,
+			pos: grid.popupPos,
+			closeWhenEscape: grid.popupCloseWhenEscape,
+			onClose: (e) => {
+				grid.onClosePopup(e);
+				grid.refreshState();
+			},
+			footerButtons: grid._popupButtons ? grid._popupButtons : null
+		}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
+	}
+	onClosePopup() {
+		const grid = this;
+		grid.popupIsShowing = false;
+		grid.popupCloseWhenEscape = false;
+		grid.popupTitle = "";
+		delete grid._popupButtons;
+	}
+	renderPopupContent(wnd) {
+		const grid = this;
+		return grid.columnsSettingsIsShowing ? grid.renderColumnsSettings(wnd) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
+	}
+	renderCell(grid, col, row, selected) {
+		if (!grid.allowEdit && !col.allowVerticalResize || !selected || grid.isDisabled()) return super.renderCell(grid, col, row);
+		row = !grid.isEditing() || !grid.changedRow ? row : grid.changedRow;
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldEdit, {
+			keyPref: grid.id + "_" + row[grid.keyField],
+			column: col,
+			value: col.type === "lookup" ? row[col.keyField] : row[col.name],
+			text: row[col.name],
+			findFieldEdit: () => {
+				return col._fieldEditObj;
+			},
+			selectH: "1.4em",
+			level: grid.level,
+			init: (fe) => {
+				if (grid.isEditing() && !grid.changedRow) {
+					grid.changedRow = {};
+					Object.assign(grid.changedRow, grid.selectedRow());
+				}
+				fe.ownerGrid = grid;
+				const lrow = !grid.isEditing() ? grid.selectedRow() : grid.changedRow;
+				col._fieldEditObj = fe;
+				fe.value = col.type === "lookup" ? lrow[col.keyField] : lrow[col.name];
+				fe.text = lrow[col.name];
+			},
+			onChange: (e) => {
+				if (!grid.changedRow) {
+					grid.changedRow = {};
+					Object.assign(grid.changedRow, grid.selectedRow());
+				}
+				if (col.type === "lookup") {
+					grid.changedRow[col.keyField] = e.value;
+					grid.changedRow[col.name] = e.text;
+					if (!grid.isEditing()) {
+						grid.setEditing(true);
+						grid.refreshState();
+					}
+					e.fe.refreshState();
+				} else {
+					grid.changedRow[col.name] = e.value;
+					if (!grid.isEditing()) {
+						grid.setEditing(true);
+						grid.refreshState();
+					} else e.fe.refreshState();
+				}
+			}
+		});
+	}
+	addToolbarButtons() {
+		const grid = this;
+		grid.buttons.push({
+			id: grid.buttons.length,
+			name: "commit",
+			title: grid.translate("Commit changes"),
+			label: grid.translate("Commit"),
+			img: Images.images.commit,
+			click: (e) => grid.commitChanges(e),
+			getDisabled: (e) => grid.commitChangesDisabled(e)
+		});
+		grid.buttons.push({
+			id: grid.buttons.length,
+			name: "rollback",
+			title: grid.translate("Rollback changes"),
+			label: grid.translate("Rollback"),
+			img: Images.images.rollback,
+			click: (e) => grid.rollbackChanges(e),
+			getDisabled: (e) => grid.rollbackChangesDisabled(e)
+		});
+		grid.buttons.push({
+			id: grid.buttons.length,
+			name: "add",
+			title: grid.translate("Add new record"),
+			label: grid.translate("Add"),
+			img: Images.images.addRecord,
+			click: (e) => grid.addRecord(e),
+			getDisabled: (e) => grid.addRecordDisabled(e)
+		});
+		grid.buttons.push({
+			id: grid.buttons.length,
+			name: "copy",
+			title: grid.translate("Copy record"),
+			label: grid.translate("Copy"),
+			img: Images.images.copyRecord,
+			click: (e) => grid.copyRecord(e),
+			getDisabled: (e) => grid.copyRecordDisabled(e)
+		});
+		grid.buttons.push({
+			id: grid.buttons.length,
+			name: "delete",
+			title: grid.translate("Delete record"),
+			label: grid.translate("Delete"),
+			img: Images.images.deleteRecord,
+			click: (e) => grid.deleteRecord(e),
+			getDisabled: (e) => grid.deleteRecordDisabled(e)
+		});
+		grid.buttons.push({
+			id: grid.buttons.length,
+			name: "view",
+			title: grid.translate("View record"),
+			label: grid.translate("View"),
+			img: Images.images.viewRecord,
+			click: (e) => grid.viewRecord(e),
+			getDisabled: (e) => grid.viewRecordDisabled(e),
+			getVisible: () => {
+				return false;
+			}
+		});
+		grid.buttons.push({
+			id: grid.buttons.length,
+			name: "selectValue",
+			title: grid.translate("Select value"),
+			label: grid.translate("Select"),
+			click: (e) => grid.selectRecord(e),
+			img: Images.images.selectFilterValue,
+			getDisabled: (e) => grid.selectRecordDisabled(e),
+			getVisible: () => {
+				return grid.isSelecting;
+			}
+		});
+		grid.buttons.push({
+			id: grid.buttons.length,
+			name: "exit",
+			title: grid.translate("Exit"),
+			label: grid.translate("Exit"),
+			click: (e) => grid.closeSelfWnd(e),
+			img: Images.images.exit,
+			getDisabled: (e) => grid.exitDisabled(e),
+			getVisible: () => {
+				return grid.isSelecting;
+			}
+		});
+		grid._buttonsDict = {};
+		for (let btn of grid.buttons) grid._buttonsDict[btn.name] = btn;
+	}
+	selectRecord(e) {
+		const grid = this;
+		const row = grid.selectedRow();
+		delete grid._selectedRows;
+		if (!grid.multi || !grid.pocketOpened) {
+			e.value = row[grid.keyField];
+			e.text = row[grid.nameField];
+			e.values = [{
+				value: e.value,
+				label: e.text
+			}];
+		} else {
+			e.multi = true;
+			if (Object.keys(grid._selectedRowsDict).length === 0) grid._selectedRowsDict[row[grid.keyField]] = row;
+			const texts = [];
+			e.value = grid.selectedValue();
+			e.values = grid.selectedValues(texts);
+			e.text = texts.join(", ");
+		}
+		grid.onSelectValue(e);
+	}
+	onRowDblClick(e, row) {
+		const grid = this;
+		super.onRowDblClick(e, row);
+		if (grid.isSelecting && !grid.multi && grid.onSelectValue) {
+			const row$1 = grid.selectedRow();
+			e.value = row$1[grid.keyField];
+			e.text = row$1[grid.nameField];
+			grid.onSelectValue(e);
+		}
+	}
+	commitChanges(e) {
+		const grid = this;
+		const row = grid.selectedRow();
+		grid.saveRow({
+			row,
+			changedRow: grid.changedRow
+		}).then(() => {
+			grid.setEditing(false);
+			Object.assign(row, grid.changedRow);
+			delete grid.changedRow;
+			grid.refreshState();
+		}).catch((message) => {
+			Object.assign(grid.changedRow, row);
+			grid.refreshState();
+			alert(message || "Error!");
+		});
+	}
+	commitChangesDisabled(e) {
+		const grid = this;
+		return grid._waitingRows || !grid.isEditing() || grid.isDisabled();
+	}
+	rollbackChanges(e) {
+		const grid = this;
+		delete grid.changedRow;
+		grid.setEditing(false);
+		grid.refreshState();
+	}
+	rollbackChangesDisabled(e) {
+		const grid = this;
+		return grid._waitingRows || !grid.isEditing() || grid.isDisabled();
+	}
+	addRecord(e) {
+		const grid = this;
+		grid.getNewRow().then((newRow) => {
+			grid.rows.unshift(newRow);
+			grid.selectedRowIndex = 0;
+			grid.refreshState();
+		});
+	}
+	addRecordDisabled(e) {
+		const grid = this;
+		return grid._waitingRows || !grid.allowAdd || grid.isEditing() || grid.isDisabled();
+	}
+	copyRecord(e) {
+		const grid = this;
+		const newRow = {};
+		Object.assign(newRow, grid.selectedRow());
+		grid.rows.unshift(newRow);
+		grid.selectedRowIndex = 0;
+		grid.refreshState();
+	}
+	copyRecordDisabled(e) {
+		const grid = this;
+		return grid._waitingRows || !grid.allowCopy || grid.isEditing() || grid.isDisabled() || grid.selectedRowIndex == null || grid.selectedRowIndex < 0 || !grid.rows || grid.rows.length <= 0;
+	}
+	deleteRecord(e) {
+		const grid = this;
+		if (window.confirm(grid.translate("Delete  record") + "?")) grid.deleteRow(e).then(() => grid.refreshState());
+	}
+	deleteRecordDisabled(e) {
+		const grid = this;
+		return grid._waitingRows || !grid.allowDelete || grid.isEditing() || grid.isDisabled() || grid.selectedRowIndex == null || grid.selectedRowIndex < 0 || !grid.rows || grid.rows.length <= 0;
+	}
+	viewRecord(e) {}
+	viewRecordDisabled(e) {
+		const grid = this;
+		return grid._waitingRows || !grid.allowView || grid.isEditing() || grid.isDisabled() || grid.selectedRowIndex == null || grid.selectedRowIndex < 0 || !grid.rows || grid.rows.length <= 0;
+	}
+	selectRecordDisabled(e) {
+		const grid = this;
+		return grid._waitingRows || !grid.isSelecting || grid.isEditing() || grid.isDisabled() || grid.selectedRowIndex == null || grid.selectedRowIndex < 0 || !grid.rows || grid.rows.length <= 0;
+	}
+	exitDisabled(e) {
+		const grid = this;
+		return grid._waitingRows || !grid.isSelecting || grid.isEditing() || grid.isDisabled();
+	}
+	onSelectedRowChanged(e) {
+		const grid = this;
+		super.onSelectedRowChanged(e);
+		if (grid.allowEdit && grid.refreshState) grid.refreshState();
+	}
+	getSelectedRowIndex() {
+		const grid = this;
+		if (grid.value == null || grid.value === "") return;
+		let i = 0;
+		for (let row of grid.rows) {
+			if (row[grid.keyField] === grid.value) {
+				grid.selectedRowIndex = i;
+				break;
+			}
+			i++;
+		}
+	}
+	getGridMaxHeight() {
+		const grid = this;
+		return grid.frozenHeader ? grid.children && grid.children.length > 0 || grid.parents && grid.parents.length > 0 ? "40vh" : "80vh" : "";
+	}
+	async canLeaveRow(rowIndex) {
+		const grid = this;
+		return (!grid.allowEdit || !grid.isEditing()) && !grid.isDisabled();
+	}
+	keyCellAdd(selected) {
+		return selected ? "1" : this.stateind;
+	}
+	isRowChanged(row, secondRow) {
+		const grid = this;
+		secondRow = secondRow || grid.changedRow;
+		if (!secondRow) return false;
+		let res = false;
+		for (let col of grid.columns) if (secondRow[col.name] !== row[col.name]) return true;
+		return res;
+	}
+	getNewRow() {
+		const grid = this;
+		return new Promise(function(resolve, reject) {
+			const newRow = {};
+			for (let col of grid.columns) newRow[col.name] = "";
+			newRow[grid.keyField] = -1;
+			resolve(newRow);
+		});
+	}
+	saveRow(e) {
+		if (!this.isRowChanged(e.row)) return new Promise(function(resolve) {
+			resolve(true);
+		});
+		return new Promise(function(resolve, reject) {
+			e.row = e.changedRow;
+			resolve(true);
+		});
+	}
+	deleteRow(e) {
+		const grid = this;
+		e.row = e.row || grid.selectedRow();
+		return new Promise(function(resolve, reject) {
+			grid.rows = grid.rows.filter((item) => item != e.row);
+			resolve(true);
+		});
+	}
+	getGridSettingsList() {
+		const res = super.getGridSettingsList();
+		const grid = this;
+		res.push({
+			id: 4,
+			text: grid.translate("Adjust column visibility", "grid-menu")
+		});
+		if (!grid.exportDisabled) res.push({
+			id: 5,
+			text: grid.translate("Export to CSV", "grid-menu")
+		});
+		return res;
+	}
+	onSettingsItemClick(itemId) {
+		super.onSettingsItemClick(itemId);
+		const grid = this;
+		switch (String(itemId)) {
+			case "4":
+				grid.showColumnsSettings();
+				grid.refreshState();
+				break;
+			case "5":
+				grid.exportToCSV();
+				grid.refreshState();
+				break;
+			default:
+		}
+	}
+	applyColumnsVisibility() {
+		const grid = this;
+		for (let col of grid.columns) col.visible = col._newVisible;
+	}
+	showColumnsSettings() {
+		const grid = this;
+		grid.popupIsShowing = true;
+		grid.columnsSettingsIsShowing = true;
+		grid.popupTitle = grid.translate("Adjust column visibility");
+		grid._visibleColumnsCount = 0;
+		for (let col of grid.columns) {
+			col._newVisible = col.visible;
+			if (col._newVisible != false) grid._visibleColumnsCount++;
+		}
+		grid._popupButtons = [{
+			title: grid.translate("OK"),
+			onClick: (e) => {
+				grid.applyColumnsVisibility();
+				grid.columnsSettingsIsShowing = false;
+				grid.onClosePopup(e);
+				grid.refreshState();
+			}
+		}, {
+			title: grid.translate("Cancel"),
+			onClick: (e) => {
+				grid.columnsSettingsIsShowing = false;
+				grid.onClosePopup(e);
+				grid.refreshState();
+			}
+		}];
+	}
+	hideAllColumns(preview) {
+		const grid = this;
+		let first = true;
+		for (let col of grid.columns) {
+			if (col._newVisible == false || !preview && col.visible == false) continue;
+			if (first) {
+				first = false;
+				continue;
+			}
+			if (preview) {
+				col._newVisible = false;
+				grid._visibleColumnsCount--;
+			} else col.visible = false;
+		}
+	}
+	showAllColumns(preview) {
+		const grid = this;
+		for (let col of grid.columns) {
+			if (col._newVisible != false || !preview && col.visible != false) continue;
+			if (preview) {
+				col._newVisible = true;
+				grid._visibleColumnsCount++;
+			} else col.visible = true;
+		}
+	}
+	renderColumnsSettings() {
+		const grid = this;
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "grid-columns-settings-div",
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("ul", {
+					className: "dropdown-ul grid-columns-settings-div-ul",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", {
+						className: "dropdown-item",
+						onClick: (e) => {
+							grid.hideAllColumns(true);
+							grid.refreshState();
+						},
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							className: "dropdown-item-div",
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "grid-columns-settings-label",
+								children: grid.translate("Visible columns")
+							}), Images.images.last()]
+						})
+					}), grid.columns.map((column) => {
+						if (column._newVisible == false) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
+						return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", {
+							className: "dropdown-item",
+							onClick: (e) => {
+								if (grid._visibleColumnsCount > 1) {
+									column._newVisible = false;
+									grid._visibleColumnsCount--;
+									grid.refreshState();
+								}
+							},
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+								className: "dropdown-item-div",
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: column.title }), Images.images.next()]
+							})
+						});
+					})]
+				}) }),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("ul", {
+					className: "dropdown-ul grid-columns-settings-div-ul",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", {
+						className: "dropdown-item",
+						onClick: (e) => {
+							grid.showAllColumns(true);
+							grid.refreshState();
+						},
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							className: "dropdown-item-div",
+							children: [Images.images.first(), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "grid-columns-settings-label",
+								children: grid.translate("Invisible columns")
+							})]
+						})
+					}), grid.columns.map((column) => {
+						if (column._newVisible != false) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
+						return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", {
+							className: "dropdown-item",
+							onClick: (e) => {
+								column._newVisible = true;
+								grid._visibleColumnsCount++;
+								grid.refreshState();
+							},
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+								className: "dropdown-item-div",
+								children: [Images.images.prev(), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: column.title })]
+							})
+						});
+					})]
+				}) })
+			]
+		});
+	}
+	exportToCSV(filename, delimeter) {
+		const grid = this;
+		if (filename == null || filename == "") {
+			const date = /* @__PURE__ */ new Date();
+			filename = `exportCSV_${date.getDate()}_${date.getMonth()}_${date.getFullYear()}_${date.getTime()}_`;
+		}
+		delimeter = delimeter || ";";
+		let titles = [];
+		for (let col of grid.columns) {
+			if (col.visible == false) continue;
+			titles.push(col.title || col.name);
+		}
+		const csvContent = "" + [titles.join(delimeter), ...grid.rows.map((item) => {
+			let values = [];
+			for (let col of grid.columns) {
+				if (col.visible == false) continue;
+				values.push(item[col.name]);
+			}
+			return values.join(delimeter);
+		})].join("\n");
+		const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+		const link = document.createElement("a");
+		if (link.download !== void 0) {
+			const url = URL.createObjectURL(blob);
+			link.setAttribute("href", url);
+			link.setAttribute("download", filename);
+			link.style.visibility = "hidden";
+			document.body.appendChild(link);
+			link.click();
+			document.body.removeChild(link);
+		}
+	}
+};
+export { GridFE, GridFEClass };