[Added] Modal Close on right click at overlay

Author: ZainGulbaz

README.md

@@ -93,6 +93,7 @@ function App() {
         isOpen={modalIsOpen}
         onAfterOpen={afterOpenModal}
         onRequestClose={closeModal}
+        onOverlayRightClick={closeModal}
         style={customStyles}
         contentLabel="Example Modal"
       >

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

examples/bootstrap/app.js

@@ -39,6 +39,7 @@ class App extends Component {
           closeTimeoutMS={150}
           isOpen={this.state.modalIsOpen}
           onRequestClose={this.handleModalCloseRequest}
+          onOverlayRightClick={this.handleModalCloseRequest}
         >
           <div className="modal-content">
             <div className="modal-header">

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,

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,15 @@ export default class ModalPortal extends Component {
     this.shouldClose = null;
   };
 
+  handleOverlayRightClick = (event) => {
+    if (this.shouldClose === null) this.shouldClose = true;
+    else if (!this.shouldClose) this.shouldClose = null;
+    if (this.shouldClose) {
+      event.preventDefault();
+      this.props.onOverlayRightClick(event);
+    }
+  };
+
   handleContentOnMouseUp = () => {
     this.shouldClose = false;
   };
@@ -375,7 +385,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 = {