@snups/rjsf-mantine/lib/templates/WrapIfAdditionalTemplate.js

Mantine theme, fields and widgets for react-jsonschema-form

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback } from 'react';
import { ADDITIONAL_PROPERTY_FLAG, UI_OPTIONS_KEY, buttonId, TranslatableString, } from '@snups/rjsf-utils';
import { Flex, Grid, TextInput } from '@mantine/core';
/** 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, label, required, readonly, disabled, schema, uiSchema, onKeyChange, onDropPropertyClick, registry, children, } = 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 handleBlur = useCallback(({ target }) => onKeyChange(target && target.value), [onKeyChange]);
    if (!additional) {
        return (_jsx("div", { className: classNames, style: style, children: children }));
    }
    // The `block` prop is not part of the `IconButtonProps` defined in the template, so put it into the uiSchema instead
    const uiOptions = uiSchema ? uiSchema[UI_OPTIONS_KEY] : {};
    const buttonUiOptions = {
        ...uiSchema,
        [UI_OPTIONS_KEY]: { ...uiOptions, block: true },
    };
    return (_jsx("div", { className: classNames, style: style, children: _jsxs(Flex, { gap: 'xs', align: 'end', justify: 'center', children: [_jsxs(Grid, { w: '100%', align: 'center', children: [_jsx(Grid.Col, { span: 6, className: 'form-additional', children: _jsx("div", { className: 'form-group', children: _jsx(TextInput, { className: 'form-group', label: keyLabel, defaultValue: label, required: required, disabled: disabled || readonly, id: `${id}-key`, name: `${id}-key`, onBlur: !readonly ? handleBlur : undefined }) }) }), _jsx(Grid.Col, { span: 6, className: 'form-additional', children: children })] }), _jsx(RemoveButton, { id: buttonId(id, 'remove'), iconType: 'sm', className: 'rjsf-array-item-remove', disabled: disabled || readonly, onClick: onDropPropertyClick(label), uiSchema: buttonUiOptions, registry: registry })] }) }));
}
//# sourceMappingURL=WrapIfAdditionalTemplate.js.map