@fluentui/react/lib/components/Layer/LayerHost.js

Reusable React components for building web experiences.

import { __assign } from "tslib";
import * as React from 'react';
import { useUnmount } from '@fluentui/react-hooks';
import { css, getId } from '../../Utilities';
import { notifyHostChanged, registerLayerHost, unregisterLayerHost } from './Layer.notification';
export var LayerHost = function (props) {
    var className = props.className;
    var layerHostId = React.useState(function () { return getId(); })[0];
    var _a = props.id, hostId = _a === void 0 ? layerHostId : _a;
    var layerHostRef = React.useRef({
        hostId: hostId,
        rootRef: React.useRef(null),
        notifyLayersChanged: function () {
            // Nothing, since the default implementation of Layer Host does not need to react to layer changes.
        },
    });
    React.useImperativeHandle(props.componentRef, function () { return layerHostRef.current; });
    React.useEffect(function () {
        registerLayerHost(hostId, layerHostRef.current);
        notifyHostChanged(hostId);
        // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run on first render
    }, []);
    useUnmount(function () {
        unregisterLayerHost(hostId, layerHostRef.current);
        notifyHostChanged(hostId);
    });
    return React.createElement("div", __assign({}, props, { className: css('ms-LayerHost', className), ref: layerHostRef.current.rootRef }));
};
//# sourceMappingURL=LayerHost.js.map