@azrico/reactgrid 1.1.7 → 1.1.9

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.js

@@ -120,8 +120,42 @@ 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;
+    update_menuAnchorEl(_helpers.func_selection.getVirtualElement(event.clientX, event.clientY));
+    update_menuRow(rowProps.data);
+    event.preventDefault();
+  }, []);
+  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);
+  }, []);
+  /* ------------------------------- ContextMenu ------------------------------ */
+  const update_menuAnchorEl = _react.default.useCallback(el => {
+    if (!el) {
+      set_menuAnchorEl(el);
+    } else if (menuAnchorEl) set_menuAnchorEl(null);
+  }, []);
+  const update_menuRow = _react.default.useCallback(r => {
+    if (!r) {
+      set_menuRow(r);
+    } else if (menuRow) set_menuRow(null);
+  }, []);
   /* -------------------------------------------------------------------------- */
   /*                               Create the grid                              */
   /* -------------------------------------------------------------------------- */
@@ -130,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
@@ -154,7 +187,7 @@ function DataGrid(props) {
       ...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 => {
@@ -162,31 +195,6 @@ function DataGrid(props) {
     });
     return res;
   }, dynamic_option_names.map(r => props[r]));
-  /* --------------------------------- events --------------------------------- */
-  const onRowContextMenu = (0, _react.useCallback)((rowProps, event) => {
-    if (_helpers.func_selection.has_selection()) return;
-    update_menuAnchorEl(_helpers.func_selection.getVirtualElement(event.clientX, event.clientY));
-    update_menuRow(rowProps.data);
-    event.preventDefault();
-  }, []);
-  const onRowClick = (0, _react.useCallback)((rowProps, event) => {
-    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) {
-      set_menuAnchorEl(el);
-    } else if (menuAnchorEl) set_menuAnchorEl(null);
-  }, []);
-  const update_menuRow = _react.default.useCallback(r => {
-    if (!r) {
-      set_menuRow(r);
-    } else if (menuRow) set_menuRow(null);
-  }, []);
-  /* -------------------------------------------------------------------------- */
   // const { width, height, ref: resize_ref } = useResizeDetector();
   return _react.default.createElement("div", {
     className: (0, _clsx.default)(props.className, 'azgrid-nooverflow', 'azgrid-filler')
@@ -205,6 +213,9 @@ function DataGrid(props) {
   }));
 }
 /* -------------------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
 /**
  * Gets name of a column from its column object
  * @param obj
@@ -216,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.7",
+	"version": "1.1.9",
 	"main": "dist/index.js",
 	"description": "React Datagrid",
 	"author": "Azrideus <MehrdadTavangar@gmail.com>",

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

@@ -220,10 +220,49 @@ 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) => {
+		if (func_selection.has_selection()) return;
+		update_menuAnchorEl(func_selection.getVirtualElement(event.clientX, event.clientY));
+		update_menuRow(rowProps.data);
+		event.preventDefault();
+	}, []);
+	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);
+	}, []);
+
+	/* ------------------------------- ContextMenu ------------------------------ */
+	const update_menuAnchorEl = React.useCallback((el) => {
+		if (!el) {
+			set_menuAnchorEl(el);
+		} else if (menuAnchorEl) set_menuAnchorEl(null);
+	}, []);
+	const update_menuRow = React.useCallback((r) => {
+		if (!r) {
+			set_menuRow(r);
+		} else if (menuRow) set_menuRow(null);
+	}, []);
+
 	/* -------------------------------------------------------------------------- */
 	/*                               Create the grid                              */
 	/* -------------------------------------------------------------------------- */
@@ -233,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,
@@ -250,7 +288,7 @@ function DataGrid(props: DataGridProps) {
 
 	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>(
 		() => {
@@ -263,34 +301,6 @@ function DataGrid(props: DataGridProps) {
 		dynamic_option_names.map((r) => props[r])
 	);
 
-	/* --------------------------------- events --------------------------------- */
-
-	const onRowContextMenu = useCallback((rowProps, event) => {
-		if (func_selection.has_selection()) return;
-		update_menuAnchorEl(func_selection.getVirtualElement(event.clientX, event.clientY));
-		update_menuRow(rowProps.data);
-		event.preventDefault();
-	}, []);
-	const onRowClick = useCallback((rowProps, event) => {
-		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) => {
-		if (!el) {
-			set_menuAnchorEl(el);
-		} else if (menuAnchorEl) set_menuAnchorEl(null);
-	}, []);
-	const update_menuRow = React.useCallback((r) => {
-		if (!r) {
-			set_menuRow(r);
-		} else if (menuRow) set_menuRow(null);
-	}, []);
-
-	/* -------------------------------------------------------------------------- */
 	// const { width, height, ref: resize_ref } = useResizeDetector();
 
 	return (
@@ -313,6 +323,9 @@ function DataGrid(props: DataGridProps) {
 	);
 }
 
+/* -------------------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
 /* -------------------------------------------------------------------------- */
 
 /**
@@ -326,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