@azrico/reactgrid 1.3.52 → 1.4.0

package/src/hooks/useGridEvents.ts

@@ -1,96 +1,96 @@
-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';
+
+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,
+	};
+}

package/src/hooks/useGridSearch.tsx

@@ -1,79 +1,79 @@
-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 { 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 };
+}

package/src/index.tsx

@@ -4,7 +4,6 @@ export * from './types/types';
 export { get_row_id, set_row_id, get_col_name, get_col_header } from './func/func_grid';
 
 import AzGrid from './views/DataGrid';
-import ExampleGrid from './example';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 
@@ -12,8 +11,9 @@ import ReactDOM from 'react-dom/client';
 //
 export default AzGrid;
 
-const testroot = document.getElementById('testroot');
+const testroot = typeof document === 'undefined' ? null : document.getElementById('testroot');
 if (testroot) {
-	const root = ReactDOM.createRoot(document.getElementById('testroot') as HTMLElement);
-	root.render(<ExampleGrid />);
+	const root = ReactDOM.createRoot(testroot);
+	// Example styles, including the optional token theme, load only for the demo.
+	import('./example').then(({ default: ExampleGrid }) => root.render(<ExampleGrid />));
 }