@xh/hoist 70.0.0-SNAPSHOT.1731083521069 → 70.0.0-SNAPSHOT.1731374612473

package/desktop/cmp/viewmanager/ViewManager.ts

@@ -0,0 +1,274 @@
+import {div, filler, fragment, hbox, span} from '@xh/hoist/cmp/layout';
+import {hoistCmp, HoistProps, uses} from '@xh/hoist/core';
+import './ViewManager.scss';
+import {ViewTree} from '@xh/hoist/core/persist/viewmanager';
+import {ViewManagerModel} from '@xh/hoist/core/persist/viewmanager/ViewManagerModel';
+import {button, ButtonProps} from '@xh/hoist/desktop/cmp/button';
+import {switchInput} from '@xh/hoist/desktop/cmp/input';
+import {manageDialog} from '@xh/hoist/desktop/cmp/viewmanager/cmp/ManageDialog';
+import {saveDialog} from '@xh/hoist/desktop/cmp/viewmanager/cmp/SaveDialog';
+import {Icon} from '@xh/hoist/icon';
+import {menu, menuDivider, menuItem, popover} from '@xh/hoist/kit/blueprint';
+import {consumeEvent, pluralize} from '@xh/hoist/utils/js';
+import {isEmpty} from 'lodash';
+import {ReactNode} from 'react';
+
+export interface ViewManagerProps extends HoistProps<ViewManagerModel> {
+    menuButtonProps?: Partial<ButtonProps>;
+    saveButtonProps?: Partial<ButtonProps>;
+    /** 'whenDirty' to only show saveButton when persistence state is dirty. (Default 'whenDirty') */
+    showSaveButton?: 'whenDirty' | 'always' | 'never';
+    /** True to render private views in sub-menu (Default false)*/
+    showPrivateViewsInSubMenu?: boolean;
+    /** True to render shared views in sub-menu (Default false)*/
+    showSharedViewsInSubMenu?: boolean;
+}
+
+/**
+ * Desktop ViewManager component - a button-based menu for saving and swapping between named
+ * bundles of persisted component state (eg grid views, dashboards, and similar).
+ *
+ * See {@link ViewManagerModel} for additional details and configuration options.
+ */
+export const [ViewManager, viewManager] = hoistCmp.withFactory<ViewManagerProps>({
+    displayName: 'ViewManager',
+    className: 'xh-view-manager',
+    model: uses(ViewManagerModel),
+
+    render({
+        model,
+        className,
+        menuButtonProps,
+        saveButtonProps,
+        showSaveButton = 'whenDirty',
+        showPrivateViewsInSubMenu = false,
+        showSharedViewsInSubMenu = false
+    }: ViewManagerProps) {
+        return fragment(
+            hbox({
+                className,
+                items: [
+                    popover({
+                        item: menuButton(menuButtonProps),
+                        content: viewMenu({showPrivateViewsInSubMenu, showSharedViewsInSubMenu}),
+                        placement: 'bottom-start',
+                        popoverClassName: 'xh-view-manager__popover'
+                    }),
+                    saveButton({
+                        showSaveButton,
+                        ...saveButtonProps
+                    })
+                ]
+            }),
+            manageDialog({
+                omit: !model.manageDialogOpen,
+                onClose: () => model.closeManageDialog()
+            }),
+            saveDialog()
+        );
+    }
+});
+
+const menuButton = hoistCmp.factory<ViewManagerModel>({
+    render({model, ...rest}) {
+        const {selectedView, DisplayName} = model;
+        return button({
+            className: 'xh-view-manager__menu-button',
+            text: model.getHierarchyDisplayName(selectedView?.name) ?? `Default ${DisplayName}`,
+            icon: Icon.bookmark(),
+            rightIcon: Icon.chevronDown(),
+            outlined: true,
+            ...rest
+        });
+    }
+});
+
+const saveButton = hoistCmp.factory<ViewManagerModel>({
+    render({model, showSaveButton, ...rest}) {
+        if (
+            !model.canShowSaveButton ||
+            showSaveButton === 'never' ||
+            (showSaveButton === 'whenDirty' && !model.isDirty)
+        ) {
+            return null;
+        }
+
+        return button({
+            className: 'xh-view-manager__save-button',
+            icon: Icon.save(),
+            tooltip: `Save changes to this ${model.displayName}`,
+            intent: 'primary',
+            disabled: !model.canSave,
+            onClick: () => model.saveAsync(false).linkTo(model.loadModel),
+            ...rest
+        });
+    }
+});
+
+const viewMenu = hoistCmp.factory<ViewManagerProps>({
+    render({model, showPrivateViewsInSubMenu, showSharedViewsInSubMenu}) {
+        const {DisplayName} = model,
+            pluralDisp = pluralize(DisplayName),
+            items = [];
+
+        if (!isEmpty(model.favoriteViews)) {
+            items.push(
+                menuDivider({title: 'Favorites'}),
+                ...model.favoriteViews.map(it => {
+                    return menuItem({
+                        key: `${it.token}-favorite`,
+                        icon: model.selectedToken === it.token ? Icon.check() : Icon.placeholder(),
+                        text: menuItemTextAndFaveToggle({
+                            view: {...it, text: model.getHierarchyDisplayName(it.name)}
+                        }),
+                        onClick: () => model.selectViewAsync(it.token).linkTo(model.loadModel),
+                        title: it.description
+                    });
+                })
+            );
+        }
+
+        if (!isEmpty(model.privateViewTree)) {
+            if (showPrivateViewsInSubMenu) {
+                items.push(
+                    menuDivider({omit: isEmpty(items)}),
+                    menuItem({
+                        text: `My ${pluralDisp}`,
+                        shouldDismissPopover: false,
+                        children: model.privateViewTree.map(it => {
+                            return buildMenuItem(it, model);
+                        })
+                    })
+                );
+            } else {
+                items.push(
+                    menuDivider({title: `My ${pluralDisp}`}),
+                    ...model.privateViewTree.map(it => buildMenuItem(it, model))
+                );
+            }
+        }
+
+        if (!isEmpty(model.sharedViewTree)) {
+            if (showSharedViewsInSubMenu) {
+                items.push(
+                    menuDivider({omit: isEmpty(items)}),
+                    menuItem({
+                        text: `Shared ${pluralDisp}`,
+                        shouldDismissPopover: false,
+                        children: model.sharedViewTree.map(it => {
+                            return buildMenuItem(it, model);
+                        })
+                    })
+                );
+            } else {
+                items.push(
+                    menuDivider({title: `Shared ${pluralDisp}`}),
+                    ...model.sharedViewTree.map(it => buildMenuItem(it, model))
+                );
+            }
+        }
+
+        return menu({
+            className: 'xh-view-manager__menu',
+            items: [
+                ...items,
+                menuDivider({omit: !model.enableDefault || isEmpty(items)}),
+                menuItem({
+                    icon: model.selectedToken ? Icon.placeholder() : Icon.check(),
+                    text: `Default ${DisplayName}`,
+                    omit: !model.enableDefault,
+                    onClick: () => model.selectViewAsync(null)
+                }),
+                menuDivider(),
+                menuItem({
+                    icon: Icon.save(),
+                    text: 'Save',
+                    disabled: !model.canSave,
+                    onClick: () => model.saveAsync(false)
+                }),
+                menuItem({
+                    icon: Icon.copy(),
+                    text: 'Save as...',
+                    onClick: () => model.saveAsAsync()
+                }),
+                menuItem({
+                    icon: Icon.reset(),
+                    text: `Revert ${DisplayName}`,
+                    disabled: !model.isDirty,
+                    onClick: () => model.resetAsync()
+                }),
+                menuDivider({omit: !model.enableAutoSave}),
+                menuItem({
+                    omit: !model.enableAutoSave,
+                    text: switchInput({
+                        label: 'Auto Save',
+                        bind: 'autoSaveActive',
+                        inline: true,
+                        disabled: !model.enableAutoSaveToggle
+                    }),
+                    title: model.disabledAutoSaveReason,
+                    shouldDismissPopover: false
+                }),
+                menuDivider(),
+                menuItem({
+                    icon: Icon.gear(),
+                    disabled: isEmpty(model.views),
+                    text: `Manage ${pluralDisp}...`,
+                    onClick: () => model.openManageDialog()
+                })
+            ]
+        });
+    }
+});
+
+function buildMenuItem(viewOrFolder: ViewTree, model: ViewManagerModel): ReactNode {
+    const {type, text, selected} = viewOrFolder,
+        icon = selected ? Icon.check() : Icon.placeholder();
+
+    switch (type) {
+        case 'folder':
+            return menuItem({
+                text,
+                icon,
+                shouldDismissPopover: false,
+                children: viewOrFolder.items
+                    ? viewOrFolder.items.map(child => buildMenuItem(child, model))
+                    : []
+            });
+        case 'view':
+            return menuItem({
+                className: 'xh-view-manager__menu-item',
+                key: viewOrFolder.token,
+                icon,
+                text: menuItemTextAndFaveToggle({model, view: viewOrFolder}),
+                title: viewOrFolder.description,
+                onClick: () => model.selectViewAsync(viewOrFolder.token).linkTo(model.loadModel)
+            });
+    }
+}
+
+const menuItemTextAndFaveToggle = hoistCmp.factory<ViewManagerModel>({
+    render({model, view}) {
+        const isFavorite = model.isFavorite(view.token);
+        return hbox({
+            alignItems: 'center',
+            items: [
+                span({style: {paddingRight: 5}, item: view.text}),
+                fragment({
+                    omit: !model.enableFavorites,
+                    items: [
+                        filler(),
+                        div({
+                            className: `xh-view-manager__menu-item__fave-toggle ${isFavorite ? 'xh-view-manager__menu-item__fave-toggle--active' : ''}`,
+                            item: Icon.favorite({prefix: isFavorite ? 'fas' : 'far'}),
+                            onClick: e => {
+                                consumeEvent(e);
+                                model.toggleFavorite(view.token);
+                            }
+                        })
+                    ]
+                })
+            ]
+        });
+    }
+});

package/desktop/cmp/viewmanager/cmp/ManageDialog.ts

@@ -0,0 +1,197 @@
+import {form} from '@xh/hoist/cmp/form';
+import {grid} from '@xh/hoist/cmp/grid';
+import {div, filler, hbox, hframe, hspacer, placeholder, span, vframe} from '@xh/hoist/cmp/layout';
+import {storeFilterField} from '@xh/hoist/cmp/store';
+import {creates, hoistCmp, HoistProps, XH} from '@xh/hoist/core';
+import {ManageDialogModel} from '@xh/hoist/core/persist/viewmanager/impl/ManageDialogModel';
+import {button} from '@xh/hoist/desktop/cmp/button';
+import {formField} from '@xh/hoist/desktop/cmp/form';
+import {select, textArea, textInput} from '@xh/hoist/desktop/cmp/input';
+import {panel} from '@xh/hoist/desktop/cmp/panel';
+import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
+import {fmtCompactDate} from '@xh/hoist/format';
+import {Icon} from '@xh/hoist/icon';
+import {dialog} from '@xh/hoist/kit/blueprint';
+import {pluralize} from '@xh/hoist/utils/js';
+import {capitalize} from 'lodash';
+
+export interface ManageDialogProps extends HoistProps<ManageDialogModel> {
+    onClose: () => void;
+}
+
+export const manageDialog = hoistCmp.factory<ManageDialogProps>({
+    displayName: 'ManageDialog',
+    className: 'xh-view-manager__manage-dialog',
+    model: creates(ManageDialogModel),
+
+    render({model, className, onClose}) {
+        const {displayName, saveTask, deleteTask} = model;
+        return dialog({
+            title: `Manage ${capitalize(pluralize(displayName))}`,
+            icon: Icon.gear(),
+            className,
+            isOpen: true,
+            style: {width: '800px', maxWidth: '90vm', minHeight: '430px'},
+            canOutsideClickClose: false,
+            onClose,
+            item: panel({
+                item: hframe(gridPanel(), formPanel({onClose})),
+                mask: [saveTask, deleteTask]
+            })
+        });
+    }
+});
+
+const gridPanel = hoistCmp.factory({
+    render() {
+        return panel({
+            modelConfig: {defaultSize: 350, side: 'left', collapsible: false},
+            item: grid(),
+            bbar: [storeFilterField()]
+        });
+    }
+});
+
+const formPanel = hoistCmp.factory<ManageDialogProps>({
+    render({model, onClose}) {
+        const {displayName, formModel} = model,
+            {values} = formModel,
+            isOwnView = values.owner === XH.getUsername();
+
+        if (model.hasMultiSelection) {
+            return multiSelectionPanel();
+        }
+
+        if (!model.selectedId)
+            return panel({
+                item: placeholder(Icon.gears(), `Select a ${displayName}`),
+                bbar: bbar({onClose})
+            });
+
+        return panel({
+            item: form({
+                fieldDefaults: {
+                    commitOnChange: true
+                },
+                item: vframe({
+                    className: 'xh-view-manager__manage-dialog__form',
+                    items: [
+                        formField({
+                            field: 'name',
+                            item: textInput(),
+                            info: model.canEdit
+                                ? `Organize your ${pluralize(displayName)} into folders by including the "\\" character in their names - e.g. "My folder\\My ${displayName}".`
+                                : null
+                        }),
+                        formField({
+                            field: 'description',
+                            item: textArea({
+                                selectOnFocus: true,
+                                height: 70
+                            }),
+                            readonlyRenderer: v =>
+                                v
+                                    ? v
+                                    : span({
+                                          item: 'None provided',
+                                          className: 'xh-text-color-muted'
+                                      })
+                        }),
+                        formField({
+                            field: 'isShared',
+                            label: 'Visibility',
+                            item: select({
+                                options: [
+                                    {value: true, label: 'Shared with all users'},
+                                    {
+                                        value: false,
+                                        label: `Private to ${isOwnView ? 'me' : values.owner}`
+                                    }
+                                ],
+                                enableFilter: false
+                            }),
+                            omit: !model.enableSharing
+                        }),
+                        hbox({
+                            omit: !model.showSaveButton,
+                            style: {margin: '10px 20px'},
+                            items: [
+                                button({
+                                    text: 'Save Changes',
+                                    icon: Icon.check(),
+                                    intent: 'success',
+                                    minimal: false,
+                                    flex: 1,
+                                    onClick: () => model.saveAsync()
+                                }),
+                                hspacer(),
+                                button({
+                                    icon: Icon.reset(),
+                                    tooltip: 'Revert changes',
+                                    minimal: false,
+                                    onClick: () => formModel.reset()
+                                })
+                            ]
+                        }),
+                        filler(),
+                        div({
+                            className: 'xh-view-manager__manage-dialog__metadata',
+                            items: [
+                                `Created ${fmtCompactDate(values.dateCreated)} by ${
+                                    values.owner === XH.getUsername() ? 'you' : values.owner
+                                }. `,
+                                `Updated ${fmtCompactDate(values.lastUpdated)} by ${
+                                    values.lastUpdatedBy === XH.getUsername()
+                                        ? 'you'
+                                        : values.lastUpdatedBy
+                                }.`
+                            ]
+                        })
+                    ]
+                })
+            }),
+            bbar: bbar({onClose})
+        });
+    }
+});
+
+const multiSelectionPanel = hoistCmp.factory<ManageDialogProps>({
+    render({model, onClose}) {
+        const {selectedIds} = model;
+        return panel({
+            item: vframe({
+                alignItems: 'center',
+                justifyContent: 'center',
+                item: button({
+                    text: `Delete ${selectedIds.length} ${pluralize(model.displayName)}`,
+                    icon: Icon.delete(),
+                    intent: 'danger',
+                    outlined: true,
+                    disabled: !model.canDelete,
+                    onClick: () => model.deleteAsync()
+                })
+            }),
+            bbar: bbar({onClose})
+        });
+    }
+});
+
+const bbar = hoistCmp.factory<ManageDialogProps>({
+    render({model, onClose}) {
+        return toolbar(
+            button({
+                text: 'Delete',
+                icon: Icon.delete(),
+                intent: 'danger',
+                disabled: !model.canDelete,
+                omit: model.hasMultiSelection,
+                onClick: () => model.deleteAsync()
+            }),
+            filler(),
+            button({
+                text: 'Close',
+                onClick: onClose
+            })
+        );
+    }
+});

package/desktop/cmp/viewmanager/cmp/SaveDialog.ts

@@ -0,0 +1,89 @@
+import {form} from '@xh/hoist/cmp/form';
+import {filler, vframe} from '@xh/hoist/cmp/layout';
+import {hoistCmp, uses} from '@xh/hoist/core';
+import {SaveDialogModel} from '@xh/hoist/core/persist/viewmanager/impl/SaveDialogModel';
+import {button} from '@xh/hoist/desktop/cmp/button';
+import {formField} from '@xh/hoist/desktop/cmp/form';
+import {textArea, textInput} from '@xh/hoist/desktop/cmp/input';
+import {panel} from '@xh/hoist/desktop/cmp/panel';
+import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
+import {Icon} from '@xh/hoist/icon';
+import {dialog} from '@xh/hoist/kit/blueprint';
+
+export const saveDialog = hoistCmp.factory<SaveDialogModel>({
+    displayName: 'SaveDialog',
+    className: 'xh-view-manager__save-dialog',
+    model: uses(SaveDialogModel),
+
+    render({model, className}) {
+        if (!model.isOpen) return null;
+
+        return dialog({
+            title: `Save as...`,
+            icon: Icon.copy(),
+            className,
+            isOpen: true,
+            style: {width: 500},
+            canOutsideClickClose: false,
+            onClose: () => model.cancel(),
+            item: formPanel()
+        });
+    }
+});
+
+const formPanel = hoistCmp.factory<SaveDialogModel>({
+    render({model}) {
+        return panel({
+            item: form({
+                fieldDefaults: {
+                    commitOnChange: true
+                },
+                item: vframe({
+                    className: 'xh-view-manager__save-dialog__form',
+                    items: [
+                        formField({
+                            field: 'name',
+                            item: textInput({
+                                autoFocus: true,
+                                selectOnFocus: true,
+                                onKeyDown: e => {
+                                    if (e.key === 'Enter') model.saveAsAsync();
+                                }
+                            })
+                        }),
+                        formField({
+                            field: 'description',
+                            item: textArea({
+                                selectOnFocus: true,
+                                height: 90
+                            })
+                        })
+                    ]
+                })
+            }),
+            bbar: bbar(),
+            mask: model.saveTask
+        });
+    }
+});
+
+const bbar = hoistCmp.factory<SaveDialogModel>({
+    render({model}) {
+        const {formModel, DisplayName} = model;
+        return toolbar(
+            filler(),
+            button({
+                text: 'Cancel',
+                onClick: () => model.cancel()
+            }),
+            button({
+                text: `Save as new ${DisplayName}`,
+                icon: Icon.copy(),
+                outlined: true,
+                intent: 'success',
+                disabled: !formModel.isValid,
+                onClick: () => model.saveAsAsync()
+            })
+        );
+    }
+});

package/desktop/cmp/viewmanager/index.ts

@@ -0,0 +1,3 @@
+export * from './ViewManager';
+export * from './cmp/ManageDialog';
+export * from './cmp/SaveDialog';

package/mobile/cmp/button/ColAutosizeButton.ts

@@ -17,7 +17,7 @@ export interface ColAutosizeButtonProps extends ButtonProps {
     gridModel?: GridModel;
 
     /** Options for the grid autosize. */
-    autosizeOptions?: GridAutosizeOptions;
+    autosizeOptions?: Omit<GridAutosizeOptions, 'mode'>;
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "70.0.0-SNAPSHOT.1731083521069",
+  "version": "70.0.0-SNAPSHOT.1731374612473",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",