@azrico/reactgrid 1.5.1 → 1.6.0

package/src/hooks/useGridSearch.tsx

@@ -1,79 +1,106 @@
-import React from 'react';
-import { AzGridProps, DataGridWrapperProps, GridType } from '../types/types';
-import debounce from 'lodash.debounce';
-import { array_intersection, fn_eval } from '@azrico/object';
-
-export function useGridSearch(grid: GridType, props: DataGridWrapperProps) {
-	const [search, set_search] = React.useState('');
-	const [filteredData, set_filteredData] = React.useState<any>([]);
-	const currentSearch = React.useRef('');
-	const currentDS = React.useRef<any[]>([]);
-
-	const try_search = React.useCallback(
-		debounce(() => {
-			if (!Array.isArray(currentDS.current)) {
-				return;
-			}
-			let newData: any[] = [];
-			if (currentSearch.current) {
-				const visibleColumns = grid.visibleColumns;
-				const columns_to_search: string[] = array_intersection(
-					props.advancedFilterFields || [],
-					visibleColumns.map((r) => r.id)
-				);
-				const lowerSearchText = currentSearch.current.toLowerCase().trim();
-				if (!lowerSearchText || columns_to_search.length === 0)
-					newData = currentDS.current;
-				else {
-					newData = currentDS.current.filter((p) => {
-						for (let index = 0; index < columns_to_search.length; index++) {
-							const col = columns_to_search[index];
-							const v = (p[col] + '').toLowerCase(); //value of column
-							if (v && v.indexOf(lowerSearchText) != -1) {
-								//if one column is matching then the row is a match
-								return true;
-							}
-						}
-						return false;
-					});
-				}
-			} else newData = currentDS.current;
-			set_filteredData(newData);
-		}, 1000),
-		[grid]
-	);
-	React.useEffect(() => {
-		fn_eval(props.dataSource).then((r) => {
-			currentDS.current = typeof r === 'object' ? r.data || r : r;
-			searchIfNeeded();
-		});
-	}, [props.dataSource]);
-
-	React.useEffect(() => {
-		currentSearch.current = search;
-		searchIfNeeded();
-	}, [search]);
-
-	function searchIfNeeded() {
-		if (!search) {
-			set_filteredData(props.dataSource);
-		} else try_search();
-	}
-
-	const element = (
-		<>
-			<form className={'azgrid-searcharea'}>
-				<label>
-					Search
-					<input
-						type="text"
-						name="name"
-						value={search}
-						onChange={(e) => set_search(e.target.value)}
-					/>
-				</label>
-			</form>
-		</>
-	);
-	return { filteredData, element };
-}
+import React from 'react';
+import { DataGridWrapperProps } from '../types/types';
+import debounce from 'lodash.debounce';
+import { array_intersection, fn_eval } from '@azrico/object';
+
+const SEARCH_DELAY = 300;
+
+function to_rows(result: any): any[] {
+	return result && typeof result === 'object' ? result.data || result : result;
+}
+//false when the result is only a page of the data (remote pagination)
+function is_complete(result: any) {
+	if (!result || typeof result !== 'object' || Array.isArray(result)) return true;
+	const loaded = Array.isArray(result.data) ? result.data.length : 0;
+	return !(result.count > loaded);
+}
+
+export function useGridSearch(props: DataGridWrapperProps) {
+	const [search, set_search] = React.useState('');
+	// null shows the datasource itself, an array shows search results
+	const [searchResult, set_searchResult] = React.useState<any[] | null>(null);
+	const latestProps = React.useRef(props);
+	latestProps.current = props;
+	// last result the grid loaded, reused by search instead of loading the data again
+	const loaded = React.useRef<{ ds: any; result: any } | null>(null);
+	const searchId = React.useRef(0);
+
+	const trackedDataSource = React.useCallback(
+		async (args: any) => {
+			const result = await fn_eval(props.dataSource, args);
+			loaded.current = { ds: props.dataSource, result };
+			return result;
+		},
+		[props.dataSource]
+	);
+
+	const get_search_rows = React.useCallback(async () => {
+		const ds = latestProps.current.dataSource;
+		const last = loaded.current;
+		if (last && last.ds === ds && is_complete(last.result)) return to_rows(last.result);
+		return to_rows(await fn_eval(ds));
+	}, []);
+
+	const filter_rows = React.useCallback((rows: any[], text: string) => {
+		const { gridRef, advancedFilterFields } = latestProps.current;
+		const visibleColumns = gridRef.current?.visibleColumns;
+		const columns_to_search: string[] = visibleColumns
+			? array_intersection(
+					advancedFilterFields || [],
+					visibleColumns.map((r) => r.id)
+			  )
+			: advancedFilterFields || [];
+		const lowerSearchText = text.toLowerCase().trim();
+		if (!lowerSearchText || columns_to_search.length === 0) return rows;
+		return rows.filter((p) => {
+			for (let index = 0; index < columns_to_search.length; index++) {
+				const col = columns_to_search[index];
+				const v = (p[col] + '').toLowerCase(); //value of column
+				if (v && v.indexOf(lowerSearchText) != -1) {
+					//if one column is matching then the row is a match
+					return true;
+				}
+			}
+			return false;
+		});
+	}, []);
+
+	const run_search = React.useMemo(
+		() =>
+			debounce(async (text: string) => {
+				const id = ++searchId.current;
+				const rows = await get_search_rows();
+				if (id !== searchId.current || !Array.isArray(rows)) return; //a newer search started
+				set_searchResult(filter_rows(rows, text));
+			}, SEARCH_DELAY),
+		[]
+	);
+	React.useEffect(() => () => run_search.cancel(), [run_search]);
+
+	React.useEffect(() => {
+		if (search) {
+			run_search(search);
+			return;
+		}
+		run_search.cancel();
+		searchId.current++;
+		set_searchResult(null);
+	}, [search, props.dataSource]);
+
+	const element = (
+		<>
+			<form className={'azgrid-searcharea'}>
+				<label>
+					Search
+					<input
+						type="text"
+						name="name"
+						value={search}
+						onChange={(e) => set_search(e.target.value)}
+					/>
+				</label>
+			</form>
+		</>
+	);
+	return { filteredData: searchResult ?? trackedDataSource, element };
+}

package/src/types/types.ts

@@ -13,6 +13,8 @@ import {
 	TypeRowProps,
 	TypeRowSelection,
 	TypeComputedProps,
+	TypeSortInfo,
+	TypeGroupBy,
 } from '@inovua/reactdatagrid-community/types';
 
 import { TypeOnSelectionChangeArg } from '@inovua/reactdatagrid-community/types/TypeDataGridProps';
@@ -58,10 +60,22 @@ export type AzGridOptions = Partial<TypeDataGridProps> & {
 	/** extra DOM props for the header row */
 	headerProps?: { [key: string]: any };
 };
+/** arguments passed to a dataSource function */
+export type AzDataSourceParams = {
+	skip?: number;
+	limit?: number;
+	/** current header filters, filter.value is an array of selected ids for a multi-select SelectFilter */
+	filterValue?: TypeFilterValue;
+	sortInfo?: TypeSortInfo;
+	groupBy?: TypeGroupBy;
+	cached_data: React.MutableRefObject<any>;
+	last_cache_info: React.MutableRefObject<any>;
+};
+export type AzDataSourceFunc = (args: AzDataSourceParams) => any[] | Promise<any[] | any>;
 /* -------------------------------------------------------------------------- */
 export type AzGridProps = {
-	dataSource?: any[] | ((args: any) => any[] | Promise<any[] | any>);
-	details_dataSource?: any[] | ((args: any) => any[] | Promise<any[] | any>); //details is rendered under each row
+	dataSource?: any[] | AzDataSourceFunc;
+	details_dataSource?: any[] | AzDataSourceFunc; //details is rendered under each row
 	details_columns?: LooseColumnDefinition[];
 	details_filter?: FilterValues;