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