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

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

import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { getUiOptions, getTemplate } from '@rjsf/utils';
import { Group, Divider, Box } from '@mantine/core';
import { DragDropContext, Droppable } from '@hello-pangea/dnd';
import { useState } from 'react';
import classes from './ArrayFieldTemplate.module.css.mjs';
import { IconCopy, IconTrash } from '@tabler/icons-react';
import ArrayFieldItemTemplate from './ArrayFieldItemTemplate.mjs';

function ArrayFieldTemplate(props) {
  const {
    canAdd,
    className,
    disabled,
    idSchema,
    uiSchema,
    items,
    onAddClick,
    readonly,
    registry,
    required,
    schema,
    title
  } = props;
  const uiOptions = getUiOptions(uiSchema);
  const ArrayFieldDescriptionTemplate = getTemplate(
    "ArrayFieldDescriptionTemplate",
    registry,
    uiOptions
  );
  const ArrayFieldTitleTemplate = getTemplate(
    "ArrayFieldTitleTemplate",
    registry,
    uiOptions
  );
  const {
    ButtonTemplates: { AddButton }
  } = registry.templates;
  const _title = uiOptions.title || title;
  const legendNode = /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
    title && /* @__PURE__ */ jsx(
      ArrayFieldTitleTemplate,
      {
        idSchema,
        title: _title,
        required,
        schema,
        uiSchema,
        registry
      }
    ),
    /* @__PURE__ */ jsx(
      ArrayFieldDescriptionTemplate,
      {
        idSchema,
        description: uiOptions.description || schema.description,
        schema,
        uiSchema,
        registry
      }
    )
  ] });
  const orderable = (uiOptions.orderable ?? false) && !readonly && !disabled;
  const removable = (uiOptions.removable ?? true) && !readonly && !disabled;
  const copyable = (uiOptions.copyable ?? false) && !readonly && !disabled;
  const [isDragging, setIsDragging] = useState(false);
  let arrItems;
  if (items && items.length > 0) {
    arrItems = /* @__PURE__ */ jsxs(Fragment, { children: [
      /* @__PURE__ */ jsx(Divider, { my: "xs", label: `${_title || "\u914D\u5217"} \u306E\u5148\u982D`, labelPosition: "center" }),
      /* @__PURE__ */ jsxs(
        DragDropContext,
        {
          onBeforeCapture: () => setIsDragging(true),
          onDragEnd: ({ destination, source }) => {
            setIsDragging(false);
            if (destination?.droppableId === "array") {
              items[0].onReorderClick(source.index, destination?.index || 0)();
            } else if (destination?.droppableId === "copy") {
              items[0].onCopyIndexClick(source.index)();
            } else if (destination?.droppableId === "remove") {
              items[0].onDropIndexClick(source.index)();
            }
          },
          children: [
            /* @__PURE__ */ jsx(Droppable, { droppableId: "array", direction: "vertical", children: (provided) => /* @__PURE__ */ jsxs("div", { ...provided.droppableProps, ref: provided.innerRef, children: [
              items.map(({ key, ...itemProps }) => {
                return /* @__PURE__ */ jsx(ArrayFieldItemTemplate, { ...itemProps, orderable, removable: !!removable }, key);
              }),
              provided.placeholder
            ] }) }),
            items[0].hasToolbar && isDragging && /* @__PURE__ */ jsxs(Group, { m: "sm", children: [
              copyable && /* @__PURE__ */ jsx(DropToAction, { icon: /* @__PURE__ */ jsx(IconCopy, {}), label: "\u30B3\u30D4\u30FC", className: classes.dropToCopy, droppableId: "copy" }),
              removable && /* @__PURE__ */ jsx(DropToAction, { icon: /* @__PURE__ */ jsx(IconTrash, {}), label: "\u524A\u9664", className: classes.dropToRemove, droppableId: "remove" })
            ] })
          ]
        }
      ),
      /* @__PURE__ */ jsx(Divider, { my: "xs", label: `${_title || "\u914D\u5217"} \u306E\u672B\u5C3E`, labelPosition: "center" })
    ] });
  } else {
    arrItems = /* @__PURE__ */ jsx(Divider, { my: "xs", label: `${_title || "\u914D\u5217"} \u306F\u7A7A\u3067\u3059`, labelPosition: "center" });
  }
  return /* @__PURE__ */ jsxs(
    Box,
    {
      id: idSchema.$id,
      style: {
        width: "100%"
      },
      className: `armt-template-arrayfield ${className}`,
      children: [
        /* @__PURE__ */ jsxs(Group, { gap: "xs", justify: "space-between", children: [
          legendNode,
          canAdd && /* @__PURE__ */ jsx(AddButton, { onClick: onAddClick, disabled: disabled || readonly, uiSchema, registry })
        ] }),
        arrItems
      ]
    }
  );
}
function DropToAction({
  icon,
  label,
  className,
  droppableId
}) {
  return /* @__PURE__ */ jsx(Droppable, { droppableId, direction: "horizontal", children: (provided, snapshot) => /* @__PURE__ */ jsxs(
    "div",
    {
      className: `${classes.dropToAction} ${className} ${snapshot.isDraggingOver && classes.dtaDraggingOver}`,
      ...provided.droppableProps,
      ref: provided.innerRef,
      children: [
        /* @__PURE__ */ jsx("div", { className: classes.dtaIcon, children: icon }),
        /* @__PURE__ */ jsx("div", { className: classes.dtaLabel, children: label })
      ]
    }
  ) });
}

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