Merge branch 'master' into alyssa-starter

1 files changed, 27 insertions, 37 deletions

diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index 348d248c8..0e98d2e35 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -2,17 +2,17 @@
 /* eslint-disable react/jsx-props-no-spreading */
 /* eslint-disable default-param-last */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, IReactionDisposer, makeObservable, observable } from 'mobx';
+import { action, computed, IReactionDisposer, makeObservable, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { DivHeight, DivWidth } from '../../ClientUtils';
 import { SnappingManager } from '../util/SnappingManager';
 import './ContextMenu.scss';
-import { ContextMenuItem, ContextMenuProps, OriginalMenuProps } from './ContextMenuItem';
+import { ContextMenuItem, ContextMenuProps } from './ContextMenuItem';
 import { ObservableReactComponent } from './ObservableReactComponent';
 
 @observer
-export class ContextMenu extends ObservableReactComponent<{}> {
+export class ContextMenu extends ObservableReactComponent<{ noexpand?: boolean }> {
     // eslint-disable-next-line no-use-before-define
     static Instance: ContextMenu;
 
@@ -39,7 +39,7 @@ export class ContextMenu extends ObservableReactComponent<{}> {
     @observable _mouseY: number = -1;
     @observable _shouldDisplay: boolean = false;
 
-    constructor(props: any) {
+    constructor(props: object) {
         super(props);
         makeObservable(this);
         ContextMenu.Instance = this;
@@ -148,24 +148,24 @@ export class ContextMenu extends ObservableReactComponent<{}> {
         return wasOpen;
     };
 
-    @computed get filteredItems(): (OriginalMenuProps | string[])[] {
+    @computed get filteredItems(): (ContextMenuProps | string[])[] {
         const searchString = this._searchString.toLowerCase().split(' ');
         const matches = (descriptions: string[]) => searchString.every(s => descriptions.some(desc => desc.toLowerCase().includes(s)));
-        const flattenItems = (items: ContextMenuProps[], groupFunc: (groupName: any) => string[]) => {
-            let eles: (OriginalMenuProps | string[])[] = [];
+        const flattenItems = (items: ContextMenuProps[], groupFunc: (groupName: string) => string[]) => {
+            let eles: (ContextMenuProps | string[])[] = [];
 
-            const leaves: OriginalMenuProps[] = [];
+            const leaves: ContextMenuProps[] = [];
             items.forEach(item => {
                 const { description } = item;
                 const path = groupFunc(description);
-                if ('subitems' in item) {
+                if (item.subitems) {
                     const children = flattenItems(item.subitems, name => [...groupFunc(description), name]);
                     if (children.length || matches(path)) {
                         eles.push(path);
                         eles = eles.concat(children);
                     }
                 } else if (matches(path)) {
-                    leaves.push(item);
+                    leaves.push(item as ContextMenuProps);
                 }
             });
 
@@ -176,14 +176,13 @@ export class ContextMenu extends ObservableReactComponent<{}> {
         return flattenItems(this._items.slice(), name => [name]);
     }
 
-    @computed get flatItems(): OriginalMenuProps[] {
-        return this.filteredItems.filter(item => !Array.isArray(item)) as OriginalMenuProps[];
+    @computed get flatItems(): ContextMenuProps[] {
+        return this.filteredItems.filter(item => !Array.isArray(item)) as ContextMenuProps[];
     }
 
     @computed get menuItems() {
         if (!this._searchString) {
-            console.log('HERESDF');
-            return this._items.map((item, ind) => <ContextMenuItem key={item.description + ind} {...item} selected={ind === this._selectedIndex} noexpand={this.itemsNeedSearch ? true : (item as any).noexpand} closeMenu={this.closeMenu} />);
+            return this._items.map((item, ind) => <ContextMenuItem key={item.description + ind} {...item} selected={ind === this._selectedIndex} noexpand={this.itemsNeedSearch ? true : item.noexpand} closeMenu={this.closeMenu} />);
         }
         return this.filteredItems.map((value, index) =>
             Array.isArray(value) ? (
@@ -202,7 +201,7 @@ export class ContextMenu extends ObservableReactComponent<{}> {
     }
 
     @computed get itemsNeedSearch() {
-        return this._showSearch ? 1 : this._items.reduce((p, mi) => p + ((mi as any).noexpand ? 1 : (mi as any).subitems?.length || 1), 0) > 15;
+        return this._showSearch ? 1 : this._items.reduce((p, mi) => p + (mi.noexpand ? 1 : mi.subitems?.length || 1), 0) > 15;
     }
 
     _searchRef = React.createRef<HTMLInputElement>(); // bcz: we shouldn't need this, since we set autoFocus on the <input> tag, but for some reason we do...
@@ -212,13 +211,15 @@ export class ContextMenu extends ObservableReactComponent<{}> {
         return (
             <div
                 className="contextMenu-cont"
-                ref={action((r: any) => {
-                    if (r) {
-                        this._width = DivWidth(r);
-                        this._height = DivHeight(r);
-                    }
-                    this._searchRef.current?.focus();
-                })}
+                ref={r =>
+                    runInAction(() => {
+                        if (r) {
+                            this._width = DivWidth(r);
+                            this._height = DivHeight(r);
+                        }
+                        this._searchRef.current?.focus();
+                    })
+                }
                 style={{
                     display: this._display ? '' : 'none',
                     left: this.pageX,
@@ -227,22 +228,11 @@ export class ContextMenu extends ObservableReactComponent<{}> {
                     color: SnappingManager.userColor,
                 }}>
                 {!this.itemsNeedSearch ? null : (
-                    <span className="search-icon">
-                        <span className="icon-background">
+                    <span className="contextMenu-search">
+                        <span className="contextMenu-searchIcon">
                             <FontAwesomeIcon icon="search" size="lg" />
                         </span>
-                        <input
-                            ref={this._searchRef}
-                            style={{ color: 'black' }}
-                            className="contextMenu-item contextMenu-description search"
-                            type="text"
-                            placeholder="Filter Menu..."
-                            value={this._searchString}
-                            onKeyDown={this.onKeyDown}
-                            onChange={this.onChange}
-                            // eslint-disable-next-line jsx-a11y/no-autofocus
-                            autoFocus
-                        />
+                        <input ref={this._searchRef} style={{ color: 'black' }} className="contextMenu-searchInput" type="text" placeholder="Filter Menu..." value={this._searchString} onKeyDown={this.onKeyDown} onChange={this.onChange} autoFocus />
                     </span>
                 )}
                 {this.menuItems}
@@ -269,7 +259,7 @@ export class ContextMenu extends ObservableReactComponent<{}> {
             e.preventDefault();
         } else if (e.key === 'Enter' || e.key === 'Tab') {
             const item = this.flatItems[this._selectedIndex];
-            if (item) {
+            if (item.event) {
                 item.event({ x: this.pageX, y: this.pageY });
             } else {
                 // if (this._searchString.startsWith(this._defaultPrefix)) {