@azrico/reactgrid 1.6.2 → 1.6.5

package/src/func/func_grid.ts

@@ -1,340 +1,351 @@
-import { ColumnDefinition, LooseColumnDefinition } from '../types/types';
-
-import BoolEditor from '@inovua/reactdatagrid-community/BoolEditor';
-// import NumericEditor from '@inovua/reactdatagrid-community/NumericEditor';
-import SelectEditor from '@inovua/reactdatagrid-community/SelectEditor';
-import { fix_parent_child_relations } from './func_child';
-import { object_equals } from '@azrico/object';
-
-export type MakeWriteable<Type> = {
-	-readonly [Key in keyof Type]: Type[Key];
-};
-export type ModifyFields<T, R> = Omit<T, keyof R> & R;
-
-const defaultColumnOptions: ColumnDefinition = {
-	draggable: false,
-	lockable: false,
-	editable: false,
-};
-
-export async function ApplyDataSource(
-	datasource,
-	props,
-	remote: { remoteFilter?: boolean; remoteSort?: boolean } = {}
-) {
-	let result_data: any = undefined;
-
-	let isUsingCache = false;
-
-	//filter/sort are only part of the key when they are sent to a remote dataSource,
-	//local filtering/sorting keeps reusing the cached rows
-	const cacheInfo = {
-		ds: datasource,
-		skip: props.skip,
-		limit: props.limit,
-		filterValue: remote.remoteFilter ? props.filterValue : undefined,
-		sortInfo: remote.remoteSort ? props.sortInfo : undefined,
-	};
-	//check if we can used cached data
-	//if the datasource is changed since last render, we should invalidate cache
-	if (!validateCache(props.last_cache_info.current, cacheInfo, props.looseCacheCheck)) {
-		props.cached_data.current = undefined;
-		props.last_cache_info.current = cacheInfo;
-	}
-
-	if (props.cached_data.current) {
-		//cache is valid, use the cache
-		isUsingCache = true;
-		result_data = props.cached_data.current;
-	} else {
-		//cache is invalid, use the datasource again
-
-		isUsingCache = false;
-		if (typeof datasource === 'function') {
-			result_data = await datasource(props);
-		} else result_data = 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
-	props.cached_data.current = result_data;
-	return result_data;
-}
-/**
- * merges together all different props for columns
- * to build a single final column data array
- * @param column_data
- * @returns
- */
-export function applyColumnData(column_data: any): ColumnDefinition[] {
-	const final_columns: MakeWriteable<LooseColumnDefinition>[] = [];
-	if (!column_data) column_data = {};
-	if (Array.isArray(column_data)) column_data = { columns: column_data };
-	let mcols = column_data.columns || [];
-	let mcolExts = column_data.columnExtensions || [];
-	let rightColumns = column_data.rightColumns || [];
-	let leftColumns = column_data.leftColumns || [];
-	let editableColumns = column_data.editableColumns || [];
-	let customColumns = column_data.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];
-		const coltype = col.type;
-		delete col.type;
-		if (coltype) {
-			switch (coltype) {
-				case 'combo':
-				case 'select':
-					//@ts-ignore
-					col.editor = SelectEditor;
-					break;
-				case 'int':
-				case 'number':
-				case 'numberic':
-					col.type = 'number';
-					break;
-				case 'truefalse':
-				case 'bool':
-				case 'boolean':
-					//@ts-ignore
-					col.editor = BoolEditor;
-					break;
-			}
-			if (col.editable != false) col.editable = true;
-		}
-		//@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;
-}
-
-export 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
- */
-export function get_row_id(obj: any): any {
-	if (typeof obj === 'string') return obj;
-	if (typeof obj !== 'object' || !obj) return undefined;
-	return obj.__table_id || obj.id || undefined;
-}
-export function set_row_id(obj: any, val: undefined | string): any {
-	if (typeof obj != 'object') return false;
-	if (val === undefined) delete obj.__table_id;
-	else obj.__table_id = val;
-	return obj.__table_id;
-}
-
-/**
- * Gets default activation key for grid plugin
- * THIS KEY IS FOR DEBUGGING PURPOSE ONLY.
- * PROVIDE YOUR OWN KEY
- * @returns
- */
-export function get_default_key() {
-	return 'ExpiryDate=2999-01-01,Z=1040577552';
-}
-
-//check if two cache objects are the same
-export function validateCache(current: any, old: any, looseCheck = false) {
-	//deep compare skip/limit/filterValue/sortInfo, array order matters (sort priority)
-	if (!old || !object_equals(current, old, { strictArrayCheck: true })) return false;
-
-	if (looseCheck) return true;
-
-	if (current.ds != old.ds) return false;
-	return true;
-}
-
-/**
- * find the real index of the given row data
- * @param view
- */
-function find_realIndex(view) {
-	let current_parent = view;
-
-	for (let index = 0; index < 3; index++) {
-		current_parent = current_parent.parentElement;
-		const dataId = current_parent?.getAttribute('data-row-id');
-		if (dataId) return dataId;
-	}
-	return -1;
-}
-
-/**
- * find the real index of the given row data
- * sometimes when we scroll the rowData prop becomes invalid
- * but we can manually find the correct data by reading the id from clicked item's Html props
- * @param view
- */
-export function find_realData(alldata: any[], view, def = undefined) {
-	if (!Array.isArray(alldata)) return def;
-	const rid = find_realIndex(view);
-	if (rid === -1) return def;
-	// console.log('dataSource', alldata);
-	return alldata.find((s) => get_row_id(s) === rid);
-}
+import { ColumnDefinition, LooseColumnDefinition } from '../types/types';
+
+import BoolEditor from '@inovua/reactdatagrid-community/BoolEditor';
+// import NumericEditor from '@inovua/reactdatagrid-community/NumericEditor';
+import SelectEditor from '@inovua/reactdatagrid-community/SelectEditor';
+import { fix_parent_child_relations } from './func_child';
+import { object_equals } from '@azrico/object';
+
+export type MakeWriteable<Type> = {
+	-readonly [Key in keyof Type]: Type[Key];
+};
+export type ModifyFields<T, R> = Omit<T, keyof R> & R;
+
+//editable is defaulted after types/extensions are applied, so they can tell if the consumer set it
+const defaultColumnOptions: ColumnDefinition = {
+	draggable: false,
+	lockable: false,
+};
+
+export async function ApplyDataSource(
+	datasource,
+	props,
+	remote: { remoteFilter?: boolean; remoteSort?: boolean } = {}
+) {
+	let result_data: any = undefined;
+
+	let isUsingCache = false;
+
+	//filter/sort are only part of the key when they are sent to a remote dataSource,
+	//local filtering/sorting keeps reusing the cached rows
+	const cacheInfo = {
+		ds: datasource,
+		skip: props.skip,
+		limit: props.limit,
+		filterValue: remote.remoteFilter ? props.filterValue : undefined,
+		sortInfo: remote.remoteSort ? props.sortInfo : undefined,
+	};
+	//check if we can used cached data
+	//if the datasource is changed since last render, we should invalidate cache
+	if (!validateCache(props.last_cache_info.current, cacheInfo, props.looseCacheCheck)) {
+		props.cached_data.current = undefined;
+		props.last_cache_info.current = cacheInfo;
+	}
+
+	if (props.cached_data.current) {
+		//cache is valid, use the cache
+		isUsingCache = true;
+		result_data = props.cached_data.current;
+	} else {
+		//cache is invalid, use the datasource again
+
+		isUsingCache = false;
+		if (typeof datasource === 'function') {
+			result_data = await datasource(props);
+		} else result_data = 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
+	props.cached_data.current = result_data;
+	return result_data;
+}
+/**
+ * merges together all different props for columns
+ * to build a single final column data array
+ * @param column_data
+ * @returns
+ */
+export function applyColumnData(column_data: any): ColumnDefinition[] {
+	const final_columns: MakeWriteable<LooseColumnDefinition>[] = [];
+	if (!column_data) column_data = {};
+	if (Array.isArray(column_data)) column_data = { columns: column_data };
+	let mcols = column_data.columns || [];
+	let mcolExts = column_data.columnExtensions || [];
+	let rightColumns = column_data.rightColumns || [];
+	let leftColumns = column_data.leftColumns || [];
+	let editableColumns = column_data.editableColumns || [];
+	let customColumns = column_data.customColumns || [];
+
+	if (!Array.isArray(mcols)) return [];
+	//columns given as objects are readonly unless something makes them editable
+	const object_columns = new Set<any>();
+	/* ------------------------------- 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,
+				};
+				object_columns.add(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];
+		const coltype = col.type;
+		delete col.type;
+		if (coltype) {
+			switch (coltype) {
+				case 'combo':
+				case 'select':
+					//@ts-ignore
+					col.editor = SelectEditor;
+					break;
+				case 'int':
+				case 'number':
+				case 'numberic':
+					col.type = 'number';
+					break;
+				case 'truefalse':
+				case 'bool':
+				case 'boolean':
+					//@ts-ignore
+					col.editor = BoolEditor;
+					break;
+			}
+			//typed columns are editable unless the consumer set editable (a function decides per cell)
+			if (col.editable === undefined) col.editable = true;
+		}
+		if (col.editable === undefined && object_columns.has(col)) col.editable = false;
+		//@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;
+}
+
+/**
+ * converts select items to an editor dataSource, plain values keep their case as the id
+ * @param arr
+ * @param idProperty
+ * @param valueAsID false uses generated ids instead of the values
+ */
+export 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);
+			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
+ */
+export function get_row_id(obj: any): any {
+	if (typeof obj === 'string') return obj;
+	if (typeof obj !== 'object' || !obj) return undefined;
+	return obj.__table_id || obj.id || undefined;
+}
+export function set_row_id(obj: any, val: undefined | string): any {
+	if (typeof obj != 'object') return false;
+	if (val === undefined) delete obj.__table_id;
+	else obj.__table_id = val;
+	return obj.__table_id;
+}
+
+/**
+ * Gets default activation key for grid plugin
+ * THIS KEY IS FOR DEBUGGING PURPOSE ONLY.
+ * PROVIDE YOUR OWN KEY
+ * @returns
+ */
+export function get_default_key() {
+	return 'ExpiryDate=2999-01-01,Z=1040577552';
+}
+
+//check if two cache objects are the same
+export function validateCache(current: any, old: any, looseCheck = false) {
+	//deep compare skip/limit/filterValue/sortInfo, array order matters (sort priority)
+	if (!old || !object_equals(current, old, { strictArrayCheck: true })) return false;
+
+	if (looseCheck) return true;
+
+	if (current.ds != old.ds) return false;
+	return true;
+}
+
+/**
+ * find the real index of the given row data
+ * @param view
+ */
+function find_realIndex(view) {
+	let current_parent = view;
+
+	for (let index = 0; index < 3; index++) {
+		current_parent = current_parent.parentElement;
+		const dataId = current_parent?.getAttribute('data-row-id');
+		if (dataId) return dataId;
+	}
+	return -1;
+}
+
+/**
+ * find the real index of the given row data
+ * sometimes when we scroll the rowData prop becomes invalid
+ * but we can manually find the correct data by reading the id from clicked item's Html props
+ * @param view
+ */
+export function find_realData(alldata: any[], view, def = undefined) {
+	if (!Array.isArray(alldata)) return def;
+	const rid = find_realIndex(view);
+	if (rid === -1) return def;
+	// console.log('dataSource', alldata);
+	return alldata.find((s) => get_row_id(s) === rid);
+}