From 18c526d877da9e53994a69840d70f5fc1a6fcbc9 Mon Sep 17 00:00:00 2001
From: Aakansha Doshi <aakansha1216@gmail.com>
Date: Thu, 27 Jan 2022 17:47:23 +0530
Subject: [PATCH] feat: support contextMenuLabel to be of function type to
 support dynmaic labels (#4654)

---
 src/actions/types.ts           |  7 ++++++-
 src/components/App.tsx         |  4 ++++
 src/components/ContextMenu.tsx | 16 +++++++++++++---
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/actions/types.ts b/src/actions/types.ts
index 5c04a2bf..bfca8a7f 100644
--- a/src/actions/types.ts
+++ b/src/actions/types.ts
@@ -123,7 +123,12 @@ export interface Action {
     appState: AppState,
     elements: readonly ExcalidrawElement[],
   ) => boolean;
-  contextItemLabel?: string;
+  contextItemLabel?:
+    | string
+    | ((
+        elements: readonly ExcalidrawElement[],
+        appState: Readonly<AppState>,
+      ) => string);
   contextItemPredicate?: (
     elements: readonly ExcalidrawElement[],
     appState: AppState,
diff --git a/src/components/App.tsx b/src/components/App.tsx
index b51c7d4c..cfe32c6f 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -4974,6 +4974,7 @@ class App extends React.Component<AppProps, AppState> {
           actionManager: this.actionManager,
           appState: this.state,
           container: this.excalidrawContainerRef.current!,
+          elements,
         });
       } else {
         ContextMenu.push({
@@ -5014,6 +5015,7 @@ class App extends React.Component<AppProps, AppState> {
           actionManager: this.actionManager,
           appState: this.state,
           container: this.excalidrawContainerRef.current!,
+          elements,
         });
       }
     } else if (type === "element") {
@@ -5025,6 +5027,7 @@ class App extends React.Component<AppProps, AppState> {
           actionManager: this.actionManager,
           appState: this.state,
           container: this.excalidrawContainerRef.current!,
+          elements,
         });
       } else {
         ContextMenu.push({
@@ -5069,6 +5072,7 @@ class App extends React.Component<AppProps, AppState> {
           actionManager: this.actionManager,
           appState: this.state,
           container: this.excalidrawContainerRef.current!,
+          elements,
         });
       }
     }
diff --git a/src/components/ContextMenu.tsx b/src/components/ContextMenu.tsx
index 6936039f..c10e1356 100644
--- a/src/components/ContextMenu.tsx
+++ b/src/components/ContextMenu.tsx
@@ -11,6 +11,7 @@ import {
 import { Action } from "../actions/types";
 import { ActionManager } from "../actions/manager";
 import { AppState } from "../types";
+import { NonDeletedExcalidrawElement } from "../element/types";
 
 export type ContextMenuOption = "separator" | Action;
 
@@ -21,6 +22,7 @@ type ContextMenuProps = {
   left: number;
   actionManager: ActionManager;
   appState: Readonly<AppState>;
+  elements: readonly NonDeletedExcalidrawElement[];
 };
 
 const ContextMenu = ({
@@ -30,6 +32,7 @@ const ContextMenu = ({
   left,
   actionManager,
   appState,
+  elements,
 }: ContextMenuProps) => {
   return (
     <Popover
@@ -52,9 +55,14 @@ const ContextMenu = ({
           }
 
           const actionName = option.name;
-          const label = option.contextItemLabel
-            ? t(option.contextItemLabel)
-            : "";
+          let label = "";
+          if (option.contextItemLabel) {
+            if (typeof option.contextItemLabel === "function") {
+              label = t(option.contextItemLabel(elements, appState));
+            } else {
+              label = t(option.contextItemLabel);
+            }
+          }
           return (
             <li key={idx} data-testid={actionName} onClick={onCloseRequest}>
               <button
@@ -101,6 +109,7 @@ type ContextMenuParams = {
   actionManager: ContextMenuProps["actionManager"];
   appState: Readonly<AppState>;
   container: HTMLElement;
+  elements: readonly NonDeletedExcalidrawElement[];
 };
 
 const handleClose = (container: HTMLElement) => {
@@ -129,6 +138,7 @@ export default {
           onCloseRequest={() => handleClose(params.container)}
           actionManager={params.actionManager}
           appState={params.appState}
+          elements={params.elements}
         />,
         getContextMenuNode(params.container),
       );