@aokiapp/rjsf-mantine-theme/lib/templates/WrapIfAdditionalTemplate.mjs

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

import { jsx, jsxs } from 'react/jsx-runtime';
import { TranslatableString, ADDITIONAL_PROPERTY_FLAG } from '@rjsf/utils';
import { Group, TextInput, Box } from '@mantine/core';

function WrapIfAdditionalTemplate(props) {
  const {
    children,
    classNames,
    style,
    disabled,
    id,
    label,
    onDropPropertyClick,
    onKeyChange,
    readonly,
    required,
    schema,
    uiSchema,
    registry
  } = props;
  const { templates, translateString } = registry;
  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 /* @__PURE__ */ jsx("div", { className: `${classNames ?? ""} armt-template-wia`, style, children });
  }
  const handleBlur = ({ target }) => onKeyChange(target.value);
  return /* @__PURE__ */ jsx("div", { className: `${classNames ?? ""} armt-template-wia`, style, children: /* @__PURE__ */ jsxs(Group, { align: "center", children: [
    /* @__PURE__ */ jsx(
      TextInput,
      {
        label: keyLabel,
        required,
        defaultValue: label,
        disabled: disabled || readonlyAsDisabled && readonly,
        id,
        name: id,
        onBlur: !readonly ? handleBlur : void 0,
        style: wrapperStyle,
        type: "text"
      }
    ),
    /* @__PURE__ */ jsx(
      Box,
      {
        style: { flexGrow: 1 },
        children
      }
    ),
    /* @__PURE__ */ jsx(
      RemoveButton,
      {
        className: "array-item-remove",
        disabled: disabled || readonly,
        onClick: onDropPropertyClick(label),
        uiSchema,
        registry
      }
    )
  ] }) }, `${id}-key`);
}

export { WrapIfAdditionalTemplate as default };
//# sourceMappingURL=WrapIfAdditionalTemplate.mjs.map