@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, 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, onDropPropertyClick, onKeyChange, 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;
    if (!additional) {
        return (_jsx("div", { className: classNames, style: style, children: children }));
    }
    const handleBlur = ({ target }) => onKeyChange(target.value);
    return (_jsx("div", { className: classNames, style: style, children: _jsx(Grid, { columns: 'equal', children: _jsxs(Grid.Row, { children: [_jsx(Grid.Column, { 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: keyLabel, required: required, defaultValue: label, disabled: disabled || (readonlyAsDisabled && readonly), id: `${id}`, name: `${id}`, onBlur: !readonly ? handleBlur : undefined, style: wrapperStyle, type: 'text' }) }) }), _jsx(Grid.Column, { className: 'form-additional', verticalAlign: 'middle', children: children }), _jsx(Grid.Column, { children: _jsx(RemoveButton, { iconType: 'mini', className: 'array-item-remove', disabled: disabled || readonly, onClick: onDropPropertyClick(label), uiSchema: uiSchema, registry: registry }) })] }) }) }, `${id}-key`));
}
//# sourceMappingURL=WrapIfAdditionalTemplate.js.map