react-graph-grid 0.1.4 → 0.1.6

package/dist/index30.js

@@ -0,0 +1,363 @@
+const require_jsx_runtime$1 = require("./index7.js");
+const require_Overlay = require("./index9.js");
+const require_Modal = require("./index15.js");
+const require_Dropdown = require("./index17.js");
+const require_Grid = require("./index19.js");
+const require_GridGR = require("./index20.js");
+const require_GridDB = require("./index22.js");
+const require_GridFL = require("./index23.js");
+const require_FieldEdit = require("./index24.js");
+const require_GridFE = require("./index25.js");
+const require_GridCD = require("./index27.js");
+const require_TestData = require("./index29.js");
+let react = require("react");
+var import_jsx_runtime = require_jsx_runtime$1.default;
+function DebugApp() {
+	const [state, setState] = (0, react.useState)({ menuItem: -2 });
+	window._logEnabled = true;
+	const GetFamily = function(e) {
+		return new Promise(function(resolve, reject) {
+			const rows = new require_TestData.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 require_TestData.TestData().getCity(e);
+			if (rows != null) resolve(rows);
+			else reject(Error("Error getting rows"));
+		});
+	};
+	const GetCityColumns = function() {
+		return new require_TestData.TestData().GetCityColumns();
+	};
+	const GetFamilyColumns = function() {
+		return new require_TestData.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)(require_Grid.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)(require_Dropdown.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)(require_Grid.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)(require_Overlay.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)(require_Modal.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)(require_Modal.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)(require_GridGR.GridGR, {
+						uid: "people",
+						getRows: GetFamily
+					})
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "div-with-grid",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(require_GridGR.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)(require_GridDB.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)(require_GridFL.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)(require_Modal.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)(require_FieldEdit.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)(require_FieldEdit.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)(require_GridFE.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)(require_GridCD.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()
+	})] });
+}
+exports.DebugApp = DebugApp;

package/dist/index4.esm.js

@@ -0,0 +1,27 @@
+var DefaultGridTheme = class {
+	constructor() {
+		this.pagerButtonsClass = "grid-pager-button";
+		this.toolbarClass = "";
+		this.toolbarButtonsClass = "grid-toolbar-button";
+		this.pocketButtonsClass = "grid-pocket-button";
+		this.pagerClass = "mb-1 grid-pager-default";
+		this.gridClass = "";
+		this.headerDivClass = " ";
+		this.selectedRowClass = "table-active";
+		this.inputClass = "input-default-class";
+		this.inputClassLG = "input-default-class-lg";
+		this.selectClass = "select-default-class";
+		this.tabControlButtonClass = "graph-tabcontrol-button";
+		this.menuClass = "";
+		this.menuItemClass = "";
+		this.dropdownWndClass = "none";
+		this.filterButtonClass = "graph-filter-button";
+		this.clearButtonClass = "";
+		this.modalBodyClass = "modal-window-body";
+		this.modalHeaderClass = "modal-window-header";
+		this.modalFooterClass = "modal-window-footer";
+		this.modalFooterButtonClass = "modal-window-footer-button";
+		this.modalTitleClass = "modal-window-header-title";
+	}
+};
+export { DefaultGridTheme };

package/dist/index4.js

@@ -0,0 +1,27 @@
+var DefaultGridTheme = class {
+	constructor() {
+		this.pagerButtonsClass = "grid-pager-button";
+		this.toolbarClass = "";
+		this.toolbarButtonsClass = "grid-toolbar-button";
+		this.pocketButtonsClass = "grid-pocket-button";
+		this.pagerClass = "mb-1 grid-pager-default";
+		this.gridClass = "";
+		this.headerDivClass = " ";
+		this.selectedRowClass = "table-active";
+		this.inputClass = "input-default-class";
+		this.inputClassLG = "input-default-class-lg";
+		this.selectClass = "select-default-class";
+		this.tabControlButtonClass = "graph-tabcontrol-button";
+		this.menuClass = "";
+		this.menuItemClass = "";
+		this.dropdownWndClass = "none";
+		this.filterButtonClass = "graph-filter-button";
+		this.clearButtonClass = "";
+		this.modalBodyClass = "modal-window-body";
+		this.modalHeaderClass = "modal-window-header";
+		this.modalFooterClass = "modal-window-footer";
+		this.modalFooterButtonClass = "modal-window-footer-button";
+		this.modalTitleClass = "modal-window-header-title";
+	}
+};
+exports.DefaultGridTheme = DefaultGridTheme;

package/dist/index5.esm.js

@@ -0,0 +1,35 @@
+import { __commonJSMin } from "./index2.esm.js";
+/**
+* @license React
+* react-jsx-runtime.production.js
+*
+* Copyright (c) Meta Platforms, Inc. and affiliates.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+var require_react_jsx_runtime_production = /* @__PURE__ */ __commonJSMin(((exports) => {
+	var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
+	function jsxProd(type, config, maybeKey) {
+		var key = null;
+		void 0 !== maybeKey && (key = "" + maybeKey);
+		void 0 !== config.key && (key = "" + config.key);
+		if ("key" in config) {
+			maybeKey = {};
+			for (var propName in config) "key" !== propName && (maybeKey[propName] = config[propName]);
+		} else maybeKey = config;
+		config = maybeKey.ref;
+		return {
+			$$typeof: REACT_ELEMENT_TYPE,
+			type,
+			key,
+			ref: void 0 !== config ? config : null,
+			props: maybeKey
+		};
+	}
+	exports.Fragment = REACT_FRAGMENT_TYPE;
+	exports.jsx = jsxProd;
+	exports.jsxs = jsxProd;
+}));
+export default require_react_jsx_runtime_production();
+export { require_react_jsx_runtime_production };

package/dist/index5.js

@@ -0,0 +1,39 @@
+const require_rolldown_runtime = require("./index2.js");
+/**
+* @license React
+* react-jsx-runtime.production.js
+*
+* Copyright (c) Meta Platforms, Inc. and affiliates.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+var require_react_jsx_runtime_production = /* @__PURE__ */ require_rolldown_runtime.__commonJSMin(((exports) => {
+	var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
+	function jsxProd(type, config, maybeKey) {
+		var key = null;
+		void 0 !== maybeKey && (key = "" + maybeKey);
+		void 0 !== config.key && (key = "" + config.key);
+		if ("key" in config) {
+			maybeKey = {};
+			for (var propName in config) "key" !== propName && (maybeKey[propName] = config[propName]);
+		} else maybeKey = config;
+		config = maybeKey.ref;
+		return {
+			$$typeof: REACT_ELEMENT_TYPE,
+			type,
+			key,
+			ref: void 0 !== config ? config : null,
+			props: maybeKey
+		};
+	}
+	exports.Fragment = REACT_FRAGMENT_TYPE;
+	exports.jsx = jsxProd;
+	exports.jsxs = jsxProd;
+}));
+Object.defineProperty(exports, "default", {
+	enumerable: true,
+	get: function() {
+		return require_react_jsx_runtime_production();
+	}
+});