@zohodesk/popups

Components

How to use

Create => TestPopup.js

import testStyle from 'TestPopup.css';
import Popup from 'Popup';

class TestPopup extends React.Component {
	
	constructor(props)
	{
		super(props);
		this.setTargetRef=this.setTargetRef.bind(this); //targetRef
		this.setTargetRef=this.setContentRef.bind(this); //contentRef
	}
	
	setTargetRef(el){
		this.targetRef=el;
	}
	
	setContentRef(el){
		this.contentRef=el;
	}

	onClickTogglePopup(e){
		//this.props.togglePopup from `Popup HOC`
		this.props.togglePopup(e,this.refs.contentRef,this.targetRef); // Toggle the popup by single function.
	}
	
	onClickYes(e){
		this.updateToServer(); // Something your works...
		this.onClickTogglePopup(e); // Already opened popup, will be close
	}
	
	onClickNo(e){
		// Something your works...
		this.onClickTogglePopup(e); // Already opened popup, will be close
	}
	
	render(){
		
		let { popupStyle, removeClose } = this.props;
		
		return (<div className={testStyle.container}>
		
	        <div ref={this.setTargetRef} className={testStyle.moreBox}>
			  	 <Button onClick={this.onClickTogglePopup} text={"more"} />
	        </div>
			
	        <div ref={this.setContentRef} className={`${testStyle.content} ${popupStyle.content}`} onClick={removeClose}>
        		
	        	<span className={popupStyle.arrow}></span>
		      	
        		<div className={testStyle.closeTicketContent}>
		      		<Button text={"yes"} onClick={this.onClickYes} type="primary"/>
		      		<Button text={"no"}  onClick={this.onClickNo} type="neutral"/>
		        </div>
		      		
			</div>
			
		</div>)
		
	}
}

// Default binded props  { isPopupOpen, isPopupReady , position, styles, popupStyle, popupStyles, removeClose, togglePopup }
// removeClose - helps you prevent the click from popup vs document click.
// Popup(TestPopup, groupName, customStyles);

export default Popup(TestPopup);


use => TestPopup.js
class extend React.compoent{

	render(){
		<div>
			<TestPopup />
		</div>
	}
}