@azrico/reactgrid 1.5.1 → 1.5.2

package/src/func/func_child.ts

@@ -1,83 +1,92 @@
-type mrow = { __parent__table_id: any; __table_id: any; __children?: any[] };
-type converted_row = { parent: any; self: any; data: mrow };
-
-function getParentId(obj) {
-	return obj.__parent__table_id ?? obj.parentid ?? obj.parent;
-}
-function getSelfId(obj) {
-	return obj.__table_id ?? obj._id;
-}
-//given an array of rows, fixes parent,child relations
-export function fix_parent_child_relations<T extends mrow>(rows: T[]): T[] {
-	if (!Array.isArray(rows)) rows = [];
-	const anyparentid = rows.find((r) => getParentId(r));
-	const anyselfid = rows.find((r) => getSelfId(r));
-	if (!anyparentid || !anyselfid) return rows;
-
-	const converted_rows: converted_row[] = rows
-		.filter((r) => r != null)
-		.map((r) => {
-			return { parent: getParentId(r), self: getSelfId(r), data: r };
-		});
-
-	const top_level_rows: converted_row[] = converted_rows.filter((r) => !r.parent);
-	const any_child = converted_rows.find((r) => Boolean(r.parent));
-	if (any_child) {
-		//find children of top-level parents:
-		for (let index = 0; index < top_level_rows.length; index++) {
-			const mrow = top_level_rows[index];
-			assign_children(mrow, converted_rows);
-		}
-	}
-	return top_level_rows.map((r) => r.data) as T[];
-}
-
-function assign_children(row: converted_row, all_rows: converted_row[]) {
-	const my_children = all_rows.filter((s) => row.self == s.parent);
-	if (my_children.length > 0) {
-		//find children of my children:
-		for (let index = 0; index < my_children.length; index++) {
-			const child = my_children[index];
-			assign_children(child, all_rows);
-		}
-		row.data.__children = my_children.map((r) => r.data);
-	} else if (!Array.isArray(row.data.__children) || row.data.__children.length == 0)
-		row.data.__children = undefined;
-}
-export class func_selection {
-	static getVirtualElement(x = 0, y = 0) {
-		const boundsRect = func_selection.generateGetBoundingClientRect(x, y); 
-		return {
-			getBoundingClientRect: boundsRect,
-		};
-	}
-	static generateGetBoundingClientRect(x = 0, y = 0) {
-		return () => ({
-			width: 0,
-			height: 0,
-			top: y,
-			right: x,
-			bottom: y,
-			left: x,
-		});
-	}
-	static get_selectedText(): string {
-		var text: any = '';
-		if (window.getSelection) {
-			text = window.getSelection()?.toString();
-		} else if (
-			(document as any).selection &&
-			(document as any).selection.type != 'Control'
-		) {
-			text = (document as any).selection.createRange()?.text;
-		}
-		return text || '';
-	}
-	static has_selection(): boolean {
-		const slct = window.getSelection();
-		if (slct == null) return false;
-		if (slct.type == null) return func_selection.get_selectedText().length !== 0;
-		if (slct.type === 'Range') return true;
-		return false;
-	}
-}
+type mrow = { __parent__table_id: any; __table_id: any; __children?: any[] };
+type converted_row = { parent: any; self: any; data: mrow };
+
+function getParentId(obj) {
+	return obj.__parent__table_id ?? obj.parentid ?? obj.parent;
+}
+function getSelfId(obj) {
+	return obj.__table_id ?? obj._id;
+}
+//given an array of rows, fixes parent,child relations
+export function fix_parent_child_relations<T extends mrow>(rows: T[]): T[] {
+	if (!Array.isArray(rows)) rows = [];
+	const anyparentid = rows.find((r) => getParentId(r));
+	const anyselfid = rows.find((r) => getSelfId(r));
+	if (!anyparentid || !anyselfid) return rows;
+
+	const converted_rows: converted_row[] = rows
+		.filter((r) => r != null)
+		.map((r) => {
+			return { parent: getParentId(r), self: getSelfId(r), data: r };
+		});
+
+	const top_level_rows: converted_row[] = converted_rows.filter((r) => !r.parent);
+	//group rows by parent id once, instead of scanning all rows for every parent
+	const children_by_parent = new Map<string, converted_row[]>();
+	for (let index = 0; index < converted_rows.length; index++) {
+		const r = converted_rows[index];
+		if (!r.parent) continue;
+		const key = String(r.parent);
+		const siblings = children_by_parent.get(key);
+		if (siblings) siblings.push(r);
+		else children_by_parent.set(key, [r]);
+	}
+	if (children_by_parent.size > 0) {
+		//find children of top-level parents:
+		for (let index = 0; index < top_level_rows.length; index++) {
+			const mrow = top_level_rows[index];
+			assign_children(mrow, children_by_parent);
+		}
+	}
+	return top_level_rows.map((r) => r.data) as T[];
+}
+
+function assign_children(row: converted_row, children_by_parent: Map<string, converted_row[]>) {
+	const my_children = row.self == null ? undefined : children_by_parent.get(String(row.self));
+	if (my_children && my_children.length > 0) {
+		//find children of my children:
+		for (let index = 0; index < my_children.length; index++) {
+			const child = my_children[index];
+			assign_children(child, children_by_parent);
+		}
+		row.data.__children = my_children.map((r) => r.data);
+	} else if (!Array.isArray(row.data.__children) || row.data.__children.length == 0)
+		row.data.__children = undefined;
+}
+export class func_selection {
+	static getVirtualElement(x = 0, y = 0) {
+		const boundsRect = func_selection.generateGetBoundingClientRect(x, y); 
+		return {
+			getBoundingClientRect: boundsRect,
+		};
+	}
+	static generateGetBoundingClientRect(x = 0, y = 0) {
+		return () => ({
+			width: 0,
+			height: 0,
+			top: y,
+			right: x,
+			bottom: y,
+			left: x,
+		});
+	}
+	static get_selectedText(): string {
+		var text: any = '';
+		if (window.getSelection) {
+			text = window.getSelection()?.toString();
+		} else if (
+			(document as any).selection &&
+			(document as any).selection.type != 'Control'
+		) {
+			text = (document as any).selection.createRange()?.text;
+		}
+		return text || '';
+	}
+	static has_selection(): boolean {
+		const slct = window.getSelection();
+		if (slct == null) return false;
+		if (slct.type == null) return func_selection.get_selectedText().length !== 0;
+		if (slct.type === 'Range') return true;
+		return false;
+	}
+}

package/src/hooks/useColumnData.ts

@@ -1,34 +1,28 @@
-import React from 'react';
-import {
-	AzGridProps,
-	DataGridWrapperProps,
-	GridType,
-	LooseColumnDefinition,
-} from '../types/types';
-import { applyColumnData, find_realData, get_row_id } from '../func/func_grid';
-import { func_selection } from '../func/func_child';
-
-export function useColumnData(
-	inputOrProps: undefined | any[] | LooseColumnDefinition[] | AzGridProps
-) {
-	if (inputOrProps == null) return [];
-	if (Array.isArray(inputOrProps)) return useThisColumnData(inputOrProps);
-	return usePropsColumnData(inputOrProps);
-}
-function useThisColumnData(cols: any[]) {
-	return React.useMemo(() => {
-		return applyColumnData(cols);
-	}, [cols]);
-}
-function usePropsColumnData(props: AzGridProps) {
-	return React.useMemo(() => {
-		return applyColumnData(props);
-	}, [
-		props.columns,
-		props.leftColumns,
-		props.rightColumns,
-		props.editableColumns,
-		props.columnExtensions,
-		props.customColumns,
-	]);
-}
+import React from 'react';
+import { AzGridProps, LooseColumnDefinition } from '../types/types';
+import { applyColumnData } from '../func/func_grid';
+
+const EMPTY_COLUMNS: any[] = [];
+
+export function useColumnData(
+	inputOrProps: undefined | any[] | LooseColumnDefinition[] | AzGridProps
+) {
+	// one useMemo for every input kind, so switching between them keeps the hook order
+	const isProps = inputOrProps != null && !Array.isArray(inputOrProps);
+	const props = (isProps ? inputOrProps : {}) as AzGridProps;
+	const deps = isProps
+		? [
+				props.columns,
+				props.leftColumns,
+				props.rightColumns,
+				props.editableColumns,
+				props.columnExtensions,
+				props.customColumns,
+		  ]
+		: [inputOrProps, null, null, null, null, null];
+
+	return React.useMemo(() => {
+		if (inputOrProps == null) return EMPTY_COLUMNS;
+		return applyColumnData(inputOrProps);
+	}, [isProps, ...deps]);
+}

package/src/hooks/useGridEvents.ts

@@ -7,6 +7,7 @@ import {
 	apply_row_a11y,
 	get_grid_root,
 	get_root_a11y_key,
+	is_grid_busy,
 } from '../func/func_a11y';
 
 function useGridMenuRow() {
@@ -20,6 +21,9 @@ function useGridMenuRow() {
 }
 export function useGridEvents(grid: GridType, props: DataGridWrapperProps) {
 	const click_data = React.useRef<any>(null);
+	// latest props, so the callbacks below stay stable and don't re-render the grid
+	const latestProps = React.useRef(props);
+	latestProps.current = props;
 	const { update_menuRow, menuAnchorEl, menuRow } = useGridMenuRow();
 
 	const refreshColumn = React.useCallback(
@@ -46,26 +50,21 @@ export function useGridEvents(grid: GridType, props: DataGridWrapperProps) {
 	/* -------------------------------------------------------------------------- */
 	/*                                   events                                   */
 	/* -------------------------------------------------------------------------- */
-	const onRowClick = React.useCallback(
-		(rowProps, event) => {
-			const nowDate = Date.now();
-			const lastclick: number = click_data.current[get_row_id(rowProps)];
-			if (lastclick) {
-				const diffTime = Math.abs(nowDate - lastclick);
-				if (diffTime < 400) {
-					click_data.current[get_row_id(rowProps)] = null;
-					return (
-						props.onRowDoubleClick &&
-						props.onRowDoubleClick(rowProps.rowIndex, rowProps.data)
-					);
-				}
+	const onRowClick = React.useCallback((rowProps, event) => {
+		const { onRowClick, onRowDoubleClick } = latestProps.current;
+		const nowDate = Date.now();
+		const lastclick: number = click_data.current[get_row_id(rowProps)];
+		if (lastclick) {
+			const diffTime = Math.abs(nowDate - lastclick);
+			if (diffTime < 400) {
+				click_data.current[get_row_id(rowProps)] = null;
+				return onRowDoubleClick && onRowDoubleClick(rowProps.rowIndex, rowProps.data);
 			}
+		}
 
-			click_data.current[get_row_id(rowProps)] = nowDate;
-			return props.onRowClick && props.onRowClick(rowProps.rowIndex, rowProps.data);
-		},
-		[props.onRowClick, props.onRowDoubleClick]
-	);
+		click_data.current[get_row_id(rowProps)] = nowDate;
+		return onRowClick && onRowClick(rowProps.rowIndex, rowProps.data);
+	}, []);
 
 	React.useEffect(() => {
 		click_data.current = {};
@@ -87,28 +86,39 @@ export function useGridEvents(grid: GridType, props: DataGridWrapperProps) {
 
 	/* -------------------------------------------------------------------------- */
 	/* ------------------------------ Accessibility ----------------------------- */
-	const latestProps = React.useRef(props);
-	latestProps.current = props;
 	const rootSyncFrame = React.useRef(0);
 	// last applied root values, so row renders (e.g. while scrolling) don't re-apply them
-	const lastRoot = React.useRef<{ el: Element | null; key: string }>({ el: null, key: '' });
+	const lastRoot = React.useRef<{ el: Element | null; key: string; busy: boolean }>({
+		el: null,
+		key: '',
+		busy: false,
+	});
 	const getRootOptions = () => ({
 		ariaLabel: latestProps.current.ariaLabel,
 		editable: !!latestProps.current.editable,
 	});
 	// root attributes are set on the DOM node, batched to once per frame
-	const scheduleRootSync = React.useCallback(() => {
+	const scheduleRootSync = React.useCallback((force = false) => {
 		if (rootSyncFrame.current || typeof requestAnimationFrame === 'undefined') return;
 		const grid = latestProps.current.liveGridRef?.current?.current;
 		const key = get_root_a11y_key(grid, getRootOptions());
-		if (key && key === lastRoot.current.key && get_grid_root(grid) === lastRoot.current.el)
+		if (
+			!force &&
+			key &&
+			key === lastRoot.current.key &&
+			get_grid_root(grid) === lastRoot.current.el
+		)
 			return;
 		rootSyncFrame.current = requestAnimationFrame(() => {
 			rootSyncFrame.current = 0;
 			const liveGrid = latestProps.current.liveGridRef?.current?.current;
 			const options = getRootOptions();
 			const el = apply_root_a11y(liveGrid, options);
-			lastRoot.current = { el, key: el ? get_root_a11y_key(liveGrid, options) : '' };
+			lastRoot.current = {
+				el,
+				key: el ? get_root_a11y_key(liveGrid, options) : '',
+				busy: el ? is_grid_busy(liveGrid) : false,
+			};
 		});
 	}, []);
 	React.useEffect(() => {
@@ -130,8 +140,14 @@ export function useGridEvents(grid: GridType, props: DataGridWrapperProps) {
 		scheduleRootSync();
 	}, []);
 
+	// called by the grid on every render with the load mask state, keeps aria-busy in sync
+	const onRenderLoadMask = React.useCallback((maskProps: { visible?: boolean }) => {
+		if (!!maskProps?.visible !== lastRoot.current.busy) scheduleRootSync(true);
+	}, []);
+
 	return {
 		onRowClick,
+		onRenderLoadMask,
 		onRowContextMenu,
 		onRenderRow,
 		update_menuRow,

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 };
+}