@yandex/ui
Version:
Yandex UI components
62 lines (61 loc) • 3.59 kB
JavaScript
import { __read } from "tslib";
import React, { createRef, useState } from 'react';
import { MessageBoxPopup } from '../../../MessageBox/MessageBox.bundle/desktop';
import { EXAMPLE_DESKTOP_TOKEN } from '../examples-config';
import { directions } from '../../../Popup';
export default {
title: EXAMPLE_DESKTOP_TOKEN,
};
var scopeRef = createRef();
var anchorRef = createRef();
var smallAnchorRef = createRef();
var zIndexAnchorRef = createRef();
export var WithPopup = function () {
var _a = __read(useState(true), 2), arePopupsVisible = _a[0], setPopupsVisible = _a[1];
var _b = __read(useState(true), 2), areSmallAnchorPopupsVisible = _b[0], setSmallAnchorPopupsVisible = _b[1];
var _c = __read(useState(true), 2), withZIndexVisible = _c[0], setWithZIndexVisible = _c[1];
return (React.createElement("div", { style: {
position: 'relative',
margin: 64,
display: 'grid',
gridTemplateRows: '400px 250px 250px',
justifyContent: 'center',
}, ref: scopeRef },
React.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"),
directions.map(function (direction, index) { return (React.createElement(MessageBoxPopup, { key: index, visible: arePopupsVisible, hasTail: true, scope: scopeRef, direction: direction, anchor: anchorRef, view: "default", size: "s", onClose: function () { return setPopupsVisible(false); } }, direction)); }),
React.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.createElement(MessageBoxPopup, { secondaryOffset: -20, tailOffset: 20, visible: areSmallAnchorPopupsVisible, hasTail: true, scope: scopeRef, direction: "bottom-end", anchor: smallAnchorRef, view: "default", size: "s" }, "bottom-right"),
React.createElement(MessageBoxPopup, { secondaryOffset: -20, tailOffset: 20, visible: areSmallAnchorPopupsVisible, hasTail: true, scope: scopeRef, direction: "top-start", anchor: smallAnchorRef, view: "default", size: "s" }, "bottom-right"),
React.createElement("div", { style: {
background: '#F08080',
display: 'flex',
justifyContent: 'center',
zIndex: 10,
} },
React.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.createElement(MessageBoxPopup, { visible: withZIndexVisible, hasTail: true, scope: scopeRef, direction: "bottom", anchor: zIndexAnchorRef, view: "default", size: "s", onClose: function () { return setWithZIndexVisible(false); } }, "With ZIndex"))));
};