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

package/dist/es/collection/CollectionListItem/CollectionListItem.js

@@ -0,0 +1,163 @@
+import { jsxs as T, jsx as e } from "react/jsx-runtime";
+import f from "clsx";
+import t from "prop-types";
+import { ListItem as g, ListItemAvatar as h, ListItemText as j, ListItemSecondaryAction as x } from "@material-ui/core";
+import { Skeleton as y } from "@material-ui/lab";
+import S from "@vidispine/proptypes";
+import { parseMetadataType as N } from "@vidispine/vdt-js";
+import V from "../../media/MediaCardAvatar/index.js";
+const D = () => ({
+  ListItemSecondaryAction: {
+    visibility: "hidden"
+  },
+  ListItemContainer: {
+    "&:hover $ListItemSecondaryAction": {
+      visibility: "visible"
+    }
+  }
+});
+function I({
+  classes: o,
+  className: v,
+  collectionType: i,
+  onClick: p,
+  parseMetadataOptions: L,
+  primary: n,
+  secondary: r,
+  AvatarComponent: A,
+  AvatarProps: u,
+  ActionComponent: l,
+  ActionProps: C,
+  ListItemProps: b,
+  skeleton: s
+}) {
+  const { id: a, metadata: O } = i, m = N(O, L);
+  let c, d;
+  return typeof n == "string" ? c = m[n] : typeof n == "function" && (c = n({ ...m, collectionType: i, collectionId: a })), typeof r == "string" ? d = m[r] : typeof r == "function" && (d = r({ ...m, collectionType: i, collectionId: a })), /* @__PURE__ */ T(
+    g,
+    {
+      className: f(v, o.root, "VdtCollectionListItem-root"),
+      onClick: p ? (P) => p(P, { collectionId: a, collectionType: i }) : void 0,
+      button: p ? !0 : void 0,
+      classes: { container: o.ListItemContainer },
+      ...b,
+      children: [
+        /* @__PURE__ */ e(
+          h,
+          {
+            className: f(o.ListItemAvatar, "VdtCollectionListItem-ListItemAvatar"),
+            children: /* @__PURE__ */ e(
+              A,
+              {
+                avatar: "collection",
+                collectionId: a,
+                collectionType: i,
+                skeleton: s,
+                ...u
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ e(
+          j,
+          {
+            primary: s ? /* @__PURE__ */ e(y, { width: 120 }) : c,
+            secondary: s ? /* @__PURE__ */ e(y, { width: 60 }) : d
+          }
+        ),
+        l && /* @__PURE__ */ e(
+          x,
+          {
+            className: f(
+              o.ListItemSecondaryAction,
+              "VdtCollectionListItem-ListItemSecondaryAction"
+            ),
+            children: /* @__PURE__ */ e(
+              l,
+              {
+                skeleton: s,
+                collectionId: a,
+                collectionType: i,
+                ...C
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+I.propTypes = {
+  /**
+   * Override styles with className
+   */
+  className: t.string,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: t.objectOf(t.string),
+  /**
+   The collectionType to display as a list item
+  */
+  collectionType: S.CollectionType.isRequired,
+  /**
+   Primary (header) text for the list item. 
+   Either (1) set the metadata field name to use or (2) add a function to select based on metadata values
+  */
+  primary: t.oneOfType([t.string, t.func]),
+  /**
+   Secondary (subheader) text for the list item. 
+   Either (1) set the metadata field name to use or (2) add a function to select based on metadata values
+  */
+  secondary: t.oneOfType([t.string, t.func]),
+  /**
+   Triggered when the list item is clicked
+  */
+  onClick: t.func,
+  /**
+   Add an action component to put actions on the list item
+  */
+  ActionComponent: t.elementType,
+  /**
+   Add props for the ActionComponent
+  */
+  ActionProps: t.objectOf(t.any),
+  /**
+   Add an avatar component to put an avatar on the list item
+  */
+  AvatarComponent: t.elementType,
+  /**
+   Add props for the AvatarComponent
+  */
+  AvatarProps: t.objectOf(t.any),
+  /**
+   Add props for the ListItem
+  */
+  ListItemProps: t.objectOf(t.any),
+  /**
+   Pass in options for how to parse the list item metadata
+  */
+  parseMetadataOptions: t.objectOf(t.any),
+  /**
+   Set true to show a skeleton list item
+  */
+  skeleton: t.bool
+};
+I.defaultProps = {
+  className: void 0,
+  classes: {},
+  primary: ({ collectionId: o }) => o,
+  secondary: void 0,
+  onClick: void 0,
+  ActionComponent: void 0,
+  ActionProps: {},
+  AvatarComponent: V,
+  AvatarProps: {},
+  ListItemProps: {},
+  parseMetadataOptions: { flat: !0, arrayOnSingleValue: !1 },
+  skeleton: !1
+};
+export {
+  I as default,
+  D as styles
+};

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

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

package/dist/es/collection/CollectionMetadataEdit.js

@@ -0,0 +1,56 @@
+import { jsx as j } from "react/jsx-runtime";
+import { useMemo as O } from "react";
+import { Form as V } from "react-final-form";
+import { collection as g } from "@vidispine/vdt-api";
+import { parseMetadataType as v, createMetadataType as w } from "@vidispine/vdt-js";
+import x from "../item/ItemMetadataForm.js";
+import { stringsToBooleans as C, booleansToStrings as F } from "../mapStringsBooleans.js";
+function k({
+  collectionId: c,
+  onSuccess: d,
+  fields: r,
+  groups: o,
+  collectionType: n,
+  metadataType: f,
+  onRefresh: l,
+  isLoading: p,
+  joinValue: y,
+  // eslint-disable-next-line no-console
+  onError: b = (a) => console.error(a.message)
+}) {
+  let a = f;
+  n && (a = n == null ? void 0 : n.metadata);
+  const M = O(() => {
+    const s = Array.isArray(r) ? r.map(({ name: t }) => t) : [], m = Array.isArray(o) ? o.map(({ name: t }) => t) : [], i = v(a, {
+      flat: !0,
+      arrayOnSingleValue: !1
+    }), e = Object.entries(i).reduce((t, A) => {
+      const [u, S] = A;
+      return s.includes(u) || m.includes(u) ? { ...t, [u]: S } : t;
+    }, {});
+    return Object.entries(e).reduce(C, {});
+  }, [a, r, o]);
+  return !p && /* @__PURE__ */ j(
+    V,
+    {
+      onSubmit: async (s) => {
+        const m = Object.entries(s).reduce(
+          (e, t) => F(e, t, y),
+          {}
+        ), i = w(m);
+        try {
+          await g.updateCollectionMetadata({ collectionId: c, metadataDocument: i }), await l(), d();
+        } catch (e) {
+          b(e);
+        }
+      },
+      component: x,
+      fields: r,
+      groups: o,
+      initialValues: M
+    }
+  );
+}
+export {
+  k as default
+};

package/dist/es/collection/CollectionMetadataTab.js

@@ -0,0 +1,69 @@
+import { jsxs as E, Fragment as F, jsx as i } from "react/jsx-runtime";
+import { useMemo as S, useState as T } from "react";
+import { withStyles as L, Box as V, FormControlLabel as $, Switch as q } from "@material-ui/core";
+import { useAddMetadataFieldAttributes as v, GetEntityMetadata as N, MetadataType as W } from "@vidispine/vdt-react";
+import k from "../item/ItemMetadataList.js";
+import w from "./CollectionMetadataEdit.js";
+function B({
+  collectionId: u,
+  fields: t = [],
+  groups: e = [],
+  editingLabel: y = (l) => l ? "Cancel" : "Edit",
+  showEditMetadata: c = !0,
+  onError: b,
+  onSuccess: d,
+  editJoinValue: g = ";",
+  displayJoinValue: A = ", ",
+  displayGroupAsList: j = !1,
+  useContentPaths: f = !1,
+  formatValue: C,
+  queryParams: p = {},
+  getAttributes: M = !1
+}) {
+  const l = S(() => {
+    const a = { ...p };
+    if (f) {
+      const o = e ? e.map((n) => n.name).map((n) => `metadata.timespan[start=-INF][end=+INF].group[name=${n}]`).join(",") : void 0, P = t ? t.map((n) => n.name).map((n) => `v(${n})`).join(",") : "metadata.timespan.field";
+      a.p = encodeURIComponent([P, o].join(","));
+    } else
+      a.content = "metadata", Array.isArray(t) && t.length > 0 && (a.field = t.map(({ name: o }) => o)), Array.isArray(e) && e.length > 0 && (a.group = e.map(({ name: o }) => o));
+    return a;
+  }, [t, e, f, p]), [r, x] = T(!1), h = () => x(!r), I = (a) => {
+    h(), d && d(a);
+  }, { fieldsWithAttributes: m = [], groupsWithAttributes: s = [] } = v({
+    fields: t,
+    groups: e,
+    getAttributes: M
+  });
+  return /* @__PURE__ */ E(F, { children: [
+    c && /* @__PURE__ */ i(V, { display: "flex", justifyContent: "flex-end", children: /* @__PURE__ */ i(
+      $,
+      {
+        control: /* @__PURE__ */ i(q, { checked: r, onChange: h }),
+        label: y(r),
+        labelPlacement: "start"
+      }
+    ) }),
+    (m.length > 0 || s.length > 0) && /* @__PURE__ */ i(N, { entity: "collection", entityId: u, queryParams: l, children: c && r ? /* @__PURE__ */ i(
+      w,
+      {
+        fields: m || t,
+        groups: s || e,
+        onSuccess: I,
+        onError: b,
+        joinValue: g
+      }
+    ) : /* @__PURE__ */ i(W, { joinValue: A, groupAsList: j, children: /* @__PURE__ */ i(
+      k,
+      {
+        fields: m || t,
+        groups: s || e,
+        formatValue: C
+      }
+    ) }) })
+  ] });
+}
+const J = L({}, { name: "VdtCollectionMetadataTab" })(B);
+export {
+  J as default
+};

package/dist/es/collection/CollectionRow/CollectionRow.js

@@ -0,0 +1,101 @@
+import { jsxs as C, jsx as l } from "react/jsx-runtime";
+import { useMemo as j } from "react";
+import v from "clsx";
+import e from "prop-types";
+import { TableRow as k, TableCell as u, Hidden as w, Box as O } from "@material-ui/core";
+import { parseMetadataType as R } from "@vidispine/vdt-js";
+import M from "../../media/MediaCardCheckbox.js";
+const P = ({ collectionType: m, parseMetadataOpts: p, options: o }) => {
+  const { metadata: c = {} } = m, s = R(c, p);
+  return o.map(({ value: t }) => {
+    const { [t]: r } = s;
+    return r;
+  });
+}, z = () => ({
+  root: {}
+});
+function i({
+  classes: m,
+  className: p,
+  options: o = [],
+  metadataToProps: c,
+  parseMetadataOpts: s = { joinValue: ", ", flat: !0 },
+  selected: t,
+  onCheck: r,
+  onClick: y,
+  TableRowProps: b = {},
+  ...d
+}) {
+  const { collectionType: f } = d, T = j(
+    () => c({
+      collectionType: f,
+      parseMetadataOpts: s,
+      options: o
+    }),
+    [f, o, s, c]
+  ), h = (n) => {
+    r && r(n, !t, d);
+  };
+  return /* @__PURE__ */ C(
+    k,
+    {
+      className: v(m.root, "VdtCollectionRow-root", p),
+      hover: !0,
+      selected: t,
+      onClick: y,
+      style: { cursor: "pointer" },
+      ...b,
+      children: [
+        r && /* @__PURE__ */ l(u, { padding: "checkbox", children: /* @__PURE__ */ l(M, { checked: t, handleChecked: h }) }),
+        T.map((n, a) => /* @__PURE__ */ l(
+          w,
+          {
+            only: o[a].hide,
+            children: /* @__PURE__ */ l(u, { children: o[a].valueComponent ? /* @__PURE__ */ l(
+              O,
+              {
+                component: o[a].valueComponent,
+                value: n,
+                innerProps: d
+              }
+            ) : n })
+          },
+          o[a].key || o[a].value || o[a].label
+        ))
+      ]
+    }
+  );
+}
+i.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.objectOf(e.string),
+  /**
+   * Override styles with className
+   */
+  className: e.string,
+  options: e.arrayOf(e.any),
+  metadataToProps: e.func,
+  parseMetadataOpts: e.objectOf(e.any),
+  selected: e.bool,
+  onCheck: e.func,
+  onClick: e.func,
+  TableRowProps: e.objectOf(e.any),
+  collectionType: e.objectOf(e.any).isRequired
+};
+i.defaultProps = {
+  className: void 0,
+  classes: {},
+  options: [],
+  metadataToProps: P,
+  parseMetadataOpts: { joinValue: ", ", flat: !0 },
+  selected: !1,
+  onCheck: void 0,
+  onClick: void 0,
+  TableRowProps: {}
+};
+export {
+  i as default,
+  z as styles
+};

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

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

package/dist/es/collection/CollectionSearchPicker/CollectionSearchPicker.js

@@ -0,0 +1,134 @@
+import { jsx as r, jsxs as q } from "react/jsx-runtime";
+import { useState as W, useEffect as $ } from "react";
+import D from "clsx";
+import e from "prop-types";
+import { useSearch as E, SearchCollection as V } from "@vidispine/vdt-react";
+import z from "../../search/Pagination.js";
+import A from "../../search/SearchInput/index.js";
+import B from "../CollectionTable/index.js";
+function F({ PaginationComponent: t = z, ...n }) {
+  const {
+    collectionListType: { hits: a = 0 }
+  } = n;
+  return /* @__PURE__ */ r(t, { count: a, ...n });
+}
+function G(t) {
+  const { isLoading: n } = t;
+  return /* @__PURE__ */ r(A, { submitting: n, ...t });
+}
+const Z = () => ({
+  root: {}
+});
+function i({
+  className: t,
+  classes: n,
+  onChange: a,
+  onCheck: p,
+  CollectionTableComponent: m,
+  CollectionTableProps: h,
+  searchProps: u,
+  idLabelText: P,
+  titleLabelText: f,
+  ownerLabelText: d,
+  searchPlaceholder: b,
+  SearchInputProps: C,
+  PaginationProps: g,
+  SearchCollectionProps: S
+}) {
+  const T = E({
+    queryParams: {
+      field: ["collectionId", "title", "__user"],
+      content: "metadata"
+    }
+  }), { state: x, setSearchText: y, onChangeRowsPerPage: k, onChangePage: j } = u || T, { matrixParams: L, queryParams: v, itemSearchDocument: w, page: O, rowsPerPage: I } = x, [c, l] = W([]), _ = (o) => {
+    c.includes(o) ? l((s) => s.filter((R) => R !== o)) : l((s) => [...s, o]);
+  };
+  $(() => a && a(c), [c]);
+  const N = ({ id: o }) => _(o);
+  return /* @__PURE__ */ r("div", { className: D(n.root, "VdtCollectionSearchPicker", t), children: /* @__PURE__ */ q(
+    V,
+    {
+      itemSearchDocument: w,
+      matrixParams: L,
+      queryParams: v,
+      ...S,
+      children: [
+        /* @__PURE__ */ r(
+          G,
+          {
+            onSubmit: (o) => y(`*${o}*`),
+            searchPlaceholder: b,
+            ...C
+          }
+        ),
+        /* @__PURE__ */ r(
+          m,
+          {
+            onRowClick: N,
+            onCheck: p,
+            selected: c,
+            options: [
+              { label: f, value: "title" },
+              { label: P, value: "collectionId" },
+              { label: d, value: "__user" }
+            ],
+            ...h
+          }
+        ),
+        /* @__PURE__ */ r(
+          F,
+          {
+            onChangePage: j,
+            onChangeRowsPerPage: k,
+            page: O,
+            rowsPerPage: I,
+            ...g
+          }
+        )
+      ]
+    }
+  ) });
+}
+i.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.objectOf(e.string),
+  /**
+   * Override styles with className
+   */
+  className: e.string,
+  onChange: e.func,
+  onCheck: e.func,
+  CollectionTableComponent: e.elementType,
+  CollectionTableProps: e.objectOf(e.any),
+  searchProps: e.objectOf(e.any),
+  idLabelText: e.string,
+  titleLabelText: e.string,
+  ownerLabelText: e.string,
+  searchPlaceholder: e.string,
+  SearchInputProps: e.objectOf(e.any),
+  PaginationProps: e.objectOf(e.any),
+  SearchCollectionProps: e.objectOf(e.any)
+};
+i.defaultProps = {
+  className: void 0,
+  classes: {},
+  onChange: void 0,
+  onCheck: () => {
+  },
+  CollectionTableComponent: B,
+  CollectionTableProps: {},
+  searchProps: void 0,
+  idLabelText: "Id",
+  titleLabelText: "Title",
+  ownerLabelText: "Owner",
+  searchPlaceholder: "Search collections",
+  SearchInputProps: {},
+  PaginationProps: {},
+  SearchCollectionProps: {}
+};
+export {
+  i as default,
+  Z as styles
+};

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

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

package/dist/es/collection/CollectionTable/CollectionTable.js

@@ -0,0 +1,70 @@
+import { jsxs as r, jsx as l } from "react/jsx-runtime";
+import u from "clsx";
+import o from "prop-types";
+import { Table as k, TableHead as w, TableRow as x, TableCell as c, Hidden as R, TableBody as g } from "@material-ui/core";
+import j from "../CollectionRow/index.js";
+const P = () => ({
+  root: {}
+});
+function a({
+  classes: d,
+  className: m,
+  collectionListType: p,
+  RowComponent: f,
+  options: n,
+  onCheck: s,
+  selected: i,
+  onRowClick: C,
+  ...b
+}) {
+  const { collection: t = [] } = p;
+  return /* @__PURE__ */ r(k, { className: u(d.root, "VdtCollectionTable-root", m), size: "small", children: [
+    /* @__PURE__ */ l(w, { children: /* @__PURE__ */ r(x, { children: [
+      s && /* @__PURE__ */ l(c, { padding: "checkbox" }),
+      n.map(({ label: e, value: h, hide: y }, T) => /* @__PURE__ */ l(R, { only: y, children: /* @__PURE__ */ l(c, { children: e }) }, e || h || T))
+    ] }) }),
+    /* @__PURE__ */ l(g, { children: t && t.map((e) => /* @__PURE__ */ l(
+      f,
+      {
+        collectionType: e,
+        collectionId: e.id,
+        options: n,
+        onCheck: s,
+        selected: i && i.includes(e.id),
+        onClick: () => C(e),
+        ...b
+      },
+      e.id
+    )) })
+  ] });
+}
+a.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.objectOf(o.string),
+  /**
+   * Override styles with className
+   */
+  className: o.string,
+  collectionListType: o.objectOf(o.any),
+  RowComponent: o.elementType,
+  options: o.arrayOf(o.any),
+  onCheck: o.func,
+  selected: o.arrayOf(o.string),
+  onRowClick: o.func
+};
+a.defaultProps = {
+  className: void 0,
+  classes: {},
+  collectionListType: {},
+  RowComponent: j,
+  options: [],
+  onCheck: void 0,
+  selected: void 0,
+  onRowClick: void 0
+};
+export {
+  a as default,
+  P as styles
+};

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

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