@yandex/ui/esm/MessageBox/__examples__/withPopup.js

Yandex UI components

import { __read } from "tslib";
import React, { useRef, useState } from 'react';
import { MessageBoxPopup } from '@yandex-lego/components/MessageBox/desktop/bundle';
var DIRECTIONS = ['top', 'right', 'bottom', 'left'];
export var WithPopup = function () {
    var anchorRef = useRef(null);
    var _a = __read(useState(true), 2), isTopCenterVisible = _a[0], setIsTopCenterVisible = _a[1];
    var _b = __read(useState(true), 2), isRightCenterVisible = _b[0], setIsRightCenterVisible = _b[1];
    var _c = __read(useState(true), 2), isBottomCenterVisible = _c[0], setIsBottomCenterVisible = _c[1];
    var _d = __read(useState(true), 2), isLeftCenterVisible = _d[0], setIsLeftCenterVisible = _d[1];
    var isVisibleArr = [isTopCenterVisible, isRightCenterVisible, isBottomCenterVisible, isLeftCenterVisible];
    var showTopCenterPopup = React.useCallback(function () { return setIsTopCenterVisible(true); }, [setIsTopCenterVisible]);
    var hideTopCenterPopup = React.useCallback(function () { return setIsTopCenterVisible(false); }, [setIsTopCenterVisible]);
    var showRightCenterPopup = React.useCallback(function () { return setIsRightCenterVisible(true); }, [setIsRightCenterVisible]);
    var hideRightCenterPopup = React.useCallback(function () { return setIsRightCenterVisible(false); }, [setIsRightCenterVisible]);
    var showBottomCenterPopup = React.useCallback(function () { return setIsBottomCenterVisible(true); }, [setIsBottomCenterVisible]);
    var hideBottomCenterPopup = React.useCallback(function () { return setIsBottomCenterVisible(false); }, [setIsBottomCenterVisible]);
    var showLeftCenterPopup = React.useCallback(function () { return setIsLeftCenterVisible(true); }, [setIsLeftCenterVisible]);
    var hideLeftCenterPopup = React.useCallback(function () { return setIsLeftCenterVisible(false); }, [setIsLeftCenterVisible]);
    var showAllPopups = React.useCallback(function () {
        showTopCenterPopup();
        showRightCenterPopup();
        showBottomCenterPopup();
        showLeftCenterPopup();
    }, [showTopCenterPopup, showRightCenterPopup, showBottomCenterPopup, showLeftCenterPopup]);
    var hidePopupArr = [hideTopCenterPopup, hideRightCenterPopup, hideBottomCenterPopup, hideLeftCenterPopup];
    return (React.createElement("div", { style: { margin: 64, display: 'flex', justifyContent: 'center' } },
        React.createElement("div", { style: {
                background: '#e6e6e6',
                height: 60,
                width: 180,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                borderRadius: 3,
            }, ref: anchorRef, onClick: showAllPopups }, "Anchor"),
        DIRECTIONS.map(function (direction, index) { return (React.createElement(MessageBoxPopup, { key: index, visible: isVisibleArr[index], hasTail: true, direction: direction, anchor: anchorRef, view: "default", size: "s", onClose: hidePopupArr[index] }, direction)); })));
};