@singularsystems/neo-react 1.1.2 → 1.1.3

package/dist/ReactComponents/FileManager/FileInput.d.ts

@@ -13,6 +13,7 @@ export interface IFileEditorProps extends IFileComponentProps, Partial<Component
     downloadLinkText?: string;
     /**
      * Path of API endpoint which will handle downloading a file. Only required if downloadLinkText is specified.
+     * Use `downloadEndpointAsync` when asynchronously returning a download link with sas token.
      */
     downloadEndpoint?: string | ((fileID: any) => string);
     /**

package/dist/ReactComponents/Transitions/Transition.d.ts

@@ -2,7 +2,11 @@ export declare class Transition {
     setBeforeStyles: (element: HTMLElement, out: boolean, toLeft: boolean) => void;
     setAfterStyles: (element: HTMLElement, out: boolean, toLeft: boolean) => void;
     cleanup: (element: HTMLElement) => void;
-    constructor(setBeforeStyles: (element: HTMLElement, out: boolean, toLeft: boolean) => void, setAfterStyles: (element: HTMLElement, out: boolean, toLeft: boolean) => void, cleanup: (element: HTMLElement) => void);
+    /** Set to true if the animation causes the elements height to change. E.g. zoom type transitions */
+    changesHeight: boolean;
+    constructor(setBeforeStyles: (element: HTMLElement, out: boolean, toLeft: boolean) => void, setAfterStyles: (element: HTMLElement, out: boolean, toLeft: boolean) => void, cleanup: (element: HTMLElement) => void, 
+    /** Set to true if the animation causes the elements height to change. E.g. zoom type transitions */
+    changesHeight?: boolean);
     static leftRight: Transition;
     static upDown: Transition;
     static inOut: Transition;

package/dist/ReactComponents/Transitions/Transition.js

@@ -1,12 +1,16 @@
 var Transition = /** @class */ (function () {
-    function Transition(setBeforeStyles, setAfterStyles, cleanup) {
+    function Transition(setBeforeStyles, setAfterStyles, cleanup, 
+    /** Set to true if the animation causes the elements height to change. E.g. zoom type transitions */
+    changesHeight) {
+        if (changesHeight === void 0) { changesHeight = false; }
         this.setBeforeStyles = setBeforeStyles;
         this.setAfterStyles = setAfterStyles;
         this.cleanup = cleanup;
+        this.changesHeight = changesHeight;
     }
     Transition.leftRight = new Transition(function (element, out, toLeft) { return element.style.left = ((toLeft ? 1 : -1) * (out ? 0 : 150)) + "px"; }, function (element, out, toLeft) { return element.style.left = ((toLeft ? -1 : 1) * (out ? 150 : 0)) + "px"; }, function (element) { return element.style.left = ""; });
     Transition.upDown = new Transition(function (element, out, toLeft) { return element.style.top = ((toLeft ? 1 : -1) * (out ? 0 : 100)) + "px"; }, function (element, out, toLeft) { return element.style.top = ((toLeft ? -1 : 1) * (out ? 100 : 0)) + "px"; }, function (element) { return element.style.top = ""; });
-    Transition.inOut = new Transition(function (element, out, toLeft) { return element.style.transform = out ? "scale(1)" : (toLeft ? "scale(0.8)" : "scale(1.2)"); }, function (element, out, toLeft) { return element.style.transform = out ? (toLeft ? "scale(1.2)" : "scale(0.8)") : "scale(1)"; }, function (element) { return element.style.transform = ""; });
+    Transition.inOut = new Transition(function (element, out, toLeft) { return element.style.transform = out ? "scale(1)" : (toLeft ? "scale(0.8)" : "scale(1.2)"); }, function (element, out, toLeft) { return element.style.transform = out ? (toLeft ? "scale(1.2)" : "scale(0.8)") : "scale(1)"; }, function (element) { return element.style.transform = ""; }, true);
     Transition.fadeOnly = new Transition(function () { }, function () { }, function () { });
     return Transition;
 }());

package/dist/ReactComponents/Transitions/TransitionContainer.d.ts

@@ -8,6 +8,8 @@ export declare const TransitionContext: React.Context<ITransitionContextState>;
 interface ITransitionContainerProps {
     controller?: TransitionController;
     transition?: Transition;
+    /** Transition to use when going backwards. */
+    backTransition?: Transition;
     children: React.ReactNode;
 }
 export default class TransitionContainer extends React.Component<ITransitionContainerProps> {

package/dist/ReactComponents/Transitions/TransitionContainer.js

@@ -8,11 +8,17 @@ var TransitionContainer = /** @class */ (function (_super) {
         var _this = _super.call(this, props) || this;
         _this.containerRef = React.createRef();
         if (!_this.props.controller) {
-            _this.controller = new TransitionController(undefined, _this.props.transition);
+            _this.controller = new TransitionController(undefined, _this.props.transition, _this.props.backTransition);
             _this.controller.wasAutoCreated = true;
         }
         else {
             _this.controller = _this.props.controller;
+            if (_this.props.transition) {
+                _this.controller.defaultTransition = _this.props.transition;
+            }
+            if (_this.props.backTransition) {
+                _this.controller.defaultBackTransition = _this.props.backTransition;
+            }
         }
         _this.contextState = { controller: _this.controller };
         return _this;

package/dist/ReactComponents/Transitions/TransitionController.d.ts

@@ -2,14 +2,18 @@ import { Transition } from "./Transition";
 export declare class TransitionController {
     /** Global default transition. */
     static transition: Transition;
+    /** Allows transitions to be disabled for the whole app. */
+    static disableTransitions: boolean;
     /**
      * Creates a transition controller.
      * @param initialName Name of the panel to display initially. Not required if `isVisible` props are defined on the panels.
      * @param transition Transition type to use by default on all panels.
+     * @param backTransition Transition type to use when going backwards.
      */
-    constructor(initialName?: string, transition?: Transition);
+    constructor(initialName?: string, transition?: Transition, backTransition?: Transition);
     private _selectedName;
-    private defaultTransition;
+    defaultTransition: Transition;
+    defaultBackTransition: Transition;
     private direction;
     private isFirstTransition;
     private isTransitioning;

package/dist/ReactComponents/Transitions/TransitionController.js

@@ -7,8 +7,9 @@ var TransitionController = /** @class */ (function () {
      * Creates a transition controller.
      * @param initialName Name of the panel to display initially. Not required if `isVisible` props are defined on the panels.
      * @param transition Transition type to use by default on all panels.
+     * @param backTransition Transition type to use when going backwards.
      */
-    function TransitionController(initialName, transition) {
+    function TransitionController(initialName, transition, backTransition) {
         this._selectedName = "";
         this.direction = 1;
         this.isFirstTransition = true;
@@ -22,6 +23,7 @@ var TransitionController = /** @class */ (function () {
         this._selectedName = initialName !== null && initialName !== void 0 ? initialName : "";
         makeObservable(this);
         this.defaultTransition = transition !== null && transition !== void 0 ? transition : TransitionController.transition;
+        this.defaultBackTransition = backTransition !== null && backTransition !== void 0 ? backTransition : this.defaultTransition;
     }
     Object.defineProperty(TransitionController.prototype, "selectedPanel", {
         /**
@@ -92,7 +94,7 @@ var TransitionController = /** @class */ (function () {
      * @internal
      * Called by each panel after render.
      */
-    TransitionController.prototype.afterUpdate = function (name, element, transition) {
+    TransitionController.prototype.afterUpdate = function (name, element, transition, animateHeight) {
         if (this._selectedName === name && !this.isTransitioning) {
             var panelState_1 = this.panelStates.find(function (c) { return c.name === name; });
             var transitionIn = false;
@@ -107,7 +109,7 @@ var TransitionController = /** @class */ (function () {
                 transitionIn = true;
             }
             if (transitionIn && !this.isFirstTransition) {
-                panelState_1.inTimer = this.transitionElement(panelState_1.element, panelState_1.transition, this.direction > 0, false, function () {
+                panelState_1.inTimer = this.transitionElement(panelState_1.element, panelState_1.transition, this.direction > 0, false, animateHeight !== null && animateHeight !== void 0 ? animateHeight : true, function () {
                     panelState_1.inTimer = undefined;
                 });
             }
@@ -165,7 +167,7 @@ var TransitionController = /** @class */ (function () {
                 panelState.inTimer = undefined;
             }
             if (!panelState.outTimer) {
-                panelState.outTimer = this_1.transitionElement(panelState.element, panelState.transition, this_1.direction > 0, true, function () {
+                panelState.outTimer = this_1.transitionElement(panelState.element, panelState.transition, this_1.direction > 0, true, true, function () {
                     _this.panelStates.remove(panelState);
                 });
             }
@@ -176,28 +178,32 @@ var TransitionController = /** @class */ (function () {
             _loop_1(panelState);
         }
     };
-    TransitionController.prototype.transitionElement = function (element, transition, toLeft, out, onComplete) {
+    TransitionController.prototype.transitionElement = function (element, transition, toLeft, out, animateHeight, onComplete) {
         var _this = this;
-        transition !== null && transition !== void 0 ? transition : (transition = this.defaultTransition);
-        element.style.overflow = "hidden";
-        var elementHeight = element.getBoundingClientRect().height;
-        if (this.containerElement && !this.containerElement.classList.contains("transitioning")) {
-            this.containerElement.style.height = elementHeight + "px";
-            this.containerElement.classList.add("transitioning");
-        }
-        element.style.opacity = out ? "1" : "0";
-        transition.setBeforeStyles(element, out, toLeft);
-        Components.AnimationHelper.triggerReflow(element);
-        element.classList.add("animate-".concat(out ? "out" : "in"));
-        Components.AnimationHelper.triggerReflow(element);
-        if (!out && this.containerElement) {
-            Components.AnimationHelper.triggerReflow(this.containerElement);
-            this.containerElement.style.height = elementHeight + "px";
+        var canAnimate = !TransitionController.disableTransitions;
+        transition !== null && transition !== void 0 ? transition : (transition = toLeft ? this.defaultTransition : this.defaultBackTransition);
+        if (canAnimate) {
+            element.style.overflow = "hidden";
+            var elementHeight_1 = element.getBoundingClientRect().height;
+            if (this.containerElement && !this.containerElement.classList.contains("transitioning")) {
+                this.containerElement.style.height = elementHeight_1 + "px";
+                this.containerElement.classList.add("transitioning");
+            }
+            element.style.opacity = out ? "1" : "0";
+            transition.setBeforeStyles(element, out, toLeft);
+            Components.AnimationHelper.triggerReflow(element);
+            element.classList.add("animate-".concat(out ? "out" : "in"));
+            Components.AnimationHelper.triggerReflow(element);
+            element.style.opacity = out ? "0" : "1";
+            transition.setAfterStyles(element, out, toLeft);
+            // Timeout needed to give time for child elements to render, in order to correctly calculate height.
+            setTimeout(function () {
+                if (!out && _this.containerElement) {
+                    _this.containerElement.style.height = animateHeight ? (transition.changesHeight ? elementHeight_1 : element.getBoundingClientRect().height) + "px" : "";
+                }
+            }, 0);
         }
-        element.style.opacity = out ? "0" : "1";
-        transition.setAfterStyles(element, out, toLeft);
-        var duration = parseFloat(window.getComputedStyle(element).transitionDuration) * 1000;
-        return setTimeout(function () {
+        var cleanup = function () {
             if (out) {
                 // Element will be removed from the dom, no need to cleanup props.
             }
@@ -214,10 +220,20 @@ var TransitionController = /** @class */ (function () {
                     _this.containerElement.style.height = "";
                 }
             }
-        }, duration);
+        };
+        if (canAnimate) {
+            var transitionDuration = parseFloat(window.getComputedStyle(element).transitionDuration) * 1000;
+            return setTimeout(cleanup, transitionDuration);
+        }
+        else {
+            cleanup();
+            return null;
+        }
     };
     /** Global default transition. */
     TransitionController.transition = Transition.leftRight;
+    /** Allows transitions to be disabled for the whole app. */
+    TransitionController.disableTransitions = false;
     __decorate([
         observable.ref,
         __metadata("design:type", String)

package/dist/ReactComponents/Transitions/TransitionPanel.d.ts

@@ -19,6 +19,10 @@ interface ITransitionPanelProps<T> {
     isVisible?: boolean | T | null;
     /** Override the transition for this panel only. */
     transition?: Transition;
+    /** Indicates whether the container height is set during a transition. Transitions going from small height to a very large height may look better without height animation.
+     * `True` by default.
+     */
+    animateHeight?: boolean;
 }
 export default class TransitionPanel<T = any> extends React.Component<ITransitionPanelProps<T>> {
     static contextType: React.Context<import("./TransitionContainer").ITransitionContextState>;

package/dist/ReactComponents/Transitions/TransitionPanel.js

@@ -26,7 +26,7 @@ var TransitionPanel = /** @class */ (function (_super) {
             this.context.controller.transition(this.name);
         }
         if (this.panelRef.current) {
-            this.context.controller.afterUpdate(this.name, this.panelRef.current, this.props.transition);
+            this.context.controller.afterUpdate(this.name, this.panelRef.current, this.props.transition, this.props.animateHeight);
         }
     };
     TransitionPanel.prototype.componentWillUnmount = function () {
@@ -40,7 +40,7 @@ var TransitionPanel = /** @class */ (function (_super) {
         configurable: true
     });
     TransitionPanel.prototype.render = function () {
-        var _a = this.props, name = _a.name, data = _a.data, isVisible = _a.isVisible, children = _a.children;
+        var _a = this.props, name = _a.name, data = _a.data, isVisible = _a.isVisible, animateHeight = _a.animateHeight, children = _a.children;
         if (data) {
             this.currentData = data;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@singularsystems/neo-react",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "React application logic and components for the Neo client library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -29,7 +29,7 @@
     "typescript": "5.5.2"
   },
   "dependencies": {
-    "@singularsystems/neo-core": "1.1.0",
+    "@singularsystems/neo-core": "1.1.1",
     "@types/rc-slider": "^8.6.5",
     "@types/react-color": "^3.0.1",
     "axios": "1.7.7",
@@ -44,7 +44,7 @@
     "tslib": "2.7.0"
   },
   "peerDependencies": {
-    "@singularsystems/neo-core": ">=1.1.0",
+    "@singularsystems/neo-core": ">=1.1.1",
     "axios": ">=1.6.2",
     "inversify": ">=5.0.1",
     "mobx": ">=6.9.0",