@trail-ui/react
Version:
116 lines (113 loc) • 4.42 kB
JavaScript
import {
TanstackTableFacetedFilter
} from "./chunk-W7QHA73Z.mjs";
import {
_TextField
} from "./chunk-N7FI3HGJ.mjs";
import {
_Input
} from "./chunk-VGAQK5WY.mjs";
import {
_Button
} from "./chunk-YXFZGEMT.mjs";
// src/tanstackTable/tanstack-table-toolbar.tsx
import { commonColors } from "@trail-ui/theme";
import { SearchIcon } from "@trail-ui/icons";
import { useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
function TanstackTableToolBar({
table,
data,
columns,
openFilter,
selectedFilterValues,
setSelectedFilterValues
}) {
const isFiltered = table.getState().columnFilters.length > 0;
const getUniqueValues = (data2, columnId) => {
const uniqueValues = /* @__PURE__ */ new Set();
data2.forEach((row) => uniqueValues.add(row[columnId]));
return Array.from(uniqueValues).map((value) => ({ label: value, value }));
};
const filterColumns = columns.filter((column) => column.filterFn === "multiSelectFilter");
const [filterSearch, setFilterSearch] = useState("");
const updatedSearchFilter = filterColumns.filter(
(column) => column.name.toLowerCase().includes(filterSearch.toLowerCase())
);
const applyFilters = () => {
selectedFilterValues.forEach((values, columnId) => {
const column = table.getColumn(columnId);
if (column) {
column.setFilterValue(values.size > 0 ? Array.from(values) : void 0);
}
});
};
return /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-between", children: /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxs("div", { className: "flex max-h-[600px] w-[360px] flex-col justify-between overflow-auto rounded border border-neutral-200 bg-neutral-50 shadow-sm", children: [
/* @__PURE__ */ jsxs("div", { children: [
/* @__PURE__ */ jsx(
_TextField,
{
classNames: {
base: "filter-input ml-3 sticky top-0 bg-neutral-50 z-20",
description: "test"
},
children: /* @__PURE__ */ jsx(
_Input,
{
classNames: {
base: "border-t-0 border-r-0 border-l-0 rounded-none border-b-neutral-200 p-0 h-[45px] hover:p-2 hover:!border-t-0 hover:!border-r-0 hover:!border-l-0 hover:!border-b-[2px] data-[focused=true]:p-2 data-[focused=true]:!border-r-0 data-[focused=true]:!border-l-0 data-[focused=true]:!border-t-0"
},
type: "text",
placeholder: "Search",
value: filterSearch,
onChange: (e) => setFilterSearch(e.target.value),
startContent: /* @__PURE__ */ jsx(SearchIcon, { width: 16, height: 16, color: commonColors.neutral[600] })
}
)
}
),
updatedSearchFilter.length > 0 ? updatedSearchFilter.map((column) => /* @__PURE__ */ jsx(
TanstackTableFacetedFilter,
{
openFilter,
column: table.getColumn(column.id),
title: column.name,
options: getUniqueValues(data, column.id),
selectedFilterValues: selectedFilterValues.get(column.id) || /* @__PURE__ */ new Set(),
setSelectedFilterValues: (values) => {
setSelectedFilterValues(new Map(selectedFilterValues).set(column.id, values));
}
},
column.id
)) : /* @__PURE__ */ jsx("p", { className: "p-4 text-center text-sm text-neutral-900", children: "No Results Found" })
] }),
/* @__PURE__ */ jsxs("div", { className: "flex w-full justify-end gap-3 border-t border-t-neutral-200 bg-neutral-100 px-4 py-3", children: [
/* @__PURE__ */ jsx(
_Button,
{
appearance: "transparent",
isDisabled: !isFiltered,
onPress: () => {
table.resetColumnFilters();
setSelectedFilterValues(/* @__PURE__ */ new Map());
},
className: `${!isFiltered ? "opacity-50" : ""} h-8 !bg-neutral-100 px-2 lg:px-3`,
children: "Clear"
}
),
/* @__PURE__ */ jsx(
_Button,
{
className: `${selectedFilterValues.size < 1 ? "!bg-neutral-200 opacity-50" : ""}`,
isDisabled: selectedFilterValues.size < 1,
onPress: applyFilters,
appearance: "primary",
children: "Apply"
}
)
] })
] }) }) });
}
export {
TanstackTableToolBar
};