popup menu cleanup

packages/web/src/modals/DropDownMenu.js

@@ -1,7 +1,6 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import styled from 'styled-components';
-import { LoadingToken, sleep } from '../utility/common';
+import { sleep } from '../utility/common';
 import useDocumentClick from '../utility/useDocumentClick';
 import { useHideMenu } from './showMenu';
 
@@ -62,112 +61,6 @@ export function DropDownMenuItem({ children, keyText = undefined, onClick }) {
   );
 }
 
-// (DropDownMenuItem as any).contextTypes = {
-//     parentMenu: PropTypes.any
-// };
-
-// interface IDropDownMenuLinkProps {
-//     href: string;
-//     keyText?: string;
-// }
-
-// export class DropDownMenuLink extends React.Component<IDropDownMenuLinkProps> {
-//     render() {
-//         return <li onMouseEnter={this.handleMouseEnter.bind(this)}><Link forceSimpleLink href={this.props.href}>{this.props.children}{this.props.keyText && <span className='context_menu_key_text'>{this.props.keyText}</span>}</Link></li>;
-//     }
-
-//     handleMouseEnter() {
-//         if (this.context.parentMenu) this.context.parentMenu.closeSubmenu();
-//     }
-// }
-
-// (DropDownMenuLink as any).contextTypes = {
-//     parentMenu: PropTypes.any
-// };
-
-// // export function DropDownMenu(props: { children?: any }) {
-// //     return <div className="btn-group">
-// //         <button type="button" className="btn btn-default dropdown-toggle btn-xs" data-toggle="dropdown"
-// //             aria-haspopup="true" aria-expanded="false" tabIndex={-1}>
-// //             <span className="caret"></span>
-// //         </button>
-// //         <ul className="dropdown-menu">
-// //             {props.children}
-// //         </ul>
-// //     </div>
-// // }
-
-// export function DropDownMenuDivider(props: {}) {
-//   return <li className="dropdown-divider"></li>;
-// }
-
-// export class DropDownSubmenuItem extends React.Component<IDropDownSubmenuItemProps> {
-//     menuInstance: ContextMenu;
-//     domObject: Element;
-
-//     render() {
-//         return <li onMouseEnter={this.handleMouseEnter.bind(this)} ref={x => this.domObject = x}><Link onClick={() => null}>{this.props.title} <IconSpan icon='fa-caret-right' /></Link></li>;
-//     }
-
-//     closeSubmenu() {
-//         if (this.menuInstance != null) {
-//             this.menuInstance.close();
-//             this.menuInstance = null;
-//         }
-
-//         if (this.context.parentMenu) this.context.parentMenu.submenu = null;
-//     }
-
-//     closeOtherSubmenu() {
-//         if (this.context.parentMenu) this.context.parentMenu.closeSubmenu();
-//     }
-
-//     handleMouseEnter() {
-//         this.closeOtherSubmenu();
-
-//         let offset = $(this.domObject).offset();
-//         let width = $(this.domObject).width();
-
-//         this.menuInstance = showMenuCore(offset.left + width, offset.top, this);
-//         if (this.context.parentMenu) this.context.parentMenu.submenu = this;
-//     }
-// }
-
-// (DropDownSubmenuItem as any).contextTypes = {
-//     parentMenu: PropTypes.any
-// };
-
-// export class DropDownMenu extends React.Component<IDropDownMenuProps, IDropDownMenuState> {
-//     domButton: Element;
-
-//     constructor(props) {
-//         super(props);
-//         this.state = {
-//             isExpanded: false,
-//         };
-//     }
-
-//     render() {
-//         let className = this.props.classOverride || ('btn btn-xs btn-default drop_down_menu_button ' + (this.props.className || ''));
-//         return <button id={this.props.buttonElementId} type="button" className={className} tabIndex={-1} onClick={this.menuButtonClick} ref={x => this.domButton = x}>
-//             { this.props.title  }
-//             { this.props.iconSpan || <span className="caret"></span>}
-//         </button>
-//     }
-
-//     @autobind
-//     menuButtonClick() {
-//         if (this.state.isExpanded) {
-//             hideMenu();
-//             return;
-//         }
-//         let offset = $(this.domButton).offset();
-//         let height = $(this.domButton).height();
-//         this.setState({ isExpanded: true })
-//         showMenu(offset.left, offset.top + height + 5, this, () => this.setState({ isExpanded: false }));
-//     }
-// }
-
 export function ContextMenu({ left, top, children }) {
   const hideMenu = useHideMenu();
   useDocumentClick(async () => {
@@ -185,106 +78,6 @@ export function ContextMenu({ left, top, children }) {
   );
 }
 
-// export class ContextMenu extends React.Component<IContextMenuProps> {
-//     domObject: Element;
-//     submenu: DropDownSubmenuItem;
-
-//     render() {
-//         return <ul className='context_menu' style={{ left: `${this.props.left}px`, top: `${this.props.top}px` }} ref={x => this.domObject = x} onContextMenu={e => e.preventDefault()}>
-//             {this.props.children}
-//         </ul>;
-//     }
-
-//     componentDidMount() {
-//         fixPopupPlacement(this.domObject);
-//     }
-
-//     getChildContext() {
-//         return { parentMenu: this };
-//     }
-
-//     closeSubmenu() {
-//         if (this.submenu) {
-//             this.submenu.closeSubmenu();
-//         }
-//     }
-
-//     close() {
-//         this.props.container.remove();
-//         this.closeSubmenu();
-//     }
-// }
-
-// (ContextMenu as any).childContextTypes = {
-//     parentMenu: PropTypes.any
-// };
-
-// let menuHandle = null;
-// let hideToken = null;
-
-// function showMenuCore(left, top, contentHolder, closeCallback = null) {
-//   let container = document.createElement('div');
-//   let handle = {
-//     container,
-//     closeCallback,
-//     close() {
-//       this.container.remove();
-//     },
-//   };
-//   document.body.appendChild(container);
-//   ReactDOM.render(
-//     <ContextMenu left={left} top={top}>
-//       {contentHolder}
-//     </ContextMenu>,
-//     container
-//   );
-//   return handle;
-// }
-
-// export function showMenu(left, top, contentHolder, closeCallback = null) {
-//   hideMenu();
-//   if (hideToken) hideToken.cancel();
-//   menuHandle = showMenuCore(left, top, contentHolder, closeCallback);
-//   captureMouseDownEvents();
-// }
-
-// function captureMouseDownEvents() {
-//   document.addEventListener('mousedown', mouseDownListener, true);
-// }
-
-// function releaseMouseDownEvents() {
-//   document.removeEventListener('mousedown', mouseDownListener, true);
-// }
-
-// function captureMouseUpEvents() {
-//   document.addEventListener('mouseup', mouseUpListener, true);
-// }
-
-// function releaseMouseUpEvents() {
-//   document.removeEventListener('mouseup', mouseUpListener, true);
-// }
-
-// async function mouseDownListener(e) {
-//   captureMouseUpEvents();
-// }
-
-// async function mouseUpListener(e) {
-//   let token = new LoadingToken();
-//   hideToken = token;
-//   await sleep(0);
-//   if (token.isCanceled) return;
-//   hideMenu();
-// }
-
-// function hideMenu() {
-//   if (menuHandle == null) return;
-//   menuHandle.close();
-//   if (menuHandle.closeCallback) menuHandle.closeCallback();
-//   menuHandle = null;
-//   releaseMouseDownEvents();
-//   releaseMouseUpEvents();
-// }
-
 function getElementOffset(element) {
   var de = document.documentElement;
   var box = element.getBoundingClientRect();
@@ -293,7 +86,7 @@ function getElementOffset(element) {
   return { top: top, left: left };
 }
 
-export function fixPopupPlacement(element) {
+function fixPopupPlacement(element) {
   const { width, height } = element.getBoundingClientRect();
   let offset = getElementOffset(element);