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

package/dist/es/item/ItemMetadataFieldRow.js

@@ -0,0 +1,81 @@
+import { jsxs as r, jsx as i } from "react/jsx-runtime";
+import t from "clsx";
+import { withStyles as m, TableRow as c, TableCell as d } from "@material-ui/core";
+import x from "../fields/Field.js";
+const f = (e) => ({
+  root: {
+    height: "42px",
+    paddingTop: "8px !important"
+  },
+  cell: {
+    borderBottom: "none",
+    fontSize: "14px"
+  },
+  labelCell: {
+    lineHeight: "20px",
+    padding: "10px 0"
+  },
+  fieldCell: {
+    "& .MuiInput-root": {
+      ...e.typography.body1,
+      "& .MuiInput-input": {
+        lineHeight: "20px",
+        height: "20px",
+        padding: "7px 0"
+      }
+    },
+    "& .MuiInputBase-multiline": {
+      padding: 0
+    }
+  },
+  field: {
+    marginTop: 0,
+    "& .MuiFormHelperText-root": {
+      display: "none"
+    },
+    "& .VdtSelectField-select": {
+      marginTop: 0
+    },
+    "&.VdtSelectField-root": {
+      height: "34px"
+    }
+  }
+});
+function h({
+  classes: e,
+  className: a,
+  name: l,
+  label: o,
+  labelText: p = () => o || l,
+  ...n
+}) {
+  return /* @__PURE__ */ r(c, { className: t(e.root, "VdtItemMetadataFieldRow-root", a), children: [
+    /* @__PURE__ */ i(
+      d,
+      {
+        className: t(e.cell, e.labelCell, "VdtItemMetadataFieldRow-labelCell"),
+        colSpan: 2,
+        children: p(l, o)
+      }
+    ),
+    /* @__PURE__ */ i(
+      d,
+      {
+        className: t(e.cell, e.fieldCell, "VdtItemMetadataFieldRow-fieldCell"),
+        colSpan: 3,
+        children: /* @__PURE__ */ i(
+          x,
+          {
+            name: l,
+            className: t(e.field, "VdtItemMetadataFieldRow-field"),
+            ...n
+          }
+        )
+      }
+    )
+  ] });
+}
+const I = m(f, { name: "VdtItemMetadataFieldRow" })(h);
+export {
+  I as default
+};

package/dist/es/item/ItemMetadataForm.js

@@ -0,0 +1,29 @@
+import { jsxs as u, jsx as t } from "react/jsx-runtime";
+import { FormSpy as d } from "react-final-form";
+import { withStyles as l, Box as s, Button as c } from "@material-ui/core";
+import { ItemMetadataFormTable as f } from "./ItemMetadataFormTable.js";
+function p({
+  fields: e = [],
+  groups: o = [],
+  handleSubmit: a,
+  handleFormSpy: r,
+  saveText: m = "Save",
+  ItemMetadataFormComponent: i = f,
+  ItemMetadataFormProps: n = {}
+}) {
+  return /* @__PURE__ */ u("form", { onSubmit: a, children: [
+    /* @__PURE__ */ t(i, { fields: e, groups: o, ...n }),
+    r && /* @__PURE__ */ t(
+      d,
+      {
+        subscription: { values: !0, invalid: !0, active: !0 },
+        onChange: r
+      }
+    ),
+    /* @__PURE__ */ t(s, { m: 2, children: /* @__PURE__ */ t(c, { fullWidth: !0, variant: "outlined", type: "submit", color: "primary", children: m }) })
+  ] });
+}
+const F = l({}, { name: "VdtItemMetadataForm" })(p);
+export {
+  F as default
+};

package/dist/es/item/ItemMetadataFormTable.js

@@ -0,0 +1,190 @@
+import { jsx as o, jsxs as F } from "react/jsx-runtime";
+import { useMemo as E } from "react";
+import d from "clsx";
+import { withStyles as h, Table as f, TableBody as R, TableRow as A, TableCell as b, Accordion as x, AccordionSummary as C, Typography as I, AccordionDetails as G } from "@material-ui/core";
+import { ExpandMore as M } from "@material-ui/icons";
+import w from "../fields/CheckboxField.js";
+import S from "../fields/CheckboxGroupField.js";
+import O from "../fields/RadioField.js";
+import g from "../fields/SelectField.js";
+import y from "../fields/TextField.js";
+import "../fields/SliderField.js";
+import L from "../fields/TagField.js";
+import "../fields/DateField.js";
+import X from "../fields/SwitchField.js";
+import N from "../fields/AutocompleteField.js";
+import P from "../fields/AutocompleteConstraintField.js";
+import V from "./ItemMetadataFieldRow.js";
+const t = {
+  AUTOCOMPLETE: "autocomplete",
+  SELECT: "select",
+  SWITCH: "switch",
+  CHECKBOX: "checkbox",
+  CHECKBOXGROUP: "checkboxGroup",
+  RADIO: "radio",
+  INTEGER: "integer",
+  FLOAT: "float",
+  LONG: "long",
+  TEXTAREA: "textArea",
+  TEXT: "text",
+  TAG: "tag"
+}, k = t.TEXT, H = (e, a) => {
+  switch (e) {
+    case t.AUTOCOMPLETE:
+      return a ? P : N;
+    case t.TAG:
+      return L;
+    case t.SELECT:
+      return g;
+    case t.SWITCH:
+      return X;
+    case t.CHECKBOX:
+      return w;
+    case t.CHECKBOXGROUP:
+      return S;
+    case t.RADIO:
+      return O;
+    case t.DATE:
+    case t.INTEGER:
+    case t.LONG:
+    case t.FLOAT:
+    case t.TEXTAREA:
+    case t.TEXT:
+    default:
+      return y;
+  }
+}, B = (e, a) => e === "boolean" && a === "checkbox" ? "checkbox" : ["integer", "long"].includes(e) ? "number" : e || k, D = ({ displayType: e, type: a, constraint: r }) => {
+  const i = H(e, r), n = B(a, e), c = e === t.TEXTAREA || void 0;
+  return { component: i, type: n, multiline: c };
+}, U = {
+  root: {
+    tableLayout: "fixed"
+  },
+  dividerCell: {
+    height: "20px"
+  }
+};
+function v({
+  classes: e,
+  className: a,
+  groupName: r,
+  fields: i = [],
+  groups: n = [],
+  getFieldProps: c = D
+}) {
+  const s = E(
+    () => n.map(({ name: l, fields: m, groups: T, ...u }) => /* @__PURE__ */ o(
+      Y,
+      {
+        name: r ? `${r}.${l}` : l,
+        fields: m,
+        groups: T,
+        getFieldProps: c,
+        ...u
+      },
+      l
+    )),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [n]
+  ), p = E(
+    () => i.map((l) => {
+      const { name: m, displayType: T, ...u } = l;
+      return /* @__PURE__ */ o(
+        V,
+        {
+          name: r ? `${r}.${m}` : m,
+          ...c(l),
+          ...u
+        },
+        m
+      );
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [i]
+  );
+  return /* @__PURE__ */ o(
+    f,
+    {
+      size: "small",
+      padding: "none",
+      className: d(e.root, "VdtItemMetadataFormTable-root", a),
+      children: /* @__PURE__ */ F(R, { children: [
+        p,
+        /* @__PURE__ */ o(A, { children: /* @__PURE__ */ o(
+          b,
+          {
+            className: d(e.dividerCell, "VdtItemMetadataFormTable-dividerCell"),
+            colSpan: 5
+          }
+        ) }),
+        s
+      ] })
+    }
+  );
+}
+const K = {
+  accordion: {
+    backgroundColor: "unset",
+    boxShadow: "unset"
+  },
+  summary: {
+    padding: 0,
+    "&.MuiAccordionSummary-root.Mui-expanded": {
+      minHeight: "56px"
+    },
+    "& .MuiAccordionSummary-content": {
+      marginTop: "5px",
+      marginBottom: "5px"
+    }
+  },
+  details: {
+    paddingTop: 0
+  }
+};
+function $({
+  classes: e,
+  className: a,
+  name: r,
+  label: i,
+  labelText: n = () => i || r,
+  fields: c,
+  groups: s,
+  getFieldProps: p
+}) {
+  return /* @__PURE__ */ o(A, { className: d(e.root, "VdtItemMetadataFieldGroupRow-root", a), children: /* @__PURE__ */ o(b, { colSpan: 5, children: /* @__PURE__ */ F(x, { className: d(e.accordion, "VdtItemMetadataFieldGroupRow-accordion"), children: [
+    /* @__PURE__ */ o(
+      C,
+      {
+        className: d(e.summary, "VdtItemMetadataFieldGroupRow-summary"),
+        expandIcon: /* @__PURE__ */ o(M, {}),
+        "aria-controls": "panel1a-content",
+        id: "panel1a-header",
+        children: /* @__PURE__ */ o(I, { className: d(e.label, "VdtItemMetadataFieldGroupRow-label"), children: n(r, i) })
+      }
+    ),
+    /* @__PURE__ */ o(
+      G,
+      {
+        className: d(e.details, "VdtItemMetadataFieldGroupRow-details"),
+        children: /* @__PURE__ */ o(
+          j,
+          {
+            groupName: r,
+            fields: c,
+            groups: s,
+            getFieldProps: p
+          }
+        )
+      }
+    )
+  ] }) }) });
+}
+const Y = h(K, {
+  name: "VdtItemMetadataFieldGroupRow"
+})($), j = h(U, { name: "VdtItemMetadataFormTable" })(
+  v
+);
+export {
+  Y as ItemMetadataFieldGroupRow,
+  j as ItemMetadataFormTable
+};

package/dist/es/item/ItemMetadataList.js

@@ -0,0 +1,64 @@
+import { jsxs as I, jsx as i } from "react/jsx-runtime";
+import c from "clsx";
+import { withStyles as l, List as L, Divider as M } from "@material-ui/core";
+import x from "./ItemMetadataListFieldGroupItem.js";
+import f from "./ItemMetadataListFieldItem.js";
+const v = () => ({
+  root: {
+    width: "100%",
+    "& .MuiDivider-root": {
+      marginTop: "10px",
+      marginBottom: "10px"
+    }
+  }
+});
+function h({
+  classes: r,
+  className: s,
+  fields: n = [],
+  groups: d = [],
+  showFieldName: m = !1,
+  showOptionLabel: p = !0,
+  formatValue: o,
+  ...a
+}) {
+  return /* @__PURE__ */ I(
+    L,
+    {
+      className: c(r.root, "VdtItemMetadataList-root", s),
+      size: "small",
+      padding: "none",
+      component: "div",
+      children: [
+        n.map(({ name: t, ...e }) => /* @__PURE__ */ i(
+          f,
+          {
+            name: t,
+            value: a[t],
+            showFieldName: m,
+            formatValue: o,
+            ...e
+          },
+          t
+        )),
+        /* @__PURE__ */ i(M, {}),
+        d.map(({ name: t, ...e }) => /* @__PURE__ */ i(
+          x,
+          {
+            name: t,
+            values: a[t] ? a[t] : {},
+            showFieldName: m,
+            showOptionLabel: p,
+            formatValue: o,
+            ...e
+          },
+          t
+        ))
+      ]
+    }
+  );
+}
+const z = l(v, { name: "VdtItemMetadataList" })(h);
+export {
+  z as default
+};

package/dist/es/item/ItemMetadataListFieldGroupItem.js

@@ -0,0 +1,107 @@
+import { jsxs as n, Fragment as $, jsx as i } from "react/jsx-runtime";
+import { useState as b } from "react";
+import s from "clsx";
+import { withStyles as h, ListItem as C, ListItemText as E, Collapse as V, List as j } from "@material-ui/core";
+import { ExpandLess as k, ExpandMore as S } from "@material-ui/icons";
+import T from "./ItemMetadataListFieldItem.js";
+const v = (e) => ({
+  root: {
+    padding: 0
+  },
+  label: {
+    flexBasis: 1,
+    margin: "2px",
+    "& > .MuiListItemText-primary": {
+      ...e.typography.body2
+    }
+  },
+  list: {
+    padding: 0,
+    paddingLeft: "1em"
+  }
+});
+function u({
+  classes: e,
+  className: p,
+  name: a,
+  label: c,
+  fields: L = [],
+  groups: x = [],
+  values: o,
+  showFieldName: r,
+  showOptionLabel: l,
+  formatValue: I,
+  defaultExpanded: f = !1,
+  ...M
+}) {
+  const [m, y] = b(f), F = () => {
+    y(!m);
+  };
+  return /* @__PURE__ */ n($, { children: [
+    /* @__PURE__ */ n(
+      C,
+      {
+        className: s(e.root, "VdtItemMetadataListFieldGroupItem-root", p),
+        button: !0,
+        onClick: F,
+        ...M,
+        children: [
+          /* @__PURE__ */ i(
+            E,
+            {
+              className: s(e.label, "VdtItemMetadataListFieldGroupItem-label"),
+              primary: c || a,
+              secondary: r && a
+            }
+          ),
+          m ? /* @__PURE__ */ i(k, {}) : /* @__PURE__ */ i(S, {})
+        ]
+      }
+    ),
+    /* @__PURE__ */ i(V, { in: m, timeout: "auto", unmountOnExit: !0, children: /* @__PURE__ */ n(
+      j,
+      {
+        component: "div",
+        className: s(e.list, "VdtItemMetadataListFieldGroupItem-list"),
+        children: [
+          L.map(({ name: t, ...d }) => /* @__PURE__ */ i(
+            T,
+            {
+              name: t,
+              value: o[t],
+              showFieldName: r,
+              showOptionLabel: l,
+              formatValue: I,
+              ...d
+            },
+            `${a}-${t}`
+          )),
+          x.map(
+            ({ name: t, fields: d, groups: G, ...g }) => /* @__PURE__ */ i(
+              u,
+              {
+                classes: e,
+                className: p,
+                name: t,
+                fields: d,
+                groups: G,
+                values: o[t] ? o[t] : {},
+                showFieldName: r,
+                showOptionLabel: l,
+                formatValue: I,
+                ...g
+              },
+              `${a}-${t}`
+            )
+          )
+        ]
+      }
+    ) })
+  ] });
+}
+const H = h(v, { name: "VdtItemMetadataListFieldGroupItem" })(
+  u
+);
+export {
+  H as default
+};

package/dist/es/item/ItemMetadataListFieldItem.js

@@ -0,0 +1,73 @@
+import { jsxs as f, jsx as d } from "react/jsx-runtime";
+import r from "clsx";
+import { withStyles as y, ListItem as L, ListItemText as o } from "@material-ui/core";
+const u = (t) => ({
+  root: {
+    padding: 0,
+    margin: "2px 0"
+  },
+  text: {
+    margin: 0,
+    "& > .MuiListItemText-primary": {
+      ...t.typography.body2
+    }
+  },
+  label: {
+    flexBasis: "30%",
+    marginBottom: "auto",
+    "& > .MuiListItemText-primary": {
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
+    }
+  },
+  value: {
+    flexBasis: "70%",
+    display: "flex",
+    alignItems: "flex-end",
+    "& > .MuiListItemText-primary": {
+      wordBreak: "break-all",
+      fontWeight: 600
+    },
+    "& > .MuiListItemText-secondary": {
+      marginLeft: "6px"
+    }
+  }
+});
+function M({
+  classes: t,
+  className: s,
+  name: l,
+  label: n,
+  value: e,
+  formatValue: x = (a) => a,
+  options: i,
+  showFieldName: I,
+  showOptionLabel: p = !0
+}) {
+  const a = i && i.some((m) => m.value === e) ? i.find((m) => m.value === e).label : void 0;
+  return /* @__PURE__ */ f(L, { className: r(t.root, "VdtItemMetadataListFieldItem-root", s), children: [
+    /* @__PURE__ */ d(
+      o,
+      {
+        className: r(t.text, t.label, "VdtItemMetadataListFieldItem-label"),
+        primary: n || l,
+        secondary: I && l
+      }
+    ),
+    /* @__PURE__ */ d(
+      o,
+      {
+        className: r(t.text, t.value, "VdtItemMetadataListFieldItem-value"),
+        primary: e !== void 0 ? x(e) : "",
+        secondary: p && a && `(${a})`
+      }
+    )
+  ] });
+}
+const h = y(u, { name: "VdtItemMetadataListFieldItem" })(
+  M
+);
+export {
+  h as default
+};

package/dist/es/item/ItemMetadataTab.js

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

package/dist/es/item/ItemMetadataTable.js

@@ -0,0 +1,51 @@
+import { jsx as o, jsxs as p } from "react/jsx-runtime";
+import { withStyles as d, TableCell as c, Table as b, TableBody as m, TableRow as s } from "@material-ui/core";
+const h = d((e) => ({
+  root: {
+    borderStyle: "none",
+    verticalAlign: "top",
+    paddingRight: "1em",
+    ...e.typography.body2
+  }
+}))(c), y = d((e) => ({
+  root: {
+    borderStyle: "none",
+    wordBreak: "break-word",
+    verticalAlign: "top",
+    ...e.typography.subtitle2
+  }
+}))(c);
+function v({
+  label: e,
+  value: t,
+  formatValue: l = (i) => i,
+  TableRowProps: r = {},
+  TableCellLabelProps: a = {},
+  TableCellValueProps: n = {}
+}) {
+  return /* @__PURE__ */ p(s, { component: "div", ...r, children: [
+    /* @__PURE__ */ o(h, { component: "div", ...a, children: e }),
+    /* @__PURE__ */ o(y, { component: "div", ...n, children: t !== void 0 ? l(t) : "" })
+  ] });
+}
+function g({
+  fields: e = [],
+  TableRowComponent: t = v,
+  TableRowProps: l = {},
+  ...r
+}) {
+  return /* @__PURE__ */ o(b, { size: "small", padding: "none", style: { width: "100%" }, component: "div", children: /* @__PURE__ */ o(m, { component: "div", children: e.map(({ label: a, value: n, ...i }) => /* @__PURE__ */ o(
+    t,
+    {
+      label: a,
+      value: r[n],
+      TableRowProps: l,
+      ...l,
+      ...i
+    },
+    n
+  )) }) });
+}
+export {
+  g as default
+};