react-fabric-canvas-designer/dist/UserFirendlyInput/Color.js

A React-based wrapper for Fabric.js to create interactive and customizable canvas-based designs. This library provides tools for drawing, editing, and managing objects on a canvas with React-friendly APIs.

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import Chrome from "@uiw/react-color-chrome";
import { useEffect, useState } from "react";
const InputColor = ({ value, onChange }) => {
    const [color, setColor] = useState(value);
    const [isHidden, setIsHidden] = useState(true);
    useEffect(() => {
        setColor(value);
        setIsHidden(true);
    }, [value]);
    const setValue = () => {
        onChange(color);
        setIsHidden(true);
    };
    return (_jsx(_Fragment, { children: _jsxs("div", { tabIndex: 0, onBlur: setValue, onKeyDown: (e) => {
                if (e.key == "Enter") {
                    e.currentTarget.blur();
                }
                if (e.key == "Escape") {
                    setColor(value);
                }
            }, onClick: () => { setIsHidden(false); }, className: "relative", children: [_jsxs("h4", { className: "flex justify-evenly items-center p-1 bg-white border border-gray-200 text-gray-900 dark:text-gray-50 cursor-pointer rounded-lg disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900  dark:border-neutral-700", children: [_jsx("div", { className: " h-10 w-14 ", onClick: () => { setValue(); }, style: { backgroundColor: value } }), value.toUpperCase()] }), _jsx("div", { className: "absolute z-10", children: _jsx(Chrome, { color: color, popover: "auto", onBlur: setValue, hidden: isHidden, onChange: (color) => { setColor(color.hexa); } }) })] }) }));
};
export default InputColor;