@azrico/reactgrid 1.4.1 → 1.5.2

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

@@ -42,6 +42,8 @@ export type loose_column_fields = loose_column_names & {
 	title: string;
 	type: string;
 	items: any[];
+	/** accessible name for cells whose visible text isn't descriptive (icons, badges, ...), set as aria-label */
+	ariaLabel: (value: any, data: any) => string;
 };
 export type LooseColumnDefinition = Partial<loose_column_fields & ColumnDefinition>;
 //
@@ -50,7 +52,12 @@ export type CustomColumnDefinition = {
 	name: string;
 	render: (cell: any, formatterParams, onRendered) => React.ReactNode | undefined | null;
 };
-export type AzGridOptions = Partial<TypeDataGridProps>;
+export type AzGridOptions = Partial<TypeDataGridProps> & {
+	/** called for every rendered row, after the grid's own row attributes are set */
+	onRenderRow?: (rowProps: any) => void;
+	/** extra DOM props for the header row */
+	headerProps?: { [key: string]: any };
+};
 /* -------------------------------------------------------------------------- */
 export type AzGridProps = {
 	dataSource?: any[] | ((args: any) => any[] | Promise<any[] | any>);
@@ -59,6 +66,8 @@ export type AzGridProps = {
 	details_filter?: FilterValues;
 
 	licenseKey?: string;
+	/** accessible name of the grid, set as aria-label on the grid root */
+	ariaLabel?: string;
 
 	gridRef?: React.MutableRefObject<TypeComputedProps>;
 	gridOptions?: AzGridOptions;
@@ -117,6 +126,8 @@ export type DataGridWrapperProps = ModifyFields<
 	DataGridProps,
 	{
 		gridRef: React.MutableRefObject<TypeComputedProps>;
+		/** internal: inovua's live computed props ref (gridRef holds a snapshot) */
+		liveGridRef: React.MutableRefObject<React.MutableRefObject<TypeComputedProps> | null>;
 		static_gridOptions: AzGridOptions;
 		dynamic_gridOptions: AzGridOptions;
 		children?: React.ReactNode;