@singularsystems/neo-react 1.0.0-alpha.2 → 1.0.0-beta.0

package/dist/ReactComponents/PropTypes.js

@@ -1,236 +1,253 @@
-import { __assign, __rest } from "tslib";
-import { Misc, AppServices } from '@singularsystems/neo-core';
-import DropDown from './DropDown/DropDown';
-import NumberInput from './NumberInput';
-import DatePicker from './DatePicker';
-import Input from './Input';
-import RadioList from './RadioList';
-import * as React from 'react';
-import { DataType } from '@singularsystems/neo-core/dist/Model/Misc';
-import FileInput from './FileManager/FileInput';
-export var ControlType;
-(function (ControlType) {
-    ControlType[ControlType["Date"] = 0] = "Date";
-    ControlType[ControlType["Number"] = 1] = "Number";
-    ControlType[ControlType["DropDown"] = 2] = "DropDown";
-    ControlType[ControlType["Text"] = 3] = "Text";
-    ControlType[ControlType["File"] = 4] = "File";
-    ControlType[ControlType["RadioList"] = 5] = "RadioList";
-})(ControlType || (ControlType = {}));
-export var CheckboxType;
-(function (CheckboxType) {
-    CheckboxType[CheckboxType["None"] = 0] = "None";
-    CheckboxType[CheckboxType["Checkbox"] = 1] = "Checkbox";
-    CheckboxType[CheckboxType["Switch"] = 2] = "Switch";
-})(CheckboxType || (CheckboxType = {}));
-var BindPropsHelper = /** @class */ (function () {
-    function BindPropsHelper() {
-    }
-    Object.defineProperty(BindPropsHelper, "config", {
-        get: function () {
-            if (!this._config) {
-                this._config = Misc.Globals.appService.get(AppServices.NeoTypes.Config.ConfigModel);
-            }
-            return this._config;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /**
-     * Gets the correct input control type based on the props. E.g. Input / DatePicker / Select
-     * @param props Props passed to a multi type input container. E.g. FormGroup / Column
-     */
-    BindPropsHelper.getFormControl = function (props) {
-        switch (BindPropsHelper.getControlType(props)) {
-            case ControlType.Date:
-                return React.createElement(DatePicker, props);
-            case ControlType.Number:
-                return React.createElement(NumberInput, props);
-            case ControlType.DropDown:
-                return React.createElement(DropDown, props);
-            case ControlType.File:
-                return React.createElement(FileInput, props);
-            case ControlType.Text:
-                return React.createElement(Input, props);
-            case ControlType.RadioList:
-                return React.createElement(RadioList, props);
-        }
-    };
-    BindPropsHelper.getControlType = function (props) {
-        var propertyInfo = props.bind.propertyInfo;
-        if (props.dateProps || propertyInfo.propertyType === DataType.Date) {
-            return ControlType.Date;
-        }
-        else if (props.select) {
-            return ControlType.DropDown;
-        }
-        else if (props.numProps || propertyInfo.propertyType === Misc.DataType.Float || propertyInfo.propertyType === Misc.DataType.Int || propertyInfo.propertyType === Misc.DataType.Decimal) {
-            return ControlType.Number;
-        }
-        else if (props.fileProps) {
-            return ControlType.File;
-        }
-        else if (props.radioList) {
-            return ControlType.RadioList;
-        }
-        else {
-            return ControlType.Text;
-        }
-    };
-    BindPropsHelper.getCheckBoxType = function (props, instance) {
-        if (props.input && props.input.type) {
-            if (props.input.type === "checkbox")
-                return CheckboxType.Checkbox;
-            if (props.input.type === "switch")
-                return CheckboxType.Switch;
-        }
-        if (props.bind && !props.radioList) {
-            if (props.bind.propertyInfo.propertyType === Misc.DataType.NullableBoolean)
-                return CheckboxType.Checkbox;
-            if (props.bind.attachedTo && typeof props.bind.peek === "boolean")
-                return CheckboxType.Checkbox;
-            if (instance && typeof instance[props.bind.propertyInfo.propertyName] === "boolean")
-                return CheckboxType.Checkbox;
-        }
-        return CheckboxType.None;
-    };
-    /**
-     * Get the main bind property from a props object
-     */
-    BindPropsHelper.getBindProperty = function (allProps) {
-        return (allProps.bind || allProps.display || allProps.bindContext);
-    };
-    BindPropsHelper.splitCommonEditorProps = function (props) {
-        var isReadOnly = props.isReadOnly, readOnly = props.readOnly, isDisabled = props.isDisabled, disabled = props.disabled, prependText = props.prependText, prepend = props.prepend, appendText = props.appendText, append = props.append, inputElement = props.inputElement, rest = __rest(props, ["isReadOnly", "readOnly", "isDisabled", "disabled", "prependText", "prepend", "appendText", "append", "inputElement"]);
-        return {
-            editor: {
-                isReadOnly: (isReadOnly !== null && isReadOnly !== void 0 ? isReadOnly : readOnly), isDisabled: (isDisabled !== null && isDisabled !== void 0 ? isDisabled : disabled),
-                prependText: prependText,
-                prepend: prepend,
-                appendText: appendText,
-                append: append,
-                inputElement: inputElement,
-                requiresGroup: prependText !== undefined || prepend !== undefined || appendText !== undefined || append !== undefined
-            },
-            rest: rest
-        };
-    };
-    BindPropsHelper.normaliseContainerProps = function (component, props, inGroup, isBootstrap) {
-        // Split flattened props into components.
-        if (isBootstrap === void 0) { isBootstrap = true; }
-        var splitProps = this.splitCommonEditorProps(props);
-        var _a = splitProps.rest, 
-        // Bindable editor props
-        bind = _a.bind, display = _a.display, placeholder = _a.placeholder, 
-        // Editor selector props
-        select = _a.select, input = _a.input, dateProps = _a.dateProps, numProps = _a.numProps, fileProps = _a.fileProps, radioList = _a.radioList, 
-        // Common container props
-        label = _a.label, editorProps = _a.editorProps, editorTooltip = _a.editorTooltip, editorClassName = _a.editorClassName, editorStyle = _a.editorStyle, suppressDefaultContent = _a.suppressDefaultContent, bindContext = _a.bindContext, 
-        // Container dom
-        containerDom = __rest(_a, ["bind", "display", "placeholder", "select", "input", "dateProps", "numProps", "fileProps", "radioList", "label", "editorProps", "editorTooltip", "editorClassName", "editorStyle", "suppressDefaultContent", "bindContext"]);
-        var bindOrDisplay = BindPropsHelper.getBindProperty(props);
-        if (bindOrDisplay && bindOrDisplay.propertyInfo.isReadOnly)
-            splitProps.editor.isReadOnly = true;
-        if (!props.bind && props.display)
-            splitProps.editor.isReadOnly = true;
-        if (!editorProps)
-            editorProps = {};
-        if (editorTooltip) {
-            editorProps["data-tip"] = editorTooltip;
-        }
-        if (editorClassName) {
-            editorProps.className = editorClassName;
-        }
-        if (editorStyle) {
-            editorProps.style = editorStyle;
-        }
-        if (bindContext && suppressDefaultContent === undefined) {
-            suppressDefaultContent = true;
-        }
-        return {
-            bind: bindOrDisplay,
-            editor: __assign({ bind: bindOrDisplay, placeholder: this.getPlaceholderText(placeholder, bindOrDisplay === null || bindOrDisplay === void 0 ? void 0 : bindOrDisplay.propertyInfo) }, splitProps.editor),
-            editorDom: editorProps,
-            container: { label: label, editorTooltip: editorTooltip, editorClassName: editorClassName, editorStyle: editorStyle, bindContext: bindContext, suppressDefaultContent: suppressDefaultContent },
-            select: select,
-            input: input,
-            numProps: numProps,
-            dateProps: dateProps,
-            fileProps: fileProps,
-            radioList: radioList,
-            inGroup: inGroup,
-            uniqueID: (bindOrDisplay === null || bindOrDisplay === void 0 ? void 0 : bindOrDisplay.uniqueID) + "!" + component.uniqueId,
-            containerDom: containerDom,
-            isBootstrap: isBootstrap
-        };
-    };
-    BindPropsHelper.normaliseEditorProps = function (component, props) {
-        var nProps = props;
-        if (!nProps.editor) {
-            // Stand alone editor, normalise the props.
-            nProps = BindPropsHelper.normaliseContainerProps(component, props, false);
-            nProps.editorDom = nProps.containerDom;
-        }
-        return nProps;
-    };
-    BindPropsHelper.getPlaceholderText = function (placeholder, property) {
-        if (placeholder === true) {
-            return property.readableName;
-        }
-        else if (placeholder !== false) {
-            return placeholder;
-        }
-        return undefined;
-    };
-    BindPropsHelper.autoSetDomProperties = function (props, formContext, componentBlurFn, componentFocusFn) {
-        var _a;
-        var domProps = __assign({}, props.editorDom);
-        if (props.uniqueID) {
-            domProps.id = (_a = formContext.uniqueId) !== null && _a !== void 0 ? _a : props.uniqueID;
-        }
-        if (this.config.isTestOrDevelopment) {
-            domProps[BindPropsHelper.DataFieldName] = props.bind.propertyInfo.propertyName;
-        }
-        if (props.editor.isReadOnly || (formContext.allReadOnly && props.editor.isReadOnly === undefined)) {
-            domProps.readOnly = true;
-            if (!domProps.tabIndex)
-                domProps.tabIndex = -1;
-        }
-        if (props.editor.isDisabled || (formContext.allDisabled && props.editor.isDisabled === undefined)) {
-            domProps.disabled = true;
-        }
-        if (props.editor.placeholder) {
-            domProps.placeholder = props.editor.placeholder;
-        }
-        if (componentFocusFn) {
-            var parentFocusFn_1 = domProps.onFocus;
-            domProps.onFocus = function (e) {
-                if (parentFocusFn_1)
-                    parentFocusFn_1(e);
-                componentFocusFn(e);
-            };
-        }
-        domProps.onBlur = BindPropsHelper.blurIntercept(props.editor, domProps.onBlur, componentBlurFn);
-        return domProps;
-    };
-    /**
-     * Intercept the user specified blur event, and run the validation onBlur logic first.
-     * @param props Props specified on component.
-     * @param blurFn Blur function used internally by component.
-     */
-    BindPropsHelper.blurIntercept = function (props, domPropsBlur, blurFn) {
-        return function (e) {
-            if (props.bind)
-                props.bind.validator.hasBlurred = true;
-            if (blurFn)
-                blurFn(e);
-            if (props.onBlur)
-                props.onBlur(e);
-            if (domPropsBlur)
-                domPropsBlur(e);
-        };
-    };
-    BindPropsHelper.DataFieldName = "data-field-name";
-    return BindPropsHelper;
-}());
-export { BindPropsHelper };
+import { __assign, __rest } from "tslib";
+import { Misc, AppServices } from '@singularsystems/neo-core';
+import DropDown from './DropDown/DropDown';
+import NumberInput from './NumberInput';
+import DatePicker from './DatePicker';
+import Input from './Input';
+import RadioList from './RadioList';
+import * as React from 'react';
+import { DataType } from '@singularsystems/neo-core/dist/Model/Misc';
+import FileInput from './FileManager/FileInput';
+import Tooltip from './Tooltip';
+export var ControlType;
+(function (ControlType) {
+    ControlType[ControlType["Date"] = 0] = "Date";
+    ControlType[ControlType["Number"] = 1] = "Number";
+    ControlType[ControlType["DropDown"] = 2] = "DropDown";
+    ControlType[ControlType["Text"] = 3] = "Text";
+    ControlType[ControlType["File"] = 4] = "File";
+    ControlType[ControlType["RadioList"] = 5] = "RadioList";
+})(ControlType || (ControlType = {}));
+export var CheckboxType;
+(function (CheckboxType) {
+    CheckboxType[CheckboxType["None"] = 0] = "None";
+    CheckboxType[CheckboxType["Checkbox"] = 1] = "Checkbox";
+    CheckboxType[CheckboxType["Switch"] = 2] = "Switch";
+})(CheckboxType || (CheckboxType = {}));
+export var BindPropsHelper = /** @class */ (function () {
+    function BindPropsHelper() {
+    }
+    Object.defineProperty(BindPropsHelper, "config", {
+        get: function () {
+            if (!this._config) {
+                this._config = Misc.Globals.appService.get(AppServices.NeoTypes.Config.ConfigModel);
+            }
+            return this._config;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Gets the correct input control type based on the props. E.g. Input / DatePicker / Select
+     * @param props Props passed to a multi type input container. E.g. FormGroup / Column
+     */
+    BindPropsHelper.getFormControl = function (props) {
+        switch (BindPropsHelper.getControlType(props)) {
+            case ControlType.Date:
+                return React.createElement(DatePicker, props);
+            case ControlType.Number:
+                return React.createElement(NumberInput, props);
+            case ControlType.DropDown:
+                return React.createElement(DropDown, props);
+            case ControlType.File:
+                return React.createElement(FileInput, props);
+            case ControlType.Text:
+                return React.createElement(Input, props);
+            case ControlType.RadioList:
+                return React.createElement(RadioList, props);
+        }
+    };
+    BindPropsHelper.getControlType = function (props) {
+        var propertyInfo = props.bind.propertyInfo;
+        if (props.dateProps || propertyInfo.propertyType === DataType.Date) {
+            return ControlType.Date;
+        }
+        else if (props.select) {
+            return ControlType.DropDown;
+        }
+        else if (props.numProps || propertyInfo.propertyType === Misc.DataType.Float || propertyInfo.propertyType === Misc.DataType.Int || propertyInfo.propertyType === Misc.DataType.Decimal) {
+            return ControlType.Number;
+        }
+        else if (props.fileProps) {
+            return ControlType.File;
+        }
+        else if (props.radioList) {
+            return ControlType.RadioList;
+        }
+        else {
+            return ControlType.Text;
+        }
+    };
+    BindPropsHelper.getCheckBoxType = function (props, instance) {
+        if (props.input && props.input.type) {
+            if (props.input.type === "checkbox")
+                return CheckboxType.Checkbox;
+            if (props.input.type === "switch")
+                return CheckboxType.Switch;
+        }
+        if (props.bind && !props.radioList) {
+            if (props.bind.propertyInfo.propertyType === Misc.DataType.NullableBoolean)
+                return CheckboxType.Checkbox;
+            if (props.bind.attachedTo && typeof props.bind.peek === "boolean")
+                return CheckboxType.Checkbox;
+            if (instance && typeof instance[props.bind.propertyInfo.propertyName] === "boolean")
+                return CheckboxType.Checkbox;
+        }
+        return CheckboxType.None;
+    };
+    /**
+     * Get the main bind property from a props object
+     */
+    BindPropsHelper.getBindProperty = function (allProps) {
+        return (allProps.bind || allProps.display || allProps.bindContext);
+    };
+    BindPropsHelper.splitCommonEditorProps = function (props) {
+        var isReadOnly = props.isReadOnly, readOnly = props.readOnly, isDisabled = props.isDisabled, disabled = props.disabled, prependText = props.prependText, prepend = props.prepend, appendText = props.appendText, append = props.append, inputElement = props.inputElement, rest = __rest(props, ["isReadOnly", "readOnly", "isDisabled", "disabled", "prependText", "prepend", "appendText", "append", "inputElement"]);
+        return {
+            editor: {
+                isReadOnly: (isReadOnly !== null && isReadOnly !== void 0 ? isReadOnly : readOnly), isDisabled: (isDisabled !== null && isDisabled !== void 0 ? isDisabled : disabled),
+                prependText: prependText,
+                prepend: prepend,
+                appendText: appendText,
+                append: append,
+                inputElement: inputElement,
+                requiresGroup: prependText !== undefined || prepend !== undefined || appendText !== undefined || append !== undefined
+            },
+            rest: rest
+        };
+    };
+    BindPropsHelper.normaliseContainerProps = function (component, props, inGroup, isBootstrap) {
+        // Split flattened props into components.
+        var _a, _b, _c;
+        if (isBootstrap === void 0) { isBootstrap = true; }
+        var splitProps = this.splitCommonEditorProps(props);
+        var _d = splitProps.rest, 
+        // Bindable editor props
+        bind = _d.bind, display = _d.display, placeholder = _d.placeholder, 
+        // Editor selector props
+        select = _d.select, input = _d.input, dateProps = _d.dateProps, numProps = _d.numProps, fileProps = _d.fileProps, radioList = _d.radioList, 
+        // Common container props
+        label = _d.label, editorProps = _d.editorProps, editorTooltip = _d.editorTooltip, editorClassName = _d.editorClassName, editorStyle = _d.editorStyle, suppressDefaultContent = _d.suppressDefaultContent, bindContext = _d.bindContext, 
+        // Container dom
+        containerDom = __rest(_d, ["bind", "display", "placeholder", "select", "input", "dateProps", "numProps", "fileProps", "radioList", "label", "editorProps", "editorTooltip", "editorClassName", "editorStyle", "suppressDefaultContent", "bindContext"]);
+        var bindOrDisplay = BindPropsHelper.getBindProperty(props);
+        if (!bindOrDisplay) {
+            var child = containerDom.children;
+            var childBind = void 0;
+            if (child) {
+                if ((_a = child.type) === null || _a === void 0 ? void 0 : _a.getBindProp) {
+                    childBind = (_b = child.type) === null || _b === void 0 ? void 0 : _b.getBindProp(child.props);
+                }
+                else {
+                    childBind = (_c = child.props) === null || _c === void 0 ? void 0 : _c.bind;
+                }
+                if (childBind) {
+                    bindOrDisplay = childBind;
+                    bindContext = bindOrDisplay;
+                }
+            }
+        }
+        if (bindOrDisplay && bindOrDisplay.propertyInfo.isReadOnly)
+            splitProps.editor.isReadOnly = true;
+        if (!props.bind && props.display)
+            splitProps.editor.isReadOnly = true;
+        if (!editorProps)
+            editorProps = {};
+        if (editorTooltip) {
+            Tooltip.setDomProperties(editorProps, editorTooltip);
+        }
+        if (editorClassName) {
+            editorProps.className = editorClassName;
+        }
+        if (editorStyle) {
+            editorProps.style = editorStyle;
+        }
+        if (bindContext && suppressDefaultContent === undefined) {
+            suppressDefaultContent = true;
+        }
+        return {
+            bind: bindOrDisplay,
+            editor: __assign({ bind: bindOrDisplay, placeholder: this.getPlaceholderText(placeholder, bindOrDisplay === null || bindOrDisplay === void 0 ? void 0 : bindOrDisplay.propertyInfo) }, splitProps.editor),
+            editorDom: editorProps,
+            container: { label: label, editorTooltip: editorTooltip, editorClassName: editorClassName, editorStyle: editorStyle, bindContext: bindContext, suppressDefaultContent: suppressDefaultContent },
+            select: select,
+            input: input,
+            numProps: numProps,
+            dateProps: dateProps,
+            fileProps: fileProps,
+            radioList: radioList,
+            inGroup: inGroup,
+            uniqueID: (bindOrDisplay === null || bindOrDisplay === void 0 ? void 0 : bindOrDisplay.uniqueID) + "!" + component.uniqueId,
+            containerDom: containerDom,
+            isBootstrap: isBootstrap
+        };
+    };
+    BindPropsHelper.normaliseEditorProps = function (component, props) {
+        var nProps = props;
+        if (!nProps.editor) {
+            // Stand alone editor, normalise the props.
+            nProps = BindPropsHelper.normaliseContainerProps(component, props, false);
+            nProps.editorDom = nProps.containerDom;
+        }
+        return nProps;
+    };
+    BindPropsHelper.getPlaceholderText = function (placeholder, property) {
+        if (placeholder === true) {
+            return property.readableName;
+        }
+        else if (placeholder !== false) {
+            return placeholder;
+        }
+        return undefined;
+    };
+    BindPropsHelper.autoSetDomProperties = function (props, formContext, componentBlurFn, componentFocusFn) {
+        var _a;
+        var domProps = __assign({}, props.editorDom);
+        if (props.uniqueID) {
+            domProps.id = (_a = formContext.uniqueId) !== null && _a !== void 0 ? _a : props.uniqueID;
+        }
+        if (this.config.isTestOrDevelopment) {
+            domProps[BindPropsHelper.DataFieldName] = props.bind.propertyInfo.propertyName;
+        }
+        if (props.editor.isReadOnly || (formContext.allReadOnly && props.editor.isReadOnly === undefined)) {
+            domProps.readOnly = true;
+            if (!domProps.tabIndex)
+                domProps.tabIndex = -1;
+        }
+        if (props.editor.isDisabled || (formContext.allDisabled && props.editor.isDisabled === undefined)) {
+            domProps.disabled = true;
+        }
+        if (props.editor.placeholder) {
+            domProps.placeholder = props.editor.placeholder;
+        }
+        if (componentFocusFn) {
+            var parentFocusFn_1 = domProps.onFocus;
+            domProps.onFocus = function (e) {
+                if (parentFocusFn_1)
+                    parentFocusFn_1(e);
+                componentFocusFn(e);
+            };
+        }
+        domProps.onBlur = BindPropsHelper.blurIntercept(props.editor, domProps.onBlur, componentBlurFn);
+        return domProps;
+    };
+    /**
+     * Intercept the user specified blur event, and run the validation onBlur logic first.
+     * @param props Props specified on component.
+     * @param blurFn Blur function used internally by component.
+     */
+    BindPropsHelper.blurIntercept = function (props, domPropsBlur, blurFn) {
+        return function (e) {
+            if (props.bind)
+                props.bind.validator.hasBlurred = true;
+            if (blurFn)
+                blurFn(e);
+            if (props.onBlur)
+                props.onBlur(e);
+            if (domPropsBlur)
+                domPropsBlur(e);
+        };
+    };
+    BindPropsHelper.DataFieldName = "data-field-name";
+    return BindPropsHelper;
+}());

package/dist/ReactComponents/RadioList.d.ts

@@ -1,29 +1,29 @@
-import React from 'react';
-import { IBindableEditorProps } from './PropTypes';
-import ComponentBase from './ComponentBase';
-import { FormContext } from './FormContext';
-export interface IRadioListSpecificProps {
-    /** List of items to show. */
-    items?: any[];
-    /** Enum to show as a radio button list. */
-    enumType?: any;
-    /** True if the radio buttons should be displayed inline (horizontally). */
-    inline?: boolean;
-    /** Property name to use for the id. Only applies when using items. */
-    valueMember?: string | undefined;
-    /** Property name to use for the radio button text. Only applies when using items. */
-    displayMember?: string | undefined;
-}
-export interface IRadioListProps extends IBindableEditorProps<HTMLSelectElement> {
-    radioList: IRadioListSpecificProps;
-}
-export default class RadioList extends ComponentBase<IRadioListProps> {
-    static contextType: React.Context<import("./FormContext").FormContextParams>;
-    context: React.ContextType<typeof FormContext>;
-    private previousList?;
-    private previousEnumType?;
-    private items;
-    private preRender;
-    private createEnumList;
-    render(): JSX.Element;
-}
+import React from 'react';
+import { IBindableEditorProps } from './PropTypes';
+import ComponentBase from './ComponentBase';
+import { FormContext } from './FormContext';
+export interface IRadioListSpecificProps<T> {
+    /** List of items to show. */
+    items?: T[];
+    /** Enum to show as a radio button list. */
+    enumType?: any;
+    /** True if the radio buttons should be displayed inline (horizontally). */
+    inline?: boolean;
+    /** Property name to use for the id. Only applies when using items. */
+    valueMember?: keyof T;
+    /** Property name to use for the radio button text. Only applies when using items. */
+    displayMember?: keyof T;
+}
+export interface IRadioListProps<T> extends IBindableEditorProps<HTMLSelectElement> {
+    radioList: IRadioListSpecificProps<T>;
+}
+export default class RadioList<T> extends ComponentBase<IRadioListProps<T>> {
+    static contextType: React.Context<import("./FormContext").FormContextParams>;
+    context: React.ContextType<typeof FormContext>;
+    private previousList?;
+    private previousEnumType?;
+    private items;
+    private preRender;
+    private createEnumList;
+    render(): JSX.Element;
+}