diff --git a/packages/web/src/modals/DropDownMenu.js b/packages/web/src/modals/DropDownMenu.js index eeda84cdf..74ea12f1e 100644 --- a/packages/web/src/modals/DropDownMenu.js +++ b/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 { -// render() { -// return
  • {this.props.children}{this.props.keyText && {this.props.keyText}}
  • ; -// } - -// handleMouseEnter() { -// if (this.context.parentMenu) this.context.parentMenu.closeSubmenu(); -// } -// } - -// (DropDownMenuLink as any).contextTypes = { -// parentMenu: PropTypes.any -// }; - -// // export function DropDownMenu(props: { children?: any }) { -// // return
    -// // -// // -// //
    -// // } - -// export function DropDownMenuDivider(props: {}) { -// return
  • ; -// } - -// export class DropDownSubmenuItem extends React.Component { -// menuInstance: ContextMenu; -// domObject: Element; - -// render() { -// return
  • this.domObject = x}> null}>{this.props.title}
  • ; -// } - -// 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 { -// 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 -// } - -// @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 { -// domObject: Element; -// submenu: DropDownSubmenuItem; - -// render() { -// return
      this.domObject = x} onContextMenu={e => e.preventDefault()}> -// {this.props.children} -//
    ; -// } - -// 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( -// -// {contentHolder} -// , -// 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);