@rtdui/datatable/cjs/DataTable/FilterEditor.cjs

React DataTable component based on Rtdui components

'use client';
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var core = require('@rtdui/core');

function FilterEditor(props) {
  const { column, table, debouncedWait } = props;
  const firstValue = table.getPreFilteredRowModel().flatRows[0]?.getValue(column.id);
  const columnDataType = core.getType(firstValue);
  const columnFilterValue = column.getFilterValue();
  const showFilterList = column.columnDef.meta?.showFilterList && columnDataType !== "Number";
  const sortedUniqueValues = React.useMemo(() => {
    return Array.from(column.getFacetedUniqueValues().keys()).sort((a, b) => {
      switch (columnDataType) {
        case "Date":
          return a > b ? 1 : a < b ? -1 : 0;
        case "String":
          return String(a).toLowerCase() === String(b).toLowerCase() ? 0 : a > b ? 1 : -1;
        default:
          return a === b ? 0 : a > b ? 1 : -1;
      }
    });
  }, [column.getFacetedUniqueValues()]);
  return columnDataType === "Number" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "font-normal flex gap-1", children: [
    /* @__PURE__ */ jsxRuntime.jsx(
      core.DebouncedInput,
      {
        className: "flex-1",
        size: "xs",
        wait: debouncedWait,
        type: "number",
        min: Number(column.getFacetedMinMaxValues()?.[0] ?? ""),
        max: Number(column.getFacetedMinMaxValues()?.[1] ?? ""),
        placeholder: `\u6700\u5C0F ${column.getFacetedMinMaxValues()?.[0] ? `(${column.getFacetedMinMaxValues()?.[0]})` : ""}`,
        defaultValue: columnFilterValue?.[0] ?? "",
        onChange: (value) => column.setFilterValue((old) => [value, old?.[1]]),
        slots: {
          input: "[--input-padding-left:8px] [--input-padding-right:8px]"
        }
      }
    ),
    /* @__PURE__ */ jsxRuntime.jsx(
      core.DebouncedInput,
      {
        className: "flex-1",
        size: "xs",
        wait: debouncedWait,
        type: "number",
        min: Number(column.getFacetedMinMaxValues()?.[0] ?? ""),
        max: Number(column.getFacetedMinMaxValues()?.[1] ?? ""),
        placeholder: `\u6700\u5927 ${column.getFacetedMinMaxValues()?.[1] ? `(${column.getFacetedMinMaxValues()?.[1]})` : ""}`,
        defaultValue: columnFilterValue?.[1] ?? "",
        onChange: (value) => column.setFilterValue((old) => [old?.[0], value]),
        slots: {
          input: "[--input-padding-left:8px] [--input-padding-right:8px]"
        }
      }
    )
  ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "font-normal dropdown w-full", children: [
    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative rounded-md", children: [
      /* @__PURE__ */ jsxRuntime.jsx(
        core.DebouncedInput,
        {
          tabIndex: 0,
          size: "xs",
          wait: debouncedWait,
          placeholder: `\u8FC7\u6EE4 (${column.getFacetedUniqueValues().size})`,
          value: columnFilterValue ?? "",
          onChange: (value) => column.setFilterValue(value),
          slots: {
            input: "[--input-padding-left:8px] [--input-padding-right:8px]"
          }
        }
      ),
      column.getIsFiltered() && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0.5 flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
        core.CloseButton,
        {
          size: "xs",
          onClick: () => {
            column.setFilterValue(null);
          }
        }
      ) })
    ] }),
    showFilterList && /* @__PURE__ */ jsxRuntime.jsx(
      "ul",
      {
        tabIndex: 0,
        className: "dropdown-content menu p-1 bg-base-200 rounded-md max-h-40 overflow-y-auto flex-nowrap",
        children: sortedUniqueValues.map((value) => /* @__PURE__ */ jsxRuntime.jsx(
          "li",
          {
            onClick: (ev) => {
              ev.currentTarget.parentElement?.blur();
              column.setFilterValue(value);
            },
            children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: value })
          },
          value
        ))
      }
    )
  ] });
}

exports.FilterEditor = FilterEditor;
//# sourceMappingURL=FilterEditor.cjs.map