diff --git a/src/common/PopupMenu/PopupMenu.js b/src/common/PopupMenu/PopupMenu.js new file mode 100644 index 000000000..f7530cfab --- /dev/null +++ b/src/common/PopupMenu/PopupMenu.js @@ -0,0 +1,102 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import Icon from 'stremio-icons/dom'; +import colors from 'stremio-colors'; +import styles from './styles'; + +class PopupMenu extends Component { + constructor(props) { + super(props); + + this._rootRef = React.createRef(); + + this.state = { + isOpen: false + }; + } + + shouldComponentUpdate(nextProps, nextState) { + return nextState.isOpen !== this.state.isOpen; + } + + componentDidMount() { + window.addEventListener('blur', this._close); + window.addEventListener('resize', this._close); + } + + componentWillUnmount() { + window.removeEventListener('blur', this._close); + window.removeEventListener('resize', this._close); + } + + _open = (event) => { + event.stopPropagation(); + this.setState({ isOpen: true }); + } + + _close = (event) => { + event.stopPropagation(); + this.setState({ isOpen: false }); + } + + renderMenu() { + if (this.state.isOpen && this._rootRef.current) { + const rootRect = this._rootRef.current.getBoundingClientRect(); + const menuStyles = { + position: 'absolute', + backgroundColor: 'blue', + left: rootRect.x + }; + + if (rootRect.y + rootRect.height + this.props.menuHeight <= window.innerHeight) { + menuStyles.top = rootRect.y + rootRect.height; + menuStyles.height = this.props.menuHeight; + } else if (this.props.menuHeight < rootRect.y) { + menuStyles.bottom = window.innerHeight - rootRect.y; + menuStyles.height = this.props.menuHeight; + } else { + menuStyles.bottom = 0; + menuStyles.top = 0; + } + + if (typeof this.props.menuWidth === 'number') { + menuStyles.width = this.props.menuWidth; + } else { + menuStyles.width = rootRect.width; + } + + return ( +