@rjsf/semantic-ui/lib/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.js

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

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ADDITIONAL_PROPERTY_FLAG, buttonId, TranslatableString, } from '@rjsf/utils';
import { Form, Grid } from 'semantic-ui-react';
/** 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 { children, classNames, style, disabled, id, label, displayLabel, onKeyRenameBlur, onRemoveProperty, rawDescription, readonly, required, schema, 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 { readonlyAsDisabled = true, wrapperStyle } = registry.formContext;
    const additional = ADDITIONAL_PROPERTY_FLAG in schema;
    const margin = rawDescription ? 4 : 24;
    if (!additional) {
        return (_jsx("div", { className: classNames, style: style, children: children }));
    }
    return (_jsx("div", { className: classNames, style: style, children: _jsx(Grid, { children: _jsxs(Grid.Row, { children: [_jsx(Grid.Column, { width: 7, className: 'form-additional', children: _jsx(Form.Group, { widths: 'equal', grouped: true, children: _jsx(Form.Input, { className: 'form-group', hasFeedback: true, fluid: true, htmlFor: `${id}`, label: displayLabel ? keyLabel : undefined, required: required, defaultValue: label, disabled: disabled || (readonlyAsDisabled && readonly), id: `${id}`, name: `${id}`, onBlur: !readonly ? onKeyRenameBlur : undefined, style: wrapperStyle, type: 'text' }) }) }), _jsx(Grid.Column, { width: 7, className: 'form-additional', verticalAlign: 'middle', children: children }), _jsx(Grid.Column, { verticalAlign: 'middle', style: displayLabel ? { marginTop: `${margin}px` } : undefined, children: _jsx(RemoveButton, { id: buttonId(id, 'remove'), iconType: 'mini', className: 'rjsf-object-property-remove', disabled: disabled || readonly, onClick: onRemoveProperty, uiSchema: uiSchema, registry: registry }) })] }) }) }, `${id}-key`));
}
//# sourceMappingURL=WrapIfAdditionalTemplate.js.map