123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113 |
- "use strict";
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- exports.default = void 0;
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
- var React = _interopRequireWildcard(require("react"));
- var _reactDom = require("react-dom");
- var _canUseDom = _interopRequireDefault(require("rc-util/lib/Dom/canUseDom"));
- var _warning = _interopRequireDefault(require("rc-util/lib/warning"));
- var _ref2 = require("rc-util/lib/ref");
- var _Context = _interopRequireDefault(require("./Context"));
- var _useDom3 = _interopRequireDefault(require("./useDom"));
- var _useScrollLocker = _interopRequireDefault(require("./useScrollLocker"));
- var _mock = require("./mock");
- var getPortalContainer = function getPortalContainer(getContainer) {
- if (getContainer === false) {
- return false;
- }
- if (!(0, _canUseDom.default)() || !getContainer) {
- return null;
- }
- if (typeof getContainer === 'string') {
- return document.querySelector(getContainer);
- }
- if (typeof getContainer === 'function') {
- return getContainer();
- }
- return getContainer;
- };
- var Portal = /*#__PURE__*/React.forwardRef(function (props, ref) {
- var open = props.open,
- autoLock = props.autoLock,
- getContainer = props.getContainer,
- debug = props.debug,
- _props$autoDestroy = props.autoDestroy,
- autoDestroy = _props$autoDestroy === void 0 ? true : _props$autoDestroy,
- children = props.children;
- var _React$useState = React.useState(open),
- _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
- shouldRender = _React$useState2[0],
- setShouldRender = _React$useState2[1];
- var mergedRender = shouldRender || open;
- // ========================= Warning =========================
- if (process.env.NODE_ENV !== 'production') {
- (0, _warning.default)((0, _canUseDom.default)() || !open, "Portal only work in client side. Please call 'useEffect' to show Portal instead default render in SSR.");
- }
- // ====================== Should Render ======================
- React.useEffect(function () {
- if (autoDestroy || open) {
- setShouldRender(open);
- }
- }, [open, autoDestroy]);
- // ======================== Container ========================
- var _React$useState3 = React.useState(function () {
- return getPortalContainer(getContainer);
- }),
- _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
- innerContainer = _React$useState4[0],
- setInnerContainer = _React$useState4[1];
- React.useEffect(function () {
- var customizeContainer = getPortalContainer(getContainer);
- // Tell component that we check this in effect which is safe to be `null`
- setInnerContainer(customizeContainer !== null && customizeContainer !== void 0 ? customizeContainer : null);
- });
- var _useDom = (0, _useDom3.default)(mergedRender && !innerContainer, debug),
- _useDom2 = (0, _slicedToArray2.default)(_useDom, 2),
- defaultContainer = _useDom2[0],
- queueCreate = _useDom2[1];
- var mergedContainer = innerContainer !== null && innerContainer !== void 0 ? innerContainer : defaultContainer;
- // ========================= Locker ==========================
- (0, _useScrollLocker.default)(autoLock && open && (0, _canUseDom.default)() && (mergedContainer === defaultContainer || mergedContainer === document.body));
- // =========================== Ref ===========================
- var childRef = null;
- if (children && (0, _ref2.supportRef)(children) && ref) {
- var _ref = children;
- childRef = _ref.ref;
- }
- var mergedRef = (0, _ref2.useComposeRef)(childRef, ref);
- // ========================= Render ==========================
- // Do not render when nothing need render
- // When innerContainer is `undefined`, it may not ready since user use ref in the same render
- if (!mergedRender || !(0, _canUseDom.default)() || innerContainer === undefined) {
- return null;
- }
- // Render inline
- var renderInline = mergedContainer === false || (0, _mock.inlineMock)();
- var reffedChildren = children;
- if (ref) {
- reffedChildren = /*#__PURE__*/React.cloneElement(children, {
- ref: mergedRef
- });
- }
- return /*#__PURE__*/React.createElement(_Context.default.Provider, {
- value: queueCreate
- }, renderInline ? reffedChildren : /*#__PURE__*/(0, _reactDom.createPortal)(reffedChildren, mergedContainer));
- });
- if (process.env.NODE_ENV !== 'production') {
- Portal.displayName = 'Portal';
- }
- var _default = Portal;
- exports.default = _default;
|