@singularsystems/neo-react 1.0.0-alpha.1 → 1.0.0-alpha.2

package/dist/Declarations.d.ts

@@ -0,0 +1,3 @@
+declare namespace React {
+    type StatelessComponent<P> = React.FunctionComponent<P>;
+}

package/dist/Modules/ReactSetup.js

@@ -1,22 +1,10 @@
 import { AppServices, Utils } from '@singularsystems/neo-core';
-import { runInAction } from 'mobx';
+import { configure, runInAction, untracked } from 'mobx';
 import ViewBase from '../Views/ViewBase';
 import React from 'react';
 export function runReactSetup(container) {
     Utils.peek = function (target, propertyName) {
-        var mobXData = target.$mobx;
-        if (mobXData) {
-            var mobXVar = mobXData.values[propertyName];
-            if (mobXVar) {
-                return mobXVar.value;
-            }
-            else {
-                throw Error("Cannot peek property " + propertyName.toString());
-            }
-        }
-        else {
-            return target[propertyName];
-        }
+        return untracked(function () { return target[propertyName]; });
     };
     Utils.suppressHtmlEncode = function (html) {
         return React.createElement("div", { dangerouslySetInnerHTML: { __html: html } });
@@ -25,4 +13,5 @@ export function runReactSetup(container) {
     window.addEventListener("beforeunload", function (e) {
         container.get(AppServices.NeoTypes.Routing.PageLeaveHandler).onWindowUnload(ViewBase.currentView, e);
     });
+    configure({ enforceActions: "never", useProxies: "never" });
 }

package/dist/React/DataView.js

@@ -1,9 +1,7 @@
 import React from 'react';
 import { Data } from '@singularsystems/neo-core';
-Data.DataViewBase.useFrameworkSortCompareFn =
-    function (item, propertyKey) { var _a; return ((_a = item.$mobx) === null || _a === void 0 ? void 0 : _a.values[propertyKey]) !== undefined; };
-// access raw values so we dont create dependencies.
-Data.DataViewBase.frameworkSortValueFn = function (propertyName) { return function (c) { return c.$mobx.values[propertyName].value; }; };
+import { untracked } from 'mobx';
+Data.DataViewBase.unTrackedSort = untracked;
 var DataViewContextParams = /** @class */ (function () {
     function DataViewContextParams() {
     }

package/dist/React/Decorators.js

@@ -1,4 +1,5 @@
 import { createObservableList } from './Utils';
+// TODO : remove this
 /**
  * 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.
  */

package/dist/React/ReactModelCreator.d.ts

@@ -5,6 +5,7 @@ export declare class ReactModelCreator extends ModelCreatorBase {
     convertInstance(instance: {}): {};
     setupModel(typeInfo: NeoTypeInfo, model: Model.IModelBase): void;
     setupObject(typeInfo: NeoTypeInfo, object: any): void;
-    private convertToObservable;
+    private setMobxObservableType;
     private addChangeTracking;
+    private setupList;
 }

package/dist/React/ReactModelCreator.js

@@ -1,7 +1,6 @@
 import { __extends } from "tslib";
-import { observable, computed, intercept, reaction } from 'mobx';
-import { createObservableList } from './Utils';
-import { Misc, Validation, Utils } from '@singularsystems/neo-core';
+import { observable, computed, intercept, reaction, makeObservable } from 'mobx';
+import { List, Misc, Validation, Utils } from '@singularsystems/neo-core';
 import { ModelCreatorBase } from '@singularsystems/neo-core/dist/Model/ModelCreatorBase';
 import PropertyInstance from '@singularsystems/neo-core/dist/Model/PropertyInstance';
 var hasConvertedSymbol = Symbol("hasConvertedModel");
@@ -32,14 +31,16 @@ var ReactModelCreator = /** @class */ (function (_super) {
         model.isSuspended = false;
     };
     ReactModelCreator.prototype.setupObject = function (typeInfo, object) {
+        var annotations = {};
+        var observables = {};
         for (var _i = 0, _a = typeInfo.properties; _i < _a.length; _i++) {
             var propertyInfo = _a[_i];
             if (propertyInfo.isObservable !== false) {
-                var propertyName = propertyInfo.propertyName, makeObservable = this.typeInfo.inheritsModelBase || propertyInfo.isObservable === true;
+                var propertyName = propertyInfo.propertyName, makeObservable_1 = this.typeInfo.inheritsModelBase || propertyInfo.isObservable === true;
                 var propertyInstance = void 0;
                 if (this.typeInfo.inheritsBindableBase) {
                     var model = object;
-                    propertyInstance = new PropertyInstance(model, propertyInfo, makeObservable);
+                    propertyInstance = new PropertyInstance(model, propertyInfo, makeObservable_1);
                     model.meta[propertyName] = propertyInstance;
                     // Rules
                     if (propertyInfo.rules.length > 0 && model.validator) {
@@ -48,42 +49,54 @@ var ReactModelCreator = /** @class */ (function (_super) {
                 }
                 if (propertyInfo.isComputed !== null) {
                     if (propertyInfo.descriptor && propertyInfo.isComputed) {
-                        computed({ keepAlive: true })(object, propertyName, propertyInfo.descriptor, true);
+                        annotations[propertyName] = computed({ keepAlive: true });
                     }
                 }
-                else if (makeObservable) {
-                    var observable_1 = this.convertToObservable(object, propertyName, propertyInfo);
-                    this.addChangeTracking(object, propertyName, propertyInfo, observable_1, propertyInstance);
+                else if (makeObservable_1) {
+                    var property = { propertyInfo: propertyInfo, propertyInstance: propertyInstance };
+                    observables[propertyName] = property;
+                    this.setMobxObservableType(object, propertyName, property, annotations);
                 }
             }
         }
+        // Run mobx's setup for this instance.
+        makeObservable(object, annotations, { proxy: false });
+        // Setup once properties have been converted to observables.
+        for (var propertyKey in observables) {
+            var property = observables[propertyKey];
+            this.addChangeTracking(object, propertyKey, property);
+            if (property.convertList) {
+                this.setupList(object, propertyKey, property.convertList);
+            }
+        }
     };
-    ReactModelCreator.prototype.convertToObservable = function (object, propertyName, propertyInfo) {
-        var propertyValue = object[propertyName];
+    ReactModelCreator.prototype.setMobxObservableType = function (object, propertyName, property, annotations) {
+        var propertyValue = object[propertyName], propertyInfo = property.propertyInfo;
         this.ensureChildInfo(object, propertyInfo);
         if (propertyInfo.relationType === Misc.RelationType.ChildList) {
-            createObservableList(object, propertyName, propertyValue);
+            annotations[propertyName] = observable.shallow;
+            property.convertList = propertyValue;
         }
         else if (propertyValue instanceof Array) {
-            observable.shallow(object, propertyName, { value: propertyValue }, true);
+            annotations[propertyName] = observable.shallow;
         }
         else {
-            // make the property an observable
-            // this overload is not part of the typescript typings. The true tells it to create the observable immediately
-            // otherwise we need to keep track of all the properties that need to be observable in a dictionary using observables[propertyName] = observable;
-            // then call decorate(model, observables) after this loop.
-            observable.ref(object, propertyName, { value: propertyValue }, true);
+            annotations[propertyName] = observable.ref;
         }
-        return object.$mobx.values[propertyName];
     };
-    ReactModelCreator.prototype.addChangeTracking = function (object, propertyName, propertyInfo, observable, propertyInstance) {
+    ReactModelCreator.prototype.addChangeTracking = function (object, propertyName, property) {
         var _this = this;
+        var propertyInfo = property.propertyInfo, propertyInstance = property.propertyInstance;
         var trackProperty = this.typeInfo.inheritsModelBase && !propertyInfo.noTrack && propertyInfo.relationType !== Misc.RelationType.ChildList;
         var onChangedOptions = propertyInfo && propertyInfo.onChangedOptions;
-        if (trackProperty || propertyInfo.propertyType === Misc.DataType.Date || (onChangedOptions && onChangedOptions.requiresOldValue)) {
+        if (onChangedOptions && onChangedOptions.requiresOldValue && !propertyInstance) {
+            throw Error("Cannot use previous value for OnChanged on property: ".concat(propertyName, ". Model does not extend BindableBase."));
+        }
+        if (propertyInstance && (trackProperty || propertyInfo.propertyType === Misc.DataType.Date || (onChangedOptions && onChangedOptions.requiresOldValue))) {
             intercept(object, propertyName, function (onChange) {
-                if (propertyInstance !== undefined && !object.isSuspended) {
-                    if (trackProperty && onChange.newValue !== observable.value)
+                var currentValue = object[propertyName];
+                if (!object.isSuspended) {
+                    if (trackProperty && onChange.newValue !== currentValue)
                         object.isSelfDirty = true;
                     if (propertyInfo.propertyType === Misc.DataType.Date) {
                         if (typeof onChange.newValue === "string") {
@@ -91,7 +104,7 @@ var ReactModelCreator = /** @class */ (function (_super) {
                         }
                     }
                 }
-                observable.previousValue = observable.value;
+                propertyInstance.previousValue = currentValue;
                 return onChange;
             });
         }
@@ -113,11 +126,37 @@ var ReactModelCreator = /** @class */ (function (_super) {
                 return newValue_1;
             }, function () {
                 if (!_this.typeInfo.inheritsBindableBase || !object.isSuspended) {
-                    onChanged.call(object, observable.previousValue, newValue_1);
+                    onChanged.call(object, propertyInstance === null || propertyInstance === void 0 ? void 0 : propertyInstance.previousValue, newValue_1);
                 }
             });
         }
     };
+    ReactModelCreator.prototype.setupList = function (object, propertyName, originalList) {
+        var obsArray = object[propertyName];
+        List.copyMethods(obsArray);
+        originalList.setupProxy(obsArray, object);
+        // Don't allow list to change, just change the list contents.
+        intercept(object, propertyName, function (onChange) {
+            var newValue = onChange.newValue, currentValue = object[propertyName];
+            if (!newValue) {
+                currentValue.length = 0;
+            }
+            else {
+                if (newValue.childObjectType && newValue.setParent) {
+                    // Cannot re-assign this property, so we have to clear the array, and copy the items from the source array.
+                    Utils.batchUpdate(function () {
+                        currentValue.length = 0;
+                        currentValue.push.apply(currentValue, newValue);
+                    });
+                }
+                else {
+                    throw "Do not assign a plain array to a List property. Either call ".concat(propertyName, ".set(...) or ").concat(propertyName, ".update(...)");
+                }
+            }
+            // Instruct mobx to ignore the set.
+            return null;
+        });
+    };
     return ReactModelCreator;
 }(ModelCreatorBase));
 export { ReactModelCreator };

package/dist/ReactComponents/ErrorHandler.js

@@ -56,11 +56,11 @@ var ErrorHandler = /** @class */ (function (_super) {
             };
             ModalUtils.showModal(errorDisplay.header, React.createElement(Observer, null, function () {
                 var _a;
-                return ((_a = _this.hidingErrorList) !== null && _a !== void 0 ? _a : _this.errorList).map(function (errorGroup, index) { return (React.createElement("div", { key: index, className: "neo-error-modal-body" },
+                return React.createElement(React.Fragment, null, ((_a = _this.hidingErrorList) !== null && _a !== void 0 ? _a : _this.errorList).map(function (errorGroup, index) { return (React.createElement("div", { key: index, className: "neo-error-modal-body" },
                     React.createElement("div", { className: "neo-error-modal-body-icon" }, errorGroup.count === 1 ?
                         React.createElement("i", { className: _this.getIcon(errorGroup.errorDisplay) }) :
                         React.createElement("span", { className: "badge badge-danger" }, errorGroup.count)),
-                    React.createElement("div", null, errorGroup.errorDisplay.body))); });
+                    React.createElement("div", null, errorGroup.errorDisplay.body))); }));
             }), modalOptions);
         }
         if (this.errorList.length < 5) {

package/dist/ReactComponents/Form.d.ts

@@ -1,13 +1,12 @@
 import * as React from 'react';
 import { Components, Model } from '@singularsystems/neo-core';
-import { ItemCallback } from './PropTypes';
 export interface IFormProps<T extends Model.IModelBase> extends React.FormHTMLAttributes<HTMLElement>, Components.IFormOptions<T> {
     /**
      * Called when the form is submitted, but the model is not valid.
      * The justValidated parameter will be true if the validationDisplayMode is 'AfterSubmit', and this is the first submit attempt.
      */
     onInvalid?: (e: React.FormEvent, justValidated?: boolean) => void;
-    children: React.ReactNode | React.ReactNode[] | ItemCallback<T>;
+    children: React.ReactNode;
 }
 export default class Form<T extends Model.IModelBase> extends React.Component<IFormProps<T>> {
     private reactionDisposer?;

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

@@ -17,7 +17,7 @@ export declare class GridContextParams<T> {
     get inBody(): boolean;
 }
 export declare const GridContext: React.Context<GridContextParams<unknown>>;
-export interface IGridProps<T> extends React.HTMLProps<HTMLTableElement> {
+interface IGridProps<T> extends React.HTMLProps<HTMLTableElement> {
     /**
      * Datasource of the Grid. Usually a neo List, but can be a js array. This is not required if the grid is nested in
      * a DataViewProvider like a Pager or DataScroller
@@ -51,7 +51,6 @@ export interface IGridProps<T> extends React.HTMLProps<HTMLTableElement> {
      */
     initialSort?: keyof T | (keyof T)[];
     initialSortAscending?: boolean | boolean[];
-    children: ItemCallback<T>;
     /**
      * When specified, the default bootstrap table borders (sides and cells) will be added.
      * This is the default unless overridden in Misc.Settings.grid
@@ -73,14 +72,19 @@ export interface IGridProps<T> extends React.HTMLProps<HTMLTableElement> {
      * Set `showAddButton = false` if you don't want the default button.
      */
     footerButtons?: () => React.ReactNode;
+    children: any;
+}
+interface GridPropsWithChildren<T> extends IGridProps<T> {
+    children: ItemCallback<T>;
 }
-export default class Grid<T> extends React.Component<IGridProps<T>> {
+export default class Grid<T> extends React.Component<GridPropsWithChildren<T>> {
     static contextType: React.Context<import("../../React/DataView").DataViewContextParams<unknown>>;
     context: React.ContextType<typeof DataViewContext>;
     private gridContext;
     private prevItems?;
     private headerItem;
-    constructor(props: IGridProps<T>);
+    constructor(props: GridPropsWithChildren<T>);
     render(): JSX.Element;
     private setInitialSort;
 }
+export {};

package/dist/ReactComponents/Grid/Grid.js

@@ -90,12 +90,12 @@ var Grid = /** @class */ (function (_super) {
             React.createElement(GridContext.Provider, { value: this.gridContext },
                 React.createElement(TableSection, { type: "header" }, this.headerItem && this.props.children(this.headerItem, this.headerItem.meta)),
                 React.createElement(TableSection, { type: "body" }, this.gridContext.dataView.getItems().map(function (item) { return (React.createElement(ItemGroup, { item: item, key: keyProperty ? item[keyProperty] : item.entityIdentifier, template: _this.props.children })); })),
-                React.createElement(Observer, null, function () { return (showAddButton || addButton || footerButtons || _this.gridContext.hasSummaries || footerContent !== undefined) &&
+                React.createElement(Observer, null, function () { return (showAddButton || addButton || footerButtons || _this.gridContext.hasSummaries || footerContent !== undefined) ?
                     React.createElement(TableSection, { type: "footer" },
                         _this.gridContext.hasSummaries && _this.headerItem && _this.props.children(_this.headerItem, _this.headerItem.meta),
                         footerContent !== undefined && footerContent(_this.gridContext.dataView.getItems()),
                         (showAddButton || addButton || footerButtons) &&
-                            React.createElement(AddButtonRow, { addButton: addButton, showAddButton: showAddButton, additionalContent: footerButtons })); }))));
+                            React.createElement(AddButtonRow, { addButton: addButton, showAddButton: showAddButton, additionalContent: footerButtons })) : null; }))));
     };
     Grid.prototype.setInitialSort = function (initialSort, initialSortAscending) {
         var _a;

package/dist/ReactComponents/Paging/Pager.d.ts

@@ -6,7 +6,7 @@ export interface IPagerBaseProps<TCriteria extends ValueObject, TModel extends M
     /** Page manager which controls this component. */
     pageManager: Data.PageManager<TCriteria, TModel>;
     /** Child can either be a component which works with a dataview (like Neo.Grid), or a callback which will be passed the items of the current page. */
-    children: ((data: TModel[]) => JSX.Element) | JSX.Element;
+    children: React.ReactNode;
     /** Where to put the page controls? */
     pageControls?: "none" | "top" | "bottom" | "topAndBottom";
     /** True if the built in loader component should be hidden. */

package/dist/index.d.ts

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

package/dist/index.js

@@ -6,5 +6,4 @@ import * as Routing from './Routing';
 import * as Views from './Views/';
 import * as Managers from './ReactComponents/_Managers';
 import { TooltipHelper } from './ReactComponents/TooltipHelper';
-export * from './React/Decorators';
 export { Managers, NeoReactModule, NeoReactTypes, Neo, NeoGrid, Routing, Views, TooltipHelper, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@singularsystems/neo-react",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.2",
   "description": "React application logic and components for the Neo client library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,28 +20,28 @@
     "@types/jest": "^28.1.1",
     "@types/memoize-one": "5.1.2",
     "@types/node": "17.0.15",
-    "@types/rc-slider": "^8.6.5",
     "@types/react": "17.0.39",
-    "@types/react-color": "^3.0.1",
     "@types/react-custom-scrollbars": "^4.0.6",
     "@types/react-dom": "17.0.11",
     "@types/react-router": "^5.1.17",
     "@types/react-router-dom": "^5.3.3",
-    "@types/react-select": "3.1.0",
     "jest": "28.1.1",
     "react-scripts": "5.0.1",
     "ts-jest": "28.0.4",
     "typescript": "4.7.3"
   },
   "dependencies": {
-    "@singularsystems/neo-core": "^1.0.0-alpha.1",
+    "@singularsystems/neo-core": "^1.0.0-alpha.2",
+    "@types/rc-slider": "^8.6.5",
+    "@types/react-color": "^3.0.1",
+    "@types/react-select": "3.1.0",
     "axios": "^0.27.2",
     "decimal.js-light": "^2.5.1",
     "history": "4.10.1",
     "inversify": "^6.0.1",
     "memoize-one": "6.0.0",
-    "mobx": "4.9.2",
-    "mobx-react": "5.4.3",
+    "mobx": "6.6.1",
+    "mobx-react": "7.5.2",
     "react": "^17.0.2",
     "react-custom-scrollbars": "^4.2.1",
     "react-dom": "^17.0.2",