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

package/dist/es/fields/SliderField.js

@@ -0,0 +1,96 @@
+import { jsxs as w, jsx as d } from "react/jsx-runtime";
+import { useMemo as c } from "react";
+import o from "clsx";
+import { withStyles as D, FormControl as O, FormLabel as $, Slider as k, FormHelperText as q } from "@material-ui/core";
+const z = (t) => ({
+  root: {
+    marginTop: t.spacing(2),
+    width: "100%"
+  },
+  sliderWithoutThumb: {
+    "& .MuiSlider-thumb": {
+      visibility: "hidden"
+    }
+  }
+});
+function A({
+  input: { value: t, name: b, onChange: h } = {},
+  meta: { touched: x, error: n, submitError: m } = {},
+  options: a = [],
+  label: S,
+  min: f,
+  max: F,
+  isRange: N,
+  step: v = null,
+  showMarks: u = !0,
+  classes: l,
+  className: g,
+  FormControlProps: T = {},
+  FormLabelProps: V = {},
+  FormHelperTextProps: M = {},
+  exclude: B,
+  disabled: y,
+  ...L
+}) {
+  const i = c(
+    () => a.filter((e) => !Number.isNaN(e.value)).map((e) => ({
+      value: Number(e.value),
+      label: u ? e.label : void 0
+    })),
+    [u, a]
+  ), [H, j] = c(() => {
+    const e = i.map((r) => r.value).sort((r, W) => r - W);
+    return [e[0], e[e.length - 1]];
+  }, [i]), s = Number(f) || H, p = Number(F) || j, C = N ? [s, p] : null;
+  return /* @__PURE__ */ w(
+    O,
+    {
+      error: (n || m) && x,
+      className: o(l.root, "VdtSliderField-root", g),
+      ...T,
+      children: [
+        /* @__PURE__ */ d(
+          $,
+          {
+            component: "legend",
+            className: o(l.FormLabel, "VdtSliderField-formLabel"),
+            ...V,
+            children: S
+          }
+        ),
+        /* @__PURE__ */ d(
+          k,
+          {
+            name: b,
+            value: t || C,
+            min: s,
+            max: p,
+            marks: i,
+            step: v,
+            disabled: y || !i.length,
+            valueLabelDisplay: i.length > 0 ? "auto" : void 0,
+            onChange: (e, r) => h(r),
+            className: o({
+              [l.slider]: !0,
+              "VdtSliderField-slider": !0,
+              [l.sliderWithoutThumb]: !t
+            }),
+            ...L
+          }
+        ),
+        /* @__PURE__ */ d(
+          q,
+          {
+            className: o(l.formHelperText, "VdtSliderField-formHelperText"),
+            ...M,
+            children: n || m
+          }
+        )
+      ]
+    }
+  );
+}
+const P = D(z, { name: "VdtSliderField" })(A);
+export {
+  P as default
+};

package/dist/es/fields/SwitchField.js

@@ -0,0 +1,55 @@
+import { jsx as c } from "react/jsx-runtime";
+import n from "clsx";
+import { withStyles as f, FormControl as b, FormControlLabel as g, Switch as x } from "@material-ui/core";
+const C = (o) => ({
+  root: {
+    marginTop: o.spacing(1),
+    width: "100%"
+  }
+});
+function y({
+  className: o,
+  classes: i,
+  input: { name: h, onChange: l, value: m } = {},
+  label: s,
+  checkedValue: t,
+  uncheckedValue: r,
+  FormControlProps: d = {},
+  FormControlLabelProps: e = {},
+  SwitchProps: w = {}
+}) {
+  const a = t && r ? (S) => {
+    const { checked: p } = S.target;
+    l(p ? t : r);
+  } : l, F = t && r ? t === m : m;
+  return /* @__PURE__ */ c(
+    b,
+    {
+      className: n(i.root, "VdtSwitchField-root", o),
+      ...d,
+      children: /* @__PURE__ */ c(
+        g,
+        {
+          label: s,
+          className: n(i.label, "VdtSwitchField-FormControlLabel"),
+          control: /* @__PURE__ */ c(
+            x,
+            {
+              type: "checkbox",
+              className: n(i.switch, "VdtSwitchField-Switch"),
+              checked: F,
+              onChange: a,
+              name: h,
+              ...w
+            }
+          ),
+          ...e
+        }
+      )
+    }
+  );
+}
+const T = f(C, { name: "VdtSwitchField" })(y);
+export {
+  T as default
+};

package/dist/es/fields/TagField.js

@@ -0,0 +1,91 @@
+import { jsxs as O, jsx as c } from "react/jsx-runtime";
+import { useState as C, useEffect as H } from "react";
+import m from "clsx";
+import { withStyles as I, FormControl as L, TextField as $, FormHelperText as k } from "@material-ui/core";
+import { Autocomplete as q } from "@material-ui/lab";
+const z = (e) => ({
+  root: {
+    marginTop: e.spacing(1),
+    width: "100%"
+  }
+});
+function B({
+  input: { value: e, name: F, onChange: o } = {},
+  meta: { touched: a, error: f, submitError: p } = {},
+  options: V = [],
+  label: b,
+  classes: s,
+  className: T,
+  FormControlProps: y = {},
+  TextFieldProps: S = {},
+  InputLabelProps: A = {},
+  FormHelperTextProps: N = {},
+  AutocompleteProps: h = {},
+  ...j
+}) {
+  const { freeSolo: x, multiple: d } = h, g = d ? [] : null, [n, i] = C(g), w = (t, r) => {
+    d ? x ? (i(r.map((l) => l.value ? l : { value: l, label: l })), o(r.map((l) => l.value ? l.value : l))) : (i(r), o(r.map((l) => l.value))) : (i(r), o(r.value));
+  };
+  return H(() => {
+    if (d)
+      (!e || !e.length) && n.length > 0 ? i(() => g) : Array.isArray(e) && e && e.length > 0 && n.length === 0 && a === !1 ? i(
+        () => e.map((t) => ({ value: t, label: t }))
+      ) : !Array.isArray(e) && e && e.length > 0 && n.length === 0 && a === !1 && i(() => [{ value: e, label: e }]);
+    else if (!e && n)
+      i(() => g), o([]);
+    else if (e && e.length && !n) {
+      const t = e.length ? e[0] : e;
+      i(() => ({ value: t, label: t }));
+    }
+  }, [n, e]), /* @__PURE__ */ O(
+    L,
+    {
+      component: "fieldset",
+      className: m(s.root, "VdtTagField-root", T),
+      error: (f || p) && a,
+      ...y,
+      children: [
+        /* @__PURE__ */ c(
+          q,
+          {
+            className: m(s.root, "VdtTagField-root", T),
+            id: F,
+            value: n,
+            options: V,
+            getOptionLabel: (t) => t.label || t.value || "",
+            getOptionSelected: (t, r) => t.value === r.value,
+            onChange: w,
+            disableClearable: !0,
+            freeSolo: x,
+            multiple: d,
+            renderInput: (t) => /* @__PURE__ */ c(
+              $,
+              {
+                label: b,
+                className: m(s.text, "VdtTagField-text"),
+                error: (f || p) && a,
+                InputLabelProps: A,
+                ...t,
+                ...S
+              }
+            ),
+            ...h,
+            ...j
+          }
+        ),
+        /* @__PURE__ */ c(
+          k,
+          {
+            className: m(s.helperText, "VdtTagField-helperText"),
+            ...N,
+            children: f || p
+          }
+        )
+      ]
+    }
+  );
+}
+const Q = I(z, { name: "VdtTagField" })(B);
+export {
+  Q as default
+};

package/dist/es/fields/TextField.js

@@ -0,0 +1,50 @@
+import { jsx as l } from "react/jsx-runtime";
+import x from "clsx";
+import { withStyles as f, FormControl as F, TextField as c } from "@material-ui/core";
+const u = (t) => ({
+  root: {
+    marginTop: t.spacing(1),
+    width: "100%",
+    "& .MuiInputBase-root": {
+      fontSize: ".75rem"
+    },
+    "& .MuiInputBase-input": {
+      fontWeight: 500,
+      fontSize: "0.875rem"
+    }
+  }
+});
+function h({
+  input: { name: t, onChange: a, value: d, ...m } = {},
+  meta: { touched: o, error: e, submitError: i } = {},
+  helperText: p = " ",
+  classes: n,
+  className: r,
+  FormControlProps: s = {},
+  ...T
+}) {
+  return /* @__PURE__ */ l(
+    F,
+    {
+      className: x(n.root, "VdtTextField-root", r),
+      ...s,
+      children: /* @__PURE__ */ l(
+        c,
+        {
+          className: x(n.text, "VdtTextField-text"),
+          name: t,
+          helperText: o && (e || i) ? e || i : p,
+          error: (e || i) && o,
+          inputProps: m,
+          onChange: a,
+          value: d,
+          ...T
+        }
+      )
+    }
+  );
+}
+const w = f(u, { name: "VdtTextField" })(h);
+export {
+  w as default
+};

package/dist/es/filter/FilterCard.js

@@ -0,0 +1,130 @@
+import { jsxs as C, jsx as c } from "react/jsx-runtime";
+import { useState as O, useMemo as g, useCallback as M } from "react";
+import { Form as W } from "react-final-form";
+import { withStyles as k, Box as E, Typography as L, Paper as P } from "@material-ui/core";
+import { parseFacetType as $, parseNowDate as y } from "@vidispine/vdt-js";
+import q from "./FilterForm.js";
+const z = (e) => ({
+  header: {
+    padding: e.spacing(2),
+    paddingBottom: "0"
+  },
+  form: {
+    paddingLeft: e.spacing(2),
+    paddingRight: e.spacing(2),
+    paddingBottom: e.spacing(2)
+  }
+}), F = (e) => {
+  const t = new Date(e);
+  return t instanceof Date && !Number.isNaN(t.getTime());
+}, G = (e) => typeof e == "string" || e instanceof String, H = (e) => typeof e == "number", N = (e) => G(e) && e.startsWith("NOW"), I = (e) => e.every(F), J = (e) => e.every(H), K = (e) => e.every(N) || e.some(N) && e.some(F), Q = (e) => {
+  let t;
+  if (I(e))
+    t = e.sort((r, i) => new Date(r).getTime() - new Date(i).getTime());
+  else if (J(e))
+    t = e.sort((r, i) => Number(r) - Number(i));
+  else if (K(e))
+    t = e.sort((r, i) => y(r).getTime() - y(i).getTime());
+  else
+    return;
+  return [t[0], t[t.length - 1]];
+}, U = (e, [t, r]) => ({
+  name: e,
+  field: [
+    {
+      name: e,
+      range: [
+        {
+          value: [
+            {
+              value: t
+            },
+            {
+              value: r
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}), X = (e, t, r) => ({
+  name: e,
+  field: Array.isArray(t) ? t.map((i) => ({
+    name: e,
+    value: [{ value: i }]
+  })) : [
+    {
+      name: e,
+      value: [{ value: t }]
+    }
+  ],
+  operation: r
+});
+function Y(e) {
+  return (e || []).reduce(
+    (t, r) => ({
+      [r.name]: (r.field || []).flatMap(({ value: i, range: n }) => {
+        if (i)
+          return i[0].value;
+        if (n)
+          return n[0].value.map((a) => a.value);
+      }),
+      ...t
+    }),
+    {}
+  );
+}
+function Z({
+  className: e,
+  classes: t,
+  itemListType: r = {},
+  fields: i = [],
+  initialSearchFilter: n,
+  isLoading: a,
+  onChange: d,
+  headerText: f = "Filter",
+  component: b = P,
+  FormComponent: h = q,
+  FormProps: D = {},
+  HeaderProps: w = {},
+  CardProps: R = {},
+  operation: T = "OR",
+  hideEmptyFilters: V
+}) {
+  const [l, S] = O(!1), { facet: m } = r, v = g(
+    () => Y(n),
+    [n]
+  ), x = g(() => $(m), [m]), p = M(
+    (A) => {
+      const u = Object.entries(A);
+      if (u.length === 0 && !l)
+        return;
+      l || S(!0);
+      const j = u.filter(([, s]) => s !== null).map(([s, o]) => i.find((B) => B.value === s).isRange && Array.isArray(o) && o.length >= 2 ? U(s, Q(o)) : X(s, o, T));
+      d(j);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [d, l]
+  );
+  return a ? null : /* @__PURE__ */ C(b, { className: e, ...R, children: [
+    f && /* @__PURE__ */ c(E, { className: t.header, children: /* @__PURE__ */ c(L, { variant: "button", color: "textSecondary", ...w, children: f }) }),
+    /* @__PURE__ */ c(
+      W,
+      {
+        className: t.form,
+        onSubmit: p,
+        render: h,
+        parsedFacet: x,
+        validate: p,
+        fields: i,
+        defaultValues: v,
+        hideEmptyFilters: V,
+        ...D
+      }
+    )
+  ] });
+}
+const oe = k(z, { name: "VdtFilterCard" })(Z);
+export {
+  oe as default
+};

package/dist/es/filter/FilterForm.js

@@ -0,0 +1,60 @@
+import { jsx as l } from "react/jsx-runtime";
+import { useCallback as F } from "react";
+import { Field as v } from "react-final-form";
+import x from "./FilterFormLabel.js";
+const $ = (s, n) => Object.entries(s || {}).filter(([, e]) => n === !1 || e !== 0).map(([e, o]) => ({
+  value: e,
+  label: `${e.toUpperCase()}${o !== void 0 ? ` (${o})` : ""}`
+}));
+function P({
+  className: s,
+  fields: n,
+  defaultValues: e = {},
+  parsedFacet: o,
+  form: i,
+  dirtyFields: a = {},
+  handleSubmit: p,
+  hideEmptyFilters: c
+}) {
+  const f = F(
+    (t) => {
+      const { values: r = {} } = i.getState();
+      return r[t] && Array.isArray(r[t]) ? r[t].length > 0 : a[t];
+    },
+    [a, i]
+  );
+  return /* @__PURE__ */ l("form", { onSubmit: p, className: s, children: n.map(
+    ({
+      value: t,
+      parseOptions: r = $,
+      label: d,
+      FacetProps: h = {},
+      FilterFormLabelProps: b = {},
+      ...g
+    }) => {
+      const m = o[t], { count: y } = h, u = r(m, c), C = c === !0 && y === !0 && u.length === 0 ? "none" : "inherit";
+      return /* @__PURE__ */ l("div", { style: { display: C }, children: /* @__PURE__ */ l(
+        v,
+        {
+          name: t,
+          FormHelperTextProps: { style: { display: "none" } },
+          defaultValue: e[t],
+          label: /* @__PURE__ */ l(
+            x,
+            {
+              hidden: !f(t),
+              label: d,
+              onClick: () => i.change(t),
+              ...b
+            }
+          ),
+          options: u,
+          ...g
+        }
+      ) }, t);
+    }
+  ) });
+}
+export {
+  P as default
+};

package/dist/es/filter/FilterFormLabel.js

@@ -0,0 +1,31 @@
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import { withStyles as a, Box as m, IconButton as s } from "@material-ui/core";
+import { Cancel as c } from "@material-ui/icons";
+const h = (i) => ({
+  root: {
+    height: 20,
+    lineHeight: "inherit"
+  },
+  icon: {
+    padding: 0,
+    marginLeft: i.spacing(2)
+  }
+});
+function d({ classes: i, label: e, hidden: o, onClick: r, IconComponent: n = c }) {
+  return /* @__PURE__ */ l(m, { className: i.root, children: [
+    e,
+    /* @__PURE__ */ t(
+      s,
+      {
+        className: i.icon,
+        onClick: r,
+        style: { visibility: o ? "hidden" : "inherit" },
+        children: /* @__PURE__ */ t(n, {})
+      }
+    )
+  ] });
+}
+const g = a(h, { name: "VdtFilterFormLabel" })(d);
+export {
+  g as default
+};

package/dist/es/forms/ExpandedFormControlLabel.js

@@ -0,0 +1,96 @@
+import { jsxs as x, jsx as c } from "react/jsx-runtime";
+import { forwardRef as C, cloneElement as w } from "react";
+import i from "clsx";
+import { useFormControl as y, Typography as p, withStyles as v } from "@material-ui/core";
+const E = (o) => ({
+  root: {
+    display: "inline-flex",
+    alignItems: "center",
+    cursor: "pointer",
+    // For correct alignment with the text.
+    verticalAlign: "middle",
+    WebkitTapHighlightColor: "transparent",
+    marginLeft: -11,
+    marginRight: 11,
+    "&$disabled": {
+      cursor: "default"
+    },
+    width: "100%"
+  },
+  disabled: {},
+  label: {
+    "&$disabled": {
+      color: o.palette.text.disabled
+    }
+  },
+  labelText: {
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  },
+  labelCount: {
+    marginLeft: "auto",
+    marginRight: -11
+  }
+}), F = C((o, m) => {
+  const {
+    checked: L,
+    classes: e,
+    className: b,
+    control: t,
+    disabled: f,
+    inputRef: R,
+    label: d,
+    name: T,
+    onChange: N,
+    value: j,
+    ...u
+  } = o, s = y(), n = d ? d.split(" ") : [], h = n.slice(0, n.length - 1).join(" "), g = n.slice(-1);
+  let l = f;
+  typeof l > "u" && typeof t.props.disabled < "u" && (l = t.props.disabled), typeof l > "u" && s && (l = s.disabled);
+  const r = {
+    disabled: l
+  };
+  return ["checked", "name", "onChange", "value", "inputRef"].forEach((a) => {
+    typeof t.props[a] > "u" && typeof o[a] < "u" && (r[a] = o[a]);
+  }), // eslint-disable-next-line jsx-a11y/label-has-associated-control
+  /* @__PURE__ */ x(
+    "label",
+    {
+      className: i(
+        e.root,
+        {
+          [e.disabled]: l
+        },
+        b
+      ),
+      ref: m,
+      ...u,
+      children: [
+        w(t, r),
+        /* @__PURE__ */ c(
+          p,
+          {
+            component: "span",
+            className: i(e.label, e.labelText, { [e.disabled]: l }),
+            children: h
+          }
+        ),
+        /* @__PURE__ */ c(
+          p,
+          {
+            component: "span",
+            className: i(e.label, e.labelCount, { [e.disabled]: l }),
+            children: g
+          }
+        )
+      ]
+    }
+  );
+}), H = v(E, { name: "VdtExpandedFormControlLabel" })(
+  F
+);
+export {
+  H as default,
+  E as styles
+};