From 8eb794e233f905daaa5b9a25c6720e567512653e Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 23 Jun 2022 12:15:47 -0400
Subject: fixed : contextMenu .  fixed some fitWidth issues for text where
 heights weren't working right

---
 src/client/views/ContextMenu.tsx | 64 ++++++++++------------------------------
 1 file changed, 16 insertions(+), 48 deletions(-)

(limited to 'src/client/views/ContextMenu.tsx')

diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index e2f98de1e..9034cacb2 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -1,10 +1,10 @@
 import React = require("react");
-import { ContextMenuItem, ContextMenuProps, OriginalMenuProps } from "./ContextMenuItem";
-import { observable, action, computed, runInAction, IReactionDisposer, reaction } from "mobx";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { action, computed, IReactionDisposer, observable } from "mobx";
 import { observer } from "mobx-react";
 import "./ContextMenu.scss";
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import Measure from "react-measure";
+import { ContextMenuItem, ContextMenuProps, OriginalMenuProps } from "./ContextMenuItem";
+import { Utils } from "../../Utils";
 
 @observer
 export class ContextMenu extends React.Component {
@@ -116,10 +116,6 @@ export class ContextMenu extends React.Component {
         this._defaultItem = item;
     }
 
-    getItems() {
-        return this._items;
-    }
-
     static readonly buffer = 20;
     get pageX() {
         const x = this._pageX;
@@ -199,37 +195,25 @@ export class ContextMenu extends React.Component {
 
             return eles;
         };
-        return flattenItems(this._items, name => [name]);
+        return flattenItems(this._items.slice(), name => [name]);
     }
 
     @computed get flatItems(): OriginalMenuProps[] {
         return this.filteredItems.filter(item => !Array.isArray(item)) as OriginalMenuProps[];
     }
 
-    @computed get filteredViews() {
-        const createGroupHeader = (contents: any) => {
-            return (
-                <div className="contextMenu-group">
-                    <div className="contextMenu-description">{contents}</div>
-                </div>
-            );
-        };
-        const createItem = (item: ContextMenuProps, selected: boolean) => <ContextMenuItem {...item} key={item.description} closeMenu={this.closeMenu} selected={selected} />;
-        let itemIndex = 0;
-        return this.filteredItems.map(value => {
-            if (Array.isArray(value)) {
-                return createGroupHeader(value.join(" -> "));
-            } else {
-                return createItem(value, itemIndex++ === this.selectedIndex);
-            }
-        });
-    }
-
     @computed get menuItems() {
         if (!this._searchString) {
             return this._items.map((item, ind) => <ContextMenuItem {...item} noexpand={this.itemsNeedSearch ? true : (item as any).noexpand} key={ind + item.description} closeMenu={this.closeMenu} />);
         }
-        return this.filteredViews;
+        return this.filteredItems.map((value, index) => 
+            Array.isArray(value)  ?
+                <div className="contextMenu-group">
+                    <div className="contextMenu-description">{value.join(" -> ")}</div>
+                </div>
+                :
+                <ContextMenuItem {...value} key={index+value.description} closeMenu={this.closeMenu} selected={index === this.selectedIndex} />
+        );
     }
 
     @computed get itemsNeedSearch() {
@@ -237,14 +221,8 @@ export class ContextMenu extends React.Component {
     }
 
     render() {
-        if (!this._display) {
-            return null;
-        }
-        const style = this._yRelativeToTop ? { left: this.pageX, top: this.pageY } :
-            { left: this.pageX, bottom: this.pageY };
-
-        const contents = (
-            <>
+        return !this._display ? (null) : 
+            <div className="contextMenu-cont" style={{left: this.pageX, ...(this._yRelativeToTop ? { top: this.pageY } : { bottom: this.pageY })}}>
                 {!this.itemsNeedSearch ? (null) :
                     <span className={"search-icon"}>
                         <span className="icon-background">
@@ -253,17 +231,7 @@ export class ContextMenu extends React.Component {
                         <input className="contextMenu-item contextMenu-description search" type="text" placeholder="Filter Menu..." value={this._searchString} onKeyDown={this.onKeyDown} onChange={this.onChange} autoFocus />
                     </span>}
                 {this.menuItems}
-            </>
-        );
-        return (
-            <Measure offset onResize={action((r: any) => { this._width = r.offset.width; this._height = r.offset.height; })}>
-                {({ measureRef }) => (
-                    <div className="contextMenu-cont" style={style} ref={measureRef}>
-                        {contents}
-                    </div>
-                )}
-            </Measure>
-        );
+            </div>;
     }
 
     @action
-- 
cgit v1.2.3-70-g09d2


From 689a17b8c686f145f22eab9a520cd00500dd0963 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 23 Jun 2022 12:46:58 -0400
Subject: from last

---
 src/client/views/ContextMenu.tsx     | 1 -
 src/client/views/ContextMenuItem.tsx | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

(limited to 'src/client/views/ContextMenu.tsx')

diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index 9034cacb2..cffcd0f17 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -74,7 +74,6 @@ export class ContextMenu extends React.Component {
     componentDidMount = () => {
         document.addEventListener("pointerdown", this.onPointerDown);
         document.addEventListener("pointerup", this.onPointerUp);
-
     }
 
     @action
diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx
index c136de1c3..30073e21f 100644
--- a/src/client/views/ContextMenuItem.tsx
+++ b/src/client/views/ContextMenuItem.tsx
@@ -1,5 +1,5 @@
 import React = require("react");
-import { observable, action } from "mobx";
+import { observable, action, runInAction } from "mobx";
 import { observer } from "mobx-react";
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -32,7 +32,7 @@ export class ContextMenuItem extends React.Component<ContextMenuProps & { select
     componentDidMount() {
         this._items.length = 0;
         if ((this.props as SubmenuProps)?.subitems) {
-            (this.props as SubmenuProps).subitems?.forEach(i => this._items.push(i));
+            (this.props as SubmenuProps).subitems?.forEach(i => runInAction(() => this._items.push(i)));
         }
     }
 
-- 
cgit v1.2.3-70-g09d2