@lobehub/ui/es/base-ui/Table/FilterMenu.mjs

Lobe UI is an open-source UI component library for building AIGC web apps

"use client";
import Icon from "../../Icon/Icon.mjs";
import DropdownMenu from "../DropdownMenu/DropdownMenu.mjs";
import { styles } from "./style.mjs";
import { memo } from "react";
import { jsx } from "react/jsx-runtime";
import { cx } from "antd-style";
import { ListFilter } from "lucide-react";
//#region src/base-ui/Table/FilterMenu.tsx
const FilterMenu = memo(({ filters, label, onChange, value }) => {
	const items = [
		...filters.map((filter) => ({
			checked: value.includes(filter.value),
			closeOnClick: false,
			key: String(filter.value),
			label: filter.text,
			onCheckedChange: (checked) => onChange(checked ? [...value, filter.value] : value.filter((item) => item !== filter.value)),
			type: "checkbox"
		})),
		{ type: "divider" },
		{
			disabled: value.length === 0,
			key: "__reset",
			label: "Reset",
			onClick: () => onChange([])
		}
	];
	return /* @__PURE__ */ jsx(DropdownMenu, {
		items,
		children: /* @__PURE__ */ jsx("button", {
			"aria-label": `Filter ${label}`,
			className: cx(styles.filterButton, value.length > 0 && styles.filterActive),
			type: "button",
			children: /* @__PURE__ */ jsx(Icon, {
				icon: ListFilter,
				size: 12
			})
		})
	});
});
FilterMenu.displayName = "TableFilterMenu";
//#endregion
export { FilterMenu as default };

//# sourceMappingURL=FilterMenu.mjs.map