fix: action panel to render as a body direct child

Adslot · Jul 15, 2019 · c4abbdc · c4abbdc
1 parent 28d5156
commit c4abbdc
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/src/components/adslot-ui/ActionPanel/index.jsx b/src/components/adslot-ui/ActionPanel/index.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import ReactDOM from 'react-dom';
 import Button from 'react-bootstrap/lib/Button';
 import './styles.scss';
 
@@ -15,7 +16,8 @@ class ActionPanel extends React.PureComponent {
 
   render() {
     const { title, className, size, onClose, children, actionButton, isModal, closeIcon } = this.props;
-    return (
+
+    const actionPanel = (
       <React.Fragment>
         <div className={isModal ? 'aui--action-panel-backdrop' : 'hide'} />
         <div className={classNames('aui--action-panel-wrapper', { 'aui--action-panel-modal-wrapper': isModal })}>
@@ -38,6 +40,8 @@ class ActionPanel extends React.PureComponent {
         </div>
       </React.Fragment>
     );
+
+    return isModal ? ReactDOM.createPortal(actionPanel, document.body) : actionPanel;
   }
 }
 

diff --git a/src/components/adslot-ui/ActionPanel/styles.scss b/src/components/adslot-ui/ActionPanel/styles.scss
@@ -13,6 +13,7 @@
   z-index: $zindex-popover;
   border: $border-lighter;
   border-radius: 2px;
+  background-color: $color-white;
 
   &.action-modal {
     top: 30px;