@reportportal/ui-kit 0.0.1-alpha.147 → 0.0.1-alpha.149

package/dist/sortable.js

@@ -1,160 +1,214 @@
-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 = ({
+import { jsx as R } from "react/jsx-runtime";
+import { c as N } from "./bind-06a7ff84.js";
+import { useRef as w, useState as F, useEffect as k, useCallback as x } from "react";
+import { useDrag as $, useDrop as H, useDragLayer as Y } from "react-dnd";
+import { getEmptyImage as z } from "react-dnd-html5-backend";
+import { DROP_POSITIONS as g, DROP_DETECTION_MODE as E } from "./common.js";
+import { createPortal as V } from "react-dom";
+const I = "SORTABLE_ITEM", X = (e) => {
+  if (!e)
+    return {
+      display: "none"
+    };
+  const { x: t, y: r } = e, l = `translate(${t}px, ${r}px)`;
+  return {
+    transform: l,
+    WebkitTransform: l
+  };
+}, U = ({
+  fromIndex: e,
+  targetIndex: t,
+  isTopZone: r
+}) => r ? e < t ? t - 1 : t : e > t ? t + 1 : t, W = (e, t) => {
+  const r = e / t;
+  return r < 0.05 || r > 0.95 ? null : r < 0.5 ? g.TOP : g.BOTTOM;
+}, q = ({
   id: e,
-  index: r,
-  type: s = D,
-  isDisabled: i = !1,
-  onDrop: l,
-  hideDefaultPreview: c = !1
+  index: t,
+  type: r = I,
+  isDisabled: l = !1,
+  isLast: p = !1,
+  onDrop: a,
+  hideDefaultPreview: d = !1,
+  dropDetectionMode: m = E.INDEX_BASED
 }) => {
-  const [{ isDragging: d }, g, a] = S(
+  const i = m === E.HOVER, c = w(null), n = w(null), [u, o] = F(null), [{ isDragging: O }, P, _] = $(
     () => ({
-      type: s,
-      item: { id: e, index: r, type: s },
-      collect: (p) => ({
-        isDragging: p.isDragging()
+      type: r,
+      item: { id: e, index: t, type: r },
+      collect: (s) => ({
+        isDragging: s.isDragging()
       }),
-      canDrag: () => !i
+      canDrag: () => !l
     }),
-    [e, r, s, i]
+    [e, t, r, l]
   );
-  O(() => {
-    c && a(E(), { captureDraggingState: !0 });
-  }, [c, a]);
-  const [{ isOver: o, draggedItemIndex: t }, n] = T(
+  k(() => {
+    d && _(z(), { captureDraggingState: !0 });
+  }, [d, _]);
+  const [{ isOver: b, draggedItemIndex: T }, B] = H(
     () => ({
-      accept: s,
-      collect: (p) => {
-        const m = p.getItem(), b = (m == null ? void 0 : m.id) !== e ? p.isOver() : !1;
+      accept: r,
+      collect: (s) => {
+        const f = s.getItem(), D = (f == null ? void 0 : f.id) !== e ? s.isOver() : !1;
         return {
-          isOver: b,
-          draggedItemIndex: b ? (m == null ? void 0 : m.index) ?? null : null
+          isOver: D,
+          draggedItemIndex: D ? (f == null ? void 0 : f.index) ?? null : null
         };
       },
-      drop: (p) => {
-        p.id !== e && l && l(p.index, r);
+      hover: (s, f) => {
+        if (!i)
+          return;
+        if (s.id === e) {
+          o(null);
+          return;
+        }
+        const v = c.current;
+        if (!v) {
+          o(null);
+          return;
+        }
+        const D = v.getBoundingClientRect(), A = D.bottom - D.top, h = f.getClientOffset();
+        if (!h) {
+          o(null);
+          return;
+        }
+        const Z = h.y - D.top, C = W(Z, A);
+        C === null ? (o(null), n.current = null) : C === g.TOP ? (o(g.TOP), n.current = g.TOP) : (o(g.BOTTOM), n.current = g.BOTTOM);
+      },
+      drop: (s) => {
+        if (!(s.id === e || !a))
+          if (i) {
+            const f = n.current;
+            if (!f)
+              return;
+            const v = f === g.TOP, D = U({
+              fromIndex: s.index,
+              targetIndex: t,
+              isTopZone: v
+            });
+            a(s.index, D);
+          } else
+            a(s.index, t);
       }
     }),
-    [e, r, s, l]
-  ), _ = (() => t === null ? null : t > r ? "top" : "bottom")();
+    [e, t, r, a, p, i]
+  ), S = x(
+    (s) => (c.current = s, B(s)),
+    [B]
+  );
+  k(() => {
+    b || o(null);
+  }, [b]);
+  const L = i ? u : (() => T === null ? null : T > t ? g.TOP : g.BOTTOM)();
   return {
-    isDragging: d,
-    isOver: o,
-    draggedItemIndex: t,
-    dropPosition: _,
-    dragRef: g,
-    dropRef: n,
-    previewRef: a
+    isDragging: O,
+    isOver: b,
+    draggedItemIndex: T,
+    dropPosition: L,
+    dragRef: P,
+    dropRef: S,
+    previewRef: _
   };
-}, 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 = ({
+}, G = {
+  "sortable-item": "_sortable-item_l234k_1",
+  "sortable-item--drop-target-top": "_sortable-item--drop-target-top_l234k_7",
+  "sortable-item--drop-target-bottom": "_sortable-item--drop-target-bottom_l234k_20",
+  "drag-handle": "_drag-handle_l234k_34",
+  "drag-handle--disabled": "_drag-handle--disabled_l234k_41"
+}, J = N.bind(G), K = ({
   id: e,
-  index: r,
-  type: s = D,
-  isDisabled: i = !1,
-  className: l,
-  draggingClassName: c,
+  index: t,
+  type: r = I,
+  isDisabled: l = !1,
+  className: p,
+  draggingClassName: a,
   dropTargetClassName: d,
-  onDrop: g,
-  hideDefaultPreview: a = !1,
-  children: o
+  onDrop: m,
+  hideDefaultPreview: i = !1,
+  dropDetectionMode: c = E.INDEX_BASED,
+  isLast: n = !1,
+  children: u
 }) => {
-  const { isDragging: t, dropPosition: n, dragRef: f, dropRef: _, previewRef: p } = w({
+  const { isDragging: o, dropPosition: O, dragRef: P, dropRef: _, previewRef: b } = q({
     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
+    index: t,
+    type: r,
+    isDisabled: l,
+    onDrop: m,
+    hideDefaultPreview: i,
+    dropDetectionMode: c,
+    isLast: n
+  }), T = typeof u == "function", B = J("sortable-item", p, {
+    "sortable-item--dragging": o,
+    "sortable-item--drop-target-top": O === g.TOP,
+    "sortable-item--drop-target-bottom": O === g.BOTTOM,
+    [a || ""]: o && a,
+    [d || ""]: O && 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 = ({
+  return /* @__PURE__ */ R("div", { ref: (y) => {
+    _(y), i || b(y), T || P(y);
+  }, className: B, children: T ? u({
+    isDragging: o,
+    isOver: O !== null,
+    dragRef: P
+  }) : u });
+}, ie = ({
   items: e,
-  type: r = D,
-  isDisabled: s = !1,
-  className: i,
-  itemClassName: l,
-  onReorder: c,
+  type: t = I,
+  isDisabled: r = !1,
+  className: l,
+  itemClassName: p,
+  onReorder: a,
   renderItem: d,
-  keyExtractor: g = (a) => a.id
+  keyExtractor: m = (i) => i.id
 }) => {
-  const a = x(
-    (o, t) => {
-      const n = [...e], [f] = n.splice(o, 1);
-      n.splice(t, 0, f), c(n);
+  const i = x(
+    (c, n) => {
+      const u = [...e], [o] = u.splice(c, 1);
+      u.splice(n, 0, o), a(u);
     },
-    [e, c]
+    [e, a]
   );
-  return /* @__PURE__ */ u("div", { className: i, children: e.map((o, t) => /* @__PURE__ */ u(
-    N,
+  return /* @__PURE__ */ R("div", { className: l, children: e.map((c, n) => /* @__PURE__ */ R(
+    K,
     {
-      id: g(o),
-      index: t,
-      type: r,
-      isDisabled: s,
-      className: l,
-      onDrop: a,
-      children: ({ dragRef: n, isDragging: f }) => d(o, t, n, f)
+      id: m(c),
+      index: n,
+      type: t,
+      isDisabled: r,
+      className: p,
+      onDrop: i,
+      isLast: n === e.length - 1,
+      children: ({ dragRef: u, isDragging: o }) => d(c, n, u, o)
     },
-    g(o)
+    m(c)
   )) });
-}, $ = (e) => {
-  if (!e)
-    return {
-      display: "none"
-    };
-  const { x: r, y: s } = e, i = `translate(${r}px, ${s}px)`;
-  return {
-    transform: i,
-    WebkitTransform: i
-  };
-}, A = {
+}, Q = {
   "drag-layer": "_drag-layer_1izcx_1",
   "drag-preview": "_drag-preview_1izcx_11"
-}, R = I.bind(A), Y = ({
+}, M = N.bind(Q), le = ({
   type: e,
-  renderPreview: r,
-  className: s,
-  previewClassName: i,
-  portalTarget: l = document.body
+  renderPreview: t,
+  className: r,
+  previewClassName: l,
+  portalTarget: p = 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()
+  const { itemType: a, isDragging: d, item: m, clientOffset: i } = Y(
+    (n) => ({
+      item: n.getItem(),
+      itemType: n.getItemType(),
+      clientOffset: n.getClientOffset(),
+      isDragging: n.isDragging()
     })
   );
-  if (!d || c !== e || !g || !l)
+  if (!d || a !== e || !m || !p)
     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);
+  const c = /* @__PURE__ */ R("div", { className: M("drag-layer", r), children: /* @__PURE__ */ R("div", { className: M("drag-preview", l), style: X(i), children: t(m) }) });
+  return V(c, p);
 };
 export {
-  Y as DragLayer,
-  N as SortableItem,
-  W as SortableList
+  le as DragLayer,
+  K as SortableItem,
+  ie as SortableList
 };