@azrico/reactgrid 1.3.49 → 1.3.52

package/src/types/types.ts

@@ -0,0 +1,122 @@
+import { ModifyFields } from '../func/func_grid';
+import { ConvertableToMenuItem } from '@azrico/controls';
+import React from 'react';
+import {
+	TypeCellSelection,
+	TypeColumn,
+	TypeDataGridProps,
+	TypeDataSource,
+	TypeEditInfo,
+	TypeFilterTypes,
+	TypeFilterValue,
+	TypeRowDetailsInfo,
+	TypeRowProps,
+	TypeRowSelection,
+	TypeComputedProps,
+} from '@inovua/reactdatagrid-community/types';
+
+import { TypeOnSelectionChangeArg } from '@inovua/reactdatagrid-community/types/TypeDataGridProps';
+
+/* -------------------------------------------------------------------------- */
+export type ColumnDefinition = TypeColumn;
+export type CellDefinition = any;
+export type RowDefinition = any;
+export type RowProps = TypeRowProps;
+export type RowSelectionValue = TypeRowSelection;
+export type CellSelectionValue = TypeCellSelection;
+export type DataRowDefinition = any;
+export type FilterTypes = TypeFilterTypes;
+export type FilterValues = TypeFilterValue;
+export type DataSourceDefinition = TypeDataSource;
+export type OnSelectionChangeFunc = (config: TypeOnSelectionChangeArg) => void;
+export type OnCellSelectionChangeFunc = (s: { [key: string]: boolean }) => void;
+export type RowDetailsFunc = (rowDetailsInfo: TypeRowDetailsInfo) => React.ReactNode;
+
+export type loose_column_names = {
+	key: string;
+	field: string;
+	columnName: string;
+	name: string;
+};
+export type loose_column_fields = loose_column_names & {
+	title: string;
+	type: string;
+	items: any[];
+};
+export type LooseColumnDefinition = Partial<loose_column_fields & ColumnDefinition>;
+//
+
+export type CustomColumnDefinition = {
+	name: string;
+	render: (cell: any, formatterParams, onRendered) => React.ReactNode | undefined | null;
+};
+export type AzGridOptions = Partial<TypeDataGridProps>;
+/* -------------------------------------------------------------------------- */
+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
+	details_columns?: LooseColumnDefinition[];
+	details_filter?: FilterValues;
+
+	licenseKey?: string;
+
+	gridRef?: React.MutableRefObject<TypeComputedProps>;
+	gridOptions?: AzGridOptions;
+
+	columns?: LooseColumnDefinition[];
+	columnExtensions?: Partial<LooseColumnDefinition>;
+
+	editableColumns?: string[];
+	leftColumns?: string[];
+	rightColumns?: string[];
+	customColumns?: CustomColumnDefinition[];
+
+	contextMenuItems?: ConvertableToMenuItem;
+
+	highlightedRow?: any;
+	RowDetail?: RowDetailsFunc;
+
+	selected?: RowSelectionValue;
+	cellSelection?: CellSelectionValue;
+	/* -------------------------------------------------------------------------- */
+	onEditComplete?: (editInfo: TypeEditInfo) => void;
+	onSelectionChange?: OnSelectionChangeFunc;
+	onCellSelectionChange?: OnCellSelectionChangeFunc;
+
+	onRowClick?: (rowIndex: number, row: any) => void;
+	onRowDoubleClick?: (rowIndex: number, row: any) => void;
+	onLimitChange?: (v: number) => void;
+	onSkipChange?: (v: number) => void;
+	/* -------------------------------------------------------------------------- */
+	skip?: number;
+	limit?: number;
+	//
+	editable?: boolean | ((editValue: any, cellProps: any) => boolean);
+	advancedFilterFields?: string[];
+	//
+
+	loading?: boolean;
+	dark?: boolean;
+	delayedSize?: boolean;
+	allowChildRows?: boolean;
+	looseCacheCheck?: boolean;
+	className?: string;
+};
+
+export type DataGridProps = ModifyFields<
+	AzGridProps,
+	{
+		columns: ColumnDefinition[];
+		dataSource: any;
+	}
+>;
+export type GridType = TypeComputedProps;
+export type DataGridWrapperProps = ModifyFields<
+	DataGridProps,
+	{
+		gridRef: React.MutableRefObject<TypeComputedProps>;
+		static_gridOptions: AzGridOptions;
+		dynamic_gridOptions: AzGridOptions;
+		children?: React.ReactNode;
+	}
+>;

package/src/views/DataGrid.tsx

@@ -3,144 +3,24 @@ import '@inovua/reactdatagrid-enterprise/theme/default-dark.css';
 import '@inovua/reactdatagrid-enterprise/theme/amber-dark.css';
 import '../themes/base_styles.css';
 import '../themes/grid.css';
+import { applyColumnData, ApplyDataSource, get_default_key } from '../func/func_grid';
+import { ContextMenu } from '@azrico/controls';
+import React from 'react';
 
-import {
-	ApplyColumnData,
-	ApplyDataSource,
-	ModifyFields,
-	find_realData,
-	get_default_key,
-	get_row_id,
-	validateCache,
-} from '../func/func_grid';
-import { ContextMenu, ConvertableToMenuItem } from '@azrico/controls';
-import React, { useCallback, useState } from 'react';
-import {
-	TypeCellSelection,
-	TypeColumn,
-	TypeDataGridProps,
-	TypeDataSource,
-	TypeEditInfo,
-	TypeFilterTypes,
-	TypeFilterValue,
-	TypeRowDetailsInfo,
-	TypeRowProps,
-	TypeRowSelection,
-	TypeComputedProps,
-} from '@inovua/reactdatagrid-community/types';
-import { fix_parent_child_relations, func_selection } from '../func/func_child';
 import { array_intersection, fn_eval } from '@azrico/object';
 
 import ReactDataGrid from '@inovua/reactdatagrid-enterprise';
-import { TypeOnSelectionChangeArg } from '@inovua/reactdatagrid-community/types/TypeDataGridProps';
 import clsx from 'clsx';
 import { useComponentSize } from 'react-use-size';
 
 import debounce from 'lodash.debounce';
+import { AzGridOptions, AzGridProps, DataGridWrapperProps } from '../types/types';
+import { useGridEvents } from '../hooks/useGridEvents';
+import { useColumnData } from '../hooks/useColumnData';
+import { useDataSource } from '../hooks/useDatasource';
+import { useGridSearch } from '../hooks/useGridSearch';
 /* -------------------------------------------------------------------------- */
 
-/* -------------------------------------------------------------------------- */
-export type ColumnDefinition = TypeColumn;
-export type CellDefinition = any;
-export type RowDefinition = any;
-export type RowProps = TypeRowProps;
-export type RowSelectionValue = TypeRowSelection;
-export type CellSelectionValue = TypeCellSelection;
-export type DataRowDefinition = any;
-export type FilterTypes = TypeFilterTypes;
-export type FilterValues = TypeFilterValue;
-export type DataSourceDefinition = TypeDataSource;
-export type OnSelectionChangeFunc = (config: TypeOnSelectionChangeArg) => void;
-export type OnCellSelectionChangeFunc = (s: { [key: string]: boolean }) => void;
-export type RowDetailsFunc = (rowDetailsInfo: TypeRowDetailsInfo) => React.ReactNode;
-/* -------------------------------------------------------------------------- */
-type loose_column_names = {
-	key: string;
-	field: string;
-	columnName: string;
-	name: string;
-};
-type loose_column_fields = loose_column_names & {
-	title: string;
-	type: string;
-	items: any[];
-};
-export type LooseColumnDefinition = Partial<loose_column_fields & ColumnDefinition>;
-//
-
-export type CustomColumnDefinition = {
-	name: string;
-	render: (cell: any, formatterParams, onRendered) => React.ReactNode | undefined | null;
-};
-export type AzGridOptions = Partial<TypeDataGridProps>;
-/* -------------------------------------------------------------------------- */
-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
-	details_columns?: LooseColumnDefinition[];
-	details_filter?: FilterValues;
-
-	licenseKey?: string;
-
-	gridRef?: React.MutableRefObject<TypeComputedProps>;
-	gridOptions?: AzGridOptions;
-
-	columns?: LooseColumnDefinition[];
-	columnExtensions?: Partial<LooseColumnDefinition>;
-
-	editableColumns?: string[];
-	leftColumns?: string[];
-	rightColumns?: string[];
-	customColumns?: CustomColumnDefinition[];
-
-	contextMenuItems?: ConvertableToMenuItem;
-
-	highlightedRow?: any;
-	RowDetail?: RowDetailsFunc;
-
-	selected?: RowSelectionValue;
-	cellSelection?: CellSelectionValue;
-	/* -------------------------------------------------------------------------- */
-	onEditComplete?: (editInfo: TypeEditInfo) => void;
-	onSelectionChange?: OnSelectionChangeFunc;
-	onCellSelectionChange?: OnCellSelectionChangeFunc;
-
-	onRowClick?: (rowIndex: number, row: any) => void;
-	onRowDoubleClick?: (rowIndex: number, row: any) => void;
-	onLimitChange?: (v: number) => void;
-	onSkipChange?: (v: number) => void;
-	/* -------------------------------------------------------------------------- */
-	skip?: number;
-	limit?: number;
-	//
-	editable?: boolean | ((editValue: any, cellProps: any) => boolean);
-	advancedFilterFields?: string[];
-	//
-
-	loading?: boolean;
-	dark?: boolean;
-	delayedSize?: boolean;
-	allowChildRows?: boolean;
-	looseCacheCheck?: boolean;
-	className?: string;
-};
-
-type DataGridProps = ModifyFields<
-	AzGridProps,
-	{
-		columns: ColumnDefinition[];
-		dataSource: any;
-	}
->;
-type DataGridWrapperProps = ModifyFields<
-	DataGridProps,
-	{
-		gridRef: React.MutableRefObject<TypeComputedProps>;
-		static_gridOptions: AzGridOptions;
-		dynamic_gridOptions: AzGridOptions;
-		children?: React.ReactNode;
-	}
->;
 /* -------------------------------------------------------------------------- */
 
 const defaultOptions: AzGridOptions = {
@@ -168,35 +48,12 @@ export function AzGrid(props: AzGridProps) {
 	/* -------------------------------------------------------------------------- */
 	/*                                   Columns                                  */
 	/* -------------------------------------------------------------------------- */
-	const cached_columns = React.useMemo(() => {
-		return ApplyColumnData(props);
-	}, [
-		props.columns,
-		props.leftColumns,
-		props.rightColumns,
-		props.editableColumns,
-		props.columnExtensions,
-		props.customColumns,
-	]); 
+	const cached_columns = useColumnData(props);
+	const dataSource = useDataSource(props.dataSource, props);
 	/* -------------------------------------------------------------------------- */
 	/*                                 Row changes                                */
 	/* -------------------------------------------------------------------------- */
 
-	const cached_data = React.useRef<any>();
-	const last_cache_info = React.useRef<any>();
-
-	const dataSource = React.useCallback(
-		async (dt) => {
-			return await ApplyDataSource(props.dataSource, {
-				skip: dt?.skip,
-				limit: dt?.limit,
-				cached_data: cached_data,
-				last_cache_info: last_cache_info,
-			});
-		},
-		[props.dataSource]
-	);
-
 	const base_gridOptions = React.useMemo<AzGridOptions>(() => {
 		const firstcolumn = cached_columns[0];
 		const licenseKey = props.licenseKey || get_default_key();
@@ -270,87 +127,14 @@ export function AzGrid(props: AzGridProps) {
  */
 function DataGridEventsWrapper(props: DataGridWrapperProps) {
 	/* -------------------------------------------------------------------------- */
-
-	const click_data = React.useRef<any>(null);
-
-	const [menuAnchorEl, set_menuAnchorEl] = React.useState<any>(null);
-	const [menuRow, set_menuRow] = React.useState<any>(null);
-
-	/* -------------------------------------------------------------------------- */
-	/*                              refresh functions                             */
-	/* -------------------------------------------------------------------------- */
-	const refreshColumn = React.useCallback(
-		(col: string) => {
-			const dt = props.gridRef.current.ungroupedData;
-			for (let index = 0; index < dt.length; index++) {
-				(props.gridRef.current as any).setItemPropertyAt(index, col, dt[index][col]);
-			}
-		},
-		[props.gridRef.current]
-	);
-	const refresh = React.useCallback(() => {
-		const dt = props.gridRef.current.ungroupedData;
-		for (let index = 0; index < dt.length; index++) {
-			(props.gridRef.current as any).setItemAt(index, {}, { replace: false });
-		}
-	}, [props.gridRef.current]);
-	React.useEffect(() => {
-		if (!props.gridRef.current) return;
-		props.gridRef.current['refresh'] = refresh;
-		props.gridRef.current['refreshColumn'] = refreshColumn;
-	}, [props.gridRef.current, 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 update_menuRow = React.useCallback((r: any = null, el: any = null) => {
-		set_menuRow(r || null);
-		set_menuAnchorEl(el || null);
-	}, []);
-
-	/* -------------------------------------------------------------------------- */
-	const onRenderRow = useCallback((rowProps) => {
-		// save the original handlers to be called later
-		rowProps['data-row-id'] = get_row_id(rowProps.data);
-	}, []);
+	const {
+		onRowClick,
+		onRowContextMenu,
+		onRenderRow,
+		update_menuRow,
+		menuAnchorEl,
+		menuRow,
+	} = useGridEvents(props.gridRef.current, props);
 	/* -------------------------------------------------------------------------- */
 	/**
 	 * Merge click events into grid options
@@ -392,25 +176,8 @@ function DataGridEventsWrapper(props: DataGridWrapperProps) {
 }
 
 function DataGridDetailsWrapper(props: DataGridWrapperProps) {
-	const cached_details_columns = React.useMemo(() => {
-		return ApplyColumnData(props.details_columns);
-	}, [props.details_columns]);
-
-	const cached_data = React.useRef<any>();
-	const last_cache_info = React.useRef<any>();
-
-	const details_dataSource = React.useCallback(
-		async (dt) => {
-			const res = await ApplyDataSource(props.details_dataSource, {
-				skip: dt.skip,
-				limit: dt.limit,
-				cached_data: cached_data,
-				last_cache_info: last_cache_info,
-			});
-			return res;
-		},
-		[props.details_dataSource]
-	);
+	const cached_details_columns = useColumnData(props.details_columns);
+	const details_dataSource = useDataSource(props.details_dataSource, props);
 	const renderDetailsGrid = ({ data }) => {
 		return (
 			<ReactDataGrid
@@ -467,75 +234,11 @@ function DataGridDelayedSizeWrapper(props: DataGridWrapperProps) {
 	);
 }
 function DataGridSearchWrapper(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 = props.gridRef.current.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),
-		[]
-	);
-	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, filteredData } = useGridSearch(props.gridRef.current, props);
 
 	return (
 		<div className={'azgrid-flexed azgrid-flexlayout azgrid-nooverflow'}>
-			<form className={'azgrid-searcharea'}>
-				<label>
-					Search
-					<input
-						type="text"
-						name="name"
-						value={search}
-						onChange={(e) => set_search(e.target.value)}
-					/>
-				</label>
-			</form>
+			{element}
 			<DataGridCore {...props} dataSource={filteredData} />
 		</div>
 	);