@zohodesk/popups

popups popupover modal dialog alert notifications popup handling for whole app

Usage no npm install needed!

<script type="module">
  import zohodeskPopups from 'https://cdn.skypack.dev/@zohodesk/popups';
</script>

README

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