react-graph-grid 0.1.3 → 0.1.5

package/dist/index17.esm.js

@@ -0,0 +1,256 @@
+import { require_jsx_runtime } from "./index7.esm.js";
+import { BaseComponent } from "./index8.esm.js";
+import { ModalClass } from "./index15.esm.js";
+import { Images } from "./index16.esm.js";
+import { useEffect, useState } from "react";
+var import_jsx_runtime = require_jsx_runtime();
+function Dropdown(props) {
+	let dd = null;
+	const [ddState, setState] = useState({
+		dd,
+		ind: 0
+	});
+	if (ddState.dd) dd = ddState.dd;
+	else dd = new DropdownClass(props);
+	if (props.init && !ModalClass._isFake) props.init(dd);
+	dd.refreshState = function() {
+		setState({
+			dd,
+			ind: dd.stateind++
+		});
+	};
+	useEffect(() => {
+		dd.setupEvents();
+		return () => {
+			dd.clearEvents();
+		};
+	}, [dd]);
+	return dd.render();
+}
+var DropdownClass = class extends ModalClass {
+	constructor(props) {
+		super(props);
+		const dd = this;
+		dd.getItems = props.getItems || function() {
+			return new Promise(function(resolve) {
+				resolve([]);
+			});
+		};
+		window._dropdownSeq = window._dropdownSeq || 0;
+		dd.id = window._dropdownSeq++;
+		dd.pageNumber = 1;
+		dd.pageSize = props.pageSize || 20;
+		dd.items = props.items || [];
+		dd.menuItemClass = props.menuItemClass || BaseComponent.theme.menuItemClass;
+		dd.menuClass = props.menuClass || BaseComponent.theme.menuClass;
+		dd.stateind = 0;
+		dd.opt.onItemClick = props.onItemClick;
+		dd.opt.onClose = props.onClose;
+		dd.opt.parentRect = props.parentRect;
+		dd.maxW = props.maxW;
+		dd.opt.closeWhenEscape = true;
+		dd.opt.noHeader = true;
+		dd.opt.noFooter = true;
+		dd.opt.resizable = false;
+		dd.opt.noPadding = true;
+		dd.opt.hiddenOverlay = true;
+		dd.opt.onItemMouseEnter = props.onItemMouseEnter;
+		dd.opt.onItemMouseLeave = props.onItemMouseLeave;
+		dd.renderContent = dd.renderDropdownContent;
+		dd.visible = dd.items.length > 0;
+	}
+	appendItems() {
+		const dd = this;
+		dd.pageNumber++;
+		dd.getItems({ filter: dd.filter }).then((items) => {
+			dd.items = items;
+			dd.refreshState();
+		});
+	}
+	render() {
+		return super.render();
+	}
+	renderDropdownContent() {
+		const dd = this;
+		if (!dd.items || dd.waitingItems) return dd.Spinner(dd.id);
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [dd.allowUserFilter ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("ul", {
+			className: `dropdown-ul ${dd.menuClass || ""}`,
+			style: {
+				overflowX: "hidden",
+				padding: "0",
+				margin: "0"
+			},
+			children: [dd.items.map((item, ind) => {
+				return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", {
+					"dropdown-item": `${dd.id}_${item.id}_`,
+					title: dd.translate(item.title || item.text),
+					className: dd.menuItemClass + (dd.activeItem === item ? " active" : ""),
+					style: {
+						listStyleType: "none",
+						display: "flex",
+						justifyContent: "start",
+						flexWrap: "nowrap",
+						alignItems: "center",
+						paddingRight: item.items && item.items.length > 0 ? "" : "1em",
+						height: "1.5em"
+					},
+					onClick: (e) => dd.onItemClick(e, item.id),
+					onMouseEnter: (e) => {
+						if (!dd.opt.onItemMouseEnter) return;
+						dd.opt.onItemMouseEnter(e, item);
+					},
+					onMouseLeave: (e) => {
+						if (!dd.opt.onItemMouseLeave) return;
+						dd.opt.onItemMouseLeave(e, item);
+					},
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						style: { width: "2em" },
+						children: item.img ? item.img() : ""
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						style: {
+							display: "flex",
+							justifyContent: "space-between",
+							flexWrap: "nowrap",
+							alignItems: "center",
+							width: "100%"
+						},
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: dd.translate(item.text) }), item.items && item.items.length > 0 ? Images.images.submenu(20, 10) : ""]
+					})]
+				}, `dropdownitem_${dd.id}_${item.id}_${ind}_`);
+			}), dd.allowUpload && dd.pageSize > 0 && dd.items.length === dd.pageSize * dd.pageNumber ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", {
+				className: `dropdown-ul ${dd.menuClass || ""}`,
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", {
+					"dropdown-item": `${dd.id}_append_`,
+					title: dd.translate("load more records"),
+					className: dd.menuItemClass,
+					style: {
+						listStyleType: "none",
+						display: "flex",
+						flexWrap: "nowrap"
+					},
+					onClick: (e) => dd.onItemClick(e, "append"),
+					children: ["$", dd.translate("more") + "..."]
+				}, `dropdownitem_$${dd.id}_append_`)
+			}, `dropdownadd_${dd.id}_`) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {})]
+		}, `dropdown_${dd.id}_`)] });
+	}
+	calcPos(e) {
+		const dd = this;
+		const rect = dd.getDimensionsByContent();
+		const parentRect = dd.opt.parentRect ? dd.opt.parentRect : {
+			x: e.clientX,
+			y: e.clientY,
+			width: e.width || 0,
+			height: e.height || 0
+		};
+		dd.opt.pos = {
+			x: parentRect.x,
+			y: parentRect.y + parseInt(parentRect.height),
+			w: Math.max(rect.w, parentRect.width),
+			h: rect.h
+		};
+		if (dd.maxW != null) dd.opt.pos.w = Math.min(dd.opt.pos.w, dd.maxW);
+	}
+	popup(e) {
+		const dd = this;
+		function afterGetItems(newItems) {
+			dd.waitingItems = false;
+			if (newItems && newItems.length > 0) dd.items.push(...newItems);
+			dd.lastPageNumber = dd.pageNumber;
+			dd.visible = dd.items.length > 0;
+			if (dd.items.length <= 0 && !dd.opt.allowUserFilter) return;
+			dd.calcPos(e);
+			dd.refreshState();
+		}
+		if (!dd.lastPageNumber || dd.lastPageNumber !== dd.pageNumber || dd.items.length <= 0) {
+			dd.waitingItems = true;
+			dd.visible = true;
+			dd.calcPos(e);
+			dd.refreshState();
+			dd.getItems({
+				self: dd,
+				filter: dd.filter,
+				pageSize: dd.pageSize,
+				pageNumber: dd.pageNumber
+			}).then((items) => {
+				afterGetItems(items);
+			}).finally(() => {
+				dd.waitingItems = false;
+				dd.refreshState();
+			});
+		} else afterGetItems();
+	}
+	close() {
+		const dd = this;
+		dd.items = [];
+		delete dd.activeItem;
+		delete dd.lastPageNumber;
+		super.close();
+	}
+	onItemClick(e, itemId) {
+		const dd = this;
+		if (itemId === "append") dd.appendItems();
+		else {
+			if (dd.opt.onItemClick) dd.opt.onItemClick({
+				owner: dd.opt.owner,
+				itemId,
+				self: dd,
+				clientX: e.clientX,
+				clientY: e.clientY,
+				target: e.target
+			});
+			const clickedItem = dd.items.find(function(item) {
+				return item.id === itemId;
+			});
+			if (!clickedItem || !clickedItem.noClose) dd.close();
+		}
+	}
+	setupEvents() {
+		const dd = this;
+		super.setupEvents();
+		function onKeyDown(e) {
+			const key = e && e.key ? e.key.toLowerCase() : "";
+			let ind;
+			switch (key) {
+				case "enter":
+					if (!dd.activeItem) return;
+					dd.opt.onItemClick({
+						owner: dd.opt.owner,
+						itemId: dd.activeItem.id,
+						self: dd
+					});
+					dd.close();
+					break;
+				case "down":
+				case "arrowdown":
+					if (dd.activeItem) {
+						ind = dd.items.indexOf(dd.activeItem);
+						if (ind < 0 || ind === dd.items.length - 1) return;
+						dd.activeItem = dd.items[ind + 1];
+					} else if (dd.items.length > 0) dd.activeItem = dd.items[0];
+					dd.refreshState();
+					break;
+				case "up":
+				case "arrowup":
+					if (dd.activeItem) {
+						ind = dd.items.indexOf(dd.activeItem);
+						if (ind <= 0) return;
+						dd.activeItem = dd.items[ind - 1];
+					} else if (dd.items.length > 0) dd.activeItem = dd.items[0];
+					dd.refreshState();
+					break;
+				case "tab":
+					dd.close();
+					break;
+				default: break;
+			}
+		}
+		document.addEventListener("keydown", onKeyDown);
+		const remClearEvents = dd.clearEvents;
+		dd.clearEvents = function() {
+			remClearEvents();
+			document.removeEventListener("keydown", onKeyDown);
+		};
+	}
+};
+export { Dropdown, DropdownClass };

package/dist/index17.js

@@ -0,0 +1,257 @@
+const require_jsx_runtime$1 = require("./index7.js");
+const require_Base = require("./index8.js");
+const require_Modal = require("./index15.js");
+const require_Images = require("./index16.js");
+let react = require("react");
+var import_jsx_runtime = require_jsx_runtime$1.default;
+function Dropdown(props) {
+	let dd = null;
+	const [ddState, setState] = (0, react.useState)({
+		dd,
+		ind: 0
+	});
+	if (ddState.dd) dd = ddState.dd;
+	else dd = new DropdownClass(props);
+	if (props.init && !require_Modal.ModalClass._isFake) props.init(dd);
+	dd.refreshState = function() {
+		setState({
+			dd,
+			ind: dd.stateind++
+		});
+	};
+	(0, react.useEffect)(() => {
+		dd.setupEvents();
+		return () => {
+			dd.clearEvents();
+		};
+	}, [dd]);
+	return dd.render();
+}
+var DropdownClass = class extends require_Modal.ModalClass {
+	constructor(props) {
+		super(props);
+		const dd = this;
+		dd.getItems = props.getItems || function() {
+			return new Promise(function(resolve) {
+				resolve([]);
+			});
+		};
+		window._dropdownSeq = window._dropdownSeq || 0;
+		dd.id = window._dropdownSeq++;
+		dd.pageNumber = 1;
+		dd.pageSize = props.pageSize || 20;
+		dd.items = props.items || [];
+		dd.menuItemClass = props.menuItemClass || require_Base.BaseComponent.theme.menuItemClass;
+		dd.menuClass = props.menuClass || require_Base.BaseComponent.theme.menuClass;
+		dd.stateind = 0;
+		dd.opt.onItemClick = props.onItemClick;
+		dd.opt.onClose = props.onClose;
+		dd.opt.parentRect = props.parentRect;
+		dd.maxW = props.maxW;
+		dd.opt.closeWhenEscape = true;
+		dd.opt.noHeader = true;
+		dd.opt.noFooter = true;
+		dd.opt.resizable = false;
+		dd.opt.noPadding = true;
+		dd.opt.hiddenOverlay = true;
+		dd.opt.onItemMouseEnter = props.onItemMouseEnter;
+		dd.opt.onItemMouseLeave = props.onItemMouseLeave;
+		dd.renderContent = dd.renderDropdownContent;
+		dd.visible = dd.items.length > 0;
+	}
+	appendItems() {
+		const dd = this;
+		dd.pageNumber++;
+		dd.getItems({ filter: dd.filter }).then((items) => {
+			dd.items = items;
+			dd.refreshState();
+		});
+	}
+	render() {
+		return super.render();
+	}
+	renderDropdownContent() {
+		const dd = this;
+		if (!dd.items || dd.waitingItems) return dd.Spinner(dd.id);
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [dd.allowUserFilter ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("ul", {
+			className: `dropdown-ul ${dd.menuClass || ""}`,
+			style: {
+				overflowX: "hidden",
+				padding: "0",
+				margin: "0"
+			},
+			children: [dd.items.map((item, ind) => {
+				return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", {
+					"dropdown-item": `${dd.id}_${item.id}_`,
+					title: dd.translate(item.title || item.text),
+					className: dd.menuItemClass + (dd.activeItem === item ? " active" : ""),
+					style: {
+						listStyleType: "none",
+						display: "flex",
+						justifyContent: "start",
+						flexWrap: "nowrap",
+						alignItems: "center",
+						paddingRight: item.items && item.items.length > 0 ? "" : "1em",
+						height: "1.5em"
+					},
+					onClick: (e) => dd.onItemClick(e, item.id),
+					onMouseEnter: (e) => {
+						if (!dd.opt.onItemMouseEnter) return;
+						dd.opt.onItemMouseEnter(e, item);
+					},
+					onMouseLeave: (e) => {
+						if (!dd.opt.onItemMouseLeave) return;
+						dd.opt.onItemMouseLeave(e, item);
+					},
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						style: { width: "2em" },
+						children: item.img ? item.img() : ""
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						style: {
+							display: "flex",
+							justifyContent: "space-between",
+							flexWrap: "nowrap",
+							alignItems: "center",
+							width: "100%"
+						},
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: dd.translate(item.text) }), item.items && item.items.length > 0 ? require_Images.Images.images.submenu(20, 10) : ""]
+					})]
+				}, `dropdownitem_${dd.id}_${item.id}_${ind}_`);
+			}), dd.allowUpload && dd.pageSize > 0 && dd.items.length === dd.pageSize * dd.pageNumber ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", {
+				className: `dropdown-ul ${dd.menuClass || ""}`,
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", {
+					"dropdown-item": `${dd.id}_append_`,
+					title: dd.translate("load more records"),
+					className: dd.menuItemClass,
+					style: {
+						listStyleType: "none",
+						display: "flex",
+						flexWrap: "nowrap"
+					},
+					onClick: (e) => dd.onItemClick(e, "append"),
+					children: ["$", dd.translate("more") + "..."]
+				}, `dropdownitem_$${dd.id}_append_`)
+			}, `dropdownadd_${dd.id}_`) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {})]
+		}, `dropdown_${dd.id}_`)] });
+	}
+	calcPos(e) {
+		const dd = this;
+		const rect = dd.getDimensionsByContent();
+		const parentRect = dd.opt.parentRect ? dd.opt.parentRect : {
+			x: e.clientX,
+			y: e.clientY,
+			width: e.width || 0,
+			height: e.height || 0
+		};
+		dd.opt.pos = {
+			x: parentRect.x,
+			y: parentRect.y + parseInt(parentRect.height),
+			w: Math.max(rect.w, parentRect.width),
+			h: rect.h
+		};
+		if (dd.maxW != null) dd.opt.pos.w = Math.min(dd.opt.pos.w, dd.maxW);
+	}
+	popup(e) {
+		const dd = this;
+		function afterGetItems(newItems) {
+			dd.waitingItems = false;
+			if (newItems && newItems.length > 0) dd.items.push(...newItems);
+			dd.lastPageNumber = dd.pageNumber;
+			dd.visible = dd.items.length > 0;
+			if (dd.items.length <= 0 && !dd.opt.allowUserFilter) return;
+			dd.calcPos(e);
+			dd.refreshState();
+		}
+		if (!dd.lastPageNumber || dd.lastPageNumber !== dd.pageNumber || dd.items.length <= 0) {
+			dd.waitingItems = true;
+			dd.visible = true;
+			dd.calcPos(e);
+			dd.refreshState();
+			dd.getItems({
+				self: dd,
+				filter: dd.filter,
+				pageSize: dd.pageSize,
+				pageNumber: dd.pageNumber
+			}).then((items) => {
+				afterGetItems(items);
+			}).finally(() => {
+				dd.waitingItems = false;
+				dd.refreshState();
+			});
+		} else afterGetItems();
+	}
+	close() {
+		const dd = this;
+		dd.items = [];
+		delete dd.activeItem;
+		delete dd.lastPageNumber;
+		super.close();
+	}
+	onItemClick(e, itemId) {
+		const dd = this;
+		if (itemId === "append") dd.appendItems();
+		else {
+			if (dd.opt.onItemClick) dd.opt.onItemClick({
+				owner: dd.opt.owner,
+				itemId,
+				self: dd,
+				clientX: e.clientX,
+				clientY: e.clientY,
+				target: e.target
+			});
+			const clickedItem = dd.items.find(function(item) {
+				return item.id === itemId;
+			});
+			if (!clickedItem || !clickedItem.noClose) dd.close();
+		}
+	}
+	setupEvents() {
+		const dd = this;
+		super.setupEvents();
+		function onKeyDown(e) {
+			const key = e && e.key ? e.key.toLowerCase() : "";
+			let ind;
+			switch (key) {
+				case "enter":
+					if (!dd.activeItem) return;
+					dd.opt.onItemClick({
+						owner: dd.opt.owner,
+						itemId: dd.activeItem.id,
+						self: dd
+					});
+					dd.close();
+					break;
+				case "down":
+				case "arrowdown":
+					if (dd.activeItem) {
+						ind = dd.items.indexOf(dd.activeItem);
+						if (ind < 0 || ind === dd.items.length - 1) return;
+						dd.activeItem = dd.items[ind + 1];
+					} else if (dd.items.length > 0) dd.activeItem = dd.items[0];
+					dd.refreshState();
+					break;
+				case "up":
+				case "arrowup":
+					if (dd.activeItem) {
+						ind = dd.items.indexOf(dd.activeItem);
+						if (ind <= 0) return;
+						dd.activeItem = dd.items[ind - 1];
+					} else if (dd.items.length > 0) dd.activeItem = dd.items[0];
+					dd.refreshState();
+					break;
+				case "tab":
+					dd.close();
+					break;
+				default: break;
+			}
+		}
+		document.addEventListener("keydown", onKeyDown);
+		const remClearEvents = dd.clearEvents;
+		dd.clearEvents = function() {
+			remClearEvents();
+			document.removeEventListener("keydown", onKeyDown);
+		};
+	}
+};
+exports.Dropdown = Dropdown;
+exports.DropdownClass = DropdownClass;