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

package/dist/es/search/querybuilder/QueryOperator/QueryOperator.js

@@ -0,0 +1,160 @@
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import j from "clsx";
+import e from "prop-types";
+import { ListItem as q, ListItemAvatar as L, Button as n, ListItemSecondaryAction as b, ButtonGroup as S } from "@material-ui/core";
+import { Block as M, Check as w, Delete as g, CallMerge as E, CallSplit as H } from "@material-ui/icons";
+const d = (r) => (o) => {
+  o.stopPropagation(), r(o.target.value);
+}, Y = (r) => ({
+  root: {},
+  errorButton: {
+    color: r.palette.error.light
+  },
+  successButton: {
+    color: r.palette.success.light
+  }
+});
+function T({
+  className: r,
+  classes: o,
+  operator: x,
+  onAddEntry: i,
+  onRemove: c,
+  onChangeOperation: u,
+  setNot: p,
+  not: l,
+  defaultField: O,
+  defaultGroup: m,
+  includeText: f,
+  excludeText: h,
+  removeText: N,
+  andText: v,
+  orText: y,
+  addFieldText: A,
+  addGroupText: I,
+  addOperatorText: B,
+  NotIcon: C = M,
+  OkIcon: k = w,
+  RemoveIcon: R = g,
+  AndIcon: D = E,
+  OrIcon: F = H
+}) {
+  const { operation: a } = x, G = d(
+    () => i({
+      name: O,
+      value: [{ value: "" }]
+    })
+  ), Q = d(
+    () => i({
+      name: m,
+      entry: []
+    })
+  ), z = d(
+    () => i({
+      operation: "AND",
+      entry: []
+    })
+  ), P = d(() => p(!l)), V = d(() => {
+    u(a === "AND" ? "OR" : "AND");
+  });
+  return /* @__PURE__ */ s(
+    q,
+    {
+      ContainerComponent: "div",
+      className: j(r, o.root, "VdtQueryOperator-root"),
+      children: [
+        /* @__PURE__ */ t(L, { children: /* @__PURE__ */ s("div", { children: [
+          u && /* @__PURE__ */ t(
+            n,
+            {
+              className: a === "AND" ? o.successButton : o.errorButton,
+              startIcon: a === "AND" ? /* @__PURE__ */ t(D, {}) : /* @__PURE__ */ t(F, {}),
+              edge: "end",
+              onClick: V,
+              size: "small",
+              children: a === "AND" ? v : y
+            }
+          ),
+          p && /* @__PURE__ */ t(
+            n,
+            {
+              className: l ? o.errorButton : o.successButton,
+              startIcon: l ? /* @__PURE__ */ t(C, {}) : /* @__PURE__ */ t(k, {}),
+              edge: "end",
+              onClick: P,
+              size: "small",
+              children: l ? h : f
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ t(b, { children: /* @__PURE__ */ s(S, { variant: "outlined", size: "small", children: [
+          /* @__PURE__ */ t(n, { className: "VdtQueryOperator-addFieldBtn", onClick: G, children: A }),
+          m && /* @__PURE__ */ t(n, { className: "VdtQueryOperator-addGroupBtn", onClick: Q, children: I }),
+          /* @__PURE__ */ t(n, { className: "VdtQueryOperator-addOperatorBtn", onClick: z, children: B }),
+          c && /* @__PURE__ */ t(n, { edge: "end", onClick: c, startIcon: /* @__PURE__ */ t(R, {}), size: "small", children: N })
+        ] }) })
+      ]
+    }
+  );
+}
+T.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.objectOf(e.string),
+  /**
+   * Override styles with className
+   */
+  className: e.string,
+  includeText: e.string,
+  excludeText: e.string,
+  removeText: e.string,
+  andText: e.string,
+  orText: e.string,
+  addFieldText: e.string,
+  addGroupText: e.string,
+  addOperatorText: e.string,
+  NotIcon: e.elementType,
+  OkIcon: e.elementType,
+  RemoveIcon: e.elementType,
+  AndIcon: e.elementType,
+  OrIcon: e.elementType,
+  defaultField: e.string,
+  defaultGroup: e.string,
+  not: e.bool,
+  setNot: e.func,
+  onAddEntry: e.func.isRequired,
+  onRemove: e.func,
+  onChangeOperation: e.func,
+  operator: e.shape({
+    operation: e.oneOf(["AND", "OR", "NOT"]).isRequired,
+    entry: e.arrayOf(e.any)
+  }).isRequired
+};
+T.defaultProps = {
+  className: void 0,
+  classes: {},
+  includeText: "Include",
+  excludeText: "Exclude",
+  removeText: "Remove",
+  andText: "And",
+  orText: "Or",
+  addFieldText: "Add field",
+  addGroupText: "Add group",
+  addOperatorText: "Add operator",
+  NotIcon: () => null,
+  OkIcon: () => null,
+  RemoveIcon: g,
+  AndIcon: () => null,
+  OrIcon: () => null,
+  defaultField: void 0,
+  defaultGroup: void 0,
+  onRemove: void 0,
+  not: !1,
+  setNot: void 0,
+  onChangeOperation: void 0
+};
+export {
+  T as default,
+  Y as styles
+};

package/dist/es/search/querybuilder/QueryOperator/index.js

@@ -0,0 +1,6 @@
+import { withStyles as r } from "@material-ui/core";
+import t, { styles as e } from "./QueryOperator.js";
+const p = r(e, { name: "VdtQueryOperator" })(t);
+export {
+  p as default
+};

package/dist/es/storage/StorageListTree.js

@@ -0,0 +1,36 @@
+import { jsx as e } from "react/jsx-runtime";
+import { withStyles as p } from "@material-ui/core";
+import { ExpandMore as f, ChevronRight as c } from "@material-ui/icons";
+import { TreeView as g } from "@material-ui/lab";
+import u from "./components/StorageList.js";
+import S from "./hooks/useTreeView.js";
+const T = {};
+function x({
+  className: t = "VdtStorageListTree",
+  styles: o,
+  StorageListComponent: r = u,
+  StorageListProps: s = {},
+  selected: n,
+  onChange: i = () => null,
+  expanded: a
+}) {
+  const { onNodeSelect: d, onNodeToggle: l, expanded: m } = S({ onChange: i, initialExpanded: a });
+  return /* @__PURE__ */ e(
+    g,
+    {
+      className: t,
+      defaultCollapseIcon: /* @__PURE__ */ e(f, {}),
+      defaultExpandIcon: /* @__PURE__ */ e(c, {}),
+      onNodeSelect: d,
+      onNodeToggle: l,
+      selected: n,
+      expanded: m,
+      styles: o,
+      children: /* @__PURE__ */ e(r, { ...s })
+    }
+  );
+}
+const E = p(T, { name: "VdtStorageListTree" })(x);
+export {
+  E as default
+};

package/dist/es/storage/components/FileTree.js

@@ -0,0 +1,29 @@
+import { jsx as t } from "react/jsx-runtime";
+import { withStyles as n } from "@material-ui/core";
+import { TreeItem as d } from "@material-ui/lab";
+import { FILE as f, JOIN_CHARACTER as F } from "../const.js";
+import a from "./FileTreeLabel.js";
+const p = {};
+function I({
+  className: r = "VdtFile",
+  styles: o,
+  fileType: e,
+  storageId: i,
+  LabelComponent: l = a,
+  LabelProps: m = {}
+}) {
+  const { id: s } = e;
+  return /* @__PURE__ */ t(
+    d,
+    {
+      nodeId: [f, s, i].join(F),
+      label: /* @__PURE__ */ t(l, { fileType: e, ...m }),
+      className: r,
+      styles: o
+    }
+  );
+}
+const j = n(p, { name: "VdtFileTree" })(I);
+export {
+  j as default
+};

package/dist/es/storage/components/FileTreeLabel.js

@@ -0,0 +1,40 @@
+import { jsxs as s, jsx as l } from "react/jsx-runtime";
+import { withStyles as f, Typography as i } from "@material-ui/core";
+import { InsertDriveFileOutlined as h } from "@material-ui/icons";
+import { parseFileType as p } from "@vidispine/vdt-js";
+const b = (e) => ({
+  label: {
+    fontWeight: "inherit",
+    color: "inherit"
+  },
+  labelRoot: {
+    display: "flex",
+    alignItems: "center"
+  },
+  labelIcon: {
+    marginRight: e.spacing(1)
+  },
+  labelText: {
+    fontWeight: "inherit",
+    flexGrow: 1
+  }
+});
+function d({
+  classes: e,
+  LabelIcon: t = h,
+  fileType: r,
+  TypographyCaptionProps: o = {},
+  TypographyBodyProps: a = {},
+  LabelIconProps: n = {}
+}) {
+  const { fileSize: c, fileName: m } = p(r);
+  return /* @__PURE__ */ s("div", { className: e.labelRoot, children: [
+    /* @__PURE__ */ l(t, { color: "inherit", className: e.labelIcon, ...n }),
+    /* @__PURE__ */ l(i, { variant: "body2", className: e.labelText, ...a, children: m }),
+    /* @__PURE__ */ l(i, { variant: "caption", ...o, children: c })
+  ] });
+}
+const F = f(b, { name: "VdtFolderTreeLabel" })(d);
+export {
+  F as default
+};

package/dist/es/storage/components/FolderTree.js

@@ -0,0 +1,77 @@
+import { jsx as l, jsxs as R } from "react/jsx-runtime";
+import { withStyles as p } from "@material-ui/core";
+import { TreeItem as f } from "@material-ui/lab";
+import { PREFIX as _, JOIN_CHARACTER as b, LOAD_MORE as j } from "../const.js";
+import y from "../hooks/useFileList.js";
+import A from "./FileTree.js";
+import C from "./FolderTreeLabel.js";
+const E = {};
+function c({
+  className: i = "VdtFolderTree",
+  styles: t,
+  path: o,
+  storageId: e,
+  fileListType: s,
+  onListFilesMore: m,
+  // eslint-disable-next-line no-use-before-define
+  FolderComponent: F = O,
+  FolderProps: L = {},
+  FileComponent: T = A,
+  FileProps: a = {},
+  LoadMoreProps: x = {},
+  LabelComponent: $ = C
+}) {
+  const u = o.replace(/\/$/, "").split("/").pop(), { prefixes: { prefix: M = [] } = {}, file: n = [], hits: d } = s;
+  return /* @__PURE__ */ R(
+    f,
+    {
+      nodeId: [_, o, e].join(b),
+      label: /* @__PURE__ */ l($, { label: u }),
+      className: i,
+      styles: t,
+      children: [
+        M.map((r) => /* @__PURE__ */ l(F, { path: r, storageId: e, ...L }, r)),
+        n.map((r) => /* @__PURE__ */ l(
+          T,
+          {
+            fileId: r.id,
+            fileType: r,
+            storageId: e,
+            ...a
+          },
+          r.id
+        )),
+        d !== void 0 && d > n.length && /* @__PURE__ */ l(
+          f,
+          {
+            className: "loadMore",
+            nodeId: `${j}_${o}_${e}`,
+            label: "Load More",
+            onClick: m,
+            ...x
+          }
+        )
+      ]
+    }
+  );
+}
+const O = p(
+  {},
+  { name: "VdtFolderListTree" }
+)(({ path: i, storageId: t, FolderTreeComponent: o = c, FolderTreeProps: e = {} }) => {
+  const { fileListType: s, onListFilesMore: m } = y({ storageId: t, path: i });
+  return /* @__PURE__ */ l(
+    o,
+    {
+      path: i,
+      storageId: t,
+      fileListType: s,
+      onListFilesMore: m,
+      ...e
+    }
+  );
+}), D = p(E, { name: "VdtFolderTree" })(c);
+export {
+  O as FolderListTree,
+  D as default
+};

package/dist/es/storage/components/FolderTreeLabel.js

@@ -0,0 +1,36 @@
+import { jsxs as a, jsx as l } from "react/jsx-runtime";
+import { withStyles as n, Typography as c } from "@material-ui/core";
+import { FolderOpenOutlined as d } from "@material-ui/icons";
+const m = (e) => ({
+  label: {
+    fontWeight: "inherit",
+    color: "inherit"
+  },
+  labelRoot: {
+    display: "flex",
+    alignItems: "center"
+  },
+  labelIcon: {
+    marginRight: e.spacing(1)
+  },
+  labelText: {
+    fontWeight: "inherit",
+    flexGrow: 1
+  }
+});
+function s({
+  classes: e,
+  label: t,
+  LabelIcon: o = d,
+  TypographyBodyProps: r = {},
+  LabelIconProps: i = {}
+}) {
+  return /* @__PURE__ */ a("div", { className: e.labelRoot, children: [
+    /* @__PURE__ */ l(o, { color: "inherit", className: e.labelIcon, ...i }),
+    /* @__PURE__ */ l(c, { variant: "body2", className: e.labelText, ...r, children: t })
+  ] });
+}
+const p = n(m, { name: "VdtFolderTreeLabel" })(s);
+export {
+  p as default
+};

package/dist/es/storage/components/SelectedEntityWrapper.js

@@ -0,0 +1,21 @@
+import { jsx as n } from "react/jsx-runtime";
+import { withStyles as l } from "@material-ui/core";
+import { JOIN_CHARACTER as c, STORAGE as m, FILE as s } from "../const.js";
+import a from "./SelectedFileWrapper.js";
+import d from "./SelectedStorageWrapper.js";
+const S = {};
+function y({
+  selected: e = "",
+  SelectedEntities: r = {
+    [m]: d,
+    [s]: a
+  },
+  ...o
+}) {
+  const [p, i] = e.split(c), t = r[p];
+  return t ? /* @__PURE__ */ n(t, { entityId: i, ...o }) : null;
+}
+const I = l(S, { name: "VdtSelectedEntityWrapper" })(y);
+export {
+  I as default
+};

package/dist/es/storage/components/SelectedFile.js

@@ -0,0 +1,44 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { withStyles as f, Typography as o, Box as x } from "@material-ui/core";
+import m from "../../media/MediaBadge.js";
+const y = {};
+function u({
+  className: a = "VdtSelectedFile",
+  styles: c,
+  fileId: i,
+  fileType: n,
+  SelectedFileActionsComponent: r = null,
+  SelectedFileActionsProps: p = {},
+  fileText: d = "File"
+}) {
+  const { path: h } = n, t = h.split("/").pop(), l = t.split(".").length > 1 ? t.split(".").pop() : void 0;
+  return /* @__PURE__ */ s("div", { className: a, style: c, children: [
+    /* @__PURE__ */ e(o, { variant: "h4", children: t }),
+    /* @__PURE__ */ s(
+      x,
+      {
+        display: "flex",
+        flexDirection: "row",
+        flexWrap: "nowrap",
+        justifyContent: l ? "space-between" : "flex-start",
+        alignItems: "center",
+        children: [
+          /* @__PURE__ */ e(o, { variant: "h5", children: `${d} • ${i}` }),
+          l && /* @__PURE__ */ e(m, { children: l })
+        ]
+      }
+    ),
+    r && /* @__PURE__ */ e(
+      r,
+      {
+        fileId: i,
+        fileType: n,
+        ...p
+      }
+    )
+  ] });
+}
+const F = f(y, { name: "VdtSelectedFile" })(u);
+export {
+  F as default
+};

package/dist/es/storage/components/SelectedFileWrapper.js

@@ -0,0 +1,13 @@
+import { jsx as i } from "react/jsx-runtime";
+import { withStyles as o } from "@material-ui/core";
+import p from "../hooks/useSelectedFile.js";
+import c from "./SelectedFile.js";
+const d = {};
+function m({ entityId: t, SelectedFileComponent: l = c, ...r }) {
+  const { fileType: e } = p({ entityId: t });
+  return e ? /* @__PURE__ */ i(l, { fileType: e, fileId: e.id, ...r }) : null;
+}
+const S = o(d, { name: "VdtSelectedFileWrapper" })(m);
+export {
+  S as default
+};

package/dist/es/storage/components/SelectedStorage.js

@@ -0,0 +1,53 @@
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import { useMemo as g } from "react";
+import { withStyles as w, Typography as d, Box as j } from "@material-ui/core";
+import v from "../../media/MediaBadge.js";
+const M = {};
+function W({
+  className: a = "VdtSelectedStorage",
+  styles: h,
+  storageId: n,
+  storageType: i,
+  SelectedStorageActionsComponent: l = null,
+  SelectedStorageActionsProps: f = {},
+  storageText: p = "Storage"
+}) {
+  const [m, u] = g(() => {
+    const { method: S = [] } = i, [o] = S;
+    if (o && o.uri) {
+      const { uri: x } = o, s = new URL(x), { pathname: y } = s;
+      let { protocol: e } = s, t = y.split("@").pop();
+      return t.endsWith("/") && (t = t.slice(0, -1)), e.endsWith(":") && (e = e.slice(0, -1)), [e, t];
+    }
+    return [];
+  }, [i]);
+  return /* @__PURE__ */ c("div", { className: a, style: h, children: [
+    /* @__PURE__ */ r(d, { variant: "h4", children: u || "" }),
+    /* @__PURE__ */ c(
+      j,
+      {
+        display: "flex",
+        flexDirection: "row",
+        flexWrap: "nowrap",
+        justifyContent: "space-between",
+        alignItems: "center",
+        children: [
+          /* @__PURE__ */ r(d, { variant: "h5", children: `${p} • ${n}` }),
+          /* @__PURE__ */ r(v, { children: m })
+        ]
+      }
+    ),
+    l && /* @__PURE__ */ r(
+      l,
+      {
+        storageId: n,
+        storageType: i,
+        ...f
+      }
+    )
+  ] });
+}
+const b = w(M, { name: "VdtSelectedStorage" })(W);
+export {
+  b as default
+};

package/dist/es/storage/components/SelectedStorageWrapper.js

@@ -0,0 +1,17 @@
+import { jsx as a } from "react/jsx-runtime";
+import { withStyles as p } from "@material-ui/core";
+import s from "../hooks/useSelectedStorage.js";
+import S from "./SelectedStorage.js";
+const l = {};
+function c({
+  entityId: t,
+  SelectedStorageComponent: r = S,
+  ...o
+}) {
+  const { storageType: e } = s({ entityId: t });
+  return e ? /* @__PURE__ */ a(r, { storageType: e, storageId: e.id, ...o }) : null;
+}
+const i = p(l, { name: "VdtSelectedStorageWrapper" })(c);
+export {
+  i as default
+};

package/dist/es/storage/components/Storage.js

@@ -0,0 +1,27 @@
+import { jsx as m } from "react/jsx-runtime";
+import { withStyles as n } from "@material-ui/core";
+import f from "../hooks/useFileList.js";
+import a from "./StorageTree.js";
+const l = {};
+function p({
+  storageId: t,
+  storageType: o,
+  StorageTreeComponent: e = a,
+  StorageTreeProps: r = {}
+}) {
+  const { onListFilesMore: i, fileListType: s } = f({ storageId: t });
+  return /* @__PURE__ */ m(
+    e,
+    {
+      onListFilesMore: i,
+      fileListType: s,
+      storageId: t,
+      storageType: o,
+      ...r
+    }
+  );
+}
+const y = n(l, { name: "VdtStorage" })(p);
+export {
+  y as default
+};

package/dist/es/storage/components/StorageList.js

@@ -0,0 +1,21 @@
+import { jsx as i } from "react/jsx-runtime";
+import { withStyles as a } from "@material-ui/core";
+import n from "../hooks/useStorageList.js";
+import m from "./Storage.js";
+const g = {};
+function f({ StorageComponent: r = m, StorageProps: s = {} }) {
+  const { storageListType: e } = n(), { storage: o = [] } = e;
+  return o.length === 0 ? null : o.map((t) => /* @__PURE__ */ i(
+    r,
+    {
+      storageId: t.id,
+      storageType: t,
+      ...s
+    },
+    t.id
+  ));
+}
+const c = a(g, { name: "VdtStorageList" })(f);
+export {
+  c as default
+};

package/dist/es/storage/components/StorageTree.js

@@ -0,0 +1,69 @@
+import { jsxs as E, jsx as n } from "react/jsx-runtime";
+import { useMemo as b } from "react";
+import { withStyles as w } from "@material-ui/core";
+import { TreeItem as f } from "@material-ui/lab";
+import { STORAGE as F, JOIN_CHARACTER as c, LOAD_MORE as N } from "../const.js";
+import V from "./FileTree.js";
+import { FolderListTree as W } from "./FolderTree.js";
+const _ = {};
+function g({
+  className: p = "VdtStorageTree",
+  styles: a,
+  storageType: s,
+  storageId: t,
+  fileListType: u,
+  onListFilesMore: h,
+  FolderComponent: S = W,
+  FolderProps: L = {},
+  FileComponent: T = V,
+  FileProps: x = {},
+  LoadMoreProps: R = {},
+  storageText: $ = "Storage",
+  loadMoreText: j = "Load more"
+}) {
+  const A = b(() => {
+    const { method: e = [] } = s, [i] = e;
+    if (i && i.uri) {
+      const { uri: O } = i, d = new URL(O), { pathname: C } = d;
+      let { protocol: o } = d, r = C.split("@").pop();
+      return r.endsWith("/") && (r = r.slice(0, -1)), o.endsWith(":") && (o = o.slice(0, -1)), `${o} ${r}`;
+    }
+    return `${$} ${t}`;
+  }, [s, t]), { prefixes: { prefix: M = [] } = {}, file: l = [], hits: m } = u;
+  return /* @__PURE__ */ E(
+    f,
+    {
+      nodeId: [F, t].join(c),
+      label: A,
+      className: p,
+      styles: a,
+      children: [
+        M.map((e) => /* @__PURE__ */ n(S, { path: e, storageId: t, ...L }, e)),
+        l.map((e) => /* @__PURE__ */ n(
+          T,
+          {
+            fileId: e.id,
+            fileType: e,
+            storageId: t,
+            ...x
+          },
+          e.id
+        )),
+        m !== void 0 && m > l.length && /* @__PURE__ */ n(
+          f,
+          {
+            className: "loadMore",
+            nodeId: [N, t].join(c),
+            label: j,
+            onClick: h,
+            ...R
+          }
+        )
+      ]
+    }
+  );
+}
+const U = w(_, { name: "VdtStorageTree" })(g);
+export {
+  U as default
+};

package/dist/es/storage/const.js

@@ -0,0 +1,8 @@
+const E = "STORAGE", R = "FILE", O = "PREFIX", o = "LOAD_MORE", t = "_";
+export {
+  R as FILE,
+  t as JOIN_CHARACTER,
+  o as LOAD_MORE,
+  O as PREFIX,
+  E as STORAGE
+};