Readme

linz · Jun 30, 2023 · 8f2a3ff · 8f2a3ff
1 parent fb9dde1
commit 8f2a3ff
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 26 deletions.
diff --git a/README.md b/README.md
@@ -122,26 +122,28 @@ const GridDemo = () => {
     [],
   );
 
-  const contextMenu = useCallback(
-    (selectedRows: IFormTestRow[]): GridContextMenuItem[] => [
-      {
-        label: "Clear cell...",
-        onSelect: async ({ colDef }) => {
-          selectedRows.forEach((row) => {
-            switch (colDef.field) {
-              case "name":
-                row.name = "";
-                break;
-              case "position":
-                row.position = "";
-                break;
-            }
-          });
-        },
-      },
-    ],
-    [],
-  );
+  const ContextMenu = ({ selectedRows, colDef, close }: GridContextMenuComponentProps<IFormTestRow>): ReactElement => {
+    const onClick = useCallback(() => {
+      selectedRows.forEach((row) => {
+        switch (colDef.field) {
+          case "name":
+            row.name = "";
+            break;
+          case "distance":
+            row.distance = null;
+            break;
+        }
+      });
+      close();
+    }, [close, colDef.field, selectedRows]);
+
+    return (
+            <>
+              <button onClick={onClick}>Button - Clear cell</button>
+              <MenuItem onClick={onClick}>Menu Item - Clear cell</MenuItem>
+            </>
+    );
+  };
 
   const rowData: ITestRow[] = useMemo(
     () => [
@@ -179,6 +181,7 @@ const GridDemo = () => {
                 columnDefs={columnDefs}
                 rowData={rowData}
                 contextMenu={contextMenu}
+                contextMenuSelectRow={false}
                 onContentSize={({ width }) => setPanelSize(width)} />
         </GridWrapper>
       </GridContextProvider>

diff --git a/src/components/gridHook/useGridContextMenu.tsx b/src/components/gridHook/useGridContextMenu.tsx
@@ -63,7 +63,6 @@ export const useGridContextMenu = <RowType extends GridBaseRow>({
     [contextMenuSelectRow, getSelectedRows, openMenu],
   );
 
-  // global onclick
   return {
     openMenu,
     cellContextMenu,
@@ -76,11 +75,7 @@ export const useGridContextMenu = <RowType extends GridBaseRow>({
           onClose={() => closeMenu()}
         >
           {ContextMenu && (
-            <ContextMenu
-              selectedRows={selectedRowsRef.current}
-              colDef={clickedColDefRef.current ?? {}}
-              close={closeMenu}
-            />
+            <ContextMenu selectedRows={selectedRowsRef.current} colDef={clickedColDefRef.current} close={closeMenu} />
           )}
         </ControlledMenu>
       </>