From 267afa68dd896254fc8f3fd4d0b364c366c980e8 Mon Sep 17 00:00:00 2001
From: Madeorsk <madeorsk@protonmail.com>
Date: Sun, 28 Jul 2024 15:40:42 +0200
Subject: [PATCH] Add column enum filter.

---
 src/Smartable/Filters/EnumFilter.tsx | 69 ++++++++++++++++++++++++++++
 src/styles/_filters.less             | 15 +++++-
 2 files changed, 83 insertions(+), 1 deletion(-)
 create mode 100644 src/Smartable/Filters/EnumFilter.tsx

diff --git a/src/Smartable/Filters/EnumFilter.tsx b/src/Smartable/Filters/EnumFilter.tsx
new file mode 100644
index 0000000..d875272
--- /dev/null
+++ b/src/Smartable/Filters/EnumFilter.tsx
@@ -0,0 +1,69 @@
+import React, {useCallback} from "react";
+import {ColumnFilter, useFilterState} from "../Columns/ColumnFilter";
+import {Select} from "@kernelui/core";
+
+/**
+ * String column filter.
+ */
+export function EnumFilter<OptionKey extends keyof any, Option>(options: Record<OptionKey, Option>): ColumnFilter<OptionKey[], EnumFilterState<OptionKey>>
+{
+	return (
+		{
+			filter: (data: OptionKey|OptionKey[], filterState: EnumFilterState<OptionKey>) => {
+				// Normalized data array.
+				const dataArray = Array.isArray(data) ? data : [data];
+
+				// Nothing in filter value, allow everything.
+				if (!filterState?.value?.length) return true;
+
+				// Get current filter result.
+				return filterState?.value?.some(
+					// Keep the row if any element in data match the current filter value.
+					(optionKey) => dataArray.includes(optionKey)
+				);
+			},
+
+			element: <EnumFilterComponent options={options} />
+		}
+	);
+}
+
+/**
+ * Enumeration filter state.
+ */
+export interface EnumFilterState<OptionKey extends keyof any>
+{
+	/**
+	 * Filter value.
+	 */
+	value: OptionKey[];
+}
+
+/**
+ * Enum filter component.
+ */
+export function EnumFilterComponent<OptionKey extends keyof any, Option>({options}: {
+	/**
+	 * Enum options.
+	 */
+	options: Record<OptionKey, Option>;
+})
+{
+	// Initialize enum filter state.
+	const [enumFilterState, setEnumFilterState] =
+		useFilterState<EnumFilterState<OptionKey>>({ value: [] });
+
+	// Handle filter input change.
+	const handleChange = useCallback((filter: OptionKey[]) => {
+		// Save the current filter value.
+		setEnumFilterState({
+			value: filter,
+		})
+	}, [setEnumFilterState]);
+
+	return (
+		<Select<OptionKey, Option> options={options} multiple={true} size={1}
+		                           className={!enumFilterState.value?.length ? "empty" : undefined}
+		                           value={enumFilterState.value} onChange={handleChange} />
+	)
+}
diff --git a/src/styles/_filters.less b/src/styles/_filters.less
index 7372b72..b5adbee 100644
--- a/src/styles/_filters.less
+++ b/src/styles/_filters.less
@@ -9,9 +9,22 @@ tr.filters
 			padding-left: 0.25em;
 		}
 
-		input
+		input, .select
 		{
+			margin: 0;
 			width: 100%;
 		}
+
+		.select
+		{
+			ul.selected
+			{
+				margin: 0 0 0.25em 0;
+			}
+			&.empty ul.selected
+			{
+				margin: 0;
+			}
+		}
 	}
 }