@singularsystems/neo-react 1.0.2 → 1.0.4

package/dist/ReactComponents/Badge.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { variant } from '@singularsystems/neo-core/dist/Components';
+interface IBadgeProps {
+    /** Content of badge. */
+    text?: string;
+    /** Child Element */
+    children?: React.ReactNode;
+    /** Bootstrap variant. */
+    variant?: variant;
+    /** Set a custom variant for when a standard variant is not provided. */
+    customVariant?: string;
+    /** Changes the type of badge. */
+    isLarge?: boolean;
+    /** Changes the badge to a pill which results in rounder borders. */
+    isPill?: boolean;
+}
+export default class Badge extends React.Component<IBadgeProps & React.HTMLProps<HTMLDivElement>> {
+    constructor(props: IBadgeProps);
+    render(): React.JSX.Element;
+}
+export {};

package/dist/ReactComponents/Badge.js

@@ -0,0 +1,25 @@
+import { __assign, __decorate, __extends, __metadata, __rest } from "tslib";
+import React from 'react';
+import { observer } from 'mobx-react';
+import { Utils } from '@singularsystems/neo-core';
+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 largeBadgeClassName = isLarge ? "badge-lg" : "";
+        var pillClassName = isPill ? "badge-pill" : "";
+        domProps.className = Utils.joinWithSpaces(domProps.className, variantClassName, pillClassName, largeBadgeClassName);
+        return (React.createElement("div", __assign({}, domProps), children !== null && children !== void 0 ? children : text));
+    };
+    Badge = __decorate([
+        observer,
+        __metadata("design:paramtypes", [Object])
+    ], Badge);
+    return Badge;
+}(React.Component));
+export default Badge;

package/dist/ReactComponents/DatePicker.js

@@ -45,7 +45,7 @@ var DatePicker = /** @class */ (function (_super) {
             void this.props.bind.value;
         }
         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)));
+            InputHelpers.surroundWithInputGroup(React.createElement("input", __assign({ type: "text" }, domProps, { ref: this.inputRef })), splitProps.editor, domProps, this.inputRef)));
     };
     DatePicker.contextType = FormContext;
     DatePicker = __decorate([

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;
@@ -216,10 +222,10 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
             }
         };
         if (this.props.itemSource !== undefined) {
-            return Tooltip.fromDataAttributes(InputHelpers.surroundWithInputGroup(React.createElement(this.asyncSelectImplementation, __assign({}, nativeProps, { placeholder: (_g = this.props.placeholder) !== null && _g !== void 0 ? _g : "", classNamePrefix: "react-select-bs", defaultOptions: defaultItems, loadOptions: this.onKeyPress, isMulti: bindItems !== undefined, noOptionsMessage: function (c) { var _a, _b; return c.inputValue && c.inputValue.length >= (minCharacters !== null && minCharacters !== void 0 ? minCharacters : 1) ? ((_a = _this.props.noRecordsPrompt) !== null && _a !== void 0 ? _a : "No records found") : ((_b = _this.props.typeToSearchPrompt) !== null && _b !== void 0 ? _b : "Type to search..."); }, value: value, onChange: this.onItemSelected, components: components })), splitProps.editor), nativeProps);
+            return Tooltip.fromDataAttributes(InputHelpers.surroundWithInputGroup(React.createElement(this.asyncSelectImplementation, __assign({}, nativeProps, { placeholder: (_g = this.props.placeholder) !== null && _g !== void 0 ? _g : "", classNamePrefix: "react-select-bs", defaultOptions: defaultItems, loadOptions: this.onKeyPress, isMulti: bindItems !== undefined, noOptionsMessage: function (c) { var _a, _b; return c.inputValue && c.inputValue.length >= (minCharacters !== null && minCharacters !== void 0 ? minCharacters : 1) ? ((_a = _this.props.noRecordsPrompt) !== null && _a !== void 0 ? _a : "No records found") : ((_b = _this.props.typeToSearchPrompt) !== null && _b !== void 0 ? _b : "Type to search..."); }, value: value, onChange: this.onItemSelected, components: components })), splitProps.editor, { disabled: nativeProps.isDisabled }), nativeProps);
         }
         else {
-            return Tooltip.fromDataAttributes(InputHelpers.surroundWithInputGroup(React.createElement(this.selectImplementation, __assign({}, nativeProps, { placeholder: (_h = this.props.placeholder) !== null && _h !== void 0 ? _h : "", classNamePrefix: "react-select-bs", options: defaultItems, isLoading: this.isLoading, isMulti: bindItems !== undefined, noOptionsMessage: function (c) { var _a; return (_a = _this.props.noRecordsPrompt) !== null && _a !== void 0 ? _a : "No records found"; }, value: value, onChange: this.onItemSelected, components: components })), splitProps.editor), nativeProps);
+            return Tooltip.fromDataAttributes(InputHelpers.surroundWithInputGroup(React.createElement(this.selectImplementation, __assign({}, nativeProps, { placeholder: (_h = this.props.placeholder) !== null && _h !== void 0 ? _h : "", classNamePrefix: "react-select-bs", options: defaultItems, isLoading: this.isLoading, isMulti: bindItems !== undefined, noOptionsMessage: function (c) { var _a; return (_a = _this.props.noRecordsPrompt) !== null && _a !== void 0 ? _a : "No records found"; }, value: value, onChange: this.onItemSelected, components: components })), splitProps.editor, { disabled: nativeProps.isDisabled }), nativeProps);
         }
     };
     AutoCompleteDropDown.prototype.getOption = function (content, additionalClass) {

package/dist/ReactComponents/DropDown/DropDown.js

@@ -136,7 +136,7 @@ var DropDown = /** @class */ (function (_super) {
                     addBlankItem && React.createElement("option", { className: "option-default" }, notFound ? "(Not found): ".concat(value) : nullText),
                     items.map(function (item) { return (React.createElement("option", { value: item[_this.valueMember], key: item[_this.valueMember] }, item[_this.displayMember])); }));
         }
-        return (InputHelpers.surroundWithInputGroup(control, splitProps.editor));
+        return (InputHelpers.surroundWithInputGroup(control, splitProps.editor, domProps));
     };
     DropDown.contextType = FormContext;
     DropDown = __decorate([

package/dist/ReactComponents/Input.js

@@ -112,7 +112,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, this.domRef));
+        return (InputHelpers.surroundWithInputGroup(inputElement, splitProps.editor, domProps, this.domRef));
     };
     Input.contextType = FormContext;
     __decorate([

package/dist/ReactComponents/InputHelpers.d.ts

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { ICommonEditorProps } from './PropTypes';
 export declare class InputHelpers {
     private static iconFactory?;
-    static surroundWithInputGroup<T extends React.ReactNode>(element: T, props: ICommonEditorProps, inputRef?: React.RefObject<HTMLElement>): React.JSX.Element | T;
+    static surroundWithInputGroup<T extends React.ReactNode>(element: T, props: ICommonEditorProps, domProps: React.HTMLProps<HTMLElement>, inputRef?: React.RefObject<HTMLElement>): React.JSX.Element | T;
     private static getElement;
 }

package/dist/ReactComponents/InputHelpers.js

@@ -5,13 +5,13 @@ import BootstrapUtils from "./BootstrapUtils";
 var InputHelpers = /** @class */ (function () {
     function InputHelpers() {
     }
-    InputHelpers.surroundWithInputGroup = function (element, props, inputRef) {
+    InputHelpers.surroundWithInputGroup = function (element, props, domProps, inputRef) {
         if (!this.iconFactory) {
             this.iconFactory = Misc.Globals.appService.get(NeoReactTypes.Components.IconFactory);
         }
         if (props.requiresGroup) {
-            var isBsPre5 = BootstrapUtils.isPre5;
-            return (React.createElement("div", { className: "input-group" },
+            var isBsPre5 = BootstrapUtils.isPre5, 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),
                 element,
                 this.getElement(isBsPre5, "input-group-append", inputRef, props.appendText, props.appendIcon, props.append)));

package/dist/ReactComponents/Notifications/Alert.d.ts

@@ -1,7 +1,11 @@
 import React from "react";
 import { Components } from "@singularsystems/neo-core";
 import CollapsableBase from '../CollapsableBase';
-export default class Alert extends CollapsableBase<Components.INotificationOptions & React.HTMLProps<HTMLDivElement>> {
+interface IAlertProps {
+    isOutline?: boolean;
+}
+export default class Alert extends CollapsableBase<Components.INotificationOptions & IAlertProps & React.HTMLProps<HTMLDivElement>> {
     private iconFactory;
     render(): React.JSX.Element;
 }
+export {};

package/dist/ReactComponents/Notifications/Alert.js

@@ -13,8 +13,8 @@ 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, native = __rest(_a, ["variant", "heading", "show", "bindShow", "autoCloseTimeout", "animateInitial", "state", "onHidden", "refreshValue", "icon"]);
-        var className = Utils.joinWithSpaces(native.className, "alert", "alert-" + variant, "collapsable");
+        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" : ""));
         if (bindShow) {
             className += " alert-dismissible";
         }

package/dist/ReactComponents/NumberInput.js

@@ -246,7 +246,7 @@ var NumberInput = /** @class */ (function (_super) {
             var decimals = NumberUtils.getDecimalPlaces(this.formatState.formatString);
             domProps.step = decimals === 0 ? "1" : "0.".concat("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, this.inputElement));
+        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, domProps, this.inputElement));
     };
     NumberInput.contextType = FormContext;
     NumberInput = __decorate([

package/dist/ReactComponents/_Exports.d.ts

@@ -1,5 +1,6 @@
 import Alert from './Notifications/Alert';
 import AutoCompleteDropDown from './DropDown/AutoCompleteDropDown';
+import Badge from './Badge';
 import Button from './Button';
 import Card from './Card';
 import Collapsable from './Collapsable';
@@ -39,4 +40,4 @@ import ToastContainer from './Notifications/ToastContainer';
 import Tooltip from './Tooltip';
 import TooltipProvider from './TooltipProvider';
 import ValidationSummary from './ValidationSummary';
-export { Alert, AutoCompleteDropDown, Button, Card, Checkbox, Collapsable, ColorPicker, ContextMenuContainer, DatePicker, DropDown, FileBasicInput, FileContext, FileDropArea, FileInput, FileUploadButton, FileUploadProgress, Form, FormContext, FormGroup, FormGroupFloating, FormGroupInline, GridLayout, Icon, Input, Link, Loader, Modal, ModalContainer, NumberInput, Pager, PagerControlsBasic, PageSizeControl, Passwordbox, ProgressBar, RadioList, Slider, TabContainer, Tab, Textbox, Toast, ToastContainer, Tooltip, TooltipProvider, ValidationSummary };
+export { Alert, AutoCompleteDropDown, Badge, Button, Card, Checkbox, Collapsable, ColorPicker, ContextMenuContainer, DatePicker, DropDown, FileBasicInput, FileContext, FileDropArea, FileInput, FileUploadButton, FileUploadProgress, Form, FormContext, FormGroup, FormGroupFloating, FormGroupInline, GridLayout, Icon, Input, Link, Loader, Modal, ModalContainer, NumberInput, Pager, PagerControlsBasic, PageSizeControl, Passwordbox, ProgressBar, RadioList, Slider, TabContainer, Tab, Textbox, Toast, ToastContainer, Tooltip, TooltipProvider, ValidationSummary };

package/dist/ReactComponents/_Exports.js

@@ -1,5 +1,6 @@
 import Alert from './Notifications/Alert';
 import AutoCompleteDropDown from './DropDown/AutoCompleteDropDown';
+import Badge from './Badge';
 import Button from './Button';
 import Card from './Card';
 import Collapsable from './Collapsable';
@@ -39,4 +40,4 @@ import ToastContainer from './Notifications/ToastContainer';
 import Tooltip from './Tooltip';
 import TooltipProvider from './TooltipProvider';
 import ValidationSummary from './ValidationSummary';
-export { Alert, AutoCompleteDropDown, Button, Card, Checkbox, Collapsable, ColorPicker, ContextMenuContainer, DatePicker, DropDown, FileBasicInput, FileContext, FileDropArea, FileInput, FileUploadButton, FileUploadProgress, Form, FormContext, FormGroup, FormGroupFloating, FormGroupInline, GridLayout, Icon, Input, Link, Loader, Modal, ModalContainer, NumberInput, Pager, PagerControlsBasic, PageSizeControl, Passwordbox, ProgressBar, RadioList, Slider, TabContainer, Tab, Textbox, Toast, ToastContainer, Tooltip, TooltipProvider, ValidationSummary };
+export { Alert, AutoCompleteDropDown, Badge, Button, Card, Checkbox, Collapsable, ColorPicker, ContextMenuContainer, DatePicker, DropDown, FileBasicInput, FileContext, FileDropArea, FileInput, FileUploadButton, FileUploadProgress, Form, FormContext, FormGroup, FormGroupFloating, FormGroupInline, GridLayout, Icon, Input, Link, Loader, Modal, ModalContainer, NumberInput, Pager, PagerControlsBasic, PageSizeControl, Passwordbox, ProgressBar, RadioList, Slider, TabContainer, Tab, Textbox, Toast, ToastContainer, Tooltip, TooltipProvider, ValidationSummary };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@singularsystems/neo-react",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "React application logic and components for the Neo client library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/styles/Badge.scss

@@ -0,0 +1,8 @@
+div.badge {
+  &.badge-lg {
+    padding: 5px 10px;
+    min-width: 100px;
+    font-size: 0.8rem;
+    width: fit-content;
+  }
+}

package/styles/Neo.scss

@@ -1,3 +1,4 @@
+@import './Badge.scss';
 @import './Button.scss';
 @import './Card.scss';
 @import './ColorPicker.scss';