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

package/dist/es/search/querybuilder/QueryEquals/QueryEquals.js

@@ -0,0 +1,61 @@
+import { jsx as r } from "react/jsx-runtime";
+import c from "clsx";
+import f from "lodash.get";
+import e from "prop-types";
+import d from "@vidispine/proptypes";
+import v from "../QueryInput/index.js";
+const x = () => ({
+  root: {}
+});
+function t({
+  classes: a,
+  className: n,
+  field: s,
+  onChange: p,
+  InputComponent: i,
+  ...l
+}) {
+  const m = (o) => ({
+    name: s.name,
+    value: [{ value: o }]
+  }), u = f(s, "value.0.value", "");
+  return /* @__PURE__ */ r("div", { className: c(a.root, n), children: /* @__PURE__ */ r(
+    i,
+    {
+      value: u,
+      onChange: (o) => p(m(o.target.value)),
+      ...l
+    }
+  ) });
+}
+t.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.objectOf(e.string),
+  /**
+   * Override styles with className
+   */
+  className: e.string,
+  /**
+   * Override the InputComponent.
+   */
+  InputComponent: e.elementType,
+  /**
+   * Input change function.
+   */
+  onChange: e.func.isRequired,
+  /**
+   * Search Field with name and value/range.
+   */
+  field: d.SearchFieldType.isRequired
+};
+t.defaultProps = {
+  className: void 0,
+  classes: {},
+  InputComponent: v
+};
+export {
+  t as default,
+  x as styles
+};

package/dist/es/search/querybuilder/QueryEquals/index.js

@@ -0,0 +1,6 @@
+import { withStyles as t } from "@material-ui/core";
+import e, { styles as r } from "./QueryEquals.js";
+const a = t(r, { name: "VdtQueryEquals" })(e);
+export {
+  a as default
+};

package/dist/es/search/querybuilder/QueryField/QueryField.js

@@ -0,0 +1,272 @@
+import { jsxs as _, jsx as o } from "react/jsx-runtime";
+import { useState as $ } from "react";
+import H from "clsx";
+import t from "prop-types";
+import { ListItem as J, ListItemAvatar as K, Button as T, TextField as U, Select as W, MenuItem as X } from "@material-ui/core";
+import { Delete as Y } from "@material-ui/icons";
+import { Autocomplete as Z } from "@material-ui/lab";
+import ee from "@vidispine/proptypes";
+import te from "../QueryBetween/index.js";
+import ne from "../QueryContains/index.js";
+import y from "../QueryEquals/index.js";
+const p = {
+  equals: {
+    label: "Equals",
+    component: y,
+    props: {},
+    shape: (e) => ({
+      name: e,
+      value: [{ value: "" }]
+    })
+  },
+  equalsBoolean: {
+    label: "Equals",
+    component: y,
+    props: {},
+    shape: (e) => ({
+      name: e,
+      value: [{ value: "false" }]
+    })
+  },
+  contains: {
+    label: "Contains",
+    component: ne,
+    props: {},
+    shape: (e) => ({
+      name: e,
+      value: [{ value: "" }]
+    })
+  },
+  between: {
+    label: "Between",
+    component: te,
+    props: {},
+    shape: (e) => ({
+      name: e,
+      range: [
+        {
+          value: [{ value: "" }, { value: "" }]
+        }
+      ]
+    })
+  }
+}, oe = ({ type: e } = {}) => {
+  switch (e) {
+    case "boolean":
+      return [p.equalsBoolean];
+    case "date":
+    case "integer":
+    case "long":
+    case "float":
+      return [p.equals, p.between];
+    default:
+      return [p.equals, p.contains];
+  }
+}, re = (e, n, r, u) => {
+  let c;
+  return e === "Equals" && (c = n), e === "Contains" && (c = r), e === "Between" && (c = u), c;
+};
+function ae({
+  value: e,
+  options: n,
+  onChange: r,
+  equalsText: u,
+  containsText: c,
+  betweenText: i,
+  ...m
+}) {
+  return /* @__PURE__ */ o(
+    W,
+    {
+      value: e,
+      onChange: (s) => r(n.find((d) => d.label === s.target.value)),
+      ...m,
+      children: n.map((s) => /* @__PURE__ */ o(X, { value: s.label, children: re(s.label, u, c, i) }, s.label))
+    }
+  );
+}
+const ve = (e) => ({
+  root: {
+    "& > *": {
+      marginRight: "15px"
+    }
+  },
+  errorButton: {
+    color: e.palette.error.light
+  },
+  successButton: {
+    color: e.palette.success.light
+  },
+  fieldPicker: {
+    width: "250px"
+  },
+  predicatePicker: {
+    width: "100px"
+  }
+}), le = (e, n) => {
+  const r = /^\*.+\*$/gm;
+  return Object.prototype.hasOwnProperty.call(e, "range") ? n ? n[1] : {} : e && e.value[0].value.match(r) ? n ? n[1] : {} : n ? n[0] : {};
+};
+function C({
+  classes: e,
+  className: n,
+  field: r,
+  fields: u,
+  getFieldLabel: c,
+  getFieldName: i,
+  InputComponent: m,
+  not: s,
+  onRemove: d,
+  onChange: f,
+  setNot: P,
+  PredicatePickerComponent: I,
+  PredicatePickerProps: w,
+  getPredicateOptions: g,
+  getPredicate: k,
+  NotIcon: q,
+  OkIcon: B,
+  RemoveIcon: O,
+  includeText: R,
+  excludeText: L,
+  removeText: j,
+  PredicateComponentProps: E,
+  equalsText: N,
+  containsText: Q,
+  betweenText: F
+}) {
+  const b = u.find((a) => i(a) === i(r)), v = g(b), [S, h] = $(k(r, v)), {
+    label: x,
+    component: V,
+    props: z = {}
+  } = S, A = (a) => {
+    const l = g(a);
+    return h(l ? l[0] : {}), l.find((M) => M.label === x) || l[0];
+  }, D = () => P(!s), G = (a) => {
+    const l = a.shape(i(r));
+    f(l), h(a);
+  };
+  return /* @__PURE__ */ _(
+    J,
+    {
+      ContainerComponent: "div",
+      component: "div",
+      className: H(n, e.root, "VdtQueryField-root"),
+      alignItems: "flex-start",
+      children: [
+        /* @__PURE__ */ o(K, { children: P && /* @__PURE__ */ o(
+          T,
+          {
+            className: s ? e.errorButton : e.successButton,
+            startIcon: s ? /* @__PURE__ */ o(q, {}) : /* @__PURE__ */ o(B, {}),
+            edge: "end",
+            onClick: D,
+            size: "small",
+            children: s ? L : R
+          }
+        ) }),
+        /* @__PURE__ */ o(
+          Z,
+          {
+            onChange: (a, l) => f(A(l).shape(i(l))),
+            value: u.find((a) => i(r) === i(a)),
+            disableClearable: !0,
+            options: u,
+            getOptionLabel: c,
+            renderInput: (a) => /* @__PURE__ */ o(U, { onClick: (l) => l.stopPropagation(), ...a }),
+            classes: { root: e.fieldPicker }
+          }
+        ),
+        /* @__PURE__ */ o(
+          I,
+          {
+            value: x,
+            options: v,
+            onChange: G,
+            classes: { root: e.predicatePicker },
+            equalsText: N,
+            containsText: Q,
+            betweenText: F,
+            ...w
+          }
+        ),
+        /* @__PURE__ */ o(
+          V,
+          {
+            field: r,
+            onChange: f,
+            InputComponent: m,
+            ...b,
+            ...z,
+            ...E
+          }
+        ),
+        d && /* @__PURE__ */ o(T, { edge: "end", onClick: d, startIcon: /* @__PURE__ */ o(O, {}), size: "small", children: j })
+      ]
+    }
+  );
+}
+C.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: t.objectOf(t.string),
+  /**
+   * Override styles with className
+   */
+  className: t.string,
+  PredicatePickerComponent: t.elementType,
+  PredicatePickerProps: t.objectOf(t.any),
+  getPredicateOptions: t.func,
+  getPredicate: t.func,
+  NotIcon: t.elementType,
+  OkIcon: t.elementType,
+  RemoveIcon: t.elementType,
+  includeText: t.string,
+  excludeText: t.string,
+  removeText: t.string,
+  equalsText: t.string,
+  containsText: t.string,
+  betweenText: t.string,
+  InputComponent: t.elementType,
+  /**
+   * Search Field with name and value/range.
+   */
+  field: ee.SearchFieldType.isRequired,
+  onRemove: t.func,
+  onChange: t.func.isRequired,
+  fields: t.arrayOf(t.any),
+  getFieldLabel: t.func,
+  getFieldName: t.func,
+  not: t.bool,
+  setNot: t.func,
+  PredicateComponentProps: t.objectOf(t.any)
+};
+C.defaultProps = {
+  className: void 0,
+  classes: {},
+  PredicatePickerComponent: ae,
+  PredicatePickerProps: {},
+  getPredicateOptions: oe,
+  getPredicate: le,
+  NotIcon: () => null,
+  OkIcon: () => null,
+  RemoveIcon: Y,
+  includeText: "Include",
+  excludeText: "Exclude",
+  removeText: "Remove",
+  equalsText: "Equals",
+  containsText: "Contains",
+  betweenText: "Between",
+  onRemove: void 0,
+  fields: [],
+  InputComponent: void 0,
+  not: !1,
+  setNot: void 0,
+  getFieldLabel: (e) => e.label,
+  getFieldName: (e) => e.name,
+  PredicateComponentProps: {}
+};
+export {
+  C as default,
+  ve as styles
+};

package/dist/es/search/querybuilder/QueryField/index.js

@@ -0,0 +1,6 @@
+import { withStyles as e } from "@material-ui/core";
+import t, { styles as r } from "./QueryField.js";
+const o = e(r, { name: "VdtQueryField" })(t);
+export {
+  o as default
+};

package/dist/es/search/querybuilder/QueryGroup/QueryGroup.js

@@ -0,0 +1,152 @@
+import { jsxs as v, jsx as t } from "react/jsx-runtime";
+import P from "clsx";
+import e from "prop-types";
+import { ListItem as Q, ListItemAvatar as j, Button as a, TextField as q, ListItemSecondaryAction as z, ButtonGroup as S } from "@material-ui/core";
+import { Delete as V } from "@material-ui/icons";
+import { Autocomplete as w } from "@material-ui/lab";
+const s = (o) => (r) => {
+  r.stopPropagation(), o(r.target.value);
+}, M = (o) => ({
+  root: {},
+  errorButton: {
+    color: o.palette.error.light
+  },
+  successButton: {
+    color: o.palette.success.light
+  },
+  groupSelect: {
+    width: "20%",
+    marginLeft: o.spacing(2)
+  }
+});
+function h({
+  className: o,
+  classes: r,
+  group: x,
+  groups: c,
+  onAddEntry: u,
+  onRemove: p,
+  onChange: y,
+  setNot: m,
+  not: l,
+  defaultField: g,
+  defaultGroup: f,
+  getGroupName: i,
+  getGroupLabel: T,
+  addFieldText: I,
+  addGroupText: C,
+  includeText: N,
+  excludeText: G,
+  removeText: O,
+  NotIcon: b,
+  OkIcon: k,
+  RemoveIcon: B
+}) {
+  const A = s(
+    () => u({
+      name: g,
+      value: [{ value: "" }]
+    })
+  ), L = s(
+    () => u({
+      name: f,
+      entry: []
+    })
+  ), R = s(() => m(!l)), F = (n) => {
+    y({ name: i(n), entry: [] });
+  };
+  return /* @__PURE__ */ v(
+    Q,
+    {
+      ContainerComponent: "div",
+      className: P(o, r.root, "VdtQueryOperator-root"),
+      children: [
+        /* @__PURE__ */ t(j, { children: /* @__PURE__ */ t("div", { children: m && /* @__PURE__ */ t(
+          a,
+          {
+            className: l ? r.errorButton : r.successButton,
+            startIcon: l ? /* @__PURE__ */ t(b, {}) : /* @__PURE__ */ t(k, {}),
+            edge: "end",
+            onClick: R,
+            size: "small",
+            children: l ? G : N
+          }
+        ) }) }),
+        /* @__PURE__ */ t(
+          w,
+          {
+            className: r.groupSelect,
+            onChange: (n, d) => F(d),
+            value: c.find((n) => i(x) === i(n)),
+            disableClearable: !0,
+            options: c,
+            getOptionLabel: T,
+            renderInput: (n) => /* @__PURE__ */ t(q, { onClick: (d) => d.stopPropagation(), ...n }),
+            classes: { root: r.fieldPicker }
+          }
+        ),
+        /* @__PURE__ */ t(z, { children: /* @__PURE__ */ v(S, { variant: "outlined", size: "small", children: [
+          g && /* @__PURE__ */ t(a, { className: "VdtQueryOperator-addFieldBtn", onClick: A, children: I }),
+          f && /* @__PURE__ */ t(a, { className: "VdtQueryOperator-addGroupBtn", onClick: L, children: C }),
+          p && /* @__PURE__ */ t(a, { edge: "end", onClick: p, startIcon: /* @__PURE__ */ t(B, {}), size: "small", children: O })
+        ] }) })
+      ]
+    }
+  );
+}
+h.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.objectOf(e.string),
+  /**
+   * Override styles with className
+   */
+  className: e.string,
+  NotIcon: e.elementType,
+  OkIcon: e.elementType,
+  RemoveIcon: e.elementType,
+  includeText: e.string,
+  excludeText: e.string,
+  removeText: e.string,
+  addFieldText: e.string,
+  addGroupText: e.string,
+  group: e.shape({
+    name: e.string,
+    entry: e.arrayOf(e.any)
+  }).isRequired,
+  groups: e.arrayOf(e.any),
+  onAddEntry: e.func.isRequired,
+  onRemove: e.func,
+  onChange: e.func.isRequired,
+  not: e.bool,
+  setNot: e.func,
+  defaultField: e.string,
+  defaultGroup: e.string,
+  getGroupName: e.func,
+  getGroupLabel: e.func
+};
+h.defaultProps = {
+  className: void 0,
+  classes: {},
+  NotIcon: () => null,
+  OkIcon: () => null,
+  RemoveIcon: V,
+  includeText: "Include",
+  excludeText: "Exclude",
+  removeText: "Remove",
+  addFieldText: "Add field",
+  addGroupText: "Add group",
+  onRemove: void 0,
+  groups: [],
+  defaultField: void 0,
+  defaultGroup: void 0,
+  not: !1,
+  setNot: void 0,
+  getGroupLabel: (o) => o.label,
+  getGroupName: (o) => o.name
+};
+export {
+  h as default,
+  M as styles
+};

package/dist/es/search/querybuilder/QueryGroup/index.js

@@ -0,0 +1,6 @@
+import { withStyles as r } from "@material-ui/core";
+import o, { styles as t } from "./QueryGroup.js";
+const p = r(t, { name: "VdtQueryGroup" })(o);
+export {
+  p as default
+};

package/dist/es/search/querybuilder/QueryInput/QueryInput.js

@@ -0,0 +1,121 @@
+import { jsx as l } from "react/jsx-runtime";
+import { useState as m, useEffect as f } from "react";
+import n from "prop-types";
+import d from "../../../fields/CheckboxField.js";
+import "../../../fields/CheckboxGroupField.js";
+import "../../../fields/RadioField.js";
+import y from "../../../fields/SelectField.js";
+import s from "../../../fields/TextField.js";
+import "../../../fields/SliderField.js";
+import "../../../fields/TagField.js";
+import g from "../../../fields/DateField.js";
+import "../../../fields/SwitchField.js";
+import "../../../fields/AutocompleteField.js";
+import "../../../fields/AutocompleteConstraintField.js";
+const L = () => ({
+  root: {
+    "& .MuiFormHelperText-root": {
+      display: "none"
+    },
+    "& .MuiInputLabel-root": {
+      display: "none"
+    },
+    "& .MuiInputBase-root": {
+      marginTop: "0px"
+    },
+    marginTop: "0px"
+  }
+}), b = (e) => e.stopPropagation();
+function C(e) {
+  return ({ value: t, onChange: i, ...a }) => {
+    const [r, o] = m(t);
+    f(() => o(t), [t]);
+    const u = () => {
+      t !== r && i({ target: { value: r } });
+    };
+    return /* @__PURE__ */ l(
+      e,
+      {
+        value: r,
+        onChange: (p) => o(p.target.value),
+        onBlur: u,
+        onKeyDown: (p) => {
+          p.key === "Enter" && u();
+        },
+        ...a
+      }
+    );
+  };
+}
+function h(e) {
+  return ({ value: t, onChange: i, ...a }) => /* @__PURE__ */ l(
+    e,
+    {
+      input: {
+        onChange: ({ target: { checked: r } }) => i({ target: { value: r.toString() } }),
+        checked: t === "true"
+      },
+      ...a
+    }
+  );
+}
+const k = C(s), x = h(d);
+function T({ ...e }) {
+  return /* @__PURE__ */ l(s, { type: "number", ...e });
+}
+function c({
+  displayType: e,
+  withAutocomplete: t,
+  autoCompleteHoc: i,
+  type: a,
+  ...r
+}) {
+  let o;
+  if (e === "select")
+    o = y;
+  else
+    switch (a) {
+      case "date":
+        o = g;
+        break;
+      case "boolean":
+        o = x;
+        break;
+      case "integer":
+      case "long":
+      case "float":
+        o = T;
+        break;
+      default:
+        o = t ? i(s) : k;
+        break;
+    }
+  return /* @__PURE__ */ l(o, { ...!t && { onClick: b }, ...r });
+}
+c.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: n.objectOf(n.string),
+  /**
+   * Override styles with className
+   */
+  className: n.string,
+  displayType: n.oneOf(["select"]),
+  type: n.oneOf(["string", "date", "boolean", "integer", "long", "float"]),
+  withAutocomplete: n.bool,
+  autoCompleteHoc: n.func
+};
+c.defaultProps = {
+  className: void 0,
+  classes: {},
+  displayType: void 0,
+  type: void 0,
+  withAutocomplete: !1,
+  autoCompleteHoc: () => {
+  }
+};
+export {
+  c as default,
+  L as styles
+};

package/dist/es/search/querybuilder/QueryInput/index.js

@@ -0,0 +1,6 @@
+import { withStyles as t } from "@material-ui/core";
+import e, { styles as r } from "./QueryInput.js";
+const p = t(r, { name: "VdtQueryInput" })(e);
+export {
+  p as default
+};