focalboard/webapp/src/components/rootPortal.tsx

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'

type Props = {
    children: React.ReactNode
}

export default class RootPortal extends React.PureComponent<Props> {
    el: HTMLDivElement

    static propTypes = {
        children: PropTypes.node,
    }

    constructor(props: Props) {
        super(props)
        this.el = document.createElement('div')
    }

    componentDidMount() {
        const rootPortal = document.getElementById('root-portal')
        if (rootPortal) {
            rootPortal.appendChild(this.el)
        }
    }

    componentWillUnmount() {
        const rootPortal = document.getElementById('root-portal')
        if (rootPortal) {
            rootPortal.removeChild(this.el)
        }
    }

    render() {
        return ReactDOM.createPortal(
            this.props.children,
            this.el,
        )
    }
}