@singularsystems/neo-react 1.1.1 → 1.1.2

package/dist/ReactComponents/Button.js

@@ -64,6 +64,7 @@ var Button = /** @class */ (function (_super) {
         var _b = this.props, isSubmit = _b.isSubmit, variant = _b.variant, size = _b.size, isOutline = _b.isOutline, icon = _b.icon, iconAlignment = _b.iconAlignment, text = _b.text, menuItems = _b.menuItems, splitMenu = _b.splitMenu, menuAlignment = _b.menuAlignment, buttonGroupClassName = _b.buttonGroupClassName, tooltip = _b.tooltip, task = _b.task, isBusy = _b.isBusy, pulse = _b.pulse, customVariant = _b.customVariant, native = __rest(_b, ["isSubmit", "variant", "size", "isOutline", "icon", "iconAlignment", "text", "menuItems", "splitMenu", "menuAlignment", "buttonGroupClassName", "tooltip", "task", "isBusy", "pulse", "customVariant"]);
         native.type = isSubmit ? "submit" : "button";
         var variantClassName = ((_a = customVariant !== null && customVariant !== void 0 ? customVariant : variant) !== null && _a !== void 0 ? _a : "primary");
+        var isLoading = isBusy || (task === null || task === void 0 ? void 0 : task.isBusy);
         var isDropDown = menuItems && menuItems.length;
         var buttonClasses = "btn btn-" + (isOutline ? "outline-" : "") + variantClassName;
         if (size)
@@ -76,7 +77,7 @@ var Button = /** @class */ (function (_super) {
         if (isBusy !== undefined || task !== undefined) {
             iconStyle = { fixedWidth: true };
         }
-        if (isBusy || (task === null || task === void 0 ? void 0 : task.isBusy)) {
+        if (isLoading) {
             iconStyle.fixedWidth = true;
             iconStyle.spin = true;
             icon = Misc.Settings.icons.loadingIcon;
@@ -92,7 +93,7 @@ var Button = /** @class */ (function (_super) {
             innerText = text;
         var iconSpace = icon && innerText ? " " : "";
         // Icon
-        var iconElement = this.iconFactory.getIconComponent(icon, iconStyle);
+        var iconElement = (isLoading || !innerText || !Misc.Settings.buttons.suppressIcons) ? this.iconFactory.getIconComponent(icon, iconStyle) : undefined;
         // Tooltip
         if (tooltip) {
             Tooltip.setDomProperties(native, tooltip);
@@ -100,13 +101,13 @@ var Button = /** @class */ (function (_super) {
         var root;
         // Main button
         var buttonChildren = [];
-        if (icon && iconAlignment !== "right")
+        if (iconElement && iconAlignment !== "right")
             buttonChildren.push(iconElement, iconSpace);
         buttonChildren.push(innerText);
         if (isDropDown && !splitMenu) {
             buttonChildren.push(" ");
         }
-        if (icon && iconAlignment === "right")
+        if (iconElement && iconAlignment === "right")
             buttonChildren.push(iconSpace, iconElement);
         var mainButton = React.createElement.apply(React, __spreadArray(["button", native], buttonChildren, false));
         var buttonGroupClasses = "btn-group";

package/dist/ReactComponents/Grid/Column.js

@@ -169,7 +169,12 @@ var Column = /** @class */ (function (_super) {
                     displayValue = DateUtils.format(rawValue, props.dateProps ? props.dateProps.formatString : undefined);
                 }
                 else if (this.checkboxType !== CheckboxType.None) {
-                    editor = React.createElement("i", { className: rawValue ? Misc.Settings.grid.boolTrueClass : Misc.Settings.grid.boolFalseClass });
+                    if (Misc.Settings.grid.boolTrueIcon) {
+                        editor = rawValue ? Misc.Settings.grid.boolTrueIcon : Misc.Settings.grid.boolFalseIcon;
+                    }
+                    else {
+                        editor = React.createElement("i", { className: rawValue ? Misc.Settings.grid.boolTrueClass : Misc.Settings.grid.boolFalseClass });
+                    }
                 }
                 else if (this.controlType === ControlType.DropDown) {
                     editor = BindPropsHelper.getFormControl(props);

package/dist/ReactComponents/Grid/Grid.js

@@ -1,7 +1,7 @@
 import { __assign, __decorate, __extends, __metadata, __rest } from "tslib";
 import * as React from 'react';
 import { Data, Utils, Misc } from '@singularsystems/neo-core';
-import { observer } from 'mobx-react';
+import { observer, Observer } from 'mobx-react';
 import NeoButton from '../Button';
 import { DataViewContext } from '../../React/DataView';
 import { StickyTableHeader } from './StickyTableHeader';
@@ -45,7 +45,7 @@ var Grid = /** @class */ (function (_super) {
     };
     Grid.prototype.render = function () {
         var _this = this;
-        var _a = this.props, items = _a.items, showAddButton = _a.showAddButton, addButton = _a.addButton, filterPredicate = _a.filterPredicate, keyProperty = _a.keyProperty, allowSort = _a.allowSort, expandAll = _a.expandAll, collapseAll = _a.collapseAll, initialSort = _a.initialSort, initialSortAscending = _a.initialSortAscending, isBordered = _a.isBordered, isStriped = _a.isStriped, isBorderless = _a.isBorderless, showHover = _a.showHover, isSmallTable = _a.isSmallTable, footerContent = _a.footerContent, footerButtons = _a.footerButtons, stickyHeader = _a.stickyHeader, enableRowIndexes = _a.enableRowIndexes, domProps = __rest(_a, ["items", "showAddButton", "addButton", "filterPredicate", "keyProperty", "allowSort", "expandAll", "collapseAll", "initialSort", "initialSortAscending", "isBordered", "isStriped", "isBorderless", "showHover", "isSmallTable", "footerContent", "footerButtons", "stickyHeader", "enableRowIndexes"]);
+        var _a = this.props, items = _a.items, showAddButton = _a.showAddButton, addButton = _a.addButton, filterPredicate = _a.filterPredicate, keyProperty = _a.keyProperty, allowSort = _a.allowSort, expandAll = _a.expandAll, collapseAll = _a.collapseAll, initialSort = _a.initialSort, initialSortAscending = _a.initialSortAscending, isBordered = _a.isBordered, isStriped = _a.isStriped, isBorderless = _a.isBorderless, showHover = _a.showHover, isSmallTable = _a.isSmallTable, footerContent = _a.footerContent, footerButtons = _a.footerButtons, stickyHeader = _a.stickyHeader, enableRowIndexes = _a.enableRowIndexes, children = _a.children, domProps = __rest(_a, ["items", "showAddButton", "addButton", "filterPredicate", "keyProperty", "allowSort", "expandAll", "collapseAll", "initialSort", "initialSortAscending", "isBordered", "isStriped", "isBorderless", "showHover", "isSmallTable", "footerContent", "footerButtons", "stickyHeader", "enableRowIndexes", "children"]);
         if (expandAll === true) {
             this.gridContext.expandAll = true;
         }
@@ -101,14 +101,16 @@ 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, true, -1)),
-                React.createElement(TableSection, { type: "body" }, this.gridContext.dataView.getItems().map(function (item, index) { return (React.createElement(ItemGroup, { index: enableRowIndexes ? index : 0, item: item, key: keyProperty ? item[keyProperty] : item.entityIdentifier, template: _this.props.children })); })),
-                (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, true, -1),
-                        footerContent !== undefined && footerContent(this.gridContext.dataView.getItems()),
-                        (showAddButton || addButton || footerButtons) &&
-                            React.createElement(AddButtonRow, { addButton: addButton, showAddButton: showAddButton, additionalContent: footerButtons })))));
+                React.createElement(TableSection, { type: "header" }, this.headerItem && children(this.headerItem, this.headerItem.meta, true, -1)),
+                React.createElement(TableSection, { type: "body" }, this.gridContext.dataView.getItems().map(function (item, index) { return (React.createElement(ItemGroup, { index: enableRowIndexes ? index : 0, item: item, key: keyProperty ? item[keyProperty] : item.entityIdentifier, template: 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 && children(_this.headerItem, _this.headerItem.meta, true, -1),
+                            footerContent !== undefined && footerContent(_this.gridContext.dataView.getItems()),
+                            (showAddButton || addButton || footerButtons) &&
+                                React.createElement(AddButtonRow, { addButton: addButton, showAddButton: showAddButton, additionalContent: footerButtons })));
+                }))));
     };
     Grid.prototype.setInitialSort = function (initialSort, initialSortAscending) {
         var _a;

package/dist/ReactComponents/Input.d.ts

@@ -16,6 +16,8 @@ export interface IInputSpecificProps {
      * Automatically sets type to 'password'.
      */
     showPasswordButton?: boolean | Components.IButtonOptions;
+    /** Alternate label, currently only used to provide a left label for the switch component. */
+    altLabel?: string | JSX.Element;
 }
 export interface IInputProps extends IBindableEditorProps<HTMLInputElement> {
     input?: IInputSpecificProps;

package/dist/ReactComponents/Input.js

@@ -96,12 +96,21 @@ var Input = /** @class */ (function (_super) {
             inputElement = React.createElement("textarea", __assign({}, domProps, { ref: this.domRef, rows: inputProps.rows }));
         }
         if (this.type === "checkbox") {
+            var isSwitch = (inputProps === null || inputProps === void 0 ? void 0 : inputProps.type) === "switch";
             var wrapperClassName = isBsPre5 ?
-                "custom-control custom-".concat((inputProps === null || inputProps === void 0 ? void 0 : inputProps.type) === "switch" ? "switch" : "checkbox") :
-                "form-check".concat((inputProps === null || inputProps === void 0 ? void 0 : inputProps.type) === "switch" ? " form-switch" : "");
+                "custom-control custom-".concat(isSwitch ? "switch" : "checkbox") :
+                "form-check".concat(isSwitch ? " form-switch" : "");
+            if (isSwitch && inputProps.altLabel) {
+                wrapperClassName += " form-switch-inline";
+            }
             inputElement = React.createElement("div", { className: wrapperClassName },
                 inputElement,
                 React.createElement("label", { htmlFor: domProps.id, className: isBsPre5 ? "custom-control-label" : "form-check-label" }, (inputProps.label ? inputProps.label : "")));
+            if (isSwitch && inputProps.altLabel) {
+                inputElement = React.createElement(React.Fragment, null,
+                    React.createElement("label", { htmlFor: domProps.id, className: isBsPre5 ? "custom-control-label" : "form-check-label" }, inputProps.altLabel),
+                    inputElement);
+            }
         }
         if (showPasswordButton) {
             var buttonOptions = { variant: "primary", isOutline: true };

package/dist/ReactComponents/RadioList.d.ts

@@ -13,6 +13,9 @@ export interface IRadioListSpecificProps<T> {
     valueMember?: keyof T;
     /** Property name to use for the radio button text. Only applies when using items. */
     displayMember?: keyof T;
+    onItemSelected?: (item: T) => void;
+    /** An array of tooltips, one per item in the order of the items. */
+    tooltips?: (string | undefined)[];
 }
 export interface IRadioListProps<T> extends IBindableEditorProps<HTMLSelectElement> {
     radioList: IRadioListSpecificProps<T>;
@@ -25,5 +28,6 @@ export default class RadioList<T> extends ComponentBase<IRadioListProps<T>> {
     private items;
     private preRender;
     private createEnumList;
+    private onItemSelected;
     render(): React.JSX.Element;
 }

package/dist/ReactComponents/RadioList.js

@@ -1,4 +1,4 @@
-import { __decorate, __extends } from "tslib";
+import { __assign, __decorate, __extends } from "tslib";
 import React from 'react';
 import { EnumHelper, Utils } from '@singularsystems/neo-core';
 import { observer } from 'mobx-react';
@@ -21,7 +21,7 @@ var RadioList = /** @class */ (function (_super) {
         }
         else if (this.props.radioList.enumType && this.props.radioList.enumType !== this.previousEnumType) {
             this.previousEnumType = this.props.radioList.enumType;
-            this.items = EnumHelper.asList(this.props.radioList.enumType);
+            this.items = EnumHelper.asList(this.props.radioList.enumType).map(function (item) { return (__assign(__assign({}, item), { _item: item })); });
         }
     };
     RadioList.prototype.createEnumList = function (list) {
@@ -29,27 +29,34 @@ var RadioList = /** @class */ (function (_super) {
         if (list.length) {
             var _c = LookupHelper.findMembers(list[0], (_a = this.props.radioList.valueMember) !== null && _a !== void 0 ? _a : "", (_b = this.props.radioList.displayMember) !== null && _b !== void 0 ? _b : "", true), valueMember_1 = _c.valueMember, displayMember_1 = _c.displayMember;
             if (valueMember_1 && displayMember_1) {
-                this.items = list.map(function (item) { return ({ id: item[valueMember_1], name: item[displayMember_1] }); });
+                this.items = list.map(function (item) { return ({ id: item[valueMember_1], name: item[displayMember_1], _item: item }); });
             }
         }
     };
+    RadioList.prototype.onItemSelected = function (item) {
+        this.props.bind.value = item.id;
+        if (this.props.radioList.onItemSelected !== undefined) {
+            this.props.radioList.onItemSelected(item._item);
+        }
+    };
     RadioList.prototype.render = function () {
         var _this = this;
         var _a;
         this.preRender();
         var splitProps = BindPropsHelper.normaliseEditorProps(this, this.props);
         var domProps = BindPropsHelper.autoSetDomProperties(splitProps, this.context);
+        var radioProps = this.props.radioList, tooltips = radioProps.tooltips;
         // TODO, how must validation show if not in form group?
         //const displayInfo = this.props.bind.validator.getDisplayState(this.context.validationDisplayMode);
         //displayInfo.applyToDom(domProps, !splitProps.inGroup);
         var isBsPre5 = BootstrapUtils.isPre5, prefix = isBsPre5 ? "custom-control" : "form-check";
         var bindValue = this.props.bind.value;
         var className = Utils.joinWithSpaces("neo-radio-list", (_a = splitProps.editorDom) === null || _a === void 0 ? void 0 : _a.className);
-        return React.createElement("div", { className: className }, this.items.map(function (item) {
+        return React.createElement("div", { className: className }, this.items.map(function (item, index) {
             var _a, _b;
-            return React.createElement("div", { className: "custom-radio " + prefix + (_this.props.radioList.inline ? " ".concat(prefix, "-inline") : ""), key: item.id },
-                React.createElement("input", { type: "radio", id: splitProps.uniqueID + ((_a = item.id) !== null && _a !== void 0 ? _a : ""), name: splitProps.uniqueID, checked: bindValue === item.id, disabled: domProps.disabled || domProps.readOnly, onChange: function () { return _this.props.bind.value = item.id; }, className: "".concat(prefix, "-input") }),
-                React.createElement("label", { className: "".concat(prefix, "-label"), htmlFor: splitProps.uniqueID + ((_b = item.id) !== null && _b !== void 0 ? _b : "") }, item.name));
+            return React.createElement("div", { className: "custom-radio " + prefix + (radioProps.inline ? " ".concat(prefix, "-inline") : ""), key: item.id },
+                React.createElement("input", { type: "radio", id: splitProps.uniqueID + ((_a = item.id) !== null && _a !== void 0 ? _a : ""), name: splitProps.uniqueID, checked: bindValue === item.id, disabled: domProps.disabled || domProps.readOnly, onChange: function () { return _this.onItemSelected(item); }, className: "".concat(prefix, "-input") }),
+                React.createElement("label", { className: "".concat(prefix, "-label"), htmlFor: splitProps.uniqueID + ((_b = item.id) !== null && _b !== void 0 ? _b : ""), "data-tip": tooltips && index < tooltips.length ? tooltips[index] : undefined }, item.name));
         }));
     };
     RadioList.contextType = FormContext;

package/package.json

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

package/styles/Button.scss

@@ -33,8 +33,12 @@ div.dropdown-menu {
     }
 }
 
-.btn {  
+.btn {
     &.min-width {
       min-width: 0;
     }
+
+    &:disabled {
+        pointer-events: auto;
+    }
 }

package/styles/DatePicker.scss

@@ -30,7 +30,7 @@ $neo-include-datepicker: true !default;
       text-align: center;
       font-size: 14px;
       transform-origin: center top;
-      z-index: 3; /* value of 3 to appear above bootstrap focus outline. */
+      z-index: 5; /* value of 5 to appear above bootstrap focus outline. */
     
       &.neo-datepicker-inline {
         position: static;
@@ -125,7 +125,7 @@ $neo-include-datepicker: true !default;
       
             &.selectable:hover {
               cursor: pointer;
-              background-color: color.adjust($form-focused-border, $lightness: 15%);
+              background-color: adjust-color($form-focused-border, $lightness: 15%);
             }
       
             &.today {

package/styles/Forms.scss

@@ -15,6 +15,10 @@
     justify-content: space-between;
 }
 
+.form-switch-inline {
+    display: inline-block;
+    margin-left: 0.5rem;
+}
 
 div.neo-form-group-floating {
     position: relative;