Merge branch 'master' into sophie-ai-images

1 files changed, 19 insertions, 19 deletions

diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx
index 3c9d821a9..b2076e1a5 100644
--- a/src/client/views/ContextMenuItem.tsx
+++ b/src/client/views/ContextMenuItem.tsx
@@ -38,16 +38,16 @@ export class ContextMenuItem extends ObservableReactComponent<ContextMenuProps &
 
     componentDidMount() {
         runInAction(() => (this._items.length = 0));
-        if ((this.props as SubmenuProps)?.subitems) {
-            (this.props as SubmenuProps).subitems?.forEach(i => runInAction(() => this._items.push(i)));
+        if ((this._props as SubmenuProps)?.subitems) {
+            (this._props as SubmenuProps).subitems?.forEach(i => runInAction(() => this._items.push(i)));
         }
     }
 
     handleEvent = async (e: React.MouseEvent<HTMLDivElement>) => {
-        if ('event' in this.props) {
-            this.props.closeMenu?.();
-            const batch = this.props.undoable !== false ? UndoManager.StartBatch(`Click Menu item: ${this.props.description}`) : undefined;
-            await this.props.event({ x: e.clientX, y: e.clientY });
+        if ('event' in this._props) {
+            this._props.closeMenu?.();
+            const batch = this._props.undoable !== false ? UndoManager.StartBatch(`Click Menu item: ${this._props.description}`) : undefined;
+            await this._props.event({ x: e.clientX, y: e.clientY });
             batch?.end();
         }
     };
@@ -91,11 +91,11 @@ export class ContextMenuItem extends ObservableReactComponent<ContextMenuProps &
     }
 
     render() {
-        if ('event' in this.props) {
+        if ('event' in this._props) {
             return (
-                <div className={'contextMenu-item' + (this.props.selected ? ' contextMenu-itemSelected' : '')} onPointerDown={this.handleEvent}>
-                    {this.props.icon ? <span className="contextMenu-item-icon-background">{this.isJSXElement(this.props.icon) ? this.props.icon : <FontAwesomeIcon icon={this.props.icon} size="sm" />}</span> : null}
-                    <div className="contextMenu-description">{this.props.description.replace(':', '')}</div>
+                <div className={'contextMenu-item' + (this._props.selected ? ' contextMenu-itemSelected' : '')} onPointerDown={this.handleEvent}>
+                    {this._props.icon ? <span className="contextMenu-item-icon-background">{this.isJSXElement(this._props.icon) ? this._props.icon : <FontAwesomeIcon icon={this._props.icon} size="sm" />}</span> : null}
+                    <div className="contextMenu-description">{this._props.description.replace(':', '')}</div>
                     <div
                         className={`contextMenu-item-background`}
                         style={{
@@ -104,7 +104,7 @@ export class ContextMenuItem extends ObservableReactComponent<ContextMenuProps &
                     />
                 </div>
             );
-        } else if ('subitems' in this.props) {
+        } else if ('subitems' in this._props) {
             const where = !this.overItem ? '' : this._overPosY < window.innerHeight / 3 ? 'flex-start' : this._overPosY > (window.innerHeight * 2) / 3 ? 'flex-end' : 'center';
             const marginTop = !this.overItem ? '' : this._overPosY < window.innerHeight / 3 ? '20px' : this._overPosY > (window.innerHeight * 2) / 3 ? '-20px' : '';
 
@@ -118,32 +118,32 @@ export class ContextMenuItem extends ObservableReactComponent<ContextMenuProps &
                         background: SettingsManager.userBackgroundColor,
                     }}>
                     {this._items.map(prop => (
-                        <ContextMenuItem {...prop} key={prop.description} closeMenu={this.props.closeMenu} />
+                        <ContextMenuItem {...prop} key={prop.description} closeMenu={this._props.closeMenu} />
                     ))}
                 </div>
             );
-            if (!(this.props as SubmenuProps).noexpand) {
+            if (!(this._props as SubmenuProps).noexpand) {
                 return (
                     <div className="contextMenu-inlineMenu">
                         {this._items.map(prop => (
-                            <ContextMenuItem {...prop} key={prop.description} closeMenu={this.props.closeMenu} />
+                            <ContextMenuItem {...prop} key={prop.description} closeMenu={this._props.closeMenu} />
                         ))}
                     </div>
                 );
             }
             return (
                 <div
-                    className={'contextMenu-item' + (this.props.selected ? ' contextMenu-itemSelected' : '')}
-                    style={{ alignItems: where, borderTop: this.props.addDivider ? 'solid 1px' : undefined }}
+                    className={'contextMenu-item' + (this._props.selected ? ' contextMenu-itemSelected' : '')}
+                    style={{ alignItems: where, borderTop: this._props.addDivider ? 'solid 1px' : undefined }}
                     onMouseLeave={this.onPointerLeave}
                     onMouseEnter={this.onPointerEnter}>
-                    {this.props.icon ? (
+                    {this._props.icon ? (
                         <span className="contextMenu-item-icon-background" onMouseEnter={this.onPointerLeave} style={{ alignItems: 'center', alignSelf: 'center' }}>
-                            <FontAwesomeIcon icon={this.props.icon} size="sm" />
+                            <FontAwesomeIcon icon={this._props.icon} size="sm" />
                         </span>
                     ) : null}
                     <div className="contextMenu-description" onMouseEnter={this.onPointerEnter} style={{ alignItems: 'center', alignSelf: 'center' }}>
-                        {this.props.description}
+                        {this._props.description}
                         <FontAwesomeIcon icon={'angle-right'} size="lg" style={{ position: 'absolute', right: '10px' }} />
                     </div>
                     <div