@yandex/ui
Version:
Yandex UI components
47 lines (46 loc) • 3.25 kB
JavaScript
import { __assign, __read, __rest, __spread } from "tslib";
import React, { useState, useRef, useEffect, } from 'react';
import { createPortal } from 'react-dom';
import { useComponentRegistry } from '@bem-react/di';
import { cn } from '@bem-react/classname';
import { canUseDOM } from '../lib/canUseDOM';
import { mergeAllRefs } from '../lib/mergeRefs';
import { LayerManager } from '../LayerManager/LayerManager';
import './Popup.css';
export var cnPopup = cn('Popup2');
/**
* Компонент для создания всплывающего окна (попапа).
* @param {IPopupProps} props
*/
export 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() ? 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 = __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 = __read(useState(true), 2), isFirstRender = _e[0], forceUpdate = _e[1];
var containerRef = useRef(null);
var Tail = useComponentRegistry(cnPopup()).Tail;
var hostRef = unstable_hostRef || containerRef;
useEffect(function () {
if (isFirstRender && visible) {
forceUpdate(false);
}
}, [isFirstRender, visible]);
if ((!visible && !keepMounted) || !canUseDOM() || scope.current === null || isFirstRender) {
return null;
}
return createPortal(React.createElement(LayerManager, { visible: visible, onClose: onClose, essentialRefs: __spread([hostRef], unstable_essentialRefs) },
React.createElement("div", __assign({}, props, { className: cnPopup({ visible: visible }, [className]), ref: mergeAllRefs(containerRef, innerRef), style: __assign(__assign({}, style), { zIndex: zIndex }), onClick: onClick }),
addonBefore,
typeof children === 'function' ? children({ tailRef: tailRef }) : children,
addonAfter,
unstable_onRenderTail &&
unstable_onRenderTail(React.createElement(Tail, { ref: tailRef, style: { height: tailSize, width: tailSize } })),
!unstable_onRenderTail && hasTail && (React.createElement(Tail, { ref: tailRef, style: { height: tailSize, width: tailSize } })))), scope.current);
};
Popup.displayName = cnPopup();