@singularsystems/neo-react 1.0.4 → 1.0.6

package/dist/React/Decorators.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Makes a list observable. Use this only when the property is not part of a NeoModel. E.g. it is defined directly on a component.
+ */
+export declare function observableList(type: any, propertyKey: string): any;

package/dist/React/Decorators.js

@@ -0,0 +1,15 @@
+import { createObservableList } from './Utils';
+/**
+ * Makes a list observable. Use this only when the property is not part of a NeoModel. E.g. it is defined directly on a component.
+ */
+export function observableList(type, propertyKey) {
+    var descriptor = arguments[2];
+    var initializer = descriptor.initializer;
+    return {
+        get: function () {
+            // Convert to observable list on first read. This will overwrite this getter, and the next read will call the overwritten get method.
+            createObservableList(this, propertyKey, initializer());
+            return this[propertyKey];
+        }
+    };
+}

package/dist/React/Utils.d.ts

@@ -0,0 +1,2 @@
+import { List } from '@singularsystems/neo-core';
+export declare function createObservableList<T>(target: any, propertyKey: string, list: List<T>): void;

package/dist/React/Utils.js

@@ -0,0 +1,15 @@
+import { observable } from "mobx";
+import { List } from '@singularsystems/neo-core';
+export function createObservableList(target, propertyKey, list) {
+    if (list instanceof Array) {
+        // this overload is not part of the typescript typings. The true tells it to create the observable immediately
+        observable.shallow(target, propertyKey, { value: list }, true);
+        // add the original methods and values back to the mobx array.
+        var obsArray = target[propertyKey];
+        List.copyMethods(obsArray);
+        list.setupProxy(obsArray, target, propertyKey);
+    }
+    else {
+        throw "observableList can only be defined on arrays.";
+    }
+}

package/dist/ReactComponents/Icons/IconFactory.js

@@ -43,6 +43,7 @@ var IconFactory = /** @class */ (function () {
         if (style === null || style === void 0 ? void 0 : style.size) {
             inlineStyle = { fontSize: style.size };
         }
+        className += " neo-icon";
         return React.createElement("i", { className: className, style: inlineStyle });
     };
     IconFactory.prototype.createIconComponent = function (iconDescriptor, style) {

package/dist/ReactComponents/Icons/MaterialSymbolsFontFactory.js

@@ -27,7 +27,7 @@ var MaterialSymbolsFontFactory = /** @class */ (function (_super) {
     }
     MaterialSymbolsFontFactory.prototype.mapStringToIcon = function (iconName, style) {
         var _a;
-        var className = "material-symbols-outlined";
+        var className = "material-symbols-outlined neo-icon";
         var isFilled = (_a = style === null || style === void 0 ? void 0 : style.solid) !== null && _a !== void 0 ? _a : this.filledByDefault;
         // TODO: copy spin animation from font-awesome
         if (style === null || style === void 0 ? void 0 : style.spin) {

package/dist/ReactComponents/Notifications/Alert.d.ts

@@ -3,6 +3,7 @@ import { Components } from "@singularsystems/neo-core";
 import CollapsableBase from '../CollapsableBase';
 interface IAlertProps {
     isOutline?: boolean;
+    iconPosition?: "body" | "left";
 }
 export default class Alert extends CollapsableBase<Components.INotificationOptions & IAlertProps & React.HTMLProps<HTMLDivElement>> {
     private iconFactory;

package/dist/ReactComponents/Notifications/Alert.js

@@ -13,21 +13,36 @@ var Alert = /** @class */ (function (_super) {
         return _this;
     }
     Alert.prototype.render = function () {
-        var _a = this.props, variant = _a.variant, heading = _a.heading, show = _a.show, bindShow = _a.bindShow, autoCloseTimeout = _a.autoCloseTimeout, animateInitial = _a.animateInitial, state = _a.state, onHidden = _a.onHidden, refreshValue = _a.refreshValue, icon = _a.icon, isOutline = _a.isOutline, native = __rest(_a, ["variant", "heading", "show", "bindShow", "autoCloseTimeout", "animateInitial", "state", "onHidden", "refreshValue", "icon", "isOutline"]);
-        var className = Utils.joinWithSpaces(native.className, "alert", "alert-" + variant, "collapsable" + (isOutline ? " alert-outline" : ""));
+        var _a, _b;
+        var _c = this.props, variant = _c.variant, heading = _c.heading, show = _c.show, bindShow = _c.bindShow, autoCloseTimeout = _c.autoCloseTimeout, animateInitial = _c.animateInitial, state = _c.state, onHidden = _c.onHidden, refreshValue = _c.refreshValue, icon = _c.icon, native = __rest(_c, ["variant", "heading", "show", "bindShow", "autoCloseTimeout", "animateInitial", "state", "onHidden", "refreshValue", "icon"]);
+        var isOutline = (_a = this.props.isOutline) !== null && _a !== void 0 ? _a : Misc.Settings.alerts.isOutline;
+        var iconPosition = (_b = this.props.iconPosition) !== null && _b !== void 0 ? _b : Misc.Settings.alerts.iconPosition;
+        var className = Utils.joinWithSpaces(native.className, "alert", "alert-" + variant, "collapsable" + (isOutline ? " alert-outline" : "") + (iconPosition === "left" ? " alert-left-icon" : ""));
         if (bindShow) {
             className += " alert-dismissible";
         }
+        if (heading) {
+            className += " with-heading";
+        }
         this.shouldShow = show !== false && (!bindShow || bindShow.value);
         return (React.createElement("div", __assign({}, native, { className: className, ref: this.containerRef }),
-            heading &&
-                React.createElement("h6", null, heading),
-            icon &&
-                React.createElement("div", { className: "notification-icon-container" },
-                    this.iconFactory.getIconComponent(icon),
-                    React.createElement("div", null, this.props.children)),
-            !icon && this.props.children,
-            bindShow && BootstrapUtils.getCloseButton(this.onClose)));
+            bindShow && BootstrapUtils.getCloseButton(this.onClose),
+            iconPosition === "body" &&
+                React.createElement(React.Fragment, null,
+                    heading &&
+                        React.createElement("h6", null, heading),
+                    icon &&
+                        React.createElement("div", { className: "notification-icon-container" },
+                            this.iconFactory.getIconComponent(icon),
+                            React.createElement("div", null, this.props.children)),
+                    !icon && this.props.children),
+            iconPosition === "left" &&
+                React.createElement("div", null,
+                    icon &&
+                        React.createElement("div", { className: "notification-icon-container" }, this.iconFactory.getIconComponent(icon)),
+                    React.createElement("div", null,
+                        heading && React.createElement("h6", null, heading),
+                        React.createElement("div", { className: "alert-body" }, this.props.children)))));
     };
     Alert = __decorate([
         observer

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@singularsystems/neo-react",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "React application logic and components for the Neo client library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -31,7 +31,7 @@
     "typescript": "5.4.2"
   },
   "dependencies": {
-    "@singularsystems/neo-core": "1.0.2",
+    "@singularsystems/neo-core": "1.0.3",
     "@types/rc-slider": "^8.6.5",
     "@types/react-color": "^3.0.1",
     "axios": "1.6.7",

package/styles/Misc.scss

@@ -141,4 +141,17 @@ div.tabs-header {
 .neo-file-progress-container {
     font-size: 0.9rem;
     margin-top: 0.5rem;
+}
+
+.alert.alert-left-icon {
+    >div {
+        display: flex;
+        align-items: flex-start;
+    }
+
+    .notification-icon-container {
+        position: relative;
+        left: -0.5rem;
+        font-size: 1.5rem;
+    }
 }