Custom Filter Checkpoint 1

avaya-dux · Oct 4, 2024 · de28250 · de28250
1 parent 6e14650
commit de28250
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 31 deletions.
diff --git a/src/components/Table/Table.stories.tsx b/src/components/Table/Table.stories.tsx
@@ -22,7 +22,7 @@ import {
 } from "components";
 import { Button } from "components/Button";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import type { Column, Row } from "react-table";
+import type { Column, Row, TableInstance } from "react-table";
 import { useDebouncedCallback } from "use-debounce";
 import type { IconNamesType } from "utils";
 
@@ -863,22 +863,35 @@ export const CustomBasicTableFilterDrawer = () => {
 	const closeFilterDrawer = () => {
 		setOpenColumnsFilterDrawer(false);
 	};
+
+	const [filtersToApply, setFiltersToApply] = useState([]);
+
+	const handleApply = () => {
+		const theFilters = [
+			{ id: "name", value: "Williams" },
+			{ id: "other", value: "Lorem" },
+		];
+		setFiltersToApply(theFilters);
+		closeFilterDrawer();
+	};
+
 	return (
 		<>
 			<Table
 				columns={FilledFields.columns}
 				handleShowColumnsFilter={handleShowColumnsFilter}
 				allowToggleColumnVisibility
 				data={[...FilledFields.data]}
+				allFilters={filtersToApply}
 			/>
 			<TableFilterDrawer
 				title="Custom Table Filter Drawer"
 				open={openColumnsFilterDrawer}
 				handleCancel={closeFilterDrawer}
+				handleApply={handleApply}
 			>
-				<p>Custom content goes here</p>
-				<br />
-				<p> 'Cancel' and 'Apply' buttons are built-in</p>
+				<TextInput clearable label="Name" type="text" />
+				<TextInput clearable label="Goals" type="text" />
 			</TableFilterDrawer>
 		</>
 	);

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
@@ -114,6 +114,7 @@ export const Table = <T extends Record<string, any>>({
 	handleShowColumnsFilter,
 	handleRowToggled,
 	handlePageChange = () => null,
+	allFilters = [],
 	readonly = false,
 	rowHeight = "large",
 	selectableRows = "none",
@@ -202,8 +203,14 @@ export const Table = <T extends Record<string, any>>({
 		prepareRow,
 		pageCount,
 		toggleAllRowsSelected,
+		setAllFilters,
 	} = instance;
 
+	useEffect(() => {
+		console.log(allFilters);
+		setAllFilters(allFilters);
+	}, [allFilters, setAllFilters]);
+
 	const handleSearchWrapper = useMemo(() => {
 		if (handleSearch) {
 			return (searchString: string, pageSize: number) => {

diff --git a/src/components/Table/types/TableTypes.ts b/src/components/Table/types/TableTypes.ts
@@ -76,30 +76,31 @@ export type RowHeight = "compact" | "medium" | "large";
 export type SortType = "asc" | "desc" | "unsorted";
 
 export type TableProps<T extends AnyRecord> = {
-	caption?: string;
-	id?: string;
-	manualPagination?: boolean;
-	manualRowCount?: number;
-	manualColumnFilters?: boolean;
-	manualSortBy?: boolean;
-	onManualSortBy?: (columnId: string, sortType: SortType) => void;
-	showPagination?: boolean;
-	pushPaginationDown?: boolean;
-	draggableRows?: boolean;
-	handlePageChange?: (pageIndex: number, pageSize: number) => void;
-	itemsPerPageOptions?: number[];
-	initialStatePageIndex?: number;
-	initialStatePageSize?: number;
-	defaultSelectedRowIds?: string[];
-	showRowSeparator?: boolean;
-	showRowSelectionHelper?: boolean;
-	summary?: string;
-	containerClassName?: string;
-	translations?: ITableTranslations;
-} & ToolbarSharedProps<T> &
-	TableOptions<T> &
-	Pick<TableColumnFilterProps, "onApplyFilterValue" | "onCancelFilterValue"> &
-	Pick<TableBodyProps<T>, "handleRowToggled"> &
-	Partial<
-		Pick<IFilterContext, "allowToggleColumnVisibility" | "renderInsetTable">
-	>;
+		caption?: string;
+		id?: string;
+		manualPagination?: boolean;
+		manualRowCount?: number;
+		manualColumnFilters?: boolean;
+		manualSortBy?: boolean;
+		onManualSortBy?: (columnId: string, sortType: SortType) => void;
+		showPagination?: boolean;
+		pushPaginationDown?: boolean;
+		draggableRows?: boolean;
+		handlePageChange?: (pageIndex: number, pageSize: number) => void;
+		allFilters?: any[];
+		itemsPerPageOptions?: number[];
+		initialStatePageIndex?: number;
+		initialStatePageSize?: number;
+		defaultSelectedRowIds?: string[];
+		showRowSeparator?: boolean;
+		showRowSelectionHelper?: boolean;
+		summary?: string;
+		containerClassName?: string;
+		translations?: ITableTranslations;
+	} & ToolbarSharedProps<T> &
+		TableOptions<T> &
+		Pick<TableColumnFilterProps, "onApplyFilterValue" | "onCancelFilterValue"> &
+		Pick<TableBodyProps<T>, "handleRowToggled"> &
+		Partial<
+			Pick<IFilterContext, "allowToggleColumnVisibility" | "renderInsetTable">
+		>;