@vidispine/vdt-materialui 23.2.0-pre.2 → 23.2.0

package/dist/es/collection/CollectionTreeList/CollectionTreeList.js

@@ -0,0 +1,145 @@
+import { jsx as g, jsxs as z } from "react/jsx-runtime";
+import { useContext as B, useEffect as F } from "react";
+import G from "clsx";
+import { collection as y } from "@vidispine/vdt-api";
+import { COLLECTION as i, ITEM as L, JOIN_CHARACTER as S } from "../../entity/EntityTreeConsts.js";
+import Q from "../../entity/EntityTreeContext.js";
+import X from "../../item/ItemTreeItem.js";
+import Y from "../../TreeItemDraggable.js";
+import Z from "./components/CollectionLabelDroppable.js";
+const $ = {
+  queryParams: {
+    field: ["content"],
+    content: ["metadata"]
+  }
+}, tt = {
+  queryParams: {
+    field: ["mimeType"],
+    content: ["metadata"]
+  }
+}, et = (l, s) => {
+  const { itemSearchDocument: a = {} } = l, { field: m = [] } = a;
+  return {
+    ...l,
+    itemSearchDocument: {
+      ...a,
+      field: [...m, { name: "__parent_collection", value: [{ value: s }] }]
+    }
+  };
+}, Ct = {
+  root: {}
+};
+function ot({
+  parentCollectionId: l,
+  collection: s = {},
+  nodeId: a = [i, s.id, i, l].join(S),
+  ...m
+}) {
+  const e = s.id, {
+    className: b,
+    classes: E = {},
+    collectionState: T = $,
+    itemState: D = tt,
+    includeItems: O = !0,
+    onDrop: w = () => {
+    },
+    onError: d = () => null,
+    CollectionComponent: j = ot,
+    CollectionLabelComponent: v = Z,
+    ItemComponent: N = X,
+    TreeItemComponent: W = Y,
+    CollectionLabelProps: _ = {},
+    TreeItemProps: A = {},
+    ItemProps: M = {}
+  } = m, {
+    addOrUpdateCollections: q,
+    addOrUpdateItems: R,
+    addAsChildrenToCollection: x,
+    getChildCollections: U,
+    getChildItems: H
+  } = B(Q), C = U(e), f = H(e), J = async () => {
+    try {
+      const { data: t = {} } = await y.getCollectionItem({ ...D, collectionId: e });
+      return t.item || [];
+    } catch (t) {
+      return d({ message: "Could not get items", error: t }), [];
+    }
+  }, K = async () => {
+    try {
+      const t = et(T, e), { data: c = {} } = await y.searchCollection(t);
+      return c.collection || [];
+    } catch (t) {
+      return d({ message: `Could not list collections for ${e}`, error: t }), [];
+    }
+  }, V = async () => {
+    try {
+      const { data: t } = await y.getCollection({ ...T, collectionId: e }), { content: c = [] } = t, p = c.filter((n) => n.type === "collection"), I = c.filter((n) => n.type === "item");
+      if (p.length) {
+        const n = await K();
+        q(e, n);
+        const h = n.map((o) => o.id), u = C.map((o) => o.id), r = h.filter((o) => !u.includes(o));
+        r.length && x(r, i, e);
+      }
+      if (O && I.length) {
+        const n = await J();
+        R(e, n);
+        const h = n.map((o) => o.id), u = f.map((o) => o.id), r = h.filter((o) => !u.includes(o));
+        r.length && x(r, L, e);
+      }
+    } catch (t) {
+      d({ message: `Could not get collection ${e}`, error: t });
+    }
+  };
+  F(() => {
+    V();
+  }, [e]);
+  const k = /* @__PURE__ */ g(
+    v,
+    {
+      collection: s,
+      parentCollectionId: l,
+      nodeId: a,
+      onDrop: w,
+      ..._
+    }
+  ), P = (t, c, p, I) => [t, c, i, p, i, I].join(S);
+  return /* @__PURE__ */ z(
+    W,
+    {
+      className: G(b, E.root, "VdtCollectionTreeList-root"),
+      nodeId: a,
+      dragInfo: {
+        entityType: i,
+        entityId: e,
+        entityParentId: l
+      },
+      label: k,
+      ...A,
+      children: [
+        C.length ? C.map((t) => /* @__PURE__ */ g(
+          j,
+          {
+            parentCollectionId: e,
+            collection: t,
+            ...m
+          },
+          P(i, t.id, e, l)
+        )) : void 0,
+        f.length ? f.map((t) => /* @__PURE__ */ g(
+          N,
+          {
+            item: t,
+            parentCollectionId: e,
+            onDrop: w,
+            ...M
+          },
+          P(L, t.id, e, l)
+        )) : void 0
+      ]
+    }
+  );
+}
+export {
+  ot as default,
+  Ct as styles
+};

package/dist/es/collection/CollectionTreeList/components/CollectionLabelDroppable.js

@@ -0,0 +1,21 @@
+import { withStyles as t } from "@material-ui/core";
+import { compose as r } from "@vidispine/vdt-react";
+import "react/jsx-runtime";
+import "react";
+import "clsx";
+import "react-dnd";
+import "react-dnd-html5-backend";
+import "../../../dnd/contexts/DragAndDropContext.js";
+import p from "../../../dnd/hoc/withDrop.js";
+import i from "../../CollectionLabel.js";
+const m = (o) => ({
+  isOver: {
+    backgroundColor: o.palette.primary.main
+  }
+}), y = r(
+  t(m, { name: "VdtCollectionLabelDroppable" }),
+  p
+)(i);
+export {
+  y as default
+};

package/dist/es/collection/CollectionTreeList/index.js

@@ -0,0 +1,7 @@
+import { withStyles as e } from "@material-ui/core";
+import t, { styles as o } from "./CollectionTreeList.js";
+const i = e(o, { name: "VdtCollectionTreeList" })(t);
+i.displayName = "CollectionTreeList";
+export {
+  i as default
+};

package/dist/es/collection/RemoveFromCollectionDialog/RemoveFromCollectionDialog.js

@@ -0,0 +1,73 @@
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import h from "clsx";
+import o from "prop-types";
+import { DialogTitle as v, DialogContent as y, DialogActions as R, Button as l } from "@material-ui/core";
+import { collection as D } from "@vidispine/vdt-api";
+const q = ({ collectionId: e, entityId: n, entityType: r }) => D.removeCollectionEntity({
+  collectionId: e,
+  entityId: n,
+  queryParams: {
+    type: r
+  }
+}), $ = {
+  root: {}
+};
+function m({
+  className: e,
+  classes: n,
+  entityId: r,
+  entityType: i,
+  collectionId: c,
+  onSuccess: a,
+  onError: f,
+  onClose: d,
+  onConfirm: u,
+  descriptionText: p,
+  titleText: C,
+  cancelText: g,
+  confirmText: x
+}) {
+  const T = () => u({ collectionId: c, entityType: i, entityId: r }).then(a).catch(f);
+  return /* @__PURE__ */ s("div", { className: h(n.root, "VdtRemoveFromCollectionDialog-root", e), children: [
+    /* @__PURE__ */ t(v, { children: C }),
+    /* @__PURE__ */ t(y, { children: p({ collectionId: c, entityType: i, entityId: r }) }),
+    /* @__PURE__ */ s(R, { children: [
+      /* @__PURE__ */ t(l, { onClick: d, color: "primary", children: g }),
+      /* @__PURE__ */ t(l, { variant: "contained", onClick: T, color: "secondary", children: x })
+    ] })
+  ] });
+}
+m.propTypes = {
+  className: o.string,
+  classes: o.objectOf(o.string),
+  entityId: o.string.isRequired,
+  entityType: o.string.isRequired,
+  collectionId: o.string.isRequired,
+  onSuccess: o.func,
+  onError: o.func,
+  onClose: o.func,
+  onConfirm: o.func,
+  descriptionText: o.func,
+  titleText: o.string,
+  cancelText: o.string,
+  confirmText: o.string
+};
+m.defaultProps = {
+  className: void 0,
+  classes: {},
+  onSuccess: () => {
+  },
+  // eslint-disable-next-line no-console
+  onError: (e) => console.error(e),
+  onClose: () => {
+  },
+  onConfirm: q,
+  descriptionText: ({ collectionId: e, entityType: n, entityId: r }) => `Do you want to remove ${n} ${r} from ${e}?`,
+  titleText: "Remove From Collection?",
+  cancelText: "Cancel",
+  confirmText: "Remove"
+};
+export {
+  m as default,
+  $ as styles
+};

package/dist/es/collection/RemoveFromCollectionDialog/index.js

@@ -0,0 +1,9 @@
+import { withStyles as o } from "@material-ui/core";
+import e, { styles as l } from "./RemoveFromCollectionDialog.js";
+const m = o(l, { name: "VdtRemoveFromCollectionDialog" })(
+  e
+);
+m.displayName = "RemoveFromCollectionDialog";
+export {
+  m as default
+};

package/dist/es/contexts/MediaCardContext.js

@@ -0,0 +1,16 @@
+import { jsx as o } from "react/jsx-runtime";
+import { createContext as d, useContext as i } from "react";
+const r = d();
+function C({ children: e, ...t }) {
+  return /* @__PURE__ */ o(r.Provider, { value: t, children: e });
+}
+const s = () => {
+  const e = i(r);
+  if (e === void 0)
+    throw new Error("useMediaCardContext must be used within a MediaCardProvider");
+  return e;
+};
+export {
+  C as MediaCardProvider,
+  s as useMediaCardContext
+};

package/dist/es/dnd/components/DragLayer.js

@@ -0,0 +1,49 @@
+import { jsx as l } from "react/jsx-runtime";
+import { useRef as m } from "react";
+import { useDragLayer as y } from "react-dnd";
+import { useMouseDownPosition as u } from "@vidispine/vdt-react";
+import { useDragOffsetDiff as h } from "../hooks/useDragOffsetDiff.js";
+const x = {
+  position: "fixed",
+  pointerEvents: "none",
+  zIndex: 100,
+  left: 0,
+  top: 0,
+  width: "100%",
+  height: "100%"
+}, p = (e, n = { x: 0, y: 0 }, i = { width: 0, height: 0 }) => {
+  const { x: t = 0, y: s = 0 } = e || {}, { x: o, y: f } = n, { width: r, height: c } = i, g = o - t - r / 2, d = f - s - c / 2;
+  return { x: g, y: d };
+}, D = (e, n, i) => {
+  const { x: t, y: s } = n || {}, { x: o, y: f } = e || {}, { x: r, y: c } = i || {};
+  return { transform: `translate(${t + o + r}px, ${s + f + c}px)` };
+}, I = (e) => {
+  const i = (e.current || {}).firstChild || {}, { clientHeight: t = 0, clientWidth: s = 0 } = i;
+  return { width: s, height: t };
+};
+function L({ allowedTypes: e = ["ITEM", "COLLECTION"], Component: n, componentSize: i }) {
+  const t = m(), { item: s, isDragging: o, itemType: f, initialOffset: r } = y((a) => ({
+    item: a.getItem(),
+    itemType: a.getItemType(),
+    initialOffset: a.getInitialSourceClientOffset(),
+    isDragging: a.isDragging()
+  })), { dragInfo: c } = s || {}, g = u(), d = h(o);
+  return o && e.includes(f) ? /* @__PURE__ */ l("div", { style: x, children: /* @__PURE__ */ l(
+    "div",
+    {
+      style: D(
+        d,
+        r,
+        p(
+          r,
+          g,
+          i || I(t)
+        )
+      ),
+      children: n && c ? /* @__PURE__ */ l("div", { ref: t, children: /* @__PURE__ */ l(n, { ...c }) }) : null
+    }
+  ) }) : null;
+}
+export {
+  L as default
+};

package/dist/es/dnd/contexts/DragAndDropContext.js

@@ -0,0 +1,42 @@
+import { jsx as a, jsxs as s } from "react/jsx-runtime";
+import { createContext as p, useState as D, useMemo as c, useContext as g, useEffect as u } from "react";
+import { DndProvider as i } from "react-dnd";
+import { HTML5Backend as C } from "react-dnd-html5-backend";
+import f from "../components/DragLayer.js";
+const r = p({
+  DraggedComponent: null,
+  setDraggedComponent: () => {
+  }
+});
+function j({
+  children: e,
+  DraggedComponent: o,
+  componentSize: n
+}) {
+  const [t, d] = D(() => o), m = c(
+    () => ({
+      DraggedComponent: t,
+      setDraggedComponent: d
+    }),
+    [t]
+  );
+  return /* @__PURE__ */ a(r.Provider, { value: m, children: /* @__PURE__ */ s(i, { backend: C, children: [
+    t && /* @__PURE__ */ a(f, { Component: t, componentSize: n }),
+    e
+  ] }) });
+}
+const k = () => {
+  const { DraggedComponent: e } = g(r);
+  return !!e;
+}, A = (e) => {
+  const { DraggedComponent: o, setDraggedComponent: n } = g(r);
+  u(() => (o || n(() => e), () => {
+    o && n(() => null);
+  }), [e, o, n]);
+};
+export {
+  j as DragAndDropProvider,
+  r as default,
+  A as useDraggedComponent,
+  k as useHasDraggedComponent
+};

package/dist/es/dnd/hoc/withDrag.js

@@ -0,0 +1,90 @@
+import { jsx as g } from "react/jsx-runtime";
+import { useMemo as _, useRef as w, useEffect as H, useCallback as L } from "react";
+import M from "clsx";
+import { useDrag as P, useDrop as Y } from "react-dnd";
+import { getEmptyImage as j } from "react-dnd-html5-backend";
+import { RootRef as A } from "@material-ui/core";
+import { useHasDraggedComponent as J } from "../contexts/DragAndDropContext.js";
+import S from "../utils/extractEntityInfo.js";
+const $ = ["COLLECTION", "ITEM"], k = (e, s) => {
+  e.dataTransfer.setData("text/plain", JSON.stringify(s));
+}, W = (e) => ({
+  className: s,
+  classes: c = {},
+  onSort: i,
+  onDragStart: d = k,
+  dragInfo: E,
+  wrapDragInDiv: O = !0,
+  acceptedEntityTypes: h = $,
+  callbackOnDrop: f,
+  ...n
+}) => {
+  try {
+    const D = _(() => S(n), []), a = E || D, { entityType: T } = a, o = w(null), { id: m, index: y } = n, [{ isDragging: l }, C, u] = P({
+      item: {
+        type: `${T}`,
+        dragInfo: a,
+        id: m,
+        index: y
+      },
+      collect: (t) => ({
+        isDragging: !!t.isDragging()
+      }),
+      end: (t, r) => {
+        if (!i)
+          return;
+        const { id: R, index: V } = r.getItem(), x = r.didDrop();
+        x || i({ dragId: R, originalDragIndex: V }), x && f && f();
+      }
+    }), [{ isOver: v }, b] = Y({
+      accept: h,
+      canDrop: !1,
+      hover({ id: t }) {
+        if (!i)
+          return;
+        const r = m;
+        t === void 0 || t === r || i({ dragId: t, hoverId: r });
+      },
+      collect: (t) => ({
+        isOver: !!t.isOver()
+      })
+    });
+    C(o), b(o);
+    const p = J();
+    H(() => {
+      p && u(j());
+    }, [p, u]);
+    const I = /* @__PURE__ */ g(
+      e,
+      {
+        className: M(
+          s,
+          l && c.isDragging,
+          l && "VdtDraggable-isDragging",
+          v && c.isOver,
+          v && "VdtDraggable-isOver"
+        ),
+        classes: {
+          ...c,
+          isDragging: void 0,
+          "VdtDraggable-isDragging": void 0,
+          isOver: void 0,
+          "VdtDraggable-isOver": void 0
+        },
+        ...n
+      }
+    ), N = L(
+      (t) => {
+        d && d(t, a);
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [a]
+    );
+    return O ? /* @__PURE__ */ g("div", { ref: o, onDragStart: N, children: I }) : /* @__PURE__ */ g(A, { rootRef: o, children: I });
+  } catch {
+    return /* @__PURE__ */ g(e, { ...n });
+  }
+};
+export {
+  W as default
+};

package/dist/es/dnd/hoc/withDrop.js

@@ -0,0 +1,100 @@
+import { jsx as c } from "react/jsx-runtime";
+import { useMemo as a, useCallback as x } from "react";
+import C from "clsx";
+import r from "prop-types";
+import { useDrop as V } from "react-dnd";
+import P from "../utils/extractEntityInfo.js";
+const I = ["COLLECTION", "ITEM"];
+function v(s) {
+  return ({
+    className: d,
+    classes: o = {},
+    onDrop: f,
+    dropInfo: O,
+    ignoreDropOnExitingIds: D = !1,
+    ignoreDropOnSameEntity: l = !0,
+    acceptedEntityTypes: m = I,
+    ...n
+  }) => {
+    try {
+      const y = a(() => P(n), []), t = O || y;
+      if (!t)
+        throw new Error("Did not retrieve any dropInfo to withDrop");
+      const E = x(
+        ({ id: e, dragInfo: h }) => {
+          const { entityId: g, entityType: w } = h;
+          return !(D && e !== void 0 || l && g === t.entityId && w === t.entityType);
+        },
+        [t.entityId, t.entityType, D, l]
+      ), [{ isOver: i, canDrop: p }, T] = V({
+        accept: m,
+        canDrop: E,
+        drop: ({ dragInfo: e }) => {
+          if (!f)
+            throw Error("onDrop inside withDrop cannot be undefined");
+          return f({ dragInfo: e, dropInfo: t });
+        },
+        collect: (e) => ({
+          isOver: !!e.isOver(),
+          canDrop: !!e.canDrop()
+        })
+      }), u = a(
+        () => ({
+          ...o,
+          isOver: void 0,
+          canDrop: void 0,
+          "VdtDroppable-isOver": void 0,
+          "VdtDroppable-canDrop": void 0
+        }),
+        [o]
+      ), b = a(
+        () => /* @__PURE__ */ c(
+          s,
+          {
+            className: C(
+              d,
+              i && o.isOver,
+              p && o.canDrop,
+              i && "VdtDroppable-isOver",
+              p && "VdtDroppable-canDrop"
+            ),
+            classes: u,
+            ...n
+          }
+        ),
+        [
+          p,
+          d,
+          o.canDrop,
+          o.isOver,
+          u,
+          i,
+          n
+        ]
+      );
+      return /* @__PURE__ */ c("div", { ref: T, children: b });
+    } catch {
+      return /* @__PURE__ */ c(s, { ...n });
+    }
+  };
+}
+v.propTypes = {
+  className: r.string,
+  classes: r.objectOf(r.string),
+  onDrop: r.func,
+  dropInfo: r.objectOf(r.any),
+  ignoreDropOnExitingIds: r.bool,
+  ignoreDropOnSameEntity: r.bool,
+  acceptedEntityTypes: r.arrayOf(r.string)
+};
+v.defaultProps = {
+  classes: {},
+  onDrop: () => null,
+  dropInfo: {},
+  ignoreDropOnExitingIds: !1,
+  ignoreDropOnSameEntity: !0,
+  acceptedEntityTypes: I
+};
+export {
+  v as default
+};

package/dist/es/dnd/hooks/useDragOffsetDiff.js

@@ -0,0 +1,16 @@
+import { useContext as l, useState as s, useEffect as D } from "react";
+import { DndContext as u } from "react-dnd";
+const d = (e, o = 60) => {
+  const { dragDropManager: a } = l(u), t = a.getMonitor(), [i, f] = s(t.getDifferenceFromInitialOffset()), c = () => f(t.getDifferenceFromInitialOffset()), [r, g] = s(), n = () => {
+    r && (clearInterval(r), f({ x: 0, y: 0 }));
+  };
+  return D(() => (e ? g(
+    setInterval(() => {
+      c();
+    }, 1e3 / o)
+  ) : n(), n), [e]), i;
+};
+export {
+  d as default,
+  d as useDragOffsetDiff
+};

package/dist/es/dnd/utils/extractEntityInfo.js

@@ -0,0 +1,78 @@
+const a = ({
+  entityId: r,
+  itemId: n,
+  collectionId: t,
+  entity: f = {},
+  item: i = {},
+  collection: u = {},
+  entityType: e = {},
+  itemType: d = {},
+  collectionType: E = {}
+}) => {
+  if (r)
+    return r;
+  if (n)
+    return n;
+  if (t)
+    return t;
+  if (f && f.id)
+    return f.id;
+  if (i && i.id)
+    return i.id;
+  if (u && u.id)
+    return u.id;
+  if (d && d.id)
+    return d.id;
+  if (e && e.id)
+    return e.id;
+  if (E && E.id)
+    return E.id;
+}, g = ({
+  itemId: r,
+  collectionId: n,
+  entity: t = {},
+  item: f,
+  collection: i,
+  entityType: u,
+  itemType: e,
+  collectionType: d
+}) => {
+  if (t && t.type)
+    return t.type.toUpperCase();
+  if (u && typeof u == "string")
+    return u.toUpperCase();
+  if (r || f || e)
+    return "ITEM";
+  if (n || i || d)
+    return "COLLECTION";
+}, C = ({ entity: r, entityType: n, item: t, itemType: f, collection: i, collectionType: u }) => {
+  if (r)
+    return r;
+  if (n && typeof n != "string")
+    return n;
+  if (t)
+    return t;
+  if (f)
+    return f;
+  if (i)
+    return i;
+  if (u)
+    return u;
+}, s = ({ parentCollectionId: r, entityParentId: n, parentId: t }) => {
+  if (r)
+    return r;
+  if (n)
+    return n;
+  if (t)
+    return t;
+}, L = (r) => s(r) ? "COLLECTION" : void 0, O = ({ timespan: r, entityTimespan: n }) => r || n, P = (r) => ({
+  entityId: a(r),
+  entityType: g(r),
+  entity: C(r),
+  entityParentId: s(r),
+  entityParentType: L(r),
+  entityTimespan: O(r)
+});
+export {
+  P as default
+};