@azrico/reactgrid 1.2.48 → 1.2.50

package/CHANGELOG.md

@@ -2,6 +2,34 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [1.2.50](https://github.com/Azrideus/azrico-reactgrid/compare/v1.2.10...v1.2.50) (2023-07-09)
+
+
+### Features
+
+* editable can be a function ([6ea857e](https://github.com/Azrideus/azrico-reactgrid/commit/6ea857e4f403d2a334dc5e74065f6b8033277ca4))
+
+
+### Bug Fixes
+
+* DataGridDelayedSizeWrapper actual delayed ([2ddfd2f](https://github.com/Azrideus/azrico-reactgrid/commit/2ddfd2fb58c90bd906e1330f22f0ef7468d34afb))
+* onCellSelectionChange ([95c8f54](https://github.com/Azrideus/azrico-reactgrid/commit/95c8f540e94dde0c7e245fb29fb6afc7172957ec))
+* styling ([9018f75](https://github.com/Azrideus/azrico-reactgrid/commit/9018f7593e253720f751f52855a2d956dfc578ed))
+
+### [1.2.49](https://github.com/Azrideus/azrico-reactgrid/compare/v1.2.10...v1.2.49) (2023-07-09)
+
+
+### Features
+
+* editable can be a function ([6ea857e](https://github.com/Azrideus/azrico-reactgrid/commit/6ea857e4f403d2a334dc5e74065f6b8033277ca4))
+
+
+### Bug Fixes
+
+* DataGridDelayedSizeWrapper actual delayed ([2ddfd2f](https://github.com/Azrideus/azrico-reactgrid/commit/2ddfd2fb58c90bd906e1330f22f0ef7468d34afb))
+* onCellSelectionChange ([95c8f54](https://github.com/Azrideus/azrico-reactgrid/commit/95c8f540e94dde0c7e245fb29fb6afc7172957ec))
+* styling ([9018f75](https://github.com/Azrideus/azrico-reactgrid/commit/9018f7593e253720f751f52855a2d956dfc578ed))
+
 ### [1.2.48](https://github.com/Azrideus/azrico-reactgrid/compare/v1.2.10...v1.2.48) (2023-07-09)
 
 

package/dist/src/example.js

@@ -40,7 +40,6 @@ const columns = [{
   defaultFlex: 1
 }];
 const editableColumns = ['job', 'age'];
-const contextMenuItems = ['test'];
 function getData(delta, max = 200) {
   const fd = [];
   console.log('Delta:', delta);
@@ -75,22 +74,29 @@ function ExampleGrid() {
   const [ds_reset, set_ds_reset] = _react.default.useState(0);
   const [delta, set_delta] = _react.default.useState({});
   const [delayed_reload, set_delayed_reload] = _react.default.useState(false);
-  const dataSource = _react.default.useCallback(async dt => {
-    //console.log('Start loading');
-    return await new Promise(resolve => {
-      setTimeout(() => {
-        resolve(getData(delta));
-      }, 1000);
-    });
-  }, [ds_reset, delta]);
-  const details_dataSource = _react.default.useCallback(async dt => {
-    //console.log('Start loading');
-    return await new Promise(resolve => {
-      setTimeout(() => {
-        resolve(getData(delta, 5));
-      }, 1000);
-    });
-  }, [ds_reset, delta]);
+  const dataSource = _react.default.useMemo(() => getData(delta), []);
+  // const dataSource = React.useCallback(
+  // 	async (dt) => {
+  // 		//console.log('Start loading');
+  // 		return await new Promise((resolve) => {
+  // 			setTimeout(() => {
+  // 				resolve(getData(delta));
+  // 			}, 1000);
+  // 		});
+  // 	},
+  // 	[ds_reset, delta]
+  // );
+  // const details_dataSource = React.useCallback(
+  // 	async (dt) => {
+  // 		//console.log('Start loading');
+  // 		return await new Promise((resolve) => {
+  // 			setTimeout(() => {
+  // 				resolve(getData(delta, 5));
+  // 			}, 1000);
+  // 		});
+  // 	},
+  // 	[ds_reset, delta]
+  // );
   function onEditComplete(params) {
     const {
       value,
@@ -126,10 +132,17 @@ function ExampleGrid() {
       render: r => r.value + '^'
     }];
   }, [delayed_reload]);
+  const contextMenuItems = _react.default.useCallback(product => {
+    return [{
+      type: 'text',
+      content: product.name
+    }];
+  }, []);
   return _react.default.createElement(_DataGrid.default, {
     dark: true,
     delayedSize: true,
-    details_dataSource: details_dataSource,
+    // details_dataSource={details_dataSource}
+    dataSource: dataSource,
     details_columns: columns,
     onRowClick: onRowClick,
     onRowDoubleClick: onRowDoubleClick,
@@ -153,8 +166,7 @@ function ExampleGrid() {
       // pageSizes: [100],
       // rowIndexColumn: true,
       // checkboxColumn: true,
-    },
-    dataSource: dataSource
+    }
   });
 }
 var _default = ExampleGrid;

package/dist/src/func/func_grid.d.ts

@@ -37,3 +37,10 @@ export declare function set_row_id(obj: any, val: undefined | string): any;
  */
 export declare function get_default_key(): string;
 export declare function validateCache(current: any, old: any, looseCheck?: boolean): boolean;
+/**
+ * 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 declare function find_realData(alldata: any[], view: any, def?: undefined): any;

package/dist/src/func/func_grid.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ApplyColumnData = ApplyColumnData;
 exports.ApplyDataSource = ApplyDataSource;
+exports.find_realData = find_realData;
 exports.get_col_header = get_col_header;
 exports.get_col_name = get_col_name;
 exports.get_default_key = get_default_key;
@@ -260,9 +261,8 @@ function get_col_header(obj) {
  * @returns
  */
 function get_row_id(obj) {
-  if (!obj) return undefined;
-  if (typeof obj == 'string') return obj;
-  if (typeof obj != 'object') return undefined;
+  if (typeof obj === 'string') return obj;
+  if (typeof obj !== 'object' || !obj) return undefined;
   return obj.__table_id || obj.id || undefined;
 }
 function set_row_id(obj, val) {
@@ -283,4 +283,32 @@ function validateCache(current, old, looseCheck = 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++) {
+    var _current_parent;
+    current_parent = current_parent.parentElement;
+    const dataId = (_current_parent = current_parent) === null || _current_parent === void 0 ? void 0 : _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
+ */
+function find_realData(alldata, view, def = undefined) {
+  if (!Array.isArray(alldata)) return def;
+  const rid = find_realIndex(view);
+  console.log('rid:', rid);
+  if (rid === -1) return def;
+  // console.log('dataSource', alldata);
+  return alldata.find(s => get_row_id(s) === rid);
 }

package/dist/src/views/DataGrid.js

@@ -12,12 +12,14 @@ require("../themes/base_styles.css");
 require("../themes/grid.css");
 var _func_grid = require("../func/func_grid");
 var _controls = require("@azrico/controls");
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _func_child = require("../func/func_child");
 var _reactdatagridEnterprise = _interopRequireDefault(require("@inovua/reactdatagrid-enterprise"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _reactUseSize = require("react-use-size");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /* -------------------------------------------------------------------------- */
 const defaultOptions = {
   //filterTypes: defaultfilterTypes,
@@ -50,6 +52,7 @@ function AzGrid(props) {
   /* -------------------------------------------------------------------------- */
   const cached_data = _react.default.useRef();
   const last_cache_info = _react.default.useRef();
+  const rawDataSource = props.dataSource;
   const dataSource = _react.default.useCallback(async dt => {
     return await (0, _func_grid.ApplyDataSource)(props.dataSource, {
       skip: dt.skip,
@@ -102,6 +105,7 @@ function AzGrid(props) {
     dynamic_gridOptions: dynamic_gridOptions,
     columns: cached_columns,
     dataSource: dataSource,
+    rawDataSource: rawDataSource,
     highlightedRow: props.highlightedRow
   });
 }
@@ -136,10 +140,12 @@ function DataGridEventsWrapper(props) {
   /* ------------------------------- ContextMenu ------------------------------ */
   const onRowContextMenu = _react.default.useCallback((rowProps, event) => {
     if (!rowProps || !rowProps.data || _func_child.func_selection.has_selection()) return;
+    const realRow = (0, _func_grid.find_realData)(props.rawDataSource, event.target, rowProps.data);
     const anEl = _func_child.func_selection.getVirtualElement(event.clientX, event.clientY);
-    update_menuRow(rowProps.data, anEl);
+    update_menuRow(realRow, anEl);
   }, []);
-  const update_menuRow = _react.default.useCallback((r, el) => {
+  const update_menuRow = _react.default.useCallback((r = null, el = null) => {
+    // console.log('Set menuRow:', r);
     set_menuRow(r || null);
     set_menuAnchorEl(el || null);
   }, []);
@@ -149,7 +155,7 @@ function DataGridEventsWrapper(props) {
     menuProps.autoDismiss = true;
     function onclose() {
       menuProps.onDismiss();
-      set_menuAnchorEl(null);
+      update_menuRow();
     }
     return _react.default.createElement(_controls.ContextMenu, {
       menuAnchorEl: menuAnchorEl,
@@ -158,6 +164,12 @@ function DataGridEventsWrapper(props) {
       menu_items: props.contextMenuItems
     });
   }, [props.contextMenuItems, menuAnchorEl, menuRow, update_menuRow]);
+  /* -------------------------------------------------------------------------- */
+  const onRenderRow = (0, _react.useCallback)(rowProps => {
+    // save the original handlers to be called later
+    rowProps['data-row-id'] = (0, _func_grid.get_row_id)(rowProps.data);
+  }, []);
+  /* -------------------------------------------------------------------------- */
   /**
    * Merge click events into grid options
    */
@@ -169,12 +181,16 @@ function DataGridEventsWrapper(props) {
     const contextmenuProps = {
       renderRowContextMenu: renderRowContextMenu
     };
+    const renderProps = {
+      onRenderRow: onRenderRow
+    };
     return {
       ...props.static_gridOptions,
       ...events,
-      ...contextmenuProps
+      ...contextmenuProps,
+      ...renderProps
     };
-  }, [props.static_gridOptions, onRowClick, onRowContextMenu, renderRowContextMenu]);
+  }, [props.static_gridOptions, renderRowContextMenu]);
   /* -------------------------------------------------------------------------- */
   return props.details_dataSource ? _react.default.createElement(DataGridDetailsWrapper, {
     ...props,
@@ -190,7 +206,7 @@ function DataGridDetailsWrapper(props) {
   }, [props.details_columns]);
   const cached_data = _react.default.useRef();
   const last_cache_info = _react.default.useRef();
-  const dataSource = _react.default.useCallback(async dt => {
+  const details_dataSource = _react.default.useCallback(async dt => {
     const res = await (0, _func_grid.ApplyDataSource)(props.details_dataSource, {
       skip: dt.skip,
       limit: dt.limit,
@@ -198,13 +214,13 @@ function DataGridDetailsWrapper(props) {
       last_cache_info: last_cache_info
     });
     return res;
-  }, [props.dataSource]);
+  }, [props.details_dataSource]);
   const renderDetailsGrid = ({
     data
   }) => {
     return _react.default.createElement(_reactdatagridEnterprise.default, {
       defaultFilterValue: props.details_filter,
-      dataSource: dataSource,
+      dataSource: details_dataSource,
       columns: cached_details_columns
     });
   };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@azrico/reactgrid",
-	"version": "1.2.48",
+	"version": "1.2.50",
 	"main": "dist/index.js",
 	"description": "React Datagrid",
 	"author": "Azrideus <MehrdadTavangar@gmail.com>",
@@ -33,7 +33,7 @@
 		"@azrico/object": "^1.4.35",
 		"@emotion/react": "^11.9.3",
 		"@emotion/styled": "^11.9.3",
-		"@inovua/reactdatagrid-enterprise": "^5.8.5",
+		"@inovua/reactdatagrid-enterprise": "^5.9.5",
 		"clsx": "^1.2.1",
 		"react": "^18.2.0",
 		"react-use-size": "^3.0.1"
@@ -43,7 +43,7 @@
 		"@azrico/object": ">=1.4.12",
 		"@emotion/react": ">=11.9.3",
 		"@emotion/styled": ">=11.9.3",
-		"@inovua/reactdatagrid-enterprise": ">=5.8.5",
+		"@inovua/reactdatagrid-enterprise": ">=5.9.5",
 		"clsx": ">=1.2.1",
 		"react": ">=18.2.0",
 		"react-use-size": ">=3.0.1"

package/src/example.tsx

@@ -27,7 +27,6 @@ const columns = [
 ];
 
 const editableColumns = ['job', 'age'];
-const contextMenuItems = ['test'];
 
 function getData(delta: any, max = 200) {
 	const fd: any[] = [];
@@ -67,28 +66,29 @@ export function ExampleGrid() {
 	const [delta, set_delta] = React.useState({});
 	const [delayed_reload, set_delayed_reload] = React.useState(false);
 
-	const dataSource = React.useCallback(
-		async (dt) => {
-			//console.log('Start loading');
-			return await new Promise((resolve) => {
-				setTimeout(() => {
-					resolve(getData(delta));
-				}, 1000);
-			});
-		},
-		[ds_reset, delta]
-	);
-	const details_dataSource = React.useCallback(
-		async (dt) => {
-			//console.log('Start loading');
-			return await new Promise((resolve) => {
-				setTimeout(() => {
-					resolve(getData(delta, 5));
-				}, 1000);
-			});
-		},
-		[ds_reset, delta]
-	);
+	const dataSource = React.useMemo(() => getData(delta), []);
+	// const dataSource = React.useCallback(
+	// 	async (dt) => {
+	// 		//console.log('Start loading');
+	// 		return await new Promise((resolve) => {
+	// 			setTimeout(() => {
+	// 				resolve(getData(delta));
+	// 			}, 1000);
+	// 		});
+	// 	},
+	// 	[ds_reset, delta]
+	// );
+	// const details_dataSource = React.useCallback(
+	// 	async (dt) => {
+	// 		//console.log('Start loading');
+	// 		return await new Promise((resolve) => {
+	// 			setTimeout(() => {
+	// 				resolve(getData(delta, 5));
+	// 			}, 1000);
+	// 		});
+	// 	},
+	// 	[ds_reset, delta]
+	// );
 
 	function onEditComplete(params) {
 		const { value, columnId, rowId, ...rest } = params;
@@ -117,18 +117,28 @@ export function ExampleGrid() {
 		return [{ name: 'name', render: (r) => r.value + '^' }];
 	}, [delayed_reload]);
 
+	const contextMenuItems = React.useCallback((product: any) => {
+		return [
+			{
+				type: 'text',
+				content: product.name,
+			},
+		];
+	}, []);
+
 	return (
 		<AzGrid
 			dark
 			delayedSize
-			details_dataSource={details_dataSource}
+			// details_dataSource={details_dataSource}
+			dataSource={dataSource}
 			details_columns={columns}
 			onRowClick={onRowClick}
 			onRowDoubleClick={onRowDoubleClick}
 			allowChildRows
 			// onSelectionChange={onSelectionChange}
 			// selected={selected}
-			contextMenuItems={contextMenuItems}
+			contextMenuItems={contextMenuItems as any}
 			customColumns={customColumns}
 			columns={columns}
 			editableColumns={editableColumns}
@@ -148,7 +158,6 @@ export function ExampleGrid() {
 					// checkboxColumn: true,
 				}
 			}
-			dataSource={dataSource}
 		/>
 	);
 }

package/src/func/func_grid.ts

@@ -264,9 +264,8 @@ export function get_col_header(obj: any): string {
  * @returns
  */
 export function get_row_id(obj: any): any {
-	if (!obj) return undefined;
-	if (typeof obj == 'string') return obj;
-	if (typeof obj != 'object') return undefined;
+	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 {
@@ -293,3 +292,33 @@ export function validateCache(current: any, old: any, looseCheck = false) {
 	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);
+	console.log('rid:', rid);
+	if (rid === -1) return def;
+	// console.log('dataSource', alldata);
+	return alldata.find((s) => get_row_id(s) === rid);
+}

package/src/views/DataGrid.tsx

@@ -8,6 +8,7 @@ import {
 	ApplyColumnData,
 	ApplyDataSource,
 	ModifyFields,
+	find_realData,
 	get_default_key,
 	get_row_id,
 	validateCache,
@@ -73,7 +74,7 @@ export type AzGridOptions = Partial<TypeDataGridProps>;
 /* -------------------------------------------------------------------------- */
 export type AzGridProps = {
 	dataSource?: any[] | ((args: any) => any[] | Promise<any[] | any>);
-	details_dataSource?: any[] | ((args: any) => any[] | Promise<any[] | any>);
+	details_dataSource?: any[] | ((args: any) => any[] | Promise<any[] | any>); //details is rendered under each row
 	details_columns?: LooseColumnDefinition[];
 	details_filter?: FilterValues;
 
@@ -180,6 +181,7 @@ export function AzGrid(props: AzGridProps) {
 	const cached_data = React.useRef<any>();
 	const last_cache_info = React.useRef<any>();
 
+	const rawDataSource = props.dataSource;
 	const dataSource = React.useCallback(
 		async (dt) => {
 			return await ApplyDataSource(props.dataSource, {
@@ -242,6 +244,7 @@ export function AzGrid(props: AzGridProps) {
 			dynamic_gridOptions={dynamic_gridOptions}
 			columns={cached_columns}
 			dataSource={dataSource}
+			rawDataSource={rawDataSource}
 			highlightedRow={props.highlightedRow}
 		/>
 	);
@@ -253,7 +256,7 @@ export function AzGrid(props: AzGridProps) {
  * @param props
  * @returns
  */
-function DataGridEventsWrapper(props: DataGridWrapperProps) {
+function DataGridEventsWrapper(props: DataGridWrapperProps & { rawDataSource: any }) {
 	/* -------------------------------------------------------------------------- */
 
 	const click_data = React.useRef<any>(null);
@@ -291,11 +294,13 @@ function DataGridEventsWrapper(props: DataGridWrapperProps) {
 	/* ------------------------------- ContextMenu ------------------------------ */
 	const onRowContextMenu = React.useCallback((rowProps, event) => {
 		if (!rowProps || !rowProps.data || func_selection.has_selection()) return;
+		const realRow = find_realData(props.rawDataSource, event.target, rowProps.data);
 		const anEl = func_selection.getVirtualElement(event.clientX, event.clientY);
-		update_menuRow(rowProps.data, anEl);
+		update_menuRow(realRow, anEl);
 	}, []);
 
-	const update_menuRow = React.useCallback((r, el) => {
+	const update_menuRow = React.useCallback((r: any = null, el: any = null) => {
+		// console.log('Set menuRow:', r);
 		set_menuRow(r || null);
 		set_menuAnchorEl(el || null);
 	}, []);
@@ -305,8 +310,9 @@ function DataGridEventsWrapper(props: DataGridWrapperProps) {
 			menuProps.autoDismiss = true;
 			function onclose() {
 				menuProps.onDismiss();
-				set_menuAnchorEl(null);
+				update_menuRow();
 			}
+
 			return (
 				<ContextMenu
 					menuAnchorEl={menuAnchorEl}
@@ -318,6 +324,12 @@ function DataGridEventsWrapper(props: DataGridWrapperProps) {
 		},
 		[props.contextMenuItems, menuAnchorEl, menuRow, update_menuRow]
 	);
+	/* -------------------------------------------------------------------------- */
+	const onRenderRow = useCallback((rowProps) => {
+		// save the original handlers to be called later
+		rowProps['data-row-id'] = get_row_id(rowProps.data);
+	}, []);
+	/* -------------------------------------------------------------------------- */
 	/**
 	 * Merge click events into grid options
 	 */
@@ -329,8 +341,16 @@ function DataGridEventsWrapper(props: DataGridWrapperProps) {
 		const contextmenuProps: AzGridOptions = {
 			renderRowContextMenu: renderRowContextMenu,
 		};
-		return { ...props.static_gridOptions, ...events, ...contextmenuProps };
-	}, [props.static_gridOptions, onRowClick, onRowContextMenu, renderRowContextMenu]);
+		const renderProps: any = {
+			onRenderRow: onRenderRow,
+		};
+		return {
+			...props.static_gridOptions,
+			...events,
+			...contextmenuProps,
+			...renderProps,
+		};
+	}, [props.static_gridOptions, renderRowContextMenu]);
 
 	/* -------------------------------------------------------------------------- */
 
@@ -349,7 +369,7 @@ function DataGridDetailsWrapper(props: DataGridWrapperProps) {
 	const cached_data = React.useRef<any>();
 	const last_cache_info = React.useRef<any>();
 
-	const dataSource = React.useCallback(
+	const details_dataSource = React.useCallback(
 		async (dt) => {
 			const res = await ApplyDataSource(props.details_dataSource, {
 				skip: dt.skip,
@@ -359,13 +379,13 @@ function DataGridDetailsWrapper(props: DataGridWrapperProps) {
 			});
 			return res;
 		},
-		[props.dataSource]
+		[props.details_dataSource]
 	);
 	const renderDetailsGrid = ({ data }) => {
 		return (
 			<ReactDataGrid
 				defaultFilterValue={props.details_filter}
-				dataSource={dataSource}
+				dataSource={details_dataSource}
 				columns={cached_details_columns}
 			></ReactDataGrid>
 		);