@kwiz/fluentui/dist/controls/ColorPickerDialog.js

KWIZ common controls for FluentUI

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Field } from "@fluentui/react-components";
import { ColorRegular } from "@fluentui/react-icons";
import { isFunction, isNullOrEmptyString, isNumber } from "@kwiz/common";
import * as React from "react";
import ColorPicker from 'react-pick-color';
import { useEffectOnlyOnMount, useStateEX } from "../helpers";
import { ButtonEX } from "./button";
import { InputEx } from "./input";
import { Prompter } from "./prompt";
export const ColorPickerEx = (props) => {
    const [isOpen, setIsOpen] = useStateEX(false);
    const [selectedColor, setSelectedColor] = useStateEX(props.value);
    const getColorCells = React.useCallback(() => {
        let cells = [
            "white", "black"
        ];
        return cells;
    }, useEffectOnlyOnMount);
    return _jsxs(_Fragment, { children: [props.buttonOnly
                ? _jsx(ButtonEX, { disabled: props.disabled, title: "Open color picker", icon: _jsx(ColorRegular, { color: selectedColor }), onClick: (e) => setIsOpen(true) })
                : _jsx(Field, { label: props.label, required: props.required === true, validationMessage: props.showValidationErrors && props.required === true && isNullOrEmptyString(selectedColor) ? "You can't leave this blank." : undefined, children: _jsx(InputEx, { disabled: props.disabled, placeholder: props.placeholder || "Enter value here", style: isNumber(props.width) ? { width: props.width } : undefined, value: selectedColor, onChange: (e, data) => {
                            setSelectedColor(data.value);
                            if (isFunction(props.onChange)) {
                                props.onChange(data.value);
                            }
                        }, contentAfter: _jsx(ButtonEX, { disabled: props.disabled, title: "Open color picker", icon: _jsx(ColorRegular, { color: selectedColor }), onClick: (e) => setIsOpen(true) }) }) }), isOpen && _jsx(Prompter, { maxWidth: 332, mountNode: props.mountNode, hideOk: true, hideCancel: true, onCancel: () => {
                    if (isFunction(props.onChange)) {
                        props.onChange(selectedColor);
                    }
                    setIsOpen(false);
                }, showCancelInTitle: true, title: props.label || "Choose a color", children: _jsx(ColorPicker, { color: selectedColor, onChange: color => setSelectedColor(color.hex), presets: getColorCells() }) })] });
};
//# sourceMappingURL=ColorPickerDialog.js.map