cx 26.0.1 → 26.0.2

package/build/widgets/form/NumberField.js

@@ -0,0 +1,361 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** @jsxImportSource react */
+import { Widget, VDOM, getContent } from "../../ui/Widget";
+import { Field, getFieldTooltip } from "./Field";
+import { Format } from "../../ui/Format";
+import { Culture } from "../../ui/Culture";
+import { StringTemplate } from "../../data/StringTemplate";
+import { tooltipParentWillReceiveProps, tooltipParentWillUnmount, tooltipMouseMove, tooltipMouseLeave, tooltipParentDidMount, } from "../overlay/tooltip-ops";
+import { stopPropagation } from "../../util/eventCallbacks";
+import { Localization } from "../../ui/Localization";
+import ClearIcon from "../icons/clear";
+import { isString } from "../../util/isString";
+import { isNumber } from "../../util/isNumber";
+import { isDefined } from "../../util/isDefined";
+import { getActiveElement } from "../../util/getActiveElement";
+import { enableCultureSensitiveFormatting } from "../../ui/Format";
+import { KeyCode } from "../../util/KeyCode";
+import { autoFocus } from "../autoFocus";
+enableCultureSensitiveFormatting();
+export class NumberField extends Field {
+    declareData(...args) {
+        super.declareData({
+            value: this.emptyValue,
+            disabled: undefined,
+            readOnly: undefined,
+            enabled: undefined,
+            placeholder: undefined,
+            required: undefined,
+            format: undefined,
+            minValue: undefined,
+            maxValue: undefined,
+            constrain: undefined,
+            minExclusive: undefined,
+            maxExclusive: undefined,
+            incrementPercentage: undefined,
+            increment: undefined,
+            icon: undefined,
+            scale: undefined,
+            offset: undefined,
+        }, ...args);
+    }
+    init() {
+        if (isDefined(this.step))
+            this.increment = this.step;
+        if (isDefined(this.hideClear))
+            this.showClear = !this.hideClear;
+        if (this.alwaysShowClear)
+            this.showClear = true;
+        super.init();
+    }
+    prepareData(context, instance) {
+        let { data, state, cached } = instance;
+        data.formatted = Format.value(data.value, data.format);
+        if (!cached.data || data.value != cached.data.value)
+            state.empty = data.value == null;
+        super.prepareData(context, instance);
+    }
+    formatValue(context, { data }) {
+        return data.formatted;
+    }
+    parseValue(value, instance) {
+        if (this.onParseInput) {
+            let result = instance.invoke("onParseInput", value, instance);
+            if (result !== undefined)
+                return result;
+        }
+        return Culture.getNumberCulture().parse(value);
+    }
+    validate(context, instance) {
+        super.validate(context, instance);
+        let { data } = instance;
+        if (isNumber(data.value) && !data.error) {
+            if (isNumber(data.minValue)) {
+                if (data.value < data.minValue)
+                    data.error = StringTemplate.format(this.minValueErrorText, Format.value(data.minValue, data.format));
+                else if (data.value == data.minValue && data.minExclusive)
+                    data.error = StringTemplate.format(this.minExclusiveErrorText, Format.value(data.minValue, data.format));
+            }
+            if (isNumber(data.maxValue)) {
+                if (data.value > data.maxValue)
+                    data.error = StringTemplate.format(this.maxValueErrorText, Format.value(data.maxValue, data.format));
+                else if (data.value == data.maxValue && data.maxExclusive)
+                    data.error = StringTemplate.format(this.maxExclusiveErrorText, Format.value(data.maxValue, data.format));
+            }
+        }
+    }
+    renderInput(context, instance, key) {
+        return (_jsx(Input, { data: instance.data, instance: instance, label: this.labelPlacement && getContent(this.renderLabel(context, instance, "label")), help: this.helpPlacement && getContent(this.renderHelp(context, instance, "help")), icon: this.renderIcon(context, instance, "icon") }, key));
+    }
+    validateRequired(context, instance) {
+        return instance.state.empty && this.requiredText;
+    }
+}
+NumberField.prototype.baseClass = "numberfield";
+NumberField.prototype.reactOn = "enter blur";
+NumberField.prototype.format = "n";
+NumberField.prototype.inputType = "text";
+NumberField.prototype.maxValueErrorText = "Enter {0} or less.";
+NumberField.prototype.maxExclusiveErrorText = "Enter a number less than {0}.";
+NumberField.prototype.minValueErrorText = "Enter {0} or more.";
+NumberField.prototype.minExclusiveErrorText = "Enter a number greater than {0}.";
+NumberField.prototype.inputErrorText = "Invalid number entered.";
+NumberField.prototype.suppressErrorsUntilVisited = true;
+NumberField.prototype.incrementPercentage = 0.1;
+NumberField.prototype.scale = 1;
+NumberField.prototype.offset = 0;
+NumberField.prototype.snapToIncrement = true;
+NumberField.prototype.icon = null;
+NumberField.prototype.showClear = false;
+NumberField.prototype.alwaysShowClear = false;
+Widget.alias("numberfield", NumberField);
+Localization.registerPrototype("cx/widgets/NumberField", NumberField);
+class Input extends VDOM.Component {
+    input;
+    constructor(props) {
+        super(props);
+        this.state = {
+            focus: false,
+        };
+    }
+    render() {
+        let { data, instance, label, help, icon: iconVDOM } = this.props;
+        let { widget, state } = instance;
+        let { CSS, baseClass, suppressErrorsUntilVisited } = widget;
+        let icon = iconVDOM && _jsx("div", { className: CSS.element(baseClass, "left-icon"), children: iconVDOM });
+        let insideButton;
+        if (!data.readOnly && !data.disabled) {
+            if (widget.showClear &&
+                (((widget.alwaysShowClear || !data.required) && !data.empty) || instance.state.inputError))
+                insideButton = (_jsx("div", { className: CSS.element(baseClass, "clear"), onMouseDown: (e) => e.preventDefault(), onClick: (e) => this.onClearClick(e), children: _jsx(ClearIcon, { className: CSS.element(baseClass, "icon") }) }));
+        }
+        let empty = this.input ? !this.input.value : data.empty;
+        return (_jsxs("div", { className: CSS.expand(data.classNames, CSS.state({
+                visited: state.visited,
+                focus: this.state.focus,
+                icon: !!icon,
+                empty: empty && !data.placeholder,
+                error: data.error && (state.visited || !suppressErrorsUntilVisited || !empty),
+            })), style: data.style, onMouseDown: stopPropagation, onTouchStart: stopPropagation, children: [_jsx("input", { id: data.id, type: widget.inputType, className: CSS.expand(CSS.element(baseClass, "input"), data.inputClass), defaultValue: data.formatted, ref: (el) => {
+                        this.input = el || undefined;
+                    }, style: data.inputStyle, disabled: data.disabled, readOnly: data.readOnly, tabIndex: data.tabIndex, placeholder: data.placeholder, ...data.inputAttrs, onMouseMove: (e) => tooltipMouseMove(e, ...getFieldTooltip(this.props.instance)), onMouseLeave: (e) => tooltipMouseLeave(e, ...getFieldTooltip(this.props.instance)), onChange: (e) => this.onChange(e, "change"), onKeyDown: this.onKeyDown.bind(this), onBlur: (e) => {
+                        this.onChange(e, "blur");
+                    }, onFocus: (e) => this.onFocus(), onWheel: (e) => {
+                        this.onChange(e, "wheel");
+                    }, onClick: stopPropagation }), insideButton, icon, label, help] }));
+    }
+    UNSAFE_componentWillReceiveProps(props) {
+        let { data, state } = props.instance;
+        if (this.props.data.formatted != data.formatted && !state.inputError) {
+            this.input.value = props.data.formatted || "";
+            props.instance.setState({
+                inputError: false,
+            });
+        }
+        tooltipParentWillReceiveProps(this.input, ...getFieldTooltip(props.instance));
+    }
+    componentDidMount() {
+        tooltipParentDidMount(this.input, ...getFieldTooltip(this.props.instance));
+        autoFocus(this.input, this);
+    }
+    componentDidUpdate() {
+        autoFocus(this.input, this);
+    }
+    componentWillUnmount() {
+        if (this.input == getActiveElement() && this.input.value != this.props.data.formatted) {
+            this.onChange({ currentTarget: this.input }, "blur");
+        }
+        tooltipParentWillUnmount(this.props.instance);
+    }
+    getPreCursorDigits(text, cursor, decimalSeparator) {
+        let res = "";
+        for (let i = 0; i < cursor; i++) {
+            if ("0" <= text[i] && text[i] <= "9")
+                res += text[i];
+            else if (text[i] == decimalSeparator)
+                res += ".";
+            else if (text[i] == "-")
+                res += "-";
+        }
+        return res;
+    }
+    getLengthWithoutSuffix(text, decimalSeparator) {
+        let l = text.length;
+        while (l > 0) {
+            if ("0" <= text[l - 1] && text[l - 1] <= "9")
+                break;
+            if (text[l - 1] == decimalSeparator)
+                break;
+            l--;
+        }
+        return l;
+    }
+    getDecimalSeparator(format) {
+        let text = Format.value(0.11111111, format);
+        for (let i = text.length - 1; i >= 0; i--) {
+            if ("0" <= text[i] && text[i] <= "9")
+                continue;
+            if (text[i] == "," || text[i] == ".")
+                return text[i];
+            break;
+        }
+        return null;
+    }
+    updateCursorPosition(preCursorText) {
+        if (isString(preCursorText)) {
+            let cursor = 0;
+            let preCursor = 0;
+            let text = this.input.value || "";
+            while (preCursor < preCursorText.length && cursor < text.length) {
+                if (text[cursor] == preCursorText[preCursor]) {
+                    cursor++;
+                    preCursor++;
+                }
+                else {
+                    cursor++;
+                }
+            }
+            this.input.setSelectionRange(cursor, cursor);
+        }
+    }
+    calculateIncrement(value, strength) {
+        if (value == 0)
+            return 0.1;
+        let absValue = Math.abs(value * strength);
+        let log10 = Math.floor(Math.log10(absValue) + 0.001);
+        let size = Math.pow(10, log10);
+        if (absValue / size > 4.999)
+            return 5 * size;
+        if (absValue / size > 1.999)
+            return 2 * size;
+        return size;
+    }
+    onClearClick(e) {
+        this.input.value = "";
+        let { instance } = this.props;
+        instance.set("value", instance.widget.emptyValue, { immediate: true });
+    }
+    onKeyDown(e) {
+        let { instance } = this.props;
+        if (instance.widget.handleKeyDown(e, instance) === false)
+            return;
+        switch (e.keyCode) {
+            case KeyCode.enter:
+                this.onChange(e, "enter");
+                break;
+            case KeyCode.left:
+            case KeyCode.right:
+                e.stopPropagation();
+                break;
+        }
+    }
+    onChange(e, change) {
+        let { instance, data } = this.props;
+        let { widget } = instance;
+        let inputValue = e.currentTarget.value;
+        if (data.required) {
+            instance.setState({
+                empty: !inputValue,
+            });
+        }
+        if (change == "blur" && this.state.focus) {
+            this.setState({
+                focus: false,
+            });
+        }
+        let immediate = change == "blur" || change == "enter";
+        if ((widget.reactOn.indexOf(change) == -1 && !immediate) || data.disabled || data.readOnly)
+            return;
+        if (immediate)
+            instance.setState({ visited: true });
+        let value = null;
+        if (inputValue) {
+            let displayValue = widget.parseValue(inputValue, instance);
+            if (isNaN(displayValue)) {
+                instance.setState({
+                    inputError: instance.widget.inputErrorText,
+                });
+                return;
+            }
+            value = displayValue * data.scale + data.offset;
+            if (change == "wheel") {
+                e.preventDefault();
+                let increment = data.increment != null ? data.increment : this.calculateIncrement(value, data.incrementPercentage);
+                let deltaY = e.deltaY;
+                value = value + (deltaY < 0 ? increment : -increment);
+                if (widget.snapToIncrement) {
+                    value = Math.round(value / increment) * increment;
+                }
+                if (data.minValue != null) {
+                    if (data.minExclusive) {
+                        if (value <= data.minValue)
+                            return;
+                    }
+                    else {
+                        value = Math.max(value, data.minValue);
+                    }
+                }
+                if (data.maxValue != null) {
+                    if (data.maxExclusive) {
+                        if (value >= data.maxValue)
+                            return;
+                    }
+                    else {
+                        value = Math.min(value, data.maxValue);
+                    }
+                }
+            }
+            if (data.constrain) {
+                if (data.minValue != null) {
+                    if (value < data.minValue) {
+                        value = data.minValue;
+                    }
+                }
+                if (data.maxValue != null) {
+                    if (value > data.maxValue) {
+                        value = data.maxValue;
+                    }
+                }
+            }
+            let fmt = data.format;
+            let decimalSeparator = this.getDecimalSeparator(fmt) || Format.value(1.1, "n;1")[1];
+            let formatted = Format.value(value, fmt);
+            // Re-parse to avoid differences between formatted value and value in the store
+            value = widget.parseValue(formatted, instance) * data.scale + data.offset;
+            // Allow users to type numbers like 100.0003 or -0.05 without interruptions
+            // If the last typed character is zero or dot (decimal separator), skip processing it
+            let selectionEnd = this.input.selectionEnd;
+            if (change == "change" &&
+                this.input.selectionStart == selectionEnd &&
+                selectionEnd != null &&
+                selectionEnd >= this.getLengthWithoutSuffix(this.input.value, decimalSeparator) &&
+                (inputValue[selectionEnd - 1] == decimalSeparator ||
+                    (inputValue.indexOf(decimalSeparator) >= 0 && inputValue[selectionEnd - 1] == "0") ||
+                    (selectionEnd == 2 && inputValue[0] === "-" && inputValue[1] === "0")))
+                return;
+            if (change != "blur") {
+                // Format, but keep the correct cursor position
+                let preCursorText = this.getPreCursorDigits(this.input.value, this.input.selectionStart, decimalSeparator);
+                this.input.value = formatted;
+                this.updateCursorPosition(preCursorText);
+            }
+            else {
+                this.input.value = formatted;
+            }
+        }
+        instance.set("value", value, { immediate });
+        instance.setState({
+            inputError: false,
+            visited: true,
+        });
+    }
+    onFocus() {
+        let { instance } = this.props;
+        let { widget } = instance;
+        if (widget.trackFocus) {
+            this.setState({
+                focus: true,
+            });
+        }
+    }
+}

package/build/widgets/form/Radio.d.ts

@@ -0,0 +1,43 @@
+/** @jsxImportSource react */
+import type { RenderingContext } from "../../ui/RenderingContext";
+import type { Instance } from "../../ui/Instance";
+import { Field, FieldConfig, FieldInstance } from "./Field";
+import * as React from "react";
+import { BooleanProp, Prop, StringProp } from "../../ui/Prop";
+export interface RadioConfig extends FieldConfig {
+    /** Selected value. If the value is equal to `option`, the radio button appears checked. */
+    value?: Prop<number | string | boolean>;
+    /** Selected value. If the value is equal to `option`, the radio button appears checked. */
+    selection?: Prop<number | string | boolean>;
+    /** Value to be written into `value` if radio button is clicked. */
+    option?: Prop<number | string | boolean>;
+    /** Defaults to `false`. Used to make the field read-only. */
+    readOnly?: BooleanProp;
+    /** Text description. */
+    text?: StringProp;
+    /** Base CSS class to be applied to the field. Defaults to `radio`. */
+    baseClass?: string;
+    /** Use native radio HTML element. Default is `false`. */
+    native?: boolean;
+    /** Set to `true` to make the radio initially selected. */
+    default?: boolean;
+}
+export declare class Radio extends Field<RadioConfig> {
+    selection?: Prop<number | string | boolean>;
+    option?: Prop<number | string | boolean>;
+    native?: boolean;
+    default?: boolean;
+    value?: Prop<number | string | boolean>;
+    constructor(config?: RadioConfig);
+    declareData(...args: Record<string, unknown>[]): void;
+    init(): void;
+    formatValue(context: RenderingContext, { data }: Instance): React.ReactNode;
+    prepareData(context: RenderingContext, instance: FieldInstance<Radio>): void;
+    renderValue(context: RenderingContext, { data }: FieldInstance): React.ReactNode;
+    renderWrap(context: RenderingContext, instance: FieldInstance, key: string, content: React.ReactNode): React.ReactElement;
+    renderNativeCheck(context: RenderingContext, instance: Instance): React.ReactElement;
+    renderCheck(context: RenderingContext, instance: FieldInstance<Radio>): React.ReactElement;
+    renderInput(context: RenderingContext, instance: FieldInstance<Radio>, key: string): React.ReactElement;
+    handleClick(e: React.MouseEvent, instance: Instance): void;
+    handleChange(e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent, instance: Instance): void;
+}

package/build/widgets/form/Radio.js

@@ -0,0 +1,131 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Widget, VDOM, getContent } from "../../ui/Widget";
+import { Field, getFieldTooltip } from "./Field";
+import { tooltipMouseMove, tooltipMouseLeave } from "../overlay/tooltip-ops";
+import { stopPropagation } from "../../util/eventCallbacks";
+import { KeyCode } from "../../util/KeyCode";
+import { isUndefined } from "../../util/isUndefined";
+export class Radio extends Field {
+    constructor(config) {
+        super(config);
+    }
+    declareData(...args) {
+        super.declareData({
+            value: undefined,
+            selection: undefined,
+            option: undefined,
+            disabled: undefined,
+            enabled: undefined,
+            readOnly: undefined,
+            required: undefined,
+            text: undefined,
+        }, ...args);
+    }
+    init() {
+        if (this.selection)
+            this.value = this.selection;
+        super.init();
+    }
+    formatValue(context, { data }) {
+        return data.text;
+    }
+    prepareData(context, instance) {
+        super.prepareData(context, instance);
+        let { data } = instance;
+        data.checked = data.value === data.option;
+        if (this.default && isUndefined(data.value))
+            instance.set("value", data.option);
+    }
+    renderValue(context, { data }) {
+        if (data.value === data.option)
+            return super.renderValue(context, { data });
+        return null;
+    }
+    renderWrap(context, instance, key, content) {
+        var { data } = instance;
+        return (_jsxs("label", { className: data.classNames, style: data.style, onMouseDown: stopPropagation, onTouchStart: stopPropagation, onMouseMove: (e) => tooltipMouseMove(e, ...getFieldTooltip(instance)), onMouseLeave: (e) => tooltipMouseLeave(e, ...getFieldTooltip(instance)), onClick: (e) => {
+                this.handleClick(e, instance);
+            }, htmlFor: data.id, children: [content, this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))] }, key));
+    }
+    renderNativeCheck(context, instance) {
+        var { CSS, baseClass } = this;
+        var { data } = instance;
+        return (_jsx("input", { className: CSS.element(baseClass, "radio"), id: data.id, type: "radio", checked: data.checked, disabled: data.disabled, ...data.inputAttrs, onClick: stopPropagation, onChange: (e) => {
+                this.handleChange(e, instance);
+            } }, "input"));
+    }
+    renderCheck(context, instance) {
+        return _jsx(RadioCmp, { instance: instance, data: instance.data }, "check");
+    }
+    renderInput(context, instance, key) {
+        var { data } = instance;
+        var text = data.text || this.renderChildren(context, instance);
+        var { CSS, baseClass } = this;
+        return this.renderWrap(context, instance, key, [
+            this.native ? this.renderNativeCheck(context, instance) : this.renderCheck(context, instance),
+            text ? (_jsx("div", { className: CSS.element(baseClass, "text"), children: text }, "text")) : (_jsx("span", { className: CSS.element(baseClass, "baseline"), children: "\u00A0" }, "baseline")),
+        ]);
+    }
+    handleClick(e, instance) {
+        if (this.native)
+            e.stopPropagation();
+        else {
+            var el = document.getElementById(instance.data.id);
+            if (el)
+                el.focus();
+            e.preventDefault();
+            this.handleChange(e, instance);
+        }
+    }
+    handleChange(e, instance) {
+        var { data } = instance;
+        if (data.disabled || data.readOnly || data.viewMode)
+            return;
+        instance.set("value", data.option);
+    }
+}
+Radio.prototype.baseClass = "radio";
+Radio.prototype.native = false;
+Radio.prototype.default = false;
+Widget.alias("radio", Radio);
+class RadioCmp extends VDOM.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            value: props.data.checked,
+        };
+    }
+    UNSAFE_componentWillReceiveProps(props) {
+        this.setState({
+            value: props.data.checked,
+        });
+    }
+    render() {
+        var { instance, data } = this.props;
+        var { widget } = instance;
+        var { baseClass, CSS } = widget;
+        return (_jsx("span", { tabIndex: data.disabled ? undefined : data.tabIndex || 0, className: CSS.element(baseClass, "input", {
+                checked: this.state.value,
+            }), style: CSS.parseStyle(data.inputStyle), id: data.id, onClick: this.onClick.bind(this), onKeyDown: this.onKeyDown.bind(this) }, "check"));
+    }
+    onClick(e) {
+        var { instance, data } = this.props;
+        var { widget } = instance;
+        if (!data.disabled && !data.readOnly) {
+            e.stopPropagation();
+            e.preventDefault();
+            widget.handleChange(e, instance);
+        }
+    }
+    onKeyDown(e) {
+        let { instance } = this.props;
+        const widget = instance.widget;
+        if (widget.handleKeyDown && widget.handleKeyDown(e, instance) === false)
+            return;
+        switch (e.keyCode) {
+            case KeyCode.space:
+                this.onClick(e);
+                break;
+        }
+    }
+}

package/build/widgets/form/Select.d.ts

@@ -0,0 +1,40 @@
+/** @jsxImportSource react */
+import { HtmlElement, HtmlElementInstance } from "../HtmlElement";
+import { Field, FieldInstance } from "./Field";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import type { Instance } from "../../ui/Instance";
+import { FieldConfig } from "./Field";
+import { Prop, StringProp, BooleanProp } from "../../ui/Prop";
+export interface SelectConfig extends FieldConfig {
+    value?: Prop<number | string>;
+    emptyValue?: unknown;
+    enabled?: BooleanProp;
+    placeholder?: StringProp;
+    hideClear?: boolean;
+    showClear?: boolean;
+    alwaysShowClear?: boolean;
+    baseClass?: string;
+    multiple?: boolean;
+    convertValues?: boolean;
+    nullString?: string;
+}
+export declare class Select<Config extends SelectConfig = SelectConfig> extends Field<Config> {
+    baseClass: string;
+    hideClear?: boolean;
+    showClear: boolean;
+    alwaysShowClear: boolean;
+    multiple: boolean;
+    convertValues: boolean;
+    nullString: string;
+    declareData(...args: Record<string, unknown>[]): void;
+    init(): void;
+    renderInput(context: RenderingContext, instance: FieldInstance<Select>, key: string): React.ReactNode;
+    convert(value: string): string | number | boolean | null;
+    select(value: string, instance: Instance): void;
+    add(item: unknown): void;
+}
+export declare class Option extends HtmlElement {
+    declareData(...args: Record<string, unknown>[]): void;
+    prepareData(context: RenderingContext, instance: HtmlElementInstance): void;
+    render(context: RenderingContext, instance: HtmlElementInstance, key: string): React.ReactNode;
+}