@singularsystems/neo-react 1.0.19 → 1.0.21

package/dist/ReactComponents/Badge.js

@@ -2,17 +2,19 @@ import { __assign, __decorate, __extends, __metadata, __rest } from "tslib";
 import React from 'react';
 import { observer } from 'mobx-react';
 import { Utils } from '@singularsystems/neo-core';
+import BootstrapUtils from "./BootstrapUtils";
 var Badge = /** @class */ (function (_super) {
     __extends(Badge, _super);
     function Badge(props) {
         return _super.call(this, props) || this;
     }
     Badge.prototype.render = function () {
-        var _a;
-        var _b = this.props, text = _b.text, variant = _b.variant, customVariant = _b.customVariant, isLarge = _b.isLarge, isPill = _b.isPill, children = _b.children, domProps = __rest(_b, ["text", "variant", "customVariant", "isLarge", "isPill", "children"]);
-        var variantClassName = "badge badge-".concat(((_a = customVariant !== null && customVariant !== void 0 ? customVariant : variant) !== null && _a !== void 0 ? _a : "primary"));
+        var _a, _b;
+        var _c = this.props, text = _c.text, variant = _c.variant, customVariant = _c.customVariant, isLarge = _c.isLarge, isPill = _c.isPill, children = _c.children, domProps = __rest(_c, ["text", "variant", "customVariant", "isLarge", "isPill", "children"]);
+        var isBsPre5 = BootstrapUtils.isPre5;
+        var variantClassName = isBsPre5 ? "badge badge-".concat(((_a = customVariant !== null && customVariant !== void 0 ? customVariant : variant) !== null && _a !== void 0 ? _a : "primary")) : "badge bg-".concat(((_b = customVariant !== null && customVariant !== void 0 ? customVariant : variant) !== null && _b !== void 0 ? _b : "primary"));
         var largeBadgeClassName = isLarge ? "badge-lg" : "";
-        var pillClassName = isPill ? "badge-pill" : "";
+        var pillClassName = isPill ? (isBsPre5 ? "badge-pill" : "rounded-pill") : "";
         domProps.className = Utils.joinWithSpaces(domProps.className, variantClassName, pillClassName, largeBadgeClassName);
         return (React.createElement("div", __assign({}, domProps), children !== null && children !== void 0 ? children : text));
     };

package/dist/ReactComponents/Card.d.ts

@@ -15,6 +15,8 @@ interface ICardProps {
     initiallyCollapsed?: boolean;
     /** Allows the collapse state to be set externally. Sets the collapsible prop to true. */
     isExpanded?: Model.IObservableValue<boolean>;
+    /** Indicates whether the icon should be on the right of the header (default), or left of the icon/title. */
+    expandIconPosition?: "none" | "left" | "right";
 }
 export default class Card extends React.Component<ICardProps & React.HTMLProps<HTMLDivElement>> {
     private iconFactory;

package/dist/ReactComponents/Card.js

@@ -5,6 +5,7 @@ import { observer } from 'mobx-react';
 import Scrollbar from 'react-custom-scrollbars';
 import Collapsable from './Collapsable';
 import { NeoReactTypes } from '../Modules/Types';
+import { Icon } from "./_Exports";
 var Card = /** @class */ (function (_super) {
     __extends(Card, _super);
     function Card() {
@@ -14,19 +15,24 @@ var Card = /** @class */ (function (_super) {
         return _this;
     }
     Card.prototype.render = function () {
-        var _a = this.props, icon = _a.icon, title = _a.title, children = _a.children, headerElements = _a.headerElements, useCustomScrollbar = _a.useCustomScrollbar, collapsible = _a.collapsible, initiallyCollapsed = _a.initiallyCollapsed, isExpanded = _a.isExpanded, domProps = __rest(_a, ["icon", "title", "children", "headerElements", "useCustomScrollbar", "collapsible", "initiallyCollapsed", "isExpanded"]);
+        var _a = this.props, icon = _a.icon, title = _a.title, children = _a.children, headerElements = _a.headerElements, useCustomScrollbar = _a.useCustomScrollbar, collapsible = _a.collapsible, initiallyCollapsed = _a.initiallyCollapsed, isExpanded = _a.isExpanded, expandIconPosition = _a.expandIconPosition, domProps = __rest(_a, ["icon", "title", "children", "headerElements", "useCustomScrollbar", "collapsible", "initiallyCollapsed", "isExpanded", "expandIconPosition"]);
         var className = Utils.joinWithSpaces("neo-card card", domProps.className);
+        expandIconPosition !== null && expandIconPosition !== void 0 ? expandIconPosition : (expandIconPosition = "right");
         var isCollapsible = collapsible || isExpanded !== undefined || initiallyCollapsed !== undefined;
         var expandState = isExpanded !== null && isExpanded !== void 0 ? isExpanded : this.expandState;
+        var expandIndicator = undefined;
         if (isCollapsible) {
-            var expandIndicator = React.createElement("i", { onClick: function (e) { return expandState.value = !expandState.value; }, className: "card-expand-indicator fa fa-fw fa-angle-".concat(expandState.value ? "up" : "down") });
-            if (headerElements) {
-                headerElements = React.createElement(React.Fragment, null,
-                    headerElements,
-                    expandIndicator);
-            }
-            else {
-                headerElements = expandIndicator;
+            expandIndicator = React.createElement("span", { className: "card-expand-indicator", onClick: function (e) { expandState.value = !expandState.value; e.stopPropagation(); } },
+                React.createElement(Icon, { fixedWidth: true, name: "fa-angle-".concat(expandState.value ? "up" : "down") }));
+            if (expandIconPosition === "right") {
+                if (headerElements) {
+                    headerElements = React.createElement(React.Fragment, null,
+                        headerElements,
+                        expandIndicator);
+                }
+                else {
+                    headerElements = expandIndicator;
+                }
             }
             if (!expandState.value) {
                 className += " collapsed";
@@ -44,6 +50,7 @@ var Card = /** @class */ (function (_super) {
             (icon || title) &&
                 React.createElement("div", { className: "card-header", onClick: function (e) { return expandState.value = !expandState.value; } },
                     React.createElement("div", { className: "card-header-title" },
+                        expandIconPosition === "left" && expandIndicator,
                         this.iconFactory.getIconComponent(icon),
                         React.createElement("span", null, title)),
                     headerElements && React.createElement("div", { className: "card-header-right-section", onClick: function (e) { return e.stopPropagation(); } }, headerElements)),

package/dist/ReactComponents/DropDown/AutoCompleteDropDown.js

@@ -72,7 +72,11 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
         if (items.length) {
             this.findMembers(items[0]);
         }
-        return items.map(function (item) { return (__assign(__assign({}, item), { item: item, value: item[_this.valueMember], label: item[_this.displayMember] })); });
+        return items.map(function (item) { return ({
+            item: item,
+            value: item[_this.valueMember],
+            label: item[_this.displayMember]
+        }); });
     };
     AutoCompleteDropDown.prototype.onItemSelected = function (args, action) {
         var _a;
@@ -205,7 +209,7 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
                 React.createElement("div", { className: "react-select-description" }, item[descriptionMember])); }, "with-description");
         }
         if (nativeProps.isClearable === undefined) {
-            nativeProps.isClearable = true;
+            nativeProps.isClearable = !bindValue || bindValue.propertyInfo.allowNulls;
         }
         if (BindPropsHelper.isReadOnly(splitProps.editor, this.context) || BindPropsHelper.isDisabled(splitProps.editor, this.context)) {
             nativeProps.isDisabled = true;

package/dist/ReactComponents/Icons/MaterialSymbolsFontFactory.js

@@ -81,6 +81,8 @@ var neoFontAwesomeMappings = [
     ["minus-square", "indeterminate_check_box"],
     ["arrow-left", "arrow_back"],
     ["angle-left", "chevron_left"],
+    ["angle-up", "keyboard_arrow_up"],
+    ["angle-down", "keyboard_arrow_down"],
     ["caret-left", "arrow_left"],
     ["trash", "delete"],
     ["user", "person"],

package/dist/ReactComponents/InputHelpers.js

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { Misc } from '@singularsystems/neo-core';
 import { NeoReactTypes } from '../Modules/Types';
-import BootstrapUtils from "./BootstrapUtils";
 var InputHelpers = /** @class */ (function () {
     function InputHelpers() {
     }
@@ -10,26 +9,24 @@ var InputHelpers = /** @class */ (function () {
             this.iconFactory = Misc.Globals.appService.get(NeoReactTypes.Components.IconFactory);
         }
         if (props.requiresGroup) {
-            var isBsPre5 = BootstrapUtils.isPre5, isDisabled = domProps.disabled || domProps.readOnly;
+            var isDisabled = domProps.disabled || domProps.readOnly;
             return (React.createElement("div", { className: "input-group" + (isDisabled ? " input-group-disabled" : "") },
-                this.getElement(isBsPre5, "input-group-prepend", inputRef, props.prependText, props.prependIcon, props.prepend),
+                this.getElement("input-group-prepend", inputRef, props.prependText, props.prependIcon, props.prepend),
                 element,
-                this.getElement(isBsPre5, "input-group-append", inputRef, props.appendText, props.appendIcon, props.append)));
+                this.getElement("input-group-append", inputRef, props.appendText, props.appendIcon, props.append)));
         }
         else {
             return element;
         }
     };
-    InputHelpers.getElement = function (isBsPre5, className, inputRef, text, icon, element) {
+    InputHelpers.getElement = function (className, inputRef, text, icon, element) {
         if (!text && !icon && !element) {
             return undefined;
         }
         var innerElement = element ?
             (element instanceof Function ? element() : element) :
             React.createElement("span", { className: "input-group-text", onClick: function () { var _a; return (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } }, text ? this.iconFactory.textOrIcon(text) : this.iconFactory.getIconComponent(icon));
-        return isBsPre5 ?
-            React.createElement("div", { className: className }, innerElement) :
-            innerElement;
+        return React.createElement("div", { className: className }, innerElement);
     };
     return InputHelpers;
 }());

package/dist/Views/ViewBase.d.ts

@@ -25,6 +25,8 @@ export default abstract class ViewBase<TViewModel extends IViewModel = EmptyView
     viewName: string;
     /** Indicates that the view requests to be displayed full screen. Up to the main layout to accommodate this. */
     fullScreen: boolean;
+    /** Indicates that the VM has initialised, and viewParamsUpdated() has been called. */
+    hasInitialised: boolean;
     static get currentView(): IViewBase | null;
     private routingState;
     navigation: import("../Routing").INavigationHelper;
@@ -42,7 +44,7 @@ export default abstract class ViewBase<TViewModel extends IViewModel = EmptyView
     get viewParams(): IViewParameterListOfT<TParams> & TransformParamsType<TParams>;
     protected getStoredViewState(viewModel: valueOrLazy<TViewModel>): ViewState<TViewModel, TParams>;
     protected createViewState(viewModel: valueOrLazy<TViewModel>): ViewState<TViewModel, TParams>;
-    componentDidMount(): void;
+    componentDidMount(): Promise<void>;
     componentWillUnmount(): void;
     updateViewParams(match: match): void;
     /**

package/dist/Views/ViewBase.js

@@ -20,6 +20,8 @@ var ViewBase = /** @class */ (function (_super) {
         _this.viewName = "";
         /** Indicates that the view requests to be displayed full screen. Up to the main layout to accommodate this. */
         _this.fullScreen = false;
+        /** Indicates that the VM has initialised, and viewParamsUpdated() has been called. */
+        _this.hasInitialised = false;
         _this.routingState = Misc.Globals.appService.get(NeoReactTypes.Routing.GlobalRoutingState);
         _this.navigation = Misc.Globals.appService.get(NeoReactTypes.Routing.NavigationHelper);
         if (typeof viewName !== "string") {
@@ -70,21 +72,30 @@ var ViewBase = /** @class */ (function (_super) {
         return new ViewState(paramsList, viewModelInstance);
     };
     ViewBase.prototype.componentDidMount = function () {
-        var _this = this;
-        var paramsUpdated = this.navigation.currentRouteProps ? this.viewState.viewParams.update(this.navigation.currentRouteProps.match) : false;
-        var initPromise = undefined;
-        if (!this.viewState.hasSetup) {
-            this.viewState.hasSetup = true;
-            initPromise = this.initialise();
-        }
-        if (paramsUpdated) {
-            if (initPromise) {
-                initPromise.then(function () { return _this.viewParamsUpdated(); });
-            }
-            else {
-                this.viewParamsUpdated();
-            }
-        }
+        return __awaiter(this, void 0, void 0, function () {
+            var paramsUpdated;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        paramsUpdated = this.navigation.currentRouteProps ? this.viewState.viewParams.update(this.navigation.currentRouteProps.match) : false;
+                        if (!!this.viewState.hasSetup) return [3 /*break*/, 2];
+                        this.viewState.hasSetup = true;
+                        return [4 /*yield*/, this.initialise()];
+                    case 1:
+                        _a.sent();
+                        _a.label = 2;
+                    case 2:
+                        if (!paramsUpdated) return [3 /*break*/, 4];
+                        return [4 /*yield*/, this.viewParamsUpdated()];
+                    case 3:
+                        _a.sent();
+                        _a.label = 4;
+                    case 4:
+                        this.hasInitialised = true;
+                        return [2 /*return*/];
+                }
+            });
+        });
     };
     ViewBase.prototype.componentWillUnmount = function () {
         this.disposeViewModel();
@@ -168,6 +179,10 @@ var ViewBase = /** @class */ (function (_super) {
         observable.ref,
         __metadata("design:type", Boolean)
     ], ViewBase.prototype, "fullScreen", void 0);
+    __decorate([
+        observable.ref,
+        __metadata("design:type", Boolean)
+    ], ViewBase.prototype, "hasInitialised", void 0);
     return ViewBase;
 }(React.Component));
 export default ViewBase;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@singularsystems/neo-react",
-  "version": "1.0.19",
+  "version": "1.0.21",
   "description": "React application logic and components for the Neo client library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -34,7 +34,7 @@
     "@singularsystems/neo-core": "1.0.14",
     "@types/rc-slider": "^8.6.5",
     "@types/react-color": "^3.0.1",
-    "axios": "1.7.4",
+    "axios": "1.7.5",
     "history": "4.10.1",
     "inversify": "^6.0.2",
     "memoize-one": "6.0.0",

package/styles/Card.scss

@@ -4,8 +4,8 @@
         justify-content: space-between;
         align-items: center;
 
-        .card-header-title i {
-            margin-right: 10px;
+        .card-header-title .neo-icon {
+            margin-right: 0.5rem;
         }
 
         .card-header-right-section {
@@ -15,8 +15,6 @@
 
             .card-expand-indicator {
                 margin-left: 0.5rem;
-                padding-top: 0.5rem;
-                padding-bottom: 0.5rem;
             }
         }
     }