@datalayer/primer-rjsf/lib/primer/BaseInputTemplate/BaseInputTemplate.js

React JSON Schema Form (RJSF) for Primer

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { FormControl, TextInput } from "@primer/react";
import { ariaDescribedByIds, examplesId, getInputProps, } from "@rjsf/utils";
/** 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, required, readonly, disabled, type, label, value, onChange, onBlur, onFocus, autofocus, options, schema, uiSchema, rawErrors = [], formContext, registry, ...textFieldProps } = props;
    const inputProps = getInputProps(schema, type, options);
    // Now we need to pull out the step, min, max into an inner `inputProps` for material-ui
    const { step, min, max, ...rest } = inputProps;
    const otherProps = {
        inputProps: {
            step,
            min,
            max,
            ...(schema.examples ? { list: examplesId(id) } : undefined),
        },
        ...rest,
    };
    const _onChange = ({ target: { value }, }) => onChange(value === "" ? options.emptyValue : value);
    const _onBlur = ({ target: { value } }) => onBlur(id, value);
    const _onFocus = ({ target: { value }, }) => onFocus(id, value);
    const { schemaUtils } = registry;
    const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema);
    return (_jsxs(_Fragment, { children: [_jsx(FormControl.Label, { visuallyHidden: !displayLabel, htmlFor: id, children: label || schema.title }), _jsx(TextInput, { id: id, name: id, placeholder: placeholder, autoFocus: autofocus, required: required, disabled: disabled || readonly, ...otherProps, value: value || value === 0 ? value : "", validationStatus: rawErrors.length > 0 ? "error" : undefined, onChange: _onChange, onBlur: _onBlur, onFocus: _onFocus, block: true, ...textFieldProps, "aria-describedby": ariaDescribedByIds(id, !!schema.examples) }), 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);
                }) }))] }));
}