quantumai-design-system
Version:
퀀텀에이아이의 디자인 시스템
29 lines (28 loc) • 1.22 kB
JavaScript
import { useLayoutEffect, useState } from 'react';
import { createPortal } from 'react-dom';
import { useScrollLock } from '../../../hooks/useScrollLock';
export function createContainer(id) {
if (document.getElementById(id))
return document.getElementById(id);
else {
var newElement = document.createElement('div');
newElement.setAttribute('id', id);
document.body.appendChild(newElement);
return newElement;
}
}
var Portal = function (_a) {
var children = _a.children, _b = _a.isScrollAuto, isScrollAuto = _b === void 0 ? false : _b, _c = _a.id, id = _c === void 0 ? 'portal' : _c;
var _d = useState(null), containerElement = _d[0], setContainerElement = _d[1];
useScrollLock(!isScrollAuto, createContainer(id).childElementCount);
useLayoutEffect(function () {
setContainerElement(createContainer(id));
return function () {
var _a;
if (!(createContainer(id).childElementCount - 1))
(_a = createContainer(id)) === null || _a === void 0 ? void 0 : _a.remove();
};
}, [id]);
return containerElement ? createPortal(children, containerElement) : null;
};
export default Portal;