@aokiapp/rjsf-mantine-theme/lib/templates/BaseInputTemplate.js

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

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback } from 'react';
import { PasswordInput, TextInput } from '@mantine/core';
import { ariaDescribedByIds, examplesId, getInputProps, labelValue, } from '@rjsf/utils';
import { createErrors } from '../utils/createErrors';
import { useFieldContext } from './FieldTemplate';
/** The `BaseInputTemplate` is the template to use to render the basic `<input>` component for the `core` theme.
 * It is used as the template for rendering many of the <input> based widgets that differ by `type` and callbacks only.
 * It can be customized/overridden for other themes or individual implementations as needed.
 *
 * @param props - The `WidgetProps` for this template
 */
export default function BaseInputTemplate(props) {
    const { id, placeholder, label, hideLabel, value, required, readonly, disabled, onChange, onChangeOverride, onBlur, onFocus, autofocus, options, schema, type, rawErrors, className, hideError, } = props;
    // Note: since React 15.2.0 we can't forward unknown element attributes, so we
    // exclude the "options" and "schema" ones here.
    if (!id) {
        console.log('No id for', props);
        throw new Error(`no id for props ${JSON.stringify(props)}`);
    }
    const { description } = useFieldContext();
    const inputProps = getInputProps(schema, type, options);
    let inputValue;
    if (inputProps.type === 'number' || inputProps.type === 'integer') {
        inputValue = value || value === 0 ? value : '';
    }
    else {
        inputValue = value == null ? '' : value;
    }
    const _onChange = useCallback(({ target: { value } }) => onChange(value === '' ? options.emptyValue : value), [onChange, options]);
    const _onBlur = useCallback(({ target: { value } }) => onBlur(id, value), [onBlur, id]);
    const _onFocus = useCallback(({ target: { value } }) => onFocus(id, value), [onFocus, id]);
    const InputComponent = type === 'password' ? PasswordInput : TextInput;
    return (_jsxs(_Fragment, { children: [_jsx(InputComponent, { id: id, placeholder: placeholder, description: description, ...inputProps, label: labelValue(label, hideLabel, undefined), required: required, autoFocus: autofocus, disabled: disabled || readonly, list: schema.examples ? examplesId(id) : undefined, value: inputValue, error: createErrors(rawErrors, hideError), onChange: onChangeOverride || _onChange, onBlur: _onBlur, onFocus: _onFocus, "aria-describedby": ariaDescribedByIds(id, !!schema.examples), className: `armt-widget-input ${className || ''}` }, id), Array.isArray(schema.examples) && (_jsx("datalist", { id: examplesId(id), children: schema.examples
                    .concat(schema.default && !schema.examples.includes(schema.default) ? [schema.default] : [])
                    .map((example) => {
                    return _jsx("option", { value: example }, example);
                }) }))] }));
}
//# sourceMappingURL=BaseInputTemplate.js.map