diff --git a/README.md b/README.md index 16e59399..7d85f29a 100644 --- a/README.md +++ b/README.md @@ -93,6 +93,7 @@ function App() { isOpen={modalIsOpen} onAfterOpen={afterOpenModal} onRequestClose={closeModal} + onOverlayRightClick={closeModal} style={customStyles} contentLabel="Example Modal" > diff --git a/docs/index.md b/docs/index.md index 4e8a296e..7b40e2e3 100644 --- a/docs/index.md +++ b/docs/index.md @@ -52,6 +52,12 @@ import ReactModal from 'react-modal'; /* Function that will be run when the modal is requested to be closed (either by clicking on overlay or pressing ESC). Note: It is not called if isOpen is changed by other means. */} + + onOverlayRightClick={ + handleRequestCloseFunc + /* Function that will be run when the modal is requested + to be closed (either by right clicking on overlay or pressing ESC). + Note: It is not called if isOpen is changed by other means. */} closeTimeoutMS={ 0 diff --git a/examples/basic/app.js b/examples/basic/app.js index 6854916d..ba3076f3 100644 --- a/examples/basic/app.js +++ b/examples/basic/app.js @@ -16,7 +16,8 @@ const examples = [ Forms, MultipleModals, NestedModals, - ReactRouter + ReactRouter, + ModalClose ]; class App extends Component { diff --git a/examples/basic/modal_close_right_click/index.js b/examples/basic/modal_close_right_click/index.js new file mode 100644 index 00000000..a580b12c --- /dev/null +++ b/examples/basic/modal_close_right_click/index.js @@ -0,0 +1,50 @@ +import React, { Component } from "react"; +import Modal from "react-modal"; + +class ModalClose extends Component { + constructor(props) { + super(props); + this.state = { + isOpen: false, + }; + } + + toggleModal = (event) => { + this.setState({ isOpen: !this.state.isOpen }); + }; + handleRightClick = (event) => { + this.setState({ isOpen: false }); + }; + + render() { + return ( +
+ + +

Click Right on the Overlay to close the modal

+ +
+
+ ); + } +} + +export default { + label: "Modal close on right click", + app: ModalClose, +}; diff --git a/examples/bootstrap/app.js b/examples/bootstrap/app.js index e9ba71c0..c59bb819 100644 --- a/examples/bootstrap/app.js +++ b/examples/bootstrap/app.js @@ -39,6 +39,7 @@ class App extends Component { closeTimeoutMS={150} isOpen={this.state.modalIsOpen} onRequestClose={this.handleModalCloseRequest} + onOverlayRightClick={this.handleModalCloseRequest} >
diff --git a/src/components/Modal.js b/src/components/Modal.js index c064b213..55ad35b3 100644 --- a/src/components/Modal.js +++ b/src/components/Modal.js @@ -66,6 +66,7 @@ class Modal extends Component { ]), onAfterOpen: PropTypes.func, onRequestClose: PropTypes.func, + onOverlayRightClick: PropTypes.func, closeTimeoutMS: PropTypes.number, ariaHideApp: PropTypes.bool, shouldFocusAfterRender: PropTypes.bool, @@ -100,7 +101,8 @@ class Modal extends Component { preventScroll: false, parentSelector: () => document.body, overlayElement: (props, contentEl) =>
{contentEl}
, - contentElement: (props, children) =>
{children}
+ contentElement: (props, children) =>
{children}
, + onOverlayRightClick: ()=>null }; static defaultStyles = { diff --git a/src/components/ModalPortal.js b/src/components/ModalPortal.js index 35e9837e..063b5e21 100644 --- a/src/components/ModalPortal.js +++ b/src/components/ModalPortal.js @@ -55,6 +55,7 @@ export default class ModalPortal extends Component { onAfterOpen: PropTypes.func, onAfterClose: PropTypes.func, onRequestClose: PropTypes.func, + onOverlayRightClick: PropTypes.func, closeTimeoutMS: PropTypes.number, shouldFocusAfterRender: PropTypes.bool, shouldCloseOnOverlayClick: PropTypes.bool, @@ -299,6 +300,14 @@ export default class ModalPortal extends Component { this.shouldClose = null; }; + handleOverlayRightClick = event => { + if(event.target == this.overlay) + { + event.preventDefault(); + this.props.onOverlayRightClick(event); + } + }; + handleContentOnMouseUp = () => { this.shouldClose = false; }; @@ -375,7 +384,8 @@ export default class ModalPortal extends Component { className: this.buildClassName("overlay", overlayClassName), style: { ...overlayStyles, ...this.props.style.overlay }, onClick: this.handleOverlayOnClick, - onMouseDown: this.handleOverlayOnMouseDown + onMouseDown: this.handleOverlayOnMouseDown, + onContextMenu: this.handleOverlayRightClick, }; const contentProps = {