@frontify/fondue/dist/components/LegacyOrderableList/LegacyOrderableList.es.js

Design system of Frontify

import { jsx as s, jsxs as b } from "react/jsx-runtime";
import { useId as I } from "@react-aria/utils";
import { useState as g, useEffect as L, Fragment as h } from "react";
import { DndProvider as y } from "react-dnd";
import { HTML5Backend as D } from "react-dnd-html5-backend";
import { LegacyCollectionItem as k } from "./LegacyCollectionItem.es.js";
import { DropZone as d } from "../DropZone/DropZone.es.js";
import { moveItems as v } from "../../utilities/dnd/moveItems.es.js";
const C = (e, o) => e.sort === null && o.sort === null || e.sort === null ? 1 : o.sort === null ? -1 : e.sort - o.sort, F = ({
  onMove: e,
  dragDisabled: o,
  items: a,
  renderContent: m,
  "data-test-id": c = "orderable-list"
}) => {
  const [l, p] = g(a), n = I();
  L(() => {
    const t = [...a];
    t.sort(C), p(t);
  }, [a]);
  const i = (t, r, f) => {
    const u = v(t, r, f, l);
    e(u);
  };
  return /* @__PURE__ */ s(y, { backend: D, children: /* @__PURE__ */ s("div", { className: "tw-outline-none", "data-test-id": c, children: l.map((t, r) => /* @__PURE__ */ b(h, { children: [
    /* @__PURE__ */ s(
      d,
      {
        data: {
          targetItem: t,
          position: "before"
        },
        onDrop: i,
        accept: n
      },
      `orderable-list-item-${r}-before`
    ),
    /* @__PURE__ */ s(
      k,
      {
        dragDisabled: o,
        item: t,
        renderContent: m,
        listId: n
      },
      t.id
    ),
    r === a.length - 1 && /* @__PURE__ */ s(
      d,
      {
        data: {
          targetItem: t,
          position: "after"
        },
        onDrop: i,
        accept: n
      },
      `orderable-list-item-${r}-after`
    )
  ] }, `dropzone-orderable-list-key-${r}`)) }) });
};
F.displayName = "FondueLegacyOrderableList";
export {
  F as LegacyOrderableList
};
//# sourceMappingURL=LegacyOrderableList.es.js.map