diff options
Diffstat (limited to 'src/client/views/ContextMenuItem.tsx')
| -rw-r--r-- | src/client/views/ContextMenuItem.tsx | 84 |
1 files changed, 49 insertions, 35 deletions
diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx index 30073e21f..dc9c2eb6c 100644 --- a/src/client/views/ContextMenuItem.tsx +++ b/src/client/views/ContextMenuItem.tsx @@ -1,9 +1,9 @@ -import React = require("react"); -import { observable, action, runInAction } from "mobx"; -import { observer } from "mobx-react"; +import React = require('react'); +import { observable, action, runInAction } from 'mobx'; +import { observer } from 'mobx-react'; import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { UndoManager } from "../util/UndoManager"; +import { UndoManager } from '../util/UndoManager'; export interface OriginalMenuProps { description: string; @@ -37,7 +37,7 @@ export class ContextMenuItem extends React.Component<ContextMenuProps & { select } handleEvent = async (e: React.MouseEvent<HTMLDivElement>) => { - if ("event" in this.props) { + if ('event' in this.props) { this.props.closeMenu?.(); let batch: UndoManager.Batch | undefined; if (this.props.undoable !== false) { @@ -46,7 +46,7 @@ export class ContextMenuItem extends React.Component<ContextMenuProps & { select await this.props.event({ x: e.clientX, y: e.clientY }); batch?.end(); } - } + }; currentTimeout?: any; static readonly timeout = 300; @@ -62,8 +62,11 @@ export class ContextMenuItem extends React.Component<ContextMenuProps & { select } this._overPosY = e.clientY; this._overPosX = e.clientX; - this.currentTimeout = setTimeout(action(() => this.overItem = true), ContextMenuItem.timeout); - } + this.currentTimeout = setTimeout( + action(() => (this.overItem = true)), + ContextMenuItem.timeout + ); + }; onPointerLeave = () => { if (this.currentTimeout) { @@ -73,57 +76,68 @@ export class ContextMenuItem extends React.Component<ContextMenuProps & { select if (!this.overItem) { return; } - this.currentTimeout = setTimeout(action(() => this.overItem = false), ContextMenuItem.timeout); - } + this.currentTimeout = setTimeout( + action(() => (this.overItem = false)), + ContextMenuItem.timeout + ); + }; render() { - if ("event" in this.props) { + if ('event' in this.props) { return ( - <div className={"contextMenu-item" + (this.props.selected ? " contextMenu-itemSelected" : "")} onPointerDown={this.handleEvent}> + <div className={'contextMenu-item' + (this.props.selected ? ' contextMenu-itemSelected' : '')} onPointerDown={this.handleEvent}> {this.props.icon ? ( - <span className="icon-background"> + <span className="contextMenu-item-icon-background"> <FontAwesomeIcon icon={this.props.icon} size="sm" /> </span> ) : null} - <div className="contextMenu-description"> - {this.props.description.replace(":", "")} - </div> + <div className="contextMenu-description">{this.props.description.replace(':', '')}</div> </div> ); - } 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" : ""; + } 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' : ''; // here - const submenu = !this.overItem ? (null) : - <div className="contextMenu-subMenu-cont" + const submenu = !this.overItem ? null : ( + <div + className="contextMenu-subMenu-cont" style={{ - marginLeft: window.innerHeight - this._overPosX - 50 > 0 ? "90%" : "20%", marginTop + marginLeft: window.innerHeight - this._overPosX - 50 > 0 ? '90%' : '20%', + marginTop, }}> - {this._items.map(prop => <ContextMenuItem {...prop} key={prop.description} closeMenu={this.props.closeMenu} />)} - </div>; + {this._items.map(prop => ( + <ContextMenuItem {...prop} key={prop.description} closeMenu={this.props.closeMenu} /> + ))} + </div> + ); if (!(this.props as SubmenuProps).noexpand) { - return <div className="contextMenu-inlineMenu"> - {this._items.map(prop => <ContextMenuItem {...prop} key={prop.description} closeMenu={this.props.closeMenu} />)} - </div>; + return ( + <div className="contextMenu-inlineMenu"> + {this._items.map(prop => ( + <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 }} - onMouseLeave={this.onPointerLeave} onMouseEnter={this.onPointerEnter}> + <div + 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 ? ( - <span className="icon-background" onMouseEnter={this.onPointerLeave} style={{ alignItems: "center", alignSelf: "center" }}> + <span className="contextMenu-item-icon-background" onMouseEnter={this.onPointerLeave} style={{ alignItems: 'center', alignSelf: 'center' }}> <FontAwesomeIcon icon={this.props.icon} size="sm" /> </span> ) : null} - <div className="contextMenu-description" onMouseEnter={this.onPointerEnter} - style={{ alignItems: "center", alignSelf: "center" }} > + <div className="contextMenu-description" onMouseEnter={this.onPointerEnter} style={{ alignItems: 'center', alignSelf: 'center' }}> {this.props.description} - <FontAwesomeIcon icon={"angle-right"} size="lg" style={{ position: "absolute", right: "10px" }} /> + <FontAwesomeIcon icon={'angle-right'} size="lg" style={{ position: 'absolute', right: '10px' }} /> </div> {submenu} </div> ); } } -}
\ No newline at end of file +} |