Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, {Component} from 'react';
- class BaseModal extends Component {
- constructor(props) {
- super(props);
- this.setWrapperRef = this.setWrapperRef.bind(this);
- this.handleClickOutside = this.handleClickOutside.bind(this);
- }
- componentDidMount() {
- document.addEventListener('mousedown', this.handleClickOutside);
- }
- componentWillUnmount() {
- document.removeEventListener('mousedown', this.handleClickOutside);
- }
- setWrapperRef(node) {
- this.wrapperRef = node;
- }
- handleClickOutside(event) {
- if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
- this.setState({isOpened: false});
- }
- }
- }
- class Popup extends BaseModal {
- constructor(props) {
- super(props);
- this.state = {
- isOpened: false
- };
- this._toggleButton = this._toggleButton.bind(this)
- }
- _toggleButton() {
- this.setState({isOpened: !this.state.isOpened});
- }
- render() {
- const isOpened = this.state.isOpened ? '' : 'hide';
- return (
- <div ref={this.setWrapperRef}>
- <button onClick={this._toggleButton}>Toggle modal</button>
- <div className={'modal modal-extended ' + isOpened}>
- <h2>Opened class based (extended) modal</h2>
- </div>
- </div>
- );
- }
- }
- export default Popup;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement