@singularsystems/neo-react 1.0.0-beta.2 → 1.0.0-beta.3

package/dist/React/AutoRunner.js

@@ -22,8 +22,19 @@ var AutoRunner = /** @class */ (function () {
         this.disposerDelayed = reaction(function () { return _this.accessAllValues(model, true, new Map(), ""); }, function () { var _a; return _this.runCallback(model, callback, (_a = _this.options.delayMs) !== null && _a !== void 0 ? _a : 500); });
         this.disposerImmediate = reaction(function () { return _this.accessAllValues(model, false, new Map(), ""); }, function () { return _this.runCallback(model, callback, 0); });
     }
+    Object.defineProperty(AutoRunner.prototype, "hasPending", {
+        get: function () {
+            return DebounceHelper.hasPending(this);
+        },
+        enumerable: false,
+        configurable: true
+    });
     AutoRunner.prototype.cancelPending = function () {
-        DebounceHelper.cancelPending(this);
+        if (DebounceHelper.hasPending(this)) {
+            DebounceHelper.cancelPending(this);
+            return true;
+        }
+        return false;
     };
     AutoRunner.prototype.fireImmediate = function () {
         DebounceHelper.executeImmediate(this);

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

@@ -26,6 +26,8 @@ export interface IDropDownSpecificProps<T> {
     nullText?: string;
     /** Text to display as the first item in the drop down list when the user is allowed to select a blank item. */
     deSelectText?: string;
+    /** Set to true if the property should be sorted by value instead of display text. */
+    sortByValue?: boolean;
 }
 export interface IDropDownProps<T> extends IBindableEditorProps<HTMLSelectElement> {
     select: IDropDownSpecificProps<T>;
@@ -34,6 +36,7 @@ export default class DropDown<T> extends DropDownBase<T, IDropDownProps<T>> {
     static contextType: React.Context<import("../FormContext").FormContextParams>;
     context: React.ContextType<typeof FormContext>;
     private selectedItem;
+    private sortByValue?;
     private listIndexSymbol;
     constructor(props: IDropDownProps<T>);
     private get items();

package/dist/ReactComponents/DropDown/DropDown.js

@@ -41,7 +41,9 @@ var DropDown = /** @class */ (function (_super) {
         list.forEach(function (item) { return index[item[_this.valueMember]] = item; });
     };
     DropDown.prototype.getSelectedOption = function (value) {
-        this.props.bind.propertyInfo.hasSortValue = true;
+        if (!this.sortByValue) {
+            this.props.bind.propertyInfo.hasSortValue = true;
+        }
         if (!this.selectedItem || this.selectedItem[this.valueMember] != value) {
             var list = this.items;
             var indexJustCreated = false;
@@ -61,7 +63,9 @@ var DropDown = /** @class */ (function (_super) {
                 this.selectedItem[this.displayMember] = "";
                 this.selectedItem[this.valueMember] = null;
             }
-            this.setFieldInfo(this.props.bind, this.selectedItem[this.displayMember]);
+            var displayValue = this.selectedItem[this.displayMember];
+            this.setFieldInfo(this.props.bind, displayValue);
+            this.props.bind.sortValue = this.sortByValue ? value : displayValue;
         }
         return this.selectedItem;
     };
@@ -81,10 +85,11 @@ var DropDown = /** @class */ (function (_super) {
     };
     DropDown.prototype.render = function () {
         var _this = this;
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         var splitProps = BindPropsHelper.normaliseEditorProps(this, this.props);
         var domProps = BindPropsHelper.autoSetDomProperties(splitProps, this.context);
         domProps.className = Utils.joinWithSpaces(domProps.className, splitProps.isBootstrap ? "form-control" : "neo-forms-editor");
+        this.sortByValue = (_a = splitProps.select) === null || _a === void 0 ? void 0 : _a.sortByValue;
         if (splitProps.select) {
             if (splitProps.select.valueMember)
                 this.valueMember = splitProps.select.valueMember;
@@ -96,7 +101,7 @@ var DropDown = /** @class */ (function (_super) {
         var items = this.items;
         var selectedItem = this.getSelectedOption(this.props.bind.value); // This sets the sort value to allow sorting of drop downs in grids. 
         var value = this.props.bind.value;
-        var addBlankItem = ((_b = (_a = splitProps.select) === null || _a === void 0 ? void 0 : _a.allowNulls) !== null && _b !== void 0 ? _b : this.props.bind.propertyInfo.allowNulls) || !value;
+        var addBlankItem = ((_c = (_b = splitProps.select) === null || _b === void 0 ? void 0 : _b.allowNulls) !== null && _c !== void 0 ? _c : this.props.bind.propertyInfo.allowNulls) || !value;
         if (addBlankItem && items.find(function (item) { return item[_this.valueMember] === null || item[_this.valueMember] === ""; })) {
             // If there is an item with a null value, don't add a blank drop down item.
             addBlankItem = false;
@@ -106,7 +111,7 @@ var DropDown = /** @class */ (function (_super) {
             control = React.createElement("div", { className: "form-control form-control-loading" },
                 React.createElement("div", { className: "spinner-border" }));
         }
-        else if ((_c = splitProps.select) === null || _c === void 0 ? void 0 : _c.renderAsText) {
+        else if ((_d = splitProps.select) === null || _d === void 0 ? void 0 : _d.renderAsText) {
             control = React.createElement("span", null, selectedItem ? selectedItem[this.displayMember] : "");
         }
         else if (splitProps.editor.isReadOnly) {
@@ -117,7 +122,7 @@ var DropDown = /** @class */ (function (_super) {
                 domProps.disabled = true;
             }
             var valueIsBlank = value === undefined || value === null;
-            var nullText = (valueIsBlank || ((_d = splitProps.select) === null || _d === void 0 ? void 0 : _d.deSelectText) === undefined) ? (_e = splitProps.select) === null || _e === void 0 ? void 0 : _e.nullText : (_f = splitProps.select) === null || _f === void 0 ? void 0 : _f.deSelectText;
+            var nullText = (valueIsBlank || ((_e = splitProps.select) === null || _e === void 0 ? void 0 : _e.deSelectText) === undefined) ? (_f = splitProps.select) === null || _f === void 0 ? void 0 : _f.nullText : (_g = splitProps.select) === null || _g === void 0 ? void 0 : _g.deSelectText;
             if (valueIsBlank) {
                 domProps.className = Utils.joinWithSpaces(domProps.className, "select-no-value");
             }

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

@@ -11,6 +11,7 @@ export declare class GridContextParams<T> {
     inFirstRowInGroup: boolean;
     columnCount: number;
     expandProperty?: Model.IPropertyInstance<boolean | null>;
+    hideExpandButton?: boolean;
     expandAll?: boolean;
     hasSummaries: boolean;
     dataView: Data.DataViewBase<T>;

package/dist/ReactComponents/Grid/Grid.js

@@ -101,12 +101,12 @@ var Grid = /** @class */ (function (_super) {
         }
         return (React.createElement("table", __assign({}, domProps, { className: className, ref: this.domRef }),
             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: "header" }, this.headerItem && this.props.children(this.headerItem, this.headerItem.meta, true)),
                 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 React.createElement(React.Fragment, null, (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),
+                            _this.gridContext.hasSummaries && _this.headerItem && _this.props.children(_this.headerItem, _this.headerItem.meta, true),
                             footerContent !== undefined && footerContent(_this.gridContext.dataView.getItems()),
                             (showAddButton || addButton || footerButtons) &&
                                 React.createElement(AddButtonRow, { addButton: addButton, showAddButton: showAddButton, additionalContent: footerButtons })));
@@ -208,7 +208,7 @@ var ItemGroup = /** @class */ (function (_super) {
     ItemGroup.prototype.render = function () {
         this.context.currentItem = this.props.item;
         //this.context.inFirstRowInGroup = true;
-        return (this.props.template(this.props.item, this.props.item.meta));
+        return (this.props.template(this.props.item, this.props.item.meta, false));
     };
     ItemGroup.contextType = GridContext;
     ItemGroup = __decorate([

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

@@ -71,6 +71,10 @@ interface INeoRowGroupProps {
      * To hide the expand button, return null.
      */
     expandProperty?: Model.IPropertyInstance<boolean | null>;
+    /**
+     * Hides the expansion button on this row.
+     */
+    hideExpandButton?: boolean;
     children: React.ReactNode;
 }
 export declare class RowGroup extends React.Component<INeoRowGroupProps> {

package/dist/ReactComponents/Grid/Row.js

@@ -76,7 +76,7 @@ var Row = /** @class */ (function (_super) {
         var output = ((this.props.showInHeader || inBody) &&
             React.createElement("tr", __assign({}, domProps),
                 this.expandProperty && this.context.expandAll === undefined &&
-                    React.createElement(Column, { className: "neo-grid-expand-column" }, this.firstRowInGroup && inBody && this.expandProperty.value !== null &&
+                    React.createElement(Column, { className: "neo-grid-expand-column" }, this.firstRowInGroup && inBody && this.context.hideExpandButton !== true && this.expandProperty.value !== null &&
                         React.createElement(NeoButton, __assign({}, expandButtonOptions))),
                 this.props.children));
         this.setGridContext();
@@ -193,6 +193,7 @@ export var RowGroup = /** @class */ (function (_super) {
     RowGroup.prototype.render = function () {
         this.context.expandProperty = this.props.expandProperty;
         this.context.inFirstRowInGroup = true;
+        this.context.hideExpandButton = this.props.hideExpandButton;
         return this.props.children;
     };
     RowGroup.contextType = GridContext;

package/dist/ReactComponents/PropTypes.d.ts

@@ -11,7 +11,7 @@ import PropertyInfo from '@singularsystems/neo-core/dist/Model/PropertyInfo';
 import { IComponentBase } from './ComponentBase';
 import FileInput, { IFileEditorProps } from './FileManager/FileInput';
 import { FormContextParams } from './FormContext';
-export type ItemCallback<T> = (item: T, meta: TransformMetaType<T>) => React.ReactNode;
+export type ItemCallback<T> = (item: T, meta: TransformMetaType<T>, isHeader: boolean) => React.ReactNode;
 export declare enum ControlType {
     Date = 0,
     Number = 1,

package/dist/ReactComponents/Tabs/Tab.d.ts

@@ -9,7 +9,7 @@ interface ITabProps {
     /** Name used for binding to selected tab. (Same as id property) */
     name?: string;
     /** Icon to display in tab header. */
-    icon?: string;
+    icon?: any;
     /** True if the tab is disabled and not allowed to be clicked on. */
     disabled?: boolean;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@singularsystems/neo-react",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.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.0.4"
   },
   "dependencies": {
-    "@singularsystems/neo-core": "1.0.0-beta.3",
+    "@singularsystems/neo-core": "1.0.0-beta.5",
     "@types/rc-slider": "^8.6.5",
     "@types/react-color": "^3.0.1",
     "axios": "1.4.0",
@@ -48,7 +48,7 @@
     "tslib": "2.5.0"
   },
   "peerDependencies": {
-    "@singularsystems/neo-core": ">=1.0.0-beta.3",
+    "@singularsystems/neo-core": ">=1.0.0-beta.5",
     "axios": "1.4.0",
     "inversify": ">=5.0.1",
     "mobx": ">=6.9.0",

package/CHANGELOG.md

@@ -1,98 +0,0 @@
-# Version 1.x
-
-Version 1 of neo-react upgrades react to version 18, and mobX to version 6. Both of these are major updates and will require you to make code changes to your project.
-
-## Testing
-
-In addition to requiring code / syntax changes, both React 18, and Mobx 6 behave differently enough to their previous versions that runtime bugs may be introduced into your project. You should only update to this version when you and the client have enough time to test the project thoroughly. If you find any issues, please report them so this document can be updated.
-
-The project changes required are detailed below:
-
-## Package changes:
-
-* Update all neo packages to the latest 1.x version.
-* Update the following packages to the latest version (these were the latest at time of writing):
-    * dependencies
-        * `"axios": "1.4.0"`,
-        * `"mobx": "6.9.0"`,
-        * `"mobx-react": "7.6.0"`,
-        * `"react": "18.2.0"`,
-        * `"react-dom": "18.2.0"`,
-        * `"react-router": "5.2.1"`, - Must be version 5.x
-        * `"react-router-dom": "5.3.0"`, - Must be version 5.x
-        * `"react-select": "5.7.3"`,
-        
-    * devDependencies
-        * `"@types/react": "18.2.4"`,
-        * `"@types/react-dom": "18.2.3"`,
-        * `"@types/react-router": "5.1.17"`, - Must be version 5.x
-        * `"@types/react-router-dom": "5.3.3"`, - Must be version 5.x
-    * resolutions
-        * remove all entries
-* delete yarn.lock, and run `yarn install`
-
-## Fix errors
-
-If any of your components allow children, React 18 requires to you have an explicit `children` prop. Add this to the props definition of the component:
-
-```typescript
-interface MyProps {
-    ...
-    children: React.ReactNode;
-}
-
-// or if the component has no other props:
-
-MyComponent extends React.Component<{ children: React.ReactNode }> {
-    ...
-}
-```
-
-The React root api has also changed in version 18. Make the following changes to your `index.tsx` file:
-
-Your existing code will look something like this:
-
-```typescript
-import ReactDOM from 'react-dom';
-...
-// React init
-ReactDOM.render(
-    renderComponent,
-    document.getElementById('root') as HTMLElement
-);
-```
-
-Change the `ReactDOM` import, and the react init code:
-
-```typescript
-import ReactDOM from 'react-dom/client';
-...
-// React init
-const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
-root.render(renderComponent);
-```
-
-## Mobx
-
-Before mobx 6, you could mark a property as being observable by adding an `@observable` decorator to the property. In mobx 6 this no longer works ([read more](https://mobx.js.org/migrating-from-4-or-5.html)). 
-
-For any class that extends `ModelBase`, `ValueObject`, `ViewModelBase` etc, this change is handled by neo, and you will not need to change any code.
-
-For other classes, you will need to add initialisation code to the constructor.
-
-* Search for `@observable` in your project. (In most projects this will be in the Sidebar and AppLayout components)
-* In the constructor of the class that contains the property, add:
-
-```typescript
-makeObservable(this);
-```
-
-### Decorators on neo models
-
-If you try use mobx decorators on any models that extend `ModelBase`, `ValueObject` or `ViewModelBase`, you will receive this error:
-
-> [MobX] makeObservable second arg must be nullish when using decorators. Mixing @decorator syntax with annotations is not supported.
-
-This is most likely because you have used an `@action` decorator on a method. Neo now marks all methods as actions, so you can remove the `@action` decorator.
-
-* Search for `@action` in your project. Remove the decorator **only** if the class extends `ModelBase` (and its decendents e.g. `ValueObject`) or `ViewModelBase`.