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

package/dist/es/entity/EntityTable.js

@@ -0,0 +1,51 @@
+import { jsxs as a, jsx as l } from "react/jsx-runtime";
+import { useMemo as h } from "react";
+import { Table as C, TableHead as E, TableRow as I, TableCell as d, Hidden as y, TableBody as g } from "@material-ui/core";
+import x from "./EntityTableRowDraggable.js";
+const L = "COLLECTION", O = "ITEM";
+function k({
+  entries: o = [],
+  EntityTableRowComponent: t = x,
+  optionLabels: p = [],
+  collectionOptions: m = [],
+  itemOptions: c = [],
+  onCheck: i,
+  onCollectionClick: T = () => null,
+  onItemClick: s = () => null,
+  TableRowProps: u = {}
+}) {
+  const n = h(
+    () => o.map(({ collection: e, item: r } = {}) => {
+      if (e)
+        return { ...e, type: L };
+      if (r)
+        return { ...r, type: O };
+    }),
+    [o]
+  );
+  return /* @__PURE__ */ a(C, { size: "small", children: [
+    /* @__PURE__ */ l(E, { children: /* @__PURE__ */ a(I, { children: [
+      i && /* @__PURE__ */ l(d, { padding: "checkbox" }),
+      p.map(({ label: e, key: r, hide: f }, b) => /* @__PURE__ */ l(y, { only: f, children: /* @__PURE__ */ l(d, { children: e }) }, r || e || b))
+    ] }) }),
+    /* @__PURE__ */ l(g, { children: n && n.length ? n.map((e) => /* @__PURE__ */ l(
+      t,
+      {
+        entity: e,
+        entityType: e.type,
+        entityId: e.id,
+        wrapDragInDiv: !1,
+        collectionOptions: m,
+        itemOptions: c,
+        onCheck: i,
+        onCollectionClick: () => T(e),
+        onItemClick: () => s(e),
+        ...u
+      },
+      `${e.type}_${e.id}`
+    )) : null })
+  ] });
+}
+export {
+  k as default
+};

package/dist/es/entity/EntityTableRow.js

@@ -0,0 +1,93 @@
+import { jsxs as C, Fragment as f, jsx as r } from "react/jsx-runtime";
+import "../collection/CollectionCard/index.js";
+import "../collection/CollectionCardThumbnail/index.js";
+import "../collection/CollectionGrid/index.js";
+import I from "../collection/CollectionRow/index.js";
+import "../collection/CollectionTable/index.js";
+import "../collection/CollectionTreeList/index.js";
+import "../collection/CollectionList/index.js";
+import "../collection/CollectionListItem/index.js";
+import "../collection/CollectionMetadataTab.js";
+import "react";
+import "react-final-form";
+import "@vidispine/vdt-api";
+import "@vidispine/vdt-js";
+import "../item/ItemMetadataForm.js";
+import "../collection/CollectionAccessTab.js";
+import "../collection/CollectionCreateDialog/index.js";
+import "../collection/AddToCollectionDialog/index.js";
+import "../collection/RemoveFromCollectionDialog/index.js";
+import "../collection/CollectionSearchPicker/index.js";
+import "../collection/CollectionContent/index.js";
+import "../item/ItemTimespan/index.js";
+import "../item/ItemAccessTab.js";
+import "../item/ItemMetadataTab.js";
+import "../item/ItemFieldGroupTab.js";
+import "@vidispine/vdt-react";
+import "../item/ItemShapeTable/index.js";
+import "../item/ItemSourceTable/index.js";
+import "@material-ui/core";
+import "@material-ui/icons";
+import "../item/ItemPosterList.js";
+import "../item/ItemParentsTab.js";
+import "../item/ItemRelationsTab.js";
+import "../item/ItemTabs/index.js";
+import "../item/ItemMetadataFieldRow.js";
+import "../item/ItemMetadataFormTable.js";
+import "../item/ItemCard.js";
+import "../item/ItemGrid.js";
+import a from "../item/ItemRow.js";
+import "react-beautiful-dnd";
+import "../media/MediaCard/index.js";
+import "../item/ItemTreeItem.js";
+import "../item/ItemSidecarDialog/index.js";
+import "../item/ItemSidecarUpload/index.js";
+import "../item/ItemSidecarDownload/index.js";
+import "../item/AddRelationDialog.js";
+import "../item/ItemSearchPicker.js";
+import "../item/ItemList/index.js";
+import "../item/ItemListItem/index.js";
+import "../item/ItemRelationRemoveDialog.js";
+import "../item/ItemFileShareDialog.js";
+import "../item/ItemCompoundMetadataTab.js";
+import "../item/ItemCompoundMetadataTable.js";
+import "../item/player/ItemPlayer/index.js";
+import "../item/player/ItemVideoPlayer.js";
+import "../item/player/ItemImagePlayer.js";
+function xo({
+  entityType: o,
+  entityId: t,
+  entity: i,
+  collectionOptions: p = [],
+  itemOptions: n = [],
+  onCollectionClick: e,
+  onItemClick: c,
+  ...m
+}) {
+  const l = o === "COLLECTION", s = o === "ITEM";
+  return /* @__PURE__ */ C(f, { children: [
+    l && /* @__PURE__ */ r(
+      I,
+      {
+        collectionId: t,
+        collectionType: i,
+        options: p,
+        onClick: e,
+        ...m
+      }
+    ),
+    s && /* @__PURE__ */ r(
+      a,
+      {
+        itemId: t,
+        itemType: i,
+        options: n,
+        onClick: c,
+        ...m
+      }
+    )
+  ] });
+}
+export {
+  xo as default
+};

package/dist/es/entity/EntityTableRowDraggable.js

@@ -0,0 +1,37 @@
+import { jsx as e } from "react/jsx-runtime";
+import i from "clsx";
+import { withStyles as m } from "@material-ui/core";
+import { compose as g } from "@vidispine/vdt-react";
+import l from "../dnd/hoc/withDrag.js";
+import "../dnd/hoc/withDrop.js";
+import "../dnd/contexts/DragAndDropContext.js";
+import n from "./EntityTableRow.js";
+const b = {
+  root: {},
+  rootIsDragging: {
+    opacity: 0.5,
+    cursor: "move"
+  }
+};
+function p({ className: r, classes: o, isDragging: t, ...a }) {
+  return /* @__PURE__ */ e(
+    n,
+    {
+      className: i(
+        o.root,
+        "VdtEntityTableRowDraggable-root",
+        t && o.rootIsDragging,
+        t && "VdtEntityTableRowDraggable-rootIsDragging",
+        r
+      ),
+      ...a
+    }
+  );
+}
+const T = g(
+  l,
+  m(b, { name: "VdtEntityTableRowDraggable" })
+)(p);
+export {
+  T as default
+};

package/dist/es/entity/EntityTree.js

@@ -0,0 +1,119 @@
+import { jsx as n } from "react/jsx-runtime";
+import { useState as f, useCallback as V, useEffect as $ } from "react";
+import j from "clsx";
+import { withStyles as A } from "@material-ui/core";
+import { ExpandMore as H, ChevronRight as W } from "@material-ui/icons";
+import { TreeView as k } from "@material-ui/lab";
+import { search as h } from "@vidispine/vdt-api";
+import { ROOT as q, LOAD_MORE as F, DROP_ZONE_ROOT as Z } from "./EntityTreeConsts.js";
+import { EntityTreeProvider as b } from "./EntityTreeContext.js";
+import z from "./EntityTreeList.js";
+const B = {
+  interval: "generic",
+  queryParams: { field: ["mimeType"], content: ["metadata"] },
+  itemSearchDocument: {
+    operator: {
+      field: [
+        { name: "__parent_collection", value: [{ value: "" }] },
+        { name: "__collection", value: [{ value: "" }] }
+      ],
+      operation: "OR"
+    },
+    sort: [
+      { field: "_type", order: "ascending" },
+      { field: "title", order: "descending" }
+    ]
+  }
+}, G = {
+  root: {}
+};
+function J({
+  className: p,
+  classes: d,
+  searchState: c = B,
+  rootCollectionId: l = q,
+  first: y = 1,
+  number: m = 5,
+  selected: T,
+  expanded: g,
+  selectOnToggle: E = !0,
+  onChange: C = () => null,
+  onExpanded: R = () => null,
+  // eslint-disable-next-line no-console
+  onError: o = ({ message: s, error: a }) => console.error(`${s}
+${a}`),
+  EntityTreeListComponent: _ = z,
+  EntityTreeListProps: O = {},
+  TreeViewProps: x = {}
+}) {
+  const [s, a] = f([]), [u, i] = f(), { entry: S = [] } = s, v = () => {
+    try {
+      h.searchItemCollection({ ...c, matrixParams: { first: y, number: m } }).then(({ data: e }) => {
+        a(e), i(e.hits);
+      }).catch((e) => {
+        o({ message: "Could not search", error: e });
+      });
+    } catch (e) {
+      o({ message: "Could not search", error: e });
+    }
+  }, P = V(
+    (e) => {
+      const t = e + 1;
+      if (!(t > u))
+        try {
+          h.searchItemCollection({
+            ...c,
+            matrixParams: { first: t, number: m }
+          }).then(({ data: r }) => {
+            const { entry: D = [], ...I } = r;
+            a((L) => ({
+              ...I,
+              entry: [...D, ...L.entry]
+            })), i(r.hits);
+          }).catch((r) => {
+            o({ message: "Could not search for more", error: r });
+          });
+        } catch (r) {
+          o({ message: "Could not search for more", error: r });
+        }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [s]
+  ), M = (e) => {
+    const { target: { parentElement: t = {} } = {} } = e, r = t.parentElement || {};
+    return t.className === "MuiTreeItem-iconContainer" || r.className === "MuiTreeItem-iconContainer";
+  }, N = (e, t) => {
+    !E && M(e) || typeof t == "string" && (t.startsWith(F) || t.startsWith(Z)) || C(t);
+  }, w = (e, t) => {
+    R(t);
+  };
+  return $(v, [l]), /* @__PURE__ */ n(
+    k,
+    {
+      className: j(d.root, "VdtEntityTree-root", p),
+      defaultCollapseIcon: /* @__PURE__ */ n(H, {}),
+      defaultExpandIcon: /* @__PURE__ */ n(W, {}),
+      onNodeSelect: N,
+      onNodeToggle: w,
+      selected: T,
+      expanded: g,
+      ...x,
+      children: /* @__PURE__ */ n(b, { children: /* @__PURE__ */ n(
+        _,
+        {
+          hits: u,
+          entries: S,
+          collectionId: l,
+          onLoadMore: P,
+          onAdjustHits: (e) => i((t) => t + e),
+          onError: o,
+          ...O
+        }
+      ) })
+    }
+  );
+}
+const se = A(G, { name: "VdtEntityTree" })(J);
+export {
+  se as default
+};

package/dist/es/entity/EntityTreeConsts.js

@@ -0,0 +1,9 @@
+const O = "LOAD_MORE", R = "ITEM", E = "COLLECTION", T = "_", _ = "ROOT", o = "DROP_ZONE_ROOT";
+export {
+  E as COLLECTION,
+  o as DROP_ZONE_ROOT,
+  R as ITEM,
+  T as JOIN_CHARACTER,
+  O as LOAD_MORE,
+  _ as ROOT
+};

package/dist/es/entity/EntityTreeContext.js

@@ -0,0 +1,131 @@
+import { jsx as M } from "react/jsx-runtime";
+import { createContext as P, useState as C, useCallback as c, useMemo as b } from "react";
+import { COLLECTION as E, ITEM as p } from "./EntityTreeConsts.js";
+const j = P({
+  childIds: {},
+  addAsChildrenToCollection: () => null,
+  removeAsChildrenToCollection: () => null,
+  addOrUpdateCollections: () => null,
+  addOrUpdateItems: () => null,
+  getChildCollections: () => [],
+  getChildItems: () => []
+});
+function q({
+  initialChildIds: x = {},
+  initialCollections: w = [],
+  initialItems: O = [],
+  children: T
+}) {
+  const [l, a] = C(x), [m, v] = C(w), [I, U] = C(O), y = (s, e, t) => {
+    if (e === E) {
+      const n = Array.isArray(s) ? s : [s];
+      a((i) => {
+        const { [t]: r = {} } = i, { collectionIds: d = [] } = r;
+        return {
+          ...i,
+          [t]: {
+            ...r,
+            collectionIds: [...Array.from(/* @__PURE__ */ new Set([...d, ...n]))]
+          }
+        };
+      });
+    } else if (e === p) {
+      const n = Array.isArray(s) ? s : [s];
+      a((i) => {
+        const { [t]: r = {} } = i, { itemIds: d = [] } = r;
+        return {
+          ...i,
+          [t]: {
+            ...r || {},
+            itemIds: [...Array.from(/* @__PURE__ */ new Set([...d, ...n]))]
+          }
+        };
+      });
+    }
+  }, S = (s, e, t) => {
+    if (e === E) {
+      const n = Array.isArray(s) ? s : [s];
+      a((i) => {
+        const { [t]: r = {} } = i, { collectionIds: d = [] } = r;
+        return {
+          ...i,
+          [t]: {
+            ...r,
+            collectionIds: [...d.filter((o) => !n.includes(o))]
+          }
+        };
+      });
+    } else if (e === p) {
+      const n = Array.isArray(s) ? s : [s];
+      a((i) => {
+        const { [t]: r = {} } = i, { itemIds: d = [] } = r;
+        return {
+          ...i,
+          [t]: {
+            ...r,
+            itemIds: [...d.filter((o) => !n.includes(o))]
+          }
+        };
+      });
+    }
+  }, u = c((s, e) => {
+    const t = s.map((o) => o.id), n = e.filter((o) => !t.includes(o.id)), i = e.filter((o) => t.includes(o.id)), r = [...i, ...n].map((o) => o.id);
+    return { unchangedEntites: s.filter((o) => !r.includes(o.id)), updatedEntities: i, newEntities: n };
+  }, []), f = c(
+    (s, e) => {
+      if (!e)
+        return;
+      const t = Array.isArray(e) ? e : [e];
+      v((n) => {
+        const { unchangedEntites: i, updatedEntities: r, newEntities: d } = u(
+          n,
+          t
+        );
+        return [...i, ...r, ...d];
+      });
+    },
+    [u]
+  ), h = c(
+    (s, e) => {
+      if (!e)
+        return;
+      const t = Array.isArray(e) ? e : [e];
+      U((n) => {
+        const { unchangedEntites: i, updatedEntities: r, newEntities: d } = u(
+          n,
+          t
+        );
+        return [...i, ...r, ...d];
+      });
+    },
+    [u]
+  ), A = c(
+    (s) => {
+      const { collectionIds: e = [] } = l[s] || {};
+      return e.map((t) => m.find((n) => n.id === t)).filter((t) => t);
+    },
+    [l, m]
+  ), g = c(
+    (s) => {
+      const { itemIds: e = [] } = l[s] || {};
+      return e.map((t) => I.find((n) => n.id === t)).filter((t) => t);
+    },
+    [l, I]
+  ), L = b(
+    () => ({
+      childIds: l,
+      addAsChildrenToCollection: y,
+      removeAsChildrenToCollection: S,
+      addOrUpdateCollections: f,
+      addOrUpdateItems: h,
+      getChildCollections: A,
+      getChildItems: g
+    }),
+    [f, h, l, A, g]
+  );
+  return /* @__PURE__ */ M(j.Provider, { value: L, children: T });
+}
+export {
+  q as EntityTreeProvider,
+  j as default
+};

package/dist/es/entity/EntityTreeList.js

@@ -0,0 +1,173 @@
+import { jsx as a, jsxs as K, Fragment as Q } from "react/jsx-runtime";
+import { useContext as W, useEffect as X } from "react";
+import C from "clsx";
+import { withStyles as T, Box as L, Typography as Y } from "@material-ui/core";
+import { TreeItem as v } from "@material-ui/lab";
+import { compose as E, handleMoveEntity as $ } from "@vidispine/vdt-react";
+import ee from "../collection/CollectionTreeList/index.js";
+import "react-dnd";
+import "react-dnd-html5-backend";
+import "../dnd/contexts/DragAndDropContext.js";
+import x from "../dnd/hoc/withDrop.js";
+import te from "../item/ItemTreeItem.js";
+import { LOAD_MORE as oe, DROP_ZONE_ROOT as re, COLLECTION as m, ITEM as M, JOIN_CHARACTER as b, ROOT as ne } from "./EntityTreeConsts.js";
+import ie from "./EntityTreeContext.js";
+const ae = T(
+  {},
+  { name: "VdtLoadMoreTreeItem" }
+)(({ className: r, classes: d, onClick: e = () => null, text: l = "Load more", LoadMoreProps: I = {} }) => {
+  const y = /* @__PURE__ */ a(L, { className: C(d.label, "VdtLoadMoreTreeItem-label"), children: /* @__PURE__ */ a(Y, { variant: "body1", children: l }) });
+  return /* @__PURE__ */ a(
+    v,
+    {
+      className: C(r, d.root, "VdtLoadMoreTreeItem-root"),
+      nodeId: oe,
+      label: y,
+      onClick: e,
+      ...I
+    }
+  );
+}), de = (r) => ({
+  isOver: {
+    "& .VdtLoadMoreTreeItem-label": {
+      backgroundColor: r.palette.primary.main
+    }
+  }
+}), me = E(
+  T(de, { name: "VdtLoadMoreDroppable" }),
+  x
+)(ae), le = {
+  root: {},
+  label: {
+    minHeight: "24px"
+  }
+}, pe = T(le, { name: "VdtDropZoneTreeItem" })(
+  ({ className: r, classes: d, DropZoneProps: e = {} }) => {
+    const l = /* @__PURE__ */ a(L, { className: C(d.label, "VdtDropZoneTreeItem-label") });
+    return /* @__PURE__ */ a(
+      v,
+      {
+        className: C(r, d.root, "VdtDropZoneTreeItem-root"),
+        nodeId: re,
+        label: l,
+        disabled: !0,
+        ...e
+      }
+    );
+  }
+), se = (r) => ({
+  isOver: {
+    backgroundColor: r.palette.primary.main
+  }
+}), he = E(
+  T(se, { name: "VdtDropZoneDroppable" }),
+  x
+)(pe);
+function xe({
+  entries: r = [],
+  hits: d,
+  collectionId: e,
+  nodeId: l = [m, e].join(b),
+  onLoadMore: I,
+  onError: y,
+  onMoveEntity: V = $,
+  onMoved: Z = () => null,
+  onAdjustHits: D = () => null,
+  CollectionListComponent: N = ee,
+  ItemComponent: P = te,
+  LoadMoreComponent: R = me,
+  DropZoneComponent: j = he,
+  CollectionListProps: w = {},
+  ItemProps: g = {},
+  LoadMoreProps: A = {},
+  DropZoneProps: S = {}
+}) {
+  const {
+    addOrUpdateCollections: _,
+    addOrUpdateItems: k,
+    addAsChildrenToCollection: u,
+    removeAsChildrenToCollection: F,
+    getChildCollections: U,
+    getChildItems: B
+  } = W(ie), c = U(e), h = B(e);
+  X(() => {
+    const n = r.filter((t) => t.collection).map((t) => t.collection), p = r.filter((t) => t.item).map((t) => t.item);
+    if (n.length) {
+      _(e, n);
+      const t = c.map((o) => o.id), i = n.map((o) => o.id).filter((o) => !t.includes(o));
+      i.length && u(i, m, e);
+    }
+    if (p.length) {
+      k(e, p);
+      const t = h.map((o) => o.id), i = p.map((o) => o.id).filter((o) => !t.includes(o));
+      i.length && u(i, M, e);
+    }
+  }, [r]);
+  const H = c.length + h.length, J = r.length, O = Math.min(H, J), f = ({ dragInfo: n, dropInfo: p }) => {
+    if (!n || !p)
+      return;
+    const { entityId: t, entityType: i, entityParentId: o } = n, { entityId: q, entityType: z, entityParentId: G } = p, s = z === m ? q : G;
+    if (s && s === o || i === m && t === s)
+      return;
+    V({
+      entityId: t,
+      entityType: i,
+      addToCollectionId: s,
+      removeFromCollectionId: o,
+      rootParentId: ne,
+      onMoved: () => {
+        u(t, i, s), s === e && D(1), F(t, i, o), o === e && D(-1), Z();
+      },
+      onError: y
+    });
+  };
+  return /* @__PURE__ */ K(Q, { children: [
+    c.length ? c.map((n) => /* @__PURE__ */ a(
+      N,
+      {
+        parentCollectionId: e,
+        collection: n,
+        onDrop: f,
+        ItemProps: g,
+        ...w
+      },
+      [m, n.id, m, e].join(b)
+    )) : void 0,
+    h.length ? h.map((n) => /* @__PURE__ */ a(
+      P,
+      {
+        item: n,
+        parentCollectionId: e,
+        onDrop: f,
+        ...g
+      },
+      [M, n.id, m, e].join(b)
+    )) : void 0,
+    d !== void 0 && d > O ? /* @__PURE__ */ a(
+      R,
+      {
+        nodeId: l,
+        onClick: () => I(O),
+        onDrop: f,
+        dropInfo: {
+          entityParentId: e
+        },
+        ...A
+      }
+    ) : !h.length && /* @__PURE__ */ a(
+      j,
+      {
+        nodeId: l,
+        onDrop: f,
+        dropInfo: {
+          entityParentId: e
+        },
+        disabled: !0,
+        ...S
+      }
+    )
+  ] });
+}
+export {
+  xe as default
+};

package/dist/es/events/Event/Event.js

@@ -0,0 +1,81 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useRef as f, useEffect as v } from "react";
+import b from "clsx";
+import e from "prop-types";
+import { alpha as i } from "@material-ui/core/styles";
+const h = (t) => ({
+  root: {
+    border: "2px solid transparent"
+  },
+  thumbnail: {
+    pointerEvents: "none"
+  },
+  active: {
+    animation: "$active 5s"
+  },
+  "@keyframes active": {
+    "0%": { borderColor: i(t.palette.primary.main, 1) },
+    "100%": { borderColor: i(t.palette.primary.main, 0) }
+  }
+});
+function l({
+  classes: t,
+  className: p,
+  isActive: r,
+  EventContentComponent: n,
+  EventContentProps: c,
+  scrollIntoViewOpts: s,
+  ...m
+}) {
+  const o = f();
+  return v(() => {
+    r && o && o.current && o.current.scrollIntoView(s);
+  }, [r, s]), /* @__PURE__ */ a(
+    "div",
+    {
+      ref: o,
+      className: b(t.root, p, {
+        [t.active]: r
+      }),
+      children: n && /* @__PURE__ */ a(n, { ...m, ...c })
+    }
+  );
+}
+l.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.objectOf(e.string),
+  /**
+   * Override styles with className
+   */
+  className: e.string,
+  /**
+   * See [`scrollIntoView`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView).
+   */
+  scrollIntoViewOpts: e.objectOf(e.any),
+  /**
+   * Highlight and scroll to event.
+   */
+  isActive: e.bool,
+  /**
+   * The component containing the event.
+   */
+  EventContentComponent: e.elementType,
+  /**
+   * Props for the EventContentComponent.
+   */
+  EventContentProps: e.objectOf(e.any)
+};
+l.defaultProps = {
+  className: void 0,
+  classes: {},
+  scrollIntoViewOpts: { behavior: "smooth", inline: "center", block: "nearest" },
+  isActive: void 0,
+  EventContentComponent: null,
+  EventContentProps: {}
+};
+export {
+  l as default,
+  h as styles
+};

package/dist/es/events/Event/index.js

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