react-graph-grid 0.1.4 → 0.1.5

package/dist/index9.js

@@ -0,0 +1,103 @@
+const require_jsx_runtime$1 = require("./index7.js");
+const require_Base = require("./index8.js");
+let react = require("react");
+var import_jsx_runtime = require_jsx_runtime$1.default;
+function Overlay(props) {
+	let ovl = null;
+	const [ovlState, setState] = (0, react.useState)({
+		ovl,
+		ind: 0
+	});
+	if (ovlState.ovl) {
+		ovl = ovlState.ovl;
+		if (ovlState.ovl.closing) ovl.closing = false;
+	} else ovl = new OverlayClass(props);
+	ovl.onClose = props.onClose;
+	if (props.init) props.init(ovl);
+	ovl.refreshState = function() {
+		setState({
+			ovl,
+			ind: ovl.stateind++
+		});
+	};
+	(0, react.useEffect)(() => {
+		ovl.setupEvents();
+		return () => {
+			ovl.clearEvents();
+		};
+	}, [ovl]);
+	return ovl.render();
+}
+var OverlayClass = class OverlayClass extends require_Base.BaseComponent {
+	constructor(props) {
+		super(props);
+		const ovl = this;
+		ovl.opt = {};
+		ovl.id = OverlayClass._seq++;
+		ovl.uid = props.uid;
+		ovl.opt.zInd = props.zInd || ++OverlayClass._zInd;
+		ovl.opt.pos = props.pos || {
+			x: 0,
+			y: 0,
+			w: "100%",
+			h: "100%"
+		};
+		ovl.opt.isHidden = props.isHidden;
+		ovl.opt.closeWhenClick = props.closeWhenClick;
+		ovl.opt.closeWhenEscape = props.closeWhenEscape;
+		ovl.opt.pos.x = !isNaN(ovl.opt.pos.x) ? ovl.opt.pos.x + "px" : ovl.opt.pos.x;
+		ovl.opt.pos.y = !isNaN(ovl.opt.pos.y) ? ovl.opt.pos.y + "px" : ovl.opt.pos.y;
+		ovl.opt.pos.w = !isNaN(ovl.opt.pos.w) ? ovl.opt.pos.w + "px" : ovl.opt.pos.w;
+		ovl.opt.pos.h = !isNaN(ovl.opt.pos.h) ? ovl.opt.pos.h + "px" : ovl.opt.pos.h;
+		ovl.renderChild = props.renderChild || function() {
+			return null;
+		};
+		ovl.visible = props.visible != null ? props.visible : true;
+		ovl.stateind = 0;
+	}
+	static _seq = 0;
+	static _zInd = 999;
+	render() {
+		const ovl = this;
+		if (!ovl.visible) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			onClick: (e) => ovl.onClick(e),
+			style: {
+				width: ovl.opt.pos.w,
+				height: ovl.opt.pos.h,
+				top: ovl.opt.pos.y,
+				left: ovl.opt.pos.x,
+				opacity: ovl.opt.opacity ? ovl.opt.opacity : ovl.opt.isHidden ? 0 : .2,
+				zIndex: ovl.opt.zInd,
+				backgroundColor: !ovl.opt.isHidden ? "black" : "",
+				display: "flex",
+				position: "fixed"
+			},
+			className: "overlay-default"
+		}, `overlay_${ovl.id}_`), ovl.renderChild(ovl.opt.zInd + 1)] });
+	}
+	close() {
+		const ovl = this;
+		ovl.visible = false;
+		if (ovl.onClose) ovl.onClose();
+		ovl.closing = true;
+		ovl.refreshState();
+	}
+	onClick() {
+		const ovl = this;
+		if (ovl.opt && ovl.opt.closeWhenClick) ovl.close();
+	}
+	setupEvents = function() {
+		const ovl = this;
+		function onKeyDown(e) {
+			const key = e && e.key ? e.key.toLowerCase() : "";
+			if ((key === "esc" || key === "escape") && ovl.opt && ovl.opt.closeWhenEscape) ovl.close();
+		}
+		document.addEventListener("keydown", onKeyDown);
+		ovl.clearEvents = function() {
+			document.removeEventListener("keydown", onKeyDown);
+		};
+	};
+};
+exports.Overlay = Overlay;
+exports.OverlayClass = OverlayClass;

package/{src/css/default.css → dist/react-graph-grid.css}

@@ -1,4 +1,4 @@
-body {
+body {
 }
 
 .modal-window-wnd {
@@ -949,3 +949,4 @@
     display: flex;
     justify-content: space-around;
 }
+/*$vite$:1*/

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "react-graph-grid",
   "author": "Mikhail Razumtsev",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "private": false,
   "description": "A React package containing a grid that can communicate with other grids through a connection graph",
   "keywords": [
     "react-graph-grid"
   ],
-  "main": "index.js",
-  "module": "index.esm.js",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -21,6 +21,9 @@
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
+  "files": [
+    "dist"
+  ],
   "devDependencies": {
     "@eslint/js": "^9.39.1",
     "@types/react": "^19.2.5",

package/eslint.config.js

@@ -1,29 +0,0 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import { defineConfig, globalIgnores } from 'eslint/config'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{js,jsx}'],
-    extends: [
-      js.configs.recommended,
-      reactHooks.configs.flat.recommended,
-      reactRefresh.configs.vite,
-    ],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-      parserOptions: {
-        ecmaVersion: 'latest',
-        ecmaFeatures: { jsx: true },
-        sourceType: 'module',
-      },
-    },
-    rules: {
-      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
-    },
-  },
-])

package/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/IM.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>react-graph-grid</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</html>

package/index.js

@@ -1,19 +0,0 @@
-export { BaseComponent, NodeStatus, FilterType, log } from './src/Base';
-export { Overlay, OverlayClass } from './src/Overlay';
-export { Modal, ModalClass } from './src/Modal';
-export { Dropdown, DropdownClass } from './src/Dropdown';
-export { GraphClass, WaveType, MoveType } from './src/Graph';
-export { Grid, GridClass } from './src/Grid';
-export { GridGR, GridGRClass } from './src/GridGR';
-export { GridPK, GridPKClass } from './src/GridPK';
-export { GridDB, GridDBClass } from './src/GridDB';
-export { GridFL, GridFLClass } from './src/GridFL';
-export { GridFE, GridFEClass } from './src/GridFE';
-export { GridCD, GridCDClass } from './src/GridCD';
-export { Card, CardClass } from './src/Card';
-export { FieldEdit, FieldEditClass } from './src/FieldEdit';
-export { Images } from './src/Themes/Images';
-export { Translate } from './src/Themes/Translate';
-export { DefaultGridTheme } from './src/Themes/DefaultGridTheme';
-export { DebugApp } from './src/Tests/DebugApp';
-export { TestData } from './src/Tests/TestData';

package/src/Base.jsx

@@ -1,81 +0,0 @@
-import { DefaultGridTheme as Theme } from './Themes/DefaultGridTheme';
-export class BaseComponent {
-
-    constructor(props) {
-
-        this.level = props.level || 0;
-
-        //window._logEnabled = true;
-        if (!BaseComponent.theme) {
-            BaseComponent.theme = new Theme();
-
-            if (BaseComponent.useBootstrap) {
-                BaseComponent.changeTheme(true);
-            }
-        }
-    }
-
-    translate(text, context) {
-        return BaseComponent.translate(text, context);
-    }
-
-    static translate(text/*, context*/) {
-        return text;
-    }
-
-    Spinner(id = -1, minW = -1, maxW = -1) {
-        return BaseComponent.Spinner ? BaseComponent.Spinner(id, minW, maxW) : <></>;
-    }
-
-    static Spinner(id = -1, minW = -1, maxW = -1) {
-        return (
-            <div key={`loader_${id}_`}
-                className='grid-loader'
-                style={{ minWidth: minW ? minW + "px" : "", maxWidth: maxW ? maxW + "px" : "" }}
-            >
-                <div>{BaseComponent.translate('Loading') + '...'}</div>
-            </div>
-        )
-    }
-
-    formatDate(text, dateFormat) {
-        return BaseComponent.formatDate(text, dateFormat);
-    }
-
-    static formatDate(text) {
-        return text;
-    }
-
-    static dateFormat = 'dd.MM.yyyy';
-    static dateTimeFormat = 'dd.MM.yyyy HH:mm:ss';
-
-    static theme = null;
-    static useBootstrap = false;
-    static changeTheme = () => {
-        return new Promise(function (resolve) {
-            BaseComponent.theme = new Theme();
-            resolve();
-        })
-    };
-}
-
-export function log(message) {
-    if (!window._logEnabled) return;
-
-    console.log(message);
-}
-
-export class NodeStatus {
-    static grid = 0;
-    static hidden = 1;
-    static filter = 2;
-    static lookup = 3;
-    static custom = 4;
-};
-
-export class FilterType {
-    static combobox = 0;
-    static date = 1;
-    static input = 2;
-    static custom = 3;
-};

package/src/Card.jsx

@@ -1,333 +0,0 @@
-import { useState, useEffect } from 'react';
-import { Images } from './Themes/Images';
-import { FieldEdit } from './FieldEdit';
-import { GridFEClass } from './GridFE';
-// =================================================================================================================================================================
-export function Card(props) {
-    let card = null;
-
-    const [gridState, setState] = useState({ grid: card, ind: 0 });
-
-    card = gridState.grid;
-    let needGetRows = false;
-    if (!card || card.uid !== props.uid && props.uid != null) {
-        card = null;
-        if (props.findGrid) {
-            card = props.findGrid(props);
-        }
-        card = card || new CardClass(props);
-        needGetRows = !card.changedRow;
-    }
-
-    if (props.init) {
-        props.init(card);
-    }
-
-    card.refreshState = function () {
-        setState({ grid: card, ind: card.stateind++ });
-    }
-
-    useEffect(() => {
-        card.setupEvents();
-
-        if (needGetRows && card.selectedRow() == null) {
-
-            card.getRows().then(
-                rows => {
-                    card.rows = rows;
-                    card.afterGetRows();
-                    card.refreshState();
-                }
-            );
-        }
-        else if (card.columns.length <= 0 && card.getColumns) {
-            card.prepareColumns().then(() => card.refreshState());
-        }
-
-        return () => {
-            card.clearEvents();
-
-            if (card.graph && card.graph.nodeCount) {
-                card.graph.nodeCount--;
-            }
-        }
-    }, [card, needGetRows])
-
-    return (card.render());
-}
-// =================================================================================================================================================================
-export class CardClass extends GridFEClass {
-
-    constructor(props) {
-        super(props);
-
-        const card = this;
-
-        card.visible = true;
-
-        card.allowEdit = props.allowEdit;
-        card.isVisible = props.isVisible || card.isVisible;
-        card.activeRow = props.activeRow || '';
-        card.refreshState = card.refreshState || (() => { });
-
-        card.reqInd = 0;
-        card.changedRow = {};
-        card.initialRow = props.cardRow;
-        Object.assign(card.changedRow, card.initialRow);
-
-        if (props.isNewRecord) {
-            card.isNewRecord = true;
-            card.setEditing(true);
-        }
-
-        card.cardButtons = [];
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    render() {
-        const card = this;
-
-        card.addCardButtons();
-        card.buttons = card.cardButtons;
-
-        return (
-            <>
-                <div className='graph-card-toolbar'
-                    key={`cardToolbarDiv_${card.id}_`}
-                    style={{ margin: '0 1em' }}
-                >
-                    {super.renderToolbar()}
-                </div>
-                <div className="graph-card-div"
-                    key={`cardBodyDiv_${card.id}_`}
-                >
-                    {
-                        card.columns.map((col) => { return card.renderField(col) })
-                    }
-                </div>
-                {super.renderPopup()}
-            </>
-        )
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    renderField(col) {
-        const card = this;
-
-        if (col.visible == false) return <></>;
-
-        const isLookup = col.type === 'lookup';
-        let row = card.changedRow;
-        let value = isLookup ? row[col.keyField] : row[col.name];
-        value = value != null ? value : '';
-        if (col.type == null) {
-            col.type = '';
-        }
-        else if (isLookup) {
-            col.grid = card;
-        }
-
-        return (
-            <div className="graph-card-field"
-                key={`cardLookupDiv_${card.id}_${col.id}_`}
-                style={{ margin: '0 1em 0.5em 1em' }}
-            >
-                <span
-                    key={`cardLookupTitle_${card.id}_${col.id}_`}
-                    style={{ gridColumn: 'span 3', width: 'calc(100% - 4px)' }}
-                >
-                    {col.title || col.name}
-                </span>
-                <FieldEdit
-                    keyPref={card.id + '_card_'}
-                    column={col}
-                    value={value}
-                    text={row[col.name]}
-                    findFieldEdit={() => { return col._fieldEditObj; }}
-                    large={true}
-                    level={card.level}
-                    disabled={card.allowEdit == null || card.allowEdit != true}
-                    init={
-                        (fe) => {
-                            if (card.isEditing() && !card.changedRow) {
-                                card.changedRow = {};
-                                Object.assign(card.changedRow, card.selectedRow());
-                            }
-
-                            row = !card.isEditing() ? card.selectedRow() : card.changedRow;
-
-                            col._fieldEditObj = fe;
-                            fe.value = isLookup ? row[col.keyField] : row[col.name];
-                            fe.value = fe.value != null ? fe.value : '';
-
-                            fe.text = row[col.name];
-                        }
-                    }
-                    onChange={(e) => {
-                        if (!card.changedRow) {
-                            card.changedRow = {};
-                            Object.assign(card.changedRow, card.selectedRow());
-                        }
-
-                        if (isLookup) {
-                            card.changedRow[col.keyField] = e.value;
-                            card.changedRow[col.name] = e.text;
-                            if (!card.isEditing()) {
-                                card.setEditing(true);
-                            }
-                            card.refreshState();
-                        }
-                        else {
-                            card.changedRow[col.name] = e.value;
-                            card.setEditing(true);
-                            card.refreshState();
-                        }
-                    }}
-                >
-                </FieldEdit>
-            </div>
-        )
-
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    addCardButtons() {
-        const card = this;
-
-        if (card._cardButtonsAdded) return;
-
-        card._cardButtonsAdded = true;
-
-        //card.cardButtons.push({
-        //    id: card.cardButtons.length,
-        //    name: 'edit',
-        //    title: card.translate('Start edit'),
-        //    label: images.edit ? '' : card.translate('Start edit'),
-        //    click: (e) => card.startEditNode(e),
-        //    img: images.edit
-        //});
-
-        card.cardButtons.push({
-            id: card.cardButtons.length,
-            name: 'commit',
-            title: card.translate('Commit changes'),
-            label: card.translate('Commit'),
-            img: Images.images.commit,
-            click: (e) => card.commitChangesNode(e),
-            getDisabled: (e) => card.commitChangesNodeDisabled(e),
-        });
-
-        card.cardButtons.push({
-            id: card.cardButtons.length,
-            name: 'rollback',
-            title: card.translate('Rollback changes'),
-            label: card.translate('Rollback'),
-            img: Images.images.rollback,
-            click: (e) => {
-                card.rollbackChangesNode(e);
-                if (card.isNewRecord && card.close) card.close(e);
-            },
-            getDisabled: (e) => card.rollbackChangesNodeDisabled(e),
-        });
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    commitChangesNodeDisabled() {
-        const card = this;
-        if (!card.isEditing()) return true;
-
-        let requiredColumnsFilled = true;
-
-        for (let col of card.columns) {
-            if (!col.required || col.readonly) continue;
-
-            let val = card.changedRow[col.name];
-            if (col.required && (val == null || val === '')) {
-                requiredColumnsFilled = false;
-                break;
-            }
-        }
-
-        return !requiredColumnsFilled;
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    rollbackChangesNodeDisabled() {
-        const card = this;
-        return !card.isEditing();
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    saveRow(e) {
-        const card = this;
-
-        if (!card.isRowChanged(e.row, card.changedRow)) return new Promise(function (resolve) { resolve(true); });
-
-        return new Promise(function (resolve) {
-            //e.row = card.initialRow = e.changedRow;
-            Object.assign(card.initialRow, card.changedRow);
-            resolve(true);
-        });
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    commitChangesNode() {
-        const card = this;
-        card.saveRow({ row: card.initialRow, changedRow: card.changedRow }).then(
-            () => {
-                if (card.isNewRecord || !card.keyField) {
-                    card.setEditing(false);
-                    Object.assign(card.initialRow, card.changedRow);
-                    card.refreshState();
-                }
-                else {
-                    card.getRows().then(
-                        rows => {
-                            card.rows = rows;
-                            card.changedRow = rows[0];
-                            Object.assign(card.initialRow, card.changedRow);
-                            card.setEditing(false);
-                            card.afterGetRows();
-                            card.refreshState();
-                        }
-                    );
-                }
-            }
-        ).catch((message) => {
-            Object.assign(card.changedRow, card.initialRow);
-            card.refreshState();
-            alert(message || 'Error!');
-        });
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    rollbackChangesNode() {
-        const card = this;
-        if (card.isNewRecord || !card.keyField) {
-            card.changedRow = {};
-            Object.assign(card.changedRow, card.initialRow);
-            card.setEditing(false);
-            card.refreshState();
-        }
-        else {
-            card.getRows().then(
-                rows => {
-                    card.rows = rows;
-                    card.changedRow = rows[0];
-                    Object.assign(card.initialRow, card.changedRow);
-                    card.setEditing(false);
-                    card.afterGetRows();
-                    card.refreshState();
-                }
-            );
-        }
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    selectedRow() {
-        const card = this;
-        return card.changedRow;
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    getRows() {
-        const card = this;
-
-        return new Promise(function (resolve) {
-            const res = [card.initialRow];
-            card.totalRows = 1;
-            resolve(res);
-        });
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-}