@azrico/reactgrid 1.4.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

@@ -1,96 +1,157 @@
-import React from 'react';
-import { DataGridWrapperProps, GridType } from '../types/types';
-import { find_realData, get_row_id } from '../func/func_grid';
-import { func_selection } from '../func/func_child';
-
-function useGridMenuRow() {
-	const [menuAnchorEl, set_menuAnchorEl] = React.useState<any>(null);
-	const [menuRow, set_menuRow] = React.useState<any>(null);
-	const update_menuRow = React.useCallback((r: any = null, el: any = null) => {
-		set_menuRow(r || null);
-		set_menuAnchorEl(el || null);
-	}, []);
-	return { update_menuRow, menuAnchorEl, menuRow };
-}
-export function useGridEvents(grid: GridType, props: DataGridWrapperProps) {
-	const click_data = React.useRef<any>(null);
-	const { update_menuRow, menuAnchorEl, menuRow } = useGridMenuRow();
-
-	const refreshColumn = React.useCallback(
-		(col: string) => {
-			const dt = grid.ungroupedData;
-			for (let index = 0; index < dt.length; index++) {
-				(grid as any).setItemPropertyAt(index, col, dt[index][col]);
-			}
-		},
-		[grid]
-	);
-	const refresh = React.useCallback(() => {
-		const dt = grid.ungroupedData;
-		for (let index = 0; index < dt.length; index++) {
-			(grid as any).setItemAt(index, {}, { replace: false });
-		}
-	}, [grid]);
-
-	React.useEffect(() => {
-		if (!grid) return;
-		grid['refresh'] = refresh;
-		grid['refreshColumn'] = refreshColumn;
-	}, [grid, props.dataSource, refresh, refreshColumn]);
-	/* -------------------------------------------------------------------------- */
-	/*                                   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)
-					);
-				}
-			}
-
-			click_data.current[get_row_id(rowProps)] = nowDate;
-			return props.onRowClick && props.onRowClick(rowProps.rowIndex, rowProps.data);
-		},
-		[props.onRowClick, props.onRowDoubleClick]
-	);
-
-	React.useEffect(() => {
-		click_data.current = {};
-	}, [props.dataSource]);
-
-	/* ------------------------------- ContextMenu ------------------------------ */
-	const onRowContextMenu = React.useCallback((rowProps, event) => {
-		if (!rowProps || !rowProps.data || func_selection.has_selection()) {
-			update_menuRow(null, null);
-			return true;
-		}
-		event.preventDefault();
-
-		const realRow = find_realData(rowProps.dataSourceArray, event.target, rowProps.data);
-		const anEl = func_selection.getVirtualElement(event.clientX, event.clientY);
-		update_menuRow(realRow, anEl);
-		return false;
-	}, []);
-
-	/* -------------------------------------------------------------------------- */
-	const onRenderRow = React.useCallback((rowProps) => {
-		// save the original handlers to be called later
-		rowProps['data-row-id'] = get_row_id(rowProps.data);
-	}, []);
-
-	return {
-		onRowClick,
-		onRowContextMenu,
-		onRenderRow,
-		update_menuRow,
-		menuAnchorEl,
-		menuRow,
-	};
-}
+import React from 'react';
+import { DataGridWrapperProps, GridType } from '../types/types';
+import { find_realData, get_row_id } from '../func/func_grid';
+import { func_selection } from '../func/func_child';
+import {
+	apply_root_a11y,
+	apply_row_a11y,
+	get_grid_root,
+	get_root_a11y_key,
+	is_grid_busy,
+} from '../func/func_a11y';
+
+function useGridMenuRow() {
+	const [menuAnchorEl, set_menuAnchorEl] = React.useState<any>(null);
+	const [menuRow, set_menuRow] = React.useState<any>(null);
+	const update_menuRow = React.useCallback((r: any = null, el: any = null) => {
+		set_menuRow(r || null);
+		set_menuAnchorEl(el || null);
+	}, []);
+	return { update_menuRow, menuAnchorEl, menuRow };
+}
+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(
+		(col: string) => {
+			const dt = grid.ungroupedData;
+			for (let index = 0; index < dt.length; index++) {
+				(grid as any).setItemPropertyAt(index, col, dt[index][col]);
+			}
+		},
+		[grid]
+	);
+	const refresh = React.useCallback(() => {
+		const dt = grid.ungroupedData;
+		for (let index = 0; index < dt.length; index++) {
+			(grid as any).setItemAt(index, {}, { replace: false });
+		}
+	}, [grid]);
+
+	React.useEffect(() => {
+		if (!grid) return;
+		grid['refresh'] = refresh;
+		grid['refreshColumn'] = refreshColumn;
+	}, [grid, props.dataSource, refresh, refreshColumn]);
+	/* -------------------------------------------------------------------------- */
+	/*                                   events                                   */
+	/* -------------------------------------------------------------------------- */
+	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 onRowClick && onRowClick(rowProps.rowIndex, rowProps.data);
+	}, []);
+
+	React.useEffect(() => {
+		click_data.current = {};
+	}, [props.dataSource]);
+
+	/* ------------------------------- ContextMenu ------------------------------ */
+	const onRowContextMenu = React.useCallback((rowProps, event) => {
+		if (!rowProps || !rowProps.data || func_selection.has_selection()) {
+			update_menuRow(null, null);
+			return true;
+		}
+		event.preventDefault();
+
+		const realRow = find_realData(rowProps.dataSourceArray, event.target, rowProps.data);
+		const anEl = func_selection.getVirtualElement(event.clientX, event.clientY);
+		update_menuRow(realRow, anEl);
+		return false;
+	}, []);
+
+	/* -------------------------------------------------------------------------- */
+	/* ------------------------------ Accessibility ----------------------------- */
+	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; 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((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 (
+			!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) : '',
+				busy: el ? is_grid_busy(liveGrid) : false,
+			};
+		});
+	}, []);
+	React.useEffect(() => {
+		scheduleRootSync();
+	}, [scheduleRootSync, props.ariaLabel, props.editable, props.columns, props.dataSource]);
+	React.useEffect(
+		() => () => {
+			if (rootSyncFrame.current) cancelAnimationFrame(rootSyncFrame.current);
+			rootSyncFrame.current = 0;
+		},
+		[]
+	);
+
+	const onRenderRow = React.useCallback((rowProps) => {
+		// save the original handlers to be called later
+		rowProps['data-row-id'] = get_row_id(rowProps.data);
+		const liveGrid: any = latestProps.current.liveGridRef?.current?.current;
+		apply_row_a11y(rowProps, !!liveGrid?.computedRowSelectionEnabled);
+		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,
+		menuAnchorEl,
+		menuRow,
+	};
+}