@rjsf/mui/lib/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.js

Material UI 7 theme, fields and widgets for react-jsonschema-form

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Grid from '@mui/material/Grid';
import TextField from '@mui/material/TextField';
import { ADDITIONAL_PROPERTY_FLAG, buttonId, TranslatableString, getUiOptions, } from '@rjsf/utils';
import { computeSxProps, getMuiProps } from '../util.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 { children, classNames, style, disabled, id, label, displayLabel, onKeyRenameBlur, onRemoveProperty, 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 additional = ADDITIONAL_PROPERTY_FLAG in schema;
    const btnStyle = {
        flex: 1,
        paddingLeft: 6,
        paddingRight: 6,
        fontWeight: 'bold',
    };
    const uiOptions = getUiOptions(uiSchema);
    const { rjsfSlotProps: { wrapGridContainer, wrapKeyGridItem, wrapChildrenGridItem, wrapRemoveButtonGridItem } = {} } = getMuiProps(uiOptions);
    if (!additional) {
        return (_jsx("div", { className: classNames, style: style, children: children }));
    }
    return (_jsxs(Grid, { container: true, spacing: 2, className: classNames, style: style, ...wrapGridContainer, sx: computeSxProps({ alignItems: 'flex-start' }, wrapGridContainer), children: [_jsx(Grid, { size: 5.5, ...wrapKeyGridItem, children: _jsx(TextField, { fullWidth: true, required: required, label: displayLabel ? keyLabel : undefined, defaultValue: label, disabled: disabled || readonly, id: `${id}-key`, name: `${id}-key`, onBlur: !readonly ? onKeyRenameBlur : undefined, type: 'text' }, label) }), _jsx(Grid, { size: 5.5, ...wrapChildrenGridItem, children: children }), _jsx(Grid, { ...wrapRemoveButtonGridItem, sx: computeSxProps({ mt: 1.5 }, wrapRemoveButtonGridItem), children: _jsx(RemoveButton, { id: buttonId(id, 'remove'), className: 'rjsf-object-property-remove', iconType: 'default', style: btnStyle, disabled: disabled || readonly, onClick: onRemoveProperty, uiSchema: uiSchema, registry: registry }) })] }, `${id}-key`));
}
//# sourceMappingURL=WrapIfAdditionalTemplate.js.map