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

package/dist/es/upload/FileTree.js

@@ -0,0 +1,105 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useMemo as v } from "react";
+import b from "lodash.merge";
+import { TreeView as g, TreeItem as F } from "@material-ui/lab";
+function I(e) {
+  const r = {}, t = e.file.path.split("/").filter((s) => s.length > 0);
+  return t[0] = `/${t[0]}`, t.map((s, f) => t.slice(0, f + 1).join("/")).reduce(
+    // eslint-disable-next-line no-return-assign, no-param-reassign
+    (s, f, u, p) => s[f] = p.length === u + 1 ? e : {},
+    r
+  ), r;
+}
+function $(e) {
+  return b(...e.map((r) => I(r)));
+}
+function x({ fileTree: e, files: r, ...t }) {
+  const {
+    clickFile: n,
+    removeFile: s,
+    removeFolder: f,
+    selectedFilePath: u,
+    FileComponent: p,
+    FileProps: d,
+    FolderComponent: T,
+    FolderProps: h
+  } = t;
+  return Object.entries(e).map(([o, i]) => i.file instanceof File ? /* @__PURE__ */ a(
+    F,
+    {
+      nodeId: o,
+      label: /* @__PURE__ */ a(
+        p,
+        {
+          file: i.file,
+          progress: i.progress,
+          onRemove: s(i.file.path),
+          onClick: n(i.file.path),
+          selected: u === i.file.path,
+          ...d
+        },
+        o
+      )
+    },
+    o
+  ) : /* @__PURE__ */ a(
+    F,
+    {
+      nodeId: `${o}`,
+      label: /* @__PURE__ */ a(
+        T,
+        {
+          path: o,
+          files: r.filter((l) => l.file.path.startsWith(`${o}/`)),
+          onRemove: f(o),
+          ...h
+        }
+      ),
+      children: /* @__PURE__ */ a(x, { fileTree: i, files: r, ...t })
+    },
+    `${o}`
+  ));
+}
+function k({
+  files: e,
+  removeFiles: r,
+  onClickFile: t,
+  selectedFile: n,
+  FileComponent: s,
+  FileProps: f = {},
+  FolderComponent: u,
+  FolderProps: p = {}
+}) {
+  const d = v(() => $(e), [e]), T = (l) => () => {
+    const c = e.map((m, P) => m.file.path.startsWith(`${l}/`) && P).filter((m) => m !== !1);
+    r(c)();
+  }, h = (l) => () => {
+    const c = e.findIndex((m) => m.file.path === l);
+    r([c])();
+  }, o = (l) => () => {
+    const c = e.findIndex((m) => m.file.path === l);
+    t(c)();
+  }, i = v(() => {
+    if (!Number.isNaN(n) && !(n < 0 || n >= e.length) && e[n])
+      return e[n].file.path;
+  }, [n, e]);
+  return d && /* @__PURE__ */ a(g, { children: /* @__PURE__ */ a(
+    x,
+    {
+      fileTree: d,
+      files: e,
+      clickFile: o,
+      removeFile: h,
+      removeFolder: T,
+      onClickFile: t,
+      selectedFilePath: i,
+      FileComponent: s,
+      FileProps: f,
+      FolderComponent: u,
+      FolderProps: p
+    }
+  ) });
+}
+export {
+  k as default
+};

package/dist/es/upload/Upload.js

@@ -0,0 +1,323 @@
+import { jsxs as r, jsx as i, Fragment as F } from "react/jsx-runtime";
+import { useState as D, useCallback as to } from "react";
+import y from "clsx";
+import { useDropzone as ro } from "react-dropzone";
+import { withStyles as ao, emphasize as po, Divider as R, List as A, DialogActions as co, Dialog as so } from "@material-ui/core";
+import { collection as go } from "@vidispine/vdt-api";
+import { useUploadFiles as mo } from "@vidispine/vdt-react";
+import uo from "../collection/AddToCollectionDialog/index.js";
+import fo from "../SplitButton.js";
+import ho from "./FileTree.js";
+import vo from "./UploadEditor.js";
+import Co from "./UploadListFolder.js";
+import L from "./UploadListItem.js";
+const bo = (o) => ({
+  root: {
+    paddingLeft: o.spacing(2),
+    paddingRight: o.spacing(2)
+  },
+  dropzoneRoot: {
+    cursor: "pointer",
+    marginTop: o.spacing(1),
+    marginBottom: o.spacing(1),
+    paddingLeft: o.spacing(0.5),
+    paddingRight: o.spacing(0.5)
+  },
+  dropzoneLabel: {
+    color: o.palette.text.secondary,
+    ...o.typography.body1
+  },
+  dropzoneInput: {
+    marginTop: o.spacing(0.5),
+    minHeight: "50vh",
+    minWidth: o.spacing(4),
+    borderWidth: 2,
+    borderColor: "grey",
+    borderRadius: 3,
+    borderStyle: "dotted",
+    backgroundColor: "rgba(0,0,0,0.05)",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: "min-height 0.3s"
+  },
+  dropzoneDrag: {
+    borderStyle: "solid",
+    backgroundColor: "rgba(0,0,0,0.1)"
+  },
+  dropzoneHasFiles: {
+    minHeight: o.spacing(8)
+  },
+  dialogContentRoot: {
+    display: "flex"
+  },
+  filesRoot: {
+    width: "100%",
+    transition: "width 0.3s"
+  },
+  editorRoot: {
+    width: 0,
+    transition: "width 0.3s",
+    marginTop: o.spacing(1),
+    marginBottom: o.spacing(1)
+  },
+  editorOpen: {
+    backgroundColor: po(o.palette.background.paper, 0.05)
+  },
+  isEditing: {
+    width: "50%"
+  },
+  uploadToCollectionDialog: {
+    position: "absolute",
+    top: "20%"
+  },
+  divider: {
+    margin: "20px 0 20px 0"
+  }
+});
+function Fo({ selected: o = -1, startIndex: d = 0, onClickFile: f, removeFiles: c, ...t }) {
+  const s = (g) => f(g + d), h = (g) => c(g.map((v) => v + d));
+  return /* @__PURE__ */ i(
+    ho,
+    {
+      selectedFile: o - d,
+      onClickFile: s,
+      removeFiles: h,
+      ...t
+    }
+  );
+}
+function Ro({ onSubmit: o, ...d }) {
+  return /* @__PURE__ */ i(
+    uo,
+    {
+      className: "VdtUploadCollectionPicker-root",
+      entities: [],
+      titleText: "Upload To Collection",
+      submitText: "Upload",
+      onSubmit: (c, t) => t,
+      onCreate: (c, t) => go.createCollection({ collectionDocument: t }).then(({ data: { id: s } }) => [s]),
+      onSuccess: (c, t) => o(t),
+      ...d
+    }
+  );
+}
+function Uo({
+  classes: o,
+  onSuccess: d,
+  useUploadFiles: f = mo,
+  uploadProps: c = {},
+  UploadListItemComponent: t = L,
+  UploadListItemProps: s = {},
+  tree: h = !1,
+  responseTimeout: g = 5e3,
+  UploadListFileComponent: v = L,
+  UploadListFileProps: z = {},
+  UploadListFolderComponent: N = Co,
+  UploadListFolderProps: E = {},
+  FileTreeComponent: S = Fo,
+  FileTreeProps: T = {},
+  UploadEditorComponent: W = vo,
+  UploadEditorProps: _ = {},
+  UploadCollectionPickerComponent: B = Ro,
+  UploadCollectionPickerProps: Q = {},
+  UploadCollectionDialogProps: V = {},
+  allowUploadToCollection: q = !0,
+  allowUpload: M = !0,
+  dropzoneProps: $ = {},
+  UploadButtonDisabledText: w = "Uploading",
+  UploadButtonText: G = "Upload",
+  UploadToCollectionButtonText: J = "Upload To Collection",
+  DragActiveText: K = "Drop files here",
+  DragInactiveText: X = "Drop files or click to open"
+}) {
+  const [n, m] = D(), [p, U] = D(!1), { onAddFiles: Y, onChangeMetadata: Z, onUpload: O, onRemoveFiles: oo, onRemoveFile: eo, files: u } = f(c), a = u.filter((e) => !e.progress), k = u.filter((e) => e.progress), j = (e) => () => {
+    e.includes(n) ? m() : n && e[0] < n && m(n - 1), oo(e)();
+  }, I = (e) => () => {
+    n === e && m(), eo(e)();
+  }, C = (e) => () => m((l) => l === e ? void 0 : e), { getRootProps: io, getInputProps: no, isDragActive: H } = ro({
+    onDrop: (e) => {
+      Y(
+        e.map(
+          (l) => Object.assign(l, {
+            preview: URL.createObjectURL(l)
+          })
+        )
+      );
+    },
+    ...$
+  }), P = to(
+    (e) => {
+      m(), U(!0), O(e).then((l) => {
+        U(!1), setTimeout(() => {
+          d && d(l);
+        }, g);
+      }).catch(() => {
+        U(!1);
+      });
+    },
+    [d, O, g]
+  ), x = a.length === 0 || p, [lo, b] = D(!1);
+  return /* @__PURE__ */ r("div", { className: o.root, children: [
+    /* @__PURE__ */ r("div", { className: o.dialogContentRoot, children: [
+      /* @__PURE__ */ r("div", { className: y(o.filesRoot, { [o.isEditing]: n !== void 0 }), children: [
+        /* @__PURE__ */ i("div", { className: o.dropzoneRoot, children: /* @__PURE__ */ r(
+          "div",
+          {
+            ...io(),
+            className: y(o.dropzoneInput, {
+              [o.dropzoneDrag]: H,
+              [o.dropzoneHasFiles]: u.length > 0
+            }),
+            children: [
+              /* @__PURE__ */ i("div", { className: o.dropzoneLabel, children: H ? K : X }),
+              /* @__PURE__ */ i("input", { ...no() })
+            ]
+          }
+        ) }),
+        a.length > 0 && (h ? /* @__PURE__ */ r(F, { children: [
+          /* @__PURE__ */ i("h3", { children: "Queue" }),
+          /* @__PURE__ */ i(
+            S,
+            {
+              files: a,
+              FileComponent: v,
+              FileProps: { isUploading: p, ...z },
+              FolderComponent: N,
+              FolderProps: E,
+              removeFiles: j,
+              onClickFile: C,
+              selected: n,
+              ...T
+            }
+          ),
+          /* @__PURE__ */ i(R, { className: o.divider })
+        ] }) : /* @__PURE__ */ r(F, { children: [
+          /* @__PURE__ */ r(A, { dense: !0, children: [
+            /* @__PURE__ */ i("h3", { children: "Queue" }),
+            a.map((e, l) => /* @__PURE__ */ i(
+              t,
+              {
+                file: e.file,
+                progress: e.progress,
+                onRemove: I(l),
+                onClick: C(l),
+                selected: n === l,
+                isUploading: p,
+                ...s
+              },
+              e.file.name
+            ))
+          ] }),
+          /* @__PURE__ */ i(R, { className: o.divider })
+        ] })),
+        k.length > 0 && (h ? /* @__PURE__ */ r(F, { children: [
+          /* @__PURE__ */ i("h3", { children: "Uploaded" }),
+          /* @__PURE__ */ i(
+            S,
+            {
+              files: k,
+              FileComponent: v,
+              FileProps: { isUploading: p, ...z },
+              FolderComponent: N,
+              FolderProps: E,
+              removeFiles: j,
+              onClickFile: C,
+              selected: n,
+              startIndex: a.length,
+              ...T
+            }
+          ),
+          /* @__PURE__ */ i(R, { className: o.divider })
+        ] }) : /* @__PURE__ */ r(F, { children: [
+          /* @__PURE__ */ r(A, { dense: !0, children: [
+            /* @__PURE__ */ i("h3", { children: "Uploaded" }),
+            k.map((e, l) => /* @__PURE__ */ i(
+              t,
+              {
+                file: e.file,
+                progress: e.progress,
+                onRemove: I(a.length + l),
+                onClick: C(a.length + l),
+                selected: n === a.length + l,
+                isUploading: p,
+                ...s
+              },
+              e.file.name
+            ))
+          ] }),
+          /* @__PURE__ */ i(R, { className: o.divider })
+        ] }))
+      ] }),
+      /* @__PURE__ */ i(
+        "div",
+        {
+          className: y(o.editorRoot, {
+            [o.isEditing]: n !== void 0,
+            [o.editorOpen]: n !== void 0
+          }),
+          children: n !== void 0 && /* @__PURE__ */ i(
+            W,
+            {
+              onChange: Z(n),
+              file: u[n].file,
+              metadata: u[n].metadata,
+              ..._
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ i(co, { children: /* @__PURE__ */ i(
+      fo,
+      {
+        options: [
+          ...M ? [
+            {
+              value: "upload",
+              label: p ? w : G,
+              onClick: (e) => {
+                e.preventDefault(), P();
+              },
+              disabled: x
+            }
+          ] : [],
+          ...q ? [
+            {
+              value: "upload-to-collection",
+              label: p ? w : J,
+              onClick: () => b(!0),
+              disabled: x
+            }
+          ] : []
+        ],
+        getOptionSelected: (e, l) => e.value === l.value
+      }
+    ) }),
+    /* @__PURE__ */ i(
+      so,
+      {
+        fullWidth: !0,
+        open: lo,
+        onClose: () => b(!1),
+        classes: { paper: o.uploadToCollectionDialog },
+        ...V,
+        children: /* @__PURE__ */ i(
+          B,
+          {
+            onSubmit: (e) => {
+              P({ collectionId: e }), b(!1);
+            },
+            onClose: () => b(!1),
+            ...Q
+          }
+        )
+      }
+    )
+  ] });
+}
+const Po = ao(bo, { name: "VdtUpload" })(Uo);
+export {
+  Po as default
+};

package/dist/es/upload/UploadEditor.js

@@ -0,0 +1,45 @@
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import { withStyles as u } from "@material-ui/core";
+import v from "./UploadForm.js";
+const h = (o) => ({
+  root: {
+    backgroundColor: o.palette.action.selected,
+    height: "100%",
+    padding: o.spacing(2)
+  },
+  title: {
+    ...o.typography.body1,
+    paddingLeft: o.spacing(2),
+    marginBottom: o.spacing(1),
+    fontStyle: "italic",
+    fontWeight: 600,
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    overflow: "hidden"
+  },
+  form: {
+    padding: o.spacing(2),
+    backgroundColor: o.palette.background.default
+  }
+});
+function w({
+  classes: o,
+  file: a,
+  metadata: n = {},
+  onChange: i,
+  UploadFormComponent: r = v,
+  UploadFormProps: d = {}
+}) {
+  const { name: l } = a, e = (c) => (p, s) => {
+    const { value: g } = p.target, f = { [c]: s || g };
+    i(f);
+  };
+  return /* @__PURE__ */ m("div", { className: o.root, children: [
+    /* @__PURE__ */ t("div", { className: o.title, children: l }),
+    /* @__PURE__ */ t("div", { className: o.form, children: /* @__PURE__ */ t(r, { values: n, onChange: e, ...d }) })
+  ] });
+}
+const C = u(h, { name: "VdtUploadEditor" })(w);
+export {
+  C as default
+};

package/dist/es/upload/UploadForm.js

@@ -0,0 +1,78 @@
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { withStyles as u, TextField as i } from "@material-ui/core";
+import { Autocomplete as s } from "@material-ui/lab";
+const p = (r) => ({
+  form: {
+    "& > *": {
+      marginTop: r.spacing(1.5),
+      marginBottom: r.spacing(1.5)
+    }
+  }
+});
+function m({ classes: r, onChange: n, values: t }) {
+  return /* @__PURE__ */ e("div", { className: r.root, children: /* @__PURE__ */ c("div", { className: r.form, children: [
+    /* @__PURE__ */ e(
+      i,
+      {
+        onChange: n("title"),
+        value: t.title,
+        label: "Title",
+        variant: "outlined",
+        required: !0,
+        fullWidth: !0,
+        InputLabelProps: {
+          shrink: !0
+        }
+      }
+    ),
+    /* @__PURE__ */ e(
+      i,
+      {
+        onChange: n("dsc"),
+        value: t.dsc,
+        label: "Description",
+        variant: "outlined",
+        rows: "8",
+        multiline: !0,
+        fullWidth: !0,
+        InputLabelProps: {
+          shrink: !0
+        }
+      }
+    ),
+    /* @__PURE__ */ e(
+      s,
+      {
+        onChange: n("tcd"),
+        value: Array.isArray(t.tcd) ? t.tcd : t.tcd ? [t.tcd] : [],
+        multiple: !0,
+        freeSolo: !0,
+        selectOnFocus: !0,
+        clearOnBlur: !0,
+        handleHomeEndKeys: !0,
+        options: [],
+        onInputChange: (o, l) => {
+          if (l.endsWith(",")) {
+            const [d] = l.split(","), a = [...Array.isArray(t.tcd) ? t.tcd : t.tcd ? [t.tcd] : [], d];
+            n("tcd")(o, a);
+          }
+        },
+        renderInput: (o) => /* @__PURE__ */ e(
+          i,
+          {
+            ...o,
+            variant: "outlined",
+            label: "Tags",
+            InputLabelProps: {
+              shrink: !0
+            }
+          }
+        )
+      }
+    )
+  ] }) });
+}
+const b = u(p, { name: "VdtUploadForm" })(m);
+export {
+  b as default
+};

package/dist/es/upload/UploadListFolder.js

@@ -0,0 +1,19 @@
+import { jsx as d } from "react/jsx-runtime";
+import a from "./UploadListItem.js";
+function u({ path: o, files: r, ...i }) {
+  const t = r.reduce((e, s) => e + s.file.size || 0, 0), p = r.reduce(
+    (e, s) => e + (s.progress && s.progress.transferedBytes || 0),
+    0
+  ), l = (r.some((e) => e.progress) || void 0) && {
+    transferedBytes: p,
+    totalBytes: t
+  }, m = {
+    size: t,
+    type: "collection",
+    name: o.split("/").pop()
+  };
+  return /* @__PURE__ */ d(a, { file: m, progress: l, ...i });
+}
+export {
+  u as default
+};