react-graph-grid 0.1.4 → 0.1.6

package/dist/index24.esm.js

@@ -0,0 +1,269 @@
+import { require_jsx_runtime } from "./index7.esm.js";
+import { BaseComponent } from "./index8.esm.js";
+import { Modal } from "./index15.esm.js";
+import { Images } from "./index16.esm.js";
+import { GridFE } from "./index25.esm.js";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+var import_jsx_runtime = require_jsx_runtime();
+function FieldEdit(props) {
+	let fe = null;
+	const [feState, setState] = useState({
+		fe,
+		ind: 0
+	});
+	fe = feState.fe;
+	if (!fe) {
+		if (props.findFieldEdit) fe = props.findFieldEdit();
+		fe = fe || new FieldEditClass(props);
+	}
+	fe.textareaRef = useRef(null);
+	fe.column = props.column;
+	if (fe.value == null) {
+		fe.value = props.value || "";
+		fe.text = props.text || "";
+	}
+	fe.getFilters = props.getFilters;
+	fe.multi = props.multi;
+	fe.large = props.large;
+	fe.id = props.keyPref || FieldEditClass._seq++;
+	fe.disabled = props.disabled;
+	BaseComponent.theme = BaseComponent.theme || {};
+	fe.buttonClass = props.buttonClass || BaseComponent.theme.filterButtonClass || "";
+	fe.inputClass = props.inputClass || BaseComponent.theme.inputClass || "";
+	fe.inputClassLG = props.inputClassLG || BaseComponent.theme.inputClassLG || "";
+	fe.clearButtonClass = props.clearButtonClass || BaseComponent.theme.clearButtonClass || "";
+	fe.selectClass = props.selectClass || BaseComponent.theme.selectClass || "";
+	fe.divContainerClass = props.divContainerClass || "";
+	fe.w = props.w;
+	fe.maxW = props.maxW;
+	fe.h = fe.h || props.h || "1.6em";
+	fe.textareaH = props.textareaH || "2.1em";
+	if (props.init) props.init(fe);
+	fe.refreshState = function() {
+		setState({
+			fe,
+			ind: fe.stateind++
+		});
+	};
+	useEffect(() => {
+		return () => {
+			if (fe._resizeObserver && fe._resizeObservedObj) fe._resizeObserver.unobserve(fe._resizeObservedObj);
+		};
+	}, [fe]);
+	useLayoutEffect(() => {
+		if (fe.textareaRef.current && fe._refocus) {
+			fe.textareaRef.current.focus();
+			if (fe.selectionStart > 0) fe.textareaRef.current.setSelectionRange(fe.selectionStart, fe.selectionStart);
+			fe._refocus = false;
+		}
+		const handleResize = () => {
+			if (fe.textareaRef.current) fe.h = fe.textareaRef.current.offsetHeight;
+		};
+		if (fe.textareaRef.current && fe._resizeObserved !== fe.textareaRef.current) {
+			fe._resizeObserver = new ResizeObserver(handleResize);
+			if (fe._resizeObservedObj) fe._resizeObserver.unobserve(fe._resizeObservedObj);
+			fe._resizeObservedObj = fe.textareaRef.current;
+			fe._resizeObserver.observe(fe.textareaRef.current);
+		}
+	});
+	return fe.render();
+}
+var FieldEditClass = class FieldEditClass extends BaseComponent {
+	constructor(props) {
+		super(props);
+		const fe = this;
+		fe.stateind = 0;
+		fe.id = props.keyPref || FieldEditClass._seq++;
+		fe.onChange = props.onChange || (() => {});
+		fe.selectionStart = 0;
+		fe.gridColumn = props.gridColumn;
+		fe._selectedOptions = [];
+	}
+	static _seq = 0;
+	render() {
+		const fe = this;
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: fe.divContainerClass ? fe.divContainerClass : fe.large ? "field-edit" : fe.column.type === "lookup" && !fe.column.readonly ? "grid-cell-lookup" : "grid-cell-edit",
+			style: {
+				border: "none",
+				height: !fe.inputClass ? fe.h : "",
+				width: "100%",
+				display: "grid",
+				gridColumn: fe.gridColumn || "",
+				gridTemplateColumns: fe.getDivGridTemplateColumns(),
+				maxWidth: fe.maxW ? fe.maxW : "",
+				minHeight: fe.large ? "2.5em" : "",
+				columnGap: fe.large ? "0.2em" : "",
+				alignItems: "center",
+				justifyItems: "center"
+			},
+			children: [fe.renderInput(), fe.canClear() ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+				className: `${fe.large ? "graph-filter-clear" : "grid-cell-button"} ${fe.clearButtonClass || ""}`,
+				style: {
+					width: !fe.large ? "1.6em" : "",
+					height: !fe.large ? "1.6em" : ""
+				},
+				onClick: (e) => {
+					fe.onClearClick(e);
+				},
+				disabled: fe.disabled,
+				children: !fe.large ? "×" : Images.images.filterClear()
+			}, `fieldClearButton_${fe.id}_${fe.column.id}_`) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {})]
+		}, `fieldEditDiv_${fe.id}_${fe.column.id}_`), fe.lookupIsShowing ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Modal, {
+			title: fe.column.title,
+			renderContent: (wnd) => {
+				return fe.renderLookupGrid(wnd);
+			},
+			pos: fe.popupPos,
+			onClose: (e) => {
+				if (fe.grid) delete fe.grid.value;
+				fe.closeLookupField();
+				fe.refreshState();
+			}
+		}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {})] });
+	}
+	renderInput() {
+		const fe = this;
+		const isLookup = fe.column.type === "lookup";
+		const noClear = !fe.canClear();
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: isLookup && !fe.column.readonly ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
+			style: {
+				width: "100%",
+				gridColumn: noClear ? "span 2" : "span 1",
+				overflowX: "hidden",
+				height: !fe.large ? "1.7em" : "2.2em",
+				minHeight: !fe.inputClass ? fe.textareaH : fe.h,
+				boxSizing: "border-box"
+			},
+			disabled: true,
+			className: fe.large ? fe.inputClassLG : fe.inputClass || "",
+			value: fe.value == null || fe.value == "" ? "" : fe.text != null && fe.text !== "" ? fe.text : fe.value
+		}, `fieldLookupTitle_${fe.id}_${fe.column.id}_`), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+			className: `${fe.large ? "graph-filter-button" : "grid-cell-button"} ${fe.clearButtonClass}`,
+			style: {
+				width: !fe.large ? "1.6em" : "",
+				height: !fe.large ? "1.6em" : ""
+			},
+			onClick: (e) => {
+				fe.openLookupField(e);
+			},
+			disabled: fe.disabled,
+			children: !fe.large ? "..." : Images.images.filterSelect()
+		}, `fieldLookupButton_${fe.id}_${fe.column.id}_`)] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("textarea", {
+			ref: fe.textareaRef,
+			className: `${fe.large ? fe.inputClassLG : fe.inputClass}`,
+			value: isLookup ? fe.text : fe.value || "",
+			style: {
+				width: noClear ? "calc(100% - 2px)" : "100%",
+				height: !fe.large ? fe.h ? fe.h : "1.7em" : "2.2em",
+				minHeight: !fe.inputClass ? fe.textareaH : fe.minH,
+				padding: "0",
+				boxSizing: "border-box",
+				gridColumn: noClear ? "span 3" : "span 2",
+				resize: "vertical",
+				overflowX: "hidden"
+			},
+			onChange: (e) => {
+				e.value = e.text = e.target.value;
+				fe.value = fe.text = e.target.value;
+				e.fe = fe;
+				fe.selectionStart = e.target.selectionStart;
+				fe._refocus = true;
+				fe.onChange(e);
+				fe.refreshState();
+			},
+			disabled: fe.disabled || fe.column.readonly
+		}, `fieldTextarea_${fe.id}_${fe.column.id}_`) });
+	}
+	renderLookupGrid(wnd) {
+		const fe = this;
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GridFE, {
+			getRows: fe.column.getRows,
+			keyField: fe.column.refKeyField,
+			nameField: fe.column.refNameField,
+			activeRow: fe.value,
+			multi: fe.multi,
+			level: fe.level + 1,
+			findGrid: () => {
+				return fe.grid;
+			},
+			onSelectValue: (e) => {
+				fe._selectedOptions = e.values || [];
+				fe.value = e.value;
+				fe.text = e.text;
+				e.fe = fe;
+				fe.closeLookupField();
+				fe.onChange(e);
+				fe.refreshState();
+			},
+			init: (lookupGrid) => {
+				if (!lookupGrid.value || fe.value && fe.value !== lookupGrid.value) {
+					fe.onLookupGridInit(lookupGrid);
+					delete lookupGrid._selectedRows;
+					if (fe.value) {
+						lookupGrid._selectedRowsDict = {};
+						for (let opt of fe._selectedOptions) {
+							let fakeRow = {};
+							fakeRow[fe.column.refKeyField] = opt.value;
+							fakeRow[fe.column.refNameField] = opt.label;
+							lookupGrid._selectedRowsDict[opt.value] = fakeRow;
+						}
+					}
+				}
+				lookupGrid.closeSelfWnd = () => {
+					fe.closeLookupField();
+					fe.refreshState();
+				};
+			},
+			onClose: () => {
+				fe.closeLookupField();
+			}
+		});
+	}
+	getDivGridTemplateColumns() {
+		return this.large ? "calc(100% - 4.6em) 2.2em 2.2em" : "calc(100% - 2.8em) 1.4em 1.4em";
+	}
+	canClear() {
+		const fe = this;
+		return !fe.column.required && !fe.column.readonly && (fe.multi || fe.value != null && fe.value !== "");
+	}
+	onClearClick(e) {
+		const fe = this;
+		e.value = e.text = "";
+		fe.value = fe.text = "";
+		e.fe = fe;
+		fe.onChange(e);
+		fe.refreshState();
+	}
+	closeLookupField() {
+		const fe = this;
+		fe.lookupIsShowing = false;
+		if (fe.ownerGrid) fe.ownerGrid._clicksDisabled = false;
+	}
+	openLookupField(e) {
+		const fe = this;
+		const shift = (fe.level + 1) * 20;
+		fe.popupPos = fe.popupPos || {
+			x: 100 + shift,
+			y: 100 + shift,
+			w: 1700,
+			h: 900
+		};
+		fe.lookupIsShowing = true;
+		if (fe.ownerGrid) fe.ownerGrid._clicksDisabled = true;
+		fe.refreshState();
+	}
+	onLookupGridInit(grid) {
+		const fe = this;
+		fe.grid = grid;
+		grid.value = fe.value;
+		grid.getSelectedRowIndex();
+		if (fe.getFilters) grid.collectFilters = fe.getFilters;
+		if (grid._lookupPrepared) return;
+		grid._lookupPrepared = true;
+		grid.visible = true;
+		grid.title = fe.column.title;
+		grid.isSelecting = true;
+	}
+};
+export { FieldEdit, FieldEditClass };

package/dist/index24.js

@@ -0,0 +1,270 @@
+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");
+const require_GridFE = require("./index25.js");
+let react = require("react");
+var import_jsx_runtime = require_jsx_runtime$1.default;
+function FieldEdit(props) {
+	let fe = null;
+	const [feState, setState] = (0, react.useState)({
+		fe,
+		ind: 0
+	});
+	fe = feState.fe;
+	if (!fe) {
+		if (props.findFieldEdit) fe = props.findFieldEdit();
+		fe = fe || new FieldEditClass(props);
+	}
+	fe.textareaRef = (0, react.useRef)(null);
+	fe.column = props.column;
+	if (fe.value == null) {
+		fe.value = props.value || "";
+		fe.text = props.text || "";
+	}
+	fe.getFilters = props.getFilters;
+	fe.multi = props.multi;
+	fe.large = props.large;
+	fe.id = props.keyPref || FieldEditClass._seq++;
+	fe.disabled = props.disabled;
+	require_Base.BaseComponent.theme = require_Base.BaseComponent.theme || {};
+	fe.buttonClass = props.buttonClass || require_Base.BaseComponent.theme.filterButtonClass || "";
+	fe.inputClass = props.inputClass || require_Base.BaseComponent.theme.inputClass || "";
+	fe.inputClassLG = props.inputClassLG || require_Base.BaseComponent.theme.inputClassLG || "";
+	fe.clearButtonClass = props.clearButtonClass || require_Base.BaseComponent.theme.clearButtonClass || "";
+	fe.selectClass = props.selectClass || require_Base.BaseComponent.theme.selectClass || "";
+	fe.divContainerClass = props.divContainerClass || "";
+	fe.w = props.w;
+	fe.maxW = props.maxW;
+	fe.h = fe.h || props.h || "1.6em";
+	fe.textareaH = props.textareaH || "2.1em";
+	if (props.init) props.init(fe);
+	fe.refreshState = function() {
+		setState({
+			fe,
+			ind: fe.stateind++
+		});
+	};
+	(0, react.useEffect)(() => {
+		return () => {
+			if (fe._resizeObserver && fe._resizeObservedObj) fe._resizeObserver.unobserve(fe._resizeObservedObj);
+		};
+	}, [fe]);
+	(0, react.useLayoutEffect)(() => {
+		if (fe.textareaRef.current && fe._refocus) {
+			fe.textareaRef.current.focus();
+			if (fe.selectionStart > 0) fe.textareaRef.current.setSelectionRange(fe.selectionStart, fe.selectionStart);
+			fe._refocus = false;
+		}
+		const handleResize = () => {
+			if (fe.textareaRef.current) fe.h = fe.textareaRef.current.offsetHeight;
+		};
+		if (fe.textareaRef.current && fe._resizeObserved !== fe.textareaRef.current) {
+			fe._resizeObserver = new ResizeObserver(handleResize);
+			if (fe._resizeObservedObj) fe._resizeObserver.unobserve(fe._resizeObservedObj);
+			fe._resizeObservedObj = fe.textareaRef.current;
+			fe._resizeObserver.observe(fe.textareaRef.current);
+		}
+	});
+	return fe.render();
+}
+var FieldEditClass = class FieldEditClass extends require_Base.BaseComponent {
+	constructor(props) {
+		super(props);
+		const fe = this;
+		fe.stateind = 0;
+		fe.id = props.keyPref || FieldEditClass._seq++;
+		fe.onChange = props.onChange || (() => {});
+		fe.selectionStart = 0;
+		fe.gridColumn = props.gridColumn;
+		fe._selectedOptions = [];
+	}
+	static _seq = 0;
+	render() {
+		const fe = this;
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: fe.divContainerClass ? fe.divContainerClass : fe.large ? "field-edit" : fe.column.type === "lookup" && !fe.column.readonly ? "grid-cell-lookup" : "grid-cell-edit",
+			style: {
+				border: "none",
+				height: !fe.inputClass ? fe.h : "",
+				width: "100%",
+				display: "grid",
+				gridColumn: fe.gridColumn || "",
+				gridTemplateColumns: fe.getDivGridTemplateColumns(),
+				maxWidth: fe.maxW ? fe.maxW : "",
+				minHeight: fe.large ? "2.5em" : "",
+				columnGap: fe.large ? "0.2em" : "",
+				alignItems: "center",
+				justifyItems: "center"
+			},
+			children: [fe.renderInput(), fe.canClear() ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+				className: `${fe.large ? "graph-filter-clear" : "grid-cell-button"} ${fe.clearButtonClass || ""}`,
+				style: {
+					width: !fe.large ? "1.6em" : "",
+					height: !fe.large ? "1.6em" : ""
+				},
+				onClick: (e) => {
+					fe.onClearClick(e);
+				},
+				disabled: fe.disabled,
+				children: !fe.large ? "×" : require_Images.Images.images.filterClear()
+			}, `fieldClearButton_${fe.id}_${fe.column.id}_`) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {})]
+		}, `fieldEditDiv_${fe.id}_${fe.column.id}_`), fe.lookupIsShowing ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(require_Modal.Modal, {
+			title: fe.column.title,
+			renderContent: (wnd) => {
+				return fe.renderLookupGrid(wnd);
+			},
+			pos: fe.popupPos,
+			onClose: (e) => {
+				if (fe.grid) delete fe.grid.value;
+				fe.closeLookupField();
+				fe.refreshState();
+			}
+		}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {})] });
+	}
+	renderInput() {
+		const fe = this;
+		const isLookup = fe.column.type === "lookup";
+		const noClear = !fe.canClear();
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: isLookup && !fe.column.readonly ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
+			style: {
+				width: "100%",
+				gridColumn: noClear ? "span 2" : "span 1",
+				overflowX: "hidden",
+				height: !fe.large ? "1.7em" : "2.2em",
+				minHeight: !fe.inputClass ? fe.textareaH : fe.h,
+				boxSizing: "border-box"
+			},
+			disabled: true,
+			className: fe.large ? fe.inputClassLG : fe.inputClass || "",
+			value: fe.value == null || fe.value == "" ? "" : fe.text != null && fe.text !== "" ? fe.text : fe.value
+		}, `fieldLookupTitle_${fe.id}_${fe.column.id}_`), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+			className: `${fe.large ? "graph-filter-button" : "grid-cell-button"} ${fe.clearButtonClass}`,
+			style: {
+				width: !fe.large ? "1.6em" : "",
+				height: !fe.large ? "1.6em" : ""
+			},
+			onClick: (e) => {
+				fe.openLookupField(e);
+			},
+			disabled: fe.disabled,
+			children: !fe.large ? "..." : require_Images.Images.images.filterSelect()
+		}, `fieldLookupButton_${fe.id}_${fe.column.id}_`)] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("textarea", {
+			ref: fe.textareaRef,
+			className: `${fe.large ? fe.inputClassLG : fe.inputClass}`,
+			value: isLookup ? fe.text : fe.value || "",
+			style: {
+				width: noClear ? "calc(100% - 2px)" : "100%",
+				height: !fe.large ? fe.h ? fe.h : "1.7em" : "2.2em",
+				minHeight: !fe.inputClass ? fe.textareaH : fe.minH,
+				padding: "0",
+				boxSizing: "border-box",
+				gridColumn: noClear ? "span 3" : "span 2",
+				resize: "vertical",
+				overflowX: "hidden"
+			},
+			onChange: (e) => {
+				e.value = e.text = e.target.value;
+				fe.value = fe.text = e.target.value;
+				e.fe = fe;
+				fe.selectionStart = e.target.selectionStart;
+				fe._refocus = true;
+				fe.onChange(e);
+				fe.refreshState();
+			},
+			disabled: fe.disabled || fe.column.readonly
+		}, `fieldTextarea_${fe.id}_${fe.column.id}_`) });
+	}
+	renderLookupGrid(wnd) {
+		const fe = this;
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(require_GridFE.GridFE, {
+			getRows: fe.column.getRows,
+			keyField: fe.column.refKeyField,
+			nameField: fe.column.refNameField,
+			activeRow: fe.value,
+			multi: fe.multi,
+			level: fe.level + 1,
+			findGrid: () => {
+				return fe.grid;
+			},
+			onSelectValue: (e) => {
+				fe._selectedOptions = e.values || [];
+				fe.value = e.value;
+				fe.text = e.text;
+				e.fe = fe;
+				fe.closeLookupField();
+				fe.onChange(e);
+				fe.refreshState();
+			},
+			init: (lookupGrid) => {
+				if (!lookupGrid.value || fe.value && fe.value !== lookupGrid.value) {
+					fe.onLookupGridInit(lookupGrid);
+					delete lookupGrid._selectedRows;
+					if (fe.value) {
+						lookupGrid._selectedRowsDict = {};
+						for (let opt of fe._selectedOptions) {
+							let fakeRow = {};
+							fakeRow[fe.column.refKeyField] = opt.value;
+							fakeRow[fe.column.refNameField] = opt.label;
+							lookupGrid._selectedRowsDict[opt.value] = fakeRow;
+						}
+					}
+				}
+				lookupGrid.closeSelfWnd = () => {
+					fe.closeLookupField();
+					fe.refreshState();
+				};
+			},
+			onClose: () => {
+				fe.closeLookupField();
+			}
+		});
+	}
+	getDivGridTemplateColumns() {
+		return this.large ? "calc(100% - 4.6em) 2.2em 2.2em" : "calc(100% - 2.8em) 1.4em 1.4em";
+	}
+	canClear() {
+		const fe = this;
+		return !fe.column.required && !fe.column.readonly && (fe.multi || fe.value != null && fe.value !== "");
+	}
+	onClearClick(e) {
+		const fe = this;
+		e.value = e.text = "";
+		fe.value = fe.text = "";
+		e.fe = fe;
+		fe.onChange(e);
+		fe.refreshState();
+	}
+	closeLookupField() {
+		const fe = this;
+		fe.lookupIsShowing = false;
+		if (fe.ownerGrid) fe.ownerGrid._clicksDisabled = false;
+	}
+	openLookupField(e) {
+		const fe = this;
+		const shift = (fe.level + 1) * 20;
+		fe.popupPos = fe.popupPos || {
+			x: 100 + shift,
+			y: 100 + shift,
+			w: 1700,
+			h: 900
+		};
+		fe.lookupIsShowing = true;
+		if (fe.ownerGrid) fe.ownerGrid._clicksDisabled = true;
+		fe.refreshState();
+	}
+	onLookupGridInit(grid) {
+		const fe = this;
+		fe.grid = grid;
+		grid.value = fe.value;
+		grid.getSelectedRowIndex();
+		if (fe.getFilters) grid.collectFilters = fe.getFilters;
+		if (grid._lookupPrepared) return;
+		grid._lookupPrepared = true;
+		grid.visible = true;
+		grid.title = fe.column.title;
+		grid.isSelecting = true;
+	}
+};
+exports.FieldEdit = FieldEdit;
+exports.FieldEditClass = FieldEditClass;