import * as React from 'react';
import { Panel } from './Panel';
/**
 * Used to add items to the panel from other components' render methods.
 *
 * For example:
 *
 * class MyComponent extends React.Component {
 *     public render(): React.ReactNode {
 *         return (
 *             <div>
 *                 <PanelItemPortal position="right" element={
 *                     <MyItem key="my-item" foo="bar" />
 *                 } />
 *                 <h1>My component!</h1>
 *             </div>
 *         )
 *     }
 * }
 *
 * The MyItem component will be rendered in the panel (Panel), not inside MyComponent.
 */
export class PanelItemPortal extends React.PureComponent {
    componentDidMount() {
        this.subscription = Panel.addItem(this.props);
    }
    componentWillReceiveProps(props) {
        if (this.props.element !== props.element || this.props.priority !== props.priority) {
            if (this.subscription) {
                this.subscription.unsubscribe();
            }
            this.subscription = Panel.addItem(props);
        }
    }
    componentWillUnmount() {
        if (this.subscription) {
            this.subscription.unsubscribe();
            this.subscription = undefined;
        }
    }
    forceUpdate(callBack) {
        super.forceUpdate(callBack);
        Panel.forceUpdate();
    }
    render() {
        return null; // the element is rendered in Panel, not here
    }
}
//# sourceMappingURL=PanelItemPortal.js.map