devextreme-react/esm/color-box.js

DevExtreme React UI and Visualization Components

/*!
 * devextreme-react
 * Version: 24.2.6
 * Build date: Mon Mar 17 2025
 *
 * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
 *
 * This software may be modified and distributed under the terms
 * of the MIT license. See the LICENSE file in the root of the project for details.
 *
 * https://github.com/DevExpress/devextreme-react
 */

"use client";
import * as React from "react";
import { memo, forwardRef, useImperativeHandle, useRef, useMemo } from "react";
import dxColorBox from "devextreme/ui/color_box";
import { Component as BaseComponent } from "./core/component";
import NestedOption from "./core/nested-option";
const ColorBox = memo(forwardRef((props, ref) => {
    const baseRef = useRef(null);
    useImperativeHandle(ref, () => ({
        instance() {
            return baseRef.current?.getInstance();
        }
    }), [baseRef.current]);
    const subscribableOptions = useMemo(() => (["opened", "value"]), []);
    const independentEvents = useMemo(() => (["onChange", "onClosed", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOpened", "onPaste", "onValueChanged"]), []);
    const defaults = useMemo(() => ({
        defaultOpened: "opened",
        defaultValue: "value",
    }), []);
    const expectedChildren = useMemo(() => ({
        button: { optionName: "buttons", isCollectionItem: true },
        dropDownOptions: { optionName: "dropDownOptions", isCollectionItem: false }
    }), []);
    const templateProps = useMemo(() => ([
        {
            tmplOption: "dropDownButtonTemplate",
            render: "dropDownButtonRender",
            component: "dropDownButtonComponent"
        },
        {
            tmplOption: "fieldTemplate",
            render: "fieldRender",
            component: "fieldComponent"
        },
    ]), []);
    return (React.createElement((BaseComponent), {
        WidgetClass: dxColorBox,
        ref: baseRef,
        subscribableOptions,
        independentEvents,
        defaults,
        expectedChildren,
        templateProps,
        ...props,
    }));
}));
const _componentAnimation = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "animation",
            ExpectedChildren: {
                hide: { optionName: "hide", isCollectionItem: false },
                show: { optionName: "show", isCollectionItem: false }
            },
        },
    });
};
const Animation = Object.assign(_componentAnimation, {
    componentType: "option",
});
const _componentAt = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "at",
        },
    });
};
const At = Object.assign(_componentAt, {
    componentType: "option",
});
const _componentBoundaryOffset = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "boundaryOffset",
        },
    });
};
const BoundaryOffset = Object.assign(_componentBoundaryOffset, {
    componentType: "option",
});
const _componentButton = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "buttons",
            IsCollectionItem: true,
            ExpectedChildren: {
                options: { optionName: "options", isCollectionItem: false }
            },
        },
    });
};
const Button = Object.assign(_componentButton, {
    componentType: "option",
});
const _componentCollision = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "collision",
        },
    });
};
const Collision = Object.assign(_componentCollision, {
    componentType: "option",
});
const _componentDropDownOptions = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "dropDownOptions",
            DefaultsProps: {
                defaultHeight: "height",
                defaultPosition: "position",
                defaultVisible: "visible",
                defaultWidth: "width"
            },
            ExpectedChildren: {
                animation: { optionName: "animation", isCollectionItem: false },
                position: { optionName: "position", isCollectionItem: false },
                toolbarItem: { optionName: "toolbarItems", isCollectionItem: true }
            },
            TemplateProps: [{
                    tmplOption: "contentTemplate",
                    render: "contentRender",
                    component: "contentComponent"
                }, {
                    tmplOption: "titleTemplate",
                    render: "titleRender",
                    component: "titleComponent"
                }],
        },
    });
};
const DropDownOptions = Object.assign(_componentDropDownOptions, {
    componentType: "option",
});
const _componentFrom = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "from",
            ExpectedChildren: {
                position: { optionName: "position", isCollectionItem: false }
            },
        },
    });
};
const From = Object.assign(_componentFrom, {
    componentType: "option",
});
const _componentHide = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "hide",
            ExpectedChildren: {
                from: { optionName: "from", isCollectionItem: false },
                to: { optionName: "to", isCollectionItem: false }
            },
        },
    });
};
const Hide = Object.assign(_componentHide, {
    componentType: "option",
});
const _componentMy = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "my",
        },
    });
};
const My = Object.assign(_componentMy, {
    componentType: "option",
});
const _componentOffset = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "offset",
        },
    });
};
const Offset = Object.assign(_componentOffset, {
    componentType: "option",
});
const _componentOptions = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "options",
            TemplateProps: [{
                    tmplOption: "template",
                    render: "render",
                    component: "component"
                }],
        },
    });
};
const Options = Object.assign(_componentOptions, {
    componentType: "option",
});
const _componentPosition = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "position",
            ExpectedChildren: {
                at: { optionName: "at", isCollectionItem: false },
                boundaryOffset: { optionName: "boundaryOffset", isCollectionItem: false },
                collision: { optionName: "collision", isCollectionItem: false },
                my: { optionName: "my", isCollectionItem: false },
                offset: { optionName: "offset", isCollectionItem: false }
            },
        },
    });
};
const Position = Object.assign(_componentPosition, {
    componentType: "option",
});
const _componentShow = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "show",
            ExpectedChildren: {
                from: { optionName: "from", isCollectionItem: false },
                to: { optionName: "to", isCollectionItem: false }
            },
        },
    });
};
const Show = Object.assign(_componentShow, {
    componentType: "option",
});
const _componentTo = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "to",
            ExpectedChildren: {
                position: { optionName: "position", isCollectionItem: false }
            },
        },
    });
};
const To = Object.assign(_componentTo, {
    componentType: "option",
});
const _componentToolbarItem = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "toolbarItems",
            IsCollectionItem: true,
            TemplateProps: [{
                    tmplOption: "menuItemTemplate",
                    render: "menuItemRender",
                    component: "menuItemComponent"
                }, {
                    tmplOption: "template",
                    render: "render",
                    component: "component"
                }],
        },
    });
};
const ToolbarItem = Object.assign(_componentToolbarItem, {
    componentType: "option",
});
export default ColorBox;
export { ColorBox, Animation, At, BoundaryOffset, Button, Collision, DropDownOptions, From, Hide, My, Offset, Options, Position, Show, To, ToolbarItem };