@azrico/reactgrid 1.2.4 → 1.2.6

package/src/func/func_grid.ts

@@ -0,0 +1,287 @@
+import { ColumnDefinition, LooseColumnDefinition } from '../views/DataGrid';
+
+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) {
+	let result_data: any = undefined;
+
+	let isUsingCache = false;
+
+	const cacheInfo = { ds: datasource, skip: props.skip, limit: props.limit };
+	//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];
+		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;
+}
+
+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 (!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
+ */
+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) {
+	if (!old || !object_equals(current, old)) return false;
+
+	if (looseCheck) return true;
+
+	if (current.ds != old.ds) return false;
+	return true;
+}

package/src/index.tsx

@@ -1,9 +1,9 @@
 export * from './views/DataGrid';
 
 import AzGrid from './views/DataGrid';
-// import ExampleGrid from './example';
-// import React from 'react';
-// import ReactDOM from 'react-dom/client';
+import ExampleGrid from './example';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
 
 /* -------------------------------------------------------------------------- */