diff options
Diffstat (limited to 'src/client/views/ContextMenuItem.tsx')
-rw-r--r-- | src/client/views/ContextMenuItem.tsx | 17 |
1 files changed, 6 insertions, 11 deletions
diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx index dc0751049..9bbb97d7e 100644 --- a/src/client/views/ContextMenuItem.tsx +++ b/src/client/views/ContextMenuItem.tsx @@ -9,7 +9,7 @@ library.add(faAngleRight); export interface OriginalMenuProps { description: string; - event: (e: React.MouseEvent<HTMLDivElement>) => void; + event: () => void; icon?: IconProp; //maybe should be optional (icon?) closeMenu?: () => void; } @@ -21,13 +21,10 @@ export interface SubmenuProps { closeMenu?: () => void; } -export interface ContextMenuItemProps { - type: ContextMenuProps | SubmenuProps; -} export type ContextMenuProps = OriginalMenuProps | SubmenuProps; @observer -export class ContextMenuItem extends React.Component<ContextMenuProps> { +export class ContextMenuItem extends React.Component<ContextMenuProps & { selected?: boolean }> { @observable private _items: Array<ContextMenuProps> = []; @observable private overItem = false; @@ -40,7 +37,7 @@ export class ContextMenuItem extends React.Component<ContextMenuProps> { handleEvent = (e: React.MouseEvent<HTMLDivElement>) => { if ("event" in this.props) { - this.props.event(e); + this.props.event(); this.props.closeMenu && this.props.closeMenu(); } } @@ -67,13 +64,12 @@ export class ContextMenuItem extends React.Component<ContextMenuProps> { return; } this.currentTimeout = setTimeout(action(() => this.overItem = false), ContextMenuItem.timeout); - } render() { if ("event" in this.props) { return ( - <div className="contextMenu-item" onClick={this.handleEvent}> + <div className={"contextMenu-item" + (this.props.selected ? " contextMenu-itemSelected" : "")} onClick={this.handleEvent}> {this.props.icon ? ( <span className="icon-background"> <FontAwesomeIcon icon={this.props.icon} size="sm" /> @@ -84,14 +80,13 @@ export class ContextMenuItem extends React.Component<ContextMenuProps> { </div> </div> ); - } - else { + } else if ("subitems" in this.props) { let submenu = !this.overItem ? (null) : <div className="contextMenu-subMenu-cont" style={{ marginLeft: "100.5%", left: "0px" }}> {this._items.map(prop => <ContextMenuItem {...prop} key={prop.description} closeMenu={this.props.closeMenu} />)} </div>; return ( - <div className="contextMenu-item" onMouseEnter={this.onPointerEnter} onMouseLeave={this.onPointerLeave}> + <div className={"contextMenu-item" + (this.props.selected ? " contextMenu-itemSelected" : "")} onMouseEnter={this.onPointerEnter} onMouseLeave={this.onPointerLeave}> {this.props.icon ? ( <span className="icon-background"> <FontAwesomeIcon icon={this.props.icon} size="sm" /> |