Refactor ContextMenuWrapper (#5679)

* refactor context menu wrapper * fix(editor) fix context menu isHidden and isDisabled * remove memo * update snapshots * pr feedback, react. + no single line returns * rename MomentumContextMenu -> ContextMenu * use utopia styles * another snapshopt --------- Co-authored-by: RheeseyB <[email protected]>
concrete-utopia · May 22, 2024 · 99354b6 · 99354b6
1 parent 37d822d
commit 99354b6
Show file tree

Hide file tree

Showing 9 changed files with 531 additions and 539 deletions.
diff --git a/editor/src/components/context-menu-wrapper.tsx b/editor/src/components/context-menu-wrapper.tsx
diff --git a/editor/src/components/element-context-menu.tsx b/editor/src/components/element-context-menu.tsx
@@ -31,7 +31,7 @@ import {
   pasteHere,
   replace,
 } from './context-menu-items'
-import { MomentumContextMenu } from './context-menu-wrapper'
+import { ContextMenu } from './context-menu-wrapper'
 import { useRefEditorState, useEditorState, Substores } from './editor/store/store-hook'
 import { CanvasContextMenuPortalTargetID } from '../core/shared/utils'
 import type { EditorDispatch } from './editor/action-types'
@@ -241,7 +241,7 @@ export const ElementContextMenu = React.memo(({ contextMenuInstance }: ElementCo
     return null
   } else {
     return ReactDOM.createPortal(
-      <MomentumContextMenu
+      <ContextMenu
         id={contextMenuInstance}
         key='element-context-menu'
         items={contextMenuItems}

diff --git a/editor/src/components/navigator/dependency-list-item.tsx b/editor/src/components/navigator/dependency-list-item.tsx
@@ -13,7 +13,7 @@ import {
   Icons,
   AlternateColorThemeComponent,
 } from '../../uuiui'
-import { MenuProvider, MomentumContextMenu } from '../../uuiui-deps'
+import { MenuProvider, ContextMenu } from '../../uuiui-deps'
 import type { DependencyPackageDetails } from '../editor/store/editor-state'
 import { unless } from '../../utils/react-conditionals'
 
@@ -243,7 +243,7 @@ export const DependencyListItem: React.FunctionComponent<
           {versionFieldNode}
         </FlexRow>
       </FlexRow>
-      <MomentumContextMenu id={menuId} items={menuItems} getData={NO_OP} />
+      <ContextMenu id={menuId} items={menuItems} getData={NO_OP} />
     </MenuProvider>
   )
 }
diff --git a/editor/src/components/navigator/external-resources/generic-external-resources-list-item.tsx b/editor/src/components/navigator/external-resources/generic-external-resources-list-item.tsx
@@ -4,7 +4,7 @@ import type {
   ExternalResources,
 } from '../../../printer-parsers/html/external-resources-parser'
 import { useExternalResources } from '../../../printer-parsers/html/external-resources-parser'
-import { MenuProvider, MomentumContextMenu } from '../../../uuiui-deps'
+import { MenuProvider, ContextMenu } from '../../../uuiui-deps'
 import { UIGridRow } from '../../inspector/widgets/ui-grid-row'
 import { ResourcesListGridRowConfig } from './generic-external-resources-list'
 import type { ContextMenuItem } from '../../context-menu-items'
@@ -83,7 +83,7 @@ export const GenericExternalResourcesListItem = React.memo<GenericExternalResour
           >
             {value.rel}
           </div>
-          <MomentumContextMenu id={menuId} items={menuItems} getData={NO_OP} />
+          <ContextMenu id={menuId} items={menuItems} getData={NO_OP} />
         </UIGridRow>
       </MenuProvider>
     )

diff --git a/editor/src/components/navigator/left-pane/github-pane/github-file-changes-list.tsx b/editor/src/components/navigator/left-pane/github-pane/github-file-changes-list.tsx
@@ -18,7 +18,7 @@ import * as EditorActions from '../../../editor/actions/action-creators'
 import { Substores, useEditorState } from '../../../editor/store/store-hook'
 import { GithubFileStatusLetter } from '../../../filebrowser/fileitem'
 import { when } from '../../../../utils/react-conditionals'
-import { MenuProvider, MomentumContextMenu } from '../../../../components/context-menu-wrapper'
+import { MenuProvider, ContextMenu } from '../../../../components/context-menu-wrapper'
 import { NO_OP } from '../../../../core/shared/utils'
 import { useContextMenu } from 'react-contexify'
 import { getConflictMenuItems } from '../../../../core/shared/github-ui'
@@ -148,7 +148,7 @@ const ConflictButton = React.memo((props: ConflictButtonProps) => {
       >
         Action...
       </Button>
-      <MomentumContextMenu id={menuId} items={menuItems} getData={NO_OP} />
+      <ContextMenu id={menuId} items={menuItems} getData={NO_OP} />
     </MenuProvider>
   )
 })

diff --git a/editor/src/components/navigator/left-pane/pages-pane.tsx b/editor/src/components/navigator/left-pane/pages-pane.tsx
@@ -41,7 +41,7 @@ import {
 } from '../../../printer-parsers/html/external-resources-parser'
 import { defaultEither } from '../../../core/shared/either'
 import { unless, when } from '../../../utils/react-conditionals'
-import { MomentumContextMenu } from '../../context-menu-wrapper'
+import { ContextMenu } from '../../context-menu-wrapper'
 import { useDispatch } from '../../editor/store/dispatch-context'
 import {
   addNewPage,
@@ -533,7 +533,7 @@ export const AddPageContextMenu = React.memo(
     }
 
     return ReactDOM.createPortal(
-      <MomentumContextMenu
+      <ContextMenu
         id={contextMenuInstance}
         key='add-page-context-menu'
         items={pageTemplates.map((t) => ({

diff --git a/editor/src/components/navigator/navigator-item/component-picker-context-menu.tsx b/editor/src/components/navigator/navigator-item/component-picker-context-menu.tsx
@@ -45,7 +45,7 @@ import type { PreferredChildComponentDescriptor } from '../../custom-code/intern
 import { fixUtopiaElement, generateConsistentUID } from '../../../core/shared/uid-utils'
 import { getAllUniqueUids } from '../../../core/model/get-unique-ids'
 import { elementFromInsertMenuItem } from '../../editor/insert-callbacks'
-import { ContextMenuWrapper, MomentumContextMenu } from '../../context-menu-wrapper'
+import { ContextMenuWrapper, ContextMenu } from '../../context-menu-wrapper'
 import { BodyMenuOpenClass, NO_OP, assertNever } from '../../../core/shared/utils'
 import { type ContextMenuItem } from '../../context-menu-items'
 import { FlexRow, Icn, type IcnProps } from '../../../uuiui'