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

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

@@ -0,0 +1,138 @@
+import { jsx as l } from "react/jsx-runtime";
+import { useMemo as x, useCallback as C, useState as Q } from "react";
+import S from "clsx";
+import e from "prop-types";
+import { TreeView as v } from "@material-ui/lab";
+import c from "@vidispine/proptypes";
+import { uuidv4 as N } from "../../../utils.js";
+import { QueryBuilderContextProvider as P } from "../QueryBuilderContext.js";
+import R from "../QueryEntry/index.js";
+const w = (o) => ({
+  root: {},
+  treeRoot: {
+    backgroundColor: o.palette.background.paper,
+    "& > .MuiTreeItem-root:first-child": {
+      backgroundColor: "transparent",
+      margin: "0",
+      border: "none"
+    }
+  }
+}), j = (o) => {
+  function n({ uuid: i, ...a }) {
+    const s = a.operation, u = ({ operation: r, value: p, range: t } = {}) => r ? "operator" : p || t ? "field" : "group";
+    return {
+      ...s ? {
+        operation: a.operation,
+        operator: a.entry.filter((r) => r.operation).map((r) => n(r))
+      } : { name: a.name },
+      field: a.entry.filter((r) => u(r) === "field").map(({ uuid: r, predicate: p, ...t }) => t),
+      group: a.entry.filter((r) => u(r) === "group").map((r) => n(r))
+    };
+  }
+  return o && o.operator && { operator: n(o.operator) };
+}, k = (o) => {
+  const n = ({ operation: i, name: a, operator: s, field: u, group: r, entry: p } = {}) => ({
+    ...i ? { operation: i } : { name: a },
+    entry: [
+      ...u || [],
+      ...(s || []).map((t) => n(t)),
+      ...(r || []).map((t) => n(t)),
+      ...p || []
+    ].map((t) => ({ uuid: N(), ...t }))
+  });
+  return o && o.operator && { operator: n(o.operator) };
+};
+function T({
+  classes: o,
+  className: n,
+  query: i,
+  fields: a,
+  groups: s,
+  defaultField: u,
+  defaultGroup: r,
+  onChange: p,
+  QueryEntryComponent: t,
+  QueryEntryProps: h
+}) {
+  const m = x(() => k(i), [i]), O = C(
+    (d) => {
+      p({
+        ...d,
+        toItemSearchDocument() {
+          return j(this);
+        }
+      });
+    },
+    [p]
+  ), [y, g] = Q(["operator"]), b = (d, f) => {
+    g(f);
+  }, E = (d) => {
+    y.includes(d) || g((f) => [...f, d]);
+  };
+  return /* @__PURE__ */ l("div", { className: S(n, o.root, "VdtQueryBuilder-root"), children: m ? /* @__PURE__ */ l(P, { query: m, onChange: O, children: /* @__PURE__ */ l(
+    v,
+    {
+      classes: { root: o.treeRoot },
+      disableSelection: !0,
+      expanded: y,
+      onNodeToggle: b,
+      children: /* @__PURE__ */ l(
+        t,
+        {
+          expandNode: E,
+          path: "operator",
+          defaultField: u,
+          defaultGroup: r,
+          fields: a,
+          groups: s,
+          canExpand: !1,
+          ...h
+        }
+      )
+    }
+  ) }) : null });
+}
+T.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.objectOf(e.string),
+  /**
+   * Override styles with className
+   */
+  className: e.string,
+  query: e.oneOfType([
+    e.shape({
+      operation: e.oneOf(["AND", "OR", "NOT"]).isRequired,
+      entry: e.arrayOf(
+        e.oneOfType([
+          c.SearchOperatorType,
+          c.SearchFieldType,
+          c.SearchGroupType
+        ])
+      )
+    }),
+    c.ItemSearchType
+  ]).isRequired,
+  groups: e.arrayOf(e.any),
+  fields: e.arrayOf(e.any),
+  defaultField: e.oneOfType([e.string, e.objectOf(e.any)]),
+  defaultGroup: e.string,
+  onChange: e.func.isRequired,
+  QueryEntryComponent: e.elementType,
+  QueryEntryProps: e.objectOf(e.any)
+};
+T.defaultProps = {
+  className: void 0,
+  classes: {},
+  fields: [],
+  groups: [],
+  defaultField: void 0,
+  defaultGroup: void 0,
+  QueryEntryComponent: R,
+  QueryEntryProps: {}
+};
+export {
+  T as default,
+  w as styles
+};

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

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

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

@@ -0,0 +1,150 @@
+import { jsxs as d, jsx as s } from "react/jsx-runtime";
+import { useState as f } from "react";
+import A from "clsx";
+import e from "prop-types";
+import { Paper as I, Button as c, DialogActions as v } from "@material-ui/core";
+import C from "@vidispine/proptypes";
+import Q from "../QueryBuilder/index.js";
+const E = (a) => ({
+  root: { padding: a.spacing(1) },
+  resetButton: {},
+  searchButton: {},
+  DialogActions: {},
+  errorButton: {
+    color: a.palette.error.light,
+    float: "left"
+  },
+  successButton: {
+    color: a.palette.success.light,
+    float: "left"
+  }
+});
+function h({
+  className: a,
+  classes: t,
+  resetText: y,
+  searchText: g,
+  onSubmit: p,
+  itemSearchDocument: i,
+  initialOperator: l,
+  fields: B,
+  groups: O,
+  QueryBuilderProps: P,
+  PaperProps: D,
+  resetButtonProps: N,
+  searchButtonProps: T,
+  showGeneralOperator: b
+}) {
+  const [r, j] = f(l), [n, u] = f({
+    operator: r,
+    ...i
+  }), x = () => {
+    j(
+      r.operation === "AND" ? { operation: "OR" } : { operation: "AND" }
+    );
+  }, S = () => {
+    const o = {
+      ...i,
+      operator: l
+    };
+    u(o), p(o);
+  }, m = () => {
+    const o = {
+      ...i,
+      ...n.toItemSearchDocument ? n.toItemSearchDocument() : n
+    };
+    o.operator.operation = r.operation, p(o);
+  };
+  return /* @__PURE__ */ d(
+    I,
+    {
+      className: A(t.root, a),
+      onKeyPress: (o) => {
+        o.key === "Enter" && m();
+      },
+      variant: "outlined",
+      elevation: 0,
+      square: !0,
+      ...D,
+      children: [
+        b && /* @__PURE__ */ s(
+          c,
+          {
+            className: r && r.operation === "AND" ? t.successButton : t.errorButton,
+            edge: "end",
+            onClick: x,
+            size: "small",
+            children: r && r.operation
+          }
+        ),
+        /* @__PURE__ */ s(
+          Q,
+          {
+            query: n,
+            fields: B,
+            groups: O,
+            onChange: u,
+            ...P
+          }
+        ),
+        /* @__PURE__ */ d(v, { className: t.DialogActions, children: [
+          /* @__PURE__ */ s(c, { className: t.resetButton, onClick: S, ...N, children: y }),
+          /* @__PURE__ */ s(
+            c,
+            {
+              className: t.searchButton,
+              variant: "contained",
+              color: "primary",
+              onClick: m,
+              ...T,
+              children: g
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+h.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.objectOf(e.string),
+  /**
+   * Override styles with className
+   */
+  className: e.string,
+  resetText: e.string,
+  searchText: e.string,
+  onSubmit: e.func.isRequired,
+  itemSearchDocument: C.ItemSearchType,
+  initialOperator: e.objectOf(e.any),
+  fields: e.arrayOf(
+    e.shape({ name: e.string, label: e.string, type: e.string })
+  ),
+  groups: e.arrayOf(e.shape({ name: e.string })),
+  PaperProps: e.objectOf(e.any),
+  QueryBuilderProps: e.objectOf(e.any),
+  resetButtonProps: e.objectOf(e.any),
+  searchButtonProps: e.objectOf(e.any),
+  showGeneralOperator: e.bool
+};
+h.defaultProps = {
+  className: void 0,
+  classes: {},
+  resetText: "Reset",
+  searchText: "Search",
+  fields: void 0,
+  groups: void 0,
+  itemSearchDocument: {},
+  initialOperator: { operation: "AND" },
+  PaperProps: {},
+  QueryBuilderProps: {},
+  resetButtonProps: {},
+  searchButtonProps: {},
+  showGeneralOperator: !0
+};
+export {
+  h as default,
+  E as styles
+};

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

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

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

@@ -0,0 +1,50 @@
+import { jsx as f } from "react/jsx-runtime";
+import { createContext as x, useMemo as g, useContext as p, useCallback as d } from "react";
+import v from "lodash.clonedeep";
+import a from "lodash.constant";
+import c from "lodash.get";
+import C from "lodash.updatewith";
+import { uuidv4 as b } from "../../utils.js";
+const m = x(void 0);
+function O({ query: e, onChange: n, children: o }) {
+  const u = g(() => ({ query: e, onChange: n }), [n, e]);
+  return /* @__PURE__ */ f(m.Provider, { value: u, children: o });
+}
+const W = (e) => {
+  const n = p(m);
+  if (n === void 0)
+    throw new Error("useQueryBuilder must be used within a QueryBuilderContextProvider");
+  const { query: o, onChange: u } = n, i = d(
+    (t, r) => {
+      u(C(v(o), t, r));
+    },
+    [u, o]
+  ), s = d(
+    (t, r) => i(t, a(r)),
+    [i]
+  );
+  return {
+    getEntry: () => c(o, e),
+    addEntry: (t) => {
+      i(`${e}.entry`, (r) => [...r, { ...t, uuid: b() }]);
+    },
+    removeEntry: () => {
+      const t = e.split(".").pop(), r = Number(t);
+      i(
+        e.substring(0, e.length - `.${t}`.length),
+        (l) => l.filter((B, y) => y !== r)
+      );
+    },
+    changeOperation: (t) => s(`${e}.operation`, t),
+    changeEntry: (t) => i(e, ({ uuid: r }) => ({ uuid: r, ...t })),
+    setNot: (t) => {
+      const r = c(o, e);
+      t ? s(e, { operation: "NOT", entry: [r], uuid: r.uuid }) : s(e.substring(0, e.length - 8), r);
+    }
+  };
+};
+export {
+  m as QueryBuilderContext,
+  O as QueryBuilderContextProvider,
+  W as useQueryBuilder
+};

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

@@ -0,0 +1,61 @@
+import { jsx as s } 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: r,
+  onChange: l,
+  InputComponent: p,
+  ...i
+}) {
+  const m = (o) => ({
+    name: r.name,
+    value: [{ value: `*${o}*` }]
+  }), u = f(r, "value.0.value", "");
+  return /* @__PURE__ */ s("div", { className: c(a.root, n), children: /* @__PURE__ */ s(
+    p,
+    {
+      value: u.replaceAll("*", ""),
+      onChange: (o) => l(m(o.target.value)),
+      ...i
+    }
+  ) });
+}
+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/QueryContains/index.js

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

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

@@ -0,0 +1,227 @@
+import { jsx as d } from "react/jsx-runtime";
+import { useCallback as J } from "react";
+import K from "clsx";
+import e from "prop-types";
+import { alpha as I } from "@material-ui/core/styles";
+import { ChevronRight as V, ExpandMore as W } from "@material-ui/icons";
+import { TreeItem as X } from "@material-ui/lab";
+import { useQueryBuilder as Y } from "../QueryBuilderContext.js";
+import Z from "../QueryField/index.js";
+import ee from "../QueryGroup/index.js";
+import oe from "../QueryOperator/index.js";
+const ye = (o) => ({
+  root: {
+    "&:focus > .MuiTreeItem-content .MuiTreeItem-label": {
+      backgroundColor: "transparent"
+    },
+    "&:hover > .MuiTreeItem-content .MuiTreeItem-label": {
+      backgroundColor: "transparent"
+    },
+    padding: "5px"
+  },
+  queryGroup: {
+    position: "relative",
+    border: `1px solid ${I(o.palette.text.primary, 0.05)}`,
+    backgroundColor: I(o.palette.text.primary, 0.02),
+    borderRadius: "4px",
+    margin: "1rem 1rem 1rem 0",
+    "& .MuiTreeItem-iconContainer": {
+      position: "absolute",
+      left: "12px"
+    }
+  }
+});
+function re(o) {
+  return o.operation ? "operator" : o.value || o.range ? "field" : "group";
+}
+function f({
+  canExpandpath: o,
+  path: i,
+  fields: c,
+  groups: n,
+  defaultField: P,
+  defaultGroup: te,
+  not: g,
+  nodeId: R,
+  canExpand: E,
+  parentGroup: ne,
+  onRemove: $,
+  ...y
+}) {
+  const {
+    expandNode: G,
+    OperatorComponent: L,
+    OperatorProps: M,
+    FieldComponent: j,
+    FieldProps: Q,
+    GroupComponent: k,
+    GroupProps: A,
+    getFieldLabel: q,
+    getFieldName: v,
+    getGroupLabel: w,
+    getGroupName: u,
+    getGroupFields: B,
+    getGroupGroups: D,
+    classes: T
+  } = y, { getEntry: S, addEntry: h, removeEntry: N, changeOperation: U, changeEntry: b, setNot: F } = Y(i), r = S(i), a = re(r), p = R || i, _ = P || c.length > 0 ? v(c[0]) : void 0, l = a === "group" ? B(n.find((t) => u(t) === u(r)) || {}) : c, s = a === "group" ? v(l[0]) : _, m = a === "group" ? D(n.find((t) => u(t) === r.name) || {}) : n, z = m && m.length > 0 ? m[0].name : void 0, O = J(
+    (...t) => {
+      h(...t), G && G(p);
+    },
+    [h, p, G]
+  ), x = $ || N;
+  if (r.operation && r.operation === "NOT")
+    return /* @__PURE__ */ d(
+      f,
+      {
+        nodeId: p,
+        path: `${i}.entry.0`,
+        fields: l,
+        defaultField: s,
+        groups: n,
+        onRemove: N,
+        parentGroup: a === "group" ? r.name : void 0,
+        not: !0,
+        ...y
+      }
+    );
+  const H = ({ uuid: t, ...C }) => C;
+  return /* @__PURE__ */ d(
+    X,
+    {
+      nodeId: p,
+      className: K(a !== "field" && T.queryGroup, T.root),
+      expandIcon: E ? /* @__PURE__ */ d(V, {}) : null,
+      collapseIcon: E ? /* @__PURE__ */ d(W, {}) : null,
+      label: {
+        operator: /* @__PURE__ */ d(
+          L,
+          {
+            operator: r,
+            not: g,
+            onAddEntry: O,
+            onRemove: p !== "operator" ? x : void 0,
+            onChangeOperation: p !== "operator" ? U : void 0,
+            onChange: b,
+            setNot: p !== "operator" ? F : void 0,
+            defaultField: s,
+            defaultGroup: n && n.length > 0 ? n[0].name : void 0,
+            ...M
+          }
+        ),
+        field: /* @__PURE__ */ d(
+          j,
+          {
+            field: H(r),
+            fields: l,
+            getFieldLabel: q,
+            getFieldName: v,
+            not: g,
+            onRemove: x,
+            onChange: b,
+            setNot: F,
+            ...Q
+          }
+        ),
+        group: /* @__PURE__ */ d(
+          k,
+          {
+            group: r,
+            groups: n,
+            not: g,
+            onAddEntry: O,
+            onRemove: x,
+            setNot: F,
+            defaultField: s,
+            defaultGroup: z,
+            getGroupLabel: w,
+            getGroupName: u,
+            onChange: b,
+            ...A
+          }
+        )
+      }[a],
+      children: r.entry && r.entry.map((t, C) => /* @__PURE__ */ d(
+        f,
+        {
+          nodeId: `${p}.entry.${t.uuid}`,
+          path: `${i}.entry.${C}`,
+          fields: l,
+          groups: m,
+          defaultField: s,
+          parentEntryType: a,
+          parentGroup: a === "group" ? r.name : void 0,
+          ...y
+        },
+        `${i}.entry.${t.uuid}`
+      ))
+    }
+  );
+}
+f.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.objectOf(e.string),
+  /**
+   * Override styles with className
+   */
+  className: e.string,
+  OperatorComponent: e.elementType,
+  OperatorProps: e.objectOf(e.any),
+  FieldComponent: e.elementType,
+  FieldProps: e.objectOf(e.any),
+  GroupComponent: e.elementType,
+  GroupProps: e.objectOf(e.any),
+  not: e.bool,
+  nodeId: e.string,
+  canExpand: e.bool,
+  getFieldLabel: e.func,
+  getFieldName: e.func,
+  getGroupLabel: e.func,
+  getGroupName: e.func,
+  getGroupFields: e.func,
+  getGroupGroups: e.func,
+  defaultField: e.string,
+  defaultGroup: e.string,
+  canExpandpath: e.bool,
+  path: e.string,
+  expandNode: e.func,
+  groups: e.arrayOf(e.any),
+  fields: e.arrayOf(e.any),
+  parentEntryType: e.string,
+  parentGroup: e.string,
+  onRemove: e.func
+};
+f.defaultProps = {
+  className: void 0,
+  classes: {},
+  FieldComponent: Z,
+  FieldProps: {},
+  GroupComponent: ee,
+  GroupProps: {},
+  OperatorComponent: oe,
+  OperatorProps: {},
+  not: !1,
+  nodeId: void 0,
+  canExpand: !0,
+  getFieldLabel: ({ label: o } = {}) => o,
+  getFieldName: ({ name: o } = {}) => o,
+  getGroupLabel: ({ label: o } = {}) => o,
+  getGroupName: ({ name: o } = {}) => o,
+  getGroupFields: ({ fields: o = [] } = {}) => o,
+  getGroupGroups: ({ groups: o = [] } = {}) => o,
+  defaultField: void 0,
+  defaultGroup: void 0,
+  canExpandpath: void 0,
+  path: void 0,
+  expandNode: void 0,
+  groups: [],
+  fields: [],
+  parentEntryType: void 0,
+  parentGroup: void 0,
+  onRemove: void 0
+};
+export {
+  f as default,
+  ye as styles
+};

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

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