@aokiapp/rjsf-mantine-corporate/lib/templates/ObjectFieldTemplate.mjs

Corporational variant of theme, based on @aokiapp/rjsf-mantine-theme

import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { Group, Box, Stack, Collapse } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { getUiOptions, getTemplate, titleId, descriptionId, canExpand } from '@rjsf/utils';
import classes from './ObjectFieldTemplate.module.css.mjs';
import { IconChevronUp } from '@tabler/icons-react';

function ObjectFieldTemplate(props) {
  const {
    description,
    disabled,
    formData,
    idSchema,
    onAddClick,
    properties,
    readonly,
    registry,
    required,
    schema,
    title,
    uiSchema,
    errorSchema
  } = props;
  const options = getUiOptions(uiSchema);
  const TitleFieldTemplate = getTemplate("TitleFieldTemplate", registry, options);
  const DescriptionFieldTemplate = getTemplate(
    "DescriptionFieldTemplate",
    registry,
    options
  );
  const {
    ButtonTemplates: { AddButton }
  } = registry.templates;
  const [opened, { toggle }] = useDisclosure(true);
  const showLegend = (title || description) && options?.hideLegend !== true;
  const classNames = options.classNames;
  const containError = errorSchema && Object.keys(errorSchema).length > 0;
  const legendInner = /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
    title && /* @__PURE__ */ jsx(
      TitleFieldTemplate,
      {
        id: titleId(idSchema),
        title,
        required,
        schema,
        uiSchema,
        registry
      }
    ),
    description && /* @__PURE__ */ jsx(
      DescriptionFieldTemplate,
      {
        id: descriptionId(idSchema),
        description,
        schema,
        uiSchema,
        registry
      }
    )
  ] });
  const contentInner = /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(Box, { className: "armt-template-objectfield-item", children: properties.map((prop) => prop.content) }),
    canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsx(
      AddButton,
      {
        className: "object-property-expand",
        onClick: onAddClick(schema),
        disabled: disabled || readonly,
        uiSchema,
        registry
      }
    )
  ] });
  if (options.collapsable) {
    const legendNode = showLegend ? /* @__PURE__ */ jsxs(Group, { onClick: toggle, justify: "space-between", wrap: "nowrap", children: [
      legendInner,
      /* @__PURE__ */ jsx(IconChevronUp, { size: "1rem" })
    ] }) : null;
    return /* @__PURE__ */ jsxs(
      Stack,
      {
        id: idSchema.$id,
        role: "group",
        gap: "xs",
        className: `armt-template-objectfield ${classNames ?? ""} ${classes.root} ${containError && classes.error}`,
        children: [
          legendNode,
          /* @__PURE__ */ jsx(Collapse, { in: opened, className: classes.collapse, children: contentInner })
        ]
      }
    );
  } else {
    const legendNode = showLegend ? legendInner : null;
    return /* @__PURE__ */ jsxs(
      Stack,
      {
        id: idSchema.$id,
        role: "group",
        gap: "xs",
        className: `armt-template-objectfield ${classNames ?? ""} ${classes.root} ${containError && classes.error}`,
        children: [
          legendNode,
          contentInner
        ]
      }
    );
  }
}

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