@rjsf/fluent-ui/lib/ColorWidget/ColorWidget.js

Fluent UI theme, fields and widgets for react-jsonschema-form

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { ColorPicker, getColorFromString } from '@fluentui/react';
import { ariaDescribedByIds, labelValue, } from '@rjsf/utils';
import _pick from 'lodash/pick';
import FluentLabel from '../FluentLabel/FluentLabel.js';
const allowedProps = [
    'componentRef',
    'color',
    'strings',
    'onChange',
    'alphaType',
    'alphaSliderHidden',
    'hexLabel',
    'redLabel',
    'greenLabel',
    'blueLabel',
    'alphaLabel',
    'className',
    'theme',
    'styles',
    'showPreview',
];
export default function ColorWidget({ id, options, value, required, label, hideLabel, onChange, }) {
    const updateColor = (_ev, colorObj) => {
        onChange(colorObj.hex);
    };
    const uiProps = { id, ..._pick(options.props || {}, allowedProps) };
    return (_jsxs(_Fragment, { children: [labelValue(_jsx(FluentLabel, { label: label || undefined, required: required, id: id }), hideLabel), _jsx(ColorPicker, { color: getColorFromString(value), onChange: updateColor, alphaType: 'alpha', showPreview: true, ...uiProps, "aria-describedby": ariaDescribedByIds(id) })] }));
}
//# sourceMappingURL=ColorWidget.js.map