@adaptabletools/adaptable/src/components/ColorPicker/ColorPicker.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 * as React from 'react';
import { useCallback, useEffect } from 'react';
import { debounce } from '../../Utilities/Helpers/TimingHelper';
import { cn } from '../../lib/utils';
import Input from '../Input';
import { getVariableColor } from '../../Utilities/Helpers/StyleHelper';
import tinycolor from 'tinycolor2';
import { Box, Flex } from '../Flex';
import { twMerge } from '../../twMerge';
export const ColorPicker = React.forwardRef((props, ref) => {
    const ColorPalette = props.api.userInterfaceApi.getColorPalette();
    let { value, includeAlpha = true, className, ...restProps } = props;
    const debouncedOnChange = useCallback(debounce((color) => {
        props.onChange(color);
    }, 30), [props.onChange]);
    useEffect(() => {
        return () => {
            debouncedOnChange.cancel();
        };
    }, [debouncedOnChange]);
    const optionsMap = ColorPalette.reduce((acc, colorItem) => ({ ...acc, [getVariableColor(colorItem)]: colorItem }), {});
    const ABcolorChoicesOptions = Object.keys(optionsMap).map((x) => {
        return (_jsx("option", { value: x, children: x }, x));
    });
    const ABcolorChoices = _jsx("datalist", { id: 'ABcolorChoices', children: ABcolorChoicesOptions });
    const preparedValue = React.useMemo(() => {
        const color = getVariableColor(value);
        return tinycolor(color).toHexString();
    }, [value]);
    const preparedAlphaColor = React.useMemo(() => {
        const color = getVariableColor(value);
        return [tinycolor(color).setAlpha(0).toRgbString(), tinycolor(color).setAlpha(1).toRgbString()];
    }, [value]);
    const rangeBackround = `linear-gradient(90deg, ${preparedAlphaColor[0]} 0%, ${preparedAlphaColor[1]} 100%)`;
    const alpha = tinycolor(getVariableColor(value)).getAlpha();
    return (_jsxs(Flex, { className: cn('ColorPicker twa:items-center twa:gap-2', {
            'twa:opacity-30': props.disabled,
        }, className), children: [_jsx(Input, { ...restProps, as: undefined, disabled: props.disabled, className: twMerge('ab-ColorPicker-swatch'), onChange: (event) => {
                    const color = optionsMap[event.target.value] ?? event.target.value;
                    debouncedOnChange(color);
                }, value: preparedValue, ref: ref, type: "color", list: "ABcolorChoices", title: props.title }), ABcolorChoices, includeAlpha && (_jsxs(Flex, { alignItems: "center", className: "twa:gap-1", children: [_jsx(Box, { children: "Opacity" }), _jsx(Flex, { alignItems: "center", className: "twa:min-h-input", children: _jsx(Input, { disabled: props.disabled, className: "ab-ColorPicker-range", style: { background: rangeBackround }, value: alpha, onChange: (event) => {
                                const color = tinycolor(getVariableColor(value))
                                    .setAlpha(event.target.value)
                                    .toRgbString();
                                debouncedOnChange(color);
                            }, min: 0, max: 1, step: 0.01, type: "range" }) })] }))] }));
});