Rename BodyPortal to Portal and accept prop "root" which is where the portal should be placed

This commit is contained in:
Johannes Schill
2018-12-05 10:50:26 +01:00
parent 1bbe48e9c5
commit 7d6db12f34
2 changed files with 13 additions and 6 deletions

View File

@@ -3,18 +3,25 @@ import ReactDOM from 'react-dom';
interface Props {
className?: string;
root?: HTMLElement;
}
export default class BodyPortal extends PureComponent<Props> {
node: HTMLElement = document.createElement('div');
portalRoot = document.body;
portalRoot: HTMLElement;
constructor(props) {
super(props);
const { className } = this.props;
const {
className,
root = document.body
} = this.props;
if (className) {
this.node.classList.add();
this.node.classList.add(className);
}
this.portalRoot = root;
this.portalRoot.appendChild(this.node);
}

View File

@@ -1,5 +1,5 @@
import React, { PureComponent } from 'react';
import BodyPortal from 'app/core/components/Portal/BodyPortal';
import Portal from 'app/core/components/Portal/Portal';
import { Manager, Popper as ReactPopper, Reference } from 'react-popper';
import Transition from 'react-transition-group/Transition';
@@ -39,7 +39,7 @@ class Popper extends PureComponent<Props> {
</Reference>
<Transition in={show} timeout={100} mountOnEnter={true} unmountOnExit={true}>
{transitionState => (
<BodyPortal className="hej">
<Portal>
<ReactPopper placement={placement}>
{({ ref, style, placement, arrowProps }) => {
return (
@@ -61,7 +61,7 @@ class Popper extends PureComponent<Props> {
);
}}
</ReactPopper>
</BodyPortal>
</Portal>
)}
</Transition>
</Manager>