fk-react-ui-components/lib/Popover/Portal.js

Step 1 : Create a file in [ Seeds / Plants / Trees ] <br> Step 2 : It should export an Object with component name and story Component [Refer other components] <br> Step 3 : Story Component should return a react component <br> Step 3 : Created file should

import React from 'react';
import ReactDOM from 'react-dom';
import { PropTypes } from 'prop-types';

export default class Portal extends React.PureComponent {
    constructor(...args) {
        var _temp;

        return _temp = super(...args), this.getLayer = () => {
            if (!this.layer) {
                this.layer = document.createElement('div');
                if (document.body && this.layer) {
                    document.body.appendChild(this.layer);
                }
            }
            return this.layer;
        }, this.unrenderLayer = () => {
            if (this.layer) {
                document.body.removeChild(this.layer);
                this.layer = null;
            }
        }, _temp;
    }

    componentDidMount() {
        this.renderLayer();
    }

    componentDidUpdate() {
        this.renderLayer();
    }

    componentWillUnmount() {
        this.unrenderLayer();
    }

    /**
     * Returns the layer in which children will be rendered
     */


    /**
     * Removes the previously rendered layer
     */


    /**
     * Renders the children inside the layer
     */
    renderLayer() {
        const { children, open } = this.props;

        if (open) {
            const layerElement = React.Children.only(children);
            ReactDOM.unstable_renderSubtreeIntoContainer(this, layerElement, this.getLayer());
        } else {
            this.unrenderLayer();
        }
    }

    render() {
        return null;
    }
}

Portal.propTypes = {
    children: PropTypes.element.isRequired,
    /**
     * Renders the children at body level
     */
    open: PropTypes.bool
};

Portal.defaultProps = {
    open: false
};
//# sourceMappingURL=Portal.js.map