react-graph-grid 0.1.4 → 0.1.6

package/dist/index30.esm.js

@@ -0,0 +1,363 @@
+import { require_jsx_runtime } from "./index7.esm.js";
+import { Overlay } from "./index9.esm.js";
+import { Modal } from "./index15.esm.js";
+import { Dropdown } from "./index17.esm.js";
+import { Grid } from "./index19.esm.js";
+import { GridGR } from "./index20.esm.js";
+import { GridDB } from "./index22.esm.js";
+import { GridFL } from "./index23.esm.js";
+import { FieldEdit } from "./index24.esm.js";
+import { GridFE } from "./index25.esm.js";
+import { GridCD } from "./index27.esm.js";
+import { TestData } from "./index29.esm.js";
+import { useState } from "react";
+var import_jsx_runtime = require_jsx_runtime();
+function DebugApp() {
+	const [state, setState] = useState({ menuItem: -2 });
+	window._logEnabled = true;
+	const GetFamily = function(e) {
+		return new Promise(function(resolve, reject) {
+			const rows = new TestData().getFamily(e);
+			if (rows != null) resolve(rows);
+			else reject(Error("Error getting rows"));
+		});
+	};
+	const GetButtons = function() {
+		return [{
+			id: 1,
+			name: "info",
+			title: "Persone Info",
+			label: "Persone Info",
+			click: function(e) {
+				const selRow = e.grid.selectedRowIndex >= 0 && e.grid.rows.length > 0 ? e.grid.rows[e.grid.selectedRowIndex] : null;
+				if (!selRow) return;
+				alert(`Persone Name = ${selRow.Name}, Persone Birth Day = ${selRow.Date}`);
+			},
+			getDisabled: function(e) {
+				return !e.grid.rows || e.grid.rows.length <= 0;
+			}
+		}, {
+			id: 2,
+			name: "clear",
+			title: "Clear console",
+			label: "Clear console",
+			click: function() {
+				console.clear();
+			}
+		}];
+	};
+	const GetCities = function(e) {
+		return new Promise(function(resolve, reject) {
+			const rows = new TestData().getCity(e);
+			if (rows != null) resolve(rows);
+			else reject(Error("Error getting rows"));
+		});
+	};
+	const GetCityColumns = function() {
+		return new TestData().GetCityColumns();
+	};
+	const GetFamilyColumns = function() {
+		return new TestData().GetFamilyColumns();
+	};
+	const ResetColumnsOrder = function() {
+		const grid = window.gridComponent;
+		if (!grid) return;
+		grid.resetColumnsOrderToDefault();
+	};
+	const ResetColumnsWidths = function() {
+		const grid = window.gridComponent;
+		if (!grid) return;
+		grid.resetColumnsWidthsToDefault();
+	};
+	const GetPopupItems = function() {
+		return new Promise(function(resolve) {
+			resolve([
+				{
+					id: 1,
+					text: "test 1 item"
+				},
+				{
+					id: 2,
+					text: "test 2 item"
+				},
+				{
+					id: 3,
+					text: "test 3 item"
+				},
+				{
+					id: 4,
+					text: "test 4 item"
+				},
+				{
+					id: 5,
+					text: "test 5 item"
+				}
+			]);
+		});
+	};
+	const drawGridInModal = function() {
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "div-on-menu",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+				onClick: () => {
+					console.clear();
+				},
+				className: "modal-window-footer-button",
+				children: "Clear console"
+			})
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Grid, {
+			getRows: GetFamily,
+			init: (grid) => {
+				window.gridComponent = grid;
+			}
+		})] });
+	};
+	const drawDropdownInModal = function(wnd) {
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "div-on-menu",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+					onClick: () => {
+						console.clear();
+					},
+					className: "modal-window-footer-button",
+					children: "Clear console"
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+					onClick: (e) => {
+						wnd.ddComponent.popup(e);
+					},
+					className: "modal-window-footer-button",
+					children: "Show Dropdown"
+				})]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: wnd.ddComponent && wnd.ddComponent.clickedItem ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Item Clicked : " + wnd.ddComponent.clickedItem }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {}) }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dropdown, {
+				init: (dd) => {
+					wnd.ddComponent = dd;
+				},
+				getItems: GetPopupItems,
+				onItemClick: (e) => {
+					e.self.clickedItem = e.itemId;
+					wnd.refreshState();
+				}
+			})
+		] });
+	};
+	const drawClearConsole = function() {
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+			onClick: () => {
+				console.clear();
+			},
+			className: "modal-window-footer-button",
+			children: "Clear console"
+		});
+	};
+	const drawTest = function() {
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
+	};
+	const getTestApp = () => {
+		console.log("state == " + state.menuItem);
+		switch (state.menuItem) {
+			case 0: return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
+			case 1: return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "div-on-menu",
+					children: "1. Drag column to reorder 2. Doubleclick on divider to autowidth"
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "div-on-menu",
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+							onClick: () => ResetColumnsOrder(),
+							className: "modal-window-footer-button",
+							children: "Reset columns order"
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+							onClick: () => ResetColumnsWidths(),
+							className: "modal-window-footer-button",
+							children: "Reset columns widths"
+						}),
+						drawClearConsole()
+					]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Grid, {
+					getRows: GetFamily,
+					init: (grid) => {
+						window.gridComponent = grid;
+					}
+				})
+			] });
+			case 2: return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "div-on-menu",
+				children: drawClearConsole()
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Overlay, {
+				init: (ovl) => {
+					window.overlayComponent = ovl;
+				},
+				closeWhenEscape: true,
+				closeWhenClick: true
+			})] });
+			case 3: return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Modal, {
+				uid: "m01",
+				isModal: true,
+				renderContent: () => {
+					return drawGridInModal();
+				},
+				closeWhenEscape: true,
+				pos: {
+					x: 100,
+					y: 100,
+					w: 600,
+					h: 450
+				},
+				title: "Modal Grid"
+			}) });
+			case 4: return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Modal, {
+				uid: "m02",
+				isModal: true,
+				title: "Dropdown",
+				renderContent: (wnd) => {
+					return drawDropdownInModal(wnd);
+				},
+				closeWhenEscape: true,
+				dimensionsByContent: true,
+				pos: {
+					x: 100,
+					y: 100,
+					w: 300,
+					h: 250
+				}
+			}) });
+			case 5: return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "div-on-menu",
+					children: "Change the active record in the parent grid to see the child rows."
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "div-on-menu",
+					children: drawClearConsole()
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "div-with-grid",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GridGR, {
+						uid: "people",
+						getRows: GetFamily
+					})
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "div-with-grid",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GridGR, {
+						uid: "cities",
+						parentGrids: "people",
+						getRows: GetCities,
+						getColumns: GetCityColumns
+					})
+				})
+			] });
+			case 6: return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "div-on-menu",
+				children: "Grid with pager, pocket and sortable columns. Hold shift to sort by multiple columns."
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "div-with-grid",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GridDB, {
+					getRows: GetFamily,
+					buttons: GetButtons(),
+					getColumns: GetFamilyColumns,
+					multi: true
+				})
+			})] });
+			case 7: return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "div-on-menu",
+				children: "Grid with column filters."
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "div-with-grid",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GridFL, {
+					getRows: GetFamily,
+					buttons: GetButtons(),
+					getColumns: GetFamilyColumns
+				})
+			})] });
+			case 8: return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Modal, {
+				uid: "m01",
+				isModal: true,
+				closeWhenEscape: true,
+				renderContent: () => {
+					return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: "div-with-grid",
+						children: [
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Persona" }),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldEdit, { column: {
+								id: 1,
+								name: "Persona",
+								getRows: GetFamily,
+								refKeyField: "Id",
+								refNameField: "Name",
+								type: "lookup"
+							} }),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Age" }),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldEdit, { column: {
+								id: 2,
+								name: "Age"
+							} })
+						]
+					});
+				},
+				pos: {
+					x: 100,
+					y: 100,
+					w: 400,
+					h: 200
+				},
+				title: "Field Edit"
+			}) });
+			case 9: return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "div-on-menu",
+				children: "Editable grid."
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "div-with-grid",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GridFE, {
+					getRows: GetFamily,
+					getColumns: GetFamilyColumns,
+					allowEdit: true
+				})
+			})] });
+			case 10: return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "div-on-menu",
+				children: "Editable grid with card-based record view."
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "div-with-grid",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GridCD, {
+					getRows: GetFamily,
+					getColumns: GetFamilyColumns,
+					allowEdit: true
+				})
+			})] });
+			case 11: return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: drawTest() });
+			default: return null;
+		}
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", {
+		onChange: (e) => {
+			setState({ menuItem: e.target.selectedIndex });
+		},
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { children: "0. None" }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { children: "1. React Grid" }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { children: "2. Overlay" }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { children: "3. Modal" }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { children: "4. Dropdown" }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { children: "5. Two Grids" }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { children: "6. GridDB" }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { children: "7. GridFL" }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { children: "8. Field Edit" }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { children: "9. GridFE" }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { children: "10. GridCD" }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { children: "11. TEST" })
+		]
+	}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "div-on-menu",
+		children: getTestApp()
+	})] });
+}
+export { DebugApp };