@reportportal/ui-kit 0.0.1-alpha.134 → 0.0.1-alpha.136

package/dist/sortable.js

@@ -0,0 +1,160 @@
+import { jsx as u } from "react/jsx-runtime";
+import { c as I } from "./bind-06a7ff84.js";
+import { useEffect as O, useCallback as x } from "react";
+import { useDrag as S, useDrop as T, useDragLayer as h } from "react-dnd";
+import { getEmptyImage as E } from "react-dnd-html5-backend";
+import { createPortal as L } from "react-dom";
+const D = "SORTABLE_ITEM", w = ({
+  id: e,
+  index: r,
+  type: s = D,
+  isDisabled: i = !1,
+  onDrop: l,
+  hideDefaultPreview: c = !1
+}) => {
+  const [{ isDragging: d }, g, a] = S(
+    () => ({
+      type: s,
+      item: { id: e, index: r, type: s },
+      collect: (p) => ({
+        isDragging: p.isDragging()
+      }),
+      canDrag: () => !i
+    }),
+    [e, r, s, i]
+  );
+  O(() => {
+    c && a(E(), { captureDraggingState: !0 });
+  }, [c, a]);
+  const [{ isOver: o, draggedItemIndex: t }, n] = T(
+    () => ({
+      accept: s,
+      collect: (p) => {
+        const m = p.getItem(), b = (m == null ? void 0 : m.id) !== e ? p.isOver() : !1;
+        return {
+          isOver: b,
+          draggedItemIndex: b ? (m == null ? void 0 : m.index) ?? null : null
+        };
+      },
+      drop: (p) => {
+        p.id !== e && l && l(p.index, r);
+      }
+    }),
+    [e, r, s, l]
+  ), _ = (() => t === null ? null : t > r ? "top" : "bottom")();
+  return {
+    isDragging: d,
+    isOver: o,
+    draggedItemIndex: t,
+    dropPosition: _,
+    dragRef: g,
+    dropRef: n,
+    previewRef: a
+  };
+}, P = {
+  "sortable-item": "_sortable-item_8p4ra_1",
+  "sortable-item--drop-target-top": "_sortable-item--drop-target-top_8p4ra_6",
+  "sortable-item--drop-target-bottom": "_sortable-item--drop-target-bottom_8p4ra_17",
+  "drag-handle": "_drag-handle_8p4ra_29",
+  "drag-handle--disabled": "_drag-handle--disabled_8p4ra_36"
+}, C = I.bind(P), N = ({
+  id: e,
+  index: r,
+  type: s = D,
+  isDisabled: i = !1,
+  className: l,
+  draggingClassName: c,
+  dropTargetClassName: d,
+  onDrop: g,
+  hideDefaultPreview: a = !1,
+  children: o
+}) => {
+  const { isDragging: t, dropPosition: n, dragRef: f, dropRef: _, previewRef: p } = w({
+    id: e,
+    index: r,
+    type: s,
+    isDisabled: i,
+    onDrop: g,
+    hideDefaultPreview: a
+  }), m = typeof o == "function", y = C("sortable-item", l, {
+    "sortable-item--dragging": t,
+    "sortable-item--drop-target-top": n === "top",
+    "sortable-item--drop-target-bottom": n === "bottom",
+    [c || ""]: t && c,
+    [d || ""]: n && d
+  });
+  return /* @__PURE__ */ u("div", { ref: (v) => {
+    _(v), a || p(v), m || f(v);
+  }, className: y, children: m ? o({
+    isDragging: t,
+    isOver: n !== null,
+    dragRef: f
+  }) : o });
+}, W = ({
+  items: e,
+  type: r = D,
+  isDisabled: s = !1,
+  className: i,
+  itemClassName: l,
+  onReorder: c,
+  renderItem: d,
+  keyExtractor: g = (a) => a.id
+}) => {
+  const a = x(
+    (o, t) => {
+      const n = [...e], [f] = n.splice(o, 1);
+      n.splice(t, 0, f), c(n);
+    },
+    [e, c]
+  );
+  return /* @__PURE__ */ u("div", { className: i, children: e.map((o, t) => /* @__PURE__ */ u(
+    N,
+    {
+      id: g(o),
+      index: t,
+      type: r,
+      isDisabled: s,
+      className: l,
+      onDrop: a,
+      children: ({ dragRef: n, isDragging: f }) => d(o, t, n, f)
+    },
+    g(o)
+  )) });
+}, $ = (e) => {
+  if (!e)
+    return {
+      display: "none"
+    };
+  const { x: r, y: s } = e, i = `translate(${r}px, ${s}px)`;
+  return {
+    transform: i,
+    WebkitTransform: i
+  };
+}, A = {
+  "drag-layer": "_drag-layer_1izcx_1",
+  "drag-preview": "_drag-preview_1izcx_11"
+}, R = I.bind(A), Y = ({
+  type: e,
+  renderPreview: r,
+  className: s,
+  previewClassName: i,
+  portalTarget: l = document.body
+}) => {
+  const { itemType: c, isDragging: d, item: g, clientOffset: a } = h(
+    (t) => ({
+      item: t.getItem(),
+      itemType: t.getItemType(),
+      clientOffset: t.getClientOffset(),
+      isDragging: t.isDragging()
+    })
+  );
+  if (!d || c !== e || !g || !l)
+    return null;
+  const o = /* @__PURE__ */ u("div", { className: R("drag-layer", s), children: /* @__PURE__ */ u("div", { className: R("drag-preview", i), style: $(a), children: r(g) }) });
+  return L(o, l);
+};
+export {
+  Y as DragLayer,
+  N as SortableItem,
+  W as SortableList
+};