1234567891011121314151617181920212223242526272829303132333435363738394041424344 |
- import { useRef, useEffect, forwardRef, useImperativeHandle } from 'react';
- import ReactDOM from 'react-dom';
- import canUseDom from "./Dom/canUseDom";
- var Portal = /*#__PURE__*/forwardRef(function (props, ref) {
- var didUpdate = props.didUpdate,
- getContainer = props.getContainer,
- children = props.children;
- var parentRef = useRef();
- var containerRef = useRef();
- // Ref return nothing, only for wrapper check exist
- useImperativeHandle(ref, function () {
- return {};
- });
- // Create container in client side with sync to avoid useEffect not get ref
- var initRef = useRef(false);
- if (!initRef.current && canUseDom()) {
- containerRef.current = getContainer();
- parentRef.current = containerRef.current.parentNode;
- initRef.current = true;
- }
- // [Legacy] Used by `rc-trigger`
- useEffect(function () {
- didUpdate === null || didUpdate === void 0 || didUpdate(props);
- });
- useEffect(function () {
- // Restore container to original place
- // React 18 StrictMode will unmount first and mount back for effect test:
- // https://reactjs.org/blog/2022/03/29/react-v18.html#new-strict-mode-behaviors
- if (containerRef.current.parentNode === null && parentRef.current !== null) {
- parentRef.current.appendChild(containerRef.current);
- }
- return function () {
- var _containerRef$current;
- // [Legacy] This should not be handle by Portal but parent PortalWrapper instead.
- // Since some component use `Portal` directly, we have to keep the logic here.
- (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 || (_containerRef$current = _containerRef$current.parentNode) === null || _containerRef$current === void 0 || _containerRef$current.removeChild(containerRef.current);
- };
- }, []);
- return containerRef.current ? /*#__PURE__*/ReactDOM.createPortal(children, containerRef.current) : null;
- });
- export default Portal;
|