@singularsystems/neo-react 0.10.36 → 0.10.39

package/dist/React/AutoRunner.js

@@ -17,10 +17,11 @@ export { AutoRunnerFactory };
 var AutoRunner = /** @class */ (function () {
     function AutoRunner(model, callback, options) {
         var _this = this;
+        this.isPaused = false;
         this.propertyMap = {};
         this.options = (options !== null && options !== void 0 ? options : {});
-        this.disposerDelayed = reaction(function () { return _this.accessAllValues(model, true, new Map(), ""); }, function () { var _a; return Utils.debounce(_this, function () { return callback(model); }, (_a = _this.options.delayMs, (_a !== null && _a !== void 0 ? _a : 500))); });
-        this.disposerImmediate = reaction(function () { return _this.accessAllValues(model, false, new Map(), ""); }, function () { return Utils.debounce(_this, function () { return callback(model); }, 0); });
+        this.disposerDelayed = reaction(function () { return _this.accessAllValues(model, true, new Map(), ""); }, function () { var _a; return _this.runCallback(model, callback, (_a = _this.options.delayMs, (_a !== null && _a !== void 0 ? _a : 500))); });
+        this.disposerImmediate = reaction(function () { return _this.accessAllValues(model, false, new Map(), ""); }, function () { return _this.runCallback(model, callback, 0); });
     }
     AutoRunner.prototype.cancelPending = function () {
         Utils.clearDebounce(this);
@@ -29,6 +30,20 @@ var AutoRunner = /** @class */ (function () {
         this.disposerDelayed();
         this.disposerImmediate();
     };
+    AutoRunner.prototype.runCallback = function (model, callback, delay) {
+        var _this = this;
+        if (!this.isPaused) {
+            Utils.debounce(this, function () {
+                _this.isPaused = true;
+                try {
+                    callback(model);
+                }
+                finally {
+                    _this.isPaused = false;
+                }
+            }, delay);
+        }
+    };
     /**
      * Access all the property values of a model including it's value objects properties.
      * @param instance Instance to access.

package/dist/ReactComponents/Grid/Column.d.ts

@@ -9,6 +9,8 @@ export interface INeoColumnProps<TData> extends INeoCommonColumnProps, IEditorCo
     width?: number | string;
     /** Tooltip to show in header. If you want the tooltip to show on the cells as well, use 'data-tip'. */
     headerTooltip?: string;
+    /** Tooltip to show in cells. If you want the tooltip to show on the cells as well, use 'data-tip'. */
+    cellTooltip?: string;
     /** Allows you to disable sorting on a column, or make clicking a column heading sort a specific property. */
     sort?: Model.IPropertyInstance | false;
     /** True if this column must have a total cell. */

package/dist/ReactComponents/Grid/Column.js

@@ -91,7 +91,7 @@ var Column = /** @class */ (function (_super) {
         var _a;
         this.onRender();
         var allProps = BindPropsHelper.normaliseContainerProps(this, this.props, false);
-        var _b = allProps.containerDom, width = _b.width, hideBelow = _b.hideBelow, hideAbove = _b.hideAbove, headerTooltip = _b.headerTooltip, alignment = _b.alignment, sort = _b.sort, sum = _b.sum, footerContent = _b.footerContent, headerClassName = _b.headerClassName, cellClassName = _b.cellClassName, onHeaderClick = _b.onHeaderClick, domProps = __rest(_b, ["width", "hideBelow", "hideAbove", "headerTooltip", "alignment", "sort", "sum", "footerContent", "headerClassName", "cellClassName", "onHeaderClick"]);
+        var _b = allProps.containerDom, width = _b.width, hideBelow = _b.hideBelow, hideAbove = _b.hideAbove, headerTooltip = _b.headerTooltip, cellTooltip = _b.cellTooltip, alignment = _b.alignment, sort = _b.sort, sum = _b.sum, footerContent = _b.footerContent, headerClassName = _b.headerClassName, cellClassName = _b.cellClassName, onHeaderClick = _b.onHeaderClick, domProps = __rest(_b, ["width", "hideBelow", "hideAbove", "headerTooltip", "cellTooltip", "alignment", "sort", "sum", "footerContent", "headerClassName", "cellClassName", "onHeaderClick"]);
         if (allProps.bind !== undefined) {
             if (!this.controlType || this.isHeader) {
                 this.controlType = BindPropsHelper.getControlType(allProps);
@@ -133,7 +133,7 @@ var Column = /** @class */ (function (_super) {
         this.refreshStateObserver(allProps.editor);
         return this.isHeader ? this.renderHeader(allProps, domProps, headerTooltip, headerClassName) :
             this.isFooter ? this.renderFooter(allProps, domProps) :
-                this.renderBody(allProps, domProps, cellClassName);
+                this.renderBody(allProps, domProps, cellTooltip, cellClassName);
     };
     Column.prototype.renderHeader = function (props, domProps, tooltip, headerClassName) {
         var _this = this;
@@ -153,7 +153,7 @@ var Column = /** @class */ (function (_super) {
             sortIcon &&
                 React.createElement("i", { className: "column-sort-icon fa fa-" + sortIcon })));
     };
-    Column.prototype.renderBody = function (props, domProps, cellClassName) {
+    Column.prototype.renderBody = function (props, domProps, cellTooltip, cellClassName) {
         var _this = this;
         var editorProps = props.editor;
         var containerProps = props.container;
@@ -183,7 +183,7 @@ var Column = /** @class */ (function (_super) {
             }
         }
         domProps.className = Utils.joinWithSpaces(domProps.className, cellClassName);
-        return (React.createElement("td", __assign({}, domProps),
+        return (React.createElement("td", __assign({ "data-tip": cellTooltip }, domProps),
             !containerProps.suppressDefaultContent && (editor !== undefined ?
                 editor :
                 editorProps.bind ? displayValue : undefined),

package/dist/ReactComponents/Misc.d.ts

@@ -0,0 +1,15 @@
+export interface ICancellableEvent {
+    /** Informs the caller to cancel any further actions or processing. */
+    cancel(): void;
+    /** Continues with the original action. */
+    continue(): void;
+}
+export declare class CancellableEvent implements ICancellableEvent {
+    private canContinue;
+    private hasCancelled;
+    private cancelledAction?;
+    constructor(canContinue: () => boolean);
+    cancel(): void;
+    tryRunAction(action: () => void): void;
+    continue(): void;
+}

package/dist/ReactComponents/Misc.js

@@ -0,0 +1,28 @@
+var CancellableEvent = /** @class */ (function () {
+    function CancellableEvent(canContinue) {
+        this.canContinue = canContinue;
+        this.hasCancelled = false;
+    }
+    CancellableEvent.prototype.cancel = function () {
+        this.hasCancelled = true;
+    };
+    CancellableEvent.prototype.tryRunAction = function (action) {
+        if (this.hasCancelled) {
+            this.cancelledAction = action;
+        }
+        else {
+            action();
+        }
+    };
+    CancellableEvent.prototype.continue = function () {
+        if (this.cancelledAction === undefined) {
+            throw Error("continue() cannot be called multiple times, or if the event was not cancelled.");
+        }
+        if (this.canContinue()) {
+            this.cancelledAction();
+        }
+        this.cancelledAction = undefined;
+    };
+    return CancellableEvent;
+}());
+export { CancellableEvent };

package/dist/ReactComponents/Modal/Modal.js

@@ -85,6 +85,9 @@ var Modal = /** @class */ (function (_super) {
                     acceptButton.isSubmit = true;
                 }
             }
+            else {
+                suppressForm = true;
+            }
             if (closeButton === undefined) {
                 closeButton = {};
             }

package/dist/ReactComponents/Tabs/Tab.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { TabContext } from "./TabContainer";
+import { ICancellableEvent } from "../Misc";
 interface ITabProps {
     /** Name to show in the tab header. */
     header: string | JSX.Element;
@@ -19,6 +20,8 @@ interface ITabProps {
      * Callback to run whenever this tab is displayed.
      */
     onDisplayed?: () => void;
+    /** Callback to run when selecting a different tab. The event can be cancelled. */
+    onLeave?: (e: ICancellableEvent) => void;
 }
 export default class Tab extends React.Component<ITabProps> {
     static contextType: React.Context<import("./TabContainer").TabContextParams>;

package/dist/ReactComponents/Tabs/Tab.js

@@ -29,7 +29,7 @@ var Tab = /** @class */ (function (_super) {
         if (this.props.onDisplayed) {
             this.context.tabManager.onTabDisplayed(this.tabKey, this.props.onDisplayed);
         }
-        this.context.tabManager.tabMounted(this.tabKey);
+        this.context.tabManager.tabMounted(this.tabKey, this.props.onLeave);
     };
     Tab.prototype.render = function () {
         if (this.isHeader === undefined)

package/dist/ReactComponents/Tabs/TabManager.d.ts

@@ -1,4 +1,5 @@
 import { Model } from '@singularsystems/neo-core';
+import { ICancellableEvent } from '../Misc';
 export interface ITabManager {
     selectedTab: string;
     /**
@@ -12,7 +13,7 @@ export interface ITabManager {
 }
 export interface ITabManagerInternal extends ITabManager {
     initialise(): void;
-    tabMounted(tabKey: string): void;
+    tabMounted(tabKey: string, onLeave?: (e: ICancellableEvent) => void): void;
     destroy(): void;
 }
 /**
@@ -21,7 +22,6 @@ export interface ITabManagerInternal extends ITabManager {
  */
 export declare class TabManager<T extends string = string> {
     private autoSelectFirstTab;
-    private reactionDisposer;
     observable: Model.ObservableValue<T>;
     /**
      * Creates a tab manager used to bind to a tab container.

package/dist/ReactComponents/Tabs/TabManager.js

@@ -1,5 +1,5 @@
 import { Model } from '@singularsystems/neo-core';
-import { reaction } from 'mobx';
+import { CancellableEvent } from '../Misc';
 /**
  * Tab manager used to manage a tab component.
  * @param T string union type of tab names.
@@ -14,31 +14,27 @@ var TabManager = /** @class */ (function () {
         if (selectedTab === void 0) { selectedTab = ""; }
         if (autoSelectFirstTab === void 0) { autoSelectFirstTab = false; }
         this.autoSelectFirstTab = autoSelectFirstTab;
-        this.reactionDisposer = null;
         this.observable = new Model.ObservableValue("");
         this.tabs = {};
-        this.selectedTab = selectedTab;
+        this.observable.value = selectedTab;
         this.onTabChanged = this.onTabChanged.bind(this);
     }
     /** Called by tab container. */
     TabManager.prototype.initialise = function () {
-        var _this = this;
-        this.reactionDisposer = reaction(function () { return _this.selectedTab; }, this.onTabChanged);
         if (this.selectedTab !== "") {
             this.onTabChanged();
         }
     };
     /** Called by tab container. */
     TabManager.prototype.destroy = function () {
-        if (this.reactionDisposer) {
-            this.reactionDisposer();
-        }
     };
     Object.defineProperty(TabManager.prototype, "selectedTab", {
         get: function () {
             return this.observable.value;
         },
         set: function (value) {
+            var _this = this;
+            var _a;
             if (!this.tabs[value]) {
                 // Probably different case, find the actual tab key.
                 var foundValue = Object.keys(this.tabs).find(function (t) { return t.toLowerCase() === value.toLowerCase(); });
@@ -46,7 +42,18 @@ var TabManager = /** @class */ (function () {
                     value = foundValue;
                 }
             }
-            this.observable.value = value;
+            var currentTabKey = this.observable.peek;
+            if (value !== currentTabKey) {
+                var cancellableEvent = new CancellableEvent(function () { return currentTabKey === _this.observable.peek; });
+                var currentTab = this.tabs[currentTabKey];
+                if (((_a = currentTab) === null || _a === void 0 ? void 0 : _a.onLeave) !== undefined) {
+                    currentTab.onLeave(cancellableEvent);
+                }
+                cancellableEvent.tryRunAction(function () {
+                    _this.observable.value = value;
+                    _this.onTabChanged();
+                });
+            }
         },
         enumerable: true,
         configurable: true
@@ -67,8 +74,9 @@ var TabManager = /** @class */ (function () {
         tab.onDisplayed = callback;
         return this;
     };
-    TabManager.prototype.tabMounted = function (tabKey) {
-        void this.getTab(tabKey, true);
+    TabManager.prototype.tabMounted = function (tabKey, onLeave) {
+        var tab = this.getTab(tabKey, true);
+        tab.onLeave = onLeave;
         if (!this.selectedTab && this.autoSelectFirstTab) {
             this.selectedTab = tabKey;
         }

package/dist/ReactComponents/Tooltip.d.ts

@@ -1,6 +1,10 @@
 import { Components } from '@singularsystems/neo-core';
 import React, { HTMLProps } from 'react';
 export interface ITooltipProps extends Components.Tooltip.ITooltipOptions<string | JSX.Element> {
+    /**
+     * True if the div wrapping the content must display inline.
+     */
+    inline?: boolean;
 }
 export default class Tooltip extends React.Component<ITooltipProps> {
     private divRef;

package/dist/ReactComponents/Tooltip.js

@@ -23,7 +23,7 @@ var Tooltip = /** @class */ (function (_super) {
         TooltipHelper.hideTooltip();
     };
     Tooltip.prototype.render = function () {
-        return React.createElement("div", { ref: this.divRef, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave },
+        return React.createElement("div", { ref: this.divRef, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, style: { display: this.props.inline ? "inline-block" : "" } },
             React.createElement("div", { style: { display: "none" }, ref: this.contentRef }, this.props.content),
             this.props.children);
     };

package/dist/index.d.ts

@@ -7,3 +7,4 @@ import * as Views from './Views/';
 import * as Managers from './ReactComponents/_Managers';
 export * from './React/Decorators';
 export { Managers, NeoReactModule, NeoReactTypes, Neo, NeoGrid, Routing, Views };
+export { ICancellableEvent } from './ReactComponents/Misc';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@singularsystems/neo-react",
-  "version": "0.10.36",
+  "version": "0.10.39",
   "description": "React application logic and components for the Neo client library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -33,7 +33,7 @@
     "@types/rc-slider": "^8.6.5",
     "@types/react-color": "^3.0.1",
     "@types/react-select": "3.1.0",
-    "@singularsystems/neo-core": "^0.10.42",
+    "@singularsystems/neo-core": "^0.10.47",
     "axios": "^0.21.1",
     "decimal.js-light": "2.5.1",
     "history": "4.10.1",

package/styles/Modal.scss

@@ -14,16 +14,12 @@ body.has-modal-scroll-fix {
     .modal-container {
         position: relative;
         outline: none;
+        transition: opacity .3s linear;
      
         &.modal-container-additional {
-            transition: transform .3s ease-out, opacity .3s linear;
-            transform: translate(0, -50%);
+            transition: transform .3s ease-out, opacity .3s linear, margin .3s ease;
             opacity: 0;
-        
-            &.show {
-                transform: translate(0, 0);
-               
-            }
+
             &.show:not(.inactive) {
                 opacity: 1;
             }