cx 26.0.1 → 26.0.2

package/build/widgets/form/ColorPicker.js

@@ -0,0 +1,304 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** @jsxImportSource react */
+import { Widget, VDOM } from "../../ui/Widget";
+import { Field } from "./Field";
+import { captureMouseOrTouch, getCursorPos } from "../overlay/captureMouse";
+import { hslToRgb } from "../../util/color/hslToRgb";
+import { rgbToHsl } from "../../util/color/rgbToHsl";
+import { rgbToHex } from "../../util/color/rgbToHex";
+import { parseColor } from "../../util/color/parseColor";
+import { getVendorPrefix } from "../../util/getVendorPrefix";
+import { stopPropagation } from "../../util/eventCallbacks";
+import { isString } from "../../util/isString";
+import { getTopLevelBoundingClientRect } from "../../util/getTopLevelBoundingClientRect";
+import PixelPickerIcon from "../icons/pixel-picker";
+export class ColorPicker extends Field {
+    constructor(config) {
+        super(config);
+    }
+    declareData(...args) {
+        super.declareData({
+            value: this.emptyValue,
+            format: undefined,
+        }, ...args);
+    }
+    renderInput(context, instance, key) {
+        return _jsx(ColorPickerComponent, { instance: instance }, key);
+    }
+    handleEvent(eventType, instance, color) {
+        let { data } = instance;
+        if (this.reportOn.indexOf(eventType) != -1) {
+            let value;
+            switch (data.format) {
+                default:
+                case "rgba":
+                    value = `rgba(${color.r.toFixed(0)},${color.g.toFixed(0)},${color.b.toFixed(0)},${Math.round(color.a * 100) / 100})`;
+                    break;
+                case "hsla":
+                    value = `hsla(${color.h.toFixed(0)},${color.s.toFixed(0)}%,${color.l.toFixed(0)}%,${Math.round(color.a * 100) / 100})`;
+                    break;
+                case "hex":
+                    value = rgbToHex(color.r, color.g, color.b);
+                    break;
+            }
+            instance.set("value", value);
+        }
+    }
+}
+ColorPicker.prototype.baseClass = "colorpicker";
+ColorPicker.prototype.reportOn = "blur change";
+ColorPicker.prototype.format = "rgba";
+Widget.alias("color-picker", ColorPicker);
+class ColorPickerComponent extends VDOM.Component {
+    data;
+    constructor(props) {
+        super(props);
+        this.data = props.instance.data;
+        try {
+            this.state = this.parse(props.instance.data.value);
+        }
+        catch (e) {
+            //if web colors are used (e.g. red), fallback to the default color
+            this.state = this.parse(null);
+        }
+    }
+    UNSAFE_componentWillReceiveProps(props) {
+        let { data } = props.instance;
+        let color;
+        try {
+            color = this.parse(data.value);
+        }
+        catch {
+            color = this.parse(null);
+        }
+        if (color.r != this.state.r || color.g != this.state.g || color.b != this.state.b || color.a != this.state.a)
+            this.setState(color);
+    }
+    parse(color) {
+        let c = parseColor(color);
+        if (c == null) {
+            c = {
+                type: "rgba",
+                r: 128,
+                g: 128,
+                b: 128,
+                a: 0,
+            };
+        }
+        c.a = Math.round(c.a * 100) / 100;
+        if (c.type == "rgba") {
+            let [h, s, l] = rgbToHsl(c.r, c.g, c.b);
+            return { r: c.r, g: c.g, b: c.b, h, s, l, a: c.a };
+        }
+        if (c.type == "hsla") {
+            let [r, g, b] = hslToRgb(c.h, c.s, c.l);
+            r = this.fix255(r);
+            g = this.fix255(g);
+            b = this.fix255(b);
+            return { r: r, g, b, h: c.h, s: c.s, l: c.l, a: c.a };
+        }
+        throw new Error(`Color ${color} parsing failed.`);
+    }
+    render() {
+        let { h, s, l, a, r, g, b } = this.state;
+        let { instance } = this.props;
+        let { widget, data } = instance;
+        let { CSS, baseClass } = widget;
+        let hcolor = `hsl(${h},100%,50%)`;
+        let hsla = `hsla(${h.toFixed(0)},${s.toFixed(0)}%,${l.toFixed(0)}%,${a})`;
+        let rgba = `rgba(${r.toFixed(0)},${g.toFixed(0)},${b.toFixed(0)},${a})`;
+        let hex = rgbToHex(r, g, b);
+        let pixelPicker;
+        let alphaGradient = `${getVendorPrefix("css")}linear-gradient(left, hsla(${h},${s}%,${l}%,0) 0%, hsla(${h},${s}%,${l}%,1) 100%)`;
+        if ("EyeDropper" in window && window.EyeDropper) {
+            pixelPicker = (_jsx("div", { className: CSS.element(baseClass, "pixel-picker"), onClick: (e) => {
+                    const eyeDropper = new EyeDropper();
+                    eyeDropper
+                        .open()
+                        .then((result) => {
+                        instance.set("value", result.sRGBHex);
+                    })
+                        .catch((e) => { });
+                }, children: _jsx(PixelPickerIcon, {}) }));
+        }
+        return (_jsxs("div", { className: data.classNames, style: data.style, onBlur: this.onBlur.bind(this), onMouseDown: stopPropagation, onTouchStart: stopPropagation, children: [_jsx("div", { className: CSS.element(baseClass, "picker"), style: { backgroundColor: hcolor }, onMouseDown: this.onSLSelect.bind(this), onTouchStart: this.onSLSelect.bind(this), children: _jsx("div", { className: CSS.element(baseClass, "indicator"), style: {
+                            left: `calc(${s}% - 4px)`,
+                            top: `calc(${100 - l}% - 4px)`,
+                            borderColor: `rgba(${r < 128 ? 255 : 0}, ${g < 128 ? 255 : 0}, ${b < 128 ? 255 : 0}, 0.5)`,
+                        } }) }), _jsxs("div", { className: CSS.element(baseClass, "details"), children: [_jsx("div", { className: CSS.element(baseClass, "hue"), onMouseDown: this.onHueSelect.bind(this), onTouchStart: this.onHueSelect.bind(this), onWheel: (e) => {
+                                this.onWheel(e, "h", 10);
+                            }, children: _jsx("div", { className: CSS.element(baseClass, "indicator"), style: {
+                                    left: `calc(${h / 3.6}% - 2px)`,
+                                } }) }), _jsxs("div", { className: CSS.element(baseClass, "inputs"), children: [_jsxs("label", { children: ["H ", _jsx("input", { value: h.toFixed(0), onChange: (e) => {
+                                                this.onNumberChange(e, "h");
+                                            }, onWheel: (e) => {
+                                                this.onWheel(e, "h", 10);
+                                            } })] }), _jsxs("label", { children: ["S ", _jsx("input", { value: s.toFixed(0), onChange: (e) => {
+                                                this.onNumberChange(e, "s");
+                                            }, onWheel: (e) => {
+                                                this.onWheel(e, "s", 5);
+                                            } })] }), _jsxs("label", { children: ["L ", _jsx("input", { value: l.toFixed(0), onChange: (e) => {
+                                                this.onNumberChange(e, "l");
+                                            }, onWheel: (e) => {
+                                                this.onWheel(e, "l", 5);
+                                            } })] }), _jsxs("label", { children: ["A ", _jsx("input", { value: a, onChange: (e) => {
+                                                this.onNumberChange(e, "a");
+                                            }, onWheel: (e) => {
+                                                this.onWheel(e, "a", 0.1);
+                                            } })] })] }), _jsxs("div", { className: CSS.element(baseClass, "alpha"), onMouseDown: this.onAlphaSelect.bind(this), onTouchStart: this.onAlphaSelect.bind(this), onWheel: (e) => {
+                                this.onWheel(e, "a", 0.1);
+                            }, children: [_jsx("div", { style: { background: alphaGradient } }), _jsx("div", { className: CSS.element(baseClass, "indicator"), style: {
+                                        left: `calc(${a * 100}% - 2px)`,
+                                    } })] }), _jsxs("div", { className: CSS.element(baseClass, "inputs"), children: [_jsxs("label", { children: ["R ", _jsx("input", { value: r.toFixed(0), onChange: (e) => {
+                                                this.onNumberChange(e, "r");
+                                            }, onWheel: (e) => {
+                                                this.onWheel(e, "r", 5);
+                                            } })] }), _jsxs("label", { children: ["G ", _jsx("input", { value: g.toFixed(0), onChange: (e) => {
+                                                this.onNumberChange(e, "g");
+                                            }, onWheel: (e) => {
+                                                this.onWheel(e, "g", 5);
+                                            } })] }), _jsxs("label", { children: ["B ", _jsx("input", { value: b.toFixed(0), onChange: (e) => {
+                                                this.onNumberChange(e, "b");
+                                            }, onWheel: (e) => {
+                                                this.onWheel(e, "b", 5);
+                                            } })] }), _jsxs("label", { children: ["A ", _jsx("input", { value: a, onChange: (e) => {
+                                                this.onNumberChange(e, "a");
+                                            }, onWheel: (e) => {
+                                                this.onWheel(e, "a", 0.1);
+                                            } })] })] }), _jsxs("div", { className: CSS.element(baseClass, "preview"), children: [_jsx("div", { style: {
+                                        display: "flex",
+                                        alignItems: "center",
+                                    }, children: _jsx("div", { className: CSS.element(baseClass, "color"), onClick: (e) => {
+                                            this.onColorClick(e);
+                                        }, children: _jsx("div", { style: { backgroundColor: hsla } }) }) }), _jsxs("div", { className: CSS.element(baseClass, "values"), children: [_jsx("input", { value: hsla, readOnly: true }), _jsx("input", { value: rgba, readOnly: true }), _jsx("input", { value: hex, readOnly: true })] }), pixelPicker] })] })] }));
+    }
+    onColorClick(e) {
+        let { instance } = this.props;
+        let { widget } = instance;
+        if (widget.onColorClick)
+            widget.onColorClick(e, instance);
+    }
+    onHueSelect(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        let el = e.currentTarget;
+        let bounds = el.getBoundingClientRect();
+        let move = (e) => {
+            let pos = getCursorPos(e);
+            let x = Math.max(0, Math.min(1, (pos.clientX + 1 - bounds.left) / el.offsetWidth));
+            this.setColorProp({
+                h: x * 360,
+            });
+        };
+        captureMouseOrTouch(e, move);
+        move(e);
+    }
+    onAlphaSelect(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        let el = e.currentTarget;
+        let bounds = getTopLevelBoundingClientRect(el);
+        let move = (e) => {
+            let pos = getCursorPos(e);
+            let x = Math.max(0, Math.min(1, (pos.clientX + 1 - bounds.left) / el.offsetWidth));
+            this.setColorProp({
+                a: x,
+            });
+        };
+        captureMouseOrTouch(e, move);
+        move(e);
+    }
+    onSLSelect(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        let el = e.currentTarget;
+        let bounds = getTopLevelBoundingClientRect(el);
+        let move = (e) => {
+            let pos = getCursorPos(e);
+            let x = Math.max(0, Math.min(1, (pos.clientX + 1 - bounds.left) / el.offsetWidth));
+            let y = Math.max(0, Math.min(1, (pos.clientY + 1 - bounds.top) / el.offsetWidth));
+            let s = x;
+            let l = 1 - y;
+            this.setColorProp({
+                s: s * 100,
+                l: l * 100,
+            });
+        };
+        captureMouseOrTouch(e, move);
+        move(e);
+    }
+    fix255(v) {
+        return Math.max(0, Math.min(255, Math.round(v)));
+    }
+    setColorProp(props, value) {
+        let propsObj;
+        if (isString(props)) {
+            propsObj = {
+                [props]: value,
+            };
+        }
+        else {
+            propsObj = props;
+        }
+        let state = { ...this.state };
+        let fixAlpha = false;
+        for (let prop in propsObj) {
+            let propValue = propsObj[prop];
+            if (propValue === undefined)
+                continue;
+            switch (prop) {
+                case "h":
+                    state.h = Math.min(360, Math.max(0, propValue));
+                    [state.r, state.g, state.b] = hslToRgb(state.h, state.s, state.l);
+                    fixAlpha = true;
+                    break;
+                case "s":
+                    state.s = Math.min(100, Math.max(0, propValue));
+                    [state.r, state.g, state.b] = hslToRgb(state.h, state.s, state.l);
+                    fixAlpha = true;
+                    break;
+                case "l":
+                    state.l = Math.min(100, Math.max(0, propValue));
+                    [state.r, state.g, state.b] = hslToRgb(state.h, state.s, state.l);
+                    fixAlpha = true;
+                    break;
+                case "r":
+                case "g":
+                case "b":
+                    state[prop] = Math.round(Math.min(255, Math.max(0, propValue)));
+                    let [h, s, l] = rgbToHsl(state.r, state.g, state.b);
+                    state.h = h;
+                    state.s = s;
+                    state.l = l;
+                    fixAlpha = true;
+                    break;
+                case "a":
+                    state.a = Math.round(100 * Math.min(1, Math.max(0, propValue))) / 100;
+                    break;
+            }
+        }
+        state.r = this.fix255(state.r);
+        state.g = this.fix255(state.g);
+        state.b = this.fix255(state.b);
+        if (fixAlpha && state.a === 0)
+            state.a = 1;
+        this.setState(state, () => {
+            this.props.instance.widget.handleEvent("change", this.props.instance, this.state);
+        });
+    }
+    onNumberChange(e, prop) {
+        e.preventDefault();
+        e.stopPropagation();
+        let number = parseFloat(e.target.value || "0");
+        this.setColorProp(prop, number);
+    }
+    onWheel(e, prop, delta) {
+        e.preventDefault();
+        e.stopPropagation();
+        let factor = e.deltaY < 0 ? 1 : -1;
+        this.setColorProp(prop, this.state[prop] + delta * factor);
+    }
+    onBlur() {
+        this.props.instance.widget.handleEvent("blur", this.props.instance, this.state);
+    }
+}

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

@@ -0,0 +1,8 @@
+import { DateTimeField, DateTimeFieldConfig } from "./DateTimeField";
+export interface DateFieldConfig extends DateTimeFieldConfig {
+}
+export declare class DateField extends DateTimeField {
+    picker: string;
+    segment: string;
+    constructor(config?: DateFieldConfig);
+}

package/build/widgets/form/DateField.js

@@ -0,0 +1,12 @@
+import { Widget } from "../../ui/Widget";
+import { Localization } from "../../ui/Localization";
+import { DateTimeField } from "./DateTimeField";
+export class DateField extends DateTimeField {
+    constructor(config) {
+        super(config);
+    }
+}
+DateField.prototype.picker = "calendar";
+DateField.prototype.segment = "date";
+Widget.alias("datefield", DateField);
+Localization.registerPrototype("cx/widgets/DateField", DateField);

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

@@ -0,0 +1,98 @@
+/** @jsxImportSource react */
+import * as React from "react";
+import type { Instance } from "../../ui/Instance";
+import { FieldInstance } from "./Field";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import { DropdownConfig } from "../overlay/Dropdown";
+import { Field, FieldConfig } from "./Field";
+import { BooleanProp, Config, Prop, StringProp } from "../../ui/Prop";
+export interface DateTimeFieldConfig extends FieldConfig {
+    /** Selected date. This should be a Date object or a valid date string consumable by Date.parse function. */
+    value?: Prop<string | Date>;
+    /** Defaults to false. Used to make the field read-only. */
+    readOnly?: BooleanProp;
+    /** The opposite of `disabled`. */
+    enabled?: BooleanProp;
+    /** Default text displayed when the field is empty. */
+    placeholder?: StringProp;
+    /** Minimum date value. This should be a Date object or a valid date string consumable by Date.parse function. */
+    minValue?: Prop<string | Date>;
+    /** Set to `true` to disallow the `minValue`. Default value is `false`. */
+    minExclusive?: BooleanProp;
+    /** Maximum date value. This should be a Date object or a valid date string consumable by Date.parse function. */
+    maxValue?: Prop<string | Date>;
+    /** Set to `true` to disallow the `maxValue`. Default value is `false`. */
+    maxExclusive?: BooleanProp;
+    /** Date format used to display the selected date. */
+    format?: StringProp;
+    /** Base CSS class to be applied to the field. Defaults to `datefield`. */
+    baseClass?: string;
+    /** Maximum value error text. */
+    maxValueErrorText?: string;
+    /** Maximum exclusive value error text. */
+    maxExclusiveErrorText?: string;
+    /** Minimum value error text. */
+    minValueErrorText?: string;
+    /** Minimum exclusive value error text. */
+    minExclusiveErrorText?: string;
+    /** Error message used to indicate wrong user input. */
+    inputErrorText?: string;
+    /** Name or configuration of the icon to be put on the left side of the input. */
+    icon?: StringProp | Config;
+    /** Set to false to hide the clear button. Default value is true. */
+    showClear?: boolean;
+    /** Set to `true` to display the clear button even if `required` is set. Default is `false`. */
+    alwaysShowClear?: boolean;
+    /** Set to true to hide the clear button. Default value is false. */
+    hideClear?: boolean;
+    /** Determines which segment of date/time is used. Default value is `datetime`. */
+    segment?: "date" | "time" | "datetime";
+    /** Set to `true` to indicate that only one segment of the selected date is affected. */
+    partial?: boolean;
+    /** The function that will be used to convert Date objects before writing data to the store. */
+    encoding?: (date: Date) => any;
+    /** Defines which days of week should be displayed as disabled. */
+    disabledDaysOfWeek?: number[];
+    /** Set to true to focus the input field instead of the picker first. */
+    focusInputFirst?: boolean;
+    /** Set to true to enable seconds segment in the picker. */
+    showSeconds?: boolean;
+    /** Additional configuration to be passed to the dropdown. */
+    dropdownOptions?: Partial<DropdownConfig>;
+}
+export declare class DateTimeField extends Field<DateTimeFieldConfig> {
+    showClear?: boolean;
+    alwaysShowClear?: boolean;
+    hideClear?: boolean;
+    format?: string;
+    segment?: string;
+    maxValueErrorText?: string;
+    maxExclusiveErrorText?: string;
+    minValueErrorText?: string;
+    minExclusiveErrorText?: string;
+    inputErrorText?: string;
+    disabledDaysOfWeekErrorText?: string;
+    value?: unknown;
+    minValue?: unknown;
+    maxValue?: unknown;
+    minExclusive?: boolean;
+    maxExclusive?: boolean;
+    picker?: string;
+    partial?: boolean;
+    encoding?: (date: Date) => string;
+    disabledDaysOfWeek?: number[] | null;
+    reactOn?: string;
+    focusInputFirst?: boolean;
+    dropdownOptions?: Partial<DropdownConfig>;
+    onParseInput?: string | ((date: unknown, instance: Instance) => Date | undefined);
+    showSeconds?: boolean;
+    step?: number;
+    constructor(config?: DateTimeFieldConfig);
+    declareData(...args: Record<string, unknown>[]): void;
+    init(): void;
+    prepareData(context: RenderingContext, instance: FieldInstance<DateTimeField>): void;
+    validate(context: RenderingContext, instance: FieldInstance<DateTimeField>): void;
+    renderInput(context: RenderingContext, instance: FieldInstance<DateTimeField>, key: string): React.ReactNode;
+    formatValue(context: RenderingContext, { data }: Instance): React.ReactNode;
+    parseDate(date: unknown, instance: Instance): Date | null;
+}