@azrico/reactgrid 1.0.11 → 1.0.13

package/dist/src/example.js

@@ -50,19 +50,29 @@ const customColumns = [{
 const contextMenuItems = ['test'];
 function getData() {
   const fd = [];
-  for (let index = 0; index < 5; index++) {
+  for (let index = 0; index < 16; index++) {
     fd.push({
       __table_id: String(index),
       username: 'user-' + index,
       age: 20
     });
     if (index % 5 == 0) {
+      const sub_selfid = 's' + index;
       fd.push({
-        __table_id: 's' + index,
+        __table_id: sub_selfid,
         __parent__table_id: String(index),
-        username: 'sub-user-' + index,
+        username: 'sub-' + index,
         age: 20
       });
+      if (index % 2 == 0) {
+        const sub2_selfid = 'ss' + index;
+        fd.push({
+          __table_id: sub2_selfid,
+          __parent__table_id: sub_selfid,
+          username: 'sub2-' + index,
+          age: 20
+        });
+      }
     }
   }
   return fd;
@@ -74,11 +84,17 @@ function ExampleGrid() {
     return _react.default.createElement("div", null, _react.default.createElement("div", null, 'Test'));
   };
   const [selected, setSelected] = _react.default.useState(null);
+  const [rows, set_rows] = _react.default.useState([]);
   const onSelectionChange = _react.default.useCallback(({
     selected
   }) => {
     setSelected(selected);
   }, []);
+  _react.default.useEffect(() => {
+    setTimeout(() => {
+      set_rows(getData());
+    }, 1000);
+  }, []);
   return _react.default.createElement(_DataGrid.default, {
     dark: true,
     allowChildRows: true,
@@ -87,7 +103,7 @@ function ExampleGrid() {
     contextMenuItems: contextMenuItems,
     customColumns: customColumns,
     columns: columns,
-    rows: getData(),
+    rows: rows,
     leftColumns: leftColumns,
     gridOptions: {
       rowIndexColumn: true,

package/dist/src/{views/func → func}/helpers.js

@@ -5,33 +5,42 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.fix_parent_child_relations = fix_parent_child_relations;
 exports.func_selection = void 0;
+function get_parentId(obj) {
+  return obj.__parent__table_id || obj.parent;
+}
+function get_selfId(obj) {
+  return obj.__table_id;
+}
 //given an array of rows, fixes parent,child relations
 function fix_parent_child_relations(rows) {
   if (!Array.isArray(rows)) rows = [];
-  const child_rows = [];
-  const parent_rows = [];
-  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);
+  const converted_rows = rows.filter(r => r != null).map(r => {
+    return {
+      parent: get_parentId(r),
+      self: get_selfId(r),
+      data: r
+    };
+  });
+  const top_level_rows = converted_rows.filter(r => !r.parent);
+  //find children of top-level parents:
+  for (let index = 0; index < top_level_rows.length; index++) {
+    const mrow = top_level_rows[index];
+    assign_children(mrow, converted_rows);
   }
-  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;
+  const result = top_level_rows.map(r => r.data);
+  console.log(result);
+  return result;
+}
+function assign_children(row, all_rows) {
+  const my_children = all_rows.filter(s => row.self == s.parent);
+  if (my_children.length > 0) {
+    //find children of my children:
+    for (let index = 0; index < my_children.length; index++) {
+      const child = my_children[index];
+      assign_children(child, all_rows);
+    }
+    row.data.__children = my_children.map(r => r.data);
+  } else row.data.__children = undefined;
 }
 class func_selection {
   static getVirtualElement(x = 0, y = 0) {

package/dist/src/views/DataGrid.d.ts

@@ -13,18 +13,20 @@ 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;
+type loose_column_names = {
     key: string;
     field: string;
     columnName: string;
     name: string;
 };
+type loose_column_fields = loose_column_names & {
+    title: string;
+};
 export type LooseColumnDefinition = Partial<loose_column_fields & ColumnDefinition>;
 type columnOrString = string | LooseColumnDefinition;
 type customColumnData = {
     name: string;
-    render: (cell: any, formatterParams: any, onRendered: any) => React.ReactNode;
+    render: (cell: any, formatterParams: any, onRendered: any) => React.ReactNode | undefined | null;
 };
 type GridOptions = Partial<TypeDataGridProps>;
 export type AzGridProps = {
@@ -32,7 +34,9 @@ export type AzGridProps = {
     rows?: any[];
     licenseKey?: string;
     gridOptions?: GridOptions;
-    tableColumnExtensions?: any[];
+    tableColumnExtensions?: Array<{
+        name: string;
+    } & Partial<ColumnDefinition>>;
     editableColumns?: string[];
     leftColumns?: string[];
     rightColumns?: string[];

package/dist/src/views/DataGrid.js

@@ -9,7 +9,7 @@ require("@inovua/reactdatagrid-enterprise/index.css");
 require("@inovua/reactdatagrid-enterprise/theme/default-dark.css");
 require("../themes/styles.css");
 var _react = _interopRequireDefault(require("react"));
-var _helpers = require("./func/helpers");
+var _helpers = require("../func/helpers");
 var _controls = require("@azrico/controls");
 var _reactdatagridEnterprise = _interopRequireDefault(require("@inovua/reactdatagrid-enterprise"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -77,7 +77,9 @@ function AzGrid(props) {
       const ext_cl = get_col_name(ext);
       const mcol = final_columns.find(s => s.name === ext_cl);
       if (!mcol) continue;
-      // if (ext.width) mcol.width = ext.width;
+      if (ext.width) mcol.width = ext.width;
+      if (ext.visible) mcol.visible = ext.visible;
+      if (ext.draggable) mcol.draggable = ext.draggable;
       // if (ext.widthGrow) mcol.widthGrow = ext.widthGrow;
     }
     /* ------------------------------- frozen cols ------------------------------ */
@@ -131,6 +133,7 @@ function AzGrid(props) {
   /* -------------------------------------------------------------------------- */
   _react.default.useEffect(() => {
     if (pendingChanges <= 0) return;
+    console.log('Updated Pending Changes: ', pendingChanges);
     let new_rows = [];
     if (typeof props.get_rows === 'function') {
       new_rows = props.get_rows();
@@ -144,9 +147,11 @@ function AzGrid(props) {
     set_pendingChanges(0);
   }, [pendingChanges]);
   _react.default.useEffect(() => {
+    console.log('Rows Changed !');
     set_pendingChanges(r => r + 1);
   }, [props.rows]);
   function onRowsChange(rows, options) {
+    console.log('onRowsChange');
     if (props.onRowsChange) props.onRowsChange(rows, options);
     set_pendingChanges(r => r + 1); //notify the cache to update rows after we made changes to them
   }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@azrico/reactgrid",
-	"version": "1.0.11",
+	"version": "1.0.13",
 	"main": "dist/index.js",
 	"description": "React Datagrid",
 	"author": "Azrideus <MehrdadTavangar@gmail.com>",

package/src/example.tsx

@@ -24,10 +24,15 @@ const customColumns = [
 const contextMenuItems = ['test'];
 function getData() {
 	const fd: any[] = [];
-	for (let index = 0; index < 5; index++) {
+	for (let index = 0; index < 16; index++) {
 		fd.push({ __table_id: String(index), username: 'user-' + index, age: 20 });
 		if (index % 5 == 0) {
-			fd.push({ __table_id: 's' + index, __parent__table_id: String(index), username: 'sub-user-' + index, age: 20 });
+			const sub_selfid = 's' + index;
+			fd.push({ __table_id: sub_selfid, __parent__table_id: String(index), username: 'sub-' + index, age: 20 });
+			if (index % 2 == 0) {
+				const sub2_selfid = 'ss' + index;
+				fd.push({ __table_id: sub2_selfid, __parent__table_id: sub_selfid, username: 'sub2-' + index, age: 20 });
+			}
 		}
 	}
 	return fd;
@@ -42,9 +47,16 @@ export function ExampleGrid() {
 		);
 	};
 	const [selected, setSelected] = React.useState(null);
+	const [rows, set_rows] = React.useState<any[]>([]);
 	const onSelectionChange = React.useCallback(({ selected }) => {
 		setSelected(selected);
 	}, []);
+
+	React.useEffect(() => {
+		setTimeout(() => {
+			set_rows(getData());
+		}, 1000);
+	}, []);
 	return (
 		<AzGrid
 			dark
@@ -54,7 +66,7 @@ export function ExampleGrid() {
 			contextMenuItems={contextMenuItems}
 			customColumns={customColumns}
 			columns={columns}
-			rows={getData()}
+			rows={rows}
 			leftColumns={leftColumns}
 			gridOptions={{ rowIndexColumn: true, checkboxColumn: true }}
 		/>

package/src/func/helpers.ts

@@ -0,0 +1,74 @@
+type mrow = { __parent__table_id: any; __table_id: any; __children?: any[] };
+type converted_row = { parent: any; self: any; data: mrow };
+
+function get_parentId(obj) {
+	return obj.__parent__table_id || obj.parent;
+}
+function get_selfId(obj) {
+	return obj.__table_id;
+}
+//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 converted_rows: converted_row[] = rows
+		.filter((r) => r != null)
+		.map((r) => {
+			return { parent: get_parentId(r), self: get_selfId(r), data: r };
+		});
+	const top_level_rows: converted_row[] = converted_rows.filter((r) => !r.parent);
+
+	//find children of top-level parents:
+	for (let index = 0; index < top_level_rows.length; index++) {
+		const mrow = top_level_rows[index];
+		assign_children(mrow, converted_rows);
+	}
+	const result = top_level_rows.map((r) => r.data) as T[];
+	console.log(result);
+	return result;
+}
+
+function assign_children(row: converted_row, all_rows: converted_row[]) {
+	const my_children = all_rows.filter((s) => row.self == s.parent);
+	if (my_children.length > 0) {
+		//find children of my children:
+		for (let index = 0; index < my_children.length; index++) {
+			const child = my_children[index];
+			assign_children(child, all_rows);
+		}
+		row.data.__children = my_children.map((r) => r.data);
+	} else row.data.__children = undefined;
+}
+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/DataGrid.tsx

@@ -11,7 +11,7 @@ import {
 	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/helpers';
 
 import { ContextMenu } from '@azrico/controls';
 import ReactDataGrid from '@inovua/reactdatagrid-enterprise';
@@ -35,13 +35,14 @@ 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 };
+type loose_column_names = { key: string; field: string; columnName: string; name: string };
+type loose_column_fields = loose_column_names & { title: string };
 export type LooseColumnDefinition = Partial<loose_column_fields & ColumnDefinition>;
 //
 type columnOrString = string | LooseColumnDefinition;
 type customColumnData = {
 	name: string;
-	render: (cell: any, formatterParams, onRendered) => React.ReactNode;
+	render: (cell: any, formatterParams, onRendered) => React.ReactNode | undefined | null;
 };
 type GridOptions = Partial<TypeDataGridProps>;
 /* -------------------------------------------------------------------------- */
@@ -52,7 +53,7 @@ export type AzGridProps = {
 
 	gridOptions?: GridOptions;
 
-	tableColumnExtensions?: any[];
+	tableColumnExtensions?: Array<{ name: string } & Partial<ColumnDefinition>>;
 	editableColumns?: string[];
 	leftColumns?: string[];
 	rightColumns?: string[];
@@ -152,7 +153,10 @@ export function AzGrid(props: AzGridProps) {
 				const ext_cl = get_col_name(ext);
 				const mcol = final_columns.find((s) => s.name === ext_cl);
 				if (!mcol) continue;
-				// if (ext.width) mcol.width = ext.width;
+				if (ext.width) mcol.width = ext.width;
+				if (ext.visible) mcol.visible = ext.visible;
+				if (ext.draggable) mcol.draggable = ext.draggable;
+
 				// if (ext.widthGrow) mcol.widthGrow = ext.widthGrow;
 			}
 
@@ -209,6 +213,7 @@ export function AzGrid(props: AzGridProps) {
 	/* -------------------------------------------------------------------------- */
 	React.useEffect(() => {
 		if (pendingChanges <= 0) return;
+		console.log('Updated Pending Changes: ', pendingChanges);
 		let new_rows: any[] = [];
 		if (typeof props.get_rows === 'function') {
 			new_rows = props.get_rows();
@@ -224,10 +229,12 @@ export function AzGrid(props: AzGridProps) {
 	}, [pendingChanges]);
 
 	React.useEffect(() => {
+		console.log('Rows Changed !');
 		set_pendingChanges((r) => r + 1);
 	}, [props.rows]);
 
 	function onRowsChange(rows: any[], options: any) {
+		console.log('onRowsChange');
 		if (props.onRowsChange) props.onRowsChange(rows, options);
 		set_pendingChanges((r) => r + 1); //notify the cache to update rows after we made changes to them
 	}

package/src/views/func/helpers.ts

@@ -1,65 +0,0 @@
-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;
-	}
-}