koval-ui/dist/src/lib/DataTable/dialogs/FilterDialog.js

React components collection with minimalistic design. Supports theming, layout, and input validation.

"use client";
import { jsx as c, jsxs as w } from "react/jsx-runtime";
import { memo as E, useMemo as s, useState as C, useEffect as u, useCallback as p } from "react";
import { IconFilter as O } from "../../../internal/Icons/IconFilter.js";
import { IconFilterOff as q } from "../../../internal/Icons/IconFilterOff.js";
import { IconColumns as z } from "../../../internal/Icons/IconColumns.js";
import F from "./Dialog.module.css.js";
import { ColumnTypes as i } from "../types.js";
import { NumberRangeField as d } from "./NumberRangeField.js";
import { DateRangeField as G } from "./DateRangeField.js";
import { TextField as B } from "./TextField.js";
import { useDialogState as H } from "../../Dialog/useDialogState.js";
import { Dialog as J } from "../../Dialog/Dialog.js";
import { FormField as K } from "../../FormField/FormField.js";
import { Select as L } from "../../Select/Select.js";
const Q = {
  [i.text]: B,
  [i.currency]: d,
  [i.decimal]: d,
  [i.unit]: d,
  [i.percentage]: d,
  [i.select]: B,
  [i.date]: G
}, U = E(({ id: D, onApplyFiler: m, columnFilters: v, tableContext: n }) => {
  const { dialogParams: o, closeDialog: a } = H(D), g = s(
    () => n.getAllColumns().map((e) => {
      var l, f;
      return {
        id: e.id,
        name: (l = e.columnDef.meta) == null ? void 0 : l.name,
        type: (f = e.columnDef.meta) == null ? void 0 : f.type,
        filterable: e == null ? void 0 : e.getCanFilter()
      };
    }).filter(({ filterable: e }) => e),
    [n]
  ), [t, I] = C(
    o == null ? void 0 : o.columnId
  );
  u(() => {
    o != null && o.columnId && I(o == null ? void 0 : o.columnId);
  }, [o == null ? void 0 : o.columnId]);
  const V = p((e) => {
    I(e.target.value);
  }, []), [S, T] = C(i.text);
  u(() => {
    var l;
    const e = ((l = g.find(({ id: f }) => f === t)) == null ? void 0 : l.type) || i.text;
    T(e);
  }, [g, t, T]);
  const N = s(
    () => {
      var e, l;
      return t && ((l = (e = n.getColumn(t)) == null ? void 0 : e.columnDef.meta) == null ? void 0 : l.filterInput);
    },
    [t, n]
  ), j = s(
    () => N || Q[S],
    [N, S]
  ), h = s(() => {
    const e = v.find(({ id: l }) => l === t);
    return (e == null ? void 0 : e.value) !== void 0 ? e == null ? void 0 : e.value : "";
  }, [v, t]), [r, y] = C(h);
  u(() => {
    y("");
  }, [t]);
  const x = Array.isArray(r) ? r.every((e) => !!e) : !!r;
  u(() => {
    y(h);
  }, [h]);
  const A = p((e) => {
    y(e);
  }, []), R = p(() => {
    m({ column: t, filter: r }), a();
  }, [a, r, m, t]), k = p(() => {
    m({ column: t, filter: "" }), a();
  }, [a, m, t]), M = s(
    () => [
      [
        { title: "Reset filter", onClick: k, icon: q },
        {
          title: "Apply filter",
          icon: O,
          onClick: R,
          type: "success",
          disabled: !x
        }
      ]
    ],
    [R, k, x]
  ), b = s(() => {
    var e, l;
    return typeof t == "string" ? (l = (e = n.getColumn(t)) == null ? void 0 : e.columnDef.meta) == null ? void 0 : l.cellProps : {};
  }, [t, n]);
  return /* @__PURE__ */ c(
    J,
    {
      animation: "scale-in",
      showCloseButton: !1,
      dialogTitle: "Filter column",
      id: D,
      className: F.dialog,
      actions: M,
      children: /* @__PURE__ */ w("div", { className: F.fieldset, children: [
        /* @__PURE__ */ c(K, { className: F.field, label: "Column:", children: /* @__PURE__ */ c(
          L,
          {
            prefix: z,
            value: t,
            onChange: V,
            children: g.map(({ id: e, name: l }) => /* @__PURE__ */ c("option", { value: e, children: l }, e))
          }
        ) }),
        /* @__PURE__ */ c(
          j,
          {
            value: r,
            onChange: A,
            cellProps: b
          }
        )
      ] })
    }
  );
});
U.displayName = "FilterDialog";
export {
  U as FilterDialog
};
//# sourceMappingURL=FilterDialog.js.map