@singularsystems/neo-react 1.0.3 → 1.0.5

package/dist/ReactComponents/DropDown/AutoCompleteDropDown.d.ts

@@ -90,6 +90,7 @@ export default class AutoCompleteDropDown<T> extends DropDownBase<T, IAutoComple
     private bindIdsProperty?;
     static getBindProp<T>(props: IAutoCompleteProps | IAutoCompleteMultiSelectProps): Model.IPropertyInstance<any>;
     private onKeyPress;
+    private setBindProperty;
     private mapTArrayToOptions;
     private onItemSelected;
     render(): React.JSX.Element;

package/dist/ReactComponents/DropDown/AutoCompleteDropDown.js

@@ -11,29 +11,11 @@ import { NeoReactTypes } from '../../Modules/Types';
 var AutoCompleteDropDown = /** @class */ (function (_super) {
     __extends(AutoCompleteDropDown, _super);
     function AutoCompleteDropDown(props) {
-        var _a;
         var _this = _super.call(this, props) || this;
         _this.asyncSelectImplementation = Misc.Globals.appService.get(NeoReactTypes.Components.AsyncSelect);
         _this.selectImplementation = Misc.Globals.appService.get(NeoReactTypes.Components.ReactSelect);
         _this.onKeyPress = _this.onKeyPress.bind(_this);
         _this.onItemSelected = _this.onItemSelected.bind(_this);
-        var singleProps = _this.props, multiProps = _this.props;
-        _this.bindProperty = (_a = singleProps.bind) !== null && _a !== void 0 ? _a : multiProps.bindItems;
-        _this.fieldInfoContainer = Model.ModelFieldInfo.asModelFieldInfoContainer(_this.bindProperty.attachedTo);
-        if (multiProps.bindIds) {
-            if (multiProps.bindIds.propertyInfo) {
-                var bindIdsProperty = multiProps.bindIds;
-                _this.bindIdsProperty = bindIdsProperty;
-                _this.bindIdsList = bindIdsProperty.value;
-            }
-            else {
-                _this.bindIdsList = multiProps.bindIds;
-                if (_this.fieldInfoContainer) {
-                    console.error("Warning: Pass a property instance as 'bindIds', otherwise the display values will not be captured.");
-                    _this.fieldInfoContainer = null;
-                }
-            }
-        }
         return _this;
     }
     AutoCompleteDropDown.getBindProp = function (props) {
@@ -62,6 +44,29 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
             Utils.clearDebounce(this);
         }
     };
+    AutoCompleteDropDown.prototype.setBindProperty = function () {
+        var _a;
+        var singleProps = this.props, multiProps = this.props;
+        var newBind = (_a = singleProps.bind) !== null && _a !== void 0 ? _a : multiProps.bindItems;
+        if (this.bindProperty !== newBind) {
+            this.bindProperty = newBind;
+            this.fieldInfoContainer = Model.ModelFieldInfo.asModelFieldInfoContainer(this.bindProperty.attachedTo);
+            if (multiProps.bindIds) {
+                if (multiProps.bindIds.propertyInfo) {
+                    var bindIdsProperty = multiProps.bindIds;
+                    this.bindIdsProperty = bindIdsProperty;
+                    this.bindIdsList = bindIdsProperty.value;
+                }
+                else {
+                    this.bindIdsList = multiProps.bindIds;
+                    if (this.fieldInfoContainer) {
+                        console.error("Warning: Pass a property instance as 'bindIds', otherwise the display values will not be captured.");
+                        this.fieldInfoContainer = null;
+                    }
+                }
+            }
+        }
+    };
     AutoCompleteDropDown.prototype.mapTArrayToOptions = function (items) {
         var _this = this;
         if (items.length) {
@@ -124,6 +129,7 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
         var _this = this;
         var _a, _b, _c, _d, _e, _f, _g, _h;
         var _j = this.props, bind = _j.bind, bindDisplay = _j.bindDisplay, bindItems = _j.bindItems, bindIds = _j.bindIds, itemSource = _j.itemSource, items = _j.items, displayMember = _j.displayMember, valueMember = _j.valueMember, descriptionMember = _j.descriptionMember, option = _j.option, noRecordsPrompt = _j.noRecordsPrompt, typeToSearchPrompt = _j.typeToSearchPrompt, delayMs = _j.delayMs, minCharacters = _j.minCharacters, onItemSelected = _j.onItemSelected, fieldInfoLimit = _j.fieldInfoLimit, otherProps = __rest(_j, ["bind", "bindDisplay", "bindItems", "bindIds", "itemSource", "items", "displayMember", "valueMember", "descriptionMember", "option", "noRecordsPrompt", "typeToSearchPrompt", "delayMs", "minCharacters", "onItemSelected", "fieldInfoLimit"]);
+        this.setBindProperty();
         var splitProps = BindPropsHelper.splitCommonEditorProps(otherProps);
         var nativeProps = splitProps.rest;
         var bindItemsProperty = bindItems;

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.3",
+  "version": "1.0.5",
   "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.4",
     "@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;
+    }
 }