1.0.12

• recalculatePopupPositions method added.

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