From 8f8cc989821504095d649ec70c5091d7cffdc516 Mon Sep 17 00:00:00 2001 From: Ramon Caldeira Date: Wed, 22 Apr 2020 12:29:58 -0300 Subject: [PATCH] =?UTF-8?q?feat(Modal):=20Allow=20passing=20in=20an=20elem?= =?UTF-8?q?ent=20selector=20to=20append=20mod=E2=80=A6=20(#1817)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(Modal): Allow passing in an element selector to append modal to * feat(Modal): Rename property to * Update Modal.js Make modal fallback to body if the specified container is not found Co-authored-by: Evan Sharp --- docs/lib/Components/ModalsPage.js | 4 +++- src/Modal.js | 11 +++++++---- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/docs/lib/Components/ModalsPage.js b/docs/lib/Components/ModalsPage.js index fab4bdf68..350697b34 100644 --- a/docs/lib/Components/ModalsPage.js +++ b/docs/lib/Components/ModalsPage.js @@ -106,7 +106,9 @@ const ModalsPage = () => { // if modal should be destructed/removed from DOM after closing unmountOnClose: PropTypes.bool, // defaults to true // if the element which triggered the modal to open should focused after the modal closes (see example somewhere below) - returnFocusAfterClose: PropTypes.bool // defaults to true + returnFocusAfterClose: PropTypes.bool, // defaults to true + // container to append the modal to + container: PropTypes.string // css selector, defauls to "body" }`} diff --git a/src/Modal.js b/src/Modal.js index ccd19f9b8..2fa174074 100644 --- a/src/Modal.js +++ b/src/Modal.js @@ -57,7 +57,8 @@ const propTypes = { PropTypes.func, ]), unmountOnClose: PropTypes.bool, - returnFocusAfterClose: PropTypes.bool + returnFocusAfterClose: PropTypes.bool, + container: PropTypes.string }; const propsToOmit = Object.keys(propTypes); @@ -82,7 +83,8 @@ const defaultProps = { timeout: TransitionTimeouts.Fade, // uses standard fade transition }, unmountOnClose: true, - returnFocusAfterClose: true + returnFocusAfterClose: true, + container: 'body' }; class Modal extends React.Component { @@ -290,7 +292,8 @@ class Modal extends React.Component { this._element.setAttribute('tabindex', '-1'); this._element.style.position = 'relative'; this._element.style.zIndex = this.props.zIndex; - document.body.appendChild(this._element); + this._mountContainer = document.querySelector(this.props.container) || document.querySelector('body'); + this._mountContainer.appendChild(this._element); } this._originalBodyPadding = getOriginalBodyPadding(); @@ -308,7 +311,7 @@ class Modal extends React.Component { destroy() { if (this._element) { - document.body.removeChild(this._element); + this._mountContainer.removeChild(this._element); this._element = null; }