@yandex/ui
Version:
Yandex UI components
33 lines (32 loc) • 1.77 kB
JavaScript
import { __assign, __read, __rest } from "tslib";
import React, { useState } from 'react';
import { withZIndex } from '@yandex-lego/components/withZIndex';
import { Button } from '@yandex-lego/components/Button/desktop/bundle';
var Component = function (_a) {
var zIndex = _a.zIndex, innerRef = _a.innerRef, top = _a.top, left = _a.left, bgColor = _a.bgColor, style = _a.style, rest = __rest(_a, ["zIndex", "innerRef", "top", "left", "bgColor", "style"]);
return (React.createElement("div", __assign({ style: {
width: '50px',
height: '50px',
position: 'absolute',
top: top,
left: left,
backgroundColor: bgColor,
zIndex: zIndex,
}, ref: innerRef }, rest)));
};
var ComponentWithZIndex1 = withZIndex(Component);
var ComponentWithZIndex2 = withZIndex(Component);
export var Default = function () {
var _a = __read(useState(true), 2), first = _a[0], setFirst = _a[1];
var _b = __read(useState(true), 2), visible = _b[0], setVisible = _b[1];
var handleSwap = function () {
setFirst(function (prev) { return !prev; });
setVisible(false);
setTimeout(function () { return setVisible(true); }, 100);
};
return (React.createElement(React.Fragment, null,
React.createElement("div", { style: { position: 'relative', float: 'left' } },
React.createElement(ComponentWithZIndex1, { top: -10, left: 80, bgColor: "lightgray", visible: visible, zIndexGroupLevel: first ? 1 : 0 }),
React.createElement(ComponentWithZIndex2, { top: 0, left: 90, bgColor: "#fc0", visible: visible, zIndexGroupLevel: first ? 0 : 1 })),
React.createElement(Button, { view: "action", size: "m", onClick: handleSwap }, "Swap")));
};