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

Design system of Frontify

import { jsx as m } from "react/jsx-runtime";
import { useId as I } from "@react-aria/utils";
import { useState as y, useEffect as C, useMemo as S } from "react";
import { Tree as D } from "../Tree/Tree.es.js";
import { TreeItem as v } from "../Tree/TreeItem/TreeItem.es.js";
const x = (e, o) => e.sort === null && o.sort === null || e.sort === null ? 1 : o.sort === null ? -1 : e.sort - o.sort, H = (e, o, r) => {
  const n = r.find((s) => s.id === e);
  return n ? [{ ...n, sort: o }] : [];
}, O = ({
  onMove: e,
  dragDisabled: o,
  items: r,
  dragHandlerPosition: n = "none",
  enableDragDelay: s = !0,
  itemStyle: i,
  selectedId: a,
  renderContent: u,
  "data-test-id": d = "orderable-list"
}) => {
  const [c, f] = y(r), p = I(), l = !o;
  C(() => {
    const t = [...r];
    t.sort(x), f(t);
  }, [r]);
  const g = (t) => {
    e(H(t.id, t.sort, c));
  }, b = S(() => ({
    spacingY: "small",
    contentHight: "content-fit",
    shadow: "small",
    borderRadius: "medium",
    borderWidth: "x-small",
    borderStyle: "solid",
    activeColorStyle: "soft",
    ...i
  }), [i]);
  return /* @__PURE__ */ m(
    D,
    {
      draggable: l,
      id: p,
      onDrop: g,
      "data-test-id": d,
      selectedIds: a ? [a] : [],
      itemStyle: b,
      showDragHandlerOnHoverOnly: !l,
      dragHandlerPosition: l ? n : "none",
      showContentWhileDragging: !0,
      enableDragDelay: s,
      children: c.map((t) => {
        const h = `collection-item-${t.id}`;
        return /* @__PURE__ */ m(
          v,
          {
            "data-test-id": `${d}-item`,
            id: t.id,
            type: "collection-item",
            accepts: "collection-item",
            expandable: !1,
            levelConstraint: 0,
            contentComponent: u(t)
          },
          h
        );
      })
    }
  );
};
O.displayName = "FondueOrderableList";
export {
  O as OrderableList
};
//# sourceMappingURL=OrderableList.es.js.map