@zohodesk/popups

1.0.8.1

• Popup position fixed Case added.

1.0.8

• popup viewPort possibilities position method changed(left & right position properly to handled).

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>
	}
}