JSFiddle - React, Tailwind, and code Playground

by dj19910501

HTML

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

class Hello extends React.Component {
  render() {
  	const button = <button tyle='button'>Testing</button>;
    const popoverElement = (
		<ul>
			<li>option 1</li>
			<li>option 2</li>
			<li>option 3</li>
			<li>option 4</li>
			<li>option 5</li>
		</ul>
    );
    
    return (
    	<div id='test' style={{
      	position: 'relative',
      	width: 400,
        height: 400,
        margin: '50px',
        border: 'solid 1px black'
      }}>
			<Hive9Popover referenceId='test' sourceElement={button} popoverElement={popoverElement}
				placement='right'
				containerStyle={{
					left: 130,
					top: 270,
					display: 'inline-block'
				}}/>
    	</div>
    );
  }
}


class Hive9Popover extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			show: false,
			top: 0,
			left: 0,
			bottom: 'unset',
			right: 'unset'
		}
	};
  
	componentDidMount = () => {
		document.addEventListener('click', e => {
			if(e.path && this.refs.container && this.refs.container.contains(e.path[0])){
				// do nothing
			} else {
				this.hidePopover();
			}
		});
	}
  
	componentDidUpdate = (prevProps, prevState) => {
		!prevState.show && this.state.show && this.updatePosition();
	}
	
	render () {
		const { show, top, left, bottom, right } = this.state;
		const { containerStyle, sourceElement, popoverElement} = this.props;
		
		return (
			<div ref='container' style={{ position: 'relative', ...containerStyle }}>
				<div ref='sourceElementContainer' onClick={this.togglePopover}>
					{sourceElement}
				</div>
				{
					show ? (
						<div ref='targetElementContainer' style={{
							position: 'absolute',
							zIndex: 2,
							border: 'solid 1px #d4d4d4',
							borderRadius: '4px',
							width: 200,
							top: top,
							left: left,
							bottom: bottom,
							right: right
						}}>
							{popoverElement}
						</div>
					) : null
				}
			</div>
		);
	}
  
  	showPopover = () => this.setState({ show: true })
	
	hidePopover = () =>...