@azrico/reactgrid 1.2.36 → 1.2.38

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.38](https://github.com/Azrideus/azrico-reactgrid/compare/v1.2.10...v1.2.38) (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.37](https://github.com/Azrideus/azrico-reactgrid/compare/v1.2.10...v1.2.37) (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.36](https://github.com/Azrideus/azrico-reactgrid/compare/v1.2.10...v1.2.36) (2023-07-09)
 
 

package/dist/src/views/DataGrid.js

@@ -11,9 +11,7 @@ require("@inovua/reactdatagrid-enterprise/theme/amber-dark.css");
 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 _func_child = require("../func/func_child");
 var _reactdatagridEnterprise = _interopRequireDefault(require("@inovua/reactdatagrid-enterprise"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _reactUseSize = require("react-use-size");
@@ -115,15 +113,7 @@ function DataGridEventsWrapper(props) {
   /* -------------------------------------------------------------------------- */
   const click_data = _react.default.useRef(null);
   const [menuAnchorEl, set_menuAnchorEl] = _react.default.useState(null);
-  const [menuRow, set_menuRow] = _react.default.useState(null);
   /* --------------------------------- events --------------------------------- */
-  const onRowContextMenu = _react.default.useCallback((rowProps, event) => {
-    if (!rowProps || !rowProps.data || _func_child.func_selection.has_selection()) return;
-    const anEl = _func_child.func_selection.getVirtualElement(event.clientX, event.clientY);
-    update_menuRow(rowProps.data);
-    update_menuAnchorEl(anEl);
-    event.preventDefault();
-  }, []);
   const onRowClick = _react.default.useCallback((rowProps, event) => {
     const nowDate = Date.now();
     const lastclick = click_data.current[(0, _func_grid.get_row_id)(rowProps)];
@@ -141,44 +131,59 @@ function DataGridEventsWrapper(props) {
     click_data.current = {};
   }, [props.dataSource]);
   /* ------------------------------- ContextMenu ------------------------------ */
+  // const onRowContextMenu = React.useCallback((rowProps, event) => {
+  // 	if (!rowProps || !rowProps.data || func_selection.has_selection()) return;
+  // 	const anEl = func_selection.getVirtualElement(event.clientX, event.clientY);
+  // 	update_menuAnchorEl(anEl);
+  // }, []);
+  const renderRowContextMenu = _react.default.useCallback((menuProps, rowProps) => {
+    menuProps.autoDismiss = true;
+    menuProps.items = [{
+      label: 'Row ' + rowProps.rowIndex
+    }, {
+      label: 'Want to visit ' + rowProps.data.country + '?'
+    }];
+    // return (
+    // 	<ContextMenu
+    // 		menuAnchorEl={menuAnchorEl}
+    // 		set_menuAnchorEl={update_menuAnchorEl}
+    // 		menuRow={rowProps.data}
+    // 		menu_items={props.contextMenuItems as any}
+    // 	/>
+    // );
+  }, [props.contextMenuItems]);
   const update_menuAnchorEl = _react.default.useCallback(el => {
     set_menuAnchorEl(el || null);
   }, []);
-  const update_menuRow = _react.default.useCallback(r => {
-    set_menuRow(r || null);
-  }, []);
   /**
    * Merge click events into grid options
    */
   const static_gridOptions = _react.default.useMemo(() => {
     const events = {
-      onRowClick: onRowClick,
-      onRowContextMenu: onRowContextMenu
+      onRowClick: onRowClick
+      //onRowContextMenu: onRowContextMenu,
+    };
+
+    const contextmenuProps = {
+      renderRowContextMenu: renderRowContextMenu
     };
     return {
       ...props.static_gridOptions,
-      ...events
+      ...events,
+      ...contextmenuProps
     };
   }, [props.static_gridOptions, onRowClick]);
   /* -------------------------------------------------------------------------- */
-  const contextMenu = _react.default.useMemo(() => {
-    return _react.default.createElement(_controls.ContextMenu, {
-      menuAnchorEl: menuAnchorEl,
-      set_menuAnchorEl: update_menuAnchorEl,
-      menuRow: menuRow,
-      menu_items: props.contextMenuItems
-    });
-  }, [menuRow, menuAnchorEl, props.contextMenuItems]);
   if (props.details_dataSource) {
     return _react.default.createElement(DataGridDetailsWrapper, {
       ...props,
       static_gridOptions: static_gridOptions
-    }, contextMenu);
+    });
   } else {
     return _react.default.createElement(DataGridSizeWrapper, {
       ...props,
       static_gridOptions: static_gridOptions
-    }, contextMenu);
+    });
   }
 }
 function DataGridDetailsWrapper(props) {

package/package.json

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

package/src/views/DataGrid.tsx

@@ -259,18 +259,9 @@ function DataGridEventsWrapper(props: DataGridWrapperProps) {
 	const click_data = React.useRef<any>(null);
 
 	const [menuAnchorEl, set_menuAnchorEl] = React.useState<any>(null);
-	const [menuRow, set_menuRow] = React.useState<any>(null);
 
 	/* --------------------------------- events --------------------------------- */
 
-	const onRowContextMenu = React.useCallback((rowProps, event) => {
-		if (!rowProps || !rowProps.data || func_selection.has_selection()) return;
-
-		const anEl = func_selection.getVirtualElement(event.clientX, event.clientY);
-		update_menuRow(rowProps.data);
-		update_menuAnchorEl(anEl);
-		event.preventDefault();
-	}, []);
 	const onRowClick = React.useCallback(
 		(rowProps, event) => {
 			const nowDate = Date.now();
@@ -297,13 +288,36 @@ function DataGridEventsWrapper(props: DataGridWrapperProps) {
 	}, [props.dataSource]);
 
 	/* ------------------------------- ContextMenu ------------------------------ */
-
+	// const onRowContextMenu = React.useCallback((rowProps, event) => {
+	// 	if (!rowProps || !rowProps.data || func_selection.has_selection()) return;
+	// 	const anEl = func_selection.getVirtualElement(event.clientX, event.clientY);
+	// 	update_menuAnchorEl(anEl);
+	// }, []);
+	const renderRowContextMenu = React.useCallback(
+		(menuProps, rowProps) => {
+			menuProps.autoDismiss = true;
+			menuProps.items = [
+				{
+					label: 'Row ' + rowProps.rowIndex,
+				},
+				{
+					label: 'Want to visit ' + rowProps.data.country + '?',
+				},
+			];
+			// return (
+			// 	<ContextMenu
+			// 		menuAnchorEl={menuAnchorEl}
+			// 		set_menuAnchorEl={update_menuAnchorEl}
+			// 		menuRow={rowProps.data}
+			// 		menu_items={props.contextMenuItems as any}
+			// 	/>
+			// );
+		},
+		[props.contextMenuItems]
+	);
 	const update_menuAnchorEl = React.useCallback((el) => {
 		set_menuAnchorEl(el || null);
 	}, []);
-	const update_menuRow = React.useCallback((r) => {
-		set_menuRow(r || null);
-	}, []);
 
 	/**
 	 * Merge click events into grid options
@@ -311,34 +325,29 @@ function DataGridEventsWrapper(props: DataGridWrapperProps) {
 	const static_gridOptions = React.useMemo<AzGridOptions>(() => {
 		const events: AzGridOptions = {
 			onRowClick: onRowClick,
-			onRowContextMenu: onRowContextMenu,
+			//onRowContextMenu: onRowContextMenu,
+		};
+		const contextmenuProps: AzGridOptions = {
+			renderRowContextMenu: renderRowContextMenu,
 		};
-		return { ...props.static_gridOptions, ...events };
+		return { ...props.static_gridOptions, ...events, ...contextmenuProps };
 	}, [props.static_gridOptions, onRowClick]);
 
 	/* -------------------------------------------------------------------------- */
-	const contextMenu = React.useMemo(() => {
-		return (
-			<ContextMenu
-				menuAnchorEl={menuAnchorEl}
-				set_menuAnchorEl={update_menuAnchorEl}
-				menuRow={menuRow}
-				menu_items={props.contextMenuItems as any}
-			/>
-		);
-	}, [menuRow, menuAnchorEl, props.contextMenuItems]);
 
 	if (props.details_dataSource) {
 		return (
-			<DataGridDetailsWrapper {...props} static_gridOptions={static_gridOptions}>
-				{contextMenu}
-			</DataGridDetailsWrapper>
+			<DataGridDetailsWrapper
+				{...props}
+				static_gridOptions={static_gridOptions}
+			></DataGridDetailsWrapper>
 		);
 	} else {
 		return (
-			<DataGridSizeWrapper {...props} static_gridOptions={static_gridOptions}>
-				{contextMenu}
-			</DataGridSizeWrapper>
+			<DataGridSizeWrapper
+				{...props}
+				static_gridOptions={static_gridOptions}
+			></DataGridSizeWrapper>
 		);
 	}
 }