cx 25.11.1 → 26.0.2

package/build/widgets/form/DateTimeField.js

@@ -0,0 +1,474 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StringTemplate } from "../../data/StringTemplate";
+import { Culture } from "../../ui/Culture";
+import { Cx } from "../../ui/Cx";
+import { Localization } from "../../ui/Localization";
+import { VDOM, Widget, getContent } from "../../ui/Widget";
+import { getActiveElement, parseDateInvariant } from "../../util";
+import { dateDiff } from "../../util/date/dateDiff";
+import { zeroTime } from "../../util/date/zeroTime";
+import { stopPropagation } from "../../util/eventCallbacks";
+import { Format } from "../../util/Format";
+import { isTouchDevice } from "../../util/isTouchDevice";
+import { isTouchEvent } from "../../util/isTouchEvent";
+import { KeyCode } from "../../util/KeyCode";
+import { autoFocus } from "../autoFocus";
+import ClearIcon from "../icons/clear";
+import DropdownIcon from "../icons/drop-down";
+import { Dropdown } from "../overlay/Dropdown";
+import { tooltipMouseLeave, tooltipMouseMove, tooltipParentDidMount, tooltipParentWillReceiveProps, tooltipParentWillUnmount, } from "../overlay/tooltip-ops";
+import { Calendar } from "./Calendar";
+import { DateTimePicker } from "./DateTimePicker";
+import { Field, getFieldTooltip } from "./Field";
+import { TimeList } from "./TimeList";
+export class DateTimeField extends Field {
+    constructor(config) {
+        super(config);
+    }
+    declareData(...args) {
+        super.declareData({
+            value: this.emptyValue,
+            disabled: undefined,
+            readOnly: undefined,
+            enabled: undefined,
+            placeholder: undefined,
+            required: undefined,
+            minValue: undefined,
+            minExclusive: undefined,
+            maxValue: undefined,
+            maxExclusive: undefined,
+            format: undefined,
+            icon: undefined,
+            autoOpen: undefined,
+        }, ...args);
+    }
+    init() {
+        if (typeof this.hideClear !== "undefined")
+            this.showClear = !this.hideClear;
+        if (this.alwaysShowClear)
+            this.showClear = true;
+        if (!this.format) {
+            switch (this.segment) {
+                case "datetime":
+                    this.format = "datetime;YYYYMMddhhmm";
+                    break;
+                case "time":
+                    this.format = "time;hhmm";
+                    break;
+                case "date":
+                    this.format = "date;yyyyMMMdd";
+                    break;
+            }
+        }
+        super.init();
+    }
+    prepareData(context, instance) {
+        let { data } = instance;
+        let dropdownInstance = instance;
+        if (data.value) {
+            let date = parseDateInvariant(data.value);
+            //  let date = new Date(data.value);
+            if (isNaN(date.getTime()))
+                data.formatted = String(data.value);
+            else {
+                // handle utc edge cases
+                if (this.segment == "date")
+                    date = zeroTime(date);
+                data.formatted = Format.value(date, data.format);
+            }
+            data.date = date;
+        }
+        else
+            data.formatted = "";
+        if (data.refDate)
+            data.refDate = zeroTime(parseDateInvariant(data.refDate));
+        if (data.maxValue)
+            data.maxValue = parseDateInvariant(data.maxValue);
+        if (data.minValue)
+            data.minValue = parseDateInvariant(data.minValue);
+        if (this.segment == "date") {
+            if (data.minValue)
+                data.minValue = zeroTime(data.minValue);
+            if (data.maxValue)
+                data.maxValue = zeroTime(data.maxValue);
+        }
+        dropdownInstance.lastDropdown = context.lastDropdown;
+        super.prepareData(context, instance);
+    }
+    validate(context, instance) {
+        super.validate(context, instance);
+        let { data, widget } = instance;
+        let dateTimeWidget = widget;
+        if (!data.error && data.date) {
+            if (isNaN(data.date))
+                data.error = this.inputErrorText;
+            else {
+                let d;
+                if (data.maxValue) {
+                    d = dateDiff(data.date, data.maxValue);
+                    if (d > 0)
+                        data.error = StringTemplate.format(this.maxValueErrorText, data.maxValue);
+                    else if (d == 0 && data.maxExclusive)
+                        data.error = StringTemplate.format(this.maxExclusiveErrorText, data.maxValue);
+                }
+                if (data.minValue) {
+                    d = dateDiff(data.date, data.minValue);
+                    if (d < 0)
+                        data.error = StringTemplate.format(this.minValueErrorText, data.minValue);
+                    else if (d == 0 && data.minExclusive)
+                        data.error = StringTemplate.format(this.minExclusiveErrorText, data.minValue);
+                }
+                if (dateTimeWidget.disabledDaysOfWeek) {
+                    if (dateTimeWidget.disabledDaysOfWeek.includes(data.date.getDay()))
+                        data.error = this.disabledDaysOfWeekErrorText;
+                }
+            }
+        }
+    }
+    renderInput(context, instance, key) {
+        return (_jsx(DateTimeInput, { instance: instance, data: instance.data, picker: {
+                value: this.value,
+                minValue: this.minValue,
+                maxValue: this.maxValue,
+                minExclusive: this.minExclusive,
+                maxExclusive: this.maxExclusive,
+                maxValueErrorText: this.maxValueErrorText,
+                maxExclusiveErrorText: this.maxExclusiveErrorText,
+                minValueErrorText: this.minValueErrorText,
+                minExclusiveErrorText: this.minExclusiveErrorText,
+            }, label: this.labelPlacement && getContent(this.renderLabel(context, instance, "label")), help: this.helpPlacement && getContent(this.renderHelp(context, instance, "help")), icon: getContent(this.renderIcon(context, instance, "icon")) }, key));
+    }
+    formatValue(context, { data }) {
+        return data.value ? data.formatted : null;
+    }
+    parseDate(date, instance) {
+        if (!date)
+            return null;
+        if (date instanceof Date)
+            return date;
+        if (this.onParseInput) {
+            let result = instance.invoke("onParseInput", date, instance);
+            if (result !== undefined)
+                return result;
+        }
+        date = Culture.getDateTimeCulture().parse(date, { useCurrentDateForDefaults: true });
+        return date;
+    }
+}
+DateTimeField.prototype.baseClass = "datetimefield";
+DateTimeField.prototype.maxValueErrorText = "Select {0:d} or before.";
+DateTimeField.prototype.maxExclusiveErrorText = "Select a date before {0:d}.";
+DateTimeField.prototype.minValueErrorText = "Select {0:d} or later.";
+DateTimeField.prototype.minExclusiveErrorText = "Select a date after {0:d}.";
+DateTimeField.prototype.inputErrorText = "Invalid date entered.";
+DateTimeField.prototype.disabledDaysOfWeekErrorText = "Selected day of week is not allowed.";
+DateTimeField.prototype.suppressErrorsUntilVisited = true;
+DateTimeField.prototype.icon = "calendar";
+DateTimeField.prototype.showClear = true;
+DateTimeField.prototype.alwaysShowClear = false;
+DateTimeField.prototype.reactOn = "enter blur";
+DateTimeField.prototype.segment = "datetime";
+DateTimeField.prototype.picker = "auto";
+DateTimeField.prototype.disabledDaysOfWeek = null;
+DateTimeField.prototype.focusInputFirst = false;
+Widget.alias("datetimefield", DateTimeField);
+Localization.registerPrototype("cx/widgets/DateTimeField", DateTimeField);
+class DateTimeInput extends VDOM.Component {
+    input;
+    dropdown;
+    scrollableParents;
+    openDropdownOnFocus = false;
+    updateDropdownPosition;
+    scrolling;
+    constructor(props) {
+        super(props);
+        props.instance.component = this;
+        this.state = {
+            dropdownOpen: false,
+            focus: false,
+        };
+        this.updateDropdownPosition = () => { };
+    }
+    getDropdown() {
+        if (this.dropdown)
+            return this.dropdown;
+        let { widget, lastDropdown } = this.props.instance;
+        let dateTimeWidget = widget;
+        let pickerConfig;
+        switch (dateTimeWidget.picker) {
+            case "calendar":
+                pickerConfig = {
+                    type: Calendar,
+                    partial: dateTimeWidget.partial,
+                    encoding: dateTimeWidget.encoding,
+                    disabledDaysOfWeek: dateTimeWidget.disabledDaysOfWeek,
+                    focusable: !dateTimeWidget.focusInputFirst,
+                };
+                break;
+            case "list":
+                pickerConfig = {
+                    type: TimeList,
+                    style: "height: 300px",
+                    encoding: dateTimeWidget.encoding,
+                    step: dateTimeWidget.step,
+                    format: dateTimeWidget.format,
+                    scrollSelectionIntoView: true,
+                };
+                break;
+            default:
+                pickerConfig = {
+                    type: DateTimePicker,
+                    segment: dateTimeWidget.segment,
+                    encoding: dateTimeWidget.encoding,
+                    showSeconds: dateTimeWidget.showSeconds,
+                };
+                break;
+        }
+        let dropdown = {
+            scrollTracking: true,
+            inline: !isTouchDevice() || !!lastDropdown,
+            matchWidth: false,
+            placementOrder: "down down-right down-left up up-right up-left",
+            touchFriendly: true,
+            firstChildDefinesHeight: true,
+            firstChildDefinesWidth: true,
+            ...dateTimeWidget.dropdownOptions,
+            type: Dropdown,
+            relatedElement: this.input,
+            onFocusOut: (e) => {
+                this.closeDropdown(e);
+            },
+            onMouseDown: stopPropagation,
+            items: {
+                ...pickerConfig,
+                ...this.props.picker,
+                autoFocus: !dateTimeWidget.focusInputFirst,
+                tabIndex: dateTimeWidget.focusInputFirst ? -1 : 0,
+                onKeyDown: (e) => this.onKeyDown(e),
+                onSelect: (e, calendar, date) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    let touch = isTouchEvent();
+                    this.closeDropdown(e, () => {
+                        if (date) {
+                            // If a blur event occurs before we re-render the input,
+                            // the old input value is parsed and written to the store.
+                            // We want to prevent that by eagerly updating the input value.
+                            // This can happen if the date field is within a menu.
+                            let newFormattedValue = Format.value(date, this.props.data.format);
+                            this.input.value = newFormattedValue;
+                        }
+                        if (!touch)
+                            this.input.focus();
+                    });
+                },
+            },
+        };
+        return (this.dropdown = Widget.create(dropdown));
+    }
+    render() {
+        let { instance, label, help, icon: iconVDOM } = this.props;
+        let { data, widget, state } = instance;
+        let { CSS, baseClass, suppressErrorsUntilVisited, showClear, alwaysShowClear } = widget;
+        let insideButton, icon;
+        if (!data.readOnly && !data.disabled) {
+            if (showClear && (((alwaysShowClear || !data.required) && !data.empty) || instance.state?.inputError))
+                insideButton = (_jsx("div", { className: CSS.element(baseClass, "clear"), onMouseDown: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                    }, onClick: (e) => this.onClearClick(e), children: _jsx(ClearIcon, { className: CSS.element(baseClass, "icon") }) }));
+            else
+                insideButton = (_jsx("div", { className: CSS.element(baseClass, "right-icon"), children: _jsx(DropdownIcon, { className: CSS.element(baseClass, "icon") }) }));
+        }
+        if (iconVDOM) {
+            icon = _jsx("div", { className: CSS.element(baseClass, "left-icon"), children: iconVDOM });
+        }
+        let dropdown;
+        if (this.state.dropdownOpen)
+            dropdown = (_jsx(Cx, { widget: this.getDropdown(), parentInstance: instance, options: { name: "datefield-dropdown" }, subscribe: true }));
+        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 || this.state.dropdownOpen,
+                icon: !!icon,
+                empty: empty && !data.placeholder,
+                error: data.error && (state?.visited || !suppressErrorsUntilVisited || !empty),
+            })), style: data.style, onMouseDown: this.onMouseDown.bind(this), onTouchStart: stopPropagation, children: [_jsx("input", { id: data.id, ref: (el) => {
+                        this.input = el;
+                    }, type: "text", className: CSS.expand(CSS.element(baseClass, "input"), data.inputClass), style: data.inputStyle, defaultValue: data.formatted, disabled: data.disabled, readOnly: data.readOnly, tabIndex: data.tabIndex, placeholder: data.placeholder, ...data.inputAttrs, onInput: (e) => this.onChange(e.target.value, "input"), onChange: (e) => this.onChange(e.target.value, "change"), onKeyDown: (e) => this.onKeyDown(e), onBlur: (e) => {
+                        this.onBlur(e);
+                    }, onFocus: (e) => {
+                        this.onFocus(e);
+                    }, onMouseMove: (e) => tooltipMouseMove(e, ...getFieldTooltip(this.props.instance)), onMouseLeave: (e) => tooltipMouseLeave(e, ...getFieldTooltip(this.props.instance)) }), icon, insideButton, dropdown, label, help] }));
+    }
+    onMouseDown(e) {
+        e.stopPropagation();
+        let { widget } = this.props.instance;
+        if (this.state.dropdownOpen) {
+            this.closeDropdown(e);
+        }
+        else {
+            this.openDropdownOnFocus = true;
+        }
+        //icon click
+        if (e.target !== this.input) {
+            e.preventDefault();
+            //the field should not focus only in case when dropdown will open and autofocus
+            if (widget.focusInputFirst || this.state.dropdownOpen)
+                this.input.focus();
+            if (this.state.dropdownOpen)
+                this.closeDropdown(e);
+            else
+                this.openDropdown();
+        }
+    }
+    onFocus(e) {
+        let { instance } = this.props;
+        let { widget } = instance;
+        if (widget.trackFocus) {
+            this.setState({
+                focus: true,
+            });
+        }
+        if (this.openDropdownOnFocus || widget.focusInputFirst)
+            this.openDropdown();
+    }
+    onKeyDown(e) {
+        let { instance } = this.props;
+        if (instance.widget.handleKeyDown(e, instance) === false)
+            return;
+        switch (e.keyCode) {
+            case KeyCode.enter:
+                this.onChange(e.target.value, "enter");
+                break;
+            case KeyCode.esc:
+                if (this.state.dropdownOpen) {
+                    e.stopPropagation();
+                    this.closeDropdown(e, () => {
+                        this.input.focus();
+                    });
+                }
+                break;
+            case KeyCode.left:
+            case KeyCode.right:
+                e.stopPropagation();
+                break;
+            case KeyCode.down:
+                this.openDropdown();
+                e.stopPropagation();
+                e.preventDefault();
+                break;
+        }
+    }
+    onBlur(e) {
+        let { widget } = this.props.instance;
+        let dateTimeWidget = widget;
+        if (!this.state.dropdownOpen)
+            this.props.instance.setState({ visited: true });
+        else if (dateTimeWidget.focusInputFirst)
+            this.closeDropdown(e);
+        if (this.state.focus)
+            this.setState({
+                focus: false,
+            });
+        this.onChange(e.target.value, "blur");
+    }
+    closeDropdown(e, callback) {
+        if (this.state.dropdownOpen) {
+            if (this.scrollableParents)
+                this.scrollableParents.forEach((el) => {
+                    el.removeEventListener("scroll", this.updateDropdownPosition);
+                });
+            this.setState({ dropdownOpen: false }, callback);
+            this.props.instance.setState({ visited: true });
+        }
+        else if (callback)
+            callback();
+    }
+    openDropdown() {
+        let { data } = this.props.instance;
+        this.openDropdownOnFocus = false;
+        if (!this.state.dropdownOpen && !(data.disabled || data.readOnly)) {
+            this.setState({
+                dropdownOpen: true,
+                dropdownOpenTime: Date.now(),
+            });
+        }
+    }
+    onClearClick(e) {
+        this.setValue(null);
+        e.stopPropagation();
+        e.preventDefault();
+    }
+    UNSAFE_componentWillReceiveProps(props) {
+        let { data, state } = props.instance;
+        if (data.formatted !== this.input.value && (data.formatted !== this.props.data.formatted || !state?.inputError)) {
+            this.input.value = data.formatted || "";
+            props.instance.setState({
+                inputError: false,
+            });
+        }
+        tooltipParentWillReceiveProps(this.input, ...getFieldTooltip(this.props.instance));
+    }
+    componentDidMount() {
+        tooltipParentDidMount(this.input, ...getFieldTooltip(this.props.instance));
+        autoFocus(this.input, this);
+        if (this.props.data.autoOpen)
+            this.openDropdown();
+    }
+    componentDidUpdate() {
+        autoFocus(this.input, this);
+    }
+    componentWillUnmount() {
+        if (this.input == getActiveElement() && this.input.value != this.props.data.formatted) {
+            this.onChange(this.input.value, "blur");
+        }
+        tooltipParentWillUnmount(this.props.instance);
+    }
+    onChange(inputValue, eventType) {
+        let { instance, data } = this.props;
+        let { widget } = instance;
+        let dateTimeWidget = widget;
+        if (data.disabled || data.readOnly)
+            return;
+        if (dateTimeWidget.reactOn.indexOf(eventType) === -1)
+            return;
+        if (eventType == "enter")
+            instance.setState({ visited: true });
+        this.setValue(inputValue, data.value);
+    }
+    setValue(text, baseValue) {
+        let { instance, data } = this.props;
+        let { widget } = instance;
+        let dateTimeWidget = widget;
+        let date = dateTimeWidget.parseDate(text, instance);
+        instance.setState({
+            inputError: isNaN(date) && dateTimeWidget.inputErrorText,
+        });
+        if (!isNaN(date)) {
+            let mixed = parseDateInvariant(baseValue);
+            if (date && baseValue && !isNaN(mixed) && dateTimeWidget.partial) {
+                switch (dateTimeWidget.segment) {
+                    case "date":
+                        mixed.setFullYear(date.getFullYear());
+                        mixed.setMonth(date.getMonth());
+                        mixed.setDate(date.getDate());
+                        break;
+                    case "time":
+                        mixed.setHours(date.getHours());
+                        mixed.setMinutes(date.getMinutes());
+                        mixed.setSeconds(date.getSeconds());
+                        break;
+                    default:
+                        mixed = date;
+                        break;
+                }
+                date = mixed;
+            }
+            let encode = dateTimeWidget.encoding || Culture.getDefaultDateEncoding();
+            let value = date ? encode(date) : dateTimeWidget.emptyValue;
+            if (!instance.set("value", value))
+                this.input.value = value ? Format.value(date, data.format) : "";
+        }
+    }
+}

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

@@ -0,0 +1,17 @@
+/** @jsxImportSource react */
+import * as React from "react";
+import type { Instance } from "../../ui/Instance";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import { Widget } from "../../ui/Widget";
+export declare class DateTimePicker extends Widget {
+    size: number;
+    segment: string;
+    autoFocus?: boolean;
+    showSeconds?: boolean;
+    encoding?: (date: Date) => string;
+    onFocusOut?: string | ((instance: Instance) => void);
+    onSelect?: string | ((e: React.KeyboardEvent, instance: Instance, date: Date) => void);
+    baseClass: string;
+    declareData(...args: Record<string, unknown>[]): void;
+    render(context: RenderingContext, instance: Instance, key: string): React.ReactNode;
+}