Dialog

client-app/src/admin/AppModel.js

@@ -44,7 +44,9 @@ export class AppModel extends BaseAppModel {
                     {name: 'panelResizing', path: '/panelResizing'},
                     {name: 'fetchAPI', path: '/fetchAPI'},
                     {name: 'storeEditing', path: '/storeEditing'},
-                    {name: 'select', path: '/select'}
+                    {name: 'select', path: '/select'},
+                    {name: 'dialogs', path: '/dialogs'}
+
                 ]
             },
             {

client-app/src/admin/tests/TestsTab.js

@@ -14,6 +14,7 @@ import {PanelResizingTestPanel} from './panels/PanelResizingTestPanel';
 import {FetchApiTestPanel} from './fetch/FetchApiTestPanel';
 import {StoreEditingPanel} from './storeEditing/StoreEditingPanel';
 import {SelectTestPanel} from './Select/SelectTestPanel';
+import {dialogsPanel} from './dialogs/DialogsPanel';
 import {dataViewTestPanel} from './dataview/DataViewTestPanel';
 
 export const TestsTab = hoistCmp(
@@ -29,7 +30,9 @@ export const TestsTab = hoistCmp(
                 {id: 'panelResizing', title: 'Panel Resizing', content: PanelResizingTestPanel},
                 {id: 'fetchAPI', title: 'Fetch API', content: FetchApiTestPanel},
                 {id: 'storeEditing', title: 'Store Editing', content: StoreEditingPanel},
-                {id: 'select', title: 'Select', content: SelectTestPanel}
+                {id: 'select', title: 'Select', content: SelectTestPanel},
+                {id: 'dialogs', title: 'Dialogs', content: dialogsPanel}
+
             ],
             switcherPosition: 'left'
         }

client-app/src/admin/tests/dialogs/DialogsPanel.js

@@ -0,0 +1,143 @@
+
+import {vspacer, vframe, vbox, hframe, hbox, filler} from '@xh/hoist/cmp/layout';
+import {hoistCmp, creates} from '@xh/hoist/core';
+import {button} from '@xh/hoist/desktop/cmp/button';
+import {panel} from '@xh/hoist/desktop/cmp/panel';
+import {pickBy} from 'lodash';
+import {dialog} from '@xh/hoist/desktop/cmp/dialog';
+import {codeInput, select, textInput} from '@xh/hoist/desktop/cmp/input';
+import {Icon} from '@xh/hoist/icon';
+import {DialogsPanelModel} from './DialogsPanelModel';
+import {stubPanel} from './StubPanel';
+import {form} from '@xh/hoist/cmp/form';
+import {formField} from '@xh/hoist/desktop/cmp/form';
+
+
+export const dialogsPanel = hoistCmp.factory({
+    model: creates(DialogsPanelModel),
+    render() {
+        return hframe(managePanel(), hostPanel());
+    }
+});
+
+const managePanel = hoistCmp.factory({
+    render: ({model}) => {
+        const {formModel} = model,
+            ctrlDefaults = {enableClear: true, placeholder: '[none]'};
+        return panel({
+            title: 'Create/Manage',
+            model: {
+                showSplitter: true,
+                defaultSize: 400,
+                minSize: 400,
+                side: 'left',
+                resizable: true
+            },
+            item: form({
+                fieldDefaults: {
+                    inline: false,
+                    minimal: true,
+                    commitOnChange: true
+                },
+                items: vbox({
+                    padding: 5,
+                    items: [
+                        hframe(
+                            formField({
+                                field: 'icon',
+                                width: 120,
+                                item: select({
+                                    ...ctrlDefaults,
+                                    options: ['chartLine', 'dollarSign', 'add']
+                                })
+                            }),
+                            formField({
+                                field: 'title',
+                                width: 140,
+                                item: textInput({...ctrlDefaults})
+                            }),
+                            formField({
+                                field: 'content',
+                                width: 120,
+                                item: select({
+                                    enableFilter: false,
+                                    enableClear: false,
+                                    ...ctrlDefaults,
+                                    options: ['form', 'chart', 'treeMap']
+                                })
+                            })
+                        ),
+                        formField({
+                            field: 'modelConfig',
+                            item: codeInput({
+                                ...ctrlDefaults,
+                                height: 290,
+                                editorProps: {lineNumbers: false},
+                                mode: 'javascript'
+                            })
+                        }),
+                        hbox(
+                            button({
+                                text: 'Preset 1',
+                                minimal: false,
+                                onClick: () => model.addStub1()
+                            }),
+                            button({
+                                text: 'Preset 2',
+                                minimal: false,
+                                onClick: () => model.addStub2()
+                            }),
+                            filler(),
+                            button({
+                                icon: Icon.reset({className: 'xh-red'}),
+                                minimal: false,
+                                onClick: () => formModel.reset(),
+                                disabled: !formModel.isDirty
+                            }),
+                            button({
+                                text: 'Add from Form',
+                                minimal: false,
+                                icon: Icon.add(),
+                                onClick: () => model.addFormStub()
+                            })
+                        ),
+                        vspacer(7),
+                        stubsPanel()
+                    ]
+                })
+            })
+        });
+    }
+});
+
+const stubsPanel = hoistCmp.factory({
+    render({model}) {
+        return vframe({
+            items: [...model.stubs.map(stub => stubPanel({key: stub.xhId, model: stub}))]
+        });
+    }
+});
+
+const hostPanel = hoistCmp.factory({
+    render({model}) {
+        return panel({
+            title: 'Host Panel',
+            flex: 1,
+            item: vframe({
+                items: [
+                    ...model.stubs.map(stub => {
+                        const {dialogModel, title, icon, content} = stub,
+                            props = {
+                                key: dialogModel.key,
+                                icon: icon ? Icon[icon]() : null,
+                                title,
+                                model: dialogModel,
+                                item: content
+                            };
+                        return dialog(pickBy(props));
+                    })
+                ]
+            })
+        });
+    }
+});

client-app/src/admin/tests/dialogs/DialogsPanelModel.js

@@ -0,0 +1,120 @@
+import {HoistModel, managed, XH} from '@xh/hoist/core';
+import {observable, action} from '@xh/hoist/mobx';
+import {DialogModel} from '@xh/hoist/desktop/cmp/dialog';
+
+import {without} from 'lodash';
+import {StubModel} from './StubModel';
+import {FormModel} from '@xh/hoist/cmp/form';
+
+import {formPanel} from './content/FormPanel';
+import {chartPanel} from './content/ChartPanel';
+import {treeMapPanel} from './content/TreeMapPanel';
+
+@HoistModel
+export class DialogsPanelModel {
+
+    initialModelConfig = `{
+        resizable: true,
+        draggable: true,
+        // closeOnOutsideClick: false,
+        // closeOnEscape: false,
+        // showCloseButton: false,
+        // showBackgroundMask: false,
+        inPortal: false, 
+        // renderMode: 'unmountOnHide',
+        // refreshMode: 'onShowAlways' 
+
+        // size: {width: 400, height: 600},     
+        // position: {x: 100, y: 100},
+        // isOpen: false,
+        // isMaximized: true
+}`;
+
+    @managed
+    formModel = new FormModel({
+        fields: [
+            {name: 'icon', initialValue: 'add'},
+            {name: 'content', initialValue: 'form'},
+            {name: 'title', initialValue: 'My Dialog'},
+            {
+                name: 'modelConfig',
+                initialValue: this.initialModelConfig
+            }
+        ]
+    });
+
+    @observable.ref
+    stubs = [];
+
+    addFormStub() {
+        const {values} = this.formModel;
+        this.addStub(
+            values.title,
+            values.icon,
+            this.getContent(values.content),
+            new DialogModel(eval('('+ values.modelConfig + ')'))
+        );
+    }
+
+    @action
+    addStub(...args) {
+        this.stubs = [...this.stubs, new StubModel(...args)];
+    }
+
+    @action
+    removeStub(stub) {
+        this.stubs = without(this.stubs, stub);
+        XH.safeDestroy(stub);
+    }
+
+    //--------------------
+    // Some Useful presets
+    //--------------------
+    addStub1() {
+        this.addStub(
+            'Resizable TreeMap (s1)',
+            'box',
+            treeMapPanel(),
+            new DialogModel({
+                resizable: true,
+                inPortal: false,
+                size: {
+                    width: 400,
+                    height: 600
+                }
+            })
+        );
+    }
+
+    addStub2() {
+        this.addStub(
+            'Resizable Chart (s1)',
+            'chartLine',
+            chartPanel(),
+            new DialogModel({
+                resizable: true,
+                inPortal: false,
+                size: {
+                    width: 400,
+                    height: 600
+                }
+            })
+        );
+    }
+
+    //----------------------
+    // Implementation
+    //----------------------
+    getContent() {
+        switch (this.formModel.values.content) {
+            case 'form': return formPanel();
+            case 'chart': return chartPanel();
+            case 'treeMap': return treeMapPanel();
+        }
+        return null;
+    }
+
+    destroy() {
+        XH.safeDestroy(this.stubs);
+    }
+}

client-app/src/admin/tests/dialogs/StubModel.js

@@ -0,0 +1,20 @@
+import {HoistModel, XH} from '@xh/hoist/core';
+
+@HoistModel
+export class StubModel {
+    title;
+    icon;
+    dialogModel;
+
+    constructor(title, icon, content, dialogModel) {
+        this.title = title;
+        this.icon = icon;
+        this.content = content;
+        this.dialogModel = dialogModel;
+    }
+
+    destroy() {
+        this.dialogModel.close();
+        XH.safeDestroy(this.dialogModel);
+    }
+}