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

package/dist/es/forms/LoginForm/LoginForm.js

@@ -0,0 +1,212 @@
+import { jsx as n, jsxs as y } from "react/jsx-runtime";
+import V from "clsx";
+import e from "prop-types";
+import { Field as a, Form as L } from "react-final-form";
+import { withStyles as p, Box as F, FormHelperText as M } from "@material-ui/core";
+import N from "../../fields/CheckboxField.js";
+import u from "../../fields/TextField.js";
+import W from "../SubmitButton.js";
+const A = (o = "", t = "Not a URL") => {
+  const r = /https?:\/\/[-a-zA-Z0-9@:%._+~#=]{2,256}\b([-a-zA-Z0-9@:%_+.~#?&//=]*)/gi, m = new RegExp(r);
+  return o.match(m) ? void 0 : t;
+}, x = p(
+  {},
+  { name: "VdtUrlField" }
+)(({ name: o = "serverUrl", label: t = "Vidispine API Server", FieldProps: r = {}, ...m }) => /* @__PURE__ */ n(
+  a,
+  {
+    name: o,
+    component: u,
+    type: "text",
+    label: t,
+    validate: A,
+    fullWidth: !0,
+    ...r,
+    ...m
+  }
+)), b = p(
+  {},
+  { name: "VdtUsernameField" }
+)(
+  ({
+    name: o = "userName",
+    label: t = "Username",
+    requiredText: r = "Required",
+    FieldProps: m = {},
+    ...s
+  }) => /* @__PURE__ */ n(
+    a,
+    {
+      name: o,
+      component: u,
+      type: "text",
+      label: t,
+      validate: (i) => i ? void 0 : r,
+      fullWidth: !0,
+      ...m,
+      ...s
+    }
+  )
+), h = p(
+  {},
+  { name: "VdtPasswordField" }
+)(
+  ({
+    name: o = "password",
+    label: t = "Password",
+    requiredText: r = "Required",
+    FieldProps: m = {},
+    ...s
+  }) => /* @__PURE__ */ n(
+    a,
+    {
+      name: o,
+      component: u,
+      type: "password",
+      label: t,
+      validate: (i) => i ? void 0 : r,
+      fullWidth: !0,
+      ...m,
+      ...s
+    }
+  )
+), P = p(
+  {},
+  { name: "VdtRememberMeField" }
+)(({ name: o = "rememberMe", label: t = "Remember Me", FieldProps: r = {}, ...m }) => /* @__PURE__ */ n(
+  a,
+  {
+    name: o,
+    label: t,
+    component: N,
+    type: "checkbox",
+    ...r,
+    ...m
+  }
+));
+function k({
+  UrlFieldComponent: o = x,
+  UrlFieldProps: t = {},
+  UsernameFieldComponent: r = b,
+  UsernameFieldProps: m = {},
+  PasswordFieldComponent: s = h,
+  PasswordFieldProps: i = {},
+  RememberMeFieldComponent: d = P,
+  RememberMeFieldProps: c = {},
+  FieldProps: l
+}) {
+  return /* @__PURE__ */ y(F, { children: [
+    o && /* @__PURE__ */ n(o, { FieldProps: l, ...t }),
+    r && /* @__PURE__ */ n(r, { FieldProps: l, ...m }),
+    s && /* @__PURE__ */ n(s, { FieldProps: l, ...i }),
+    d && /* @__PURE__ */ n(d, { FieldProps: l, ...c })
+  ] });
+}
+function q({ helperText: o, submitError: t }) {
+  return /* @__PURE__ */ n(F, { py: o || t ? 0 : 0.8, my: 1, children: (o || t) && /* @__PURE__ */ n(M, { error: !!t, children: t || o }) });
+}
+const z = p(
+  {},
+  { name: "VdtLoginFormButtons" }
+)(({ submitting: o, SubmitButtonProps: t = {}, loginText: r = "Login" }) => /* @__PURE__ */ n(F, { children: /* @__PURE__ */ n(W, { type: "submit", submitting: o, fullWidth: !0, ...t, children: r }) })), Q = () => ({
+  root: {}
+});
+function T({
+  classes: o,
+  className: t,
+  onSubmit: r,
+  helperText: m,
+  SubmitButtonProps: s,
+  FormProps: i,
+  FieldProps: d,
+  UrlFieldComponent: c,
+  UsernameFieldComponent: l,
+  PasswordFieldComponent: B,
+  RememberMeFieldComponent: C,
+  FormFieldsComponent: g,
+  FormFieldsProps: v,
+  FormTextComponent: U,
+  FormTextProps: j,
+  FormButtonsComponent: w,
+  FormButtonsProps: R
+}) {
+  return /* @__PURE__ */ n(
+    L,
+    {
+      className: V(o.root, "VdtLoginForm-root", t),
+      onSubmit: r,
+      ...i,
+      render: ({ handleSubmit: f, submitting: O, submitError: S }) => /* @__PURE__ */ y("form", { onSubmit: f, children: [
+        /* @__PURE__ */ n(
+          g,
+          {
+            FieldProps: d,
+            UrlFieldComponent: c,
+            UsernameFieldComponent: l,
+            PasswordFieldComponent: B,
+            RememberMeFieldComponent: C,
+            ...v
+          }
+        ),
+        /* @__PURE__ */ n(U, { helperText: m, submitError: S, ...j }),
+        /* @__PURE__ */ n(
+          w,
+          {
+            submitting: O,
+            handleSubmit: f,
+            SubmitButtonProps: s,
+            ...R
+          }
+        )
+      ] })
+    }
+  );
+}
+T.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.objectOf(e.string),
+  /**
+   * Override styles with className
+   */
+  className: e.string,
+  onSubmit: e.func,
+  helperText: e.string,
+  SubmitButtonProps: e.objectOf(e.any),
+  FormProps: e.objectOf(e.any),
+  FieldProps: e.objectOf(e.any),
+  UrlFieldComponent: e.elementType,
+  UsernameFieldComponent: e.elementType,
+  PasswordFieldComponent: e.elementType,
+  RememberMeFieldComponent: e.elementType,
+  FormFieldsComponent: e.elementType,
+  FormFieldsProps: e.objectOf(e.any),
+  FormTextComponent: e.elementType,
+  FormTextProps: e.objectOf(e.any),
+  FormButtonsComponent: e.elementType,
+  FormButtonsProps: e.objectOf(e.any)
+};
+T.defaultProps = {
+  className: void 0,
+  classes: {},
+  onSubmit: () => null,
+  helperText: void 0,
+  SubmitButtonProps: {},
+  FormProps: {},
+  FieldProps: {},
+  UrlFieldComponent: x,
+  UsernameFieldComponent: b,
+  PasswordFieldComponent: h,
+  RememberMeFieldComponent: P,
+  FormFieldsComponent: k,
+  FormFieldsProps: {},
+  FormTextComponent: q,
+  FormTextProps: {},
+  FormButtonsComponent: z,
+  FormButtonsProps: {}
+};
+export {
+  T as default,
+  Q as styles
+};

package/dist/es/forms/LoginForm/index.js

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

package/dist/es/forms/SubmitButton.js

@@ -0,0 +1,11 @@
+import { jsx as i, jsxs as s } from "react/jsx-runtime";
+import { Button as l, Box as e, CircularProgress as a } from "@material-ui/core";
+function u({ children: r, submitting: o = !1, disabled: t, ...n }) {
+  return /* @__PURE__ */ i(l, { ...n, disabled: t || o, children: /* @__PURE__ */ s(e, { position: "relative", children: [
+    /* @__PURE__ */ i(e, { position: "absolute", height: 1, width: 1, display: o ? "inherit" : "none", children: /* @__PURE__ */ i(a, { size: 24 }) }),
+    /* @__PURE__ */ i(e, { children: r })
+  ] }) });
+}
+export {
+  u as default
+};

package/dist/es/forms/onGetToken.js

@@ -0,0 +1,17 @@
+import { FORM_ERROR as o } from "final-form";
+import { utils as f, user as m } from "@vidispine/vdt-api";
+const l = async ({ userName: t, password: n, serverUrl: s }) => {
+  const a = { seconds: 2592e3, autoRefresh: "true" }, c = { password: n, username: t };
+  s && (f.defaultClient.defaults.baseURL = s);
+  try {
+    const { data: e } = await m.getToken({ userName: t, queryParams: a, headers: c });
+    return e;
+  } catch (e) {
+    const { response: u = {}, message: i = "Unknown error." } = e;
+    let r = { [o]: i };
+    throw u.status === 401 && (r = { [o]: "Incorrect Username/Password" }), r;
+  }
+};
+export {
+  l as default
+};

package/dist/es/general/DragScroll/DragScroll.js

@@ -0,0 +1,96 @@
+import { jsx as H } from "react/jsx-runtime";
+import { useRef as P, useState as s, useEffect as d } from "react";
+import h from "clsx";
+import r from "prop-types";
+const S = () => ({
+  root: {
+    overflow: "auto",
+    "&::-webkit-scrollbar": {
+      display: "none"
+    }
+  },
+  scrolling: {
+    "& *": {
+      userSelect: "none",
+      cursor: "grabbing"
+    }
+  },
+  grab: {
+    cursor: "grab"
+  }
+}), m = (l) => {
+  const o = l.current;
+  return o && (o.offsetHeight < o.scrollHeight || o.offsetWidth < o.scrollWidth);
+};
+function v({ className: l, classes: o, children: w }) {
+  const t = P(), [n, u] = s(null), [f, p] = s(!1), [c, a] = s(!1), [i, D] = s(null);
+  d(() => {
+    const e = () => p(m(t));
+    return window.addEventListener("resize", e), () => {
+      window.removeEventListener("resize", e);
+    };
+  }, []), d(
+    () => () => {
+      i && clearTimeout(i);
+    },
+    [i]
+  );
+  const y = (e) => {
+    a(!1), f && (u({
+      left: t.current.scrollLeft,
+      top: t.current.scrollTop,
+      x: e.clientX,
+      y: e.clientY
+    }), e.preventDefault(), e.stopPropagation());
+  }, T = (e) => {
+    if (n) {
+      a(!0);
+      const b = e.clientX - n.x, C = e.clientY - n.y;
+      t.current.scrollTop = n.top - C, t.current.scrollLeft = n.left - b;
+    }
+  }, g = (e) => {
+    D(setTimeout(() => a(!1))), u(null), e.preventDefault(), e.stopPropagation();
+  };
+  return /* @__PURE__ */ H(
+    "div",
+    {
+      onMouseDownCapture: y,
+      onMouseUpCapture: g,
+      onMouseLeave: g,
+      onMouseMove: T,
+      onClickCapture: (e) => {
+        c && (e.preventDefault(), e.stopPropagation());
+      },
+      ref: (e) => {
+        t.current = e, p(m(t));
+      },
+      className: h(o.root, "VdtDragScroll-root", l, {
+        [o.grab]: f && !c,
+        [o.scrolling]: c
+      }),
+      children: w
+    }
+  );
+}
+v.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: r.objectOf(r.string),
+  /**
+   * Override styles with className
+   */
+  className: r.string,
+  /**
+   * Events wrapped in the `DragScroll`
+   */
+  children: r.oneOfType([r.arrayOf(r.element), r.element]).isRequired
+};
+v.defaultProps = {
+  className: void 0,
+  classes: {}
+};
+export {
+  v as default,
+  S as styles
+};

package/dist/es/general/DragScroll/index.js

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

package/dist/es/general/ImageCollage/ImageCollage.js

@@ -0,0 +1,110 @@
+import { jsx as h } from "react/jsx-runtime";
+import c from "clsx";
+import t from "prop-types";
+const O = {
+  root: {
+    display: "flex",
+    flexWrap: "wrap",
+    pointerEvents: "none",
+    width: "inherit",
+    height: "inherit"
+  },
+  image: {
+    objectFit: "cover",
+    // Left align if multiple images
+    "&:last-child:not(:first-child)": {
+      marginRight: "auto"
+    }
+  },
+  lastSingleStretched: {
+    // Full width if last row has single image
+    "&:last-child:not(:first-child)": {
+      width: "100% !important"
+    }
+  },
+  notStretchSingle: {
+    // Do not set full width or height for single image
+    "&:last-child&:first-child": {
+      objectFit: "contain"
+    }
+  }
+};
+function m({
+  className: i,
+  classes: e,
+  urls: n,
+  maxImages: r,
+  maxColumns: a,
+  showSingleStretched: g,
+  showLastSingleStretched: d,
+  onError: f
+}) {
+  if (!n.length || r < 0 || a < 0)
+    return null;
+  const o = Math.min(r, n.length), s = Math.min(a, o), u = `${100 / Math.ceil(o / s)}%`, S = `${100 / Math.max(Math.min(a, o), 1)}%`, p = o % s === 1;
+  return /* @__PURE__ */ h("div", { className: c(i, e.root, "VdtImageCollage-root"), children: n.slice(0, r).map((l) => /* @__PURE__ */ h(
+    "img",
+    {
+      className: c({
+        [e.image]: !0,
+        "VdtImageCollage-image": !0,
+        [e.notStretchSingle]: !g,
+        [e.lastSingleStretched]: d && p
+      }),
+      src: l,
+      style: { height: u, width: S },
+      onError: f,
+      alt: ""
+    },
+    l
+  )) });
+}
+m.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: t.objectOf(t.string),
+  /**
+   * Override styles with className
+   */
+  className: t.string,
+  /**
+   * Image urls to show.
+   */
+  urls: t.arrayOf(t.string),
+  /**
+   * Max amount of columns to display
+   */
+  maxColumns: t.number,
+  /**
+   * Max amount of images to display
+   */
+  maxImages: t.number,
+  /**
+   * Whether to stretch full width or follow height for single image
+   */
+  showSingleStretched: t.bool,
+  /**
+   * Whether to stretch full width or follow height for last (single) image
+   */
+  showLastSingleStretched: t.bool,
+  /**
+   * Callback for error
+   */
+  onError: t.func
+};
+m.defaultProps = {
+  className: void 0,
+  classes: {},
+  urls: [],
+  maxColumns: 2,
+  maxImages: 4,
+  showSingleStretched: !0,
+  showLastSingleStretched: !0,
+  // eslint-disable-next-line no-console
+  onError: (i) => console.warn(i)
+};
+export {
+  m as default,
+  O as styles
+};

package/dist/es/general/ImageCollage/index.js

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

package/dist/es/general/MimeTypeIcon/MimeTypeIcon.js

@@ -0,0 +1,57 @@
+import { jsx as P } from "react/jsx-runtime";
+import g from "clsx";
+import e from "prop-types";
+import { Audiotrack as c, Movie as l, Image as i, InsertDriveFile as r, NoteAdd as a, Folder as I } from "@material-ui/icons";
+const u = "audio", T = "video", v = "image", w = "collection", y = "file", F = "placeholder", N = {};
+function f({
+  className: p,
+  classes: d,
+  mimeType: o,
+  audioIcon: E = c,
+  videoIcon: m = l,
+  imageIcon: L = i,
+  fileIcon: s = r,
+  placeholderIcon: n = a,
+  collectionIcon: C = I,
+  ...M
+}) {
+  let t = s;
+  return !o || typeof o != "string" ? t = n : o.toLowerCase().startsWith(u) ? t = E : o.toLowerCase().startsWith(T) ? t = m : o.toLowerCase().startsWith(v) ? t = L : o.toLowerCase() === w ? t = C : o.toLowerCase() === y ? t = s : o.toLowerCase() === F && (t = n), /* @__PURE__ */ P(t, { className: g(p, d.root), ...M });
+}
+f.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.objectOf(e.string),
+  /**
+   * Override styles with className
+   */
+  className: e.string,
+  /** Options: `audio`, `video`, `image`, `collection`, `file`, `placeholder`
+   *
+   * - `file` is shown if mimeType is string but not any of the above mentioned options
+   * - `placeholder` is shown if mimetype is undefined or not a string
+   */
+  mimeType: e.string,
+  audioIcon: e.elementType,
+  videoIcon: e.elementType,
+  imageIcon: e.elementType,
+  fileIcon: e.elementType,
+  placeholderIcon: e.elementType,
+  collectionIcon: e.elementType
+};
+f.defaultProps = {
+  className: void 0,
+  classes: {},
+  mimeType: void 0,
+  audioIcon: c,
+  videoIcon: l,
+  imageIcon: i,
+  fileIcon: r,
+  placeholderIcon: a,
+  collectionIcon: I
+};
+export {
+  f as default,
+  N as styles
+};

package/dist/es/general/MimeTypeIcon/index.js

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

package/dist/es/general/SelectedToolbar/SelectedToolbar.js

@@ -0,0 +1,61 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import D from "clsx";
+import t from "prop-types";
+import { Collapse as L, Toolbar as u, Grid as o, Typography as O, Tooltip as r, IconButton as i } from "@material-ui/core";
+import { Delete as f, GetApp as C, Add as R, Close as T } from "@material-ui/icons";
+const s = {
+  DELETE: "DELETE",
+  DOWNLOAD: "DOWNLOAD",
+  ADD_TO_LIBRARY: "ADD_TO_LIBRARY",
+  SHARE_EMAIL: "SHARE_EMAIL",
+  SHARE_LINK: "SHARE_LINK",
+  SHARE_FACEBOOK: "SHARE_FACEBOOK"
+}, g = (l) => ({
+  root: {
+    color: l.palette.common.white,
+    backgroundColor: l.palette.common.black
+  }
+});
+function A({
+  classes: l,
+  className: m,
+  selected: n,
+  onClear: h,
+  selectedLabel: p,
+  onClickAction: c
+}) {
+  const d = (E) => () => {
+    c && c(E, n);
+  };
+  return /* @__PURE__ */ e(L, { in: n.length > 0, children: /* @__PURE__ */ e(u, { className: D(l.root, m), children: /* @__PURE__ */ a(o, { container: !0, justifyContent: "space-between", alignItems: "center", children: [
+    /* @__PURE__ */ e(o, { item: !0, children: /* @__PURE__ */ e(O, { children: `${n.length} ${p || ""} Selected` }) }),
+    /* @__PURE__ */ e(o, { item: !0, children: /* @__PURE__ */ a(o, { container: !0, alignItems: "center", children: [
+      c && /* @__PURE__ */ a(o, { item: !0, children: [
+        /* @__PURE__ */ e(r, { title: "Delete Selected", children: /* @__PURE__ */ e(i, { onClick: d(s.DELETE), color: "inherit", children: /* @__PURE__ */ e(f, {}) }) }),
+        /* @__PURE__ */ e(r, { title: "Download Selected", children: /* @__PURE__ */ e(i, { onClick: d(s.DOWNLOAD), color: "inherit", children: /* @__PURE__ */ e(C, {}) }) }),
+        /* @__PURE__ */ e(r, { title: "Add to Library", children: /* @__PURE__ */ e(i, { onClick: d(s.ADD_TO_LIBRARY), color: "inherit", children: /* @__PURE__ */ e(R, {}) }) })
+      ] }),
+      h && /* @__PURE__ */ e(r, { title: "Clear Selection", children: /* @__PURE__ */ e(i, { onClick: h, color: "inherit", children: /* @__PURE__ */ e(T, {}) }) })
+    ] }) })
+  ] }) }) });
+}
+A.propTypes = {
+  selected: t.arrayOf(t.any),
+  selectedLabel: t.string,
+  onClear: t.func,
+  onClickAction: t.func,
+  className: t.string,
+  classes: t.objectOf(t.any).isRequired
+};
+A.defaultProps = {
+  selected: [],
+  selectedLabel: void 0,
+  onClickAction: void 0,
+  onClear: void 0,
+  className: void 0
+};
+export {
+  s as actions,
+  A as default,
+  g as styles
+};

package/dist/es/general/SelectedToolbar/index.js

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

package/dist/es/group/CreateGroupDialog/CreateGroupDialog.js

@@ -0,0 +1,77 @@
+import { jsxs as G, jsx as p } from "react/jsx-runtime";
+import { useMemo as m } from "react";
+import N from "clsx";
+import o from "prop-types";
+import { DialogTitle as x, DialogContent as L } from "@material-ui/core";
+import u from "@vidispine/proptypes";
+import P from "./components/CreateGroupForm.js";
+const V = () => ({
+  root: {},
+  DialogTitle: {},
+  DialogContent: {}
+});
+function c({
+  classes: t,
+  className: g,
+  groupListType: a,
+  userListType: n,
+  onClose: f,
+  onSubmit: d,
+  titleText: l,
+  CreateGroupFormProps: C
+}) {
+  const [T, y] = m(() => {
+    const { group: s = [] } = a;
+    return s.reduce(
+      ([r, e], i) => i.role ? [[...r, i], e] : [r, [...e, i]],
+      [[], []]
+    ).map((r) => r.map((e) => e.groupName));
+  }, [a]), D = m(() => {
+    const { user: s = [] } = n;
+    return s.map((r) => r.userName);
+  }, [n]);
+  return /* @__PURE__ */ G("div", { className: N(t.root, "VdtCreateGroupDialog-root", g), children: [
+    l && /* @__PURE__ */ p(x, { className: t.DialogTitle, children: l }),
+    /* @__PURE__ */ p(L, { className: t.DialogContent, children: /* @__PURE__ */ p(
+      P,
+      {
+        onSubmit: d,
+        onCancel: f,
+        users: D,
+        roles: T,
+        groups: y,
+        ...C
+      }
+    ) })
+  ] });
+}
+c.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.objectOf(o.string),
+  /**
+   * Override styles with className
+   */
+  className: o.string,
+  titleText: o.string,
+  onClose: o.func,
+  onSubmit: o.func,
+  groupListType: u.GroupListType,
+  userListType: u.UserListType,
+  CreateGroupFormProps: o.objectOf(o.any)
+};
+c.defaultProps = {
+  classes: {},
+  className: void 0,
+  titleText: "Create Group",
+  onClose: void 0,
+  onSubmit: void 0,
+  groupListType: {},
+  userListType: {},
+  CreateGroupFormProps: {}
+};
+export {
+  c as default,
+  V as styles
+};