Dialog

core/HoistComponentFunctional.js

@@ -67,7 +67,7 @@ export function hoistComponent(config) {
         isForwardRef = (render.length === 2);
 
     // 1) Default and validate the modelSpec
-    const modelSpec = withDefault(config.model, uses('*'));
+    const modelSpec = withDefault(config.model, uses('*', {publishMode: ModelPublishMode.NONE}));
     throwIf(
         modelSpec && !(modelSpec instanceof ModelSpec),
         "The 'model' config passed to hoistComponent() is incorrectly specified: provide a spec returned by either uses() or creates()."

desktop/appcontainer/AboutDialog.js

@@ -4,13 +4,15 @@
  *
  * Copyright © 2020 Extremely Heavy Industries Inc.
  */
-import {AboutDialogModel} from '@xh/hoist/appcontainer/AboutDialogModel';
-import {filler, frame} from '@xh/hoist/cmp/layout';
-import {hoistCmp, uses, XH} from '@xh/hoist/core';
-import {button} from '@xh/hoist/desktop/cmp/button';
+
+import {dialog} from '@xh/hoist/desktop/cmp/dialog';
+import {XH, hoistCmp, uses} from '@xh/hoist/core';
 import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
+import {button} from '@xh/hoist/desktop/cmp/button';
 import {Icon} from '@xh/hoist/icon';
-import {dialog} from '@xh/hoist/kit/blueprint';
+import {frame, filler} from '@xh/hoist/cmp/layout';
+
+import {AboutDialogModel} from '@xh/hoist/appcontainer/AboutDialogModel';
 import './AboutDialog.scss';
 
 /**
@@ -30,12 +32,14 @@ export const aboutDialog = hoistCmp.factory({
         const onClose = () => model.hide();
 
         return dialog({
-            isOpen: true,
-            isCloseButtonShown: false,
+            model: {
+                showCloseButton: false,
+                size: {width: 450},
+                onClose
+            },
             icon: Icon.info({size: 'lg'}),
             className: 'xh-about-dialog',
             title: `About ${XH.appName}`,
-            style: {width: 450},
             items: [
                 frame({
                     className: 'xh-about-dialog__inner',
@@ -49,8 +53,7 @@ export const aboutDialog = hoistCmp.factory({
                         onClick: onClose
                     })
                 )
-            ],
-            onClose
+            ]
         });
     }
 });

desktop/appcontainer/ExceptionDialog.js

@@ -4,15 +4,19 @@
  *
  * Copyright © 2020 Extremely Heavy Industries Inc.
  */
-import {ExceptionDialogModel} from '@xh/hoist/appcontainer/ExceptionDialogModel';
+
+import {dialog} from '@xh/hoist/desktop/cmp/dialog';
+import {XH, hoistCmp, uses} from '@xh/hoist/core';
 import {filler, fragment} from '@xh/hoist/cmp/layout';
-import {hoistCmp, uses, XH} from '@xh/hoist/core';
-import {button} from '@xh/hoist/desktop/cmp/button';
+import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
 import {Icon} from '@xh/hoist/icon';
-import {dialog, dialogBody} from '@xh/hoist/kit/blueprint';
-import './ExceptionDialog.scss';
+import {button} from '@xh/hoist/desktop/cmp/button';
+
+import {ExceptionDialogModel} from '@xh/hoist/appcontainer/ExceptionDialogModel';
+
 import {exceptionDialogDetails} from './ExceptionDialogDetails';
+import './ExceptionDialog.scss';
 
 /**
  * Dialog for display of exceptions, with support for viewing a detailed stacktrace
@@ -33,15 +37,17 @@ export const exceptionDialog = hoistCmp.factory({
 
         return fragment(
             dialog({
-                isOpen: true,
+                model: {
+                    showCloseButton: !options.requireReload,
+                    size: {width: 500},
+                    onClose
+                },
                 title: options.title,
-                isCloseButtonShown: !options.requireReload,
-                onClose,
                 icon: Icon.warning({size: 'lg'}),
-                items: [
-                    dialogBody(options.message),
-                    bbar()
-                ]
+                items: panel({
+                    item: options.message,
+                    bbar: bbar()
+                })
             }),
             exceptionDialogDetails()
         );
@@ -79,7 +85,6 @@ export const dismissButton = hoistCmp.factory(
     ({model}) => {
         const reloadRequired = model.options.requireReload,
             loginRequired = isSessionExpired(model.exception);
-
         return reloadRequired ?
             button({
                 icon: loginRequired ? Icon.login() : Icon.refresh(),

desktop/appcontainer/ExceptionDialogDetails.js

@@ -4,15 +4,16 @@
  *
  * Copyright © 2020 Extremely Heavy Industries Inc.
  */
-import {filler, pre, table, tbody, td, th, tr} from '@xh/hoist/cmp/layout';
-import {hoistCmp, XH} from '@xh/hoist/core';
-import {button} from '@xh/hoist/desktop/cmp/button';
+import {dialog} from '@xh/hoist/desktop/cmp/dialog';
+import {XH, hoistCmp} from '@xh/hoist/core';
+import {pre, table, tbody, td, th, tr, filler, vframe} from '@xh/hoist/cmp/layout';
 import {clipboardButton} from '@xh/hoist/desktop/cmp/clipboard';
-import {textArea} from '@xh/hoist/desktop/cmp/input';
 import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
-import {stringifyErrorSafely} from '@xh/hoist/exception';
+import {button} from '@xh/hoist/desktop/cmp/button';
+import {textArea} from '@xh/hoist/desktop/cmp/input';
 import {Icon} from '@xh/hoist/icon';
-import {dialog, dialogBody} from '@xh/hoist/kit/blueprint';
+import {stringifyErrorSafely} from '@xh/hoist/exception';
+
 import {dismissButton} from './ExceptionDialog';
 
 /**
@@ -45,12 +46,13 @@ export const exceptionDialogDetails = hoistCmp.factory(
         return dialog({
             title: 'Error Details',
             icon: Icon.search(),
-            isOpen: true,
-            isCloseButtonShown: !requireReload,
-            onClose: !requireReload ? () => model.close() : null,
-            style: {width: 800},
+            model: {
+                showCloseButton: !requireReload,
+                onClose: !requireReload ? () => model.close() : null,
+                size: {width: 800}
+            },
             items: [
-                dialogBody({
+                vframe({
                     className: 'xh-exception-dialog-details',
                     items: [
                         header,

desktop/appcontainer/FeedbackDialog.js

@@ -4,13 +4,14 @@
  *
  * Copyright © 2020 Extremely Heavy Industries Inc.
  */
-import {FeedbackDialogModel} from '@xh/hoist/appcontainer/FeedbackDialogModel';
+import {dialog} from '@xh/hoist/desktop/cmp/dialog';
 import {filler} from '@xh/hoist/cmp/layout';
 import {hoistCmp, uses, XH} from '@xh/hoist/core';
 import {button} from '@xh/hoist/desktop/cmp/button';
 import {textArea} from '@xh/hoist/desktop/cmp/input';
 import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
-import {dialog} from '@xh/hoist/kit/blueprint';
+
+import {FeedbackDialogModel} from '@xh/hoist/appcontainer/FeedbackDialogModel';
 
 /**
  * A simple dialog component to collect user feedback from directly within the application.
@@ -25,12 +26,15 @@ export const feedbackDialog = hoistCmp.factory({
     render({model}) {
         if (!model.isOpen) return null;
 
+        const onClose = () => model.hide();
+
         return dialog({
             title: `${XH.clientAppName} Feedback`,
-            style: {width: 450},
-            isOpen: true,
-            onClose: () => model.hide(),
-            canOutsideClickClose: false,
+            model: {
+                size: {width: 450},
+                closeOnOutsideClick: false,
+                onClose
+            },
             items: [
                 textArea({
                     placeholder: 'Please enter your comments...',
@@ -45,7 +49,7 @@ export const feedbackDialog = hoistCmp.factory({
                     filler(),
                     button({
                         text: 'Cancel',
-                        onClick: () => model.hide()
+                        onClick: onClose
                     }),
                     button({
                         text: 'Send Feedback',

desktop/appcontainer/Message.js

@@ -6,13 +6,13 @@
  */
 import {MessageModel} from '@xh/hoist/appcontainer/MessageModel';
 import {form} from '@xh/hoist/cmp/form';
-import {filler} from '@xh/hoist/cmp/layout';
+import {filler, vframe} from '@xh/hoist/cmp/layout';
 import {hoistCmp, uses} from '@xh/hoist/core';
 import {button} from '@xh/hoist/desktop/cmp/button';
 import {formField} from '@xh/hoist/desktop/cmp/form';
 import {textInput} from '@xh/hoist/desktop/cmp/input';
 import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
-import {dialog, dialogBody} from '@xh/hoist/kit/blueprint';
+import {dialog} from '@xh/hoist/desktop/cmp/dialog';
 import {withDefault} from '@xh/hoist/utils/js';
 import './Message.scss';
 
@@ -30,18 +30,19 @@ export const message = hoistCmp.factory({
         if (!model.isOpen) return null;
 
         return dialog({
-            isOpen: true,
-            isCloseButtonShown: false,
             title: model.title,
             icon: model.icon,
+            model: {
+                showCloseButton: false,
+                onClose: model.cancelProps ? () => model.doCancel() : null
+            },
             items: [
-                dialogBody(
-                    model.message,
-                    inputCmp()
-                ),
+                vframe({
+                    margin: '20px',
+                    items: [model.message, inputCmp()]
+                }),
                 bbar()
             ],
-            onClose: () => {if (model.cancelProps) model.doCancel();},
             ...props
         });
     }

desktop/appcontainer/OptionsDialog.js

@@ -4,15 +4,15 @@
  *
  * Copyright © 2020 Extremely Heavy Industries Inc.
  */
-import {OptionsDialogModel} from '@xh/hoist/appcontainer/OptionsDialogModel';
-import {form} from '@xh/hoist/cmp/form';
+import {dialog} from '@xh/hoist/desktop/cmp/dialog';
+import {hoistCmp, XH, uses} from '@xh/hoist/core';
+import {panel} from '@xh/hoist/desktop/cmp/panel';
+import {Icon} from '@xh/hoist/icon';
 import {filler} from '@xh/hoist/cmp/layout';
-import {hoistCmp, uses, XH} from '@xh/hoist/core';
 import {button, restoreDefaultsButton} from '@xh/hoist/desktop/cmp/button';
+import {form} from '@xh/hoist/cmp/form';
 import {formField} from '@xh/hoist/desktop/cmp/form';
-import {panel} from '@xh/hoist/desktop/cmp/panel';
-import {Icon} from '@xh/hoist/icon';
-import {dialog, dialogBody} from '@xh/hoist/kit/blueprint';
+import {OptionsDialogModel} from '@xh/hoist/appcontainer/OptionsDialogModel';
 import './OptionsDialog.scss';
 
 /**
@@ -35,38 +35,35 @@ export const optionsDialog = hoistCmp.factory({
             title: `${XH.clientAppName} Options`,
             icon: Icon.options(),
             className,
-            isOpen: true,
-            onClose: () => model.hide(),
-            canOutsideClickClose: false,
-            item: [
-                panel({
-                    mask: 'onLoad',
-                    item: dialogBody(
-                        form({
-                            model: formModel,
-                            fieldDefaults: {minimal: true, inline: true},
-                            items: model.options.map(option => {
-                                return formField({field: option.name, ...option.formField});
-                            })
-                        })
-                    ),
-                    bbar: [
-                        restoreDefaultsButton(),
-                        filler(),
-                        button({
-                            text: 'Cancel',
-                            onClick: () => model.hide()
-                        }),
-                        button({
-                            disabled: !formModel.isDirty,
-                            text: reloadRequired ? 'Save & Reload' : 'Save',
-                            icon: reloadRequired ? Icon.refresh() : Icon.check(),
-                            intent: 'success',
-                            onClick: () => model.saveAsync()
-                        })
-                    ]
-                })
-            ]
+            model: {
+                closeOnOutsideClick: false,
+                onClose: () => model.hide()
+            },
+            item: panel({
+                mask: 'onLoad',
+                item: form({
+                    model: formModel,
+                    fieldDefaults: {minimal: true, inline: true},
+                    items: model.options.map(option => {
+                        return formField({field: option.name, ...option.formField});
+                    })
+                }),
+                bbar: [
+                    restoreDefaultsButton(),
+                    filler(),
+                    button({
+                        text: 'Cancel',
+                        onClick: () => model.hide()
+                    }),
+                    button({
+                        disabled: !formModel.isDirty,
+                        text: reloadRequired ? 'Save & Reload' : 'Save',
+                        icon: reloadRequired ? Icon.refresh() : Icon.check(),
+                        intent: 'success',
+                        onClick: () => model.saveAsync()
+                    })
+                ]
+            })
         });
     }
 });