@datalayer/primer-rjsf
Version:
React JSON Schema Form (RJSF) for Primer
30 lines (29 loc) • 2.13 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, FormControl, TextInput } from "@primer/react";
import { ADDITIONAL_PROPERTY_FLAG, TranslatableString, } from "@rjsf/utils";
/** 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 additional = ADDITIONAL_PROPERTY_FLAG in schema;
const btnStyle = {
flex: 1,
paddingLeft: 6,
paddingRight: 6,
fontWeight: "bold",
};
if (!additional) {
return (_jsx("div", { className: classNames, style: style, children: children }));
}
const handleBlur = ({ target }) => onKeyChange(target.value);
return (_jsxs(Box, { sx: { display: 'flex', width: '100%', flexFlow: 'row wrap' }, alignItems: "center",
//spacing={2}
className: classNames, style: style, children: [_jsx(Box, { pr: 2, sx: { flexBasis: 0, flexGrow: 1, maxWidth: '100%' }, children: _jsxs(FormControl, { id: `${id}-key`, required: required, children: [_jsx(FormControl.Label, { children: keyLabel }), _jsx(TextInput, { defaultValue: label, disabled: disabled || readonly, name: `${id}-key`, onBlur: !readonly ? handleBlur : undefined, type: "text", block: true })] }) }), _jsx(Box, { pr: 2, sx: { flexBasis: 0, flexGrow: 1, maxWidth: '100%' }, children: children }), _jsx(Box, { children: _jsx(RemoveButton, { iconType: "default", style: btnStyle, disabled: disabled || readonly, onClick: onDropPropertyClick(label), uiSchema: uiSchema, registry: registry }) })] }, `${id}-key`));
}