@singularsystems/neo-react 0.10.61 → 0.10.62

package/dist/ReactComponents/DatePicker.d.ts

@@ -12,6 +12,7 @@ export default class DatePicker extends ComponentBase<INeoDatePickerProps> {
     private container;
     private datePicker?;
     private isReadOnly;
+    private inputRef;
     constructor(props: INeoDatePickerProps);
     componentDidMount(): void;
     componentWillUnmount(): void;

package/dist/ReactComponents/DatePicker.js

@@ -11,6 +11,7 @@ var DatePicker = /** @class */ (function (_super) {
     function DatePicker(props) {
         var _this = _super.call(this, props) || this;
         _this.isReadOnly = false;
+        _this.inputRef = React.createRef();
         _this.container = React.createRef();
         return _this;
     }
@@ -33,6 +34,9 @@ var DatePicker = /** @class */ (function (_super) {
         this.isReadOnly = !!domProps.readOnly;
         var displayInfo = this.props.bind.validator.getDisplayState(this.context.validationDisplayMode);
         displayInfo.applyToDom(domProps, !splitProps.inGroup);
+        if (splitProps.editor.inputElement) {
+            this.inputRef = splitProps.editor.inputElement;
+        }
         if (this.datePicker) {
             this.datePicker.update(splitProps.dateProps, this.props.bind, this.isReadOnly);
         }
@@ -40,8 +44,8 @@ var DatePicker = /** @class */ (function (_super) {
             // Create dependency on bound value on initial render.
             void this.props.bind.value;
         }
-        return (React.createElement("div", { className: "neo-datepicker-container", ref: this.container }, !(splitProps.dateProps && splitProps.dateProps.alwaysShow) &&
-            InputHelpers.surroundWithInputGroup(React.createElement("input", __assign({ type: "text" }, domProps, { ref: splitProps.editor.inputElement })), splitProps.editor)));
+        return (React.createElement("div", { className: "neo-datepicker-container", ref: this.container }, Components.DatePicker.mustShowInput(splitProps.dateProps) &&
+            InputHelpers.surroundWithInputGroup(React.createElement("input", __assign({ type: "text" }, domProps, { ref: this.inputRef })), splitProps.editor, this.inputRef)));
     };
     DatePicker.contextType = FormContext;
     DatePicker = __decorate([

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

@@ -21,6 +21,10 @@ interface IAutoCompleteCommonProps<T> extends ICommonEditorProps, Props<IOption,
     items?: ItemSource<T>;
     valueMember?: keyof T;
     displayMember?: keyof T;
+    /**
+     * Function used to filter items out of the datasource.
+     * **Note:** this will only apply to the `items` prop. */
+    filterPredicate?: (item: T) => boolean;
     /**
      * Property of an item to use as the description.
      *

package/dist/ReactComponents/DropDown/AutoCompleteDropDown.js

@@ -134,6 +134,9 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
         var defaultItems = undefined;
         if (this.props.items) {
             var items_1 = this.getItems(this.props.items);
+            if (this.props.filterPredicate !== undefined) {
+                items_1 = items_1.filter(this.props.filterPredicate);
+            }
             defaultItems = this.mapTArrayToOptions(items_1);
             if (descriptionMember === undefined && items_1.length > 0) {
                 if (EnumHelper.isEnumItem(items_1[0])) {

package/dist/ReactComponents/Grid/ButtonColumn.js

@@ -72,7 +72,7 @@ var ButtonColumn = /** @class */ (function (_super) {
             React.createElement("th", __assign({}, domProps), this.section === "header" && label) :
             React.createElement("td", __assign({}, domProps),
                 childAlignment === "right" ? buttons : undefined,
-                this.props.children,
+                this.props.children instanceof Function ? this.props.children() : this.props.children,
                 childAlignment !== "right" ? buttons : undefined));
     };
     ButtonColumn.isColumnComponent = true;

package/dist/ReactComponents/Input.js

@@ -106,7 +106,7 @@ var Input = /** @class */ (function (_super) {
             splitProps.editor.append = this.props.bind.value ?
                 React.createElement(Button, __assign({ size: "sm" }, buttonOptions, { icon: !this.showPassword ? "far-eye fa-fw" : "far-eye-slash fa-fw", onClick: function () { return _this.showPassword = !_this.showPassword; } })) : null;
         }
-        return (InputHelpers.surroundWithInputGroup(inputElement, splitProps.editor));
+        return (InputHelpers.surroundWithInputGroup(inputElement, splitProps.editor, this.domRef));
     };
     Input.contextType = FormContext;
     __decorate([

package/dist/ReactComponents/InputHelpers.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { ICommonEditorProps } from './PropTypes';
 export declare class InputHelpers {
     private static iconFactory?;
-    static surroundWithInputGroup<T>(element: T, props: ICommonEditorProps): JSX.Element | T;
+    static surroundWithInputGroup<T>(element: T, props: ICommonEditorProps, inputRef?: React.RefObject<HTMLElement>): JSX.Element | T;
 }

package/dist/ReactComponents/InputHelpers.js

@@ -4,7 +4,7 @@ import { NeoReactTypes } from '../Modules/Types';
 var InputHelpers = /** @class */ (function () {
     function InputHelpers() {
     }
-    InputHelpers.surroundWithInputGroup = function (element, props) {
+    InputHelpers.surroundWithInputGroup = function (element, props, inputRef) {
         if (!this.iconFactory) {
             this.iconFactory = Misc.Globals.appService.get(NeoReactTypes.Components.IconFactory);
         }
@@ -13,12 +13,12 @@ var InputHelpers = /** @class */ (function () {
                 (props.prependText || props.prepend) &&
                     React.createElement("div", { className: "input-group-prepend" },
                         props.prepend && (props.prepend instanceof Function ? props.prepend() : props.prepend),
-                        props.prependText && React.createElement("span", { className: "input-group-text" }, this.iconFactory.textOrIcon(props.prependText))),
+                        props.prependText && React.createElement("span", { className: "input-group-text", onClick: function () { var _a, _b; return (_b = (_a = inputRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus(); } }, this.iconFactory.textOrIcon(props.prependText))),
                 element,
                 (props.appendText || props.append) &&
                     React.createElement("div", { className: "input-group-append" },
                         props.append && (props.append instanceof Function ? props.append() : props.append),
-                        props.appendText && React.createElement("span", { className: "input-group-text" }, this.iconFactory.textOrIcon(props.appendText)))));
+                        props.appendText && React.createElement("span", { className: "input-group-text", onClick: function () { var _a, _b; return (_b = (_a = inputRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus(); } }, this.iconFactory.textOrIcon(props.appendText)))));
         }
         else {
             return element;

package/dist/ReactComponents/NumberInput.js

@@ -97,8 +97,15 @@ var NumberInput = /** @class */ (function (_super) {
     }
     NumberInput.prototype.onChanged = function (e) {
         var newValue;
-        if (e.target.value !== "") {
-            var testValue = e.target.value;
+        var stringValue = e.target.value;
+        if (stringValue !== "") {
+            if (NumberUtils.allowAsDecimalSeparator) {
+                var firstIndex = stringValue.indexOf(NumberUtils.allowAsDecimalSeparator), lastIndex = stringValue.lastIndexOf(NumberUtils.allowAsDecimalSeparator);
+                if (firstIndex >= 0 && firstIndex === lastIndex) {
+                    stringValue = stringValue.replace(NumberUtils.allowAsDecimalSeparator, ".");
+                }
+            }
+            var testValue = stringValue;
             if (testValue[0] === "-") {
                 testValue = testValue.substring(1);
             }
@@ -106,18 +113,18 @@ var NumberInput = /** @class */ (function (_super) {
                 return;
             }
         }
-        if (e.target.value == "") {
+        if (stringValue == "") {
             newValue = this.props.bind.propertyInfo.allowNulls ? null : new Decimal(0);
         }
         else if (this.formatState.isPercent && NumberUtils.transformPercent) {
-            newValue = new Decimal(e.target.value).dividedBy(100);
+            newValue = new Decimal(stringValue).dividedBy(100);
         }
         else if (this.numericType === Misc.DataType.Float || this.numericType === Misc.DataType.Decimal) {
-            newValue = new Decimal(e.target.value);
+            newValue = new Decimal(stringValue);
         }
         else {
             // Rounds to zero.
-            newValue = new Decimal(e.target.value).toDecimalPlaces(0, Decimal.ROUND_DOWN);
+            newValue = new Decimal(stringValue).toDecimalPlaces(0, Decimal.ROUND_DOWN);
         }
         if (newValue === null) {
             this.props.bind.value = newValue;
@@ -249,7 +256,7 @@ var NumberInput = /** @class */ (function (_super) {
             var decimals = NumberUtils.getDecimalPlaces(this.formatState.formatString);
             domProps.step = decimals === 0 ? "1" : "0." + "0".repeat(decimals - 1) + "1";
         }
-        return (InputHelpers.surroundWithInputGroup(React.createElement("input", __assign({}, domProps, { defaultValue: this.formatState.getFormattedValue(editorProps.bind.value), type: useNative ? "number" : "text", onChange: this.onChanged, ref: this.inputElement })), editorProps));
+        return (InputHelpers.surroundWithInputGroup(React.createElement("input", __assign({}, domProps, { defaultValue: this.formatState.getFormattedValue(editorProps.bind.value), type: useNative ? "number" : "text", onChange: this.onChanged, ref: this.inputElement })), editorProps, this.inputElement));
     };
     NumberInput.contextType = FormContext;
     NumberInput = __decorate([

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@singularsystems/neo-react",
-  "version": "0.10.61",
+  "version": "0.10.62",
   "description": "React application logic and components for the Neo client library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -47,7 +47,7 @@
     "react-router-dom": "5.1.0"
   },
   "peerDependencies": {
-    "@singularsystems/neo-core": ">=0.10.69",
+    "@singularsystems/neo-core": ">=0.10.72",
     "axios": ">=0.21.1",
     "inversify": ">=5.0.1",
     "react": ">=16.13.1",

package/styles/DatePicker.scss

@@ -3,6 +3,17 @@
     position: relative;
     width: 100%;
     color: initial;
+
+    &.neo-datepicker-always-show {
+      width: max-content;
+
+      input {
+        text-align: center;
+        padding: 0.125rem 0;
+        height: auto;
+        margin-bottom: 0.25rem;
+      }
+    }
   }
   
   .neo-datepicker-popup {