import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { SoftPopover } from './SoftPopover';
import { SoftPortal } from '../Portal';
/**
 * Injects the SoftPopover next to the button via SoftPortal
 * then the button element is moved into the popover dom.
 * On unmount, the button is moved back to its original location.
 */
export class SoftWrappingPopover extends Component {
    constructor(...args) {
        // @ts-ignore
        super(...args);
        this.setPortalRef = node => {
            this.portal = node;
        };
        this.setAnchorRef = node => {
            this.anchor = node;
        };
        this.portal = null;
        this.anchor = null;
    }
    componentDidMount() {
        // @ts-ignore
        this.anchor.insertAdjacentElement('beforebegin', this.props.button);
    }
    componentWillUnmount() {
        if (this.props.button.parentNode) {
            // @ts-ignore
            this.portal.insertAdjacentElement('beforebegin', this.props.button);
        }
    }
    render() {
        const { button, // eslint-disable-line no-unused-vars
        ...rest } = this.props;
        return (React.createElement(SoftPortal, { portalRef: this.setPortalRef, insert: { sibling: this.props.button, position: 'after' } },
            React.createElement(SoftPopover, Object.assign({}, rest, { button: React.createElement("div", { ref: this.setAnchorRef, className: "softWrappingPopover__anchor" }) }))));
    }
}
SoftWrappingPopover.propTypes = {
    button: PropTypes.instanceOf(HTMLElement),
};
//# sourceMappingURL=SoftWrappingPopover.js.map