@azrico/reactgrid 1.2.4 → 1.2.6

package/src/views/DataGrid.tsx

@@ -4,6 +4,14 @@ import '@inovua/reactdatagrid-enterprise/theme/amber-dark.css';
 import '../themes/base_styles.css';
 import '../themes/grid.css';
 
+import {
+	ApplyColumnData,
+	ApplyDataSource,
+	ModifyFields,
+	get_default_key,
+	get_row_id,
+	validateCache,
+} from '../func/func_grid';
 import { ContextMenu, ConvertableToMenuItem } from '@azrico/controls';
 import React, { useCallback, useState } from 'react';
 import {
@@ -12,26 +20,21 @@ import {
 	TypeDataSource,
 	TypeEditInfo,
 	TypeFilterTypes,
+	TypeFilterValue,
 	TypeRowDetailsInfo,
 	TypeRowProps,
 	TypeRowSelection,
 } from '@inovua/reactdatagrid-community/types';
-import { fix_parent_child_relations, func_selection } from '../func/helpers';
+import { fix_parent_child_relations, func_selection } from '../func/func_child';
 
-import BoolEditor from '@inovua/reactdatagrid-community/BoolEditor';
-import NumericEditor from '@inovua/reactdatagrid-community/NumericEditor';
 import ReactDataGrid from '@inovua/reactdatagrid-enterprise';
-import SelectEditor from '@inovua/reactdatagrid-community/SelectEditor';
 import { TypeOnSelectionChangeArg } from '@inovua/reactdatagrid-community/types/TypeDataGridProps';
 import clsx from 'clsx';
 import { object_equals } from '@azrico/object';
 import { useComponentSize } from 'react-use-size';
 
 /* -------------------------------------------------------------------------- */
-type ModifyFields<T, R> = Omit<T, keyof R> & R;
-type MakeWriteable<Type> = {
-	-readonly [Key in keyof Type]: Type[Key];
-};
+
 /* -------------------------------------------------------------------------- */
 export type ColumnDefinition = TypeColumn;
 export type CellDefinition = any;
@@ -40,6 +43,7 @@ export type RowProps = TypeRowProps;
 export type RowSelectionValue = TypeRowSelection;
 export type DataRowDefinition = any;
 export type FilterTypes = TypeFilterTypes;
+export type FilterValues = TypeFilterValue;
 export type DataSourceDefinition = TypeDataSource;
 export type OnSelectionChangeFunc = (config: TypeOnSelectionChangeArg) => void;
 export type RowDetailsFunc = (rowDetailsInfo: TypeRowDetailsInfo) => React.ReactNode;
@@ -66,9 +70,13 @@ type GridOptions = Partial<TypeDataGridProps>;
 /* -------------------------------------------------------------------------- */
 export type AzGridProps = {
 	dataSource?: any[] | ((args: any) => any[] | Promise<any[] | any>);
+	details_dataSource?: any[] | ((args: any) => any[] | Promise<any[] | any>);
+	details_columns?: LooseColumnDefinition[];
+	details_filter?: FilterValues;
 
 	licenseKey?: string;
 
+	gridRef?: any;
 	gridOptions?: GridOptions;
 
 	columns?: LooseColumnDefinition[];
@@ -122,21 +130,7 @@ type DataGridWrapperProps = ModifyFields<
 	}
 >;
 /* -------------------------------------------------------------------------- */
-// const defaultfilterTypes: FilterTypes = {
-// 	string: {
-// 		type: 'string',
-// 		emptyValue: '',
-// 		operators: [
-// 			{
-// 				name: 'contains',
-// 				fn: ({ value, filterValue, data }) => {
-// 					console.log('fn');
-// 					return !filterValue ? true : value.indexOf(filterValue) != -1;
-// 				},
-// 			},
-// 		],
-// 	},
-// };
+
 const defaultOptions: GridOptions = {
 	//filterTypes: defaultfilterTypes,
 	remoteFilter: false,
@@ -154,14 +148,12 @@ const forcedOptions: GridOptions = {
 	idProperty: '__table_id',
 	nodesProperty: '__children',
 };
-const defaultColumnOptions: ColumnDefinition = {
-	draggable: false,
-	lockable: false,
-	editable: false,
-};
+
 const dynamic_option_names = ['selected', 'loading', 'limit', 'skip'];
 /* -------------------------------------------------------------------------- */
 export function AzGrid(props: AzGridProps) {
+	const gridRefBackup = React.useRef<any>(null);
+	const gridRef = props.gridRef || gridRefBackup;
 	/* -------------------------------------------------------------------------- */
 	/*                                   Columns                                  */
 	/* -------------------------------------------------------------------------- */
@@ -184,47 +176,12 @@ export function AzGrid(props: AzGridProps) {
 
 	const dataSource = React.useCallback(
 		async (dt) => {
-			let result_data: any = undefined;
-
-			let isUsingCache = false;
-
-			const cacheInfo = { ds: props.dataSource, skip: dt.skip, limit: dt.limit };
-			//check if we can used cached data
-			//if the datasource is changed since last render, we should invalidate cache
-			if (!validateCache(last_cache_info.current, cacheInfo, props.looseCacheCheck)) {
-				cached_data.current = undefined;
-				last_cache_info.current = cacheInfo;
-			}
-
-			if (cached_data.current) {
-				//cache is valid, use the cache
-				isUsingCache = true;
-				result_data = cached_data.current;
-			} else {
-				//cache is invalid, use the datasource again
-
-				isUsingCache = false;
-				if (typeof props.dataSource === 'function') {
-					result_data = await props.dataSource(dt);
-				} else result_data = props.dataSource;
-			}
-
-			//making sure the datasource is a valid object :
-			if (!result_data) result_data = [];
-			if (Array.isArray(result_data) || typeof result_data !== 'object')
-				result_data = { data: result_data };
-
-			if (!Array.isArray(result_data.data)) result_data.data = [result_data.data];
-
-			//no need to fix parent/child when using cache (it should be already fixed)
-			if (!isUsingCache && props.allowChildRows)
-				result_data.data = fix_parent_child_relations(result_data.data);
-
-			if (!result_data.count) result_data.count = (result_data.data as Array<any>).length;
-
-			//update cache
-			cached_data.current = result_data;
-			return result_data;
+			return await ApplyDataSource(props.dataSource, {
+				skip: dt.skip,
+				limit: dt.limit,
+				cached_data: cached_data,
+				last_cache_info: last_cache_info,
+			});
 		},
 		[props.dataSource]
 	);
@@ -272,6 +229,7 @@ export function AzGrid(props: AzGridProps) {
 	return (
 		<DataGridEventsWrapper
 			{...props}
+			gridRef={gridRef}
 			static_gridOptions={static_gridOptions}
 			dynamic_gridOptions={dynamic_gridOptions}
 			columns={cached_columns}
@@ -352,28 +310,89 @@ function DataGridEventsWrapper(props: DataGridWrapperProps) {
 		return { ...props.static_gridOptions, ...events };
 	}, [props.static_gridOptions, onRowClick]);
 
+	const contextMenu = (
+		<ContextMenu
+			menuAnchorEl={menuAnchorEl}
+			set_menuAnchorEl={update_menuAnchorEl}
+			menuRow={menuRow}
+			menu_items={props.contextMenuItems as any}
+		/>
+	);
+
+	if (props.details_dataSource) {
+		return (
+			<DataGridDetailsWrapper {...props} static_gridOptions={static_gridOptions}>
+				{contextMenu}
+				{props.children}
+			</DataGridDetailsWrapper>
+		);
+	} else {
+		return (
+			<DataGridSizeWrapper {...props} static_gridOptions={static_gridOptions}>
+				{contextMenu}
+				{props.children}
+			</DataGridSizeWrapper>
+		);
+	}
+}
+
+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 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,
+			});
+			console.log('ds', res);
+			return res;
+		},
+		[props.dataSource]
+	);
+	const renderDetailsGrid = ({ data }) => {
+		return (
+			<ReactDataGrid
+				defaultFilterValue={props.details_filter}
+				dataSource={dataSource}
+				columns={cached_details_columns}
+			/>
+		);
+	};
+
+	/**
+	 * Merge details into grid
+	 */
+	const static_gridOptions = React.useMemo<GridOptions>(() => {
+		const finalresult = props.static_gridOptions || {};
+		finalresult['renderDetailsGrid'] = renderDetailsGrid;
+		return finalresult;
+	}, [props.static_gridOptions]);
+
 	return (
 		<DataGridSizeWrapper {...props} static_gridOptions={static_gridOptions}>
-			<ContextMenu
-				menuAnchorEl={menuAnchorEl}
-				set_menuAnchorEl={update_menuAnchorEl}
-				menuRow={menuRow}
-				menu_items={props.contextMenuItems as any}
-			/>
 			{props.children}
 		</DataGridSizeWrapper>
 	);
 }
+
 function DataGridSizeWrapper(props: DataGridWrapperProps) {
-	// console.log(props);
 	if (props.delayedSize) {
 		return <DataGridDelayedSize {...props} />;
 	} else {
 		return <DataGridFlexSize {...props} />;
 	}
 }
+
+/* -------------------------------------------------------------------------- */
 function DataGridDelayedSize(props: DataGridWrapperProps) {
-	const gridRef = React.useRef<any>(null);
 	const { ref, height, width } = useComponentSize();
 	return (
 		<div
@@ -383,7 +402,7 @@ function DataGridDelayedSize(props: DataGridWrapperProps) {
 			<ReactDataGrid
 				{...props.static_gridOptions}
 				{...props.dynamic_gridOptions}
-				handle={(ref) => (gridRef.current = ref ? ref.current : null)}
+				handle={(ref) => (props.gridRef.current = ref ? ref.current : null)}
 				className={'azgrid-delayedresize'}
 				style={{
 					height: height,
@@ -397,13 +416,12 @@ function DataGridDelayedSize(props: DataGridWrapperProps) {
 	);
 }
 function DataGridFlexSize(props: DataGridWrapperProps) {
-	const gridRef = React.useRef<any>(null);
 	return (
 		<div className={clsx(props.className, 'azgrid-nooverflow', 'azgrid-filler')}>
 			<ReactDataGrid
 				{...props.static_gridOptions}
 				{...props.dynamic_gridOptions}
-				handle={(ref) => (gridRef.current = ref ? ref.current : null)}
+				handle={(ref) => (props.gridRef.current = ref ? ref.current : null)}
 				className={'azgrid-filler'}
 				columns={props.columns}
 				dataSource={props.dataSource}
@@ -417,229 +435,5 @@ function DataGridFlexSize(props: DataGridWrapperProps) {
 /* -------------------------------------------------------------------------- */
 /* -------------------------------------------------------------------------- */
 
-/**
- * merges together all different props for columns
- * to build a single final column data array
- * @param props
- * @returns
- */
-function ApplyColumnData(props: any): ColumnDefinition[] {
-	const final_columns: MakeWriteable<LooseColumnDefinition>[] = [];
-	let mcols = props.columns || [];
-	let mcolExts = props.columnExtensions || [];
-	let rightColumns = props.rightColumns || [];
-	let leftColumns = props.leftColumns || [];
-	let editableColumns = props.editableColumns || [];
-	let customColumns = props.customColumns || [];
-
-	if (!Array.isArray(mcols)) return [];
-	/* ------------------------------- fix columns ------------------------------ */
-
-	mcols
-		.map((r) => {
-			if (r == null) return null;
-			if (typeof r === 'string') return { field: r, header: r };
-			if (typeof r === 'object') {
-				let final_cl: MakeWriteable<ColumnDefinition> = {
-					name: get_col_name(r),
-					header: get_col_header(r),
-					width: r.width || undefined,
-				};
-				final_cl = {
-					...defaultColumnOptions,
-					...r,
-					...final_cl,
-				};
-				return final_cl;
-			}
-			return null;
-		})
-		.forEach((r) => {
-			if (r != null) final_columns.push(r);
-		});
-
-	/* ---------------------------- apply extensions ---------------------------- */
-	if (mcolExts && Array.isArray(mcolExts))
-		for (let index = 0; index < mcolExts.length; index++) {
-			const ext = mcolExts[index];
-			const ext_cl = get_col_name(ext);
-			if (!ext_cl) {
-				console.warn('ColumnExtension must have a name');
-				continue;
-			}
-			const mcol = final_columns.find((s) => get_col_name(s) === ext_cl);
-			if (mcol) {
-				for (const key in ext) {
-					if (!mcol[key] && key != 'name') mcol[key] = ext[key];
-				}
-			}
-			// if (ext.widthGrow) mcol.widthGrow = ext.widthGrow;
-		}
-
-	/* ------------------------------- frozen cols ------------------------------ */
-	if (Array.isArray(leftColumns)) {
-		for (let index = 0; index < leftColumns.length; index++) {
-			const r = get_col_name(leftColumns[index]);
-			const mcol = final_columns.find((s) => get_col_name(s) === r);
-			if (mcol) {
-				mcol.locked = 'start';
-			}
-		}
-	}
-	if (Array.isArray(rightColumns)) {
-		for (let index = 0; index < rightColumns.length; index++) {
-			const r = get_col_name(rightColumns[index]);
-			const mcol = final_columns.find((s) => get_col_name(s) === r);
-			if (mcol) {
-				mcol.locked = 'end';
-			}
-		}
-	}
-	/* -------------------------------- ediatable ------------------------------- */
-	if (Array.isArray(editableColumns)) {
-		for (let index = 0; index < editableColumns.length; index++) {
-			const r = get_col_name(editableColumns[index]);
-			const mcol = final_columns.find((s) => get_col_name(s) === r);
-			if (mcol) {
-				mcol.editable = true;
-			}
-		}
-	}
-	for (let index = 0; index < final_columns.length; index++) {
-		const col = final_columns[index];
-		if (col.type) {
-			switch (col.type) {
-				case 'combo':
-				case 'select':
-					//@ts-ignore
-					col.editor = SelectEditor;
-					break;
-				case 'number':
-				case 'numberic':
-					//@ts-ignore
-					col.editor = NumericEditor;
-					break;
-				case 'truefalse':
-				case 'bool':
-					//@ts-ignore
-					col.editor = BoolEditor;
-					break;
-			}
-			if (col.editable != false) col.editable = true;
-			delete col.type;
-		}
-		//@ts-ignore
-		if (!col.editorProps) col.editorProps = {};
-		if (col.items) {
-			//@ts-ignore
-			if (!col.editorProps.idProperty) col.editorProps.idProperty = 'id';
-			//@ts-ignore
-			if (!col.editorProps.collapseOnSelect) col.editorProps.collapseOnSelect = true;
-			//@ts-ignore
-			col.editorProps.dataSource = to_datasource(col.items, col.editorProps.idProperty);
-
-			delete col.items;
-		}
-	}
-
-	/* -------------------------------------------------------------------------- */
-	if (Array.isArray(customColumns)) {
-		for (let index = 0; index < customColumns.length; index++) {
-			const r = customColumns[index];
-			const rn = get_col_name(r);
-			const mcol = final_columns.find((s) => get_col_name(s) === rn);
-			if (mcol) {
-				//@ts-ignore
-				mcol.render = r.render;
-			}
-		}
-	}
-
-	/* ------------------------------ apply renames ----------------------------- */
-	for (let index = 0; index < final_columns.length; index++) {
-		const col = final_columns[index];
-		if (!col.name) {
-			col.name = get_col_name(col);
-			delete col.field;
-			delete col.key;
-			delete col.columnName;
-
-			if (col.flex && !col.defaultFlex) col.defaultFlex = col.flex;
-		}
-	}
-	/* -------------------------------------------------------------------------- */
-	//console.log(final_columns);
-	return final_columns;
-}
-
-function to_datasource(arr: any[], idProperty: string, valueAsID = true) {
-	const res: any[] = [];
-	let index = 0;
-	if (Array.isArray(arr)) {
-		arr.map((s: any) => {
-			let elem = {};
-			if (valueAsID) elem[idProperty] = String(s).toLowerCase();
-			else elem[idProperty] = '_cid_' + index;
-			if (typeof s === 'object') elem = { ...elem, ...s };
-			else elem['label'] = s;
-			res.push(elem);
-			index++;
-		});
-	}
-
-	return res;
-}
-/**
- * Gets name of a column from its column object
- * @param obj
- * @returns
- */
-export function get_col_name(obj: any): string {
-	if (!obj) return '';
-	if (typeof obj == 'string') return obj;
-	if (typeof obj != 'object') return '';
-	return obj.name || obj.field || obj.key || obj.columnName || '';
-}
-/**
- * Gets header of a column
- * @param obj
- * @returns
- */
-export function get_col_header(obj: any): string {
-	if (!obj) return '';
-	if (typeof obj == 'string') return obj;
-	if (typeof obj != 'object') return '';
-	return obj.header || obj.title || get_col_name(obj);
-}
-/**
- * Gets name of a column from its column object
- * @param obj
- * @returns
- */
-function get_row_id(obj: any): any {
-	if (!obj) return '-1';
-	if (typeof obj == 'string') return obj;
-	if (typeof obj != 'object') return '-1';
-	return obj.__table_id || obj.id || '-1';
-}
-
-/**
- * Gets default activation key for grid plugin
- * @returns
- */
-function get_default_key() {
-	return 'ExpiryDate=2999-01-01,Z=1040577552';
-}
-
-//check if two cache objects are the same
-function validateCache(current: any, old: any, looseCheck = false) {
-	if (!old || !object_equals(current, old)) return false;
-
-	if (looseCheck) return true;
-
-	if (current.ds != old.ds) return false;
-	return true;
-}
-
 /* -------------------------------------------------------------------------- */
 export default AzGrid;