@jbrowse/core/esm/ui/ColorPicker.js

JBrowse 2 core libraries used by plugins

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { colord } from '@jbrowse/core/util/colord';
import { makeStyles } from '@jbrowse/core/util/tss-react';
import { MenuItem, Popover, Select, TextField } from '@mui/material';
import * as paletteColors from "./colors.js";
import { RgbaStringColorPicker } from "./react-colorful.js";
import { useDebounce, useLocalStorage } from "../util/index.js";
const useStyles = makeStyles()({
    picker: { position: 'relative' },
    swatches: {
        display: 'flex',
        padding: 12,
        flexWrap: 'wrap',
    },
    swatch: {
        width: 24,
        height: 24,
        margin: 4,
        border: 'none',
        padding: 0,
        cursor: 'pointer',
        outline: 'none',
    },
});
export const PopoverPicker = ({ color, onChange, }) => {
    const [anchorEl, setAnchorEl] = useState(null);
    const { classes } = useStyles();
    return (_jsxs("div", { className: classes.picker, children: [_jsx("div", { className: classes.swatch, style: { backgroundColor: color }, onClick: event => {
                    setAnchorEl(event.currentTarget);
                } }), _jsx(ColorPopover, { anchorEl: anchorEl, onClose: () => {
                    setAnchorEl(null);
                }, color: color, onChange: onChange })] }));
};
export function ColorPopover({ anchorEl, onChange, onClose, color, }) {
    return (_jsx(Popover, { open: !!anchorEl, anchorEl: anchorEl, onClose: onClose, children: _jsx(ColorPicker, { color: color, onChange: onChange }) }));
}
export function ColorPicker({ onChange, color, }) {
    const { classes } = useStyles();
    const [val, setVal] = useLocalStorage('colorPickerPalette', 'set1');
    const presetColors = paletteColors[val];
    const palettes = Object.keys(paletteColors);
    const [text, setText] = useState(color);
    const rgb = colord(color).toRgbString();
    const rgbDebounced = useDebounce(rgb, 1000);
    const handleChange = (val) => {
        setText(val);
        try {
            onChange(colord(val).toRgbString());
        }
        catch (e) { }
    };
    return (_jsxs("div", { style: { display: 'flex', padding: 10 }, children: [_jsx("div", { style: { width: 200, margin: 5 }, children: _jsx(RgbaStringColorPicker, { color: rgbDebounced, onChange: handleChange }) }), _jsxs("div", { style: { width: 200, margin: 5 }, children: [_jsx(Select, { value: val, onChange: event => {
                            const pal = event.target.value;
                            setVal(pal);
                        }, children: palettes.map(p => (_jsx(MenuItem, { value: p, children: p }, p))) }), _jsx("div", { className: classes.swatches, children: presetColors.map((presetColor, idx) => (_jsx("button", { type: "button", className: classes.swatch, style: { background: presetColor }, onClick: () => {
                                handleChange(presetColor);
                            } }, `${presetColor}-${idx}`))) }), _jsx(TextField, { helperText: 'Manually set color (hex, rgb, or css color name)', value: text, onChange: event => {
                            handleChange(event.target.value);
                        } })] })] }));
}
export default PopoverPicker;