@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 { useKWIZFluentContext } from "../helpers/context-internal";
import { ButtonEX } from "./button";
import { InputEx } from "./input";
import { Prompter } from "./prompt";
export const ColorPickerEx = (props) => {
    var _a, _b, _c, _d, _e, _f, _g, _h;
    const ctx = useKWIZFluentContext();
    const [isOpen, setIsOpen] = useStateEX(false);
    const [selectedColor, setSelectedColor] = useStateEX(props.value);
    const getColorCells = React.useCallback(() => {
        let cells = [
            "white", "black"
        ];
        return cells;
    }, useEffectOnlyOnMount);
    const lblOpenColorPicker = ((_b = (_a = ctx.strings) === null || _a === void 0 ? void 0 : _a.btn_open_param) === null || _b === void 0 ? void 0 : _b.call(_a, { cap: true, param: ((_d = (_c = ctx.strings) === null || _c === void 0 ? void 0 : _c.color_picker) === null || _d === void 0 ? void 0 : _d.call(_c, { cap: true })) || "color picker" })) || "Open color picker";
    return _jsxs(_Fragment, { children: [props.buttonOnly
                ? _jsx(ButtonEX, { disabled: props.disabled, title: lblOpenColorPicker, 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 || ((_f = (_e = ctx.strings) === null || _e === void 0 ? void 0 : _e.placeholder_input) === null || _f === void 0 ? void 0 : _f.call(_e, { cap: true })) || "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: lblOpenColorPicker, 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 || ((_h = (_g = ctx.strings) === null || _g === void 0 ? void 0 : _g.choose_color) === null || _h === void 0 ? void 0 : _h.call(_g, { cap: true })) || "Choose a color", children: _jsx(ColorPicker, { color: selectedColor, onChange: color => setSelectedColor(color.hex), presets: getColorCells() }) })] });
};
//# sourceMappingURL=ColorPickerDialog.js.map