@zohodesk/popups
v1.0.11
Published
popups popupover modal dialog alert notifications popup handling for whole app
Downloads
414
Readme
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>
}
}