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

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

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { TextField } from '@fluentui/react';
import { ADDITIONAL_PROPERTY_FLAG, TranslatableString, } from '@rjsf/utils';
export default function WrapIfAdditionalTemplate(props) {
    const { children, disabled, id, label, onDropPropertyClick, onKeyChange, readonly, registry, required, schema, style, uiSchema, } = props;
    const { templates, translateString } = registry;
    // TODO: do this better by not returning the form-group class from master.
    let { classNames = '' } = props;
    classNames = 'ms-Grid-col ms-sm12 ' + classNames.replace('form-group', '');
    // 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;
    if (!additional) {
        return (_jsx("div", { className: classNames, style: { ...style, marginBottom: 15 }, children: children }));
    }
    const handleBlur = ({ target }) => onKeyChange(target.value);
    return (_jsx("div", { className: classNames, style: { ...style, marginBottom: 15 }, dir: 'ltr', children: _jsxs("div", { className: 'ms-Grid-row', children: [_jsx("div", { className: 'ms-Grid-col ms-sm4 ms-md4 ms-lg5', children: _jsx(TextField, { required: required, label: keyLabel, defaultValue: label, disabled: disabled || readonly, id: `${id}-key`, name: `${id}-key`, onBlur: !readonly ? handleBlur : undefined, type: 'text' }) }), _jsx("div", { className: 'ms-Grid-col ms-sm4 ms-md4 ms-lg5', children: children }), _jsx("div", { className: 'ms-Grid-col ms-sm4 ms-md4 ms-lg2', style: { textAlign: 'right' }, children: _jsx(RemoveButton, { disabled: disabled || readonly, onClick: onDropPropertyClick(label), uiSchema: uiSchema, registry: registry }) })] }, `${id}-key`) }));
}
//# sourceMappingURL=WrapIfAdditionalTemplate.js.map