@aokiapp/rjsf-mantine-corporate/dist/templates/ArrayFieldTemplate.cjs

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

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var utils = require('@rjsf/utils');
var core = require('@mantine/core');
var dnd = require('@hello-pangea/dnd');
var react = require('react');
var ArrayFieldTemplate_module = require('./ArrayFieldTemplate.module.css.cjs');
var iconsReact = require('@tabler/icons-react');
var ArrayFieldItemTemplate = require('./ArrayFieldItemTemplate.cjs');

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

exports.default = ArrayFieldTemplate;
//# sourceMappingURL=ArrayFieldTemplate.cjs.map