@teknim/rjsf-mantine/lib/widgets/ColorWidget.js

Mantine theme, fields and widgets for react-jsonschema-form

import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback } from 'react';
import { labelValue, ariaDescribedByIds, } from '@rjsf/utils';
import { ColorInput } from '@mantine/core';
import { cleanupOptions } from '../utils';
/** The `ColorWidget` component uses the `ColorInput` from Mantine, allowing users to pick a color.
 *
 * @param props - The `WidgetProps` for this component
 */
export default function ColorWidget(props) {
    const { id, name, value, placeholder, required, disabled, readonly, autofocus, label, hideLabel, rawErrors, options, onChange, onBlur, onFocus, } = props;
    const emptyValue = options.emptyValue || '';
    const themeProps = cleanupOptions(options);
    const handleChange = useCallback((nextValue) => {
        onChange(nextValue);
    }, [onChange, emptyValue]);
    const handleBlur = useCallback(({ target }) => {
        if (onBlur) {
            onBlur(id, target && target.value);
        }
    }, [onBlur, id]);
    const handleFocus = useCallback(({ target }) => {
        if (onFocus) {
            onFocus(id, target && target.value);
        }
    }, [onFocus, id]);
    return (_jsx(ColorInput, { id: id, name: name, value: value || '', placeholder: placeholder || undefined, required: required, disabled: disabled || readonly, autoFocus: autofocus, label: labelValue(label || undefined, hideLabel, false), onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, error: rawErrors && rawErrors.length > 0 ? rawErrors.join('\n') : undefined, ...themeProps, "aria-describedby": ariaDescribedByIds(id), popoverProps: { withinPortal: false } }));
}
//# sourceMappingURL=ColorWidget.js.map