@yandex/ui
Version:
Yandex UI components
43 lines (42 loc) • 3.32 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.WithPopup = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var bundle_1 = require("@yandex-lego/components/MessageBox/desktop/bundle");
var DIRECTIONS = ['top', 'right', 'bottom', 'left'];
var WithPopup = function () {
var anchorRef = react_1.useRef(null);
var _a = tslib_1.__read(react_1.useState(true), 2), isTopCenterVisible = _a[0], setIsTopCenterVisible = _a[1];
var _b = tslib_1.__read(react_1.useState(true), 2), isRightCenterVisible = _b[0], setIsRightCenterVisible = _b[1];
var _c = tslib_1.__read(react_1.useState(true), 2), isBottomCenterVisible = _c[0], setIsBottomCenterVisible = _c[1];
var _d = tslib_1.__read(react_1.useState(true), 2), isLeftCenterVisible = _d[0], setIsLeftCenterVisible = _d[1];
var isVisibleArr = [isTopCenterVisible, isRightCenterVisible, isBottomCenterVisible, isLeftCenterVisible];
var showTopCenterPopup = react_1.default.useCallback(function () { return setIsTopCenterVisible(true); }, [setIsTopCenterVisible]);
var hideTopCenterPopup = react_1.default.useCallback(function () { return setIsTopCenterVisible(false); }, [setIsTopCenterVisible]);
var showRightCenterPopup = react_1.default.useCallback(function () { return setIsRightCenterVisible(true); }, [setIsRightCenterVisible]);
var hideRightCenterPopup = react_1.default.useCallback(function () { return setIsRightCenterVisible(false); }, [setIsRightCenterVisible]);
var showBottomCenterPopup = react_1.default.useCallback(function () { return setIsBottomCenterVisible(true); }, [setIsBottomCenterVisible]);
var hideBottomCenterPopup = react_1.default.useCallback(function () { return setIsBottomCenterVisible(false); }, [setIsBottomCenterVisible]);
var showLeftCenterPopup = react_1.default.useCallback(function () { return setIsLeftCenterVisible(true); }, [setIsLeftCenterVisible]);
var hideLeftCenterPopup = react_1.default.useCallback(function () { return setIsLeftCenterVisible(false); }, [setIsLeftCenterVisible]);
var showAllPopups = react_1.default.useCallback(function () {
showTopCenterPopup();
showRightCenterPopup();
showBottomCenterPopup();
showLeftCenterPopup();
}, [showTopCenterPopup, showRightCenterPopup, showBottomCenterPopup, showLeftCenterPopup]);
var hidePopupArr = [hideTopCenterPopup, hideRightCenterPopup, hideBottomCenterPopup, hideLeftCenterPopup];
return (react_1.default.createElement("div", { style: { margin: 64, display: 'flex', justifyContent: 'center' } },
react_1.default.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_1.default.createElement(bundle_1.MessageBoxPopup, { key: index, visible: isVisibleArr[index], hasTail: true, direction: direction, anchor: anchorRef, view: "default", size: "s", onClose: hidePopupArr[index] }, direction)); })));
};
exports.WithPopup = WithPopup;