@azrico/reactgrid 1.0.1

package/src/views/DataGrid.tsx

@@ -0,0 +1,337 @@
+import '@inovua/reactdatagrid-enterprise/index.css';
+import '@inovua/reactdatagrid-enterprise/theme/default-dark.css';
+import './theme/styles.css';
+
+import React, { useCallback, useState } from 'react';
+import {
+	TypeColumn,
+	TypeDataGridProps,
+	TypeDataSource,
+	TypeRowDetailsInfo,
+	TypeRowProps,
+	TypeRowSelection,
+} from '@inovua/reactdatagrid-community/types';
+import { fix_parent_child_relations, func_selection } from './func/helpers';
+
+import { ContextMenu } from '@azrico/controls';
+import ReactDataGrid from '@inovua/reactdatagrid-enterprise';
+import { TypeOnSelectionChangeArg } from '@inovua/reactdatagrid-community/types/TypeDataGridProps';
+import clsx from 'clsx';
+import { useResizeDetector } from 'react-resize-detector';
+
+/* -------------------------------------------------------------------------- */
+type Modify<T, R> = Omit<T, keyof R> & R;
+type Writeable<Type> = {
+	-readonly [Key in keyof Type]: Type[Key];
+};
+/* -------------------------------------------------------------------------- */
+export type ColumnDefinition = TypeColumn;
+export type CellDefinition = any;
+export type RowDefinition = any;
+export type RowProps = TypeRowProps;
+export type RowSelectionValue = TypeRowSelection;
+export type DataRowDefinition = any;
+export type DataSourceDefinition = TypeDataSource;
+export type OnSelectionChangeFunc = (config: TypeOnSelectionChangeArg) => void;
+export type RowDetailsFunc = (rowDetailsInfo: TypeRowDetailsInfo) => React.ReactNode;
+/* -------------------------------------------------------------------------- */
+type loose_column_fields = { title: string; key: string; field: string; columnName: string; name: string };
+export type LooseColumnDefinition = Partial<loose_column_fields & ColumnDefinition>;
+//
+type columnOrString = string | LooseColumnDefinition;
+type customColumnData = {
+	name: string;
+	render: (cell: any, formatterParams, onRendered) => React.ReactNode;
+};
+type GridOptions = Partial<TypeDataGridProps>;
+/* -------------------------------------------------------------------------- */
+type AzGridProps = {
+	columns?: columnOrString[];
+	rows?: any[];
+	licenseKey?: string;
+
+	gridOptions?: GridOptions;
+
+	tableColumnExtensions?: any[];
+	editableColumns?: string[];
+	leftColumns?: string[];
+	rightColumns?: string[];
+	customColumns?: customColumnData[];
+
+	contextMenuItems?: any[];
+
+	highlightedRow?: any;
+	RowDetail?: RowDetailsFunc;
+	get_rows?: () => any[];
+
+	selected?: RowSelectionValue;
+	onSelectionChange?: OnSelectionChangeFunc;
+	onRowsChange?: (rows: any[], options: any) => void;
+	onRowClick?: (rowIndex: number, row: any) => void;
+	onRowDoubleClick?: (rowIndex: number, row: any) => void;
+
+	dark?: boolean;
+	allowChildRows?: boolean;
+
+	className?: string;
+};
+
+type DataGridProps = Modify<
+	AzGridProps,
+	{
+		columns: ColumnDefinition[];
+		rows: DataRowDefinition[];
+	}
+>;
+/* -------------------------------------------------------------------------- */
+const defaultOptions: GridOptions = {
+	rowReorderColumn: false,
+	resizable: true,
+
+	rowIndexColumn: true,
+};
+const forcedOptions: GridOptions = {
+	idProperty: '__table_id',
+	nodesProperty: '__children',
+};
+const defaultColumnOptions: ColumnDefinition = {
+	draggable: false,
+	lockable: false,
+};
+
+/* -------------------------------------------------------------------------- */
+export function AzGrid(props: AzGridProps) {
+	const [pendingChanges, set_pendingChanges] = React.useState<number>(1);
+	const [cached_rows, set_cached_rows] = React.useState<any[]>([]);
+
+	/* -------------------------------------------------------------------------- */
+	/*                                   Columns                                  */
+	/* -------------------------------------------------------------------------- */
+	const cached_columns = React.useMemo(() => {
+		const final_columns: Writeable<ColumnDefinition>[] = [];
+		let mcols = props.columns || [];
+		let mcolExts = props.tableColumnExtensions || [];
+		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 (typeof r === 'string') return { field: r, header: r };
+				if (typeof r === 'object') {
+					let final_cl: Writeable<ColumnDefinition> = {
+						name: r.field || r.name || r.key || r.columnName,
+						header: r.header || r.title || r.name || '-',
+						width: r.width || undefined,
+					};
+					delete r.field;
+					delete r.key;
+					delete r.columnName;
+					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 = ext.columnName || ext.name || ext.field;
+				const mcol = final_columns.find((s) => s.name === ext_cl);
+				if (!mcol) continue;
+				// if (ext.width) mcol.width = ext.width;
+				// if (ext.widthGrow) mcol.widthGrow = ext.widthGrow;
+			}
+
+		/* ------------------------------- frozen cols ------------------------------ */
+		if (Array.isArray(leftColumns)) {
+			for (let index = 0; index < leftColumns.length; index++) {
+				const r = leftColumns[index];
+				const mcol = final_columns.find((s) => s.name === r);
+				if (mcol) {
+					mcol.locked = 'start';
+				}
+			}
+		}
+		if (Array.isArray(rightColumns)) {
+			for (let index = 0; index < rightColumns.length; index++) {
+				const r = rightColumns[index];
+				const mcol = final_columns.find((s) => s.name === r);
+				if (mcol) {
+					mcol.locked = 'end';
+				}
+			}
+		}
+		/* -------------------------------- ediatable ------------------------------- */
+		if (Array.isArray(editableColumns)) {
+			for (let index = 0; index < editableColumns.length; index++) {
+				const r = editableColumns[index];
+				const mcol = final_columns.find((s) => s.name === r);
+				if (mcol) {
+					// mcol.editor = editorWrapper;
+					// mcol.editorOptions = {
+					//     editOnClick: true,
+					// };
+				}
+			}
+		}
+		if (Array.isArray(customColumns)) {
+			for (let index = 0; index < customColumns.length; index++) {
+				const r = customColumns[index];
+				const mcol = final_columns.find((s) => s.name === r.name);
+				if (mcol) {
+					//@ts-ignore
+					mcol.render = r.render;
+				}
+			}
+		}
+
+		return final_columns;
+	}, [props.columns, props.leftColumns, props.editableColumns, props.tableColumnExtensions]);
+	/* -------------------------------------------------------------------------- */
+
+	/* -------------------------------------------------------------------------- */
+	/*                                 Row changes                                */
+	/* -------------------------------------------------------------------------- */
+	React.useEffect(() => {
+		if (pendingChanges <= 0) return;
+		let new_rows: any[] = [];
+		if (typeof props.get_rows === 'function') {
+			new_rows = props.get_rows();
+		} else new_rows = props.rows || [];
+		/* -------------------------------------------------------------------------- */
+		if (!Array.isArray(new_rows)) new_rows = [];
+		/* -------------------------- fix child parent rel -------------------------- */
+		if (props.allowChildRows) new_rows = fix_parent_child_relations(new_rows);
+
+		set_cached_rows(new_rows);
+		set_pendingChanges(0);
+	}, [pendingChanges]);
+
+	React.useEffect(() => {
+		set_pendingChanges((r) => r + 1);
+	}, [props.rows]);
+
+	function onRowsChange(rows: any[], options: any) {
+		if (props.onRowsChange) props.onRowsChange(rows, options);
+		set_pendingChanges((r) => r + 1); //notify the cache to update rows after we made changes to them
+	}
+	/* -------------------------------------------------------------------------- */
+	/* -------------------------------------------------------------------------- */
+
+	return <DataGrid {...props} columns={cached_columns} rows={cached_rows} onRowsChange={onRowsChange} highlightedRow={props.highlightedRow} />;
+}
+
+/* -------------------------------------------------------------------------- */
+function DataGrid(props: DataGridProps) {
+	const { columns, rows, highlightedRow, dark, contextMenuItems, onRowsChange } = props;
+
+	/* -------------------------------------------------------------------------- */
+	const gridRef = React.useRef<any>(null);
+	const [menuAnchorEl, set_menuAnchorEl] = React.useState<any>(null);
+	const [menuRow, set_menuRow] = React.useState<any>(null);
+
+	const gridID = React.useMemo(() => 'table-' + Date.now().valueOf(), []);
+
+	/* -------------------------------------------------------------------------- */
+	/*                               Create the grid                              */
+	/* -------------------------------------------------------------------------- */
+
+	const static_gridOptions = React.useMemo<GridOptions>(() => {
+		const firstcolumn = columns[0];
+
+		const licenseKey = props.licenseKey || get_default_key();
+		const events: GridOptions = {
+			onRowClick: onRowClick,
+			onRowDoubleClick: onRowDoubleClick,
+			onRowContextMenu: onRowContextMenu,
+		};
+		const extra_ops: GridOptions = {
+			onSelectionChange: props.onSelectionChange,
+			licenseKey: licenseKey,
+			treeColumn: props.allowChildRows ? firstcolumn.name : undefined,
+			renderRowDetails: props.RowDetail,
+			theme: dark ? 'default-dark' : 'default-light',
+		};
+		return { ...defaultOptions, ...events, ...extra_ops, ...props.gridOptions, ...forcedOptions };
+	}, [props.gridOptions]);
+	const dynamic_gridOptions = React.useMemo<GridOptions>(() => {
+		return { selected: props.selected };
+	}, [props.selected]);
+
+	/* ------------------------------- load events ------------------------------ */
+
+	function onCellEdit(cell: CellDefinition) {}
+
+	function onRowContextMenu(row: TypeRowProps, ev: any) {
+		if (func_selection.has_selection()) return;
+		update_menuAnchorEl(func_selection.getVirtualElement(ev.clientX, ev.clientY));
+		update_menuRow(row.data);
+		ev.preventDefault();
+	}
+	function onRowClick(row: RowProps, event) {
+		props.onRowClick && props.onRowClick(row.rowIndex, row.data);
+	}
+	function onRowDoubleClick(event: MouseEvent, row: RowProps) {
+		props.onRowDoubleClick && props.onRowDoubleClick(row.rowIndex, row.data);
+	}
+
+	/* ------------------------- update the selected row ------------------------ */
+	React.useEffect(() => {
+		if (highlightedRow) gridRef.current!.scrollToRow(getRowIndex(highlightedRow, rows));
+	}, [highlightedRow]);
+
+	/* ------------------------------- ContextMenu ------------------------------ */
+
+	function update_menuAnchorEl(el) {
+		if (!el) {
+			set_menuAnchorEl(el);
+		} else if (menuAnchorEl) set_menuAnchorEl(null);
+	}
+	function update_menuRow(r) {
+		if (!r) {
+			set_menuRow(r);
+		} else if (menuRow) set_menuRow(null);
+	}
+
+	/* -------------------------------------------------------------------------- */
+	// const { width, height, ref: resize_ref } = useResizeDetector();
+
+	return (
+		<div className={clsx(props.className, 'azgrid-nooverflow', 'azgrid-filler')}>
+			<ReactDataGrid {...static_gridOptions} {...dynamic_gridOptions} className={'azgrid-filler'} columns={columns} dataSource={rows} />
+			<ContextMenu menuAnchorEl={menuAnchorEl} set_menuAnchorEl={update_menuAnchorEl} menuRow={menuRow} items={contextMenuItems} />
+		</div>
+	);
+}
+/* -------------------------------------------------------------------------- */
+function get_default_key() {
+	return 'ExpiryDate=2999-01-01,Z=1040577552';
+}
+function getRowIndex(row: any, allrows?: any[]): number {
+	if (!allrows) return -1;
+	return allrows.findIndex((s) => rowKeyGetter(s) === rowKeyGetter(row)) || -1;
+}
+function rowKeyGetter(row: any) {
+	return row.__uid;
+}
+function isRowSelected(row: any, highlightedRow: any) {
+	const rid = rowKeyGetter(row);
+	const highLight = rowKeyGetter(highlightedRow);
+	return rid != null && rid === highLight;
+}
+
+/* -------------------------------------------------------------------------- */
+export default AzGrid;

package/src/views/func/helpers.ts

@@ -0,0 +1,65 @@
+type mrow = { __parent__table_id: any; __table_id: any; __children?: any[] };
+//given an array of rows, fixes parent,child relations
+export function fix_parent_child_relations<T extends mrow>(rows: T[]): T[] {
+	if (!Array.isArray(rows)) rows = [];
+	const child_rows: T[] = [];
+	const parent_rows: T[] = [];
+	for (let index = 0; index < rows.length; index++) {
+		const r = rows[index];
+		if (r.__parent__table_id != undefined) child_rows.push(r);
+		else parent_rows.push(r);
+	}
+	for (let index = 0; index < parent_rows.length; index++) {
+		const pr = parent_rows[index];
+		pr.__children = [];
+	}
+	//find parent for these children !
+	for (let index = 0; index < child_rows.length; index++) {
+		const child = child_rows[index];
+		const parentOfChild = parent_rows.find((s) => s.__table_id == child.__parent__table_id);
+		if (!parentOfChild) continue; //no parent :(
+		//@ts-ignore
+		parentOfChild.__children.push(child);
+	}
+
+	for (let index = 0; index < parent_rows.length; index++) {
+		const pr = parent_rows[index];
+		//@ts-ignore
+		if (pr.__children.length == 0) pr.__children = undefined;
+	}
+
+	return parent_rows;
+}
+export class func_selection {
+	static getVirtualElement(x = 0, y = 0) {
+		return () => ({
+			getBoundingClientRect: func_selection.generateGetBoundingClientRect(x, y),
+		});
+	}
+	static generateGetBoundingClientRect(x = 0, y = 0) {
+		return () => ({
+			width: 0,
+			height: 0,
+			top: y,
+			right: x,
+			bottom: y,
+			left: x,
+		});
+	}
+	static get_selectedText(): string {
+		var text: any = '';
+		if (window.getSelection) {
+			text = window.getSelection()?.toString();
+		} else if ((document as any).selection && (document as any).selection.type != 'Control') {
+			text = (document as any).selection.createRange()?.text;
+		}
+		return text || '';
+	}
+	static has_selection(): boolean {
+		const slct = window.getSelection();
+		if (slct == null) return false;
+		if (slct.type == null) return func_selection.get_selectedText().length !== 0;
+		if (slct.type === 'Range') return true;
+		return false;
+	}
+}

package/src/views/index.ts

@@ -0,0 +1,4 @@
+export * from './DataGrid';
+
+import AzGrid from './DataGrid';
+export default AzGrid;

package/src/views/theme/styles.css

@@ -0,0 +1,26 @@
+.azgrid-container {
+	height: 100%;
+	width: 100%;
+}
+.azgrid-borderbox {
+	box-sizing: border-box;
+}
+.azgrid-filler {
+	height: 100%;
+	width: 100%;
+}
+.azgrid-nooverflow {
+	overflow: hidden;
+}
+.azgrid-testborder {
+	border: 3px solid red;
+}
+.azgrid-pad50px {
+	padding: 50px;
+}
+.azgrid-nopad {
+	padding: 0;
+}
+.azgrid-nomargin {
+	margin: 0;
+}

package/tsconfig.json

@@ -0,0 +1,74 @@
+{
+	"compilerOptions": {
+		/* Visit https://aka.ms/tsconfig.json to read more about this file */
+
+		/* Basic Options */
+		// "incremental": true,                         /* Enable incremental compilation */
+		"target": "ESNEXT" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
+		"module": "ESNext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
+		// "lib": [],                                   /* Specify library files to be included in the compilation. */
+		// "allowJs": true,                             /* Allow javascript files to be compiled. */
+		// "checkJs": true,                             /* Report errors in .js files. */
+		"jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */,
+		"declaration": true /* Generates corresponding '.d.ts' file. */,
+		//"declarationMap": true /* Generates a sourcemap for each corresponding '.d.ts' file. */,
+		// "sourceMap": true,                           /* Generates corresponding '.map' file. */
+		// "outFile": "./",                             /* Concatenate and emit output to single file. */
+		"outDir": "./dist" /* Redirect output structure to the directory. */,
+		"rootDir": "./" /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */,
+		// "composite": true,                           /* Enable project compilation */
+		// "tsBuildInfoFile": "./",                     /* Specify file to store incremental compilation information */
+		// "removeComments": true,                      /* Do not emit comments to output. */
+		// "noEmit": true,                              /* Do not emit outputs. */
+		// "importHelpers": true,                       /* Import emit helpers from 'tslib'. */
+		// "downlevelIteration": true,                  /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+		// "isolatedModules": true,                     /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+
+		/* Strict Type-Checking Options */
+		"strict": true /* Enable all strict type-checking options. */,
+		"noImplicitAny": false /* Raise error on expressions and declarations with an implied 'any' type. */,
+		// "strictNullChecks": true,                    /* Enable strict null checks. */
+		// "strictFunctionTypes": true,                 /* Enable strict checking of function types. */
+		// "strictBindCallApply": true,                 /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
+		// "strictPropertyInitialization": true,        /* Enable strict checking of property initialization in classes. */
+		// "noImplicitThis": true,                      /* Raise error on 'this' expressions with an implied 'any' type. */
+		// "alwaysStrict": true,                        /* Parse in strict mode and emit "use strict" for each source file. */
+
+		/* Additional Checks */
+		// "noUnusedLocals": true,                      /* Report errors on unused locals. */
+		// "noUnusedParameters": true,                  /* Report errors on unused parameters. */
+		// "noImplicitReturns": true,                   /* Report error when not all code paths in function return a value. */
+		// "noFallthroughCasesInSwitch": true,          /* Report errors for fallthrough cases in switch statement. */
+		// "noUncheckedIndexedAccess": true,            /* Include 'undefined' in index signature results */
+		// "noPropertyAccessFromIndexSignature": true,  /* Require undeclared properties from index signatures to use element accesses. */
+
+		/* Module Resolution Options */
+		"moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
+		// "baseUrl": "./",                             /* Base directory to resolve non-absolute module names. */
+		// "paths": {},                                 /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+		// "rootDirs": [],                              /* List of root folders whose combined content represents the structure of the project at runtime. */
+		// "typeRoots": [],                             /* List of folders to include type definitions from. */
+		// "types": [],                                 /* Type declaration files to be included in compilation. */
+		// "allowSyntheticDefaultImports": true,        /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+		"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
+		// "preserveSymlinks": true,                    /* Do not resolve the real path of symlinks. */
+		// "allowUmdGlobalAccess": true,                /* Allow accessing UMD globals from modules. */
+
+		/* Source Map Options */
+		// "sourceRoot": "",                            /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+		// "mapRoot": "",                               /* Specify the location where debugger should locate map files instead of generated locations. */
+		// "inlineSourceMap": true,                     /* Emit a single file with source maps instead of having a separate file. */
+		// "inlineSources": true,                       /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+
+		/* Experimental Options */
+		// "experimentalDecorators": true,              /* Enables experimental support for ES7 decorators. */
+		// "emitDecoratorMetadata": true,               /* Enables experimental support for emitting type metadata for decorators. */
+
+		"resolveJsonModule": true,
+		/* Advanced Options */
+		"skipLibCheck": true /* Skip type checking of declaration files. */,
+		"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
+	},
+	"lib": ["esnext"],
+	"exclude": ["node_modules", "__tests__", "dist", "build"]
+}