react-graph-grid 0.0.5 → 0.0.7

package/README.md

@@ -132,4 +132,12 @@ For more examples see DebugApp.jsx
 
 0.0.5 version
 
-		"Adjust column visibility" option added to GridFE.jsx module
+		"Adjust column visibility" option added to GridFE.jsx module
+
+0.0.6 version
+
+		Fixed GridFE.showColumnsSettings() function
+
+0.0.7 version
+
+		Fixed GridDB and its dropdown communication

package/package.json

@@ -3,7 +3,7 @@
   "author": "Mikhail Razumtsev",
   "description": "A React package containing a grid that can communicate with other grids through a connection graph",
   "private": false,
-  "version": "0.0.5",
+  "version": "0.0.7",
   "type": "module",
   "scripts": {
     "dev": "vite --port 4000",

package/src/Dropdown.jsx

@@ -227,7 +227,7 @@ export class DropdownClass extends ModalClass {
 
             dd.refreshState();
 
-            dd.getItems({ filter: dd.filter, pageSize: dd.pageSize, pageNumber: dd.pageNumber }).then(
+            dd.getItems({ self: dd, filter: dd.filter, pageSize: dd.pageSize, pageNumber: dd.pageNumber }).then(
                 items => {
                     afterGetItems(items);
                 }
@@ -259,7 +259,7 @@ export class DropdownClass extends ModalClass {
         }
         else {
             if (dd.opt.onItemClick) {
-                dd.opt.onItemClick({ owner: dd.opt.owner, itemId: itemId, dropdown: dd, clientX: e.clientX, clientY: e.clientY, target: e.target });
+                dd.opt.onItemClick({ owner: dd.opt.owner, itemId: itemId, self: dd, clientX: e.clientX, clientY: e.clientY, target: e.target });
             }
 
             const clickedItem = dd.items.find(function (item) {
@@ -286,7 +286,7 @@ export class DropdownClass extends ModalClass {
                 case 'enter':
                     if (!dd.activeItem) return;
 
-                    dd.opt.onItemClick({ owner: dd.opt.owner, itemId: dd.activeItem.id, dropdown: dd });
+                    dd.opt.onItemClick({ owner: dd.opt.owner, itemId: dd.activeItem.id, self: dd });
                     dd.close();
                     break;
                 case 'down':

package/src/Grid.jsx

@@ -166,7 +166,9 @@ export class GridClass extends BaseComponent {
                 grid._waitingRows = false;
                 grid.refreshState();
             }
-        ).finally(() => {
+        ).catch(() => {
+            grid._waitingRows = false;
+        }).finally(() => {
             grid._waitingRows = false;
             grid.refreshState();
         });

package/src/GridDB.jsx

@@ -152,10 +152,13 @@ export class GridDBClass extends GridPKClass {
                 {super.render()}
                 {grid.renderPager(true)}
                 <Dropdown
-                    init={(dd) => { grid.menuDropdown = dd; }}
+                    init={(dd) => {
+                        grid.menuDropdown = dd;
+                        dd._grid = grid;
+                    }}
                     closeWhenMiss={true}
-                    getItems={(e) => { return grid.getGridSettings(e); }}
-                    onItemClick={(e) => { grid.onSettingsItemClick(e.itemId); }}>
+                    getItems={(e) => { return e.self._grid.getGridSettings(e); }}
+                    onItemClick={(e) => { e.self._grid.onSettingsItemClick(e.itemId); }}>
                 </Dropdown>
             </>
         )

package/src/GridFE.jsx

@@ -540,6 +540,13 @@ export class GridFEClass extends GridFLClass {
         }
     }
     // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    applyColumnsVisibility() {
+        const grid = this;
+        for (let col of grid.columns) {
+            col.visible = col._newVisible;
+        }
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
     showColumnsSettings() {
         const grid = this;
         grid.popupIsShowing = true;
@@ -556,11 +563,9 @@ export class GridFEClass extends GridFLClass {
             {
                 title: grid.translate('OK'),
                 onClick: (e) => {
-                    for (let col of grid.columns) {
-                        col.visible = col._newVisible;
-                    }
+                    grid.applyColumnsVisibility();
                     grid.columnsSettingsIsShowing = false;
-                    grid.onClosePopup();
+                    grid.onClosePopup(e);
                     grid.refreshState();
                 }
             },
@@ -568,7 +573,7 @@ export class GridFEClass extends GridFLClass {
                 title: grid.translate('Cancel'),
                 onClick: (e) => {
                     grid.columnsSettingsIsShowing = false;
-                    grid.onClosePopup();
+                    grid.onClosePopup(e);
                     grid.refreshState();
                 }
             },

package/src/GridFL.jsx

@@ -17,7 +17,7 @@ export function GridFL(props) {
             grid = props.findGrid(props);
         }
         grid = grid || new GridFLClass(props);
-        needGetRows = !props.noAutoRefresh && !grid.hasVisibleParentGrids();
+        needGetRows = !props.noAutoRefresh && grid.hasVisibleParentGrids && !grid.hasVisibleParentGrids();
     }
 
     if (props.init) {
@@ -77,25 +77,26 @@ export class GridFLClass extends GridDBClass {
             <>
                 {super.render()}
                 <Dropdown
-                    getItems={(e) => { return grid.getAutocomleteItems(e); }}
-                    onItemClick={(e) => { grid.onAutocomleteItemClick(e); }}
+                    getItems={(e) => { return e.self._grid.getAutocomleteItems(e); }}
+                    onItemClick={(e) => { e.self._grid.onAutocomleteItemClick(e); }}
                     closeWhenMiss={true}
                     init={(dd) => {
                         if (grid._autocompleteDropdown) {
                             dd.visible = grid._autocompleteDropdown.visible;
                         }
                         grid._autocompleteDropdown = dd;
+                        dd._grid = grid;
                         if (grid._autocompleteRect) {
                             dd.opt.parentRect = grid._autocompleteRect;
                         }
                     }}
-                    onClose={() => {
-                        if (grid._inputingColumn) {
-                            delete grid._inputingColumn;
-                            if (grid.needRefresh()) {
-                                grid.pageNumber = 1;
-                                grid.selectedRowIndex = 0;
-                                grid.refresh();
+                    onClose={(e) => {
+                        if (e.self._grid._inputingColumn) {
+                            delete e.self._grid._inputingColumn;
+                            if (e.self._grid.needRefresh()) {
+                                e.self._grid.pageNumber = 1;
+                                e.self._grid.selectedRowIndex = 0;
+                                e.self._grid.refresh();
                             }
                         }
                     }}
@@ -280,7 +281,7 @@ export class GridFLClass extends GridDBClass {
             return;
         }
 
-        e.dropdown.items = [];
+        e.self.items = [];
         grid._autocompleteDropdown.items = [];
         grid._autocompleteDropdown.visible = false;
 

package/src/Modal.jsx

@@ -69,6 +69,7 @@ export class ModalClass extends BaseComponent {
         wnd.opt.noHeader = props.noHeader;
         wnd.opt.noFooter = props.noFooter;
         wnd.opt.noPadding = props.noPadding;
+        wnd.opt.noBodyOverflow = props.noBodyOverflow;
 
         wnd.opt.margin = props.margin;
         wnd.opt.padding = props.padding;
@@ -184,7 +185,7 @@ export class ModalClass extends BaseComponent {
                         key={`window_${wnd.id}_body_`}
                         wnd-body={1}
                         className={wnd.opt.bodyClass}
-                        style={{ padding: wnd.opt.noPadding ? '0' : '', overflow: 'auto', height: '100%' }}
+                        style={{ padding: wnd.opt.noPadding ? '0' : '', overflow: wnd.opt.noBodyOverflow ? 'hidden' : 'auto', height: '100%' }}
                     >
                         {wnd.renderContent(wnd)}
                     </div>
@@ -309,7 +310,7 @@ export class ModalClass extends BaseComponent {
         const wnd = this;
 
         if (wnd.onClose) {
-            const ev = {};
+            const ev = { self: wnd };
             wnd.onClose(ev);
             if (ev.cancel) return;
         }

package/src/Tests/DebugApp.jsx

@@ -134,7 +134,7 @@ function DebugApp() {
                     }
                 </div>
                 <Dropdown init={(dd) => { wnd.ddComponent = dd; }} getItems={GetPopupItems}
-                    onItemClick={(e) => { /*console.log('Item clicked: ' + e.itemId); */e.dropdown.clickedItem = e.itemId; wnd.refreshState(); }}
+                    onItemClick={(e) => { /*console.log('Item clicked: ' + e.itemId); */e.self.clickedItem = e.itemId; wnd.refreshState(); }}
                 >
                 </Dropdown>
             </>

package/src/css/default.css

@@ -504,7 +504,6 @@
         background-color: lightgray;
     }
 
-
 .grid-columns-settings-div {
     display: grid;
     grid-template-columns: calc(50% - 4px) 8px calc(50% - 4px);