@yandex/ui
Version:
Yandex UI components
66 lines (65 loc) • 3.94 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.WithPopup = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var desktop_1 = require("../../../MessageBox/MessageBox.bundle/desktop");
var examples_config_1 = require("../examples-config");
var Popup_1 = require("../../../Popup");
exports.default = {
title: examples_config_1.EXAMPLE_DESKTOP_TOKEN,
};
var scopeRef = react_1.createRef();
var anchorRef = react_1.createRef();
var smallAnchorRef = react_1.createRef();
var zIndexAnchorRef = react_1.createRef();
var WithPopup = function () {
var _a = tslib_1.__read(react_1.useState(true), 2), arePopupsVisible = _a[0], setPopupsVisible = _a[1];
var _b = tslib_1.__read(react_1.useState(true), 2), areSmallAnchorPopupsVisible = _b[0], setSmallAnchorPopupsVisible = _b[1];
var _c = tslib_1.__read(react_1.useState(true), 2), withZIndexVisible = _c[0], setWithZIndexVisible = _c[1];
return (react_1.default.createElement("div", { style: {
position: 'relative',
margin: 64,
display: 'grid',
gridTemplateRows: '400px 250px 250px',
justifyContent: 'center',
}, ref: scopeRef },
react_1.default.createElement("div", { style: {
background: '#e6e6e6',
height: 200,
width: 400,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 3,
}, ref: anchorRef, onClick: function () { return setPopupsVisible(!arePopupsVisible); } }, "Anchor"),
Popup_1.directions.map(function (direction, index) { return (react_1.default.createElement(desktop_1.MessageBoxPopup, { key: index, visible: arePopupsVisible, hasTail: true, scope: scopeRef, direction: direction, anchor: anchorRef, view: "default", size: "s", onClose: function () { return setPopupsVisible(false); } }, direction)); }),
react_1.default.createElement("div", { style: {
background: '#000',
height: 10,
width: 10,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 3,
}, ref: smallAnchorRef, onClick: function () { return setSmallAnchorPopupsVisible(!areSmallAnchorPopupsVisible); } }),
react_1.default.createElement(desktop_1.MessageBoxPopup, { secondaryOffset: -20, tailOffset: 20, visible: areSmallAnchorPopupsVisible, hasTail: true, scope: scopeRef, direction: "bottom-end", anchor: smallAnchorRef, view: "default", size: "s" }, "bottom-right"),
react_1.default.createElement(desktop_1.MessageBoxPopup, { secondaryOffset: -20, tailOffset: 20, visible: areSmallAnchorPopupsVisible, hasTail: true, scope: scopeRef, direction: "top-start", anchor: smallAnchorRef, view: "default", size: "s" }, "bottom-right"),
react_1.default.createElement("div", { style: {
background: '#F08080',
display: 'flex',
justifyContent: 'center',
zIndex: 10,
} },
react_1.default.createElement("div", { style: {
background: '#000',
height: 30,
width: 30,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 3,
}, ref: zIndexAnchorRef, onClick: function () { return setWithZIndexVisible(!withZIndexVisible); } }),
react_1.default.createElement(desktop_1.MessageBoxPopup, { visible: withZIndexVisible, hasTail: true, scope: scopeRef, direction: "bottom", anchor: zIndexAnchorRef, view: "default", size: "s", onClose: function () { return setWithZIndexVisible(false); } }, "With ZIndex"))));
};
exports.WithPopup = WithPopup;