@rjsf/core/lib/components/templates/WrapIfAdditionalTemplate.js

A simple React component capable of building HTML forms out of a JSON schema.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ADDITIONAL_PROPERTY_FLAG, buttonId, TranslatableString, } from '@rjsf/utils';
import Label from './FieldTemplate/Label.js';
/** The `WrapIfAdditional` component is used by the `FieldTemplate` to rename, or remove properties that are
 * part of an `additionalProperties` part of a schema.
 *
 * @param props - The `WrapIfAdditionalProps` for this component
 */
export default function WrapIfAdditionalTemplate(props) {
    const { id, classNames, style, disabled, displayLabel, label, onKeyRenameBlur, onRemoveProperty, rawDescription, readonly, required, schema, hideError, rawErrors, children, uiSchema, registry, } = props;
    const { templates, translateString } = registry;
    // Button templates are not overridden in the uiSchema
    const { RemoveButton } = templates.ButtonTemplates;
    const keyLabel = translateString(TranslatableString.KeyLabel, [label]);
    const additional = ADDITIONAL_PROPERTY_FLAG in schema;
    const hasDescription = !!rawDescription;
    const classNamesList = ['form-group', classNames];
    if (!hideError && rawErrors && rawErrors.length > 0) {
        classNamesList.push('has-error has-danger');
    }
    const uiClassNames = classNamesList.join(' ').trim();
    if (!additional) {
        return (_jsx("div", { className: uiClassNames, style: style, children: children }));
    }
    const margin = hasDescription ? 46 : 26;
    return (_jsx("div", { className: uiClassNames, style: style, children: _jsxs("div", { className: 'row', children: [_jsx("div", { className: 'col-xs-5 form-additional', children: _jsxs("div", { className: 'form-group', children: [displayLabel && _jsx(Label, { label: keyLabel, required: required, id: `${id}-key` }), displayLabel && rawDescription && _jsx("div", { children: "\u00A0" }), _jsx("input", { className: 'form-control', type: 'text', id: `${id}-key`, onBlur: onKeyRenameBlur, defaultValue: label })] }) }), _jsx("div", { className: 'form-additional form-group col-xs-5', children: children }), _jsx("div", { className: 'col-xs-2', style: { marginTop: displayLabel ? `${margin}px` : undefined }, children: _jsx(RemoveButton, { id: buttonId(id, 'remove'), className: 'rjsf-object-property-remove btn-block', style: { border: '0' }, disabled: disabled || readonly, onClick: onRemoveProperty, uiSchema: uiSchema, registry: registry }) })] }) }));
}