@yandex/ui
Version:
Yandex UI components
51 lines (50 loc) • 3.56 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Popup = exports.cnPopup = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var react_dom_1 = require("react-dom");
var di_1 = require("@bem-react/di");
var classname_1 = require("@bem-react/classname");
var canUseDOM_1 = require("../lib/canUseDOM");
var mergeRefs_1 = require("../lib/mergeRefs");
var LayerManager_1 = require("../LayerManager/LayerManager");
require("./Popup.css");
exports.cnPopup = classname_1.cn('Popup2');
/**
* Компонент для создания всплывающего окна (попапа).
* @param {IPopupProps} props
*/
var Popup = function (_a) {
var addonAfter = _a.addonAfter, addonBefore = _a.addonBefore, children = _a.children, className = _a.className, hasTail = _a.hasTail, innerRef = _a.innerRef, _b = _a.keepMounted, keepMounted = _b === void 0 ? true : _b, _c = _a.scope, scope = _c === void 0 ? { current: canUseDOM_1.canUseDOM() ? document.body : null } : _c, style = _a.style, tailRef = _a.tailRef, tailSize = _a.tailSize, visible = _a.visible, zIndex = _a.zIndex, unstable_onRenderTail = _a.unstable_onRenderTail, onClose = _a.onClose, _d = _a.unstable_essentialRefs, unstable_essentialRefs = _d === void 0 ? [] : _d, unstable_hostRef = _a.unstable_hostRef, onClick = _a.onClick,
// Извлекаем свойства, т.к. они не нужны на DOM узле
// FIXME: https://github.com/bem/bem-react/issues/381
// @ts-ignore
_theme = _a.theme,
// @ts-ignore
_view = _a.view,
// @ts-ignore
_nonvisual = _a.nonvisual, props = tslib_1.__rest(_a, ["addonAfter", "addonBefore", "children", "className", "hasTail", "innerRef", "keepMounted", "scope", "style", "tailRef", "tailSize", "visible", "zIndex", "unstable_onRenderTail", "onClose", "unstable_essentialRefs", "unstable_hostRef", "onClick", "theme", "view", "nonvisual"]);
var _e = tslib_1.__read(react_1.useState(true), 2), isFirstRender = _e[0], forceUpdate = _e[1];
var containerRef = react_1.useRef(null);
var Tail = di_1.useComponentRegistry(exports.cnPopup()).Tail;
var hostRef = unstable_hostRef || containerRef;
react_1.useEffect(function () {
if (isFirstRender && visible) {
forceUpdate(false);
}
}, [isFirstRender, visible]);
if ((!visible && !keepMounted) || !canUseDOM_1.canUseDOM() || scope.current === null || isFirstRender) {
return null;
}
return react_dom_1.createPortal(react_1.default.createElement(LayerManager_1.LayerManager, { visible: visible, onClose: onClose, essentialRefs: tslib_1.__spread([hostRef], unstable_essentialRefs) },
react_1.default.createElement("div", tslib_1.__assign({}, props, { className: exports.cnPopup({ visible: visible }, [className]), ref: mergeRefs_1.mergeAllRefs(containerRef, innerRef), style: tslib_1.__assign(tslib_1.__assign({}, style), { zIndex: zIndex }), onClick: onClick }),
addonBefore,
typeof children === 'function' ? children({ tailRef: tailRef }) : children,
addonAfter,
unstable_onRenderTail &&
unstable_onRenderTail(react_1.default.createElement(Tail, { ref: tailRef, style: { height: tailSize, width: tailSize } })),
!unstable_onRenderTail && hasTail && (react_1.default.createElement(Tail, { ref: tailRef, style: { height: tailSize, width: tailSize } })))), scope.current);
};
exports.Popup = Popup;
exports.Popup.displayName = exports.cnPopup();