diff options
Diffstat (limited to 'src/client/views/ContextMenuItem.tsx')
| -rw-r--r-- | src/client/views/ContextMenuItem.tsx | 38 |
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 |