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

package/dist/es/fieldgroup/FieldIcon.js

@@ -0,0 +1,32 @@
+import { jsx as t } from "react/jsx-runtime";
+import { withStyles as r } from "@material-ui/core";
+import { Today as l, FormatListNumbered as a, LooksOne as s, Filter9Plus as c, TextFields as m, Assignment as d, ThumbsUpDown as g, Schedule as p } from "@material-ui/icons";
+const u = {
+  iconContainer: {
+    width: "40px",
+    height: "40px",
+    backgroundColor: "rgba(0, 0, 0, 0.10)",
+    float: "left"
+  },
+  iconStyle: {
+    marginTop: 8,
+    marginLeft: 8
+  }
+}, f = {
+  date: l,
+  float: a,
+  integer: s,
+  long: c,
+  string: m,
+  "string-exact": d,
+  boolean: g,
+  timeCode: p
+};
+function h({ fieldType: n, classes: o, icons: e = f }) {
+  const { [n]: i = null } = e;
+  return /* @__PURE__ */ t("div", { className: o.iconContainer, children: /* @__PURE__ */ t(i, { className: o.iconStyle }) });
+}
+const b = r(u, { name: "VdtFieldGroupIcon" })(h);
+export {
+  b as default
+};

package/dist/es/fieldgroup/MyField.js

@@ -0,0 +1,97 @@
+import { jsxs as k, jsx as t } from "react/jsx-runtime";
+import { withStyles as S, emphasize as C, Card as I, IconButton as p } from "@material-ui/core";
+import { Edit as L, Delete as T } from "@material-ui/icons";
+import z from "./FieldIcon.js";
+const N = (e) => ({
+  fieldTitle: {
+    lineHeight: "40px",
+    marginLeft: 10,
+    width: "30%"
+  },
+  fieldInfo: {
+    lineHeight: "40px",
+    marginLeft: 10,
+    width: "60%"
+  },
+  item: {
+    backgroundColor: e.palette.background.paper,
+    boxSizing: "border-box",
+    fontSize: "14px",
+    userSelect: "none",
+    display: "flex",
+    justifyContent: "left",
+    alignItems: "center",
+    height: "40px"
+  },
+  activeItem: {
+    backgroundColor: C(e.palette.background.paper, 0.1),
+    boxSizing: "border-box",
+    fontSize: "14px",
+    userSelect: "none",
+    display: "flex",
+    justifyContent: "left",
+    alignItems: "center",
+    height: "40px"
+  },
+  delete: {
+    marginLeft: "auto"
+  },
+  edit: {
+    marginLeft: ""
+  }
+});
+function w({ draggableStyle: e, virtualStyle: l, isDragging: o }) {
+  const n = {
+    ...l,
+    ...e
+  }, a = 8;
+  return {
+    ...n,
+    height: 40,
+    width: o ? e.width : `calc(${n.width} - ${a * 2}px)`,
+    marginBottom: a
+  };
+}
+const P = "-", D = "-";
+function F({
+  classes: e,
+  provided: l,
+  item: o,
+  style: n,
+  isDragging: a,
+  setSelectedItem: r = () => null,
+  openEditor: f,
+  openDeleteDialog: m
+}) {
+  const { name: d, data: s = [], type: g } = o, { value: y } = s.find((i) => i.key === "label") || {}, u = y || P, { value: h } = s.find((i) => i.key === "displayType") || {}, b = h || D, c = () => {
+    r(d), f();
+  }, x = (i) => {
+    i.stopPropagation(), r(d), m();
+  };
+  return /* @__PURE__ */ k(
+    I,
+    {
+      ...l.draggableProps,
+      ...l.dragHandleProps,
+      ref: l.innerRef,
+      style: w({
+        draggableStyle: l.draggableProps.style,
+        virtualStyle: n,
+        isDragging: a
+      }),
+      className: e.item,
+      onClick: c,
+      children: [
+        /* @__PURE__ */ t(z, { fieldType: g }),
+        /* @__PURE__ */ t("span", { className: e.fieldTitle, children: d }),
+        /* @__PURE__ */ t("span", { className: e.fieldInfo, children: `Label: ${u} | Display Type: ${b}` }),
+        /* @__PURE__ */ t(p, { "aria-label": "delete", className: e.edit, onClick: c, children: /* @__PURE__ */ t(L, { fontSize: "small" }) }),
+        /* @__PURE__ */ t(p, { "aria-label": "delete", className: e.delete, onClick: x, children: /* @__PURE__ */ t(T, { fontSize: "small" }) })
+      ]
+    }
+  );
+}
+const H = S(N, { name: "VdtFieldGroupMyField" })(F);
+export {
+  H as default
+};

package/dist/es/fieldgroup/MyFieldList.js

@@ -0,0 +1,55 @@
+import { jsx as i, jsxs as h } from "react/jsx-runtime";
+import { Droppable as u, Draggable as y } from "react-beautiful-dnd";
+import { withStyles as b } from "@material-ui/core";
+import a from "./MyField.js";
+const F = {
+  droppable: {
+    height: 600
+  }
+};
+function x({
+  classes: d,
+  items: l,
+  setSelectedItem: n,
+  droppableId: t,
+  selectedItem: p,
+  openEditor: s,
+  onDelete: g,
+  onUpdateFieldGroup: m,
+  openDeleteDialog: c
+}) {
+  return /* @__PURE__ */ i(
+    u,
+    {
+      droppableId: t,
+      renderClone: (r, e, o) => /* @__PURE__ */ i(
+        a,
+        {
+          provided: r,
+          isDragging: e.isDragging,
+          item: l[o.source.index]
+        }
+      ),
+      children: (r) => /* @__PURE__ */ h("div", { ref: r.innerRef, className: d.droppable, children: [
+        l.map((e, o) => /* @__PURE__ */ i(y, { draggableId: e.name, index: o, children: (f) => /* @__PURE__ */ i(
+          a,
+          {
+            provided: f,
+            item: e,
+            setSelectedItem: n,
+            selectedItem: p,
+            openEditor: s,
+            onDelete: g,
+            onUpdateGroup: m,
+            openDeleteDialog: c
+          }
+        ) }, e.name)),
+        r.placeholder
+      ] })
+    }
+  );
+}
+const G = b(F, { name: "VdtFieldGroupMyFieldList" })(x);
+export {
+  G as default
+};

package/dist/es/fields/AutocompleteConstraintField.js

@@ -0,0 +1,39 @@
+import { jsx as w } from "react/jsx-runtime";
+import { forwardRef as F, useState as f, useRef as l, useEffect as L } from "react";
+import { withStyles as g } from "@material-ui/core";
+import { metadatafield as A } from "@vidispine/vdt-api";
+import R from "./AutocompleteField.js";
+const x = async ({ name: a, parentField: t, parentValue: e }) => {
+  if (t && !e)
+    return Promise.resolve([]);
+  const o = {
+    constraint: e ? [{ field: t, value: e }] : []
+  }, { data: { value: n = [] } = {} } = await A.getMetadataFieldAllowedValues({
+    fieldName: a,
+    metadataFieldValueConstraintListDocument: o
+  });
+  return n.map(({ value: s }) => s);
+}, P = F(
+  ({
+    options: a = [],
+    getOptionsAsync: t = x,
+    parentField: e,
+    parentValue: o,
+    constraint: n,
+    input: s,
+    ...d
+  }, u) => {
+    const { name: i } = s, [C, r] = f(!!t), [h, p] = f(a), c = l(o), m = l(s.onChange);
+    return L(() => {
+      t && (r(!0), t({ name: i, parentField: e, parentValue: o, constraint: n }).then((v) => {
+        r(!1), p(v);
+      }).catch(() => r(!1)), c.current !== o && (m.current && m.current(""), c.current = o));
+    }, [t, i, e, o, n]), /* @__PURE__ */ w(R, { ref: u, input: s, options: h, loading: C, ...d });
+  }
+), G = g(
+  {},
+  { name: "VdtAutocompleteConstraintField" }
+)(P);
+export {
+  G as default
+};

package/dist/es/fields/AutocompleteField.js

@@ -0,0 +1,71 @@
+import { jsx as l, jsxs as j, Fragment as G } from "react/jsx-runtime";
+import { withStyles as P, CircularProgress as O } from "@material-ui/core";
+import { Autocomplete as S } from "@material-ui/lab";
+import T from "./TextField.js";
+const v = () => {
+}, z = (e) => e.label || e, E = (e, t) => {
+  const { value: o = e } = e, { value: n = t } = t;
+  return n === o;
+}, H = ({ value: e, multiple: t }) => t && !Array.isArray(e) ? [e] : !t && Array.isArray(e) ? e.join(", ") : e;
+function L({
+  input: e = {},
+  meta: t = {},
+  helperText: o = " ",
+  label: n,
+  loading: c,
+  options: m = [],
+  noOptionsText: u,
+  getOptionLabel: i = z,
+  getOptionSelected: a = E,
+  getValue: d = H,
+  FormControlProps: p,
+  clearOnBlur: f = !0,
+  size: A = "small",
+  FormHelperTextProps: $,
+  ...h
+}) {
+  const { name: y, multiple: F } = e, g = d(e), { touched: x, error: C, submitError: I } = t;
+  return /* @__PURE__ */ l(
+    S,
+    {
+      onChange: (r, s) => {
+        if (!s)
+          return e.onChange(null);
+        const { value: b = s } = s;
+        return e.onChange(b);
+      },
+      options: m,
+      renderInput: (r) => /* @__PURE__ */ l(
+        T,
+        {
+          label: n,
+          input: { name: y },
+          meta: { touched: x, error: C, submitError: I },
+          helperText: o,
+          FormControlProps: p,
+          ...r,
+          InputProps: {
+            ...r.InputProps,
+            endAdornment: /* @__PURE__ */ j(G, { children: [
+              c ? /* @__PURE__ */ l(O, { color: "inherit", size: 20 }) : null,
+              r.InputProps.endAdornment
+            ] })
+          }
+        }
+      ),
+      loading: c,
+      value: g,
+      getOptionLabel: i,
+      getOptionSelected: a,
+      noOptionsText: u,
+      multiple: F,
+      clearOnBlur: f,
+      size: A,
+      ...h
+    }
+  );
+}
+const K = P(v, { name: "VdtAutocompleteField" })(L);
+export {
+  K as default
+};

package/dist/es/fields/CheckboxField.js

@@ -0,0 +1,64 @@
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import o from "clsx";
+import { withStyles as s, FormControl as F, FormControlLabel as f, Checkbox as V, FormHelperText as u } from "@material-ui/core";
+const L = (t) => ({
+  root: {
+    marginTop: t.spacing(1),
+    width: "100%"
+  }
+});
+function N({
+  input: { checked: t, name: m, onChange: d, ...i } = {},
+  meta: { touched: n, error: l, submitError: c } = {},
+  label: x,
+  classes: e,
+  className: a,
+  FormControlProps: h = {},
+  FormControlLabelProps: b = {},
+  FormControlHelperTextProps: C = {},
+  ...k
+}) {
+  return /* @__PURE__ */ p(
+    F,
+    {
+      error: (l || c) && n,
+      hiddenLabel: !0,
+      className: o(e.root, "VdtCheckboxField-root", a),
+      ...h,
+      children: [
+        /* @__PURE__ */ r(
+          f,
+          {
+            label: x,
+            control: /* @__PURE__ */ r(
+              V,
+              {
+                ...k,
+                name: m,
+                inputProps: i,
+                onChange: d,
+                checked: t,
+                className: o(e.checkbox, "VdtCheckboxField-checkbox")
+              }
+            ),
+            className: o(e.formControlLabel, "VdtCheckboxField-formControlLabel"),
+            ...b
+          }
+        ),
+        /* @__PURE__ */ r(
+          u,
+          {
+            margin: "dense",
+            className: o(e.formHelperText, "VdtCheckboxField-formHelperText"),
+            ...C,
+            children: l || c
+          }
+        )
+      ]
+    }
+  );
+}
+const j = s(L, { name: "VdtCheckboxField" })(N);
+export {
+  j as default
+};

package/dist/es/fields/CheckboxGroupField.js

@@ -0,0 +1,100 @@
+import { jsxs as w, jsx as n } from "react/jsx-runtime";
+import { useState as y, useEffect as O } from "react";
+import l from "clsx";
+import { withStyles as S, FormControl as D, FormGroup as q, Checkbox as z, FormHelperText as B, FormControlLabel as E, FormLabel as I } from "@material-ui/core";
+const J = (e) => ({
+  root: {
+    marginTop: e.spacing(2),
+    width: "100%"
+  }
+});
+function K({ label: e, ...h }) {
+  return /* @__PURE__ */ n(I, { component: "legend", ...h, children: e });
+}
+function M({
+  input: { value: e, name: h, onChange: f, ...k } = {},
+  meta: { touched: C, error: u, submitError: s } = {},
+  options: a = [],
+  label: F,
+  classes: t,
+  className: G,
+  selectAllValue: b,
+  FormControlProps: g = {},
+  FormLabelComponent: L = K,
+  FormLabelProps: N = {},
+  FormGroupProps: V = {},
+  FormControlLabelProps: T = {},
+  CheckboxProps: H = {},
+  FormHelperTextProps: R = {},
+  FormControlLabelComponent: $ = E
+}) {
+  const [i, p] = y([]), j = (r) => {
+    const { value: o } = r.target, d = !e.includes(o), x = (c) => b ? o === b ? d ? a.map((m) => m.value) : [] : d ? [...c, o] : c.filter((m) => ![b, o].includes(m)) : d ? [...c, o] : c.filter((m) => o !== m);
+    f(x(i)), p((c) => x(c));
+  };
+  return O(() => {
+    (!e || !e.length) && i.length > 0 ? (f([]), p(() => [])) : e && p(() => e);
+  }, [i.length, e]), /* @__PURE__ */ w(
+    D,
+    {
+      component: "fieldset",
+      error: (u || s) && C,
+      className: l(t.root, "VdtCheckboxGroupField-root", G),
+      ...g,
+      children: [
+        /* @__PURE__ */ n(
+          L,
+          {
+            className: l(t.formLabel, "VdtCheckboxGroupField-formLabel"),
+            label: F,
+            options: a,
+            onChange: f,
+            ...N
+          }
+        ),
+        /* @__PURE__ */ n(
+          q,
+          {
+            name: h,
+            onChange: j,
+            className: l(t.formGroup, "VdtCheckboxGroupField-formGroup"),
+            ...V,
+            children: a.map(({ value: r, label: o, ...d }) => /* @__PURE__ */ n(
+              $,
+              {
+                label: o,
+                control: /* @__PURE__ */ n(
+                  z,
+                  {
+                    name: r,
+                    value: r,
+                    inputProps: k,
+                    checked: i.includes(r),
+                    className: l(t.checkbox, "VdtCheckboxGroupField-checkbox"),
+                    ...H
+                  }
+                ),
+                className: l(t.formControlLabel, "VdtCheckboxGroupField-formControlLabel"),
+                ...T,
+                ...d
+              },
+              `${h}-${r}`
+            ))
+          }
+        ),
+        /* @__PURE__ */ n(
+          B,
+          {
+            className: l(t.formHelperText, "VdtCheckboxGroupField-formHelperText"),
+            ...R,
+            children: u || s
+          }
+        )
+      ]
+    }
+  );
+}
+const X = S(J, { name: "VdtCheckboxGroupField" })(M);
+export {
+  X as default
+};

package/dist/es/fields/DateField.js

@@ -0,0 +1,55 @@
+import { jsx as l } from "react/jsx-runtime";
+import n from "clsx";
+import { withStyles as D, FormControl as k, TextField as y } from "@material-ui/core";
+const w = (t) => ({
+  root: {
+    marginTop: t.spacing(2),
+    width: "100%"
+  },
+  date: {
+    "& ::-webkit-calendar-picker-indicator": {
+      // Make date-icon white for dark theme
+      filter: t.palette.type === "dark" && "invert(1)"
+    }
+  }
+});
+function T({
+  input: { value: t, name: o, onChange: p } = {},
+  meta: { touched: i, error: e, submitError: a } = {},
+  label: r,
+  helperText: s,
+  dateType: c = "date",
+  classes: d,
+  className: m,
+  FormControlProps: F = {},
+  InputLabelProps: f = {},
+  ...x
+}) {
+  return /* @__PURE__ */ l(
+    k,
+    {
+      className: n(d.root, "VdtDateField-root", m),
+      error: (e || a) && i,
+      ...F,
+      children: /* @__PURE__ */ l(
+        y,
+        {
+          id: o,
+          label: r,
+          value: t,
+          type: c,
+          onChange: p,
+          helperText: i && (e || a) ? e || a : s,
+          error: (e || a) && i,
+          InputLabelProps: { shrink: !0, ...f },
+          className: n(d.date, "VdtDateField-date"),
+          ...x
+        }
+      )
+    }
+  );
+}
+const N = D(w, { name: "VdtDateField" })(T);
+export {
+  N as default
+};

package/dist/es/fields/Field.js

@@ -0,0 +1,9 @@
+import { jsx as n } from "react/jsx-runtime";
+import { Field as i } from "react-final-form";
+function u({ ...t }) {
+  const { constraint: r = {} } = t, { parent: e } = r;
+  return e ? /* @__PURE__ */ n(i, { name: e, subscription: { value: !0 }, children: ({ input: { value: a } }) => /* @__PURE__ */ n(i, { parentField: e, parentValue: a, ...t }) }) : /* @__PURE__ */ n(i, { ...t });
+}
+export {
+  u as default
+};

package/dist/es/fields/RadioField.js

@@ -0,0 +1,85 @@
+import { jsxs as V, jsx as r } from "react/jsx-runtime";
+import e from "clsx";
+import { withStyles as C, FormControl as T, FormLabel as g, RadioGroup as G, Radio as H, FormHelperText as j, FormControlLabel as v } from "@material-ui/core";
+const w = (d) => ({
+  root: {
+    marginTop: d.spacing(2),
+    width: "100%"
+  }
+});
+function y({
+  input: { value: d, name: t, onChange: m } = {},
+  meta: { touched: n, error: l, submitError: a } = {},
+  options: p = [],
+  label: c,
+  classes: o,
+  className: F,
+  FormControlProps: f = {},
+  FormLabelProps: R = {},
+  RadioGroupProps: s = {},
+  FormControlLabelProps: b = {},
+  RadioProps: u = {},
+  FormHelperTextProps: x = {},
+  FormControlLabelComponent: h = v
+}) {
+  return /* @__PURE__ */ V(
+    T,
+    {
+      component: "fieldset",
+      error: (l || a) && n,
+      className: e(o.root, "VdtRadioField-root", F),
+      ...f,
+      children: [
+        /* @__PURE__ */ r(
+          g,
+          {
+            component: "legend",
+            className: e(o.formLabel, "VdtRadioField-formLabel"),
+            ...R,
+            children: c
+          }
+        ),
+        /* @__PURE__ */ r(
+          G,
+          {
+            name: t,
+            value: d,
+            onChange: m,
+            className: e(o.radioGroup, "VdtRadioField-radioGroup"),
+            ...s,
+            children: p.map(({ value: i, label: L, ...N }) => /* @__PURE__ */ r(
+              h,
+              {
+                label: L,
+                control: /* @__PURE__ */ r(
+                  H,
+                  {
+                    value: i,
+                    className: e(o.radio, "VdtRadioField-radio"),
+                    ...u
+                  }
+                ),
+                className: e(o.formControlLabel, "VdtRadioField-formControlLabel"),
+                ...b,
+                ...N
+              },
+              i
+            ))
+          }
+        ),
+        /* @__PURE__ */ r(
+          j,
+          {
+            className: e(o.formHelperTextProps, "VdtRadioField-formHelperTextProps"),
+            ...x,
+            children: l || a
+          }
+        )
+      ]
+    }
+  );
+}
+const k = C(w, { name: "VdtRadioField" })(y);
+export {
+  k as default
+};

package/dist/es/fields/SelectField.js

@@ -0,0 +1,87 @@
+import { jsxs as T, jsx as i } from "react/jsx-runtime";
+import t from "clsx";
+import { withStyles as V, FormControl as H, InputLabel as L, Select as b, MenuItem as g, FormHelperText as M } from "@material-ui/core";
+const j = (l) => ({
+  root: {
+    marginTop: l.spacing(1),
+    width: "100%",
+    "& .MuiInputBase-root": {
+      fontSize: ".75rem"
+    },
+    "& .MuiInputBase-input": {
+      fontWeight: 500,
+      fontSize: "0.875rem"
+    }
+  },
+  inputLabel: {},
+  select: {},
+  menuItem: {},
+  formHelperText: {}
+});
+function v({
+  input: { value: l, name: o, onChange: d, multiple: r } = {},
+  meta: { touched: c, error: n, submitError: m } = {},
+  options: p = [],
+  label: u,
+  classes: e,
+  className: s,
+  FormControlProps: S = {},
+  InputLabelProps: f = {},
+  MenuItemProps: F = {},
+  FormHelperTextProps: h = {},
+  ...x
+}) {
+  return /* @__PURE__ */ T(
+    H,
+    {
+      error: (n || m) && c,
+      className: t(e.root, "VdtSelectField-root", s),
+      ...S,
+      children: [
+        /* @__PURE__ */ i(
+          L,
+          {
+            htmlFor: o,
+            className: t(e.inputLabel, "VdtSelectField-inputLabel"),
+            ...f,
+            children: u
+          }
+        ),
+        /* @__PURE__ */ i(
+          b,
+          {
+            name: o,
+            onChange: d,
+            value: r && !l ? [] : l,
+            multiple: r,
+            className: t(e.select, "VdtSelectField-select"),
+            ...x,
+            children: p.map(({ value: a, label: I, ...N }) => /* @__PURE__ */ i(
+              g,
+              {
+                value: a,
+                className: t(e.menuItem, "VdtSelectField-menuItem"),
+                ...F,
+                ...N,
+                children: I
+              },
+              a
+            ))
+          }
+        ),
+        /* @__PURE__ */ i(
+          M,
+          {
+            className: t(e.formHelperText, "VdtSelectField-formHelperText"),
+            ...h,
+            children: c && (n || m) ? n || m : ""
+          }
+        )
+      ]
+    }
+  );
+}
+const B = V(j, { name: "VdtSelectField" })(v);
+export {
+  B as default
+};