@adaptabletools/adaptable/src/components/ColorPicker/OptionalColorPicker.js

Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef } from 'react';
import { Box, Flex } from '../Flex';
import SimpleButton from '../SimpleButton';
import { twMerge } from '../../twMerge';
import { ColorPicker } from './ColorPicker';
const DEFAULT_COLOR = '#000000';
export const OptionalColorPicker = (props) => {
    const { api, value, onChange, defaultColor = DEFAULT_COLOR, disabled = false, includeAlpha = true, className, } = props;
    const pickerRef = useRef(null);
    const pendingOpenRef = useRef(false);
    useEffect(() => {
        if (pendingOpenRef.current && value && pickerRef.current) {
            pendingOpenRef.current = false;
            pickerRef.current.click();
        }
    }, [value]);
    const handleActivate = () => {
        pendingOpenRef.current = true;
        onChange(defaultColor);
    };
    if (!value) {
        return (_jsxs(Flex, { alignItems: "center", className: twMerge('OptionalColorPicker twa:gap-1', className), children: [_jsx("button", { type: "button", disabled: disabled, className: "ab-OptionalColorPicker-empty", onClick: handleActivate, "aria-label": "Set colour", title: "Click to set colour" }), _jsx(Box, { className: "twa:text-2 twa:text-muted-foreground", children: "None" })] }));
    }
    return (_jsxs(Flex, { alignItems: "center", className: twMerge('OptionalColorPicker twa:gap-1', className), children: [_jsx(ColorPicker, { ref: pickerRef, api: api, value: value, disabled: disabled, includeAlpha: includeAlpha, onChange: onChange }), _jsx(SimpleButton, { icon: "close", variant: "text", disabled: disabled, tooltip: "Clear colour", onClick: () => onChange(undefined) })] }));
};