cx 26.0.1 → 26.0.2

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

@@ -0,0 +1,49 @@
+/** @jsxImportSource react */
+import * as React from "react";
+import { DropdownWidgetProps, Instance } from "../../ui/Instance";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import { DropdownConfig } from "../overlay/Dropdown";
+import { Field, FieldConfig, FieldInstance } from "./Field";
+import { BooleanProp, StringProp } from "../../ui/Prop";
+export interface ColorFieldConfig extends FieldConfig {
+    /** Either `rgba`, `hsla` or `hex` value of the selected color. */
+    value?: StringProp;
+    /** 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;
+    /** Set to `true` to hide the clear button. Default value is `false`. */
+    hideClear?: boolean;
+    /** 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;
+    /** Base CSS class to be applied to the element. Defaults to `colorfield`. */
+    baseClass?: string;
+    /** Format of the color representation. Either `rgba`, `hsla` or `hex`. */
+    format?: "rgba" | "hsla" | "hex";
+    /** Additional configuration to be passed to the dropdown, such as `style`, `positioning`, etc. */
+    dropdownOptions?: Partial<DropdownConfig>;
+}
+export declare class ColorFieldInstance<F extends ColorField = ColorField> extends FieldInstance<F> implements DropdownWidgetProps {
+    lastDropdown?: Instance;
+    dropdownOpen?: boolean;
+    selectedIndex?: number;
+}
+export declare class ColorField extends Field<ColorFieldConfig> {
+    baseClass: string;
+    showClear?: boolean;
+    alwaysShowClear?: boolean;
+    hideClear?: boolean;
+    format: string;
+    lastDropdown?: string;
+    value?: string;
+    dropdownOptions?: Partial<DropdownConfig>;
+    constructor(config?: ColorFieldConfig);
+    declareData(...args: Record<string, unknown>[]): void;
+    init(): void;
+    prepareData(context: RenderingContext, instance: ColorFieldInstance): void;
+    renderInput(context: RenderingContext, instance: ColorFieldInstance, key: string): React.ReactNode;
+}

package/build/widgets/form/ColorField.js

@@ -0,0 +1,310 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Cx } from "../../ui/Cx";
+import { VDOM, Widget, getContent } from "../../ui/Widget";
+import { parseColor } from "../../util/color/parseColor";
+import { isTouchDevice } from "../../util/isTouchDevice";
+import { isTouchEvent } from "../../util/isTouchEvent";
+import { Dropdown } from "../overlay/Dropdown";
+import { ColorPicker } from "./ColorPicker";
+import { Field, getFieldTooltip, FieldInstance } from "./Field";
+export class ColorFieldInstance extends FieldInstance {
+    lastDropdown;
+    dropdownOpen;
+    selectedIndex;
+}
+import { stopPropagation } from "../../util/eventCallbacks";
+import { KeyCode } from "../../util/KeyCode";
+import { tooltipMouseLeave, tooltipMouseMove, tooltipParentDidMount, tooltipParentWillReceiveProps, tooltipParentWillUnmount, } from "../overlay/tooltip-ops";
+import { Localization } from "../../ui/Localization";
+import { getActiveElement } from "../../util/getActiveElement";
+import { isDefined } from "../../util/isDefined";
+import ClearIcon from "../icons/clear";
+import DropdownIcon from "../icons/drop-down";
+export class ColorField extends Field {
+    constructor(config) {
+        super(config);
+    }
+    declareData(...args) {
+        super.declareData({
+            value: this.emptyValue,
+            disabled: undefined,
+            readOnly: undefined,
+            enabled: undefined,
+            placeholder: undefined,
+            required: undefined,
+            format: undefined,
+        }, ...args);
+    }
+    init() {
+        if (isDefined(this.hideClear))
+            this.showClear = !this.hideClear;
+        if (this.alwaysShowClear)
+            this.showClear = true;
+        super.init();
+    }
+    prepareData(context, instance) {
+        let { data } = instance;
+        data.stateMods = [
+            data.stateMods,
+            {
+                empty: !data.value,
+            },
+        ];
+        instance.lastDropdown = context.lastDropdown;
+        super.prepareData(context, instance);
+    }
+    renderInput(context, instance, key) {
+        return (_jsx(ColorInput, { instance: instance, data: instance.data, picker: {
+                value: this.value,
+                format: this.format,
+            }, label: this.labelPlacement && getContent(this.renderLabel(context, instance, "label")), help: this.helpPlacement && getContent(this.renderHelp(context, instance, "help")) }, key));
+    }
+}
+ColorField.prototype.baseClass = "colorfield";
+ColorField.prototype.format = "rgba";
+ColorField.prototype.suppressErrorsUntilVisited = true;
+ColorField.prototype.showClear = true;
+ColorField.prototype.alwaysShowClear = false;
+Widget.alias("color-field", ColorField);
+Localization.registerPrototype("cx/widgets/ColorField", ColorField);
+class ColorInput extends VDOM.Component {
+    data;
+    dropdown;
+    input;
+    openDropdownOnFocus = false;
+    scrollableParents;
+    updateDropdownPosition;
+    constructor(props) {
+        super(props);
+        let { data } = this.props;
+        this.data = data;
+        this.state = {
+            dropdownOpen: false,
+            focus: false,
+        };
+        this.updateDropdownPosition = () => { };
+    }
+    getDropdown() {
+        if (this.dropdown)
+            return this.dropdown;
+        let { widget, lastDropdown } = this.props.instance;
+        const colorFieldWidget = widget;
+        let dropdown = {
+            scrollTracking: true,
+            autoFocus: true, //put focus on the dropdown to prevent opening the keyboard
+            focusable: true,
+            inline: !isTouchDevice() || !!lastDropdown,
+            touchFriendly: true,
+            placementOrder: " down down-left down-right up up-left up-right right right-up right-down left left-up left-down",
+            ...colorFieldWidget.dropdownOptions,
+            type: Dropdown,
+            relatedElement: this.input,
+            items: {
+                type: ColorPicker,
+                ...this.props.picker,
+                onColorClick: (e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    let touch = isTouchEvent();
+                    this.closeDropdown(e, () => {
+                        if (!touch)
+                            this.input.focus();
+                    });
+                },
+            },
+            onFocusOut: () => {
+                this.closeDropdown();
+            },
+            dismissAfterScroll: () => {
+                this.closeDropdown();
+            },
+            firstChildDefinesHeight: true,
+            firstChildDefinesWidth: true,
+        };
+        return (this.dropdown = Widget.create(dropdown));
+    }
+    render() {
+        let { instance, label, help, data } = this.props;
+        let { widget, state } = instance;
+        let { CSS, baseClass, suppressErrorsUntilVisited, showClear, alwaysShowClear } = widget;
+        let insideButton;
+        if (!data.readOnly && !data.disabled) {
+            if (showClear &&
+                (((!data.required || alwaysShowClear) && !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") }) }));
+        }
+        let well = (_jsx("div", { className: CSS.element(baseClass, "left-icon"), children: _jsx("div", { style: { backgroundColor: data.value } }) }));
+        let dropdown = false;
+        if (this.state.dropdownOpen)
+            dropdown = (_jsx(Cx, { widget: this.getDropdown(), parentInstance: instance, options: { name: "colorfield-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: true,
+                empty: empty && !data.placeholder,
+                error: data.error && (state?.visited || !suppressErrorsUntilVisited || !empty),
+            })), style: data.style, onMouseDown: this.onMouseDown.bind(this), onTouchStart: stopPropagation, onClick: 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: this.trim(data.value || ""), 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) => {
+                        const tooltip = getFieldTooltip(instance);
+                        tooltipMouseMove(e, tooltip[0], tooltip[1]);
+                    }, onMouseLeave: (e) => {
+                        const tooltip = getFieldTooltip(instance);
+                        tooltipMouseLeave(e, tooltip[0], tooltip[1]);
+                    } }), well, insideButton, dropdown, label, help] }));
+    }
+    onMouseDown(e) {
+        e.stopPropagation();
+        if (this.state.dropdownOpen)
+            this.closeDropdown(e);
+        else {
+            this.openDropdownOnFocus = true;
+        }
+        //icon click
+        if (e.target != this.input) {
+            e.preventDefault();
+            if (!this.state.dropdownOpen)
+                this.openDropdown(e);
+            else
+                this.input.focus();
+        }
+    }
+    onFocus(e) {
+        if (this.openDropdownOnFocus)
+            this.openDropdown(e);
+        let { instance } = this.props;
+        let { widget } = instance;
+        const colorFieldWidget = widget;
+        if (colorFieldWidget.trackFocus) {
+            this.setState({
+                focus: true,
+            });
+        }
+    }
+    onKeyDown(e) {
+        let { instance } = this.props;
+        if (instance.widget.handleKeyDown(e, instance) === false)
+            return;
+        switch (e.keyCode) {
+            case KeyCode.enter:
+                e.stopPropagation();
+                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);
+                e.stopPropagation();
+                e.preventDefault();
+                break;
+        }
+    }
+    onBlur(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);
+        }
+        else if (callback)
+            callback();
+    }
+    openDropdown(e) {
+        let { data } = this.props;
+        this.openDropdownOnFocus = false;
+        if (!this.state.dropdownOpen && !(data.disabled || data.readOnly)) {
+            this.setState({ dropdownOpen: true });
+        }
+    }
+    trim(value) {
+        return value.replace(/\s/g, "");
+    }
+    UNSAFE_componentWillReceiveProps(props) {
+        let { data, instance } = props;
+        let { state } = instance;
+        let nv = this.trim(data.value || "");
+        if (nv != this.input.value && (this.data.value != data.value || !state?.inputError)) {
+            this.input.value = nv;
+            instance.setState({
+                inputError: false,
+            });
+        }
+        this.data = data;
+        const tooltip1 = getFieldTooltip(instance);
+        tooltipParentWillReceiveProps(this.input, tooltip1[0], tooltip1[1]);
+    }
+    componentDidMount() {
+        const tooltip2 = getFieldTooltip(this.props.instance);
+        tooltipParentDidMount(this.input, tooltip2[0], tooltip2[1]);
+        if (this.props.instance.widget.autoFocus && !isTouchDevice())
+            this.input.focus();
+    }
+    componentWillUnmount() {
+        if (this.input == getActiveElement() && this.input.value != this.props.data.value) {
+            this.onChange(this.input.value, "blur");
+        }
+        tooltipParentWillUnmount(this.props.instance);
+    }
+    onClearClick(e) {
+        let { instance } = this.props;
+        instance.set("value", instance.widget.emptyValue);
+        instance.setState({
+            inputError: false,
+        });
+        e.stopPropagation();
+        e.preventDefault();
+    }
+    onChange(inputValue, eventType) {
+        let { instance, data } = this.props;
+        let { widget } = instance;
+        if (eventType == "blur") {
+            instance.setState({ visited: true });
+        }
+        let isValid;
+        try {
+            parseColor(inputValue);
+            isValid = true;
+        }
+        catch (e) {
+            isValid = false;
+        }
+        if (eventType == "blur" || eventType == "enter") {
+            let value = inputValue || widget.emptyValue;
+            if (isValid && value !== data.value)
+                instance.set("value", value);
+            instance.setState({
+                inputError: !isValid && "Invalid color entered.",
+            });
+        }
+    }
+}

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

@@ -0,0 +1,46 @@
+import { Field, FieldConfig, FieldInstance } from "./Field";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import type { Instance } from "../../ui/Instance";
+import { StringProp } from "../../ui/Prop";
+declare global {
+    class EyeDropper {
+        open(): Promise<{
+            sRGBHex: string;
+        }>;
+    }
+    interface Window {
+        EyeDropper: typeof EyeDropper;
+    }
+}
+interface ColorState {
+    r: number;
+    g: number;
+    b: number;
+    h: number;
+    s: number;
+    l: number;
+    a: number;
+}
+export interface ColorPickerConfig extends FieldConfig {
+    /** Either `rgba`, `hsla` or `hex` value of the selected color. */
+    value?: StringProp;
+    /** Format of the color representation. Either `rgba`, `hsla` or `hex`. */
+    format?: "rgba" | "hsla" | "hex";
+    /**
+     * A string containing the list of all events that cause that selected value is written to the store.
+     * Default value is `blur change` which means that changes are propagated immediately.
+     */
+    reportOn?: string;
+    /** Callback function invoked when the color preview is clicked. */
+    onColorClick?: (e: React.MouseEvent, instance: Instance) => void;
+}
+export declare class ColorPicker extends Field<ColorPickerConfig, FieldInstance<ColorPicker>> {
+    format: string;
+    reportOn: string;
+    onColorClick?: (e: React.MouseEvent, instance: FieldInstance<ColorPicker>) => void;
+    constructor(config?: ColorPickerConfig);
+    declareData(...args: Record<string, unknown>[]): void;
+    renderInput(context: RenderingContext, instance: FieldInstance<ColorPicker>, key: string): React.ReactNode;
+    handleEvent(eventType: string, instance: FieldInstance<ColorPicker>, color: ColorState): void;
+}
+export {};