@brizy/ui/es/ColorPicker/index.js

React elements in Brizy style

import React, { useCallback, useContext } from "react";
import { classNames } from "../classNamesFn";
import Popover from "antd/lib/popover";
import { SketchPicker } from "react-color";
import { FrameContentContext } from "../Frame/FrameContent";
import { getFieldsStyleTheme } from "../utils/getFieldsTheme";
import { hexToRgba } from "../utils";
import { Icon } from "../Icon";
import { CmsIconColorPricker } from "../icons";
import { BRZ_PREFIX } from "../constants";
export const ColorPicker = (props) => {
    const context = useContext(FrameContentContext);
    const { value, presetColors, size = "large", getContainer, theme, onChange, disabled } = props;
    const className = classNames()("color-picker", `color-picker--${size}`, {
        "color-picker--disabled": disabled,
    });
    const handleChange = useCallback(({ hex, rgb }) => {
        var _a;
        if (!disabled)
            onChange === null || onChange === void 0 ? void 0 : onChange({ hex, opacity: (_a = rgb["a"]) !== null && _a !== void 0 ? _a : 1 });
    }, [onChange, disabled]);
    const popoverContent = (React.createElement(SketchPicker, { color: hexToRgba(value.hex, value.opacity), presetColors: presetColors, onChangeComplete: handleChange }));
    const handleGetContainer = () => {
        if (typeof getContainer === "function") {
            return getContainer();
        }
        if (context.node) {
            return context.node;
        }
        return document.body;
    };
    return (React.createElement(Popover, { overlayClassName: `${BRZ_PREFIX}-color-picker__popover`, placement: "rightTop", content: popoverContent, trigger: "click", getPopupContainer: handleGetContainer },
        React.createElement("div", { className: className, style: getFieldsStyleTheme(theme) },
            React.createElement("span", { className: `${BRZ_PREFIX}-color-picker__name-color` }, value.hex),
            React.createElement("span", { className: `${BRZ_PREFIX}-color-picker__select-color` },
                React.createElement(Icon, { source: CmsIconColorPricker, size: size === "small" ? "16px" : "24px" })))));
};