Merge pull request #3279 from bettyblocks/feat/disable-preload-childr…

…en-dialog-PFR-764

feat: allow to disable preload children in dialog PFR-764

CHANGELOG.md

@@ -1,3 +1,15 @@
+# [2.167.0](https://github.com/bettyblocks/material-ui-component-set/compare/v2.166.0...v2.167.0) (2023-11-02)
+
+
+### Bug Fixes
+
+* use uuid for object component as value ([6f6294e](https://github.com/bettyblocks/material-ui-component-set/commit/6f6294e916d2b48096e65777ceace8a199439a6b))
+
+
+### Features
+
+* navToOutputUrl by default in questionnaire start ([83d94ae](https://github.com/bettyblocks/material-ui-component-set/commit/83d94ae2c0468be96ed108129b20cc929e96cf0d))
+
 # [2.166.0](https://github.com/bettyblocks/material-ui-component-set/compare/v2.165.1...v2.166.0) (2023-11-01)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "component-set",
-  "version": "2.166.0",
+  "version": "2.167.0",
   "main": "dist/templates.json",
   "license": "UNLICENSED",
   "private": false,

src/components/dialog.js

@@ -12,6 +12,7 @@
       runTimeVisibility,
       width,
       disableClick: disableBackdropClick,
+      preLoadChildren,
       dataComponentAttribute,
     } = options;
     const { Dialog } = window.MaterialUI.Core;
@@ -22,6 +23,7 @@
       ? isVisible
       : runTimeVisibility !== 'false';
     const [isOpen, setIsOpen] = useState(componentVisibility);
+    const [keepMounted, setKeepMounted] = useState(preLoadChildren);
 
     const closeDialog = () => setIsOpen(false);
     const openDialog = () => setIsOpen(true);
@@ -30,6 +32,10 @@
       setIsOpen(componentVisibility);
     }, [componentVisibility]);
 
+    useEffect(() => {
+      if (isOpen) setKeepMounted(true);
+    }, [isOpen]);
+
     useEffect(() => {
       B.defineFunction('Show', openDialog);
       B.defineFunction('Hide', closeDialog);
@@ -59,7 +65,7 @@
         fullWidth
         maxWidth={width}
         aria-labelledby="modal-dialog"
-        keepMounted
+        keepMounted={keepMounted}
         disableBackdropClick={disableBackdropClick}
         data-component={useText(dataComponentAttribute) || 'Dialog'}
       >

src/prefabs/structures/Dialog/options/advanced.ts

@@ -1,9 +1,15 @@
-import { toggle, variable } from '@betty-blocks/component-sdk';
+import { toggle, variable, hideIf } from '@betty-blocks/component-sdk';
 
 export const advanced = {
   invisible: toggle('Invisible', {
     value: false,
   }),
+  preLoadChildren: toggle('Preload child components', {
+    value: true,
+    configuration: {
+      condition: hideIf('runTimeVisibility', 'EQ', 'true'),
+    },
+  }),
   dataComponentAttribute: variable('Test attribute', {
     value: ['Dialog'],
   }),

src/prefabs/structures/Dialog/options/index.ts

@@ -5,7 +5,7 @@ export const categories = [
   {
     label: 'Advanced Options',
     expanded: false,
-    members: ['dataComponentAttribute', 'invisible'],
+    members: ['dataComponentAttribute', 'preLoadChildren', 'invisible'],
   },
 ];