@azrico/reactgrid 1.1.8 → 1.1.10

package/dist/src/example.js

@@ -51,25 +51,26 @@ function getData() {
       name: 'user-' + index,
       age: 20
     });
-    if (index % 5 == 0) {
-      const sub_selfid = 's' + index;
-      fd.push({
-        __table_id: sub_selfid,
-        __parent__table_id: String(index),
-        name: 'sub-' + index,
-        age: 20
-      });
-      if (index % 2 == 0) {
-        const sub2_selfid = 'ss' + index;
-        fd.push({
-          __table_id: sub2_selfid,
-          __parent__table_id: sub_selfid,
-          name: 'sub2-' + index,
-          age: 20
-        });
-      }
-    }
+    //if (index % 5 == 0) {
+    //	const sub_selfid = 's' + index;
+    //	fd.push({
+    //		__table_id: sub_selfid,
+    //		__parent__table_id: String(index),
+    //		name: 'sub-' + index,
+    //		age: 20,
+    //	});
+    //	if (index % 2 == 0) {
+    //		const sub2_selfid = 'ss' + index;
+    //		fd.push({
+    //			__table_id: sub2_selfid,
+    //			__parent__table_id: sub_selfid,
+    //			name: 'sub2-' + index,
+    //			age: 20,
+    //		});
+    //	}
+    //}
   }
+
   return fd;
 }
 function ExampleGrid() {
@@ -83,34 +84,40 @@ function ExampleGrid() {
       }, 1000);
     });
   }, [ds_reset]);
+  const onRowDoubleClick = _react.default.useCallback((index, rowdata) => {
+    console.log((rowdata === null || rowdata === void 0 ? void 0 : rowdata.data) || rowdata);
+  }, []);
+  const onRowClick = _react.default.useCallback((index, rowdata) => {
+    //console.log(rowdata?.data || rowdata);
+  }, []);
   function rst_ds() {
     //console.log('rst_ds');
     set_ds_reset(s => s + 1);
   }
-  return _react.default.createElement("div", null, _react.default.createElement("div", {
-    onClick: rst_ds
-  }, "RESET"), _react.default.createElement(_DataGrid.default, {
+  return _react.default.createElement(_DataGrid.default, {
     dark: true,
-    allowChildRows: true,
+    onRowClick: onRowClick,
+    onRowDoubleClick: onRowDoubleClick,
+    // allowChildRows
     // onSelectionChange={onSelectionChange}
     // selected={selected}
-    contextMenuItems: contextMenuItems,
-    customColumns: customColumns,
+    // contextMenuItems={contextMenuItems}
+    // customColumns={customColumns}
     columns: columns,
-    leftColumns: leftColumns,
+    // leftColumns={leftColumns}
     gridOptions: {
-      defaultFilterValue: filterValue,
-      remoteFilter: false,
-      multiSelect: true,
-      pagination: 'local',
-      defaultLimit: 100,
-      limit: 100,
-      pageSizes: [100],
-      rowIndexColumn: true,
-      checkboxColumn: true
+      // defaultFilterValue: filterValue,
+      // remoteFilter: false,
+      // multiSelect: true,
+      // pagination: 'local',
+      // defaultLimit: 100,
+      // limit: 100,
+      // pageSizes: [100],
+      // rowIndexColumn: true,
+      // checkboxColumn: true,
     },
     dataSource: dataSource
-  }));
+  });
 }
 var _default = ExampleGrid;
 exports.default = _default;

package/dist/src/index.js

@@ -19,6 +19,6 @@ Object.keys(_DataGrid).forEach(function (key) {
 });
 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; }
-var _default = _DataGrid.default; //const root = ReactDOM.createRoot(document.getElementById('testroot') as HTMLElement);
-//root.render(<ExampleGrid />);
+var _default = _DataGrid.default; // const root = ReactDOM.createRoot(document.getElementById('testroot') as HTMLElement);
+// root.render(<ExampleGrid />);
 exports.default = _default;

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

@@ -3,6 +3,7 @@ import '@inovua/reactdatagrid-enterprise/theme/default-dark.css';
 import '@inovua/reactdatagrid-enterprise/theme/amber-dark.css';
 import '../themes/base_styles.css';
 import '../themes/grid.css';
+import { ConvertableToMenuItem } from '@azrico/controls';
 import React from 'react';
 import { TypeColumn, TypeDataGridProps, TypeDataSource, TypeFilterTypes, TypeRowDetailsInfo, TypeRowProps, TypeRowSelection } from '@inovua/reactdatagrid-community/types';
 import { TypeOnSelectionChangeArg } from '@inovua/reactdatagrid-community/types/TypeDataGridProps';
@@ -44,7 +45,7 @@ export type AzGridProps = {
     leftColumns?: string[];
     rightColumns?: string[];
     customColumns?: customColumnData[];
-    contextMenuItems?: any[];
+    contextMenuItems?: ConvertableToMenuItem[];
     highlightedRow?: any;
     RowDetail?: RowDetailsFunc;
     selected?: RowSelectionValue;

package/dist/src/views/DataGrid.js

@@ -10,9 +10,9 @@ require("@inovua/reactdatagrid-enterprise/theme/default-dark.css");
 require("@inovua/reactdatagrid-enterprise/theme/amber-dark.css");
 require("../themes/base_styles.css");
 require("../themes/grid.css");
+var _controls = require("@azrico/controls");
 var _react = _interopRequireWildcard(require("react"));
 var _helpers = require("../func/helpers");
-var _controls = require("@azrico/controls");
 var _reactdatagridEnterprise = _interopRequireDefault(require("@inovua/reactdatagrid-enterprise"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _object = require("@azrico/object");
@@ -120,8 +120,12 @@ function DataGrid(props) {
   } = props;
   /* -------------------------------------------------------------------------- */
   const gridRef = _react.default.useRef(null);
+  const click_data = _react.default.useRef(null);
   const [menuAnchorEl, set_menuAnchorEl] = _react.default.useState(null);
   const [menuRow, set_menuRow] = _react.default.useState(null);
+  _react.default.useEffect(() => {
+    click_data.current = {};
+  }, [dataSource]);
   /* --------------------------------- events --------------------------------- */
   const onRowContextMenu = (0, _react.useCallback)((rowProps, event) => {
     if (_helpers.func_selection.has_selection()) return;
@@ -129,12 +133,18 @@ function DataGrid(props) {
     update_menuRow(rowProps.data);
     event.preventDefault();
   }, []);
-  const onRowClick = (0, _react.useCallback)((rowProps, event) => {
+  const onRowClick = _react.default.useCallback((rowProps, event) => {
+    const nowDate = Date.now();
+    const lastclick = click_data.current[get_row_id(rowProps)];
+    if (lastclick) {
+      const diffTime = Math.abs(nowDate - lastclick);
+      if (diffTime < 400) {
+        props.onRowDoubleClick && props.onRowDoubleClick(rowProps.rowIndex, rowProps.data);
+      }
+    }
+    click_data.current[get_row_id(rowProps)] = nowDate;
     props.onRowClick && props.onRowClick(rowProps.rowIndex, rowProps.data);
   }, []);
-  const onRowDoubleClick = _react.default.useCallback((event, rowProps) => {
-    props.onRowDoubleClick && props.onRowDoubleClick(rowProps.rowIndex, rowProps.data);
-  }, []);
   /* ------------------------------- ContextMenu ------------------------------ */
   const update_menuAnchorEl = _react.default.useCallback(el => {
     if (!el) {
@@ -154,7 +164,6 @@ function DataGrid(props) {
     const licenseKey = props.licenseKey || get_default_key();
     const events = {
       onRowClick: onRowClick,
-      onRowDoubleClick: onRowDoubleClick,
       onSkipChange: props.onSkipChange,
       onLimitChange: props.onLimitChange,
       onRowContextMenu: onRowContextMenu
@@ -171,14 +180,14 @@ function DataGrid(props) {
       ...events,
       ...extra_ops
     };
-  }, [columns, props.allowChildRows, props.RowDetail, onRowClick, onRowDoubleClick, onRowContextMenu]);
+  }, [columns, props.allowChildRows, props.RowDetail]);
   const static_gridOptions = _react.default.useMemo(() => {
     return {
       ...base_gridOptions,
       ...props.gridOptions,
       ...forcedOptions
     };
-  }, [props.gridOptions, base_gridOptions]);
+  }, [props.gridOptions, base_gridOptions, forcedOptions]);
   const dynamic_gridOptions = _react.default.useMemo(() => {
     const res = {};
     dynamic_option_names.map(r => {
@@ -204,6 +213,9 @@ function DataGrid(props) {
   }));
 }
 /* -------------------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
 /**
  * Gets name of a column from its column object
  * @param obj
@@ -215,6 +227,17 @@ function get_col_name(obj) {
   if (typeof obj != 'object') return 'default';
   return obj.name || obj.field || obj.key || obj.columnName || 'default';
 }
+/**
+ * Gets name of a column from its column object
+ * @param obj
+ * @returns
+ */
+function get_row_id(obj) {
+  if (!obj) return 'default';
+  if (typeof obj == 'string') return obj;
+  if (typeof obj != 'object') return 'default';
+  return obj.__table_id || obj.id || 'default';
+}
 /**
  * Gets default activation key for grid plugin
  * @returns

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@azrico/reactgrid",
-	"version": "1.1.8",
+	"version": "1.1.10",
 	"main": "dist/index.js",
 	"description": "React Datagrid",
 	"author": "Azrideus <MehrdadTavangar@gmail.com>",
@@ -29,7 +29,7 @@
 		"typescript": "^4.8.4"
 	},
 	"dependencies": {
-		"@azrico/controls": "1.3.0",
+		"@azrico/controls": "1.3.6",
 		"@azrico/object": "^1.3.1",
 		"@emotion/react": "^11.9.3",
 		"@emotion/styled": "^11.9.3",

package/src/example.tsx

@@ -35,24 +35,24 @@ function getData() {
 	const fd: any[] = [];
 	for (let index = 0; index < 200; index++) {
 		fd.push({ __table_id: String(index), name: 'user-' + index, age: 20 });
-		if (index % 5 == 0) {
-			const sub_selfid = 's' + index;
-			fd.push({
-				__table_id: sub_selfid,
-				__parent__table_id: String(index),
-				name: 'sub-' + index,
-				age: 20,
-			});
-			if (index % 2 == 0) {
-				const sub2_selfid = 'ss' + index;
-				fd.push({
-					__table_id: sub2_selfid,
-					__parent__table_id: sub_selfid,
-					name: 'sub2-' + index,
-					age: 20,
-				});
-			}
-		}
+		//if (index % 5 == 0) {
+		//	const sub_selfid = 's' + index;
+		//	fd.push({
+		//		__table_id: sub_selfid,
+		//		__parent__table_id: String(index),
+		//		name: 'sub-' + index,
+		//		age: 20,
+		//	});
+		//	if (index % 2 == 0) {
+		//		const sub2_selfid = 'ss' + index;
+		//		fd.push({
+		//			__table_id: sub2_selfid,
+		//			__parent__table_id: sub_selfid,
+		//			name: 'sub2-' + index,
+		//			age: 20,
+		//		});
+		//	}
+		//}
 	}
 	return fd;
 }
@@ -73,37 +73,45 @@ export function ExampleGrid() {
 		[ds_reset]
 	);
 
+	const onRowDoubleClick = React.useCallback((index: number, rowdata: any) => {
+		console.log(rowdata?.data || rowdata);
+	}, []);
+	const onRowClick = React.useCallback((index: number, rowdata: any) => {
+		//console.log(rowdata?.data || rowdata);
+	}, []);
+
 	function rst_ds() {
 		//console.log('rst_ds');
 		set_ds_reset((s) => s + 1);
 	}
 
 	return (
-		<div>
-			<div onClick={rst_ds}>RESET</div>
-			<AzGrid
-				dark
-				allowChildRows
-				// onSelectionChange={onSelectionChange}
-				// selected={selected}
-				contextMenuItems={contextMenuItems}
-				customColumns={customColumns}
-				columns={columns}
-				leftColumns={leftColumns}
-				gridOptions={{
-					defaultFilterValue: filterValue,
-					remoteFilter: false,
-					multiSelect: true,
-					pagination: 'local',
-					defaultLimit: 100,
-					limit: 100,
-					pageSizes: [100],
-					rowIndexColumn: true,
-					checkboxColumn: true,
-				}}
-				dataSource={dataSource}
-			/>
-		</div>
+		<AzGrid
+			dark
+			onRowClick={onRowClick}
+			onRowDoubleClick={onRowDoubleClick}
+			// allowChildRows
+			// onSelectionChange={onSelectionChange}
+			// selected={selected}
+			// contextMenuItems={contextMenuItems}
+			// customColumns={customColumns}
+			columns={columns}
+			// leftColumns={leftColumns}
+			gridOptions={
+				{
+					// defaultFilterValue: filterValue,
+					// remoteFilter: false,
+					// multiSelect: true,
+					// pagination: 'local',
+					// defaultLimit: 100,
+					// limit: 100,
+					// pageSizes: [100],
+					// rowIndexColumn: true,
+					// checkboxColumn: true,
+				}
+			}
+			dataSource={dataSource}
+		/>
 	);
 }
 export default ExampleGrid;

package/src/index.tsx

@@ -7,5 +7,5 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 export default AzGrid;
 
-//const root = ReactDOM.createRoot(document.getElementById('testroot') as HTMLElement);
-//root.render(<ExampleGrid />);
+// const root = ReactDOM.createRoot(document.getElementById('testroot') as HTMLElement);
+// root.render(<ExampleGrid />);

package/src/views/DataGrid.tsx

@@ -4,6 +4,7 @@ import '@inovua/reactdatagrid-enterprise/theme/amber-dark.css';
 import '../themes/base_styles.css';
 import '../themes/grid.css';
 
+import { ContextMenu, ConvertableToMenuItem } from '@azrico/controls';
 import React, { useCallback, useState } from 'react';
 import {
 	TypeColumn,
@@ -16,7 +17,6 @@ import {
 } 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';
@@ -70,7 +70,7 @@ export type AzGridProps = {
 	rightColumns?: string[];
 	customColumns?: customColumnData[];
 
-	contextMenuItems?: any[];
+	contextMenuItems?: ConvertableToMenuItem[];
 
 	highlightedRow?: any;
 	RowDetail?: RowDetailsFunc;
@@ -220,10 +220,14 @@ function DataGrid(props: DataGridProps) {
 
 	/* -------------------------------------------------------------------------- */
 	const gridRef = React.useRef<any>(null);
+	const click_data = React.useRef<any>(null);
 
 	const [menuAnchorEl, set_menuAnchorEl] = React.useState<any>(null);
 	const [menuRow, set_menuRow] = React.useState<any>(null);
 
+	React.useEffect(() => {
+		click_data.current = {};
+	}, [dataSource]);
 	/* --------------------------------- events --------------------------------- */
 
 	const onRowContextMenu = useCallback((rowProps, event) => {
@@ -232,12 +236,20 @@ function DataGrid(props: DataGridProps) {
 		update_menuRow(rowProps.data);
 		event.preventDefault();
 	}, []);
-	const onRowClick = useCallback((rowProps, event) => {
+	const onRowClick = React.useCallback((rowProps, event) => {
+		const nowDate = Date.now();
+		const lastclick: number = click_data.current[get_row_id(rowProps)];
+		if (lastclick) {
+			const diffTime = Math.abs(nowDate - lastclick);
+			if (diffTime < 400) {
+				props.onRowDoubleClick &&
+					props.onRowDoubleClick(rowProps.rowIndex, rowProps.data);
+			}
+		}
+
+		click_data.current[get_row_id(rowProps)] = nowDate;
 		props.onRowClick && props.onRowClick(rowProps.rowIndex, rowProps.data);
 	}, []);
-	const onRowDoubleClick = React.useCallback((event, rowProps) => {
-		props.onRowDoubleClick && props.onRowDoubleClick(rowProps.rowIndex, rowProps.data);
-	}, []);
 
 	/* ------------------------------- ContextMenu ------------------------------ */
 	const update_menuAnchorEl = React.useCallback((el) => {
@@ -260,7 +272,6 @@ function DataGrid(props: DataGridProps) {
 		const licenseKey = props.licenseKey || get_default_key();
 		const events: GridOptions = {
 			onRowClick: onRowClick,
-			onRowDoubleClick: onRowDoubleClick,
 			onSkipChange: props.onSkipChange,
 			onLimitChange: props.onLimitChange,
 			onRowContextMenu: onRowContextMenu,
@@ -273,18 +284,11 @@ function DataGrid(props: DataGridProps) {
 			theme: dark ? 'amber-dark' : 'default-light',
 		};
 		return { ...defaultOptions, ...events, ...extra_ops };
-	}, [
-		columns,
-		props.allowChildRows,
-		props.RowDetail,
-		onRowClick,
-		onRowDoubleClick,
-		onRowContextMenu,
-	]);
+	}, [columns, props.allowChildRows, props.RowDetail]);
 
 	const static_gridOptions = React.useMemo<GridOptions>(() => {
 		return { ...base_gridOptions, ...props.gridOptions, ...forcedOptions };
-	}, [props.gridOptions, base_gridOptions]);
+	}, [props.gridOptions, base_gridOptions, forcedOptions]);
 
 	const dynamic_gridOptions = React.useMemo<GridOptions>(
 		() => {
@@ -319,6 +323,9 @@ function DataGrid(props: DataGridProps) {
 	);
 }
 
+/* -------------------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
 /* -------------------------------------------------------------------------- */
 
 /**
@@ -332,6 +339,17 @@ function get_col_name(obj: any): string {
 	if (typeof obj != 'object') return 'default';
 	return obj.name || obj.field || obj.key || obj.columnName || 'default';
 }
+/**
+ * Gets name of a column from its column object
+ * @param obj
+ * @returns
+ */
+function get_row_id(obj: any): any {
+	if (!obj) return 'default';
+	if (typeof obj == 'string') return obj;
+	if (typeof obj != 'object') return 'default';
+	return obj.__table_id || obj.id || 'default';
+}
 
 /**
  * Gets default activation key for grid plugin