@singularsystems/neo-react 1.3.3 → 1.3.4

package/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 This file details all new features and changes to functionality. If you only need to see changes that require updates to your project, see the [breaking changes](./Breaking.md) readme.
 
+## Version 1.3.4
+
+- Added `PopupHost` component
+    - Can be used to create popup controls like drop downs / search components.
+
 ## Version 1.3.3
 
 - Minor type fixes.

package/dist/ReactComponents/PopupHost.d.ts

@@ -0,0 +1,41 @@
+import React from "react";
+interface IPopupHostProps {
+    anchor: React.RefObject<HTMLElement | null>;
+    /** If the popup height is less than this value, the top of the popup will be moved up so that the height is at least this value. */
+    jumpThreshold?: number;
+    /** Called when the close animation completes. */
+    onClose?: () => void;
+    children: React.ReactElement;
+}
+/**
+ * A component that displays a popup over an anchor element.
+ * The popup is dismissed when clicking outside of it, or pressing the Escape key.
+ *
+ * This component is a low level component that should be used by other re-usable components, not directly in views.
+ */
+export default class PopupHost extends React.Component<IPopupHostProps> {
+    constructor(props: IPopupHostProps);
+    private isVisible;
+    private popupRef;
+    private hideTimer;
+    render(): false | React.JSX.Element;
+    componentDidUpdate(): void;
+    componentWillUnmount(): void;
+    /** Shows, and positions the popup. */
+    show(): void;
+    /**
+     * Recalculates the position of the popup relative to the anchor.
+     * Call this if the height of the child popup may have changed.
+     */
+    performLayout(): void;
+    private onKeyDown;
+    private documentClick;
+    /**
+     * Starts the animation to hide the popup.
+     * The onClose callback will be called once the animation completes.
+     */
+    beginHide(): void;
+    private hide;
+    private removeDocumentClickListener;
+}
+export {};

package/dist/ReactComponents/PopupHost.js

@@ -0,0 +1,128 @@
+import { __decorate, __extends, __metadata } from "tslib";
+import React from "react";
+import { observer } from "mobx-react";
+import { Misc } from "@singularsystems/neo-core";
+/**
+ * A component that displays a popup over an anchor element.
+ * The popup is dismissed when clicking outside of it, or pressing the Escape key.
+ *
+ * This component is a low level component that should be used by other re-usable components, not directly in views.
+ */
+var PopupHost = /** @class */ (function (_super) {
+    __extends(PopupHost, _super);
+    function PopupHost(props) {
+        var _this = _super.call(this, props) || this;
+        _this.isVisible = false;
+        _this.popupRef = React.createRef();
+        _this.onKeyDown = function (event) {
+            if (event.key === "Escape") {
+                _this.beginHide();
+            }
+        };
+        _this.onKeyDown = _this.onKeyDown.bind(_this);
+        _this.documentClick = _this.documentClick.bind(_this);
+        return _this;
+    }
+    PopupHost.prototype.render = function () {
+        return this.isVisible && (React.createElement("div", { className: "neo-popup", ref: this.popupRef, onKeyDown: this.onKeyDown }, this.props.children));
+    };
+    PopupHost.prototype.componentDidUpdate = function () {
+        this.performLayout();
+    };
+    PopupHost.prototype.componentWillUnmount = function () {
+        this.removeDocumentClickListener();
+    };
+    /** Shows, and positions the popup. */
+    PopupHost.prototype.show = function () {
+        if (this.hideTimer) {
+            clearTimeout(this.hideTimer);
+            this.hideTimer = undefined;
+        }
+        if (this.popupRef.current) {
+            this.popupRef.current.style.opacity = "1";
+        }
+        this.isVisible = true;
+        this.forceUpdate();
+        window.document.body.addEventListener("mousedown", this.documentClick);
+    };
+    /**
+     * Recalculates the position of the popup relative to the anchor.
+     * Call this if the height of the child popup may have changed.
+     */
+    PopupHost.prototype.performLayout = function () {
+        var _a;
+        var popup = this.popupRef.current;
+        var fixedHeader = (_a = Misc.Settings.fixedAppHeaderElement) === null || _a === void 0 ? void 0 : _a.call(undefined);
+        var screenPadding = 8;
+        var screenTop = (fixedHeader && getComputedStyle(fixedHeader).position === "fixed" ? fixedHeader.getBoundingClientRect().bottom : 0) + screenPadding;
+        var screenBottom = window.innerHeight - screenPadding;
+        if (popup && this.props.anchor.current) {
+            popup.style.height = "";
+            var anchorRect = this.props.anchor.current.getBoundingClientRect();
+            var innerElement = popup.firstElementChild;
+            var popupStyles = window.getComputedStyle(innerElement !== null && innerElement !== void 0 ? innerElement : popup);
+            var paddingTop = parseFloat(popupStyles.paddingTop);
+            var paddingLeft = parseFloat(popupStyles.paddingLeft);
+            popup.style.top = "".concat(anchorRect.top - paddingTop, "px");
+            popup.style.left = "".concat(Math.max(0, anchorRect.left - paddingLeft), "px");
+            var popupRect = popup.getBoundingClientRect();
+            var heightToFit = screenBottom - popupRect.top;
+            var jumpThreshold = this.props.jumpThreshold ? Math.min(this.props.jumpThreshold, popupRect.height) : 0;
+            if (popupRect.right > window.innerWidth) {
+                popup.style.left = "".concat(window.innerWidth - popupRect.width, "px");
+            }
+            if (popupRect.bottom > screenBottom) {
+                if (heightToFit < jumpThreshold) {
+                    // give the popup as much height as possible by moving the top of the popup higher.
+                    var top_1 = screenBottom - jumpThreshold;
+                    if (top_1 < screenTop) {
+                        popup.style.height = "".concat(screenBottom - screenTop, "px");
+                        popup.style.top = "".concat(screenTop, "px");
+                    }
+                    else {
+                        popup.style.height = "".concat(jumpThreshold, "px");
+                        popup.style.top = "".concat(top_1, "px");
+                    }
+                }
+                else {
+                    popup.style.height = "".concat(heightToFit, "px");
+                }
+            }
+        }
+    };
+    PopupHost.prototype.documentClick = function (event) {
+        // hide if the click is outside the popup
+        if (this.popupRef.current && !this.popupRef.current.contains(event.target)) {
+            this.beginHide();
+        }
+    };
+    /**
+     * Starts the animation to hide the popup.
+     * The onClose callback will be called once the animation completes.
+     */
+    PopupHost.prototype.beginHide = function () {
+        var _this = this;
+        this.removeDocumentClickListener();
+        var transitionDuration = 0;
+        if (this.popupRef.current) {
+            this.popupRef.current.style.opacity = "0";
+            transitionDuration = parseFloat(window.getComputedStyle(this.popupRef.current).transitionDuration) * 1000;
+        }
+        this.hideTimer = setTimeout(function () { return _this.hide(); }, transitionDuration);
+    };
+    PopupHost.prototype.hide = function () {
+        var _a;
+        this.isVisible = false;
+        this.forceUpdate();
+        (_a = this.props.onClose) === null || _a === void 0 ? void 0 : _a.call(undefined);
+    };
+    PopupHost.prototype.removeDocumentClickListener = function () {
+        window.document.body.removeEventListener("mousedown", this.documentClick);
+    };
+    PopupHost = __decorate([
+        observer,
+        __metadata("design:paramtypes", [Object])
+    ], PopupHost);
+    return PopupHost;
+}(React.Component));
+export default PopupHost;

package/dist/ReactComponents/_Exports.d.ts

@@ -30,6 +30,7 @@ import NumberInput from './NumberInput';
 import Pager from './Paging/Pager';
 import PagerControlsBasic from './Paging/BasicPagerControls';
 import PageSizeControl from './Paging/PageSizeControl';
+import PopupHost from "./PopupHost";
 import ProgressBar from './ProgressBar';
 import RadioList from './RadioList';
 import Slider from './Slider';
@@ -42,4 +43,4 @@ import ToastContainer from './Notifications/ToastContainer';
 import Tooltip from './Tooltip';
 import TooltipProvider from './TooltipProvider';
 import ValidationSummary from './ValidationSummary';
-export { Alert, AutoCompleteDropDown, Badge, Button, Card, Checkbox, Collapsable, ColorPicker, ContextMenuContainer, DatePicker, DropDown, FileBasicInput, FileContext, FileDropArea, FileInput, FileUploadButton, FileUploadProgress, Form, FormContext, FormGroup, FormGroupFloating, FormGroupInline, GridLayout, Icon, Input, Link, Loader, Modal, ModalContainer, NumberInput, Pager, PagerControlsBasic, PageSizeControl, Passwordbox, ProgressBar, RadioList, Slider, TabContainer, Tab, Textbox, TransitionContainer, TransitionPanel, Toast, ToastContainer, Tooltip, TooltipProvider, ValidationSummary };
+export { Alert, AutoCompleteDropDown, Badge, Button, Card, Checkbox, Collapsable, ColorPicker, ContextMenuContainer, DatePicker, DropDown, FileBasicInput, FileContext, FileDropArea, FileInput, FileUploadButton, FileUploadProgress, Form, FormContext, FormGroup, FormGroupFloating, FormGroupInline, GridLayout, Icon, Input, Link, Loader, Modal, ModalContainer, NumberInput, Pager, PagerControlsBasic, PageSizeControl, Passwordbox, PopupHost, ProgressBar, RadioList, Slider, TabContainer, Tab, Textbox, TransitionContainer, TransitionPanel, Toast, ToastContainer, Tooltip, TooltipProvider, ValidationSummary };

package/dist/ReactComponents/_Exports.js

@@ -30,6 +30,7 @@ import NumberInput from './NumberInput';
 import Pager from './Paging/Pager';
 import PagerControlsBasic from './Paging/BasicPagerControls';
 import PageSizeControl from './Paging/PageSizeControl';
+import PopupHost from "./PopupHost";
 import ProgressBar from './ProgressBar';
 import RadioList from './RadioList';
 import Slider from './Slider';
@@ -42,4 +43,4 @@ import ToastContainer from './Notifications/ToastContainer';
 import Tooltip from './Tooltip';
 import TooltipProvider from './TooltipProvider';
 import ValidationSummary from './ValidationSummary';
-export { Alert, AutoCompleteDropDown, Badge, Button, Card, Checkbox, Collapsable, ColorPicker, ContextMenuContainer, DatePicker, DropDown, FileBasicInput, FileContext, FileDropArea, FileInput, FileUploadButton, FileUploadProgress, Form, FormContext, FormGroup, FormGroupFloating, FormGroupInline, GridLayout, Icon, Input, Link, Loader, Modal, ModalContainer, NumberInput, Pager, PagerControlsBasic, PageSizeControl, Passwordbox, ProgressBar, RadioList, Slider, TabContainer, Tab, Textbox, TransitionContainer, TransitionPanel, Toast, ToastContainer, Tooltip, TooltipProvider, ValidationSummary };
+export { Alert, AutoCompleteDropDown, Badge, Button, Card, Checkbox, Collapsable, ColorPicker, ContextMenuContainer, DatePicker, DropDown, FileBasicInput, FileContext, FileDropArea, FileInput, FileUploadButton, FileUploadProgress, Form, FormContext, FormGroup, FormGroupFloating, FormGroupInline, GridLayout, Icon, Input, Link, Loader, Modal, ModalContainer, NumberInput, Pager, PagerControlsBasic, PageSizeControl, Passwordbox, PopupHost, ProgressBar, RadioList, Slider, TabContainer, Tab, Textbox, TransitionContainer, TransitionPanel, Toast, ToastContainer, Tooltip, TooltipProvider, ValidationSummary };

package/dist/Routing/ISearchItemProvider.d.ts

@@ -0,0 +1,8 @@
+export interface ISearchItem {
+    name: string;
+    icon?: string;
+    onClick: () => void;
+}
+export interface ISearchItemProvider {
+    getItems(): ISearchItem[] | Promise<ISearchItem[]>;
+}

package/dist/Routing/ISearchItemProvider.js

@@ -0,0 +1 @@
+export {};

package/dist/Routing/MainMenuItemProvider.d.ts

@@ -0,0 +1,13 @@
+import { ISearchItem, ISearchItemProvider } from "./ISearchItemProvider";
+import { IMenuRoute } from "./MenuRoute";
+/**
+ * Provides items displayed on the main menu.
+ * The items passed to this constructor should be the same as what is passed to the sidebar.
+ */
+export declare class MainMenuItemProvider implements ISearchItemProvider {
+    private navigationHelper;
+    private allItems;
+    constructor(routes: IMenuRoute[], navigationHelper?: import("./NavigationHelper").INavigationHelper);
+    getItems(): ISearchItem[];
+    private flattenRoutes;
+}

package/dist/Routing/MainMenuItemProvider.js

@@ -0,0 +1,38 @@
+import { Misc } from "@singularsystems/neo-core";
+import { NeoReactTypes } from "../Modules/Types";
+/**
+ * Provides items displayed on the main menu.
+ * The items passed to this constructor should be the same as what is passed to the sidebar.
+ */
+var MainMenuItemProvider = /** @class */ (function () {
+    function MainMenuItemProvider(routes, navigationHelper) {
+        if (navigationHelper === void 0) { navigationHelper = Misc.Globals.appService.get(NeoReactTypes.Routing.NavigationHelper); }
+        this.navigationHelper = navigationHelper;
+        this.allItems = [];
+        this.flattenRoutes(routes);
+    }
+    MainMenuItemProvider.prototype.getItems = function () {
+        var _this = this;
+        return this.allItems.map(function (route) { return ({
+            name: route.name,
+            icon: route.icon,
+            onClick: function () {
+                if (route.path) {
+                    _this.navigationHelper.navigateInternal(route.path);
+                }
+            },
+        }); }).sortBy(function (c) { return c.name; });
+    };
+    MainMenuItemProvider.prototype.flattenRoutes = function (routes) {
+        var _a;
+        (_a = this.allItems).push.apply(_a, routes.filter(function (r) { return r.path; }));
+        for (var _i = 0, routes_1 = routes; _i < routes_1.length; _i++) {
+            var route = routes_1[_i];
+            if (route.children) {
+                this.flattenRoutes(route.children);
+            }
+        }
+    };
+    return MainMenuItemProvider;
+}());
+export { MainMenuItemProvider };

package/dist/Routing/MainMenuSearchItemProvider.d.ts

@@ -0,0 +1,13 @@
+import { ISearchItem, ISearchItemProvider } from "./ISearchItemProvider";
+import { IMenuRoute } from "./MenuRoute";
+/**
+ * Provides items displayed on the main menu.
+ * The items passed to this constructor should be the same as what is passed to the sidebar.
+ */
+export declare class MainMenuSearchItemProvider implements ISearchItemProvider {
+    private navigationHelper;
+    private allItems;
+    constructor(routes: IMenuRoute[], navigationHelper?: import("./NavigationHelper").INavigationHelper);
+    getItems(): ISearchItem[];
+    private flattenRoutes;
+}

package/dist/Routing/MainMenuSearchItemProvider.js

@@ -0,0 +1,38 @@
+import { Misc } from "@singularsystems/neo-core";
+import { NeoReactTypes } from "../Modules/Types";
+/**
+ * Provides items displayed on the main menu.
+ * The items passed to this constructor should be the same as what is passed to the sidebar.
+ */
+var MainMenuSearchItemProvider = /** @class */ (function () {
+    function MainMenuSearchItemProvider(routes, navigationHelper) {
+        if (navigationHelper === void 0) { navigationHelper = Misc.Globals.appService.get(NeoReactTypes.Routing.NavigationHelper); }
+        this.navigationHelper = navigationHelper;
+        this.allItems = [];
+        this.flattenRoutes(routes);
+    }
+    MainMenuSearchItemProvider.prototype.getItems = function () {
+        var _this = this;
+        return this.allItems.map(function (route) { return ({
+            name: route.name,
+            icon: route.icon,
+            onClick: function () {
+                if (route.path) {
+                    _this.navigationHelper.navigateInternal(route.path);
+                }
+            },
+        }); }).sortBy(function (c) { return c.name; });
+    };
+    MainMenuSearchItemProvider.prototype.flattenRoutes = function (routes) {
+        var _a;
+        (_a = this.allItems).push.apply(_a, routes.filter(function (r) { return r.path; }));
+        for (var _i = 0, routes_1 = routes; _i < routes_1.length; _i++) {
+            var route = routes_1[_i];
+            if (route.children) {
+                this.flattenRoutes(route.children);
+            }
+        }
+    };
+    return MainMenuSearchItemProvider;
+}());
+export { MainMenuSearchItemProvider };

package/dist/Routing/index.d.ts

@@ -2,8 +2,8 @@ export { default as RouteProvider } from './RouteProvider';
 export { default as RouteView } from './RouteView';
 export * from './BreadCrumbItem';
 export { PageLeaveHandler } from './PageLeaveHandler';
-export { IMenuRoute, MenuRoute } from './MenuRoute';
-export { INavigationHelper } from './NavigationHelper';
-export { IViewParameter } from './ViewParameter';
-export { BreadCrumbSelectMode, IRouteParameter, RouteParameters } from './IRouteParameter';
-export { IRouteChangedProps } from './IRouteChangedProps';
+export { type IMenuRoute, MenuRoute } from './MenuRoute';
+export type { INavigationHelper } from './NavigationHelper';
+export type { IViewParameter } from './ViewParameter';
+export { BreadCrumbSelectMode, type IRouteParameter, type RouteParameters } from './IRouteParameter';
+export type { IRouteChangedProps } from './IRouteChangedProps';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@singularsystems/neo-react",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "description": "React application logic and components for the Neo client library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",