@fluentui/react-northstar
Version:
A themable React component library.
59 lines (58 loc) • 2.2 kB
JavaScript
import _invoke from "lodash/invoke";
import { useFluentContext, useIsomorphicLayoutEffect } from '@fluentui/react-bindings';
import * as customPropTypes from '@fluentui/react-proptypes';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore "react-portal-compat-context" uses v9 configs via path aliases
import { usePortalCompat } from '@fluentui/react-portal-compat-context';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { isBrowser, commonPropTypes } from '../../utils';
import { PortalContext } from '../Provider/portalContext';
import { usePortalBox } from './usePortalBox';
/**
* A PortalInner is a container for Portal's content.
*/
export var PortalInner = /*#__PURE__*/function () {
var PortalInner = function PortalInner(props) {
var children = props.children,
mountNode = props.mountNode;
var _React$useContext = React.useContext(PortalContext),
className = _React$useContext.className;
var _useFluentContext = useFluentContext(),
target = _useFluentContext.target,
rtl = _useFluentContext.rtl;
var registerPortalEl = usePortalCompat();
var box = usePortalBox({
className: className,
target: target,
rtl: rtl
});
// PortalInner should render elements even without a context
// eslint-disable-next-line
var container = isBrowser() ? mountNode || box || document.body : null;
useIsomorphicLayoutEffect(function () {
return registerPortalEl(box);
}, [box, registerPortalEl]);
useIsomorphicLayoutEffect(function () {
_invoke(props, 'onMount', props);
return function () {
return _invoke(props, 'onUnmount', props);
};
}, []);
return container && /*#__PURE__*/ReactDOM.createPortal(children, container);
};
PortalInner.propTypes = Object.assign({}, commonPropTypes.createCommon({
accessibility: false,
as: false,
className: false,
content: false,
styled: false
}), {
mountNode: customPropTypes.domNode,
onMount: PropTypes.func,
onUnmount: PropTypes.func
});
return PortalInner;
}();
//# sourceMappingURL=PortalInner.js.map